@kerebron/editor-react 0.4.3

package/esm/editor/src/utilities/getHtmlAttributes.d.ts

@@ -0,0 +1,9 @@
+import type { MarkSpec, Node as ProseMirrorNode, NodeSpec } from 'prosemirror-model';
+import type { Mark } from '../Mark.js';
+import type { Node } from '../Node.js';
+type MarkOfNode = Mark | Node;
+export declare function getHtmlAttributes(extension: MarkOfNode, node: ProseMirrorNode): Record<string, any>;
+export declare function setHtmlAttributes(extension: MarkOfNode, element: HTMLElement): Record<string, any>;
+export declare function addAttributesToSchema(spec: MarkSpec | NodeSpec, extension: MarkOfNode): void;
+export {};
+//# sourceMappingURL=getHtmlAttributes.d.ts.map

package/esm/editor/src/utilities/getHtmlAttributes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getHtmlAttributes.d.ts","sourceRoot":"","sources":["../../../../src/editor/src/utilities/getHtmlAttributes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,QAAQ,EACR,IAAI,IAAI,eAAe,EACvB,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAEvC,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9B,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,UAAU,EACrB,IAAI,EAAE,eAAe,uBAmBtB;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,uBAc5E;AAED,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,QAAQ,GAAG,QAAQ,EACzB,SAAS,EAAE,UAAU,QAetB"}

package/esm/editor/src/utilities/getHtmlAttributes.js

@@ -0,0 +1,47 @@
+export function getHtmlAttributes(extension, node) {
+    const attrs = {};
+    if (extension.attributes) {
+        for (const [key, value] of Object.entries(extension.attributes)) {
+            if ('undefined' !== typeof node.attrs[key]) {
+                attrs[key] = node.attrs[key];
+            }
+            else {
+                if (value.toDom) {
+                    attrs[key] = value.toDom(node);
+                }
+                else {
+                    attrs[key] = value.default;
+                }
+            }
+        }
+    }
+    return attrs;
+}
+export function setHtmlAttributes(extension, element) {
+    const attrs = {};
+    if (extension.attributes) {
+        for (const [key, value] of Object.entries(extension.attributes)) {
+            if (value.fromDom) {
+                attrs[key] = value.fromDom(element);
+            }
+            else {
+                attrs[key] = value.default;
+            }
+        }
+    }
+    return attrs;
+}
+export function addAttributesToSchema(spec, extension) {
+    const attrs = {};
+    if (extension.attributes) {
+        if (!spec.attrs) {
+            spec.attrs = {};
+        }
+        for (const [key, value] of Object.entries(extension.attributes)) {
+            spec.attrs[key] = value;
+            if (!value.toDom) {
+                value.toDom = (node) => node.attrs[key];
+            }
+        }
+    }
+}

package/esm/editor-react/src/EditorContent.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { CoreEditor } from '../../editor/src/mod.js';
+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/editor-react/src/EditorContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorContent.d.ts","sourceRoot":"","sources":["../../../src/editor-react/src/EditorContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,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/editor-react/src/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/editor-react/src/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 '../../editor/src/mod.js';
+//# sourceMappingURL=mod.d.ts.map

package/esm/editor-react/src/mod.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../../src/editor-react/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,yBAAyB,CAAC"}

package/esm/editor-react/src/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 '../../editor/src/mod.js';

package/esm/editor-react/src/useEditor.d.ts

@@ -0,0 +1,38 @@
+import { type DependencyList } from 'react';
+import { CoreEditor } from '../../editor/src/mod.js';
+import type { AnyExtensionOrReq, Content } from '../../editor/src/mod.js';
+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/editor-react/src/useEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditor.d.ts","sourceRoot":"","sources":["../../../src/editor-react/src/useEditor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAA+B,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAE1E,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/editor-react/src/useEditor.js

@@ -0,0 +1,69 @@
+import * as dntShim from "../../_dnt.shims.js";
+import { useEffect, useRef, useState } from 'react';
+import { CoreEditor } from '../../editor/src/mod.js';
+/**
+ * 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/esm/package.json

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

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@kerebron/editor-react",
+  "version": "0.4.3",
+  "license": "MIT",
+  "module": "./esm/editor-react/src/mod.js",
+  "exports": {
+    ".": {
+      "import": "./esm/editor-react/src/mod.js"
+    }
+  },
+  "scripts": {},
+  "dependencies": {
+    "prosemirror-model": "1.25.3",
+    "prosemirror-state": "1.4.3",
+    "prosemirror-transform": "1.10.4",
+    "prosemirror-view": "1.40.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.9.0"
+  },
+  "_generatedBy": "dnt@dev"
+}