When pressing Enter in an H3 or other non-default text element, inline styles should not carry forward to the new paragraph tag that follows

[nicholasbester]

Applies to ApostropheCMS 4.2.3

To Reproduce

Step by step instructions to reproduce the behavior:

Ensure you have a styles within your rich text widget include inline styles effecting spans:

styles: [
    {
      tag: 'h1',
      label: 'Heading (h1)'
    },
    {
      tag: 'p',
      label: 'Paragraph (P)'
    },
    {
      tag: 'span',
      label: 'Highlight Orange (Span)',
      class: 'orange'
    }
  ]

1. Add a rich text area on the display
2. Set the text style to a heading tag (h1 etc...) and type out a basic heading
3. Highlight the heading and add inline styles. (In my case this is setting "Highlight Orange (Span)" the "orange" class)
4. Once this is added, press the "Enter" key on the keyboard which takes you to the new line
5. Typing on the new line retains the inline styles

Expected behavior

The expected behaviour is that the highlighted span shouldn't exist on the next line after "Enter" is pressed and it should revert to a default format

Describe the bug

In most rich text editors, once a user presses the enter key, they are exiting the formatting of the previous line to start a newly formatted line.

Details

Version of Node.js: v20.13.1

Server Operating System: MacOS X for local development and running on ApostropheCMS for staging and production

Additional context: Happens in Google Chrome but I think this is specific to the editor. Running latest ApostropheCMS 4.2.3

Screenshots Adding text to the display and setting it to be highlighted in orange

Pressing the "Enter" key takes me to the new line and essentially I should outside of the span of the previous line

Video https://github.com/apostrophecms/apostrophe/assets/1872093/f8e94170-83f7-4048-bb6b-4cab8d75d195

[boutell]

Hi Nick,

I was surprised by this report because I don't see this behavior in google docs, word, etc. If you apply an inline style then you have that style continuously even if you press enter and keep typing on a new line etc. I think this is the behavior that tiptap is designed to emulate. So I'm going to remove the bug label.

I am curious though to know which editors behave as you describe. It's possible this is an area where users may have varying preferences that could be supported.

[nicholasbester]

This generally happens when you have a heading and you're applying the highlight to that heading text and then press enter which converts you to paragraph format. In MS Word, if you type out a Heading 1, then change the colour, followed by pressing enter, you'll be switched back to the default colour.

It's a specific edge case I guess...

[boutell]

I see what you mean. Google Docs works this way too. However if you start out in ordinary text mode and hit enter it keeps the current inline style. The change occurs only when you transition to a different block element.

I think this is a reasonable feature request and a possible area for a community contribution. Might be an optional behavior. Curious what @stuartromanek and @BoDonkey think.

[BoDonkey]

Not sure if you meant me @boutell! I have to say that I would expect the behavior shown in the screenshot. Instead, if you go from a heading with a span adding inline styling to a new paragraph by hitting return you end up with something like <h3><span class="red">My Title</span></h3><p><span class="red">My paragraph</span></p> which is a little odd. I would expect a plain p tag. Reasonable request for a community contribution.

[boutell]

Good to have another take! And of course the fact that Word and Docs both do it is a big point in favor.

[stuartromanek]

Generally I think what is happening is the correct behavior, the inline style following the line break.

@nicholasbester and @BoDonkey you are both describing a different behavior, one which resets any inline selections at the close of a block, which I think is reasonable and actually what MSWord and GDocs are implementing.

I do lean more towards labeling that a bug

[boutell]

Nick I updated the title and restored the "bug" label, would you please update your example in the description so that it clearly involves transitioning from a heading? The existing example just has paragraphs, and in that situation it's correct behavior.

[stuartromanek]

Got a fix cookin' https://github.com/apostrophecms/apostrophe/pull/4541 @nicholasbester @boutell @BoDonkey

[nicholasbester]

@boutell description updated :)

[stuartromanek]

merged #4541

[nicholasbester]

hmm I'm not sure if this is fixed or I guess it's another bug. I have the following rich text styles available:

{
      tag: 'p',
      label: 'Paragraph (P)'
    },
    {
      tag: 'h2',
      label: 'Heading 2 (H2)',
      class: 'title fs-2'
    },
    {
      tag: 'h3',
      label: 'Heading 2 - Small (H2)',
      class: 'title fs-3'
    },
    {
      tag: 'h4',
      label: 'Heading 3 (H3)',
      class: 'title fs-4'
    },
    {
      tag: 'h5',
      label: 'Heading 4 (H4)',
      class: 'title fs-5'
    },
    {
      tag: 'p',
      label: 'Paragraph Large (P)',
      class: 'title fs-3'
    },
    {
      tag: 'p',
      label: 'Paragraph Small (P)',
      class: 'title fs-6'
    },
    {
      tag: 'span',
      label: 'Highlight Dark Grey (Span)',
      class: 'dark-grey'
    },
    {
      tag: 'span',
      label: 'Highlight Blue (Span)',
      class: 'blue'
    },
    {
      tag: 'span',
      label: 'Highlight Orange (Span)',
      class: 'orange'
    }

Note the multiple paragraph tags with different styles and the spans for in-line styles to add colours. Adding a heading works as expected:

Pressing enter does switch to paragraph however the blue in-line style remains:

Let me know your thoughts.

[boutell]

That does sound like we missed an edge case somehow Nick. Can you confirm what apostrophe version you tested?

[nicholasbester]

Running 4.3.3