@kerebron/editor-react 0.4.27 → 0.4.28

package/esm/EditorContent.d.ts

@@ -0,0 +1,26 @@
+import React 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 declare const EditorContent: React.ForwardRefExoticComponent<EditorContentProps & React.RefAttributes<EditorContentRef>>;
+//# sourceMappingURL=EditorContent.d.ts.map

package/esm/EditorContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorContent.d.ts","sourceRoot":"","sources":["../src/EditorContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,WAAW,kBAAkB;IACjC,yCAAyC;IACzC,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;IAC1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,gCAAgC;IAChC,UAAU,EAAE,MAAM,cAAc,GAAG,IAAI,CAAC;CACzC;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,6FAkCzB,CAAC"}

package/esm/EditorContent.js

@@ -0,0 +1,31 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, } from 'react';
+/**
+ * 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(function EditorContent({ editor, className = '', style }, ref) {
+    const containerRef = useRef(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;
+        if (editorDom && editorDom.parentElement !== container) {
+            container.appendChild(editorDom);
+        }
+        return () => {
+            // Don't remove on cleanup - editor.destroy() handles this
+        };
+    }, [editor]);
+    return (React.createElement("div", { ref: containerRef, className: `kb-component ${className}`.trim(), style: style }));
+});

package/esm/_dnt.shims.d.ts

@@ -0,0 +1,2 @@
+export declare const dntGlobalThis: Omit<typeof globalThis, never>;
+//# sourceMappingURL=_dnt.shims.d.ts.map

package/esm/_dnt.shims.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_dnt.shims.d.ts","sourceRoot":"","sources":["../src/_dnt.shims.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,gCAA2C,CAAC"}

package/esm/_dnt.shims.js

@@ -0,0 +1,57 @@
+const dntGlobals = {};
+export const dntGlobalThis = createMergeProxy(globalThis, dntGlobals);
+function createMergeProxy(baseObj, extObj) {
+    return new Proxy(baseObj, {
+        get(_target, prop, _receiver) {
+            if (prop in extObj) {
+                return extObj[prop];
+            }
+            else {
+                return baseObj[prop];
+            }
+        },
+        set(_target, prop, value) {
+            if (prop in extObj) {
+                delete extObj[prop];
+            }
+            baseObj[prop] = value;
+            return true;
+        },
+        deleteProperty(_target, prop) {
+            let success = false;
+            if (prop in extObj) {
+                delete extObj[prop];
+                success = true;
+            }
+            if (prop in baseObj) {
+                delete baseObj[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[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;
+        },
+    });
+}

package/esm/mod.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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';
+export { CoreEditor } from '@kerebron/editor';
+//# sourceMappingURL=mod.d.ts.map

package/esm/mod.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../src/mod.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,GACtB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC"}

package/esm/mod.js

@@ -0,0 +1,24 @@
+/**
+ * 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 } from './useEditor.js';
+export { EditorContent, } from './EditorContent.js';
+// Re-export CoreEditor for convenience
+export { CoreEditor } from '@kerebron/editor';

package/esm/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/esm/useEditor.d.ts

@@ -0,0 +1,38 @@
+import { type DependencyList } 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 declare function useEditor(options?: UseEditorOptions, deps?: DependencyList): CoreEditor | null;
+//# sourceMappingURL=useEditor.d.ts.map

package/esm/useEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditor.d.ts","sourceRoot":"","sources":["../src/useEditor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAA+B,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEnE,MAAM,WAAW,gBAAgB;IAC/B,iCAAiC;IACjC,UAAU,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACjC,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CACvB,OAAO,GAAE,gBAAqB,EAC9B,IAAI,GAAE,cAAmB,GACxB,UAAU,GAAG,IAAI,CAyEnB"}

package/esm/useEditor.js

@@ -0,0 +1,69 @@
+import * as dntShim from "./_dnt.shims.js";
+import { useEffect, useRef, useState } from 'react';
+import { CoreEditor } from '@kerebron/editor';
+/**
+ * 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 = {}, deps = []) {
+    const [editor, setEditor] = useState(null);
+    const editorContainerRef = useRef(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;
+}

package/package.json

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