@domternal/vue 0.14.0 → 0.15.0

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, 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;

package/dist/index.js

@@ -33,7 +33,8 @@ function useEditor(options = {}) {
       extensions: [...defaults, ...extensions],
       content: initialContent,
       editable,
-      autofocus: focus
+      autofocus: focus,
+      ...options.preset ? { preset: options.preset } : {}
     });
     markRaw(ed);
     wireEvents(ed);
@@ -69,6 +70,7 @@ function useEditor(options = {}) {
       const mount = editorRef.value;
       if (mount && ed.view.dom.parentElement !== mount) {
         mount.appendChild(ed.view.dom);
+        ed.adoptPresetClass();
       }
       return;
     }
@@ -279,6 +281,7 @@ function useToolbarController(editor, layout) {
   const toolbarRef = ref();
   let cleanupFloating = null;
   let clickOutsideHandler = null;
+  let escapeHandler = null;
   let dismissOverlayHandler = null;
   let editorEl = null;
   let syncStateRaf = 0;
@@ -315,6 +318,17 @@ function useToolbarController(editor, layout) {
         }
       };
       document.addEventListener("mousedown", clickOutsideHandler);
+      escapeHandler = (e) => {
+        if (!controller?.openDropdown) return;
+        if (e.key !== "Escape") return;
+        if (toolbarRef.value?.contains(document.activeElement)) return;
+        cleanupFloating?.();
+        cleanupFloating = null;
+        controller.closeDropdown();
+        syncState();
+        e.preventDefault();
+      };
+      document.addEventListener("keydown", escapeHandler);
       editorEl = ed.view.dom.closest(".dm-editor");
       if (editorEl) {
         dismissOverlayHandler = () => {
@@ -338,6 +352,10 @@ function useToolbarController(editor, layout) {
       document.removeEventListener("mousedown", clickOutsideHandler);
       clickOutsideHandler = null;
     }
+    if (escapeHandler) {
+      document.removeEventListener("keydown", escapeHandler);
+      escapeHandler = null;
+    }
     if (dismissOverlayHandler && editorEl) {
       editorEl.removeEventListener("dm:dismiss-overlays", dismissOverlayHandler);
       dismissOverlayHandler = null;
@@ -1212,7 +1230,8 @@ function useBubbleMenu(options) {
       }
       trailing.value = {
         isNodeSelection: isNode,
-        showColorPickerButton: hasNotionColorPicker,
+        // Hidden without a live notionColorOpen listener: the trigger would be dead.
+        showColorPickerButton: hasNotionColorPicker && currentEd.listenerCount("notionColorOpen") > 0,
         showBlockMenuButton: hasBlockContextMenu,
         blockMenuButtonDisabled: blockMenuDisabled,
         currentTextColorVar: textVar,
@@ -2198,6 +2217,7 @@ var Domternal = defineComponent({
     extensions: { type: Array, default: void 0 },
     content: { type: [String, Object], default: "" },
     editable: { type: Boolean, default: true },
+    preset: { type: String, default: void 0 },
     autofocus: { type: [Boolean, String, Number], default: false },
     outputFormat: { type: String, default: "html" },
     immediatelyRender: { type: Boolean, default: false },
@@ -2213,6 +2233,7 @@ var Domternal = defineComponent({
       ...props.extensions && { extensions: props.extensions },
       content: props.content,
       editable: props.editable,
+      ...props.preset && { preset: props.preset },
       autofocus: props.autofocus,
       outputFormat: props.outputFormat,
       immediatelyRender: props.immediatelyRender,
@@ -2249,6 +2270,7 @@ var DomternalContent = defineComponent({
       const editorDom = ed.view.dom;
       if (editorDom.parentElement !== container) {
         container.appendChild(editorDom);
+        ed.adoptPresetClass();
       }
     });
     return () => {
@@ -2276,6 +2298,7 @@ var DomternalEditor = defineComponent({
     extensions: { type: Array, default: void 0 },
     content: { type: [String, Object], default: void 0 },
     editable: { type: Boolean, default: true },
+    preset: { type: String, default: void 0 },
     autofocus: { type: [Boolean, String, Number], default: false },
     immediatelyRender: { type: Boolean, default: false },
     outputFormat: { type: String, default: "html" },
@@ -2296,6 +2319,7 @@ var DomternalEditor = defineComponent({
       ...props.extensions && { extensions: props.extensions },
       content: props.modelValue ?? props.content ?? "",
       editable: props.editable,
+      ...props.preset && { preset: props.preset },
       autofocus: props.autofocus,
       immediatelyRender: props.immediatelyRender,
       outputFormat: props.outputFormat,
@@ -2385,6 +2409,7 @@ var EditorContent = defineComponent({
       const editorDom = editor.view.dom;
       if (editorDom.parentElement !== container) {
         container.appendChild(editorDom);
+        editor.adoptPresetClass();
       }
     });
     return () => h("div", {