Extending CKEditor5 LinkEditor with rel attributes

Creating Neos & Flow
1

Hi,

I’d like to extend the LinkEditor to be able to set different rel attributes than just nofollow. What I got so far—thanks to the help in slack—is:

What doesn’t work:

Changes to the model don’t get persisted

One major thing doesn’t work: Persisting the changes. The model updates, as well as the view in the content editor and the publish button (upper right corner) indicates that the changes are being saved. But if I reload the page all rel attributes are gone again. They’re gone in the LinkEditor (no value set) as well as in the content canvas html code.

Error when opening LinkEditorOptions pane for the first time

There is also an error when I open the LinkEditorOptions pane for the first time:

react_devtools_backend.js:6 Warning: Failed prop type: Invalid prop `formattingUnderCursor.paragraph` supplied to `LinkEditorOptions`.
    in LinkEditorOptions (created by Connect(LinkEditorOptions))
    in Connect(LinkEditorOptions) (created by LinkInput)
    in div (created by LinkInput)
    in div (created by LinkInput)
    in LinkInput (created by Connect(LinkInput))
    in Connect(LinkInput) (created by Context.Consumer)
    in Neos(Connect(LinkInput)) (created by LinkButton)
    in div (created by LinkButton)
    in div (created by LinkButton)
    in LinkButton (created by Context.Consumer)
    in Neos(LinkButton) (created by EditorToolbar)
    in div (created by EditorToolbar)
    in div (created by EditorToolbar)
    in EditorToolbar (created by Context.Consumer)
    in Neos(EditorToolbar) (created by InlineEditorToolbar)
    in InlineEditorToolbar (created by Context.Consumer)
    in Neos(InlineEditorToolbar) (created by Connect(Neos(InlineEditorToolbar)))
    in Connect(Neos(InlineEditorToolbar)) (created by SecondaryToolbar)
    in div (created by SecondaryToolbar)
    in SecondaryToolbar (created by Connect(SecondaryToolbar))
    in Connect(SecondaryToolbar) (created by Context.Consumer)
    in Neos(Connect(SecondaryToolbar)) (created by App)
    in div (created by App)
    in App (created by Root)
    in Neos (created by Root)
    in Provider (created by Root)
    in div (created by Root)
    in Root (created by DragDropContext(Root))
    in DragDropContext(Root)
r	@	react_devtools_backend.js:6
printWarning	@	checkPropTypes.js:19
checkPropTypes	@	checkPropTypes.js:82
validatePropTypes	@	react.development.js:1501
createElementWithValidation	@	react.development.js:1590
render	@	connectAdvanced.js:243
finishClassComponent	@	react-dom.development.js:13393
updateClassComponent	@	react-dom.development.js:13356
beginWork	@	react-dom.development.js:13945
performUnitOfWork	@	react-dom.development.js:16249
workLoop	@	react-dom.development.js:16287
renderRoot	@	react-dom.development.js:16366
performWorkOnRoot	@	react-dom.development.js:17220
performWork	@	react-dom.development.js:17128
performSyncWork	@	react-dom.development.js:17100
interactiveUpdates$1	@	react-dom.development.js:17391
interactiveUpdates	@	react-dom.development.js:2163
dispatchInteractiveEvent	@	react-dom.development.js:4735

Error when I set a rel value for the first time

There is also an error when I set a value for rel for the first time:

react_devtools_backend.js:6 Warning: Failed prop type: Invalid prop `formattingUnderCursor.linkRelAttribute` supplied to `InlineEditorToolbar`.
    in InlineEditorToolbar (created by Context.Consumer)
    in Neos(InlineEditorToolbar) (created by Connect(Neos(InlineEditorToolbar)))
    [stacktrace ...]
react_devtools_backend.js:6 Warning: Failed prop type: Invalid prop `formattingUnderCursor.linkRelAttribute` supplied to `EditorToolbar`.
    in EditorToolbar (created by Context.Consumer)
    in Neos(EditorToolbar) (created by InlineEditorToolbar)
    [stacktrace ...]
react_devtools_backend.js:6 Warning: Failed prop type: Invalid prop `formattingUnderCursor.linkRelAttribute` supplied to `LinkButton`.
    in LinkButton (created by Context.Consumer)
    in Neos(LinkButton) (created by EditorToolbar)
    [stacktrace ...]
react_devtools_backend.js:6 Warning: Failed prop type: Invalid prop `formattingUnderCursor.linkRelAttribute` supplied to `StyleSelect`.
    in StyleSelect (created by Context.Consumer)
    in Neos(StyleSelect) (created by EditorToolbar)

Besides the error the rel attribute in the content canvas gets updated nevertheless and the values set (but not persistet).

My guess is, the problem is that formattingUnderCursor.linkRelAttribute is of type array which is not in the allowed prop types. Is there a way to override the prop types?

2

No one?