ckeditor.js:5 CKEditorError: observable-bind-rebind

[TLA020]

hi guys,

I get this error in vue -> ckeditor.js:5 CKEditorError: observable-bind-rebind

I try to create a dropdown plugin, but i keep getting this error. can't find anything.

Any idea?

Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-observable-bind-rebind

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import Collection from '@ckeditor/ckeditor5-utils/src/collection';
import { addListToDropdown, createDropdown } from '@ckeditor/ckeditor5-ui';

export class AiPlugin extends Plugin {
  init() {
    const editor = this.editor;

    editor.ui.componentFactory.add('ai', locale => {
      const buttonView = new ButtonView(locale);
      buttonView.set({
        label: 'ChatGPT',
        tooltip: true,
        withText: true,
      });

      const dropdownView = createDropdown(locale);
      dropdownView.buttonView = buttonView;

      const items = new Collection();
      // Add dropdown items and their respective actions
      items.add({
        type: 'button',
        model: new ButtonView(locale),
        withText: true,
        label: 'Magie gebruiken',
      });

      items.add({
        type: 'button',
        model: new ButtonView(locale),
        withText: true,
        label: 'Zelf bepalen',
      });

      addListToDropdown(dropdownView, items); // this line seems to be the issue.

      items.get('useMagic').on('execute', this.onUseMagic);
      items.get('determine').on('execute', this.onDetermine);

      return dropdownView;
    });
  }

  onUseMagic() {
    // Logic for using magic
    console.log('Using magic...');
  }

  onDetermine() {
    // Logic for self-determination
    console.log('Self-determination...');
  }
}

[oleq]

Hi there, I'd suggest you to change model: new ButtonView( locale ) into a new model instance as per https://ckeditor.com/docs/ckeditor5/latest/api/module_ui_dropdown_utils-ListDropdownButtonDefinition.html#member-model.

import { Model addListToDropdown, type ListDropdownItemDefinition } from 'ckeditor5/src/ui';

// ...

model: new Model( {
    label: '...',
    withText: '...'
} )

[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).