@domternal/react 0.14.0 → 1.0.0

package/README.md

@@ -16,10 +16,10 @@ and React 19.
 ## Install
 
 ```bash
-pnpm add @domternal/react @domternal/core react react-dom
+pnpm add @domternal/react @domternal/core @domternal/theme react react-dom
 ```
 
-`react` (>=18), `react-dom` (>=18), and `@domternal/core` (>=0.14.0) are peer dependencies. Import the theme
+`react` (>=18), `react-dom` (>=18), and `@domternal/core` (>=1.0.0) are peer dependencies. Import the theme
 ([`@domternal/theme`](https://www.npmjs.com/package/@domternal/theme)) in your entry CSS for default styling:
 
 ```css
@@ -73,13 +73,35 @@ export default function Editor() {
 }
 ```
 
+## Options
+
+`useEditor(options, deps?)` and `<Domternal>` take the same options:
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `extensions` | `AnyExtension[]` | `[]` | Extensions to load on top of `DEFAULT_EXTENSIONS`. |
+| `history` | `boolean` | `true` | Whether the built-in History extension is loaded. Turn it off when an extension brings its own undo. |
+| `content` | `Content` | `''` | Initial content, HTML string or JSON. Changing it syncs the editor. |
+| `editable` | `boolean` | `true` | Whether the editor is editable. |
+| `preset` | `'classic' \| 'notion'` | `'classic'` | `'notion'` paints `dm-notion-mode` on the `.dm-editor` host and switches preset-aware extensions to their Notion behavior. Create-time only. |
+| `autofocus` | `FocusPosition` | `false` | Where to place the caret on mount. |
+| `outputFormat` | `'html' \| 'json'` | `'html'` | Format used when comparing the `content` prop against the document. |
+| `immediatelyRender` | `boolean` | `false` | Create the editor during the first render, so `editor` is never null. Throws in SSR. |
+
+`onCreate`, `onUpdate`, `onSelectionChange`, `onFocus`, `onBlur`, and `onDestroy` callbacks are
+accepted alongside them. `<Domternal>` additionally takes `deps`, the dependency array
+`useEditor` reads as its second argument: change a value in it and the editor is rebuilt.
+
 ## Exports
 
-- **Hooks**: `useEditor`, `useEditorState` (full state or a granular selector), `useCurrentEditor`
+- **Hooks**: `useEditor`, `useEditorState` (full state or a granular selector), `useCurrentEditor`,
+  `useNotionColorPicker`
 - **Constants**: `DEFAULT_EXTENSIONS`
 - **Composable component**: `Domternal` with `Domternal.Toolbar`, `Domternal.Content`, `Domternal.BubbleMenu`,
   `Domternal.FloatingMenu`, `Domternal.EmojiPicker`, `Domternal.Loading`
 - **Components**: `DomternalEditor`, `EditorContent`, `DomternalToolbar`, `DomternalBubbleMenu`,
   `DomternalFloatingMenu`, `DomternalEmojiPicker`, `DomternalNotionColorPicker`, `EditorProvider`
 - **Node views**: `ReactNodeViewRenderer`, `NodeViewWrapper`, `NodeViewContent`, `useReactNodeView`
+- **Core re-exports**: the `Editor` class plus the `Content`, `AnyExtension`, `FocusPosition`,
+  and `JSONContent` types
 - **SSR helpers** (re-exported from core, work without an editor instance): `generateHTML`, `generateJSON`, `generateText`

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { DependencyList, ReactNode, HTMLAttributes, Ref, RefObject, KeyboardEvent, ElementType, RefCallback } from 'react';
-import { AnyExtension, Content, FocusPosition, Editor, JSONContent, IconSet, ToolbarLayoutEntry, BubbleMenuOptions, FloatingMenuOptions, FloatingMenuItemsOverride, FloatingMenuKeymap } from '@domternal/core';
+import { AnyExtension, Content, EditorPreset, FocusPosition, Editor, JSONContent, IconSet, ToolbarLayoutEntry, BubbleMenuOptions, BubbleContexts, FloatingMenuOptions, FloatingMenuItemsOverride, FloatingMenuKeymap } from '@domternal/core';
 export { AnyExtension, Content, Editor, FocusPosition, GenerateHTMLOptions, GenerateJSONOptions, GenerateTextOptions, JSONContent, generateHTML, generateJSON, generateText } from '@domternal/core';
 
 declare const DEFAULT_EXTENSIONS: AnyExtension[];
@@ -17,6 +17,12 @@ interface UseEditorOptions {
     content?: Content;
     /** Whether the editor is editable. @default true */
     editable?: boolean;
+    /**
+     * Editing experience preset. `'notion'` paints `dm-notion-mode` on the
+     * `.dm-editor` wrapper and switches preset-aware extensions to their
+     * Notion behavior, replacing the hand-written class. Create-time only.
+     */
+    preset?: EditorPreset;
     /** Where to autofocus on mount. @default false */
     autofocus?: FocusPosition;
     /** Output format for content comparison. @default 'html' */
@@ -171,7 +177,7 @@ interface DomternalBubbleMenuProps {
     /** 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>;
+    contexts?: BubbleContexts;
     /** Custom icon overrides. Falls back to default Phosphor icons for unmapped keys. */
     icons?: IconSet;
     /** Additional content rendered after buttons. */
@@ -224,7 +230,7 @@ interface DomternalEmojiPickerProps {
     /** Array of emoji items with emoji, name, and group. */
     emojis: EmojiPickerItem[];
 }
-declare function DomternalEmojiPicker({ editor: editorProp, emojis }: DomternalEmojiPickerProps): ReactNode;
+declare function DomternalEmojiPicker({ editor: editorProp, emojis, }: DomternalEmojiPickerProps): ReactNode;
 
 interface DomternalProps extends UseEditorOptions {
     /** Optional dependency array for forced editor recreation. */