@domternal/core 0.8.0 → 0.9.0

package/dist/index.js

@@ -1,11 +1,11 @@
-import { Plugin, PluginKey, TextSelection, Selection, NodeSelection, AllSelection, EditorState } from '@domternal/pm/state';
+import { PluginKey, Plugin, TextSelection, Selection, NodeSelection, AllSelection, EditorState } from '@domternal/pm/state';
 export { PluginKey } from '@domternal/pm/state';
 import { DecorationSet, Decoration, EditorView } from '@domternal/pm/view';
 import { Slice, Fragment, Schema, Node as Node$1, DOMSerializer, DOMParser } from '@domternal/pm/model';
 import { keymap } from '@domternal/pm/keymap';
 import { splitBlock, chainCommands, newlineInCode, createParagraphNear, liftEmptyBlock, baseKeymap, selectNodeBackward as selectNodeBackward$1 } from '@domternal/pm/commands';
 import { InputRule } from '@domternal/pm/inputrules';
-import { canJoin, findWrapping, liftTarget } from '@domternal/pm/transform';
+import { canJoin, canSplit, findWrapping, liftTarget } from '@domternal/pm/transform';
 import { liftListItem, sinkListItem, splitListItem, wrapRangeInList } from '@domternal/pm/schema-list';
 import { offset, flip, shift, autoUpdate, hide, computePosition } from '@floating-ui/dom';
 import { find } from 'linkifyjs';
@@ -2278,7 +2278,7 @@ function joinListForwards(tr, listType) {
     }
   }
 }
-var toggleList = (listNodeName, listItemNodeName, attributes) => ({ state, tr, dispatch }) => {
+var toggleList = (listNodeName, listItemNodeName, attributes, options) => ({ state, tr, dispatch }) => {
   const listType = state.schema.nodes[listNodeName];
   const listItemType = state.schema.nodes[listItemNodeName];
   if (!listType || !listItemType) {
@@ -2410,6 +2410,17 @@ var toggleList = (listNodeName, listItemNodeName, attributes) => ({ state, tr, d
   const contentBlocks = collectListContext(tr.doc, from, to);
   const allInTargetList = contentBlocks.length > 0 && contentBlocks.every((b) => b.inTargetList);
   const allInSomeList = contentBlocks.length > 0 && contentBlocks.every((b) => b.inSomeList);
+  if (options?.perItem && from === to && allInSomeList && !allInTargetList) {
+    if (!dispatch) return true;
+    if (liftCurrentListItem(state, tr)) {
+      const blockRange = tr.selection.$from.blockRange();
+      if (blockRange) wrapRangeInList(tr, blockRange, listType, attributes);
+      joinListBackwards(tr, listType);
+      joinListForwards(tr, listType);
+      dispatch(tr.scrollIntoView());
+      return true;
+    }
+  }
   if (allInTargetList) {
     const first = contentBlocks[0];
     const last = contentBlocks[contentBlocks.length - 1];
@@ -3496,7 +3507,7 @@ var Editor = class extends EventEmitter {
    * Checks if the editor is editable
    */
   get isEditable() {
-    return this.view.editable;
+    return this.view ? this.view.editable : this.options.editable ?? true;
   }
   /**
    * Checks if the editor content is empty
@@ -3993,10 +4004,11 @@ var Editor = class extends EventEmitter {
 function positionFloating(reference, floating, options) {
   const placementOpt = options?.placement ?? "bottom";
   const paddingOpt = options?.padding ?? 10;
+  const overflowOpts = options?.boundary ? { padding: paddingOpt, boundary: options.boundary } : { padding: paddingOpt };
   const middleware = [
     offset(options?.offsetValue ?? 4),
-    flip({ padding: paddingOpt }),
-    shift({ padding: paddingOpt }),
+    flip(overflowOpts),
+    shift(overflowOpts),
     hide()
   ];
   const update = () => {
@@ -4027,10 +4039,11 @@ function positionFloating(reference, floating, options) {
 function positionFloatingOnce(reference, floating, options) {
   const placementOpt = options?.placement ?? "bottom";
   const paddingOpt = options?.padding ?? 10;
+  const overflowOpts = options?.boundary ? { padding: paddingOpt, boundary: options.boundary } : { padding: paddingOpt };
   const middleware = [
     offset(options?.offsetValue ?? 4),
-    flip({ padding: paddingOpt }),
-    shift({ padding: paddingOpt })
+    flip(overflowOpts),
+    shift(overflowOpts)
   ];
   const update = () => {
     void computePosition(
@@ -5122,6 +5135,226 @@ var FloatingMenuController = class _FloatingMenuController {
     if (changed) this.onChange();
   }
 };
+var floatingMenuPluginKey = new PluginKey("floatingMenu");
+function defaultFloatingMenuShouldShow({
+  editor,
+  state
+}) {
+  if (!editor.isEditable) return false;
+  const { selection } = state;
+  const { $from, empty } = selection;
+  if (!empty) return false;
+  if ($from.parent.type.name !== "paragraph") return false;
+  if ($from.parent.content.size !== 0) return false;
+  if ($from.parentOffset !== 0) return false;
+  return true;
+}
+var DEFAULT_ENTER_MENU_SHORTCUTS = ["Alt-F10", "Mod-/"];
+var FLOATING_MENU_META = "dm:floatingMenuTrigger";
+function showFloatingMenu(view) {
+  view.dispatch(view.state.tr.setMeta(FLOATING_MENU_META, "show"));
+}
+function hideFloatingMenu(view) {
+  view.dispatch(view.state.tr.setMeta(FLOATING_MENU_META, "hide"));
+}
+var IS_MAC = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent);
+function matchShortcut(event, shortcut) {
+  const parts = shortcut.split("-");
+  let keyPart = parts.pop();
+  if (!keyPart) return false;
+  if (keyPart === "Space") keyPart = " ";
+  let needCtrl = false;
+  let needMeta = false;
+  let needAlt = false;
+  let needShift = false;
+  for (const mod of parts) {
+    switch (mod) {
+      case "Mod":
+      case "mod":
+        if (IS_MAC) needMeta = true;
+        else needCtrl = true;
+        break;
+      case "Cmd":
+      case "cmd":
+      case "Meta":
+      case "meta":
+      case "m":
+        needMeta = true;
+        break;
+      case "Ctrl":
+      case "ctrl":
+      case "Control":
+      case "control":
+      case "c":
+        needCtrl = true;
+        break;
+      case "Alt":
+      case "alt":
+      case "a":
+        needAlt = true;
+        break;
+      case "Shift":
+      case "shift":
+      case "s":
+        needShift = true;
+        break;
+      default:
+        return false;
+    }
+  }
+  if (event.altKey !== needAlt) return false;
+  if (event.ctrlKey !== needCtrl) return false;
+  if (event.metaKey !== needMeta) return false;
+  if (keyPart.length > 1 && event.shiftKey !== needShift) return false;
+  return event.key === keyPart || event.key.toLowerCase() === keyPart.toLowerCase();
+}
+function createFloatingMenuPlugin(options) {
+  const {
+    pluginKey,
+    editor,
+    element,
+    shouldShow = defaultFloatingMenuShouldShow,
+    offset: offset2 = 0,
+    keymap: keymap4,
+    requireExplicitTrigger = false
+  } = options;
+  const enterShortcuts = keymap4?.enterMenu ?? DEFAULT_ENTER_MENU_SHORTCUTS;
+  if (!element.getAttribute("role")) {
+    element.setAttribute("role", "menu");
+    element.setAttribute("aria-label", "Insert block");
+  }
+  let cleanupFloating = null;
+  let editorEl = null;
+  let clickOutsideHandler = null;
+  let dismissOverlayHandler = null;
+  const isVisible = () => element.hasAttribute("data-show");
+  const updatePosition = (view) => {
+    const { selection } = view.state;
+    const { $from } = selection;
+    const depth = $from.depth;
+    const startPos = $from.start(depth);
+    const domNode = view.nodeDOM(startPos - 1);
+    if (domNode instanceof HTMLElement) {
+      cleanupFloating?.();
+      cleanupFloating = positionFloatingOnce(domNode, element, {
+        placement: "bottom-start",
+        offsetValue: offset2
+      });
+      element.setAttribute("data-show", "");
+    }
+  };
+  const hideMenu = () => {
+    cleanupFloating?.();
+    cleanupFloating = null;
+    element.removeAttribute("data-show");
+  };
+  const clearTriggeredFlag = (view) => {
+    if (!requireExplicitTrigger) return;
+    const triggered = pluginKey.getState(view.state)?.triggered ?? false;
+    if (triggered) view.dispatch(view.state.tr.setMeta(FLOATING_MENU_META, "hide"));
+  };
+  const focusFirstItem = () => {
+    const first = element.querySelector('[data-floating-menu-item]:not([aria-disabled="true"])') ?? element.querySelector('button, [tabindex]:not([tabindex="-1"])');
+    if (!first) return false;
+    first.focus();
+    return true;
+  };
+  hideMenu();
+  const isVisibleNow = (view) => {
+    const wantsShow = shouldShow({ editor, view, state: view.state });
+    if (!requireExplicitTrigger) return wantsShow;
+    const triggered = pluginKey.getState(view.state)?.triggered ?? false;
+    return triggered && wantsShow;
+  };
+  return new Plugin({
+    key: pluginKey,
+    state: {
+      init: () => ({ triggered: false }),
+      apply: (tr, prev) => {
+        const meta = tr.getMeta(FLOATING_MENU_META);
+        if (meta === "show") return { triggered: true };
+        if (meta === "hide") return { triggered: false };
+        return prev;
+      }
+    },
+    props: {
+      // Keyboard entry. handleKeyDown fires before browser defaults; we only
+      // act while the menu is visible.
+      handleKeyDown(_view, event) {
+        if (!isVisible()) return false;
+        for (const shortcut of enterShortcuts) {
+          if (matchShortcut(event, shortcut)) {
+            if (focusFirstItem()) {
+              event.preventDefault();
+              return true;
+            }
+            return false;
+          }
+        }
+        return false;
+      }
+    },
+    view: (editorView) => {
+      editorEl = editorView.dom.closest(".dm-editor");
+      if (editorEl && element.parentElement !== editorEl) {
+        editorEl.appendChild(element);
+      }
+      const dismiss = () => {
+        hideMenu();
+        clearTriggeredFlag(editor.view);
+      };
+      const onFocus = () => {
+        if (isVisibleNow(editor.view)) updatePosition(editor.view);
+        else dismiss();
+      };
+      const onBlur = ({ event }) => {
+        const related = event.relatedTarget;
+        if (related instanceof Node && element.contains(related)) return;
+        dismiss();
+      };
+      clickOutsideHandler = (e) => {
+        if (!isVisible()) return;
+        const target = e.target;
+        if (!(target instanceof Node)) return;
+        if (element.contains(target)) return;
+        if (editor.view.dom.contains(target)) return;
+        dismiss();
+      };
+      document.addEventListener("mousedown", clickOutsideHandler, true);
+      if (editorEl) {
+        dismissOverlayHandler = () => {
+          dismiss();
+        };
+        editorEl.addEventListener("dm:dismiss-overlays", dismissOverlayHandler);
+      }
+      editor.on("focus", onFocus);
+      editor.on("blur", onBlur);
+      return {
+        update: (view) => {
+          if (isVisibleNow(view)) updatePosition(view);
+          else {
+            hideMenu();
+            clearTriggeredFlag(view);
+          }
+        },
+        destroy: () => {
+          hideMenu();
+          editor.off("focus", onFocus);
+          editor.off("blur", onBlur);
+          if (clickOutsideHandler) {
+            document.removeEventListener("mousedown", clickOutsideHandler, true);
+            clickOutsideHandler = null;
+          }
+          if (dismissOverlayHandler && editorEl) {
+            editorEl.removeEventListener("dm:dismiss-overlays", dismissOverlayHandler);
+            dismissOverlayHandler = null;
+          }
+          editorEl = null;
+        }
+      };
+    }
+  });
+}
 
 // src/icons/phosphor.ts
 var defaultIcons = {
@@ -5892,6 +6125,11 @@ var BulletList = Node2.create({
     return {
       toggleBulletList: () => ({ commands }) => {
         return commands.toggleList(name, options.itemTypeName);
+      },
+      // Notion "turn into" (slash menu / block menu): convert only the cursor's
+      // item and split the run, instead of retyping the whole list.
+      turnIntoBulletList: () => ({ commands }) => {
+        return commands.toggleList(name, options.itemTypeName, void 0, { perItem: true });
       }
     };
   },
@@ -5921,7 +6159,7 @@ var BulletList = Node2.create({
         priority: 200,
         keywords: ["bullet", "list", "unordered", "ul"],
         shortcut: "- ",
-        command: "toggleBulletList",
+        command: "turnIntoBulletList",
         // Don't offer "Bulleted list" while cursor is already inside one,
         // otherwise picking it lifts the user out of the list.
         hideWhenInside: ["bulletList"]
@@ -5995,6 +6233,11 @@ var OrderedList = Node2.create({
     return {
       toggleOrderedList: () => ({ commands }) => {
         return commands.toggleList(name, options.itemTypeName);
+      },
+      // Notion "turn into" (slash menu / block menu): convert only the cursor's
+      // item and split the run, instead of retyping the whole list.
+      turnIntoOrderedList: () => ({ commands }) => {
+        return commands.toggleList(name, options.itemTypeName, void 0, { perItem: true });
       }
     };
   },
@@ -6024,7 +6267,7 @@ var OrderedList = Node2.create({
         priority: 190,
         keywords: ["ordered", "numbered", "list", "ol", "1."],
         shortcut: "1. ",
-        command: "toggleOrderedList",
+        command: "turnIntoOrderedList",
         hideWhenInside: ["orderedList"]
       }
     ];
@@ -6413,6 +6656,17 @@ var TaskItem = Node2.create({
             if (splitBlock(state, view.dispatch)) return true;
           }
         }
+        if (!ctx?.isInChildrenZone && $from.node(-1).attrs["checked"] && $from.parentOffset > 0 && $from.parentOffset < $from.parent.content.size) {
+          const tr = state.tr;
+          const types = [
+            { type: this.nodeType, attrs: { ...$from.node(-1).attrs, checked: false } },
+            { type: $from.parent.type }
+          ];
+          if (canSplit(tr.doc, $from.pos, 2, types)) {
+            view.dispatch(tr.split($from.pos, 2, types).scrollIntoView());
+            return true;
+          }
+        }
         if (splitListItem(this.nodeType, { checked: false })(state, view.dispatch)) return true;
         if ($from.parent.content.size === 0) {
           const listItemType = state.schema.nodes["listItem"];
@@ -6529,6 +6783,11 @@ var TaskList = Node2.create({
     return {
       toggleTaskList: () => ({ commands }) => {
         return commands.toggleList(name, options.itemTypeName);
+      },
+      // Notion "turn into" (slash menu / block menu): convert only the cursor's
+      // item and split the run, instead of retyping the whole list.
+      turnIntoTaskList: () => ({ commands }) => {
+        return commands.toggleList(name, options.itemTypeName, void 0, { perItem: true });
       }
     };
   },
@@ -6566,7 +6825,7 @@ var TaskList = Node2.create({
         priority: 180,
         keywords: ["todo", "task", "checkbox", "check"],
         shortcut: "[ ] ",
-        command: "toggleTaskList",
+        command: "turnIntoTaskList",
         hideWhenInside: ["taskList"]
       }
     ];
@@ -7732,9 +7991,8 @@ var Placeholder = Extension.create({
         props: {
           decorations: ({ doc, selection }) => {
             const editor = this.editor;
-            if (!editor?.view) return DecorationSet.empty;
-            const isEditable = editor.view.editable;
-            if (!isEditable && this.options.showOnlyWhenEditable) {
+            if (!editor) return DecorationSet.empty;
+            if (!editor.isEditable && this.options.showOnlyWhenEditable) {
               return DecorationSet.empty;
             }
             const isDocEmpty = doc.childCount === 1 && doc.firstChild?.isTextblock && doc.firstChild.content.size === 0;
@@ -7842,7 +8100,7 @@ function outdentBlockFromListItem(state, dispatch) {
   if (wrapperDepth < 0) return false;
   const liIndexInWrapper = $from.index(wrapperDepth);
   const wrapper = $from.node(wrapperDepth);
-  if (liIndexInWrapper !== wrapper.childCount - 1) return false;
+  const isLastItem = liIndexInWrapper === wrapper.childCount - 1;
   if (wrapperDepth - 1 < 0) return false;
   const wrapperParent = $from.node(wrapperDepth - 1);
   const wrapperIndexInParent = $from.index(wrapperDepth - 1);
@@ -7857,13 +8115,19 @@ function outdentBlockFromListItem(state, dispatch) {
   if (!dispatch) return true;
   const blockStart = $from.before(blockDepth);
   const blockEnd = $from.after(blockDepth);
-  const wrapperEnd = $from.after(wrapperDepth);
-  const tr = state.tr;
   const blockSize = blockEnd - blockStart;
+  const tr = state.tr;
   tr.delete(blockStart, blockEnd);
-  const insertAt = wrapperEnd - blockSize;
-  tr.insert(insertAt, blockNode);
-  tr.setSelection(Selection.near(tr.doc.resolve(insertAt + 1)));
+  if (isLastItem) {
+    const insertAt = $from.after(wrapperDepth) - blockSize;
+    tr.insert(insertAt, blockNode);
+    tr.setSelection(Selection.near(tr.doc.resolve(insertAt + 1)));
+  } else {
+    const splitPos = $from.after(listItemDepth) - blockSize;
+    tr.split(splitPos, 1);
+    tr.insert(splitPos + 1, blockNode);
+    tr.setSelection(Selection.near(tr.doc.resolve(splitPos + 2)));
+  }
   dispatch(tr.scrollIntoView());
   return true;
 }
@@ -10099,6 +10363,6 @@ var StarterKit = Extension.create({
 // src/index.ts
 var VERSION = "0.1.0";
 
-export { BaseKeymap, BlockColor, Blockquote, Bold, BubbleMenu, BulletList, CanChecker, ChainBuilder, CharacterCount, ClearFormatting, Code, CodeBlock, CommandManager, DEFAULT_BLOCK_COLORS, DEFAULT_BLOCK_COLOR_TYPES, DEFAULT_HIGHLIGHT_COLORS, DEFAULT_NOTION_COLOR_PALETTE, DEFAULT_TEXT_COLORS, Document, Dropcursor, Editor, EventEmitter, Extension, ExtensionManager, FLOATING_MENU_NO_FOCUS, FloatingMenuController, Focus, FontFamily, FontSize, Gapcursor, HardBreak, Heading, Highlight, History, HorizontalRule, InvisibleChars, Italic, LIST_ITEM_TYPE_NAMES, LineHeight, Link, LinkPopover, ListIndent, ListItem, ListKeymap, Mark, Node2 as Node, NotionColorPicker, OrderedList, Paragraph, Placeholder, Selection4 as Selection, SelectionDecoration, StarterKit, Strike, Subscript, Superscript, TaskItem, TaskList, Text, TextAlign, TextColor, TextStyle, ToolbarController, TrailingNode, Typography, Underline, UniqueID, VERSION, applyInlineStyles, autolinkPlugin, autolinkPluginKey, blur, bubbleMenuPluginKey, buildCommandProps, builtInCommands, callOrReturn, characterCountPluginKey, clearContent, copyThemeClass, createAccumulatingDispatch, createBubbleMenuPlugin, createCanChecker, createChainBuilder, createDocument, defaultBlockAt, defaultBubbleContexts, defaultIcons, deleteSelection, findChildren, findListItemAncestorDepth, findParentNode, focus, focusPluginKey, generateHTML, generateJSON, generateText, getListItemCursorContext, getMarkRange, groupFloatingMenuItems, indentBlockAsListChild, inlineStyles, insertAsListItemChild, insertChildrenZoneSibling, insertContent, insertText, invisibleCharsPluginKey, isDocumentEmpty, isInListItemLabel, isInsideListItem, isNodeEmpty, isValidUrl, lift, liftCurrentListItem, liftEmptyChildrenZoneParagraph, linkClickPlugin, linkClickPluginKey, linkExitPlugin, linkExitPluginKey, linkPastePlugin, linkPastePluginKey, markInputRule, markInputRulePatterns, nodeInputRule, outdentBlockFromListItem, placeholderPluginKey, positionFloating, positionFloatingOnce, resetAttributes, selectAll, selectNodeBackward, selectionDecorationPluginKey, setBlockType, setContent, setMark, splitListForInsert, stripInlineColorConflicts, textInputRule, textblockTypeInputRule, toggleBlockType, toggleList, toggleMark, toggleWrap, uniqueIDPluginKey, unsetAllMarks, unsetMark, updateAttributes, wrapIn, wrappingInputRule, writeToClipboard };
+export { BaseKeymap, BlockColor, Blockquote, Bold, BubbleMenu, BulletList, CanChecker, ChainBuilder, CharacterCount, ClearFormatting, Code, CodeBlock, CommandManager, DEFAULT_BLOCK_COLORS, DEFAULT_BLOCK_COLOR_TYPES, DEFAULT_HIGHLIGHT_COLORS, DEFAULT_NOTION_COLOR_PALETTE, DEFAULT_TEXT_COLORS, Document, Dropcursor, Editor, EventEmitter, Extension, ExtensionManager, FLOATING_MENU_META, FLOATING_MENU_NO_FOCUS, FloatingMenuController, Focus, FontFamily, FontSize, Gapcursor, HardBreak, Heading, Highlight, History, HorizontalRule, InvisibleChars, Italic, LIST_ITEM_TYPE_NAMES, LineHeight, Link, LinkPopover, ListIndent, ListItem, ListKeymap, Mark, Node2 as Node, NotionColorPicker, OrderedList, Paragraph, Placeholder, Selection4 as Selection, SelectionDecoration, StarterKit, Strike, Subscript, Superscript, TaskItem, TaskList, Text, TextAlign, TextColor, TextStyle, ToolbarController, TrailingNode, Typography, Underline, UniqueID, VERSION, applyInlineStyles, autolinkPlugin, autolinkPluginKey, blur, bubbleMenuPluginKey, buildCommandProps, builtInCommands, callOrReturn, characterCountPluginKey, clearContent, copyThemeClass, createAccumulatingDispatch, createBubbleMenuPlugin, createCanChecker, createChainBuilder, createDocument, createFloatingMenuPlugin, defaultBlockAt, defaultBubbleContexts, defaultFloatingMenuShouldShow, defaultIcons, deleteSelection, findChildren, findListItemAncestorDepth, findParentNode, floatingMenuPluginKey, focus, focusPluginKey, generateHTML, generateJSON, generateText, getListItemCursorContext, getMarkRange, groupFloatingMenuItems, hideFloatingMenu, indentBlockAsListChild, inlineStyles, insertAsListItemChild, insertChildrenZoneSibling, insertContent, insertText, invisibleCharsPluginKey, isDocumentEmpty, isInListItemLabel, isInsideListItem, isNodeEmpty, isValidUrl, lift, liftCurrentListItem, liftEmptyChildrenZoneParagraph, linkClickPlugin, linkClickPluginKey, linkExitPlugin, linkExitPluginKey, linkPastePlugin, linkPastePluginKey, markInputRule, markInputRulePatterns, nodeInputRule, outdentBlockFromListItem, placeholderPluginKey, positionFloating, positionFloatingOnce, resetAttributes, selectAll, selectNodeBackward, selectionDecorationPluginKey, setBlockType, setContent, setMark, showFloatingMenu, splitListForInsert, stripInlineColorConflicts, textInputRule, textblockTypeInputRule, toggleBlockType, toggleList, toggleMark, toggleWrap, uniqueIDPluginKey, unsetAllMarks, unsetMark, updateAttributes, wrapIn, wrappingInputRule, writeToClipboard };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map