Grid Editor TinyMCE's styleselect toolbar button is missing

[PMendesWebDev]

Summary

Somewhere in the past week (not sure if it was related to the changes in Aug 13 and Aug 15) the styleselect button disappeared from the tinyMCE's toolbar.

The other buttons (ace, bold, italic, link, etc) are shown but the style dropdown is not.

I've already tried to change the stylesheet to a simple one (it could be something in the css) and also tried to debug @headless-backoffice-bridge javascript code (the stylesheets and toolbar properties are correctly populated).

This is a blocking issue for our editors.

Steps to reproduce

The existing grid editor "Rich Text Editor" can be used. Add a stylesheet to the #stylesheets in line 26 and use the grid in a document type.

Expected result

The toolbar should contain all the buttons defined in #toolbar array

Actual result

The toolbar contain all the buttons defined in #toolbar array except for the styleselect

[github-actions[bot]]

Hi there @PMendesWebDev!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Heartcore 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 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.
• If we need any further information, we'll reach out with any questions.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of feedback to work with and only a few humans who are able to do anything with it. We are making progress though, and we'll keep you posted when we have something to report!

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[jmf-umbraco]

Hi @PMendesWebDev,

Thanks for the report. We've tried to reproduce your issue and have been unable to so far. Let me run what we're doing by you to make sure it lines up with your process.

First, we have a custom RTE stylesheet

On our RTE data type, we have enabled this stylesheet (and also made sure the 'Style select' option is checked)

However when editing our content item, we get the style dropdown appear with our custom styles as expected.

Is there anything you're doing differently from the above? If you're following these exact steps, then I think we're going to be better off addressing this in a support ticket as it's likely to be something affecting your specific site.

[PMendesWebDev]

hey there @jmf-umbraco thank you for replying.

this is an issue with the Grid Editor RTE, not the data type RTE

To correctly reproduce this issue, you have to use the grid layout with this grid editor available

I understand the Grid Layout was deprecated, could this be the issue? We would love to use the new Block Grid but we have to much content using the old Grid Layout property editor

[jmf-umbraco]

Ah, my apologies - missed entirely that we were talking about grid. In that case we'll take another shot at figuring out the root cause.

[PMendesWebDev]

hey there @jmf-umbraco

do you have any updates on this issue? It's currently blocking our content editors because they can't create new articles without styling them

[jmf-umbraco]

Hi @PMendesWebDev, we've managed to create a repro so will be working on a fix this week. No ETA just yet, but we'll prioritise it above everything else and will let you know as soon as we have an update.

[jmf-umbraco]

It looks like the name for the toolbar item has changed from styleselect to simply styles. As a workaround you can update your RTE grid editors to use that instead.

E.g:

export default class extends LitElement {
  static properties = {
    value: { type: String }
  }

  #toolbar = [
    'ace',
    'styles', // use this instead of 'styleselect'
    'bold',
    'italic'
    // additional items omitted from sample
  ]

  #stylesheets = [
    'RTE'
  ]

  createRenderRoot() { return this }

  render() {
    return html`<umbh-tinymce mode="classic" max-image-size="500" .stylesheets=${this.#stylesheets} .toolbar=${this.#toolbar} .value=${this.value} @input=${e => this.value = e.target.value}></umbh-tinymce>`
   }
}

We'll look a bit further into why this change came about, but if the above works for you, we will likely de-prioritise a fix for the root cause.

[PMendesWebDev]

hey @jmf-umbraco

I can confirm the styles dropdown appears after changing the name in the toolbar.

However, they aren't working: if I select a style it applies to whole text and the source code remains untouched (even after saving). A pretty strange behavior:

the highlight css rule is this:

[jmf-umbraco]

We didn't notice the same while testing, but I'll admit we perhaps weren't thorough enough once we determined the dropdown was available again!

We'll take a further look 😄

[jmf-umbraco]

Alright, there are two factors that result in the behaviour you're seeing.

The first is that the styles apply to the whole element, even if you've only selected a small part of it. Since your HTML is all contained in a single paragraph with line breaks, it all gets changed at once. This is a little unintuitive, but I've confirmed it was also the case prior to the recent upgrade (I'm testing on an older site to be certain), and is also the case for the regular rich text editor data type. When hitting enter, the typical behaviour is to break each line into a seperate paragraph, so my assumption is that you're generally going to see this behaviour with pasted markup.

It's also possible to (unfortunately by editing the markup directly) introduce additional elements, such as <span>s within a paragraph. Then when selecting the style with part of the enclosed markup, only the contents of the <span> will change.

The second thing that is happening is that the RTE doesn't recognize <mark> as a valid HTML element, which is why you don't see the markup change and why nothing different is saved.

I'm going to take forward two backlog items as part of this:

• We'll look into improving support for less common HTML elements, including <mark>
• We'll also see whether there is anything we can do about e.g. creating a new inline element such as <span> automatically when selecting only a small part of the text.

I can't guarantee we'll be able to do the second one, and unfortunately I don't have a timeframe for when we can do either, but will update here as soon as we know more.

In the meantime, if the above doesn't help get your content authors unblocked, let me know and we'll see what else we can do.

[PMendesWebDev]

Regarding the backlog items:

We'll look into improving support for less common HTML elements, including

Strange thing here is that the was working fine until a couple of weeks.. but we can work with this :)

We'll also see whether there is anything we can do about e.g. creating a new inline element such as automatically when selecting only a small part of the text.

If you use a class selector, the selected text automatically applies a <span class="RULE"> to it. So I believe this is already working as intended

So, thank you for the support @jmf-umbraco Our content editors will be unblocked :D

[jmf-umbraco]

That's great to hear 😄

I'll keep this issue open though to track the two changes I mentioned above.