Custom plugin with React components

[husainasfak]

is there any way to create custom plugin which uses react component instead of vanilla js?

[n2-freevas]

A simple way to achieve placing the React root in a wrapper provided by a plugin and call any React component.

import { createRoot } from 'react-dom/client';
import SomethingReactComponent from './...';


export default class Something {
  ...

  constructor(...){
     ...
    this._elements = {
        wrapper: $.make('div', this.CSS.wrapper) as HTMLDivElement,
      };
    ...
  }

  drawReactComponent(something: object) {
    const root = createRoot(this._elements.wrapper);
    root.render(
      <SomethingReactComponent
        args={something}
        callback={(data) => {
          this._data = data;
        }}
      />,
    );
  }

  render() {
    this.drawReactComponent(this._data.something);
    return this._elements.wrapper;
  }

[gitsome]

I tried this example:
https://github.com/hata6502/editorjs-examples/blob/main/examples/ExampleReactBlockTool/ExampleReactBlockTool.tsx

It works, but the focus ends up at the start of the next block.

It seems maybe focus is set synchronously before the React render loop can insert the contenteditable node?

editor.js/src/components/selection.ts

Line 340 in 3aa164d

element.focus();

I guess I'm looking for suggestions on how to asynchronously set focus to the start of the newly inserted React Tool?

My code is proprietary, but if needed, I can try and setup a reproducible sandbox example. Is there a default Sandbox example using TypeScript where I can add this React based tool? Thank you!

[gitsome]

Update, I tried using React's autofocus, but that ends up scrolling the view on first load. My current approach is to focus without scrolling which avoids the scrolling issue on load but still puts the focus on the newly added react block:

  const editorRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (editorRef.current) {
      editorRef.current.innerHTML = internalText;
      editorRef.current.focus({preventScroll: true});
    }
  }, [editorRef]);

The editorRef is placed on the element that is contenteditble.