@domternal/react 0.6.1 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -10
- package/dist/Domternal.d.ts +7 -7
- package/dist/Domternal.d.ts.map +1 -1
- package/dist/DomternalFloatingMenu.d.ts +29 -6
- package/dist/DomternalFloatingMenu.d.ts.map +1 -1
- package/dist/EditorContent.d.ts +2 -2
- package/dist/EditorContent.d.ts.map +1 -1
- package/dist/EditorContext.d.ts +2 -4
- package/dist/EditorContext.d.ts.map +1 -1
- package/dist/bubble-menu/DomternalBubbleMenu.d.ts +2 -1
- package/dist/bubble-menu/DomternalBubbleMenu.d.ts.map +1 -1
- package/dist/bubble-menu/useBubbleMenu.d.ts +36 -6
- package/dist/bubble-menu/useBubbleMenu.d.ts.map +1 -1
- package/dist/emoji-picker/DomternalEmojiPicker.d.ts +2 -1
- package/dist/emoji-picker/DomternalEmojiPicker.d.ts.map +1 -1
- package/dist/emoji-picker/useEmojiPicker.d.ts +5 -3
- package/dist/emoji-picker/useEmojiPicker.d.ts.map +1 -1
- package/dist/index.d.ts +121 -30
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +962 -77
- package/dist/index.js.map +1 -1
- package/dist/node-views/NodeViewContent.d.ts +2 -2
- package/dist/node-views/NodeViewContent.d.ts.map +1 -1
- package/dist/node-views/NodeViewWrapper.d.ts +2 -2
- package/dist/node-views/NodeViewWrapper.d.ts.map +1 -1
- package/dist/node-views/ReactNodeViewRenderer.d.ts +1 -1
- package/dist/node-views/ReactNodeViewRenderer.d.ts.map +1 -1
- package/dist/notion-color-picker/DomternalNotionColorPicker.d.ts +25 -0
- package/dist/notion-color-picker/DomternalNotionColorPicker.d.ts.map +1 -0
- package/dist/notion-color-picker/index.d.ts +5 -0
- package/dist/notion-color-picker/index.d.ts.map +1 -0
- package/dist/notion-color-picker/useNotionColorPicker.d.ts +47 -0
- package/dist/notion-color-picker/useNotionColorPicker.d.ts.map +1 -0
- package/dist/toolbar/DomternalToolbar.d.ts +2 -1
- package/dist/toolbar/DomternalToolbar.d.ts.map +1 -1
- package/dist/toolbar/ToolbarButton.d.ts +2 -1
- package/dist/toolbar/ToolbarButton.d.ts.map +1 -1
- package/dist/toolbar/ToolbarDropdown.d.ts +2 -1
- package/dist/toolbar/ToolbarDropdown.d.ts.map +1 -1
- package/dist/toolbar/ToolbarDropdownPanel.d.ts +2 -1
- package/dist/toolbar/ToolbarDropdownPanel.d.ts.map +1 -1
- package/dist/toolbar/useKeyboardNav.d.ts.map +1 -1
- package/dist/toolbar/useToolbarController.d.ts +6 -4
- package/dist/toolbar/useToolbarController.d.ts.map +1 -1
- package/dist/toolbar/useToolbarIcons.d.ts +4 -3
- package/dist/toolbar/useToolbarIcons.d.ts.map +1 -1
- package/dist/toolbar/useTooltip.d.ts.map +1 -1
- package/dist/useEditor.d.ts +4 -3
- package/dist/useEditor.d.ts.map +1 -1
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -3,29 +3,31 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/@domternal/react)
|
|
4
4
|
[](https://github.com/domternal/domternal/blob/main/LICENSE)
|
|
5
5
|
|
|
6
|
-
A lightweight, extensible rich text editor toolkit built on <u>[ProseMirror](https://prosemirror.net/)</u>. Framework-agnostic headless core with first-class Angular, React, and
|
|
6
|
+
A lightweight, extensible rich text editor toolkit built on <u>[ProseMirror](https://prosemirror.net/)</u>. Framework-agnostic headless core with first-class Angular, React, Vue, and Vanilla wrappers.
|
|
7
7
|
Use it headless with vanilla JS/TS, add the built-in toolbar and theme, or drop in ready-made framework components. Fully tree-shakeable, import only what you use, unused extensions are stripped from your bundle.
|
|
8
8
|
|
|
9
9
|
## Links
|
|
10
10
|
|
|
11
|
-
<u>[Website](https://domternal.dev)</u> • <u>[Documentation](https://domternal.dev/v1/introduction)</u>
|
|
12
|
-
<u>[StackBlitz (Angular)](https://stackblitz.com/edit/domternal-angular-full-example)</u> • <u>[StackBlitz (React)](https://stackblitz.com/edit/domternal-react-full-example)</u> • <u>[StackBlitz (Vue)](https://stackblitz.com/edit/domternal-vue-full-example)</u> • <u>[StackBlitz (Vanilla TS)](https://stackblitz.com/edit/domternal-vanilla-full-example)</u>
|
|
11
|
+
<u>[Website](https://domternal.dev)</u> • <u>[Documentation](https://domternal.dev/v1/introduction)</u>
|
|
12
|
+
<u>[StackBlitz (Angular)](https://stackblitz.com/edit/domternal-angular-full-example)</u> • <u>[StackBlitz (React)](https://stackblitz.com/edit/domternal-react-full-example)</u> • <u>[StackBlitz (Vue)](https://stackblitz.com/edit/domternal-vue-full-example)</u> • <u>[StackBlitz (Vanilla TS)](https://stackblitz.com/edit/domternal-vanilla-full-example)</u>
|
|
13
13
|
|
|
14
14
|
## Features
|
|
15
15
|
|
|
16
16
|
See <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> for a full breakdown of all packages and what each one includes.
|
|
17
17
|
|
|
18
18
|
- **Headless core** - use with any framework or vanilla JS/TS
|
|
19
|
-
- **Angular components** - editor, toolbar, bubble menu, floating menu, emoji picker (signals, OnPush, zoneless-ready)
|
|
20
|
-
- **React components** - composable `Domternal` component, toolbar, bubble menu, floating menu, emoji picker, custom node views (React 18+)
|
|
21
|
-
- **Vue components** - composable `Domternal` component, `useEditor`/`useEditorState` composables, toolbar, bubble menu, floating menu, emoji picker, custom node views (Vue 3.3+)
|
|
22
|
-
- **
|
|
23
|
-
- **
|
|
19
|
+
- **Angular components** - editor, toolbar, bubble menu, floating menu, emoji picker, notion color picker (signals, OnPush, zoneless-ready)
|
|
20
|
+
- **React components** - composable `Domternal` component, toolbar, bubble menu, floating menu, emoji picker, notion color picker, custom node views (React 18+)
|
|
21
|
+
- **Vue components** - composable `Domternal` component, `useEditor`/`useEditorState` composables, toolbar, bubble menu, floating menu, emoji picker, notion color picker, custom node views (Vue 3.3+)
|
|
22
|
+
- **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
|
|
23
|
+
- **Notion-style block UX** - drag-to-reorder, block context menu, slash command, smart paste, keyboard reorder, floating Table of Contents
|
|
24
|
+
- **65+ extensions across 15 packages** - nodes, marks, and behavior extensions
|
|
25
|
+
- **120+ chainable commands** - `editor.chain().focus().toggleBold().run()`
|
|
24
26
|
- **Full table support** - cell merging, column resize, row/column controls, cell toolbar, all free and MIT licensed
|
|
25
27
|
- **Tree-shakeable** - import only what you use, your bundler strips the rest
|
|
26
|
-
- **~
|
|
28
|
+
- **~44 KB gzipped** (own code), <u>[see Packages](https://domternal.dev/v1/packages)</u> for full bundle breakdown with ProseMirror
|
|
27
29
|
- **TypeScript first** - 100% typed, zero `any`
|
|
28
|
-
- **
|
|
30
|
+
- **15,000+ tests** - 4,000+ unit and 11,000+ E2E across 230+ Playwright specs and 4 demo apps
|
|
29
31
|
- **Light and dark theme** - 70+ CSS custom properties for full visual control
|
|
30
32
|
- **Inline styles export** - `getHTML({ styled: true })` produces inline CSS ready for email clients, CMS, and Google Docs
|
|
31
33
|
- **SSR helpers** - `generateHTML`, `generateJSON`, `generateText` for server-side rendering
|
package/dist/Domternal.d.ts
CHANGED
|
@@ -32,7 +32,7 @@ export interface DomternalProps extends UseEditorOptions {
|
|
|
32
32
|
* </Domternal>
|
|
33
33
|
* ```
|
|
34
34
|
*/
|
|
35
|
-
export declare function Domternal({ children, deps, ...options }: DomternalProps):
|
|
35
|
+
export declare function Domternal({ children, deps, ...options }: DomternalProps): ReactNode;
|
|
36
36
|
export declare namespace Domternal {
|
|
37
37
|
var Content: typeof DomternalContent;
|
|
38
38
|
var Loading: typeof DomternalLoading;
|
|
@@ -44,34 +44,34 @@ export declare namespace Domternal {
|
|
|
44
44
|
/** Renders the editor content area. Mounts the editor view DOM from context. */
|
|
45
45
|
declare function DomternalContent({ className }: {
|
|
46
46
|
className?: string;
|
|
47
|
-
}):
|
|
47
|
+
}): ReactNode;
|
|
48
48
|
declare namespace DomternalContent {
|
|
49
49
|
var displayName: string;
|
|
50
50
|
}
|
|
51
51
|
/** Renders children only while editor is not yet ready (SSR loading state). */
|
|
52
52
|
declare function DomternalLoading({ children }: {
|
|
53
53
|
children: ReactNode;
|
|
54
|
-
}):
|
|
54
|
+
}): ReactNode;
|
|
55
55
|
declare namespace DomternalLoading {
|
|
56
56
|
var displayName: string;
|
|
57
57
|
}
|
|
58
58
|
/** Toolbar subcomponent. Uses editor from context automatically. */
|
|
59
|
-
declare function DomternalToolbarSub(props: Omit<DomternalToolbarProps, 'editor'>):
|
|
59
|
+
declare function DomternalToolbarSub(props: Omit<DomternalToolbarProps, 'editor'>): ReactNode;
|
|
60
60
|
declare namespace DomternalToolbarSub {
|
|
61
61
|
var displayName: string;
|
|
62
62
|
}
|
|
63
63
|
/** BubbleMenu subcomponent. Uses editor from context automatically. */
|
|
64
|
-
declare function DomternalBubbleMenuSub(props: Omit<DomternalBubbleMenuProps, 'editor'>):
|
|
64
|
+
declare function DomternalBubbleMenuSub(props: Omit<DomternalBubbleMenuProps, 'editor'>): ReactNode;
|
|
65
65
|
declare namespace DomternalBubbleMenuSub {
|
|
66
66
|
var displayName: string;
|
|
67
67
|
}
|
|
68
68
|
/** FloatingMenu subcomponent. Uses editor from context automatically. */
|
|
69
|
-
declare function DomternalFloatingMenuSub(props: Omit<DomternalFloatingMenuProps, 'editor'>):
|
|
69
|
+
declare function DomternalFloatingMenuSub(props: Omit<DomternalFloatingMenuProps, 'editor'>): ReactNode;
|
|
70
70
|
declare namespace DomternalFloatingMenuSub {
|
|
71
71
|
var displayName: string;
|
|
72
72
|
}
|
|
73
73
|
/** EmojiPicker subcomponent. Uses editor from context automatically. */
|
|
74
|
-
declare function DomternalEmojiPickerSub(props: Omit<DomternalEmojiPickerProps, 'editor'>):
|
|
74
|
+
declare function DomternalEmojiPickerSub(props: Omit<DomternalEmojiPickerProps, 'editor'>): ReactNode;
|
|
75
75
|
declare namespace DomternalEmojiPickerSub {
|
|
76
76
|
var displayName: string;
|
|
77
77
|
}
|
package/dist/Domternal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,EAAE,cAAc,
|
|
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;;;;;;;;;;;;;;;;;;;;;;GAsBG;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"}
|
|
@@ -1,13 +1,36 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import type { Editor, FloatingMenuItemsOverride, IconSet } from '@domternal/core';
|
|
3
|
+
import type { FloatingMenuKeymap, FloatingMenuOptions } from '@domternal/extension-block-menu';
|
|
2
4
|
export interface DomternalFloatingMenuProps {
|
|
3
5
|
/** The editor instance. If omitted, uses EditorProvider context. */
|
|
4
6
|
editor?: Editor;
|
|
5
|
-
/** Custom visibility
|
|
7
|
+
/** Custom visibility predicate. */
|
|
6
8
|
shouldShow?: FloatingMenuOptions['shouldShow'];
|
|
7
|
-
/** Pixel offset from trigger. @default 0 */
|
|
9
|
+
/** Pixel offset from trigger anchor. @default 0 */
|
|
8
10
|
offset?: number;
|
|
9
|
-
/**
|
|
10
|
-
|
|
11
|
+
/** Items override (array replaces defaults; function transforms them). */
|
|
12
|
+
items?: FloatingMenuItemsOverride;
|
|
13
|
+
/** Keyboard shortcuts for entering the menu via keyboard. */
|
|
14
|
+
keymap?: FloatingMenuKeymap;
|
|
15
|
+
/** Custom icon set (falls back to `@domternal/core`'s `defaultIcons`). */
|
|
16
|
+
icons?: IconSet;
|
|
17
|
+
/**
|
|
18
|
+
* When true, the menu does NOT auto-show on every empty paragraph;
|
|
19
|
+
* it only opens when the BlockHandle `+` button (or any caller of
|
|
20
|
+
* `showFloatingMenu`) explicitly triggers it. Notion-style behaviour.
|
|
21
|
+
* @default false
|
|
22
|
+
*/
|
|
23
|
+
requireExplicitTrigger?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Optional custom content. When provided, the default grouped-item
|
|
26
|
+
* rendering is skipped and children are rendered inside the menu element.
|
|
27
|
+
*/
|
|
28
|
+
children?: ReactNode;
|
|
11
29
|
}
|
|
12
|
-
|
|
30
|
+
/**
|
|
31
|
+
* Block-insert floating menu. Renders defaults collected from the editor's
|
|
32
|
+
* extensions via `addFloatingMenuItems()`; pass `items` to override or
|
|
33
|
+
* `children` to render a fully custom UI.
|
|
34
|
+
*/
|
|
35
|
+
export declare function DomternalFloatingMenu({ editor: editorProp, shouldShow, offset, items, keymap, icons, requireExplicitTrigger, children, }: DomternalFloatingMenuProps): ReactNode;
|
|
13
36
|
//# sourceMappingURL=DomternalFloatingMenu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DomternalFloatingMenu.d.ts","sourceRoot":"","sources":["../src/DomternalFloatingMenu.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DomternalFloatingMenu.d.ts","sourceRoot":"","sources":["../src/DomternalFloatingMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EACV,MAAM,EAEN,yBAAyB,EACzB,OAAO,EACR,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,iCAAiC,CAAC;AAGzC,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
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type HTMLAttributes, type Ref } from 'react';
|
|
1
|
+
import { type HTMLAttributes, type Ref, type ReactNode } from 'react';
|
|
2
2
|
import type { Editor } from '@domternal/core';
|
|
3
3
|
export interface EditorContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
4
|
/** The editor instance to render. */
|
|
@@ -18,5 +18,5 @@ export interface EditorContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
18
18
|
* return <EditorContent editor={editor} className="my-editor" />;
|
|
19
19
|
* ```
|
|
20
20
|
*/
|
|
21
|
-
export declare function EditorContent({ editor, innerRef, ...htmlProps }: EditorContentProps):
|
|
21
|
+
export declare function EditorContent({ editor, innerRef, ...htmlProps }: EditorContentProps): ReactNode;
|
|
22
22
|
//# sourceMappingURL=EditorContent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorContent.d.ts","sourceRoot":"","sources":["../src/EditorContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;
|
|
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
CHANGED
|
@@ -26,12 +26,10 @@ export interface EditorProviderProps {
|
|
|
26
26
|
* </EditorProvider>
|
|
27
27
|
* ```
|
|
28
28
|
*/
|
|
29
|
-
export declare function EditorProvider({ editor, children }: EditorProviderProps):
|
|
29
|
+
export declare function EditorProvider({ editor, children }: EditorProviderProps): ReactNode;
|
|
30
30
|
/**
|
|
31
31
|
* Access the editor instance from the nearest EditorProvider.
|
|
32
|
-
*
|
|
33
|
-
* @returns `{ editor }` where editor may be null if the provider has no editor yet.
|
|
34
|
-
* @throws If used outside of an EditorProvider (optional - returns null editor instead).
|
|
32
|
+
* Returns `{ editor: null }` when used outside a provider, no throw.
|
|
35
33
|
*/
|
|
36
34
|
export declare function useCurrentEditor(): EditorContextValue;
|
|
37
35
|
export {};
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
1
2
|
import type { Editor, BubbleMenuOptions } from '@domternal/core';
|
|
2
3
|
export interface DomternalBubbleMenuProps {
|
|
3
4
|
/** The editor instance. If omitted, uses EditorProvider context. */
|
|
@@ -17,5 +18,5 @@ export interface DomternalBubbleMenuProps {
|
|
|
17
18
|
/** Additional content rendered after buttons. */
|
|
18
19
|
children?: React.ReactNode;
|
|
19
20
|
}
|
|
20
|
-
export declare function DomternalBubbleMenu({ editor: editorProp, shouldShow, placement, offset, updateDelay, items, contexts, children, }: DomternalBubbleMenuProps):
|
|
21
|
+
export declare function DomternalBubbleMenu({ editor: editorProp, shouldShow, placement, offset, updateDelay, items, contexts, children, }: DomternalBubbleMenuProps): ReactNode;
|
|
21
22
|
//# sourceMappingURL=DomternalBubbleMenu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DomternalBubbleMenu.d.ts","sourceRoot":"","sources":["../../src/bubble-menu/DomternalBubbleMenu.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DomternalBubbleMenu.d.ts","sourceRoot":"","sources":["../../src/bubble-menu/DomternalBubbleMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,MAAM,EAAE,iBAAiB,EAAkC,MAAM,iBAAiB,CAAC;AAKjG,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,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,QAAQ,GACT,EAAE,wBAAwB,GAAG,SAAS,CAyItC"}
|
|
@@ -1,9 +1,32 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type MouseEvent as ReactMouseEvent, type RefObject } from 'react';
|
|
2
|
+
import type { Editor, ToolbarButton, ToolbarDropdown, BubbleMenuOptions } from '@domternal/core';
|
|
2
3
|
interface BubbleMenuSeparator {
|
|
3
4
|
type: 'separator';
|
|
4
5
|
name: string;
|
|
5
6
|
}
|
|
6
|
-
export type BubbleMenuItem = ToolbarButton | BubbleMenuSeparator;
|
|
7
|
+
export type BubbleMenuItem = ToolbarButton | ToolbarDropdown | BubbleMenuSeparator;
|
|
8
|
+
/**
|
|
9
|
+
* Live state for the bubble-menu trailing buttons. Mirrors Angular's
|
|
10
|
+
* `syncTrailingButtonsState` output. Computed per editor transaction and
|
|
11
|
+
* coalesced into a single object so each transaction triggers at most one
|
|
12
|
+
* re-render.
|
|
13
|
+
*/
|
|
14
|
+
export interface BubbleMenuTrailingState {
|
|
15
|
+
/** True when current selection is a NodeSelection (image, HR, ...). Trailing buttons hide in that case. */
|
|
16
|
+
isNodeSelection: boolean;
|
|
17
|
+
/** True when the `notionColorPicker` extension is loaded on this editor (cached once per editor). */
|
|
18
|
+
showColorPickerButton: boolean;
|
|
19
|
+
/** True when the `blockContextMenu` extension is loaded on this editor (cached once per editor). */
|
|
20
|
+
showBlockMenuButton: boolean;
|
|
21
|
+
/** True when the selection spans more than one top-level block (multi-block "..." disable). */
|
|
22
|
+
blockMenuButtonDisabled: boolean;
|
|
23
|
+
/** CSS color value for the "A" trigger glyph (e.g. `var(--dm-block-text-yellow)`), or null. */
|
|
24
|
+
currentTextColorVar: string | null;
|
|
25
|
+
/** CSS color value for the "A" trigger underline, or null. */
|
|
26
|
+
currentBgColorVar: string | null;
|
|
27
|
+
/** True when any token-based text or background color is applied at the cursor. */
|
|
28
|
+
hasAnyColor: boolean;
|
|
29
|
+
}
|
|
7
30
|
export interface UseBubbleMenuOptions {
|
|
8
31
|
editor: Editor | null;
|
|
9
32
|
shouldShow?: BubbleMenuOptions['shouldShow'] | undefined;
|
|
@@ -13,14 +36,21 @@ export interface UseBubbleMenuOptions {
|
|
|
13
36
|
items?: string[] | undefined;
|
|
14
37
|
contexts?: Record<string, string[] | true | null> | undefined;
|
|
15
38
|
}
|
|
16
|
-
export
|
|
17
|
-
menuRef:
|
|
39
|
+
export interface UseBubbleMenuResult {
|
|
40
|
+
menuRef: RefObject<HTMLDivElement | null>;
|
|
18
41
|
resolvedItems: BubbleMenuItem[];
|
|
19
42
|
isItemActive: (item: ToolbarButton) => boolean;
|
|
20
43
|
isItemDisabled: (item: ToolbarButton) => boolean;
|
|
21
|
-
executeCommand: (item: ToolbarButton) => void;
|
|
44
|
+
executeCommand: (item: ToolbarButton, event?: ReactMouseEvent | MouseEvent) => void;
|
|
22
45
|
activeVersion: number;
|
|
23
46
|
getCachedIcon: (name: string) => string;
|
|
24
|
-
|
|
47
|
+
/** Live trailing-button state (color preview, node-selection gate, multi-block disable). */
|
|
48
|
+
trailing: BubbleMenuTrailingState;
|
|
49
|
+
/** Open the Notion color picker by emitting `notionColorOpen` with the trigger as anchor. */
|
|
50
|
+
openColorPicker: (anchor: HTMLElement) => void;
|
|
51
|
+
/** Open the block context menu by dispatching `dm:block-context-menu-open` on `.dm-editor`. */
|
|
52
|
+
openBlockContextMenu: (anchor: HTMLElement) => void;
|
|
53
|
+
}
|
|
54
|
+
export declare function useBubbleMenu(options: UseBubbleMenuOptions): UseBubbleMenuResult;
|
|
25
55
|
export {};
|
|
26
56
|
//# sourceMappingURL=useBubbleMenu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useBubbleMenu.d.ts","sourceRoot":"","sources":["../../src/bubble-menu/useBubbleMenu.ts"],"names":[],"mappings":"
|
|
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,aAAa,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAsBjG,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;CAC/D;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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
1
2
|
import type { Editor } from '@domternal/core';
|
|
2
3
|
import { type EmojiPickerItem } from './useEmojiPicker.js';
|
|
3
4
|
export interface DomternalEmojiPickerProps {
|
|
@@ -6,5 +7,5 @@ export interface DomternalEmojiPickerProps {
|
|
|
6
7
|
/** Array of emoji items with emoji, name, and group. */
|
|
7
8
|
emojis: EmojiPickerItem[];
|
|
8
9
|
}
|
|
9
|
-
export declare function DomternalEmojiPicker({ editor: editorProp, emojis }: DomternalEmojiPickerProps):
|
|
10
|
+
export declare function DomternalEmojiPicker({ editor: editorProp, emojis }: DomternalEmojiPickerProps): ReactNode;
|
|
10
11
|
//# sourceMappingURL=DomternalEmojiPicker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DomternalEmojiPicker.d.ts","sourceRoot":"","sources":["../../src/emoji-picker/DomternalEmojiPicker.tsx"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
+
import { type RefObject } from 'react';
|
|
1
2
|
import type { Editor } from '@domternal/core';
|
|
2
3
|
export interface EmojiPickerItem {
|
|
3
4
|
emoji: string;
|
|
4
5
|
name: string;
|
|
5
6
|
group: string;
|
|
6
7
|
}
|
|
7
|
-
export
|
|
8
|
+
export interface UseEmojiPickerResult {
|
|
8
9
|
isOpen: boolean;
|
|
9
10
|
searchQuery: string;
|
|
10
11
|
activeCategory: string;
|
|
@@ -12,11 +13,12 @@ export declare function useEmojiPicker(editor: Editor | null, emojis: EmojiPicke
|
|
|
12
13
|
categoryNames: string[];
|
|
13
14
|
filteredEmojis: EmojiPickerItem[];
|
|
14
15
|
frequentlyUsed: EmojiPickerItem[];
|
|
15
|
-
pickerRef:
|
|
16
|
+
pickerRef: RefObject<HTMLDivElement | null>;
|
|
16
17
|
selectEmoji: (item: EmojiPickerItem) => void;
|
|
17
18
|
onSearch: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
18
19
|
scrollToCategory: (cat: string) => void;
|
|
19
20
|
onGridScroll: () => void;
|
|
20
21
|
close: () => void;
|
|
21
|
-
}
|
|
22
|
+
}
|
|
23
|
+
export declare function useEmojiPicker(editor: Editor | null, emojis: EmojiPickerItem[]): UseEmojiPickerResult;
|
|
22
24
|
//# sourceMappingURL=useEmojiPicker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEmojiPicker.d.ts","sourceRoot":"","sources":["../../src/emoji-picker/useEmojiPicker.ts"],"names":[],"mappings":"
|
|
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
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { DependencyList, ReactNode, HTMLAttributes, Ref, ElementType, RefCallback } from 'react';
|
|
3
|
-
import { AnyExtension, Content, FocusPosition, Editor, JSONContent, IconSet, ToolbarLayoutEntry, BubbleMenuOptions,
|
|
2
|
+
import { DependencyList, ReactNode, HTMLAttributes, Ref, RefObject, KeyboardEvent, ElementType, RefCallback } from 'react';
|
|
3
|
+
import { AnyExtension, Content, FocusPosition, Editor, JSONContent, IconSet, ToolbarLayoutEntry, BubbleMenuOptions, FloatingMenuItemsOverride } from '@domternal/core';
|
|
4
4
|
export { AnyExtension, Content, Editor, FocusPosition, GenerateHTMLOptions, GenerateJSONOptions, GenerateTextOptions, JSONContent, generateHTML, generateJSON, generateText } from '@domternal/core';
|
|
5
|
-
import
|
|
5
|
+
import { FloatingMenuOptions, FloatingMenuKeymap } from '@domternal/extension-block-menu';
|
|
6
6
|
|
|
7
7
|
declare const DEFAULT_EXTENSIONS: AnyExtension[];
|
|
8
8
|
interface UseEditorOptions {
|
|
@@ -75,10 +75,11 @@ interface UseEditorOptions {
|
|
|
75
75
|
* // Editor is recreated when locale changes
|
|
76
76
|
* ```
|
|
77
77
|
*/
|
|
78
|
-
|
|
78
|
+
interface UseEditorResult {
|
|
79
79
|
editor: Editor | null;
|
|
80
|
-
editorRef:
|
|
81
|
-
}
|
|
80
|
+
editorRef: React.RefObject<HTMLDivElement | null>;
|
|
81
|
+
}
|
|
82
|
+
declare function useEditor(options?: UseEditorOptions, deps?: DependencyList): UseEditorResult;
|
|
82
83
|
|
|
83
84
|
/**
|
|
84
85
|
* Full editor state returned when no selector is provided.
|
|
@@ -132,12 +133,10 @@ interface EditorProviderProps {
|
|
|
132
133
|
* </EditorProvider>
|
|
133
134
|
* ```
|
|
134
135
|
*/
|
|
135
|
-
declare function EditorProvider({ editor, children }: EditorProviderProps):
|
|
136
|
+
declare function EditorProvider({ editor, children }: EditorProviderProps): ReactNode;
|
|
136
137
|
/**
|
|
137
138
|
* Access the editor instance from the nearest EditorProvider.
|
|
138
|
-
*
|
|
139
|
-
* @returns `{ editor }` where editor may be null if the provider has no editor yet.
|
|
140
|
-
* @throws If used outside of an EditorProvider (optional - returns null editor instead).
|
|
139
|
+
* Returns `{ editor: null }` when used outside a provider, no throw.
|
|
141
140
|
*/
|
|
142
141
|
declare function useCurrentEditor(): EditorContextValue;
|
|
143
142
|
|
|
@@ -149,7 +148,7 @@ interface DomternalToolbarProps {
|
|
|
149
148
|
/** Custom toolbar layout. */
|
|
150
149
|
layout?: ToolbarLayoutEntry[];
|
|
151
150
|
}
|
|
152
|
-
declare function DomternalToolbar({ editor: editorProp, icons, layout }: DomternalToolbarProps):
|
|
151
|
+
declare function DomternalToolbar({ editor: editorProp, icons, layout }: DomternalToolbarProps): ReactNode;
|
|
153
152
|
|
|
154
153
|
interface DomternalBubbleMenuProps {
|
|
155
154
|
/** The editor instance. If omitted, uses EditorProvider context. */
|
|
@@ -166,22 +165,45 @@ interface DomternalBubbleMenuProps {
|
|
|
166
165
|
items?: string[];
|
|
167
166
|
/** Context-aware: map context names to item arrays, true for all, or null to disable. */
|
|
168
167
|
contexts?: Record<string, string[] | true | null>;
|
|
168
|
+
/** Custom icon overrides. Falls back to default Phosphor icons for unmapped keys. */
|
|
169
|
+
icons?: IconSet;
|
|
169
170
|
/** Additional content rendered after buttons. */
|
|
170
171
|
children?: React.ReactNode;
|
|
171
172
|
}
|
|
172
|
-
declare function DomternalBubbleMenu({ editor: editorProp, shouldShow, placement, offset, updateDelay, items, contexts, children, }: DomternalBubbleMenuProps):
|
|
173
|
+
declare function DomternalBubbleMenu({ editor: editorProp, shouldShow, placement, offset, updateDelay, items, contexts, icons, children, }: DomternalBubbleMenuProps): ReactNode;
|
|
173
174
|
|
|
174
175
|
interface DomternalFloatingMenuProps {
|
|
175
176
|
/** The editor instance. If omitted, uses EditorProvider context. */
|
|
176
177
|
editor?: Editor;
|
|
177
|
-
/** Custom visibility
|
|
178
|
+
/** Custom visibility predicate. */
|
|
178
179
|
shouldShow?: FloatingMenuOptions['shouldShow'];
|
|
179
|
-
/** Pixel offset from trigger. @default 0 */
|
|
180
|
+
/** Pixel offset from trigger anchor. @default 0 */
|
|
180
181
|
offset?: number;
|
|
181
|
-
/**
|
|
182
|
-
|
|
182
|
+
/** Items override (array replaces defaults; function transforms them). */
|
|
183
|
+
items?: FloatingMenuItemsOverride;
|
|
184
|
+
/** Keyboard shortcuts for entering the menu via keyboard. */
|
|
185
|
+
keymap?: FloatingMenuKeymap;
|
|
186
|
+
/** Custom icon set (falls back to `@domternal/core`'s `defaultIcons`). */
|
|
187
|
+
icons?: IconSet;
|
|
188
|
+
/**
|
|
189
|
+
* When true, the menu does NOT auto-show on every empty paragraph;
|
|
190
|
+
* it only opens when the BlockHandle `+` button (or any caller of
|
|
191
|
+
* `showFloatingMenu`) explicitly triggers it. Notion-style behaviour.
|
|
192
|
+
* @default false
|
|
193
|
+
*/
|
|
194
|
+
requireExplicitTrigger?: boolean;
|
|
195
|
+
/**
|
|
196
|
+
* Optional custom content. When provided, the default grouped-item
|
|
197
|
+
* rendering is skipped and children are rendered inside the menu element.
|
|
198
|
+
*/
|
|
199
|
+
children?: ReactNode;
|
|
183
200
|
}
|
|
184
|
-
|
|
201
|
+
/**
|
|
202
|
+
* Block-insert floating menu. Renders defaults collected from the editor's
|
|
203
|
+
* extensions via `addFloatingMenuItems()`; pass `items` to override or
|
|
204
|
+
* `children` to render a fully custom UI.
|
|
205
|
+
*/
|
|
206
|
+
declare function DomternalFloatingMenu({ editor: editorProp, shouldShow, offset, items, keymap, icons, requireExplicitTrigger, children, }: DomternalFloatingMenuProps): ReactNode;
|
|
185
207
|
|
|
186
208
|
interface EmojiPickerItem {
|
|
187
209
|
emoji: string;
|
|
@@ -195,7 +217,7 @@ interface DomternalEmojiPickerProps {
|
|
|
195
217
|
/** Array of emoji items with emoji, name, and group. */
|
|
196
218
|
emojis: EmojiPickerItem[];
|
|
197
219
|
}
|
|
198
|
-
declare function DomternalEmojiPicker({ editor: editorProp, emojis }: DomternalEmojiPickerProps):
|
|
220
|
+
declare function DomternalEmojiPicker({ editor: editorProp, emojis }: DomternalEmojiPickerProps): ReactNode;
|
|
199
221
|
|
|
200
222
|
interface DomternalProps extends UseEditorOptions {
|
|
201
223
|
/** Optional dependency array for forced editor recreation. */
|
|
@@ -225,7 +247,7 @@ interface DomternalProps extends UseEditorOptions {
|
|
|
225
247
|
* </Domternal>
|
|
226
248
|
* ```
|
|
227
249
|
*/
|
|
228
|
-
declare function Domternal({ children, deps, ...options }: DomternalProps):
|
|
250
|
+
declare function Domternal({ children, deps, ...options }: DomternalProps): ReactNode;
|
|
229
251
|
declare namespace Domternal {
|
|
230
252
|
var Content: typeof DomternalContent;
|
|
231
253
|
var Loading: typeof DomternalLoading;
|
|
@@ -237,34 +259,34 @@ declare namespace Domternal {
|
|
|
237
259
|
/** Renders the editor content area. Mounts the editor view DOM from context. */
|
|
238
260
|
declare function DomternalContent({ className }: {
|
|
239
261
|
className?: string;
|
|
240
|
-
}):
|
|
262
|
+
}): ReactNode;
|
|
241
263
|
declare namespace DomternalContent {
|
|
242
264
|
var displayName: string;
|
|
243
265
|
}
|
|
244
266
|
/** Renders children only while editor is not yet ready (SSR loading state). */
|
|
245
267
|
declare function DomternalLoading({ children }: {
|
|
246
268
|
children: ReactNode;
|
|
247
|
-
}):
|
|
269
|
+
}): ReactNode;
|
|
248
270
|
declare namespace DomternalLoading {
|
|
249
271
|
var displayName: string;
|
|
250
272
|
}
|
|
251
273
|
/** Toolbar subcomponent. Uses editor from context automatically. */
|
|
252
|
-
declare function DomternalToolbarSub(props: Omit<DomternalToolbarProps, 'editor'>):
|
|
274
|
+
declare function DomternalToolbarSub(props: Omit<DomternalToolbarProps, 'editor'>): ReactNode;
|
|
253
275
|
declare namespace DomternalToolbarSub {
|
|
254
276
|
var displayName: string;
|
|
255
277
|
}
|
|
256
278
|
/** BubbleMenu subcomponent. Uses editor from context automatically. */
|
|
257
|
-
declare function DomternalBubbleMenuSub(props: Omit<DomternalBubbleMenuProps, 'editor'>):
|
|
279
|
+
declare function DomternalBubbleMenuSub(props: Omit<DomternalBubbleMenuProps, 'editor'>): ReactNode;
|
|
258
280
|
declare namespace DomternalBubbleMenuSub {
|
|
259
281
|
var displayName: string;
|
|
260
282
|
}
|
|
261
283
|
/** FloatingMenu subcomponent. Uses editor from context automatically. */
|
|
262
|
-
declare function DomternalFloatingMenuSub(props: Omit<DomternalFloatingMenuProps, 'editor'>):
|
|
284
|
+
declare function DomternalFloatingMenuSub(props: Omit<DomternalFloatingMenuProps, 'editor'>): ReactNode;
|
|
263
285
|
declare namespace DomternalFloatingMenuSub {
|
|
264
286
|
var displayName: string;
|
|
265
287
|
}
|
|
266
288
|
/** EmojiPicker subcomponent. Uses editor from context automatically. */
|
|
267
|
-
declare function DomternalEmojiPickerSub(props: Omit<DomternalEmojiPickerProps, 'editor'>):
|
|
289
|
+
declare function DomternalEmojiPickerSub(props: Omit<DomternalEmojiPickerProps, 'editor'>): ReactNode;
|
|
268
290
|
declare namespace DomternalEmojiPickerSub {
|
|
269
291
|
var displayName: string;
|
|
270
292
|
}
|
|
@@ -333,7 +355,76 @@ interface EditorContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
333
355
|
* return <EditorContent editor={editor} className="my-editor" />;
|
|
334
356
|
* ```
|
|
335
357
|
*/
|
|
336
|
-
declare function EditorContent({ editor, innerRef, ...htmlProps }: EditorContentProps):
|
|
358
|
+
declare function EditorContent({ editor, innerRef, ...htmlProps }: EditorContentProps): ReactNode;
|
|
359
|
+
|
|
360
|
+
/**
|
|
361
|
+
* useNotionColorPicker
|
|
362
|
+
*
|
|
363
|
+
* State and effect plumbing for the Notion-style inline color picker. Listens
|
|
364
|
+
* for the `notionColorOpen` event emitted by the bubble menu's "A" trigger,
|
|
365
|
+
* tracks the active text/background tokens, and exposes the imperative
|
|
366
|
+
* commands consumers need (`applyText`, `applyBg`, `close`).
|
|
367
|
+
*
|
|
368
|
+
* The default component (`DomternalNotionColorPicker`) consumes this hook and
|
|
369
|
+
* renders the panel via `createPortal`. Consumers building custom UIs can
|
|
370
|
+
* call this hook directly.
|
|
371
|
+
*/
|
|
372
|
+
|
|
373
|
+
interface UseNotionColorPickerOptions {
|
|
374
|
+
editor: Editor | null;
|
|
375
|
+
}
|
|
376
|
+
interface UseNotionColorPickerResult {
|
|
377
|
+
/** Whether the picker panel is currently open. */
|
|
378
|
+
isOpen: boolean;
|
|
379
|
+
/** Editor host element (`.dm-editor`) used as the portal target. Null until the editor is ready. */
|
|
380
|
+
hostEl: HTMLElement | null;
|
|
381
|
+
/** Anchor element the picker positions against (the bubble-menu "A" trigger button). */
|
|
382
|
+
anchorEl: HTMLElement | null;
|
|
383
|
+
/** Ref to the panel root, used by the picker UI for positioning + focus management. */
|
|
384
|
+
panelRef: RefObject<HTMLDivElement | null>;
|
|
385
|
+
/** Currently applied text token at the cursor, or null when default. */
|
|
386
|
+
currentTextToken: string | null;
|
|
387
|
+
/** Currently applied background token at the cursor, or null when default. */
|
|
388
|
+
currentBgToken: string | null;
|
|
389
|
+
/** Named-token palette (read from the NotionColorPicker extension options). */
|
|
390
|
+
palette: readonly string[];
|
|
391
|
+
/** Apply a text color token to the current selection. Picker stays open. */
|
|
392
|
+
applyText: (token: string | null) => void;
|
|
393
|
+
/** Apply a background color token to the current selection. Picker stays open. */
|
|
394
|
+
applyBg: (token: string | null) => void;
|
|
395
|
+
/** Close the picker. When `refocus` is true, returns focus to the anchor button. */
|
|
396
|
+
close: (opts?: {
|
|
397
|
+
refocus?: boolean;
|
|
398
|
+
}) => void;
|
|
399
|
+
/** Display label for a palette token (defaults to title-case fallback). */
|
|
400
|
+
tokenLabel: (token: string) => string;
|
|
401
|
+
/** Arrow / Home / End keyboard navigation across the 5-column swatch grid. */
|
|
402
|
+
onPanelKeydown: (event: KeyboardEvent<HTMLDivElement>) => void;
|
|
403
|
+
}
|
|
404
|
+
declare function useNotionColorPicker(options: UseNotionColorPickerOptions): UseNotionColorPickerResult;
|
|
405
|
+
|
|
406
|
+
/**
|
|
407
|
+
* DomternalNotionColorPicker
|
|
408
|
+
*
|
|
409
|
+
* Notion-style inline color picker rendered via `createPortal` into the
|
|
410
|
+
* `.dm-editor` host. The portal target keeps the panel inside the editor's
|
|
411
|
+
* CSS-variable scope (theme tokens cascade) without imperative DOM moves.
|
|
412
|
+
*
|
|
413
|
+
* Opens in response to the `notionColorOpen` event emitted by the bubble
|
|
414
|
+
* menu's "A" trigger. Two sections: text color (top), background color
|
|
415
|
+
* (bottom). Each section is a default-swatch plus the named-token palette.
|
|
416
|
+
*
|
|
417
|
+
* The default UI is rendered when no `children` prop is provided. Pass
|
|
418
|
+
* `children` to take over rendering while keeping the hook's lifecycle.
|
|
419
|
+
*/
|
|
420
|
+
|
|
421
|
+
interface DomternalNotionColorPickerProps {
|
|
422
|
+
/** The editor instance. If omitted, uses EditorProvider context. */
|
|
423
|
+
editor?: Editor;
|
|
424
|
+
/** Custom panel content. When provided, replaces the default swatch grid. */
|
|
425
|
+
children?: ReactNode | ((api: UseNotionColorPickerResult) => ReactNode);
|
|
426
|
+
}
|
|
427
|
+
declare function DomternalNotionColorPicker({ editor: editorProp, children, }: DomternalNotionColorPickerProps): ReactNode;
|
|
337
428
|
|
|
338
429
|
/** ProseMirror node shape passed to node views. */
|
|
339
430
|
interface PMNode {
|
|
@@ -402,7 +493,7 @@ interface ReactNodeViewRendererOptions {
|
|
|
402
493
|
* }
|
|
403
494
|
* ```
|
|
404
495
|
*/
|
|
405
|
-
declare function ReactNodeViewRenderer(component: React.ComponentType<ReactNodeViewProps>, options?: ReactNodeViewRendererOptions): (node: PMNode,
|
|
496
|
+
declare function ReactNodeViewRenderer(component: React.ComponentType<ReactNodeViewProps>, options?: ReactNodeViewRendererOptions): (node: PMNode, view: unknown, getPos: () => number, decorations: unknown[]) => ReactNodeView;
|
|
406
497
|
interface ReactNodeViewInit {
|
|
407
498
|
editor: Editor;
|
|
408
499
|
node: PMNode;
|
|
@@ -442,7 +533,7 @@ interface NodeViewWrapperProps extends HTMLAttributes<HTMLElement> {
|
|
|
442
533
|
* Container component for custom React node views.
|
|
443
534
|
* Handles drag events and marks the element as a node view wrapper.
|
|
444
535
|
*/
|
|
445
|
-
declare function NodeViewWrapper({ as: Tag, style, ...props }: NodeViewWrapperProps):
|
|
536
|
+
declare function NodeViewWrapper({ as: Tag, style, ...props }: NodeViewWrapperProps): ReactNode;
|
|
446
537
|
|
|
447
538
|
interface NodeViewContentProps extends HTMLAttributes<HTMLElement> {
|
|
448
539
|
/** The HTML element type to render. @default 'div' */
|
|
@@ -452,7 +543,7 @@ interface NodeViewContentProps extends HTMLAttributes<HTMLElement> {
|
|
|
452
543
|
* Placeholder for editable nested content within a custom React node view.
|
|
453
544
|
* ProseMirror manages the content DOM inside this element.
|
|
454
545
|
*/
|
|
455
|
-
declare function NodeViewContent({ as: Tag, style, ...props }: NodeViewContentProps):
|
|
546
|
+
declare function NodeViewContent({ as: Tag, style, ...props }: NodeViewContentProps): ReactNode;
|
|
456
547
|
|
|
457
548
|
interface ReactNodeViewContextValue {
|
|
458
549
|
onDragStart: (event: DragEvent) => void;
|
|
@@ -464,4 +555,4 @@ interface ReactNodeViewContextValue {
|
|
|
464
555
|
*/
|
|
465
556
|
declare function useReactNodeView(): ReactNodeViewContextValue;
|
|
466
557
|
|
|
467
|
-
export { DEFAULT_EXTENSIONS, Domternal, DomternalBubbleMenu, type DomternalBubbleMenuProps, DomternalEditor, type DomternalEditorProps, type DomternalEditorRef, DomternalEmojiPicker, type DomternalEmojiPickerProps, DomternalFloatingMenu, type DomternalFloatingMenuProps, type DomternalProps, DomternalToolbar, type DomternalToolbarProps, EditorContent, type EditorContentProps, EditorProvider, type EditorProviderProps, type EditorState, type EmojiPickerItem, NodeViewContent, type NodeViewContentProps, NodeViewWrapper, type NodeViewWrapperProps, type ReactNodeViewProps, ReactNodeViewRenderer, type ReactNodeViewRendererOptions, type UseEditorOptions, useCurrentEditor, useEditor, useEditorState, useReactNodeView };
|
|
558
|
+
export { DEFAULT_EXTENSIONS, Domternal, DomternalBubbleMenu, type DomternalBubbleMenuProps, DomternalEditor, type DomternalEditorProps, type DomternalEditorRef, DomternalEmojiPicker, type DomternalEmojiPickerProps, DomternalFloatingMenu, type DomternalFloatingMenuProps, DomternalNotionColorPicker, type DomternalNotionColorPickerProps, type DomternalProps, DomternalToolbar, type DomternalToolbarProps, EditorContent, type EditorContentProps, EditorProvider, type EditorProviderProps, type EditorState, type EmojiPickerItem, NodeViewContent, type NodeViewContentProps, NodeViewWrapper, type NodeViewWrapperProps, type ReactNodeViewProps, ReactNodeViewRenderer, type ReactNodeViewRendererOptions, type UseEditorOptions, type UseNotionColorPickerOptions, type UseNotionColorPickerResult, useCurrentEditor, useEditor, useEditorState, useNotionColorPicker, useReactNodeView };
|