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)
* [ ] <a> (.op-uc-link)
* [x] <li> (.op-uc-list--item)
* [x] <blockquote> (.op-uc-blockquote)
* [ ] <code-block> (.op-uc-code-block)
* [ ] Begin of the insertion~~<macroEnd of the insertion Begin of the deletion <macroEnd of the deletion class=".-toc"> (.op-uc-toc, .op-uc-toc--list, Begin of the insertion.op-uc-toc--list-item)~~End of the insertion Begin of the deletion .op-uc-toc--list-item)End of the deletion
* [ ] <code> (.op-uc-code)
* [ ] <img> (.op-uc-image)
* [ ] <table> (.op-uc-table)
* [ ] <td> (.op-uc-table--cell)
* [ ] <tr> (.op-uc-table--row)
* [ ] <ul> (.op-uc-list)
* [ ] <ol>  (.op-uc-list)
* [ ] <figure> (.op-uc-figure, .op-uc-figure--content, .op-uc-figure--description)
* [ ] The container element (.op-uc-container) Begin of the insertion
* [ ] <macro>
* [ ] Apply op-uc-placeholder to all the macros.
* [ ] Remove other custom classes applied.End of the insertion

**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)
* [ ] <a> (.op-uc-link)
* [ ] <li> (.op-uc-list--item)
* [x] <blockquote> (.op-uc-blockquote)
* [x] <code-block> (.op-uc-code-block)
* [ ] <macro class=".-toc"> (.op-uc-toc, .op-uc-toc--list, .op-uc-toc--list-item)
* [x] <code> (.op-uc-code)
* [ ] <img> (.op-uc-image)
* [ ] <table> (.op-uc-table)
* [ ] <td> (.op-uc-table--cell)
* [ ] <tr> (.op-uc-table--row)
* [ ] <ul> (.op-uc-list)
* [ ] <ol>  (.op-uc-list)
* [ ] <figure> (.op-uc-figure, .op-uc-figure--content, .op-uc-figure--description)
* [ ] The container element (.op-uc-container) Begin of the insertion



End of the insertion Begin of the deletion

End of the deletion **NOTES:**

Begin of the deletion * Only apply op-uc-placeholder to all the macro.
End of the deletion * 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