@domternal/vue 0.14.0 → 1.0.0

package/README.md

@@ -19,8 +19,8 @@ editor is created in `onMounted`. Requires Vue 3.3+ and the Composition API.
 pnpm add @domternal/vue @domternal/core @domternal/theme vue
 ```
 
-`vue` (>=3.3) and `@domternal/core` are peer dependencies. `@domternal/theme` supplies the
-editor styles.
+`vue` (>=3.3) and `@domternal/core` (>=1.0.0) are peer dependencies. `@domternal/theme`
+supplies the editor styles.
 
 ## Usage
 
@@ -68,14 +68,52 @@ const { htmlContent, isEmpty } = useEditorState(editor);
 
 <template>
   <DomternalToolbar />
-  <div ref="editorRef" class="dm-editor" />
+  <div class="dm-editor">
+    <div ref="editorRef" />
+  </div>
 </template>
 ```
 
-`useEditor` returns `editor` (a `ShallowRef<Editor | null>`, null until mounted) and `editorRef`
-(bind to the mount element). `useEditorState` returns `htmlContent`, `jsonContent`, `isEmpty`,
-`isFocused`, and `isEditable`, or pass a selector for a granular `ComputedRef`:
+`useEditor` returns `editor` (a `ShallowRef<Editor | null>`, null until mounted unless
+`immediatelyRender` is set) and `editorRef` (bind to the mount element). `useEditorState`
+returns `htmlContent`, `jsonContent`, `isEmpty`, `isFocused`, and `isEditable`, or pass a
+selector for a granular `ComputedRef`:
 
 ```ts
 const isBold = useEditorState(editor, (ed) => ed.isActive('bold'));
 ```
+
+## Options
+
+`useEditor(options)` takes:
+
+| 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. |
+| `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 incoming content against the document. |
+| `immediatelyRender` | `boolean` | `false` | Create the editor during setup instead of in `onMounted`. Not SSR-safe. |
+
+`onCreate`, `onUpdate`, `onSelectionChange`, `onFocus`, `onBlur`, and `onDestroy` callbacks are
+accepted alongside them. `<Domternal>` and `<DomternalEditor>` take the same options as props,
+except `history`: their prop lists are fixed, so `:history="false"` never reaches the composable.
+Call `useEditor({ history: false })` with `provideEditor` instead.
+
+## Exports
+
+- **Composables**: `useEditor`, `useEditorState` (full state or a granular selector),
+  `useCurrentEditor`, `provideEditor`, `useNotionColorPicker`
+- **Constants**: `DEFAULT_EXTENSIONS`, `EDITOR_KEY`
+- **Composable component**: `Domternal` with `Domternal.Toolbar`, `Domternal.Content`,
+  `Domternal.BubbleMenu`, `Domternal.FloatingMenu`, `Domternal.EmojiPicker`, `Domternal.Loading`
+- **Components**: `DomternalEditor` (supports `v-model`), `EditorContent`, `DomternalToolbar`,
+  `DomternalBubbleMenu`, `DomternalFloatingMenu`, `DomternalEmojiPicker`,
+  `DomternalNotionColorPicker`
+- **Node views**: `VueNodeViewRenderer`, `NodeViewWrapper`, `NodeViewContent`, `useVueNodeView`
+- **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 vue from 'vue';
 import { ShallowRef, Ref, ComputedRef, InjectionKey, Component, PropType, VNode, AppContext } from 'vue';
-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';
 import * as prosemirror_state from 'prosemirror-state';
 import * as prosemirror_view from 'prosemirror-view';
@@ -19,6 +19,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' */
@@ -169,6 +175,8 @@ interface DomternalEditorProps {
     extensions?: AnyExtension[];
     content?: Content;
     editable?: boolean;
+    /** Editing experience preset; 'notion' paints dm-notion-mode on the wrapper. Create-time only. */
+    preset?: EditorPreset;
     autofocus?: FocusPosition;
     immediatelyRender?: boolean;
     outputFormat?: 'html' | 'json';
@@ -231,6 +239,10 @@ declare const DomternalEditor: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    preset: {
+        type: PropType<EditorPreset>;
+        default: undefined;
+    };
     autofocus: {
         type: PropType<FocusPosition>;
         default: boolean;
@@ -304,6 +316,10 @@ declare const DomternalEditor: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    preset: {
+        type: PropType<EditorPreset>;
+        default: undefined;
+    };
     autofocus: {
         type: PropType<FocusPosition>;
         default: boolean;
@@ -376,11 +392,12 @@ declare const DomternalEditor: vue.DefineComponent<vue.ExtractPropTypes<{
     onDestroy: () => void;
     content: Content;
     class: string;
-    editable: boolean;
+    preset: EditorPreset;
     onSelectionChange: (props: {
         editor: Editor;
     }) => void;
     extensions: AnyExtension[];
+    editable: boolean;
     autofocus: FocusPosition;
     outputFormat: "html" | "json";
     immediatelyRender: boolean;
@@ -475,7 +492,7 @@ interface DomternalBubbleMenuProps {
     offset?: number;
     updateDelay?: number;
     items?: string[];
-    contexts?: Record<string, string[] | true | null>;
+    contexts?: BubbleContexts;
     /** Custom icon overrides. Falls back to default Phosphor icons for unmapped keys. */
     icons?: IconSet;
 }
@@ -505,7 +522,7 @@ declare const DomternalBubbleMenu: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
     contexts: {
-        type: PropType<Record<string, string[] | true | null>>;
+        type: PropType<BubbleContexts>;
         default: undefined;
     };
     icons: {
@@ -540,7 +557,7 @@ declare const DomternalBubbleMenu: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
     contexts: {
-        type: PropType<Record<string, string[] | true | null>>;
+        type: PropType<BubbleContexts>;
         default: undefined;
     };
     icons: {
@@ -558,10 +575,10 @@ declare const DomternalBubbleMenu: vue.DefineComponent<vue.ExtractPropTypes<{
         to: number;
     }) => boolean;
     offset: number;
-    items: string[];
     updateDelay: number;
+    contexts: BubbleContexts;
+    items: string[];
     icons: IconSet;
-    contexts: Record<string, true | string[] | null>;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 interface DomternalFloatingMenuProps {