How to extend an existing UI?

[JanWennrichPCSG]

Provide a description of the task

I'm currently building a custom plugin that should add a button to the dialog shown when editing a link with my own button.

I could not find any info about this in the docs.

Related to this I found the following issues:

• https://github.com/ckeditor/ckeditor5/issues/4836
• https://github.com/ckeditor/ckeditor5/issues/8765

But both approaches don't work for me (anymore?).
The LinkUI.formView is always undefined and therefore I can't add an event listener to it.

My plugin class looks similar to this:

import { Plugin } from 'ckeditor5/src/core';
import LinkUI from '@ckeditor/ckeditor5-link/src/linkui';

/* global window */

export default class QuiqqerLink extends Plugin {
	static get pluginName()
	{
		return 'QuiqqerLink';
	}

	init()
	{
		const editor = this.editor;
		const t = editor.t;
		const linkUI = editor.plugins.get( LinkUI );

		this.linkFormView = linkUI.formView;

                // TypeError: Cannot read properties of undefined (reading 'once')
		this.linkFormView.once( 'render', () => {
                       // This is never called
			console.log('render');
		} );
	}
}

📃 Other details

• Browser: Chrome
• OS: Windows
• CKEditor version: 35.0.1

[FilipTokarski]

Maybe adding ButtonView to your custom template will help? Also, did you check UI library docs and guides for custom plugin (especially part two, as it shows how to create a custom UI)?

[JanWennrichPCSG]

Thank you for the links, @FilipTokarski!

I checked all the docs and creating my own Button(View) for the editor toolbar did indeed work.
But I don't want my button to appear in the editor toolbar.
The button should appear inside the dialog shown when editing a link:

Unfortunately, I couldn't find any info on how to do that in the docs.

[leevigraham]

@JanWennrichPCSG

Here's my current version of the plugin you referenced above. The input is being updated with 'Some URL'.

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import LinkUI from '@ckeditor/ckeditor5-link/src/linkui';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

export default class LinkCraft extends Plugin {
    init() {
        const editor = this.editor;
        this.button = this._createButton();
        const linkUI = editor.plugins.get( LinkUI );
        this.linkFormView = linkUI.formView;
        this.linkFormView.once( 'render', () => {
            this.button.render();
            // Register the button under the link form view, it will handle its destruction.
            this.linkFormView.registerChild( this.button );
            // Inject the element into DOM.
            this.linkFormView.element.insertBefore( this.button.element, this.linkFormView.saveButtonView.element );
        });
    }

    _createButton() {
        const editor = this.editor;
        const button = new ButtonView( this.locale );
        const linkCommand = editor.commands.get( 'link' );

        button.set( {
            label: 'Internal link',
            withText: true,
            tooltip: true
        } );

        // Probably this button should be also disabled when the link command is disabled.
        // Try setting editor.isReadOnly = true to see it in action.
        button.bind( 'isEnabled' ).to( linkCommand );
        button.on( 'execute', () => {
            // Do something (like open the popup), then update the link URL field's value.
            // The line below will be probably executed inside some callback.
            this.linkFormView.urlInputView.fieldView.element.value = 'Some URL';
            
        } );

        return button;
    }
}

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).