@bluemarble/bm-components 2.6.0-rc → 2.6.0-rc.0

package/dist/index.js

@@ -1836,7 +1836,6 @@ function BaseGridAutoRows({ data, columns, rowKey }) {
 }
 
 // src/components/BlockEditor/index.tsx
-import EditorJS from "@editorjs/editorjs";
 import { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
 
 // src/components/BlockEditor/plugins/index.ts
@@ -4199,15 +4198,17 @@ var BlockEditor = forwardRef(function BlockEditor2({
   const generatedId = useId().replace(/[^a-zA-Z0-9-_]/g, "");
   const holderRef = useRef(null);
   const editorRef = useRef(null);
+  const loadRef = useRef(null);
   const undoRef = useRef(null);
   const dragDropRef = useRef(null);
   const propsRef = useRef({ onChange, onInitialize, onReady });
   propsRef.current = { onChange, onInitialize, onReady };
+  const ready = async () => {
+    const editor = await loadRef.current;
+    await editor?.isReady;
+    return editor;
+  };
   useImperativeHandle(ref, () => {
-    const ready = async () => {
-      await editorRef.current?.isReady;
-      return editorRef.current;
-    };
     return {
       get editor() {
         return editorRef.current;
@@ -4226,43 +4227,53 @@ var BlockEditor = forwardRef(function BlockEditor2({
   useEffect(() => {
     const holderNode = holderRef.current;
     if (!holderNode) return;
-    const editor = new EditorJS({
-      ...config,
-      readOnly,
-      placeholder,
-      holder: holderNode,
-      tools: createTools({ uploader, placeholder, headerPlaceholder, tools }),
-      data: defaultValue,
-      style: nonce ? { nonce } : void 0,
-      onChange: (api, event) => {
-        undoRef.current?.registerChange();
-        propsRef.current.onChange?.(api, event);
-      },
-      onReady: () => {
-        if (undo) {
-          undoRef.current = new Undo(editor, holderNode);
-          undoRef.current.initialize(defaultValue);
-        }
-        if (dragDrop && !readOnly) {
-          dragDropRef.current = new DragDrop(editor, holderNode);
+    let disposed = false;
+    const load = (async () => {
+      const { default: EditorJS } = await import("@editorjs/editorjs");
+      if (disposed) return null;
+      const editor = new EditorJS({
+        ...config,
+        readOnly,
+        placeholder,
+        holder: holderNode,
+        tools: createTools({ uploader, placeholder, headerPlaceholder, tools }),
+        data: defaultValue,
+        style: nonce ? { nonce } : void 0,
+        onChange: (api, event) => {
+          undoRef.current?.registerChange();
+          propsRef.current.onChange?.(api, event);
+        },
+        onReady: () => {
+          if (disposed) return;
+          if (undo) {
+            undoRef.current = new Undo(editor, holderNode);
+            undoRef.current.initialize(defaultValue);
+          }
+          if (dragDrop && !readOnly) {
+            dragDropRef.current = new DragDrop(editor, holderNode);
+          }
+          propsRef.current.onReady?.(editor);
         }
-        propsRef.current.onReady?.(editor);
-      }
-    });
-    editorRef.current = editor;
-    propsRef.current.onInitialize?.(editor);
+      });
+      editorRef.current = editor;
+      propsRef.current.onInitialize?.(editor);
+      return editor;
+    })();
+    loadRef.current = load;
     return () => {
+      disposed = true;
       undoRef.current?.destroy();
       dragDropRef.current?.destroy();
       undoRef.current = null;
       dragDropRef.current = null;
       editorRef.current = null;
-      editor.isReady.then(() => editor.destroy()).catch(() => void 0);
+      loadRef.current = null;
+      load.then((editor) => editor?.isReady.then(() => editor.destroy())).catch(() => void 0);
     };
   }, []);
   useEffect(() => {
     if (readOnly === void 0) return;
-    editorRef.current?.isReady.then(() => editorRef.current?.readOnly.toggle(readOnly)).catch(() => void 0);
+    ready().then((editor) => editor?.readOnly.toggle(readOnly)).catch(() => void 0);
   }, [readOnly]);
   return /* @__PURE__ */ jsx9(
     "div",