Adding toolbar to widget fails

[ansorensen]

I'm attempting to add a toolbar to my formula widget with this code in my plugin class:

afterInit() {
        const editor = this.editor;
        const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );

        widgetToolbarRepository.register( 'formula', {
            items: editor.config.get( 'formula.items' ),
            getRelatedElement: () => {
                let selectedElement = editor.model.document.selection.getSelectedElement();
                return selectedElement && selectedElement.name === 'formula' ? selectedElement : null;
            }
        } );
 }

I see the getRelatedElement function getting called and successfully returning an element when my formula widget is selected.

However, I get the following stack trace:
domconverter.js:254 Uncaught TypeError: Cannot read property 'createElement' of undefined at DomConverter.viewToDom (domconverter.js:254) at getBalloonPositionData (widgettoolbarrepository.js:333) at WidgetToolbarRepository._showToolbar (widgettoolbarrepository.js:283) at WidgetToolbarRepository._updateToolbarsVisibility (widgettoolbarrepository.js:244) at ClassicEditorUI.<anonymous> (widgettoolbarrepository.js:109) at ClassicEditorUI.fire (emittermixin.js:242) at ClassicEditorUI.update (editorui.js:103) at Document.<anonymous> (editorui.js:73) at Document.fire (emittermixin.js:242) at View.<anonymous> (view.js:201)

I've traced the issue to line 246 of ckeditor5-widget/src/widgettoolbarrepository.js

target: editingView.domConverter.viewToDom( relatedElement )

This function call only passes in one parameter, but viewToDom expects two:

viewToDom(viewNode, domDocument)

When viewToDom later calls:

domElement = domDocument.createElement(viewNode.name);

It throws the error "Cannot read property 'createElement' of undefined"

And no toolbar appears.

[Mgsy]

@jodator, can you take a look at this?

[Reinmar]

Ping 🔔

[jodator]

Sorry for that - if might loos track of this.

So there are two issues:

1. API usage - the getRelatedElement() must return a View element not the Model element. So you should either use editor.editing.mapper.toViewElement() or use the selection passed to the getRelatedElement() callback or use the editor.editing.view.document.selection directly (the passed selection to the callback is the best option).

2. In this particular case passing the domDocument does not make sense as we cannot create a view node to attach a toolbar to it. It should be an instance already. So the side effect of throwing an error indicates some errors in code (see point 1).

Anyway the scenario in 2 should be handled better. The domConverter.viewToDom() shouldn't be used here AFAICS. It should only operate on existing view elements the widgetToolbarRepository should call mapViewToDom() instead.

[ansorensen]

Thanks, I'll give these updates a try.