Extending class caused error

[piernik]

📝 Provide detailed reproduction steps (if any)

1. I extended Your Link class to include my internal linking. Plugin name is LinkInternal and here is its code:

import Link from "@ckeditor/ckeditor5-link/src/link";
import LinkEditing from "@ckeditor/ckeditor5-link/src/linkediting";
import LinkInternalUi from "./link-internal-ui";

export default class LinkInternal extends Link {
    static get requires() {
        return [LinkEditing, LinkInternalUi];
    }
}

import LinkUI from "@ckeditor/ckeditor5-link/src/linkui";
import {LukanaAutocomplete} from "./lukana-autocomplete";
import './theme/link-internal.css';

export default class LinkInternalUi extends LinkUI {
    init() {
        super.init();
    }

    _addFormView() {
        super._addFormView();
        this._initAutocomplete();
    }

    _initAutocomplete() {
        if (!this.autocomplete) {
            this.autocomplete = new LukanaAutocomplete(
                this.formView.urlInputView.fieldView.element,
                this._onAutocompleteClick.bind(this),
                {
                    url: 'https://api.***',
                    termParam: 'podpowiadanie',
                    additionalParams: {
                        sortowanie: 'DESC'
                    },
                    method: 'GET',
                    debounceTime: 500,
                    itemTemplate: `<div><h5>{{item.tytul}}</h5><small>{{item.link}}</small></div>`
                }
            );
        }

        const selectedEl = editor.model.getSelectedContent(editor.model.document.selection);
        if (selectedEl.getChild(0)) {
            const json = selectedEl.getChild(0).toJSON();
            if (json && json.data) {
                this.formView.urlInputView.fieldView.element.value = json.data;
                this.autocomplete.performSearch(json.data);
            }
        }
    }

    _onAutocompleteClick(item) {
        this.formView.urlInputView.fieldView.element.value = item.link;
    }
}

2. I added LinkImage plugin and I get error CKEditorError: plugincollection-plugin-name-conflict: Two plugins with the same name were loaded. Don't know how to fix it.

✔️ Expected result

No error

❌ Actual result

Error CKEditorError: plugincollection-plugin-name-conflict: Two plugins with the same name were loaded

[Mgsy]

Hi, can you share your build configuration file? I wonder which plugins are inside your plugins array.

[piernik]

Here is my config:

ClassicEditor
            .create(document.querySelector(selector), {
                plugins: [
                    Essentials, Paragraph, Heading,
                    Bold, Italic, Strikethrough, Subscript, Superscript,
                    RemoveFormat,
                    Alignment,
                    LinkInternal,
                    List,
                    MediaEmbed,
                    Highlight,
                    SpecialCharacters, SpecialCharactersEmoji,
                    TextTransformation,
                    Image, ImageUpload, ImageToolbar, ImageStyle, ImageResize, //LinkImage,
                    Base64UploadAdapter,
                    Karta,
                    ZaletyWady,
                    ImageIdEditing,
                ],
                toolbar: ['heading', // '|',
                    'bold', 'italic', 'strikethrough', 'subscript', 'superscript', 'removeFormat', // '|',
                    'alignment', // '|',
                    'numberedList', 'bulletedList', // '|',
                    // 'insertTable',
                    'link', // '|',
                    'imageUpload',
                    // 'horizontalLine', 'pageBreak', '|',
                    'mediaEmbed', // '|',
                    'horizontalLine', 'highlight', 'specialCharacters', // '|', // 'fontSize',
                    // 'karta', //'simpleBox', //, 'placeholder'
                    'zaletyWady',
                ],
                imageIds: {
                    renderer: (id, domElement) => {
                        if (id) {
                            const zdjecie = ZDJECIA.find(item => item.id === id);

                            domElement.innerHTML = '<img src="/assets/' + zdjecie.path + '" class="img-fluid"/>';
                        } else {
                            domElement.innerHTML = '<div class="zdjecie-placeholder p-4 bg-light my-2 text-center" style="height: 150px">' +
                                '<span class="text-muted">Tutaj wstawię zdjęcie</span>' +
                                '</div>';
                        }
                    }
                },
                image: {
                    toolbar: [
                        'imageStyle:left',
                        'imageStyle:full',
                        'imageStyle:right',
                        '|',
                        'imageTextAlternative',
                        '|',
                        'linkImage'
                    ],
                    styles: [
                        {name: 'left', icon: leftIcon, title: 'Na lewo', className: 'float-left'},
                        {name: 'full', icon: fullWidthIcon, title: 'Na środku', className: ''},
                        {name: 'right', icon: rightIcon, title: 'Na prawo', className: 'float-right'},
                    ]
                },
                language: 'pl',
                link: {
                    defaultProtocol: 'https://',
                    // Automatically add target="_blank" and rel="noopener noreferrer" to all external links.
                    // addTargetToExternalLinks: true,

                    // Let the users control the "download" attribute of each link.
                    decorators: {
                        targetBlank: {
                            mode: 'manual',
                            label: 'Otwórz w nowej zakładce',
                            attributes: {
                                target: '_blank',
                                rel: 'noopener noreferrer'
                            }
                        }
                    }
                },
                heading: {
                    options: [
                        {model: 'paragraph', title: 'Paragraph'},
                        // { model: 'heading1', view: 'h1', title: 'Heading 1' },
                        {model: 'heading2', view: 'h2', title: 'Heading 2'},
                        {model: 'heading3', view: 'h3', title: 'Heading 3'},
                    ]
                },
                highlight: {
                    options: getHiglightOptions()
                },
                typing: {
                    transformations: {
                        remove: [
                            'quotes',
                        ],

                        extra: [
                            // Add some custom transformations – e.g. for emojis.
                            {from: ':)', to: '🙂'},
                            {from: ':D', to: '😁'},
                            {from: ':(', to: '😢'},
                            {from: ':|', to: '😐'},
                            {from: ':kiss:', to: '😗'},
                            {from: ':+1:', to: '👍'},
                            {from: ':tada:', to: '🎉'},

                            // You can also define patterns using regular expressions.
                            // Note: The pattern must end with `$` and all its fragments must be wrapped
                            // with capturing groups.
                            // The following rule replaces ` "foo"` with ` «foo»`.
                            // {
                            //     from: /(^|\s)(")([^"]*)(")$/,
                            //     to: [null, '«', null, '»']
                            // },

                            // Finally, you can define `to` as a callback.
                            // This (naive) rule will auto-capitalize the first word after a period.
                            // {
                            //     from: /(\. )([a-z])$/,
                            //     to: matches => [null, matches[1].toUpperCase()]
                            // }
                        ],
                    }
                }
            })
            .then(editor => {
                // CKEditorInspector.attach(editor);

                // Expose for playing in the console.
                window.editor = editor;
            })
            .catch(error => {
                console.error(error.stack);
            });

[piernik]

@Mgsy Any news on this one?

[CKEditorBot]

There has been no activity on this issue for the past two years. We've marked it as stale and will close it in 30 days. We understand it may 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 over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).