support tinymce style_formats_merge so that we can have default and rte.css defined styles?

[mistyn8]

https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#style_formats_merge

[iOvergaard]

You can set this in appsettings in the custom style options, but I wonder if it would help people to include options like this on the property editor configuration for Rich Text Editor. How do you plan on using this, if I may ask, @mistyn8?

[mistyn8]

My thoughts are it can be used as a flag to merge style_formats with /**umb_name:heading 2*/** from the associated rte style sheets. At present it's if there are rte.css styles then all others are dropped. (you might want editor control on some but some required, and the added functionality of style_formats over the parsing of umb_name)

// if we have style_formats at this point they originate from the RTE CSS config. we don't want any custom
          // style_formats to interfere with the RTE CSS config, so let's explicitly remove the custom style_formats.
          if(tinyMceConfig.customConfig.style_formats && config.style_formats && config.style_formats.length){
            delete tinyMceConfig.customConfig.style_formats;
          }

https://github.com/umbraco/Umbraco-CMS/blob/contrib/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js#L449-L453

I also had a thought to extend parsing of the /*umb_name:heading 2/ as currently it's restricted to just selected span for classes.. so you can't do something like alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video', classes: 'left' }, you can only get it to add a nested span with the alignleft which isn't always what you want.

And Tiny mce now supports grouping of these styles..

style_formats: [
  { title: 'Headings', items: [
    { title: 'Heading 1', format: 'h1' },
    { title: 'Heading 2', format: 'h2' },
    { title: 'Heading 3', format: 'h3' },
    { title: 'Heading 4', format: 'h4' },
    { title: 'Heading 5', format: 'h5' },
    { title: 'Heading 6', format: 'h6' }
  ]},
  { title: 'Inline', items: [
    { title: 'Bold', format: 'bold' },
    { title: 'Italic', format: 'italic' },
    { title: 'Underline', format: 'underline' },
    { title: 'Strikethrough', format: 'strikethrough' },
    { title: 'Superscript', format: 'superscript' },
    { title: 'Subscript', format: 'subscript' },
    { title: 'Code', format: 'code' }
  ]},
  { title: 'Blocks', items: [
    { title: 'Paragraph', format: 'p' },
    { title: 'Blockquote', format: 'blockquote' },
    { title: 'Div', format: 'div' },
    { title: 'Pre', format: 'pre' }
  ]},
  { title: 'Align', items: [
    { title: 'Left', format: 'alignleft' },
    { title: 'Center', format: 'aligncenter' },
    { title: 'Right', format: 'alignright' },
    { title: 'Justify', format: 'alignjustify' }
  ]}
]

https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#style_formats