Apply OP CSS classes to all the ckEditor elements with semantic value (p, hx, blockquote...) during the edition (editing view). All element types would have always the same custom class (all p would always have .op-paragraph…).

\* With table we might need to be able to target both <table> as well as <tr> and probably even <td>.

Targeted elements: <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <li>, <a>, <img>, <table>, <td> (more important than tr), <tr>, <blockquote>, <code>, <code-block>, <figure>, first child of the figure should have its own class, container (document-editor\_\_editable-container).

###

TODO:

**FrontEnd:**

* [x] <p> (.op-uc-p)
* [x] <h1> (.op-uc-h1)
* [x] <h2> (.op-uc-h2)
* [x] <h3> (.op-uc-h3)
* [x] <h4> (.op-uc-h4)
* [x] <h5> (.op-uc-h5)
* [x] <h6> (.op-uc-h6)
* [x] <a> (.op-uc-link)
* [x] <li> (.op-uc-list--item)
* [x] <blockquote> (.op-uc-blockquote)
* [ ] ~~<macro class=".-toc"> (.op-uc-toc, .op-uc-toc--list, .op-uc-toc--list-item)~~
* [x] <code> (.op-uc-code)
* [x] <td> (.op-uc-table--cell)
* [x] <tr> (.op-uc-table--row)
* [x] <th> (.op-uc-table--cell .op-uc-table--cell\_head)
* [x] This is currently not working on head columns, only on head rows.
* [x] <ul> (.op-uc-list)
* [x] <ol>  (.op-uc-list)
* [x] <figure> (.op-uc-figure, .op-uc-figure--content, .op-uc-figure--description)
* [x] The container element (.op-uc-container)
* [x] <macro>
* [x] Apply op-uc-placeholder to all the macros.
* [x] Remove other custom classes applied.
* [x] <code-block> (<pre> .op-uc-code-block </pre>)
* [x] task ul (.op-uc-task-list)
* [ ] ~~checkbox (.op-uc-task-list--checkbox)~~
* [x] <thead> (.op-uc-table--head)
* [x] <figure> (.op-uc-figure\_align-center &\_align-start &\_align-end)
* [x] Fix editor crashing when having cursor inside <code>
* [x] List items always added to a new list
* [x] Add block and modifier to container (op-uc-container op-uc-container\_editing)
* [x] Fix: switching from todo list to other raises error.
* [x] Error when adding ToC:
* [x] sync dev y commonmark repos
* [x] Adding a figcaption actually adds the figcaption text twice ([https://community.openproject.com/projects/openproject/work\_packages/35123](https://community.openproject.com/projects/openproject/work_packages/35123))
* [x] Tests
* [x] op-uc-list\_task-list not applied in edit mode
* [x] <img> (.op-uc-image)
* [x] image should be wrapped inside a div with op-uc-figure--content
* [x] <table> (.op-uc-table)
* [x] for better overflowing, table should be wrapped in a div called op-uc-figure--content, not be the content itself Begin of the insertion
* [ ] Add macro type name class to macros

End of the insertion Begin of the deletion

End of the deletion **BackEnd:**

* [x] <p> (.op-uc-p)
* [x] <h1> (.op-uc-h1)
* [x] <h2> (.op-uc-h2)
* [x] <h3> (.op-uc-h3)
* [x] <h4> (.op-uc-h4)
* [x] <h5> (.op-uc-h5)
* [x] <h6> (.op-uc-h6)
* [x] <a> (.op-uc-link)
* [x] <li> (.op-uc-list--item)
* [x] <blockquote> (.op-uc-blockquote)
* [x] <code-block> (.op-uc-code-block)
* [x] <macro class=".-toc"> (.op-uc-toc, .op-uc-toc--list, .op-uc-toc--list-item)
* [x] <code> (.op-uc-code)
* [x] <img> (.op-uc-image and op-uc-figure--content)
* [x] <table> (.op-uc-table and op-uc-figure--content)
* [x] <td> (.op-uc-table--cell)
* [x] <tr> (.op-uc-table--row)
* [x] <th> (.op-uc-table--cell .op-uc-table--cell\_head)
* [ ] ~~<thead> (.op-uc-table--row)~~
* [x] <ul> (.op-uc-list)
* [x] <ol>  (.op-uc-list)
* [x] <figure> (.op-uc-figure, .op-uc-figure--content, .op-uc-figure--description)
* [x] The container element (.op-uc-container)
* [x] <thead> (.op-uc-table--head)
* [x] `op-uc-container` element is getting a `highlight`
* [ ] Embedded-table macro rendered in display mode (only apply '.op-uc-placeholder' class in editing mode). Begin of the insertion
* [ ] Remove duplicated op-uc-figure class on table figuresEnd of the insertion

**NOTES:**

* Build latest to branch Branch fix/update-wysiwyg-styles