Tracking changes in source code editing mode

[corymharper]

This is a question but its the closest label I could find in the presets, source code editing mode does not fire change:data events. What is the recommended way of tracking changes in source editing mode when you have such a requirement?

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[corymharper]

I did just find this discussion: #11008 (comment)

I have some circumstances where I can rely on a button click, and I have already implemented those relying on the fact that the source editing plugin will update the editor data when editor.getData is called. For our purposes some kind of debounced autosave feature might be appropriate for our other feature requirements, however doing it on a timer or something doesn't make a whole lot of sense to me, is there any kind of reliable event I could be listening for in source editing mode that I could then debounce?

[Witoso]

We don't have such an event right now., and unfortunately, most likely the only workaround right now is to set up some native listeners to the source editing area.

[corymharper]

We don't have such an event right now., and unfortunately, most likely the only workaround right now is to set up some native listeners to the source editing area.

Based on the labels applied here, can I assume it might be considered to add some such event or just more stable way of tracking the changes in source editing mode?

In the mean time, what property can I access to add the events on the underlying DOM node for the source editing area you mentioned? maybe editor.editing.view.getDomRoot()?

[Witoso]

Usually, we collect the feedback (through +1's or comments) to assess the need and its impact. We will keep this item open for a while, and then we will reevaluate the improvement.

Something like this editor.editing.view.getDomRoot().nextSibling should work to get the source editing element. It appears only when you're in the source editing mode.

[corymharper]

So, for some context I'm using CKEditor in React. Is there any way I could actively track being in source editing mode so I know when to turn the special event listening on/off? The source editing plugin itself seems to have some properties/events that indicate the change in source editing mode, but I don't think I have any way to listen to them... Because there is inevitably a detachment between CKEditor's state changes and React's render cycle (i.e. there is not a rerender just because source editing mode changed) I can't rely on figuring out if we are in source editing mode on rerender, an event would be much more useful. If not maybe I can write a custom plugin?

[Witoso]

Hey @corymharper, apologies for the delayed response.

Is there any way I could actively track being in source editing mode so I know when to turn the special event listening on/off?

Yes, many plugins, SourceEditing included, publish events that you can listen to. In the source editing case, with an instance of the editor you can do:

const sourceEditing = editor.plugins.get("SourceEditing");
sourceEditing.on("change:isSourceEditingMode", (_eventInfo, _name, value, _oldValue) => {
  if (value) {
    console.log('It is enabled');
  } else {
    console.log('It is disabled');
  }
})

This can be either set up from the outside of the editor (when you have an instance reference) or with a simple plugin.

[corymharper]

No worries, we can only do what we have the bandwidth for. I had tried to take some approach like this, but the Typescript types don't seem to be aware that method may exist on the plugin... For now, I'm bypassing that using @ts-expect-error.

[corymharper]

If it helps anyone, this is the code I'm currently using to accomplish what I wanted to do:

// Get plugin
const sourceEditing = editor.plugins.get('SourceEditing');


// Add event listener
// @ts-expect-error: https://ckeditor.com/docs/ckeditor5/latest/api/module_source-editing_sourceediting-SourceEditing.html#function-on
sourceEditing.on("change:isSourceEditingMode", (_eventInfo: unknown, _name: string, value: boolean) => {
    if (value) {
        // Get the textarea
        const sourceEditingTextarea = editor.editing.view.getDomRoot()?.nextSibling?.firstChild;

        if (!sourceEditingTextarea) {
            throw new Error('This should not be possible');
        }


        // Add input event listener
        // -> Must be used because it appears the `change` event is being prevented
        sourceEditingTextarea.addEventListener('input', () => {
            // Trigger the editor's data to update
            // @ts-expect-error: https://ckeditor.com/docs/ckeditor5/latest/api/module_source-editing_sourceediting-SourceEditing.html#function-updateEditorData
            sourceEditing.updateEditorData();
        });
    }
});

[Witoso]

No worries, we can only do what we have the bandwidth for. I had tried to take some approach like this, but the Typescript types don't seem to be aware that method may exist on the plugin... For now, I'm bypassing that using @ts-expect-error.

Works on my side. Is it possible that the editor is any on your side?

[corymharper]

No worries, we can only do what we have the bandwidth for. I had tried to take some approach like this, but the Typescript types don't seem to be aware that method may exist on the plugin... For now, I'm bypassing that using @ts-expect-error.

Works on my side. Is it possible that the editor is any on your side?

No it's not... everything seems to be typed appropriately with the editor, i.e. intellisense for editor.getData etc. This is what the editor build type looks like in index.d.ts:

export default class CKEditorBuild extends ClassicEditorBase {
    static builtinPlugins: (typeof CustomUpload | typeof Markdown | typeof Essentials | typeof Autoformat | typeof Bold | typeof Italic | typeof BlockQuote | typeof Heading | typeof Image | typeof ImageUpload | typeof Link | typeof LinkImage | typeof List | typeof Paragraph | typeof PasteFromOffice | typeof TextTransformation | typeof HorizontalLine | typeof ImageCaption | typeof ImageStyle | typeof ImageToolbar | typeof Indent | typeof MediaEmbed | typeof Table | typeof TableToolbar | typeof SourceEditing | typeof HtmlEmbed | typeof Alignment | typeof FontSize | typeof ImageResize | typeof TableProperties | typeof TableCellProperties | typeof GeneralHtmlSupport)[];
    static defaultConfig: {
        toolbar: {
            items: string[];
        };
        image: {
            toolbar: string[];
        };
        table: {
            contentToolbar: string[];
        };
        language: string;
    };
}

The editor.plugins.get call ends up being typed like this: PluginCollection<Editor>.get<"SourceEditing">(key: "SourceEditing"): PluginInterface. The only properties it thinks the returned object has are init, afterInit, and destroy.

[Witoso]

And how do you retrieve editor's instance? If you add the code as plugin and add it to plugins list it be type-checked correctly:

// just wrap everything into function
function MyPlugin( editor ) {
	// ... code.
}

// Editor config:
plugins: [ MyPlugin /*... and other plugins. */ ]

[agnieszkakoryl]

If it helps anyone, this is the code I'm currently using to accomplish what I wanted to do:

// Get plugin
const sourceEditing = editor.plugins.get('SourceEditing');


// Add event listener
// @ts-expect-error: https://ckeditor.com/docs/ckeditor5/latest/api/module_source-editing_sourceediting-SourceEditing.html#function-on
sourceEditing.on("change:isSourceEditingMode", (_eventInfo: unknown, _name: string, value: boolean) => {
    if (value) {
        // Get the textarea
        const sourceEditingTextarea = editor.editing.view.getDomRoot()?.nextSibling?.firstChild;

        if (!sourceEditingTextarea) {
            throw new Error('This should not be possible');
        }


        // Add input event listener
        // -> Must be used because it appears the `change` event is being prevented
        sourceEditingTextarea.addEventListener('input', () => {
            // Trigger the editor's data to update
            // @ts-expect-error: https://ckeditor.com/docs/ckeditor5/latest/api/module_source-editing_sourceediting-SourceEditing.html#function-updateEditorData
            sourceEditing.updateEditorData();
        });
    }
});

Thank you! I helped me a lot. How can such an obvious thing be so awkward to achieve... I've got cases in which it is crucial for me to detect changes in source mode and it worked fine.