@domternal/core 0.8.0 → 0.9.0

package/dist/index.cjs

@@ -2279,7 +2279,7 @@ function joinListForwards(tr, listType) {
     }
   }
 }
-var toggleList = (listNodeName, listItemNodeName, attributes) => ({ state: state$1, tr, dispatch }) => {
+var toggleList = (listNodeName, listItemNodeName, attributes, options) => ({ state: state$1, tr, dispatch }) => {
   const listType = state$1.schema.nodes[listNodeName];
   const listItemType = state$1.schema.nodes[listItemNodeName];
   if (!listType || !listItemType) {
@@ -2411,6 +2411,17 @@ var toggleList = (listNodeName, listItemNodeName, attributes) => ({ state: state
   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$1, tr)) {
+      const blockRange = tr.selection.$from.blockRange();
+      if (blockRange) schemaList.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];
@@ -3497,7 +3508,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
@@ -3994,10 +4005,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 = [
     dom.offset(options?.offsetValue ?? 4),
-    dom.flip({ padding: paddingOpt }),
-    dom.shift({ padding: paddingOpt }),
+    dom.flip(overflowOpts),
+    dom.shift(overflowOpts),
     dom.hide()
   ];
   const update = () => {
@@ -4028,10 +4040,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 = [
     dom.offset(options?.offsetValue ?? 4),
-    dom.flip({ padding: paddingOpt }),
-    dom.shift({ padding: paddingOpt })
+    dom.flip(overflowOpts),
+    dom.shift(overflowOpts)
   ];
   const update = () => {
     void dom.computePosition(
@@ -5123,6 +5136,226 @@ var FloatingMenuController = class _FloatingMenuController {
     if (changed) this.onChange();
   }
 };
+var floatingMenuPluginKey = new state.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 state.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 = {
@@ -5893,6 +6126,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 });
       }
     };
   },
@@ -5922,7 +6160,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"]
@@ -5996,6 +6234,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 });
       }
     };
   },
@@ -6025,7 +6268,7 @@ var OrderedList = Node2.create({
         priority: 190,
         keywords: ["ordered", "numbered", "list", "ol", "1."],
         shortcut: "1. ",
-        command: "toggleOrderedList",
+        command: "turnIntoOrderedList",
         hideWhenInside: ["orderedList"]
       }
     ];
@@ -6414,6 +6657,17 @@ var TaskItem = Node2.create({
             if (commands.splitBlock(state$1, view.dispatch)) return true;
           }
         }
+        if (!ctx?.isInChildrenZone && $from.node(-1).attrs["checked"] && $from.parentOffset > 0 && $from.parentOffset < $from.parent.content.size) {
+          const tr = state$1.tr;
+          const types = [
+            { type: this.nodeType, attrs: { ...$from.node(-1).attrs, checked: false } },
+            { type: $from.parent.type }
+          ];
+          if (transform.canSplit(tr.doc, $from.pos, 2, types)) {
+            view.dispatch(tr.split($from.pos, 2, types).scrollIntoView());
+            return true;
+          }
+        }
         if (schemaList.splitListItem(this.nodeType, { checked: false })(state$1, view.dispatch)) return true;
         if ($from.parent.content.size === 0) {
           const listItemType = state$1.schema.nodes["listItem"];
@@ -6530,6 +6784,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 });
       }
     };
   },
@@ -6567,7 +6826,7 @@ var TaskList = Node2.create({
         priority: 180,
         keywords: ["todo", "task", "checkbox", "check"],
         shortcut: "[ ] ",
-        command: "toggleTaskList",
+        command: "turnIntoTaskList",
         hideWhenInside: ["taskList"]
       }
     ];
@@ -7733,9 +7992,8 @@ var Placeholder = Extension.create({
         props: {
           decorations: ({ doc, selection }) => {
             const editor = this.editor;
-            if (!editor?.view) return view.DecorationSet.empty;
-            const isEditable = editor.view.editable;
-            if (!isEditable && this.options.showOnlyWhenEditable) {
+            if (!editor) return view.DecorationSet.empty;
+            if (!editor.isEditable && this.options.showOnlyWhenEditable) {
               return view.DecorationSet.empty;
             }
             const isDocEmpty = doc.childCount === 1 && doc.firstChild?.isTextblock && doc.firstChild.content.size === 0;
@@ -7843,7 +8101,7 @@ function outdentBlockFromListItem(state$1, 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);
@@ -7858,13 +8116,19 @@ function outdentBlockFromListItem(state$1, dispatch) {
   if (!dispatch) return true;
   const blockStart = $from.before(blockDepth);
   const blockEnd = $from.after(blockDepth);
-  const wrapperEnd = $from.after(wrapperDepth);
-  const tr = state$1.tr;
   const blockSize = blockEnd - blockStart;
+  const tr = state$1.tr;
   tr.delete(blockStart, blockEnd);
-  const insertAt = wrapperEnd - blockSize;
-  tr.insert(insertAt, blockNode);
-  tr.setSelection(state.Selection.near(tr.doc.resolve(insertAt + 1)));
+  if (isLastItem) {
+    const insertAt = $from.after(wrapperDepth) - blockSize;
+    tr.insert(insertAt, blockNode);
+    tr.setSelection(state.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(state.Selection.near(tr.doc.resolve(splitPos + 2)));
+  }
   dispatch(tr.scrollIntoView());
   return true;
 }
@@ -10128,6 +10392,7 @@ exports.Editor = Editor;
 exports.EventEmitter = EventEmitter;
 exports.Extension = Extension;
 exports.ExtensionManager = ExtensionManager;
+exports.FLOATING_MENU_META = FLOATING_MENU_META;
 exports.FLOATING_MENU_NO_FOCUS = FLOATING_MENU_NO_FOCUS;
 exports.FloatingMenuController = FloatingMenuController;
 exports.Focus = Focus;
@@ -10188,13 +10453,16 @@ exports.createBubbleMenuPlugin = createBubbleMenuPlugin;
 exports.createCanChecker = createCanChecker;
 exports.createChainBuilder = createChainBuilder;
 exports.createDocument = createDocument;
+exports.createFloatingMenuPlugin = createFloatingMenuPlugin;
 exports.defaultBlockAt = defaultBlockAt;
 exports.defaultBubbleContexts = defaultBubbleContexts;
+exports.defaultFloatingMenuShouldShow = defaultFloatingMenuShouldShow;
 exports.defaultIcons = defaultIcons;
 exports.deleteSelection = deleteSelection;
 exports.findChildren = findChildren;
 exports.findListItemAncestorDepth = findListItemAncestorDepth;
 exports.findParentNode = findParentNode;
+exports.floatingMenuPluginKey = floatingMenuPluginKey;
 exports.focus = focus;
 exports.focusPluginKey = focusPluginKey;
 exports.generateHTML = generateHTML;
@@ -10203,6 +10471,7 @@ exports.generateText = generateText;
 exports.getListItemCursorContext = getListItemCursorContext;
 exports.getMarkRange = getMarkRange;
 exports.groupFloatingMenuItems = groupFloatingMenuItems;
+exports.hideFloatingMenu = hideFloatingMenu;
 exports.indentBlockAsListChild = indentBlockAsListChild;
 exports.inlineStyles = inlineStyles;
 exports.insertAsListItemChild = insertAsListItemChild;
@@ -10238,6 +10507,7 @@ exports.selectionDecorationPluginKey = selectionDecorationPluginKey;
 exports.setBlockType = setBlockType;
 exports.setContent = setContent;
 exports.setMark = setMark;
+exports.showFloatingMenu = showFloatingMenu;
 exports.splitListForInsert = splitListForInsert;
 exports.stripInlineColorConflicts = stripInlineColorConflicts;
 exports.textInputRule = textInputRule;