WYSIWYG list bug?

[lmis (Michael Sauer)]

Hi!

We’re experiencing a strange behaviour in the WYSIWYG editor of the Neos backend. We’ve created some custom content elements and in some of them we’re experiencing this problem. The initial creation of this content element seems to be fine and may look like this: neos_wysiwyg (red box). But if you want to edit its content later on it is not possible to add more list elements. The new text will always belong to the last element: neos_wysiwyg_bug. It looks like I’ve entered a soft return (shift + enter) but this is not the case, it’s a simple / normal return. Even removing and adding the list style does not solve the problem, it just looks like before. I’ve tried so much different things like changes in the aloa config or using a different browser but nothing solves this problem.

This seems to be a bug, am I right? Is it known and is there a workaround or something?

I’ve tested this in Chrome (v86) and Firefox (v82).
We’re using Neos 4.3.13.

I would appreciate it if someone could help me with this

Best regards,
Michael

[sorenmalling (Søren Malling)]

Hi Michael

Please paste your node configuration and how you render it

[lmis (Michael Sauer)]

Hi Søren,

thank you for your answer

This is the node configuration of one of our custom content elements.

'Laudert.Website:Journal':
  superTypes:
    'Laudert.Website:Content': true
  ui:
    label: i18n
    group: 'media'
    icon: icon-journal-whills
    position: 200
    inlineEditable: true
  properties:
    category:
      type: string
      defaultValue: 'Enter category ...'
      ui:
        inlineEditable: true
        reloadIfChanged: true
      options:
        silhouette: text.headline
      search:
        fulltextExtractor: "${Indexing.extractHtmlTags(node.properties.category)}"
    topLine:
      type: string
      defaultValue: 'Enter top line ...'
      ui:
        inlineEditable: true
        reloadIfChanged: true
      options:
        silhouette: text.headline
      search:
        fulltextExtractor: "${Indexing.extractInto('h2', node.properties.topLine)}"
    headLine:
      type: string
      defaultValue: 'Enter headline ...'
      ui:
        inlineEditable: true
        reloadIfChanged: true
      options:
        silhouette: text.headline
      search:
        fulltextExtractor: "${Indexing.extractInto('h1', node.properties.headLine)}"
    copy:
      type: string
      defaultValue: 'Enter copy text ...'
      ui:
        inlineEditable: true
        reloadIfChanged: true
      options:
        silhouette: text.content
      search:
        fulltextExtractor: "${Indexing.extractHtmlTags(node.properties.copy)}"
    textBox:
      type: string
      defaultValue: 'Enter text ...'
      ui:
        inlineEditable: true
        reloadIfChanged: true
      options:
        silhouette: text.content
      search:
        fulltextExtractor: "${Indexing.extractHtmlTags(node.properties.textBox)}"
    textBoxBackground:
      type: string
      defaultValue: white
      ui:
        label: i18n
        reloadIfChanged: true
        inspector:
          group: 'design'
          editor: Content/Inspector/Editors/SelectBoxEditor
          editorOptions:
            placeholder: 'Laudert.Website:NodeTypes.Journal:properties.textBoxBackground.editor.textBoxBackgroundPlaceholder'
            values:
              white:
                label: 'Laudert.Website:NodeTypes.Journal:properties.textBoxBackground.editor.values.white'
                position: 1
              black:
                label: 'Laudert.Website:NodeTypes.Journal:properties.textBoxBackground.editor.values.black'
                position: 2
              creation:
                label: 'Laudert.Website:NodeTypes.Journal:properties.textBoxBackground.editor.values.creation'
                position: 3
              studios:
                label: 'Laudert.Website:NodeTypes.Journal:properties.textBoxBackground.editor.values.studios'
                position: 4
              media-production:
                label: 'Laudert.Website:NodeTypes.Journal:properties.textBoxBackground.editor.values.media-production'
                position: 5
              media-it:
                label: 'Laudert.Website:NodeTypes.Journal:properties.textBoxBackground.editor.values.media-it'
                position: 6
              print-services:
                label: 'Laudert.Website:NodeTypes.Journal:properties.textBoxBackground.editor.values.print-services'
                position: 7
    textPosition:
      type: string
      defaultValue: right
      ui:
        label: i18n
        reloadIfChanged: true
        inspector:
          group: 'design'
          editor: Content/Inspector/Editors/SelectBoxEditor
          editorOptions:
            placeholder: 'Laudert.Website:NodeTypes.Journal:properties.textPosition.editor.textPositionPlaceholder'
            values:
              left:
                label: 'Laudert.Website:NodeTypes.Journal:properties.textPosition.editor.values.left'
                position: 1
              right:
                label: 'Laudert.Website:NodeTypes.Journal:properties.textPosition.editor.values.right'
                position: 2
    textBoxValue:
      type: string
      defaultValue: '100'
      validation:
        'Neos.Neos/Validation/RegularExpressionValidator':
          regularExpression: '/^[0-9]*$/'
      ui:
        label: i18n
        inlineEditable: false
        reloadIfChanged: true
        inspector:
          group: 'design'
      options:
        silhouette: text.content
      search:
        fulltextExtractor: "${Indexing.extractHtmlTags(node.properties.textBoxValue)}"
    image:
      type: Neos\Media\Domain\Model\ImageInterface
      ui:
        label: i18n
        inlineEditable: false
        reloadIfChanged: true
        inspector:
          group: 'image'
    imageText:
      type: string
      defaultValue: 'Laudert.Website:NodeTypes.Journal:properties.imageText.editor.imageTextPlaceholder'
      ui:
        reloadIfChanged: true
      options:
        silhouette: text.content
      search:
        fulltextExtractor: "${Indexing.extractHtmlTags(node.properties.imageText)}"
    displayArrow:
      type: boolean
      defaultValue: true
      ui:
        label: i18n
        reloadIfChanged: true
        inspector:
          group: 'design'
    links:
      type: 'references'
      ui:
        label: i18n
        reloadIfChanged: true
        inspector:
          group: 'links'
          editorOptions:
            nodeTypes: ['Neos.Neos:Shortcut', 'Neos.Neos:Document']
    absoluteLinks:
      type: boolean
      defaultValue: false
      ui:
        label: i18n
        reloadIfChanged: true
        inspector:
          group: 'links'

In this case the property «textBox» is the one with the problem.

textBox:
  type: string
  defaultValue: 'Enter text ...'
  ui:
    inlineEditable: true
    reloadIfChanged: true
  options:
    silhouette: text.content
  search:
    fulltextExtractor: "${Indexing.extractHtmlTags(node.properties.textBox)}"

We’re using Silhouette and the configuration looks like this.

Sitegeist:
  Silhouettes:
    properties:
      text:
        headline:
          ui:
            aloha:
              autoparagraph: FALSE
              'format':
                'strong': TRUE
                'em': TRUE
                'underline': TRUE
                'strikethrough': TRUE
                'sub': TRUE
                'sup': TRUE
                'del': TRUE
                'p': FALSE
                'h1': FALSE
                'h2': FALSE
                'h3': FALSE
                'h4': FALSE
                'h5': FALSE
                'h6': FALSE
                'pre': FALSE
                'removeFormat': TRUE
              'table':
                'table': FALSE
              'list':
                'ol': FALSE
                'ul': FALSE
              'link':
                'a': TRUE
              'alignment':
                'left': FALSE
                'center': FALSE
                'right': FALSE
                'justify': FALSE
        content:
          ui:
            aloha:
              autoparagraph: FALSE
              'format':
                'strong': TRUE
                'em': TRUE
                'underline': TRUE
                'strikethrough': TRUE
                'sub': TRUE
                'sup': TRUE
                'del': TRUE
                'p': TRUE
                'h1': TRUE
                'h2': TRUE
                'h3': TRUE
                'h4': TRUE
                'h5': TRUE
                'h6': TRUE
                'pre': TRUE
                'removeFormat': TRUE
              'table':
                'table': FALSE
              'list':
                'ol': TRUE
                'ul': TRUE
              'link':
                'a': TRUE
              'alignment':
                'left': TRUE
                'center': TRUE
                'right': TRUE
                'justify': TRUE

And here’s the fusion configuration.

prototype(Laudert.Website:Journal) < prototype(Laudert.Website:Content) {
    templatePath = 'resource://Laudert.Website/Private/Templates/NodeTypes/Journal.html'

    category = ${q(node).property('category')}
    topLine = ${q(node).property('topLine')}
    headLine = ${q(node).property('headLine')}
    copy = ${q(node).property('copy')}
    textBox = ${q(node).property('textBox')}
    textBoxBackground = ${q(node).property('textBoxBackground')}
    textBoxValue = ${q(node).property('textBoxValue')}
    image = ${q(node).property('image')}
    displayArrow = ${q(node).property('displayArrow')}
    links = ${q(node).property('links')}
    absoluteLinks = ${q(node).property('absoluteLinks')}

    // Calculate SVG dash offset
    svgDashValue = ${this.textBoxValue ? this.textBoxValue : 0}
    svgDashOffset = ${(370 + 370 * ( this.svgDashValue / 100 )) / -1}
}

And this is the template part for «textBox».

<f:if condition="{neos:rendering.inEditMode()}">
    <f:then>
        <div class="journal-surface" data-surface-color="{textBoxBackground}">
            <f:if condition="{textBoxValue}">
                <svg x="0px" y="0px" viewBox="0 0 128 128">
                    <circle cx="64" cy="64" stroke-width="2" r="59"/>
                    <circle cx="64" cy="64" stroke-width="10" r="59" stroke-dasharray="370" stroke-dashoffset="{svgDashOffset}"/>
                    <text x="64" y="64" dy=".325em" text-anchor="middle">{textBoxValue}</text>
                </svg>
            </f:if>
            {neos:contentElement.editable(property: 'textBox')}
        </div>
    </f:then>
    <f:else>
        <f:if condition="{textBox} || {textBoxValue}">
            <div class="journal-surface" data-surface-color="{textBoxBackground}">
                <f:if condition="{textBoxValue}">
                    <svg x="0px" y="0px" viewBox="0 0 128 128">
                        <circle cx="64" cy="64" stroke-width="2" r="59"/>
                        <circle cx="64" cy="64" stroke-width="10" r="59" stroke-dasharray="370" stroke-dashoffset="{svgDashOffset}"/>
                        <text x="64" y="64" dy=".325em" text-anchor="middle">{textBoxValue}</text>
                    </svg>
                </f:if>
                <div>{textBox -> laudert:removeNbsp() -> f:format.raw()}</div>
            </div>
        </f:if>
    </f:else>
</f:if>

[markusguenther (Markus Günther)]

Hello,

thanks for reporting this issue. I did not tests it yet but we switched the default inline editor at some point. So it would be interessting which config do you use for Neos.Neos.Ui.frontendConfiguration.defaultInlineEditor.

Right now it ist the ck editor version 5 but we used version 4 in the past and as you also using the deprecated aloha syntax instead auf editorOptions maybe this is one root cause.

When we know bit more I will try to reproduce that.
Thanks in advance

I can just remember that we had issues with ck editor 4 and tables for instance. But will see what you have

[lmis (Michael Sauer)]

Hi Markus,

thanks for your answer
Yes I’ve already read about this and considered it in our project. Back in the days I’ve changed this config to «ckeditor5». So we are already using version 5.