@domternal/react 0.4.0

package/dist/toolbar/useComputedStyle.d.ts

@@ -0,0 +1,12 @@
+import type { Editor } from '@domternal/core';
+/**
+ * Read a CSS property value at the current cursor position.
+ * Prefers inline style (explicit mark) over computed style (inherited).
+ */
+export declare function getComputedStyleAtCursor(editor: Editor, prop: string): string | null;
+/**
+ * Read only inline style at the current cursor position (no computed fallback).
+ * Used for font-family to avoid reading browser default inheritance.
+ */
+export declare function getInlineStyleAtCursor(editor: Editor, prop: string): string | null;
+//# sourceMappingURL=useComputedStyle.d.ts.map

package/dist/toolbar/useComputedStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComputedStyle.d.ts","sourceRoot":"","sources":["../../src/toolbar/useComputedStyle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAcpF;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAYlF"}

package/dist/toolbar/useKeyboardNav.d.ts

@@ -0,0 +1,6 @@
+import type { ToolbarController } from '@domternal/core';
+export declare function useKeyboardNav(controllerRef: React.RefObject<ToolbarController | null>, toolbarRef: React.RefObject<HTMLDivElement | null>, closeDropdown: () => void): {
+    onKeyDown: (event: React.KeyboardEvent) => void;
+    focusCurrentButton: () => void;
+};
+//# sourceMappingURL=useKeyboardNav.d.ts.map

package/dist/toolbar/useKeyboardNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardNav.d.ts","sourceRoot":"","sources":["../../src/toolbar/useKeyboardNav.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,wBAAgB,cAAc,CAC5B,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EACxD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,EAClD,aAAa,EAAE,MAAM,IAAI;uBAQa,KAAK,CAAC,aAAa;;EAoC1D"}

package/dist/toolbar/useToolbarController.d.ts

@@ -0,0 +1,19 @@
+import { ToolbarController } from '@domternal/core';
+import type { Editor, ToolbarButton, ToolbarDropdown, ToolbarGroup, ToolbarLayoutEntry } from '@domternal/core';
+export declare function useToolbarController(editor: Editor | null, layout?: ToolbarLayoutEntry[]): {
+    controller: import("react").RefObject<ToolbarController | null>;
+    groups: ToolbarGroup[];
+    focusedIndex: number;
+    openDropdown: string | null;
+    activeVersion: number;
+    toolbarRef: import("react").RefObject<HTMLDivElement | null>;
+    isActive: (name: string) => boolean;
+    isDisabled: (name: string) => boolean;
+    isDropdownActive: (dropdown: ToolbarDropdown) => boolean;
+    getAriaExpanded: (item: ToolbarButton) => string | null;
+    getFlatIndex: (name: string) => number;
+    handleDropdownToggle: (dropdown: ToolbarDropdown) => void;
+    closeDropdown: () => void;
+    syncState: () => void;
+};
+//# sourceMappingURL=useToolbarController.d.ts.map

package/dist/toolbar/useToolbarController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToolbarController.d.ts","sourceRoot":"","sources":["../../src/toolbar/useToolbarController.ts"],"names":[],"mappings":"AACA,OAAO,EACL,iBAAiB,EAElB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EACV,MAAM,EACN,aAAa,EACb,eAAe,EAEf,YAAY,EACZ,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,MAAM,GAAG,IAAI,EACrB,MAAM,CAAC,EAAE,kBAAkB,EAAE;;;;;;;qBA8FO,MAAM,KAAG,OAAO;uBAKd,MAAM,KAAG,OAAO;iCAIN,eAAe,KAAG,OAAO;4BAQ9B,aAAa,KAAG,MAAM,GAAG,IAAI;yBAKhC,MAAM,KAAG,MAAM;qCAIH,eAAe;;;EA+CpE"}

package/dist/toolbar/useToolbarIcons.d.ts

@@ -0,0 +1,11 @@
+import type { IconSet, ToolbarButton, ToolbarDropdown } from '@domternal/core';
+export declare const DROPDOWN_CARET = "<svg class=\"dm-dropdown-caret\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"><path d=\"M2 4l3 3 3-3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>";
+export declare function useToolbarIcons(icons?: IconSet | null): {
+    resolveIconSvg: (name: string) => string;
+    getCachedIcon: (name: string) => string;
+    getCachedTriggerLabel: (label: string, isIcon?: boolean) => string;
+    getCachedTriggerIcon: (iconName: string) => string;
+    getCachedItemContent: (iconName: string, label: string, displayMode?: "icon-text" | "text" | "icon") => string;
+    getDropdownTriggerHtml: (dropdown: ToolbarDropdown, activeItem: ToolbarButton | undefined) => string;
+};
+//# sourceMappingURL=useToolbarIcons.d.ts.map

package/dist/toolbar/useToolbarIcons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToolbarIcons.d.ts","sourceRoot":"","sources":["../../src/toolbar/useToolbarIcons.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE/E,eAAO,MAAM,cAAc,qOAAiN,CAAC;AAE7O,wBAAgB,eAAe,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI;2BAUV,MAAM,KAAG,MAAM;0BAOhB,MAAM,KAAG,MAAM;mCAWN,MAAM,WAAW,OAAO,KAAG,MAAM;qCAY/B,MAAM,KAAG,MAAM;qCAYvD,MAAM,SACT,MAAM,gBACC,WAAW,GAAG,MAAM,GAAG,MAAM,KAC1C,MAAM;uCAmBG,eAAe,cACb,aAAa,GAAG,SAAS,KACpC,MAAM;EAkCV"}

package/dist/toolbar/useTooltip.d.ts

@@ -0,0 +1,5 @@
+import type { ToolbarButton } from '@domternal/core';
+export declare function useTooltip(): {
+    getTooltip: (item: ToolbarButton) => string;
+};
+//# sourceMappingURL=useTooltip.d.ts.map

package/dist/toolbar/useTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/toolbar/useTooltip.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIrD,wBAAgB,UAAU;uBACc,aAAa,KAAG,MAAM;EAgB7D"}

package/dist/useEditor.d.ts

@@ -0,0 +1,79 @@
+import { type DependencyList } from 'react';
+import { Editor } from '@domternal/core';
+import type { Content, AnyExtension, FocusPosition } from '@domternal/core';
+export declare const DEFAULT_EXTENSIONS: AnyExtension[];
+export interface UseEditorOptions {
+    /** Custom extensions to add to the editor. */
+    extensions?: AnyExtension[];
+    /** Initial editor content (HTML string or JSON). */
+    content?: Content;
+    /** Whether the editor is editable. @default true */
+    editable?: boolean;
+    /** Where to autofocus on mount. @default false */
+    autofocus?: FocusPosition;
+    /** Output format for content comparison. @default 'html' */
+    outputFormat?: 'html' | 'json';
+    /**
+     * Set to false to delay editor creation to useEffect (SSR-safe).
+     * When false, the editor will be null during server-side rendering
+     * and created only after the component mounts in the browser.
+     * @default true
+     */
+    immediatelyRender?: boolean;
+    /** Called when the editor instance is created. */
+    onCreate?: (editor: Editor) => void;
+    /** Called when the document content changes. */
+    onUpdate?: (props: {
+        editor: Editor;
+    }) => void;
+    /** Called when the selection changes without content change. */
+    onSelectionChange?: (props: {
+        editor: Editor;
+    }) => void;
+    /** Called when the editor gains focus. */
+    onFocus?: (props: {
+        editor: Editor;
+        event: FocusEvent;
+    }) => void;
+    /** Called when the editor loses focus. */
+    onBlur?: (props: {
+        editor: Editor;
+        event: FocusEvent;
+    }) => void;
+    /** Called before the editor is destroyed. */
+    onDestroy?: () => void;
+}
+/**
+ * Core hook for creating and managing a Domternal editor instance.
+ *
+ * @param options - Editor configuration
+ * @param deps - Optional dependency array. When any value changes, the editor
+ *   is destroyed and recreated (content is preserved). Useful for dynamic
+ *   configuration that requires a full editor rebuild.
+ *
+ * @example
+ * ```tsx
+ * const { editor, editorRef } = useEditor({ extensions, content });
+ * return <div className="dm-editor"><div ref={editorRef} /></div>;
+ * ```
+ *
+ * @example SSR-safe usage (Next.js)
+ * ```tsx
+ * const { editor, editorRef } = useEditor({
+ *   extensions,
+ *   content,
+ *   immediatelyRender: false,
+ * });
+ * ```
+ *
+ * @example With deps for forced recreation
+ * ```tsx
+ * const { editor, editorRef } = useEditor({ extensions, content }, [locale]);
+ * // Editor is recreated when locale changes
+ * ```
+ */
+export declare function useEditor(options?: UseEditorOptions, deps?: DependencyList): {
+    editor: Editor | null;
+    editorRef: import("react").RefObject<HTMLDivElement | null>;
+};
+//# sourceMappingURL=useEditor.d.ts.map

package/dist/useEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditor.d.ts","sourceRoot":"","sources":["../src/useEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAA+B,MAAM,OAAO,CAAC;AACzE,OAAO,EACL,MAAM,EAMP,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAA0C,MAAM,iBAAiB,CAAC;AAEpH,eAAO,MAAM,kBAAkB,EAAE,YAAY,EAAqD,CAAC;AAEnG,MAAM,WAAW,gBAAgB;IAC/B,8CAA8C;IAC9C,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/C,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACxD,0CAA0C;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;IACjE,0CAA0C;IAC1C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB,EAAE,IAAI,CAAC,EAAE,cAAc;;;EA0J9E"}

package/dist/useEditorState.d.ts

@@ -0,0 +1,27 @@
+import type { Editor, JSONContent } from '@domternal/core';
+/**
+ * Full editor state returned when no selector is provided.
+ */
+export interface EditorState {
+    htmlContent: string;
+    jsonContent: JSONContent | null;
+    isEmpty: boolean;
+    isFocused: boolean;
+    isEditable: boolean;
+}
+/**
+ * Subscribe to editor state changes.
+ *
+ * **Overload 1 - Full state:**
+ * ```tsx
+ * const { htmlContent, isEmpty } = useEditorState(editor);
+ * ```
+ *
+ * **Overload 2 - Selector (granular, avoids unnecessary re-renders):**
+ * ```tsx
+ * const isBold = useEditorState(editor, (ed) => ed.isActive('bold'));
+ * ```
+ */
+export declare function useEditorState(editor: Editor | null): EditorState;
+export declare function useEditorState<T>(editor: Editor | null, selector: (editor: Editor) => T): T | undefined;
+//# sourceMappingURL=useEditorState.d.ts.map

package/dist/useEditorState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditorState.d.ts","sourceRoot":"","sources":["../src/useEditorState.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE3D;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,WAAW,CAAC;AACnE,wBAAgB,cAAc,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC"}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@domternal/react",
+  "version": "0.4.0",
+  "description": "React components for Domternal editor",
+  "author": "https://github.com/ThomasNowHere",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "@domternal/source": "./src/index.ts",
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@domternal/core": ">=0.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tsup": "^8.5.1",
+    "typescript": "~5.9.3",
+    "@domternal/core": "0.4.0"
+  },
+  "keywords": [
+    "react",
+    "prosemirror",
+    "editor",
+    "rich-text",
+    "domternal"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/domternal/domternal.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/domternal/domternal/issues"
+  },
+  "homepage": "https://domternal.dev",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}