How to trigger a popup model (A React Component) from CKEditor 5 plugin button inside toolbar?

To trigger a popup modal (a React component) from a CKEditor 5 plugin button inside the toolbar, you can follow these general steps:

1. Create the Popup Modal Component: First, create the React component that represents your popup modal. This component should contain the content you want to show in the modal.

2. Create the CKEditor Plugin: Create a CKEditor 5 plugin that defines the custom button in the toolbar. Inside the plugin, you'll handle the click event of the custom button and trigger the display of the popup modal.

3. Integrate React Component in Plugin: In the CKEditor plugin, integrate your React popup modal component using a React portal. This allows you to render the React component outside of the CKEditor DOM structure so that it can be displayed as a popup.

4. Style the Popup Modal: Style the popup modal to appear on top of the CKEditor content and align it with your requirements.

Here's a step-by-step guide to implement this:

Step 1: Create the Popup Modal Component (e.g., MyPopupModal.js)

jsxCopy code
import React from 'react';

const MyPopupModal = ({ onClose }) => {
  return (
    <div className="popup-modal">
      {/* Add your content here */}
      <button onClick={onClose}>Close</button>
    </div>
  );
};

export default MyPopupModal;

Step 2: Create the CKEditor Plugin (e.g., MyPlugin.js)

javascriptCopy code
import MyPopupModal from './MyPopupModal';

export default class MyPlugin {
  static get pluginName() {
    return 'MyPlugin';
  }

  constructor(editor) {
    this.editor = editor;
  }

  init() {
    this.editor.ui.componentFactory.add('myButton', (locale) => {
      const view = new this.editor.ui.buttonView('myButton');

      view.set({
        label: 'My Button',
        icon: 'path/to/icon.png',
        tooltip: true,
      });

      view.on('execute', () => {
        this.showPopupModal();
      });

      return view;
    });
  }

  showPopupModal() {
    const popupContainer = document.createElement('div');
    document.body.appendChild(popupContainer);

    const onClose = () => {
      ReactDOM.unmountComponentAtNode(popupContainer);
      popupContainer.remove();
    };

    ReactDOM.render(<MyPopupModal onClose={onClose} />, popupContainer);
  }
}

Step 3: Register the CKEditor Plugin in your React Component (e.g., MyEditor.js)

jsxCopy code
import React, { useEffect } from 'react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import MyPlugin from './MyPlugin';

const MyEditor = () => {
  useEffect(() => {
    ClassicEditor.create(document.querySelector('#editor'), {
      plugins: [MyPlugin],
      toolbar: ['myButton', '...otherToolbarButtons'],
    }).catch((error) => {
      console.error(error);
    });
  }, []);

  return (
    <div>
      <div id="editor"></div>
    </div>
  );
};

export default MyEditor;

In this example, when the "My Button" in the CKEditor toolbar is clicked, the showPopupModal method of the MyPlugin is called. This method creates a new container element for the React modal, mounts the MyPopupModal component in that container using a React portal, and displays it as a popup modal. The onClose function in the modal component allows you to close the popup when needed.

Please note that the above code is a simplified example. You may need to adjust it based on your specific requirements, such as styling the popup modal, handling the modal's content, and handling more complex interactions within the modal.