Template plugin no longer show up in richtext toolbar

bjarnef commented 1 week ago

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

13.3.2

Bug summary

In a Umbraco v12.3.10 we used Template plugin, which show up in richtext editor toolbar.

In Umbraco v13.3.2 we have enabled the Template plugin, which show up in configuration.

However it doesn't show up in richtext editor toolbar.

"RichTextEditor": {
  "CustomConfig": {
    "formats": "{\"cite\":{\"block\":\"cite\"}},\"checklist\":{\"block\":\"ul\",\"classes\":\"check-list\"}",
    "style_formats": "[{\"title\":\"Paragraph\",\"format\":\"p\"},{\"title\":\"Blockquote\",\"format\":\"blockquote\"},{\"title\":\"Cite\",\"format\":\"cite\"},{\"title\":\"Code\",\"format\":\"code\"},{\"title\":\"Headers\",\"items\":[{\"title\":\"Heading h1\",\"block\":\"h1\"},{\"title\":\"Heading h2\",\"block\":\"h2\"},{\"title\":\"Heading h3\",\"block\":\"h3\"},{\"title\":\"Heading h4\",\"block\":\"h4\"},{\"title\":\"Heading h5\",\"block\":\"h5\"},{\"title\":\"Heading h6\",\"block\":\"h6\"}]},{\"title\":\"Checkmark list ✓\",\"format\":\"checklist\"}]",
    "templates": "[{\"title\":\"Checkmark list\",\"description\":\"Unordnered list with checkmark bullets\",\"url\":\"/App_Plugins/MCB.Umbraco.RTE/Templates/unordered-list-checkmark.html\"}]"
  },
  "Commands": [
    {
      "Alias": "blockquote",
      "Name": "Blockquote",
      "Mode": "Selection"
    },
    {
      "Alias": "template",
      "Name": "Template",
      "Mode": "All"
    }
  ]
}

Specifics

No response

Steps to reproduce

Enabled template plugin of richtext editor.

Expected result / actual result

No response

github-actions[bot] commented 1 week ago

Hi there @bjarnef!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Umbraco better.

We really appreciate your patience while we wait for our team to have a look at this but we wanted to let you know that we see this and share with you the plan for what comes next.

We'll assess whether this issue relates to something that has already been fixed in a later version of the release that it has been raised for.
If it's a bug, is it related to a release that we are actively supporting or is it related to a release that's in the end-of-life or security-only phase?
We'll replicate the issue to ensure that the problem is as described.
We'll decide whether the behavior is an issue or if the behavior is intended.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of contributions to work with and only a few humans who are able to do it. We are making progress though and in the meantime, we will keep you in the loop and let you know when we have any questions.

Thanks, from your friendly Umbraco GitHub bot :robot: :slightly_smiling_face:

bjarnef commented 1 week ago

I was a bit too fast here. It also need the actual template plugin enabled.

"RichTextEditor": {
  "CustomConfig": {
    "formats": "{\"cite\":{\"block\":\"cite\"}},\"checklist\":{\"block\":\"ul\",\"classes\":\"check-list\"}",
    "style_formats": "[{\"title\":\"Paragraph\",\"format\":\"p\"},{\"title\":\"Blockquote\",\"format\":\"blockquote\"},{\"title\":\"Cite\",\"format\":\"cite\"},{\"title\":\"Code\",\"format\":\"code\"},{\"title\":\"Headers\",\"items\":[{\"title\":\"Heading h1\",\"block\":\"h1\"},{\"title\":\"Heading h2\",\"block\":\"h2\"},{\"title\":\"Heading h3\",\"block\":\"h3\"},{\"title\":\"Heading h4\",\"block\":\"h4\"},{\"title\":\"Heading h5\",\"block\":\"h5\"},{\"title\":\"Heading h6\",\"block\":\"h6\"}]},{\"title\":\"Checkmark list ✓\",\"format\":\"checklist\"}]",
    "templates": "[{\"title\":\"Checkmark list\",\"description\":\"Unordnered list with checkmark bullets\",\"url\":\"/App_Plugins/MCB.Umbraco.RTE/Templates/unordered-list-checkmark.html\"}]"
  },
  "Commands": [
    {
      "Alias": "blockquote",
      "Name": "Blockquote",
      "Mode": "Selection"
    },
    {
      "Alias": "template",
      "Name": "Template",
      "Mode": "All"
    }
  ],
  "Plugins": [
    "template"
  ]
}

iOvergaard commented 1 week ago

Hi @bjarnef, could this be related to #16602 ?

bjarnef commented 1 week ago

Hi @iOvergaard

It could be related, but actually I missed this part:

"Plugins": [
  "template"
]

However I am not sure how we can style the template HTML. I tried including link to rte.css, include a <style> block in <head> and <body>, but it seems TinyMCE strip this.

So visually it is not great to content editor as it show the default HTML rendered.

But I do get the rte.css when inserting template in editor.

However it does seems to mess up a bit with styled configured in appsettings.json.

bjarnef commented 1 week ago

These seems to be default though.

I also noticed the "Pre" style block has some scrollbar.

which it inherits from the global pre element style.

bjarnef commented 1 week ago

This configuration I have at the moment:

"RichTextEditor": {
  "CustomConfig": {
    "formats": "{\"cite\":{\"block\":\"cite\"}},\"checklist\":{\"block\":\"ul\",\"classes\":\"check-list\"},\"arrowlist\":{\"block\":\"ul\",\"classes\":\"arrow-list\"},\"numberlist\":{\"block\":\"ol\",\"classes\":\"number-list\"}",
    "style_formats": "[{\"title\":\"Paragraph\",\"format\":\"p\"},{\"title\":\"Blockquote\",\"format\":\"blockquote\"},{\"title\":\"Cite\",\"format\":\"cite\"},{\"title\":\"Code\",\"format\":\"code\"},{\"title\":\"Headers\",\"items\":[{\"title\":\"Heading h1\",\"block\":\"h1\"},{\"title\":\"Heading h2\",\"block\":\"h2\"},{\"title\":\"Heading h3\",\"block\":\"h3\"},{\"title\":\"Heading h4\",\"block\":\"h4\"},{\"title\":\"Heading h5\",\"block\":\"h5\"},{\"title\":\"Heading h6\",\"block\":\"h6\"}]},{\"title\":\"Checkmark list ✓\",\"format\":\"checklist\"},{\"title\":\"Arrow list →\",\"format\":\"arrowlist\"},\"format\":\"numberlist\"},{\"title\":\"Number list ➀\",\"format\":\"numberlist\"}]",
    "templates": "[{\"title\":\"Checkmark list\",\"description\":\"Unordnered list with checkmark bullets\",\"url\":\"/App_Plugins/MCB.Umbraco.RTE/Templates/unordered-list-checkmark.html\"},{\"title\":\"Arrow list\",\"description\":\"Unordnered list with arrow bullets\",\"url\":\"/App_Plugins/MCB.Umbraco.RTE/Templates/unordered-list-arrow.html\"},{\"title\":\"Number list\",\"description\":\"Ordnered list with numbers\",\"url\":\"/App_Plugins/MCB.Umbraco.RTE/Templates/ordered-list-number.html\"}]"
  },
  "Commands": [
    {
      "Alias": "blockquote",
      "Name": "Blockquote",
      "Mode": "Selection"
    },
    {
      "Alias": "template",
      "Name": "Template",
      "Mode": "All"
    }
  ],
  "Plugins": [
    "template"
  ]
},

Update: It has a syntax error. It is now this:

"RichTextEditor": {
  "CustomConfig": {
    "formats": "{\"cite\":{\"block\":\"cite\"}},\"checklist\":{\"block\":\"ul\",\"classes\":\"check-list\"},\"arrowlist\":{\"block\":\"ul\",\"classes\":\"arrow-list\"},\"numberlist\":{\"block\":\"ol\",\"classes\":\"number-list\"}",
    "style_formats": "[{\"title\":\"Paragraph\",\"format\":\"p\"},{\"title\":\"Blockquote\",\"format\":\"blockquote\"},{\"title\":\"Cite\",\"format\":\"cite\"},{\"title\":\"Code\",\"format\":\"code\"},{\"title\":\"Headers\",\"items\":[{\"title\":\"Heading h1\",\"block\":\"h1\"},{\"title\":\"Heading h2\",\"block\":\"h2\"},{\"title\":\"Heading h3\",\"block\":\"h3\"},{\"title\":\"Heading h4\",\"block\":\"h4\"},{\"title\":\"Heading h5\",\"block\":\"h5\"},{\"title\":\"Heading h6\",\"block\":\"h6\"}]},{\"title\":\"Checkmark list ✓\",\"format\":\"checklist\"},{\"title\":\"Arrow list →\",\"format\":\"arrowlist\"},{\"title\":\"Number list ➀\",\"format\":\"numberlist\"}]",
    "templates": "[{\"title\":\"Checkmark list\",\"description\":\"Unordnered list with checkmark bullets\",\"url\":\"/App_Plugins/MCB.Umbraco.RTE/Templates/unordered-list-checkmark.html\"},{\"title\":\"Arrow list\",\"description\":\"Unordnered list with arrow bullets\",\"url\":\"/App_Plugins/MCB.Umbraco.RTE/Templates/unordered-list-arrow.html\"},{\"title\":\"Number list\",\"description\":\"Ordnered list with numbers\",\"url\":\"/App_Plugins/MCB.Umbraco.RTE/Templates/ordered-list-number.html\"}]"
  },
  "Commands": [
    {
      "Alias": "blockquote",
      "Name": "Blockquote",
      "Mode": "Selection"
    },
    {
      "Alias": "template",
      "Name": "Template",
      "Mode": "All"
    }
  ],
  "Plugins": [
    "template"
  ]
}

However it is odd these are disabled. I think they used to work and be able on ul, ol or depending on the selector allowing the format.

umbraco / Umbraco-CMS