Integrating Editor.js into a Remix app

[Vinorcola]

Hello there,

I'm trying to get Editor.js to work within a Remix app without success yet.

I'm looking for some help in order to get it work.

I've tried several alternatives which are all in the same repo.

First try: using react-editor-js

The code is available on branch react-editor-js on the repo.

import { createReactEditorJS } from 'react-editor-js'

const ReactEditorJS = createReactEditorJS()

export default function Editor({ id, content }) {
    return (
        <ReactEditorJS holder={id} defaultValue={content}>
            <div id={id} />
        </ReactEditorJS>
    )
}

This does nothing more than displaying an empty div. No errors displayed anywhere.

Second try: using Editor.js directly

The code is available on branch editor.js on the repo.

import EditorJS from "@editorjs/editorjs"
import { useEffect } from "react"

export default function Editor({ id }) {
    useEffect(() => {
        const editor = new EditorJS({
            holder: id,
        })
    }, [])

    return (
        <div id={id} />
    )
}

I encounter errors during build time:

ReferenceError: Element is not defined
    at /home/.../remix-editorjs-example/node_modules/@editorjs/editorjs/dist/editorjs.umd.js:1:553
    at /home/.../remix-editorjs-example/node_modules/@editorjs/editorjs/dist/editorjs.umd.js:1:76
    at Object.<anonymous> (/home/.../remix-editorjs-example/node_modules/@editorjs/editorjs/dist/editorjs.umd.js:1:192)
    at Module._compile (node:internal/modules/cjs/loader:1218:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at Module.load (node:internal/modules/cjs/loader:1081:32)
    at Function.Module._load (node:internal/modules/cjs/loader:922:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:167:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

If anyone could provide some help with any working solution, it would be wonderful.

Thanks in advance.

[stephanvebrian]

try change your second try with following code:

import { useEffect } from "react"

export default function Editor({ id }) {
    useEffect(() => {
        const { default: EditorJS } = await import("@editorjs/editorjs");
        const editor = new EditorJS({
            holder: id,
        })
    }, [])

    return (
        <div id={id} />
    )
}

[bin16]

As the setup function in useEffect can not be "async", so kind of this. It works for me, Thanks.

const Editor = () => {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const load = async () => {
      const { default: EditorJS, } = await import("@editorjs/editorjs");
      if (ref.current) {
        const editor = new EditorJS({
          holder: ref.current,
        });
      }
    }

    load();
  }, []);

  return <div>
    <div ref={ref}></div>
  </div>
}

[maxou00]

If there is someone still there, I spent 2 days on it figuring it out, as I tried ClientOnly from remix-utils alternatives and Lazy loading. They work perfectly on dev but crash in production.

Here is the behavior that works perfectly on both dev and production for me, so that you don't struggle on it anymore.

The module @editorjs/editorjs is only used for typing purposes through the namespace EditorJS

On the root file I load the script of editor.js

<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>

Later on, I transfer the class to another variable to prevent overlapping with the namespace (the class is EditorJS and the namespace EditorJS)

<script> window.__EditorJS__ = EditorJS; </script>

in global.d.ts at the root of the project (if it does not exist create a new file)

declare var __EditorJS__: typeof EditorJS.default

I have a function that takes cares of the creation process for me

export async function createEditor(config: EditorJS.EditorConfig) { let editor = new window.__EditorJS__(config); return editor; }

In the component that handles edition i make sure it only happen on the client side:

` const [init, setInit] = useState(false);

 const onEditorChange = useCallback(
     async (
       api: EditorJS.API,
       event: EditorJS.BlockMutationEvent | EditorJS.BlockMutationEvent[]
     ) => {
       let content = await api.saver.save();
       props.onSave(content);
     },
     []
   );

  useEffect(() => {
    if (globalThis.window && globalThis.document && !init) {
      createEditor({
        holder: "editorjs",
        tools: {
          header: Header,
          list: List,
        },
        data: CREATE_DEFAULT_BLOCK_DATA(),
        onChange: async (
          api: EditorJS.API,
          event: EditorJS.BlockMutationEvent | EditorJS.BlockMutationEvent[]
        ) => {
          await onEditorChange(api, event);
        },

        onReady() {
          setInit(true);
        },
      }).then((instance) => {
        editor.current = instance;
      });
    }
  }, [init]);

`

That's it !