Rich text editor style selection bug

[skosarin]

Basically if you have multiple style types on the same HTML tag, like

{
  tag: 'p',
  label: 'Paragraph (P)',
  def: true,
},
{
  tag: 'p',
  label: 'Small (P)',
  class: 'small',
},

When you select Small (P) in the style picker dropdown it'll change the style, but the picker will mark Paragraph (P) as selected, which means you can't undo it. You need to select a different tag entirely, like

{
  tag: 'h2',
  label: 'Heading 2 (H2)',
},

and THEN you can select the original Paragraph (P) to revert the style selection

**Posted this to the discord and Alex Bea requested a github issue

[skosarin]

we added def: true around 3.7 to fix a similar issue

[abea]

This does seem to be a bug. I'll log it for work. I think what is happening is that the logic for finding the active style stops as soon as it finds a match. Since the plain paragraph matches (only not as well) it shows that one.

https://github.com/apostrophecms/apostrophe/blob/main/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapStyles.vue#L49-L61

[VanshSutariya]

I'd like to work on this issue, can someone assign me or should i raise direct PR ?

[BoDonkey]

Hi @VanshSutariya, We don't use the assign feature in GitHub. You can just go ahead and work on the issue and raise a PR. You can either let us know here or in Discord when you are ready for review. Note the instructions in the PR template. You should update the changelog and note you are responding to this issue. Thanks!

[boutell]

I think the best solution to this would be to test them in descending order of complexity, rather than the order they appear in the styles array. Sort the styles by the number of classes they have in class, with no class property being zero, and test in that order; first match ends the search.