@domternal/react 0.9.0 → 0.10.0

package/README.md

@@ -21,14 +21,14 @@ See <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> for a ful
 - **Vue components** - composable `Domternal` component, `useEditor`/`useEditorState` composables, toolbar, bubble menu, floating menu, emoji picker, notion color picker, custom node views (Vue 3.3+)
 - **Vanilla wrapper** - framework-free class-based API for Astro, Svelte, Solid, plain HTML, and Web Components - editor, toolbar, bubble menu, floating menu, emoji picker, notion color picker
 - **Notion-style block UX** - drag-to-reorder, block context menu, slash command, smart paste, keyboard reorder, floating Table of Contents
-- **65+ extensions across 15 packages** - nodes, marks, and behavior extensions
-- **120+ chainable commands** - `editor.chain().focus().toggleBold().run()`
+- **70+ extensions across 16 packages** - nodes, marks, and behavior extensions
+- **125+ chainable commands** - `editor.chain().focus().toggleBold().run()`
 - **Full table support** - cell merging, column resize, row/column controls, cell toolbar, all free and MIT licensed
 - **Tree-shakeable** - import only what you use, your bundler strips the rest
 - **~44 KB gzipped** (own code), <u>[see Packages](https://domternal.dev/v1/packages)</u> for full bundle breakdown with ProseMirror
 - **TypeScript first** - 100% typed, zero `any`
 - **15,000+ tests** - 4,000+ unit and 11,000+ E2E across 230+ Playwright specs and 4 demo apps
-- **Light and dark theme** - 70+ CSS custom properties for full visual control
+- **Light and dark theme** - 120+ CSS custom properties for full visual control
 - **Inline styles export** - `getHTML({ styled: true })` produces inline CSS ready for email clients, CMS, and Google Docs
 - **SSR helpers** - `generateHTML`, `generateJSON`, `generateText` for server-side rendering
 

package/dist/Domternal.d.ts

@@ -0,0 +1,87 @@
+import { type DependencyList, type ReactNode } from 'react';
+import { type UseEditorOptions } from './useEditor.js';
+import { type DomternalToolbarProps } from './toolbar/DomternalToolbar.js';
+import { type DomternalBubbleMenuProps } from './bubble-menu/DomternalBubbleMenu.js';
+import { type DomternalFloatingMenuProps } from './DomternalFloatingMenu.js';
+import { type DomternalEmojiPickerProps } from './emoji-picker/DomternalEmojiPicker.js';
+export interface DomternalProps extends UseEditorOptions {
+    /** Optional dependency array for forced editor recreation. */
+    deps?: DependencyList;
+    children: ReactNode;
+}
+/**
+ * Composable root component that creates an editor and provides it to all
+ * subcomponents via context. No need to pass `editor` prop to children.
+ *
+ * @example
+ * ```tsx
+ * <Domternal extensions={[Bold, Italic]} content="<p>Hello</p>">
+ *   <Domternal.Toolbar />
+ *   <Domternal.Content />
+ *   <Domternal.BubbleMenu contexts={{ text: ['bold', 'italic'] }} />
+ *   <Domternal.EmojiPicker emojis={emojis} />
+ * </Domternal>
+ * ```
+ *
+ * @example Loading state (shown during SSR and until the editor exists)
+ * ```tsx
+ * <Domternal extensions={extensions}>
+ *   <Domternal.Loading>Loading editor...</Domternal.Loading>
+ *   <Domternal.Toolbar />
+ *   <Domternal.Content />
+ * </Domternal>
+ * ```
+ *
+ * @example Editor on the very first render (client-only apps)
+ * ```tsx
+ * <Domternal extensions={extensions} immediatelyRender>
+ *   <Domternal.Toolbar />
+ *   <Domternal.Content />
+ * </Domternal>
+ * ```
+ */
+export declare function Domternal({ children, deps, ...options }: DomternalProps): ReactNode;
+export declare namespace Domternal {
+    var Content: typeof DomternalContent;
+    var Loading: typeof DomternalLoading;
+    var Toolbar: typeof DomternalToolbarSub;
+    var BubbleMenu: typeof DomternalBubbleMenuSub;
+    var FloatingMenu: typeof DomternalFloatingMenuSub;
+    var EmojiPicker: typeof DomternalEmojiPickerSub;
+}
+/** Renders the editor content area. Mounts the editor view DOM from context. */
+declare function DomternalContent({ className }: {
+    className?: string;
+}): ReactNode;
+declare namespace DomternalContent {
+    var displayName: string;
+}
+/** Renders children only while editor is not yet ready (SSR loading state). */
+declare function DomternalLoading({ children }: {
+    children: ReactNode;
+}): ReactNode;
+declare namespace DomternalLoading {
+    var displayName: string;
+}
+/** Toolbar subcomponent. Uses editor from context automatically. */
+declare function DomternalToolbarSub(props: Omit<DomternalToolbarProps, 'editor'>): ReactNode;
+declare namespace DomternalToolbarSub {
+    var displayName: string;
+}
+/** BubbleMenu subcomponent. Uses editor from context automatically. */
+declare function DomternalBubbleMenuSub(props: Omit<DomternalBubbleMenuProps, 'editor'>): ReactNode;
+declare namespace DomternalBubbleMenuSub {
+    var displayName: string;
+}
+/** FloatingMenu subcomponent. Uses editor from context automatically. */
+declare function DomternalFloatingMenuSub(props: Omit<DomternalFloatingMenuProps, 'editor'>): ReactNode;
+declare namespace DomternalFloatingMenuSub {
+    var displayName: string;
+}
+/** EmojiPicker subcomponent. Uses editor from context automatically. */
+declare function DomternalEmojiPickerSub(props: Omit<DomternalEmojiPickerProps, 'editor'>): ReactNode;
+declare namespace DomternalEmojiPickerSub {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=Domternal.d.ts.map

package/dist/Domternal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Domternal.d.ts","sourceRoot":"","sources":["../src/Domternal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAa,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElE,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC7F,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAC1G,OAAO,EAAyB,KAAK,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AACpG,OAAO,EAAwB,KAAK,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AAI9G,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACtD,8DAA8D;IAC9D,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,EAAE,cAAc,GAAG,SAAS,CAQnF;yBARe,SAAS;;;;;;;;AAYzB,gFAAgF;AAChF,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAqB1E;kBArBQ,gBAAgB;;;AAuBzB,+EAA+E;AAC/E,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,SAAS,CAI1E;kBAJQ,gBAAgB;;;AAMzB,oEAAoE;AACpE,iBAAS,mBAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,GAAG,SAAS,CAEpF;kBAFQ,mBAAmB;;;AAI5B,uEAAuE;AACvE,iBAAS,sBAAsB,CAAC,KAAK,EAAE,IAAI,CAAC,wBAAwB,EAAE,QAAQ,CAAC,GAAG,SAAS,CAE1F;kBAFQ,sBAAsB;;;AAI/B,yEAAyE;AACzE,iBAAS,wBAAwB,CAAC,KAAK,EAAE,IAAI,CAAC,0BAA0B,EAAE,QAAQ,CAAC,GAAG,SAAS,CAE9F;kBAFQ,wBAAwB;;;AAIjC,wEAAwE;AACxE,iBAAS,uBAAuB,CAAC,KAAK,EAAE,IAAI,CAAC,yBAAyB,EAAE,QAAQ,CAAC,GAAG,SAAS,CAE5F;kBAFQ,uBAAuB"}

package/dist/DomternalEditor.d.ts

@@ -0,0 +1,48 @@
+import type { Content, JSONContent, Editor } from '@domternal/core';
+import { type UseEditorOptions } from './useEditor.js';
+export interface DomternalEditorProps extends Omit<UseEditorOptions, 'outputFormat'> {
+    /** Additional CSS class for the .dm-editor wrapper. */
+    className?: string;
+    /** Output format for onChange. @default 'html' */
+    outputFormat?: 'html' | 'json';
+    /** Controlled value. When provided, editor content syncs to this value. */
+    value?: Content;
+    /** Called when content changes (controlled mode). */
+    onChange?: (value: string | JSONContent) => void;
+    /** Additional content rendered inside the dm-editor wrapper. */
+    children?: React.ReactNode;
+}
+export interface DomternalEditorRef {
+    editor: Editor | null;
+    htmlContent: string;
+    jsonContent: JSONContent | null;
+    isEmpty: boolean;
+    isFocused: boolean;
+    isEditable: boolean;
+}
+/**
+ * All-in-one editor component with integrated state management and context.
+ *
+ * Wraps children with EditorProvider automatically, so toolbar, bubble menu,
+ * and emoji picker components can access the editor via context.
+ *
+ * @example
+ * ```tsx
+ * const editorRef = useRef<DomternalEditorRef>(null);
+ *
+ * <DomternalEditor
+ *   ref={editorRef}
+ *   extensions={[Bold, Italic, Heading]}
+ *   content="<p>Hello</p>"
+ *   onUpdate={({ editor }) => console.log(editor.getHTML())}
+ * />
+ * ```
+ *
+ * @example Controlled mode
+ * ```tsx
+ * const [html, setHtml] = useState('<p>Hello</p>');
+ * <DomternalEditor value={html} onChange={setHtml} outputFormat="html" />
+ * ```
+ */
+export declare const DomternalEditor: import("react").ForwardRefExoticComponent<DomternalEditorProps & import("react").RefAttributes<DomternalEditorRef>>;
+//# sourceMappingURL=DomternalEditor.d.ts.map

package/dist/DomternalEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DomternalEditor.d.ts","sourceRoot":"","sources":["../src/DomternalEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAa,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIlE,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,cAAc,CAAC;IAClF,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,2EAA2E;IAC3E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,KAAK,IAAI,CAAC;IACjD,gEAAgE;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,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;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,eAAe,qHA4E3B,CAAC"}

package/dist/DomternalFloatingMenu.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+import type { Editor, FloatingMenuItemsOverride, FloatingMenuKeymap, FloatingMenuOptions, IconSet } from '@domternal/core';
+export interface DomternalFloatingMenuProps {
+    /** The editor instance. If omitted, uses EditorProvider context. */
+    editor?: Editor;
+    /** Custom visibility predicate. */
+    shouldShow?: FloatingMenuOptions['shouldShow'];
+    /** Pixel offset from trigger anchor. @default 0 */
+    offset?: number;
+    /** Items override (array replaces defaults; function transforms them). */
+    items?: FloatingMenuItemsOverride;
+    /** Keyboard shortcuts for entering the menu via keyboard. */
+    keymap?: FloatingMenuKeymap;
+    /** Custom icon set (falls back to `@domternal/core`'s `defaultIcons`). */
+    icons?: IconSet;
+    /**
+     * When true, the menu does NOT auto-show on every empty paragraph;
+     * it only opens when the BlockHandle `+` button (or any caller of
+     * `showFloatingMenu`) explicitly triggers it. Notion-style behaviour.
+     * @default false
+     */
+    requireExplicitTrigger?: boolean;
+    /**
+     * Optional custom content. When provided, the default grouped-item
+     * rendering is skipped and children are rendered inside the menu element.
+     */
+    children?: ReactNode;
+}
+/**
+ * Block-insert floating menu. Renders defaults collected from the editor's
+ * extensions via `addFloatingMenuItems()`; pass `items` to override or
+ * `children` to render a fully custom UI.
+ */
+export declare function DomternalFloatingMenu({ editor: editorProp, shouldShow, offset, items, keymap, icons, requireExplicitTrigger, children, }: DomternalFloatingMenuProps): ReactNode;
+//# sourceMappingURL=DomternalFloatingMenu.d.ts.map

package/dist/DomternalFloatingMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DomternalFloatingMenu.d.ts","sourceRoot":"","sources":["../src/DomternalFloatingMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EACV,MAAM,EAEN,yBAAyB,EACzB,kBAAkB,EAClB,mBAAmB,EACnB,OAAO,EACR,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,0BAA0B;IACzC,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,UAAU,CAAC,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAC/C,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,6DAA6D;IAC7D,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EAAE,UAAU,EAClB,UAAU,EACV,MAAU,EACV,KAAK,EACL,MAAM,EACN,KAAK,EACL,sBAA8B,EAC9B,QAAQ,GACT,EAAE,0BAA0B,GAAG,SAAS,CAiMxC"}

package/dist/EditorContent.d.ts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes, type Ref, type ReactNode } from 'react';
+import type { Editor } from '@domternal/core';
+export interface EditorContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** The editor instance to render. */
+    editor: Editor | null;
+    /** Ref to the underlying div element. */
+    innerRef?: Ref<HTMLDivElement>;
+}
+/**
+ * Renders the ProseMirror editor view into a div element.
+ *
+ * Use this with `useEditor` for a flexible, decoupled pattern where the
+ * editor hook and rendering are separated:
+ *
+ * @example
+ * ```tsx
+ * const { editor } = useEditor({ extensions, content });
+ * return <EditorContent editor={editor} className="my-editor" />;
+ * ```
+ */
+export declare function EditorContent({ editor, innerRef, ...htmlProps }: EditorContentProps): ReactNode;
+//# sourceMappingURL=EditorContent.d.ts.map

package/dist/EditorContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorContent.d.ts","sourceRoot":"","sources":["../src/EditorContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACzF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAE9C,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,qCAAqC;IACrC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAChC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,kBAAkB,GAAG,SAAS,CA6B/F"}

package/dist/EditorContext.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from 'react';
+import type { Editor } from '@domternal/core';
+interface EditorContextValue {
+    editor: Editor | null;
+}
+export interface EditorProviderProps {
+    /** The editor instance to provide to descendants. */
+    editor: Editor | null;
+    children: ReactNode;
+}
+/**
+ * Provides an editor instance to all descendant components via React Context.
+ *
+ * Components like DomternalToolbar, DomternalBubbleMenu, DomternalFloatingMenu,
+ * and DomternalEmojiPicker will automatically use this editor when no explicit
+ * `editor` prop is passed.
+ *
+ * @example
+ * ```tsx
+ * const { editor } = useEditor({ extensions, content });
+ *
+ * <EditorProvider editor={editor}>
+ *   <DomternalToolbar />
+ *   <EditorContent editor={editor} />
+ *   <DomternalBubbleMenu contexts={{ text: ['bold', 'italic'] }} />
+ * </EditorProvider>
+ * ```
+ */
+export declare function EditorProvider({ editor, children }: EditorProviderProps): ReactNode;
+/**
+ * Access the editor instance from the nearest EditorProvider.
+ * Returns `{ editor: null }` when used outside a provider, no throw.
+ */
+export declare function useCurrentEditor(): EditorContextValue;
+export {};
+//# sourceMappingURL=EditorContext.d.ts.map

package/dist/EditorContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorContext.d.ts","sourceRoot":"","sources":["../src/EditorContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAE9C,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAID,MAAM,WAAW,mBAAmB;IAClC,qDAAqD;IACrD,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,mBAAmB,GAAG,SAAS,CAGnF;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,kBAAkB,CAErD"}

package/dist/bubble-menu/DomternalBubbleMenu.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+import type { Editor, BubbleMenuOptions, IconSet } from '@domternal/core';
+export interface DomternalBubbleMenuProps {
+    /** The editor instance. If omitted, uses EditorProvider context. */
+    editor?: Editor;
+    /** Custom visibility function. */
+    shouldShow?: BubbleMenuOptions['shouldShow'];
+    /** Position relative to selection. @default 'top' */
+    placement?: 'top' | 'bottom';
+    /** Pixel offset from selection. @default 8 */
+    offset?: number;
+    /** Debounce delay in ms. @default 0 */
+    updateDelay?: number;
+    /** Fixed item names, e.g. ['bold', 'italic', 'code']. */
+    items?: string[];
+    /** Context-aware: map context names to item arrays, true for all, or null to disable. */
+    contexts?: Record<string, string[] | true | null>;
+    /** Custom icon overrides. Falls back to default Phosphor icons for unmapped keys. */
+    icons?: IconSet;
+    /** Additional content rendered after buttons. */
+    children?: React.ReactNode;
+}
+export declare function DomternalBubbleMenu({ editor: editorProp, shouldShow, placement, offset, updateDelay, items, contexts, icons, children, }: DomternalBubbleMenuProps): ReactNode;
+//# sourceMappingURL=DomternalBubbleMenu.d.ts.map

package/dist/bubble-menu/DomternalBubbleMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DomternalBubbleMenu.d.ts","sourceRoot":"","sources":["../../src/bubble-menu/DomternalBubbleMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,MAAM,EAAE,iBAAiB,EAAE,OAAO,EAAkC,MAAM,iBAAiB,CAAC;AAK1G,MAAM,WAAW,wBAAwB;IACvC,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAC7C,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;IAClD,qFAAqF;IACrF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EAAE,UAAU,EAClB,UAAU,EACV,SAAS,EACT,MAAM,EACN,WAAW,EACX,KAAK,EACL,QAAQ,EACR,KAAK,EACL,QAAQ,GACT,EAAE,wBAAwB,GAAG,SAAS,CA2ItC"}

package/dist/bubble-menu/useBubbleMenu.d.ts

@@ -0,0 +1,57 @@
+import { type MouseEvent as ReactMouseEvent, type RefObject } from 'react';
+import type { Editor, IconSet, ToolbarButton, ToolbarDropdown, BubbleMenuOptions } from '@domternal/core';
+interface BubbleMenuSeparator {
+    type: 'separator';
+    name: string;
+}
+export type BubbleMenuItem = ToolbarButton | ToolbarDropdown | BubbleMenuSeparator;
+/**
+ * Live state for the bubble-menu trailing buttons. Mirrors Angular's
+ * `syncTrailingButtonsState` output. Computed per editor transaction and
+ * coalesced into a single object so each transaction triggers at most one
+ * re-render.
+ */
+export interface BubbleMenuTrailingState {
+    /** True when current selection is a NodeSelection (image, HR, ...). Trailing buttons hide in that case. */
+    isNodeSelection: boolean;
+    /** True when the `notionColorPicker` extension is loaded on this editor (cached once per editor). */
+    showColorPickerButton: boolean;
+    /** True when the `blockContextMenu` extension is loaded on this editor (cached once per editor). */
+    showBlockMenuButton: boolean;
+    /** True when the selection spans more than one top-level block (multi-block "..." disable). */
+    blockMenuButtonDisabled: boolean;
+    /** CSS color value for the "A" trigger glyph (e.g. `var(--dm-block-text-yellow)`), or null. */
+    currentTextColorVar: string | null;
+    /** CSS color value for the "A" trigger underline, or null. */
+    currentBgColorVar: string | null;
+    /** True when any token-based text or background color is applied at the cursor. */
+    hasAnyColor: boolean;
+}
+export interface UseBubbleMenuOptions {
+    editor: Editor | null;
+    shouldShow?: BubbleMenuOptions['shouldShow'] | undefined;
+    placement?: 'top' | 'bottom' | undefined;
+    offset?: number | undefined;
+    updateDelay?: number | undefined;
+    items?: string[] | undefined;
+    contexts?: Record<string, string[] | true | null> | undefined;
+    icons?: IconSet | undefined;
+}
+export interface UseBubbleMenuResult {
+    menuRef: RefObject<HTMLDivElement | null>;
+    resolvedItems: BubbleMenuItem[];
+    isItemActive: (item: ToolbarButton) => boolean;
+    isItemDisabled: (item: ToolbarButton) => boolean;
+    executeCommand: (item: ToolbarButton, event?: ReactMouseEvent | MouseEvent) => void;
+    activeVersion: number;
+    getCachedIcon: (name: string) => string;
+    /** Live trailing-button state (color preview, node-selection gate, multi-block disable). */
+    trailing: BubbleMenuTrailingState;
+    /** Open the Notion color picker by emitting `notionColorOpen` with the trigger as anchor. */
+    openColorPicker: (anchor: HTMLElement) => void;
+    /** Open the block context menu by dispatching `dm:block-context-menu-open` on `.dm-editor`. */
+    openBlockContextMenu: (anchor: HTMLElement) => void;
+}
+export declare function useBubbleMenu(options: UseBubbleMenuOptions): UseBubbleMenuResult;
+export {};
+//# sourceMappingURL=useBubbleMenu.d.ts.map

package/dist/bubble-menu/useBubbleMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBubbleMenu.d.ts","sourceRoot":"","sources":["../../src/bubble-menu/useBubbleMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,UAAU,IAAI,eAAe,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQxG,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAsB1G,UAAU,mBAAmB;IAAG,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE;AACjE,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,mBAAmB,CAAC;AAEnF;;;;;GAKG;AACH,MAAM,WAAW,uBAAuB;IACtC,2GAA2G;IAC3G,eAAe,EAAE,OAAO,CAAC;IACzB,qGAAqG;IACrG,qBAAqB,EAAE,OAAO,CAAC;IAC/B,oGAAoG;IACpG,mBAAmB,EAAE,OAAO,CAAC;IAC7B,+FAA+F;IAC/F,uBAAuB,EAAE,OAAO,CAAC;IACjC,+FAA+F;IAC/F,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,8DAA8D;IAC9D,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,mFAAmF;IACnF,WAAW,EAAE,OAAO,CAAC;CACtB;AA8BD,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC;IACzD,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9D,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7B;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC1C,aAAa,EAAE,cAAc,EAAE,CAAC;IAChC,YAAY,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,OAAO,CAAC;IAC/C,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,OAAO,CAAC;IACjD,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,CAAC,EAAE,eAAe,GAAG,UAAU,KAAK,IAAI,CAAC;IACpF,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,4FAA4F;IAC5F,QAAQ,EAAE,uBAAuB,CAAC;IAClC,6FAA6F;IAC7F,eAAe,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,+FAA+F;IAC/F,oBAAoB,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACrD;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,mBAAmB,CAgahF"}

package/dist/emoji-picker/DomternalEmojiPicker.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+import type { Editor } from '@domternal/core';
+import { type EmojiPickerItem } from './useEmojiPicker.js';
+export interface DomternalEmojiPickerProps {
+    /** The editor instance. If omitted, uses EditorProvider context. */
+    editor?: Editor;
+    /** Array of emoji items with emoji, name, and group. */
+    emojis: EmojiPickerItem[];
+}
+export declare function DomternalEmojiPicker({ editor: editorProp, emojis }: DomternalEmojiPickerProps): ReactNode;
+//# sourceMappingURL=DomternalEmojiPicker.d.ts.map

package/dist/emoji-picker/DomternalEmojiPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DomternalEmojiPicker.d.ts","sourceRoot":"","sources":["../../src/emoji-picker/DomternalEmojiPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAsB3E,MAAM,WAAW,yBAAyB;IACxC,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,MAAM,EAAE,eAAe,EAAE,CAAC;CAC3B;AAED,wBAAgB,oBAAoB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,yBAAyB,GAAG,SAAS,CAuJzG"}

package/dist/emoji-picker/useEmojiPicker.d.ts

@@ -0,0 +1,24 @@
+import { type RefObject } from 'react';
+import type { Editor } from '@domternal/core';
+export interface EmojiPickerItem {
+    emoji: string;
+    name: string;
+    group: string;
+}
+export interface UseEmojiPickerResult {
+    isOpen: boolean;
+    searchQuery: string;
+    activeCategory: string;
+    categories: Map<string, EmojiPickerItem[]>;
+    categoryNames: string[];
+    filteredEmojis: EmojiPickerItem[];
+    frequentlyUsed: EmojiPickerItem[];
+    pickerRef: RefObject<HTMLDivElement | null>;
+    selectEmoji: (item: EmojiPickerItem) => void;
+    onSearch: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    scrollToCategory: (cat: string) => void;
+    onGridScroll: () => void;
+    close: () => void;
+}
+export declare function useEmojiPicker(editor: Editor | null, emojis: EmojiPickerItem[]): UseEmojiPickerResult;
+//# sourceMappingURL=useEmojiPicker.d.ts.map

package/dist/emoji-picker/useEmojiPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEmojiPicker.d.ts","sourceRoot":"","sources":["../../src/emoji-picker/useEmojiPicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1F,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAE9C,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,eAAe,EAAE,CAAC,CAAC;IAC3C,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,cAAc,EAAE,eAAe,EAAE,CAAC;IAClC,cAAc,EAAE,eAAe,EAAE,CAAC;IAClC,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C,WAAW,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7C,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,oBAAoB,CAyNrG"}

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAC/D,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACtE,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAG9D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGrD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC3E,YAAY,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AACrF,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,YAAY,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAC9E,YAAY,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AACxF,YAAY,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAClG,YAAY,EACV,+BAA+B,EAC/B,2BAA2B,EAC3B,0BAA0B,GAC3B,MAAM,gCAAgC,CAAC;AAGxC,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,YAAY,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,MAAM,uCAAuC,CAAC;AAC9G,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,YAAY,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,YAAY,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAGxE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGzF,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC3E,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createContext, forwardRef, useImperativeHandle, useRef, useEffect, useState, useMemo, useCallback, useSyncExternalStore, useContext, Fragment, useLayoutEffect, createElement } from 'react';
-import { Editor, Document, Paragraph, Text, BaseKeymap, History, positionFloatingOnce, PluginKey, createFloatingMenuPlugin, FloatingMenuController, defaultIcons, positionFloating, ToolbarController, defaultBubbleContexts, createBubbleMenuPlugin } from '@domternal/core';
+import { Editor, Document, Paragraph, Text, BaseKeymap, History, refocusEditorAfterCommand, positionFloatingOnce, PluginKey, createFloatingMenuPlugin, FloatingMenuController, defaultIcons, positionFloating, ToolbarController, defaultBubbleContexts, createBubbleMenuPlugin } from '@domternal/core';
 export { Editor, generateHTML, generateJSON, generateText } from '@domternal/core';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -800,9 +800,7 @@ function DomternalToolbar({ editor: editorProp, icons, layout }) {
       return;
     }
     controllerRef.current?.executeCommand(item);
-    requestAnimationFrame(() => {
-      editor.view.focus();
-    });
+    refocusEditorAfterCommand(editor.view);
   }, [editor, closeDropdown, controllerRef]);
   const onDropdownItemClick = useCallback((item, event) => {
     if (!editor) return;
@@ -817,9 +815,7 @@ function DomternalToolbar({ editor: editorProp, icons, layout }) {
     } else {
       controllerRef.current?.executeCommand(item);
     }
-    requestAnimationFrame(() => {
-      editor.view.focus();
-    });
+    refocusEditorAfterCommand(editor.view);
   }, [editor, closeDropdown, controllerRef]);
   const onButtonFocus = useCallback((name) => {
     const index = controllerRef.current?.getFlatIndex(name) ?? -1;
@@ -1316,9 +1312,7 @@ function DomternalBubbleMenu({
             executeSubItem: (sub) => {
               closeDropdown();
               executeCommand(sub);
-              requestAnimationFrame(() => {
-                editor?.view.focus();
-              });
+              if (editor) refocusEditorAfterCommand(editor.view);
             }
           },
           item.name
@@ -1589,9 +1583,7 @@ function DomternalFloatingMenu({
   const onItemClick = useCallback((item) => {
     if (!editor || !controllerRef.current) return;
     controllerRef.current.execute(item);
-    requestAnimationFrame(() => {
-      editor.view.focus();
-    });
+    refocusEditorAfterCommand(editor.view);
   }, [editor]);
   const onMenuKeyDown = useCallback((e) => {
     const ctl = controllerRef.current;