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)
* Begin of the deletion [ ] Fix editor crashing when having cursor inside <code>
* End of the deletion [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)
* [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) Begin of the insertion
* [ ] Fix editor crashing when having cursor inside <code>End of the insertion
* [ ] `op-uc-container` element is getting a `highlight`
* [ ] List items always added to a new list
* [ ] sync dev y commonmark repos
* [ ] 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] Add block and modifier to container (op-uc-container op-uc-container\_editing)

**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)
* [ ] <thead> (.op-uc-table--head)

**NOTES:**

* How to create modifier classes for figures `.op-uc-figure_align-center` `&_align-start` `&_align-end`?
* Build latest to branch Branch fix/update-wysiwyg-styles
* .op-uc-container
  .op-uc-h1
  .op-uc-p
  .op-uc-blockquote
    .op-uc-xxx
  .op-uc-figure
    .op-uc-figure--content (&.op-uc-table)
    .op-uc-figure--description
* https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/conversion/conversion-extending-output.html#adding-a-css-class-to-block-elements
* https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/conversion/conversion-extending-output.html