FEATURE: Serious ckeditor inlineMode isInline

[mhsdesign]

resolves #3545

What I did

How I did it

How to verify it

todo:

• pasting newlines should insert brs

[grebaldi]

E2E tests:

Didn't know it was supposed to 😄

[mhsdesign]

• inlineMode?
• inlineContentMode?
• block = false

or decide in fusion?

Neos.Fusion:Editable {
   block = false
}

[mhsdesign]

We decided to use the the same naming as in fusion: block false.

And its allowed to either specify it in the nodeType or via the rendering.

Following logic would apply:

    const isInlineMode = editorOptions?.block === false ||
         propertyDomNode.tagName === 'SPAN' ||
         propertyDomNode.tagName === 'H1' ||
         propertyDomNode.tagName === 'H2' ||
         propertyDomNode.tagName === 'H3' ||
         propertyDomNode.tagName === 'H4' ||
         propertyDomNode.tagName === 'H5' ||
         propertyDomNode.tagName === 'H6' ||
         propertyDomNode.tagName === 'P';

happy cases:

editorOptions: { } | { block: true } + Neos.Fusion:Editable { } | { block: true } -> <div>{isInlineMode: false}</div>
editorOptions: { } + Neos.Fusion:Editable { block: false } -> <span>{isInlineMode: true}</span>
editorOptions: { block: false } + Neos.Fusion:Editable { block: false } -> <span>{isInlineMode: true}</span>

but this would also lead to cases like this:

editorOptions: { block: false } + Neos.Fusion:Editable { } | { block: true } -> <div>{isInlineMode: true}</div>
editorOptions: { block: true } + Neos.Fusion:Editable { block: false } -> <span>{isInlineMode: false}</span>

So the the notation of block: false will always overrule the one from the Neos.Fusion:Editable. But the rendering will still be affected via Neos.Fusion:Editable
(i hope i have no logic error in my equations ^^)

[grebaldi]

Hi @mhsdesign,

thank you for tackling this problem :)

I tested your changes locally and I noticed a problem with the placeholders:

before	after

Editor initialization and editing itself are working fine. Only the placeholder is missing - which makes the editor virtually unusable.

I used this setup for reproduction:

NodeType

'Vendor.Site:Content.Headline':
  superTypes:
    'Neos.Neos:Content': true

  ui:
    icon: header
    label: 'Headline'

  properties:
    type:
      type: string
      ui:
        label: 'Headline Type'
        reloadIfChanged: true
        inspector:
          editor: 'Neos.Neos/Inspector/Editors/SelectBoxEditor'
          editorOptions:
            values:
              h1:
                label: 'H1'
              h2:
                label: 'H2'
              h3:
                label: 'H3'
              h4:
                label: 'H4'
              h5:
                label: 'H5'
              h6:
                label: 'H6'
    text:
      type: string
      ui:
        inlineEditable: true
        inline:
          editorOptions:
            placeholder: '- Insert Text here -'
            isInline: true
            linking:
              anchor: true
              title: true
              relNofollow: true
              targetBlank: true
            formatting:
              strong: true
              em: true
              u: true
              sub: true
              sup: true
              del: true
              p: false
              h1: false
              h2: false
              h3: false
              h4: false
              h5: false
              h6: false
              pre: false
              underline: true
              strikethrough: true
              removeFormat: true
              left: true
              right: true
              center: true
              justify: true
              table: false
              ol: false
              ul: false
              a: true

Fusion

prototype(Vendor.Site:Content.Headline) < prototype(Neos.Neos:ContentComponent) {
  type = ${q(node).property('type') || 'div'}

  text = Neos.Neos:Editable {
    property = 'text'
    block = false
  }

  renderer = Neos.Fusion:Tag {
      tagName = ${props.type}
      content = ${props.text}
    }
}

Another issue:

We decided to use the the same naming as in fusion: block false.

☝️ this is not yet reflected in code afaict. The editorOptions configuration still says isInline.