CKEditor 5 integration doesn't fully support multiple editors on the same page

[jonscheiding]

Description

The CKE5 plugin doesn't correctly handle the IntegrationModel object when there are multiple editors on the same page. It has the following undesirable behaviors:

• window.WirisPlugin.currentInstance will always be the last one to be initialized
• If an editor is destroyed, it will destroy the last-initialized integration model instead of its own

Environment

Which version of MathType does this happen in? @wiris/mathtype-ckeditor5@8.11.1

What is the relevant software and their versions?

• Editor (CKEditor, Froala, TinyMCE, etc.) CKEditor 5 40.1.0
• Framework (Angular, React, etc.) n/a (React 17.0.2)
• Browser (Chrome, Firefox, etc.) n/a
• Operating System (Windows, macOS, Ubuntu, etc.) n/a

Steps to reproduce

Run an app with the following React component:

const Sample: React.FC = () => {
  const [showFirstEditor, setShowFirstEditor] = useState(true);

  return (
    <div>
      {showFirstEditor && (
        <CKEditor
          key="1"
          editor={ClassicEditor}
          config={{
            plugins: [Paragraph, Essentials, MathType],
            toolbar: ["MathType"],
          }}
          onReady={(editor) => {
            editor.on<EditorDestroyEvent>("destroy", () => {
              console.log("Editor 1 destroyed");
            });
          }}
        />
      )}
      <CKEditor
        key="2"
        editor={ClassicEditor}
        config={{
          plugins: [Paragraph, Essentials, MathType],
          toolbar: ["MathType"],
        }}
      />
      <button onClick={() => setShowFirstEditor(false)}>
        Remove First Editor
      </button>
    </div>
  );
};

1. Enter an equation in the second editor
2. Click "Remove First Editor"
3. Double-click the equation in the second editor

Expected result

• The MathType equation editor opens with the selected equation filled in

Actual result

• The MathType equation editor does not open
• An error Cannot read properties of null (reading 'isReadOnly') is logged to the console

[bendemboski]

@xjiang-at-wiris how was this resolved? Can you point me to the commit/PR?

[a-sartori-wt]

I encountered the same issue with two CKEditors with math enabled on the same page. Try to insert math in the first editor results in an error because it fails to load the editor correctly.

@xjiang-at-wiris reported upon closing the issue (#1048) that it is a work in progress. What is the status? Has anyone found a workaround?

[carla-at-wiris]

Hello all,

Thank you for our interest. Lately, we have been doing changes to improve our support for the scenarios where there are multiple editors on the same page. You can check here the last one of them: #1126.

We plan to include it in the nearest future releases. Please stay tuned, and if you have further issues, feel free to open a new issue or contact us at support@wiris.com.