How to update custom widgets in view when firing a command

143 Views Asked by At

React + CKEditor 5 project. Let's say we have a custom command 'updateWidgets' that is fired from a react component outside CKEditor. The goal is to run editorInstance.execute('updateWidgets') and update view for all existings widgets of the same custom type in a response.

  1. Should I implement logic inside execute() method of UpdateWidgetsCommand? Hence, my logic should change a model, and editor's view will be updated via downcast converters automatically?
  2. How can I get all existing widget instances of the same type "X" inside editor's data?
class UpdateWidgetsCommand extends Command {
    execute() {
        const model = this.editor.model;

        model.change(writer => {
            // TODO: how to get access to all widgets of type "X"?
            // const widgets = model.
        });
    }
}

Or maybe we should go and change our view without changes to a model + downcast conversions? Anyway, how to get widget instances is not clear in both approaches.

editor.editing.view.change( writer => {
    // making changes to view directly if we don't store something in a model and what just to add a styling class.
} );

It seems it is possible to grab all elements from the root element and filter by a name of the widget. Array.from(editor.model.document.getRoot().getChildren()). It would be good to know if there is already built-in function in CKEditor5 API to traverse the elements tree filtering them.

0

There are 0 best solutions below