@kerebron/editor-react 0.4.28 → 0.4.29

package/esm/EditorContent.js

@@ -29,3 +29,4 @@ export const EditorContent = forwardRef(function EditorContent({ editor, classNa
     }, [editor]);
     return (React.createElement("div", { ref: containerRef, className: `kb-component ${className}`.trim(), style: style }));
 });
+//# sourceMappingURL=EditorContent.js.map

package/esm/EditorContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorContent.js","sourceRoot":"","sources":["../src/EditorContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,UAAU,EACV,SAAS,EACT,mBAAmB,EACnB,MAAM,GACP,MAAM,OAAO,CAAC;AAiBf;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,SAAS,aAAa,CACpB,EAAE,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAsB,EACrD,GAAyC;IAEzC,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,UAAU,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO;KACvC,CAAC,CAAC,CAAC;IAEJ,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,IAAI,CAAC,SAAS,IAAI,CAAC,MAAM;YAAE,OAAO;QAElC,8DAA8D;QAC9D,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,EAAE,GAA8B,CAAC;QAC9D,IAAI,SAAS,IAAI,SAAS,CAAC,aAAa,KAAK,SAAS,EAAE,CAAC;YACvD,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QACnC,CAAC;QAED,OAAO,GAAG,EAAE;YACV,0DAA0D;QAC5D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACL,6BACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,gBAAgB,SAAS,EAAE,CAAC,IAAI,EAAE,EAC7C,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

package/esm/_dnt.shims.js

@@ -55,3 +55,4 @@ function createMergeProxy(baseObj, extObj) {
         },
     });
 }
+//# sourceMappingURL=_dnt.shims.js.map

package/esm/_dnt.shims.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_dnt.shims.js","sourceRoot":"","sources":["../src/_dnt.shims.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,GAAG,EAClB,CAAC;AACF,MAAM,CAAC,MAAM,aAAa,GAAG,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AAEtE,SAAS,gBAAgB,CACvB,OAAU,EACV,MAAS;IAET,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE;QACxB,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,SAAS;YAC1B,IAAI,IAAI,IAAI,MAAM,EAAE,CAAC;gBACnB,OAAQ,MAAc,CAAC,IAAI,CAAC,CAAC;YAC/B,CAAC;iBAAM,CAAC;gBACN,OAAQ,OAAe,CAAC,IAAI,CAAC,CAAC;YAChC,CAAC;QACH,CAAC;QACD,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK;YACtB,IAAI,IAAI,IAAI,MAAM,EAAE,CAAC;gBACnB,OAAQ,MAAc,CAAC,IAAI,CAAC,CAAC;YAC/B,CAAC;YACA,OAAe,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;YAC/B,OAAO,IAAI,CAAC;QACd,CAAC;QACD,cAAc,CAAC,OAAO,EAAE,IAAI;YAC1B,IAAI,OAAO,GAAG,KAAK,CAAC;YACpB,IAAI,IAAI,IAAI,MAAM,EAAE,CAAC;gBACnB,OAAQ,MAAc,CAAC,IAAI,CAAC,CAAC;gBAC7B,OAAO,GAAG,IAAI,CAAC;YACjB,CAAC;YACD,IAAI,IAAI,IAAI,OAAO,EAAE,CAAC;gBACpB,OAAQ,OAAe,CAAC,IAAI,CAAC,CAAC;gBAC9B,OAAO,GAAG,IAAI,CAAC;YACjB,CAAC;YACD,OAAO,OAAO,CAAC;QACjB,CAAC;QACD,OAAO,CAAC,OAAO;YACb,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YAC1C,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YACxC,MAAM,UAAU,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC;YACpC,OAAO,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,CAAC,CAAC;QACrE,CAAC;QACD,cAAc,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI;YAChC,IAAI,IAAI,IAAI,MAAM,EAAE,CAAC;gBACnB,OAAQ,MAAc,CAAC,IAAI,CAAC,CAAC;YAC/B,CAAC;YACD,OAAO,CAAC,cAAc,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;YAC5C,OAAO,IAAI,CAAC;QACd,CAAC;QACD,wBAAwB,CAAC,OAAO,EAAE,IAAI;YACpC,IAAI,IAAI,IAAI,MAAM,EAAE,CAAC;gBACnB,OAAO,OAAO,CAAC,wBAAwB,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;YACxD,CAAC;iBAAM,CAAC;gBACN,OAAO,OAAO,CAAC,wBAAwB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;YACzD,CAAC;QACH,CAAC;QACD,GAAG,CAAC,OAAO,EAAE,IAAI;YACf,OAAO,IAAI,IAAI,MAAM,IAAI,IAAI,IAAI,OAAO,CAAC;QAC3C,CAAC;KACF,CAAQ,CAAC;AACZ,CAAC"}

package/esm/mod.js

@@ -22,3 +22,4 @@ export { useEditor } from './useEditor.js';
 export { EditorContent, } from './EditorContent.js';
 // Re-export CoreEditor for convenience
 export { CoreEditor } from '@kerebron/editor';
+//# sourceMappingURL=mod.js.map

package/esm/mod.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mod.js","sourceRoot":"","sources":["../src/mod.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,SAAS,EAAyB,MAAM,gBAAgB,CAAC;AAClE,OAAO,EACL,aAAa,GAGd,MAAM,oBAAoB,CAAC;AAE5B,uCAAuC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC"}

package/esm/useEditor.js

@@ -67,3 +67,4 @@ export function useEditor(options = {}, deps = []) {
     }, deps); // eslint-disable-line react-hooks/exhaustive-deps
     return editor;
 }
+//# sourceMappingURL=useEditor.js.map

package/esm/useEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditor.js","sourceRoot":"","sources":["../src/useEditor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAuB,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAwB9C;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,SAAS,CACvB,UAA4B,EAAE,EAC9B,OAAuB,EAAE;IAEzB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAoB,IAAI,CAAC,CAAC;IAC9D,MAAM,kBAAkB,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAC5D,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAEnC,2BAA2B;IAC3B,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACb,6CAA6C;QAC7C,IAAI,OAAO,CAAC,iBAAiB,KAAK,KAAK,IAAI,OAAO,OAAO,CAAC,aAAa,KAAK,WAAW,EAAE,CAAC;YACxF,OAAO;QACT,CAAC;QAED,MAAM,EACJ,UAAU,GAAG,EAAE,EACf,OAAO,EACP,cAAc,EACd,MAAM,EACN,GAAG,EACH,OAAO,EACP,aAAa,EACb,QAAQ,GACT,GAAG,UAAU,CAAC,OAAO,CAAC;QAEvB,4CAA4C;QAC5C,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAChD,kBAAkB,CAAC,OAAO,GAAG,SAAS,CAAC;QAEvC,MAAM,cAAc,GAAG,IAAI,UAAU,CAAC;YACpC,OAAO,EAAE,SAAS;YAClB,UAAU;YACV,OAAO,EAAE,cAAc;YACvB,MAAM;YACN,GAAG;SACJ,CAAC,CAAC;QAEH,yBAAyB;QACzB,IAAI,aAAa,EAAE,CAAC;YAClB,cAAc,CAAC,gBAAgB,CAAC,aAAa,EAAE,GAAG,EAAE;gBAClD,aAAa,CAAC,cAAc,CAAC,CAAC;YAChC,CAAC,CAAC,CAAC;QACL,CAAC;QAED,IAAI,QAAQ,EAAE,CAAC;YACb,cAAc,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,EAAE;gBAC9C,QAAQ,CAAC,cAAc,CAAC,CAAC;YAC3B,CAAC,CAAC,CAAC;QACL,CAAC;QAED,gCAAgC;QAChC,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACjD,cAAc,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE;gBAC1D,mDAAmD;gBACnD,OAAO,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;YAC9C,CAAC,CAAC,CAAC;QACL,CAAC;QAED,SAAS,CAAC,cAAc,CAAC,CAAC;QAE1B,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,cAAc,CAAC,CAAC;QAC1B,CAAC;QAED,UAAU;QACV,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,OAAO,EAAE,CAAC;YACzB,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,kDAAkD;IAE5D,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerebron/editor-react",
-  "version": "0.4.28",
+  "version": "0.4.29",
   "license": "MIT",
   "module": "./esm/mod.js",
   "exports": {
@@ -9,8 +9,12 @@
     }
   },
   "scripts": {},
+  "files": [
+    "esm",
+    "src"
+  ],
   "dependencies": {
-    "@kerebron/editor": "0.4.28",
+    "@kerebron/editor": "0.4.29",
     "react": "^19"
   },
   "devDependencies": {

package/src/EditorContent.tsx

@@ -0,0 +1,67 @@
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import type { CoreEditor } from '@kerebron/editor';
+
+export interface EditorContentProps {
+  /** The editor instance from useEditor */
+  editor: CoreEditor | null;
+  /** Additional class name */
+  className?: string;
+  /** Additional inline styles */
+  style?: React.CSSProperties;
+}
+
+export interface EditorContentRef {
+  /** Get the container element */
+  getElement: () => HTMLDivElement | null;
+}
+
+/**
+ * EditorContent renders the Kerebron editor.
+ * Use with the useEditor hook.
+ *
+ * @example
+ * ```tsx
+ * const editor = useEditor({ extensions: [StarterKit] })
+ * return <EditorContent editor={editor} />
+ * ```
+ */
+export const EditorContent = forwardRef<EditorContentRef, EditorContentProps>(
+  function EditorContent(
+    { editor, className = '', style }: EditorContentProps,
+    ref: React.ForwardedRef<EditorContentRef>,
+  ) {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useImperativeHandle(ref, () => ({
+      getElement: () => containerRef.current,
+    }));
+
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container || !editor) return;
+
+      // Get the editor's DOM element and append it to our container
+      const editorDom = editor.view?.dom as HTMLElement | undefined;
+      if (editorDom && editorDom.parentElement !== container) {
+        container.appendChild(editorDom);
+      }
+
+      return () => {
+        // Don't remove on cleanup - editor.destroy() handles this
+      };
+    }, [editor]);
+
+    return (
+      <div
+        ref={containerRef}
+        className={`kb-component ${className}`.trim()}
+        style={style}
+      />
+    );
+  },
+);

package/src/_dnt.shims.ts

@@ -0,0 +1,60 @@
+const dntGlobals = {
+};
+export const dntGlobalThis = createMergeProxy(globalThis, dntGlobals);
+
+function createMergeProxy<T extends object, U extends object>(
+  baseObj: T,
+  extObj: U,
+): Omit<T, keyof U> & U {
+  return new Proxy(baseObj, {
+    get(_target, prop, _receiver) {
+      if (prop in extObj) {
+        return (extObj as any)[prop];
+      } else {
+        return (baseObj as any)[prop];
+      }
+    },
+    set(_target, prop, value) {
+      if (prop in extObj) {
+        delete (extObj as any)[prop];
+      }
+      (baseObj as any)[prop] = value;
+      return true;
+    },
+    deleteProperty(_target, prop) {
+      let success = false;
+      if (prop in extObj) {
+        delete (extObj as any)[prop];
+        success = true;
+      }
+      if (prop in baseObj) {
+        delete (baseObj as any)[prop];
+        success = true;
+      }
+      return success;
+    },
+    ownKeys(_target) {
+      const baseKeys = Reflect.ownKeys(baseObj);
+      const extKeys = Reflect.ownKeys(extObj);
+      const extKeysSet = new Set(extKeys);
+      return [...baseKeys.filter((k) => !extKeysSet.has(k)), ...extKeys];
+    },
+    defineProperty(_target, prop, desc) {
+      if (prop in extObj) {
+        delete (extObj as any)[prop];
+      }
+      Reflect.defineProperty(baseObj, prop, desc);
+      return true;
+    },
+    getOwnPropertyDescriptor(_target, prop) {
+      if (prop in extObj) {
+        return Reflect.getOwnPropertyDescriptor(extObj, prop);
+      } else {
+        return Reflect.getOwnPropertyDescriptor(baseObj, prop);
+      }
+    },
+    has(_target, prop) {
+      return prop in extObj || prop in baseObj;
+    },
+  }) as any;
+}

package/src/mod.ts

@@ -0,0 +1,30 @@
+/**
+ * React bindings for Kerebron Editor
+ *
+ * @example
+ * ```tsx
+ * import { useEditor, EditorContent } from '@kerebron/editor-react'
+ * import { StarterKit } from '@kerebron/editor-kits/StarterKit'
+ *
+ * const MyEditor = () => {
+ *   const editor = useEditor({
+ *     extensions: [StarterKit],
+ *     content: '<p>Hello World!</p>',
+ *   })
+ *
+ *   return <EditorContent editor={editor} />
+ * }
+ * ```
+ *
+ * @module
+ */
+
+export { useEditor, type UseEditorOptions } from './useEditor.js';
+export {
+  EditorContent,
+  type EditorContentProps,
+  type EditorContentRef,
+} from './EditorContent.js';
+
+// Re-export CoreEditor for convenience
+export { CoreEditor } from '@kerebron/editor';

package/src/useEditor.ts

@@ -0,0 +1,116 @@
+import * as dntShim from "./_dnt.shims.js";
+import { type DependencyList, useEffect, useRef, useState } from 'react';
+import { CoreEditor } from '@kerebron/editor';
+import type { AnyExtensionOrReq, Content } from '@kerebron/editor';
+
+export interface UseEditorOptions {
+  /** Array of extensions to use */
+  extensions?: AnyExtensionOrReq[];
+  /** Initial HTML content */
+  content?: string;
+  /** Initial JSON content */
+  initialContent?: Content;
+  /** CDN URL for WASM files */
+  cdnUrl?: string;
+  /** Document URI */
+  uri?: string;
+  /** Called when editor is ready */
+  onReady?: (editor: CoreEditor) => void;
+  /** Called on every transaction */
+  onTransaction?: (editor: CoreEditor) => void;
+  /** Called when content changes */
+  onChange?: (editor: CoreEditor) => void;
+  /** Prevent immediate render (useful for SSR) */
+  immediatelyRender?: boolean;
+}
+
+/**
+ * React hook for creating and managing a Kerebron editor instance.
+ *
+ * @example
+ * ```tsx
+ * const editor = useEditor({
+ *   extensions: [StarterKit],
+ *   content: '<p>Hello World!</p>',
+ * })
+ *
+ * return <EditorContent editor={editor} />
+ * ```
+ */
+export function useEditor(
+  options: UseEditorOptions = {},
+  deps: DependencyList = [],
+): CoreEditor | null {
+  const [editor, setEditor] = useState<CoreEditor | null>(null);
+  const editorContainerRef = useRef<HTMLElement | null>(null);
+  const optionsRef = useRef(options);
+
+  // Keep options ref updated
+  optionsRef.current = options;
+
+  useEffect(() => {
+    // Skip if SSR and immediatelyRender is false
+    if (options.immediatelyRender === false && typeof dntShim.dntGlobalThis === 'undefined') {
+      return;
+    }
+
+    const {
+      extensions = [],
+      content,
+      initialContent,
+      cdnUrl,
+      uri,
+      onReady,
+      onTransaction,
+      onChange,
+    } = optionsRef.current;
+
+    // Create a container element for the editor
+    const container = document.createElement('div');
+    editorContainerRef.current = container;
+
+    const editorInstance = new CoreEditor({
+      element: container,
+      extensions,
+      content: initialContent,
+      cdnUrl,
+      uri,
+    });
+
+    // Set up event listeners
+    if (onTransaction) {
+      editorInstance.addEventListener('transaction', () => {
+        onTransaction(editorInstance);
+      });
+    }
+
+    if (onChange) {
+      editorInstance.addEventListener('changed', () => {
+        onChange(editorInstance);
+      });
+    }
+
+    // Load HTML content if provided
+    if (content) {
+      const buffer = new TextEncoder().encode(content);
+      editorInstance.loadDocument('text/html', buffer).catch(() => {
+        // If HTML loading fails, try setting as plain text
+        console.warn('Failed to load HTML content');
+      });
+    }
+
+    setEditor(editorInstance);
+
+    if (onReady) {
+      onReady(editorInstance);
+    }
+
+    // Cleanup
+    return () => {
+      editorInstance.destroy();
+      setEditor(null);
+    };
+  }, deps); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return editor;
+}