@domternal/core 0.9.0 → 0.10.0

package/README.md

@@ -21,14 +21,14 @@ See <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> for a ful
 - **Vue components** - composable `Domternal` component, `useEditor`/`useEditorState` composables, toolbar, bubble menu, floating menu, emoji picker, notion color picker, custom node views (Vue 3.3+)
 - **Vanilla wrapper** - framework-free class-based API for Astro, Svelte, Solid, plain HTML, and Web Components - editor, toolbar, bubble menu, floating menu, emoji picker, notion color picker
 - **Notion-style block UX** - drag-to-reorder, block context menu, slash command, smart paste, keyboard reorder, floating Table of Contents
-- **65+ extensions across 15 packages** - nodes, marks, and behavior extensions
-- **120+ chainable commands** - `editor.chain().focus().toggleBold().run()`
+- **70+ extensions across 16 packages** - nodes, marks, and behavior extensions
+- **125+ chainable commands** - `editor.chain().focus().toggleBold().run()`
 - **Full table support** - cell merging, column resize, row/column controls, cell toolbar, all free and MIT licensed
 - **Tree-shakeable** - import only what you use, your bundler strips the rest
 - **~44 KB gzipped** (own code), <u>[see Packages](https://domternal.dev/v1/packages)</u> for full bundle breakdown with ProseMirror
 - **TypeScript first** - 100% typed, zero `any`
 - **15,000+ tests** - 4,000+ unit and 11,000+ E2E across 230+ Playwright specs and 4 demo apps
-- **Light and dark theme** - 70+ CSS custom properties for full visual control
+- **Light and dark theme** - 120+ CSS custom properties for full visual control
 - **Inline styles export** - `getHTML({ styled: true })` produces inline CSS ready for email clients, CMS, and Google Docs
 - **SSR helpers** - `generateHTML`, `generateJSON`, `generateText` for server-side rendering
 

package/dist/index.cjs

@@ -1018,6 +1018,27 @@ var deleteSelection = () => ({ tr, dispatch }) => {
   dispatch(tr);
   return true;
 };
+var LIST_WRAPPER_TYPES = /* @__PURE__ */ new Set(["bulletList", "orderedList", "taskList"]);
+function isEmptyPlaceholderList(node) {
+  if (!LIST_WRAPPER_TYPES.has(node.type.name) || node.childCount !== 1) return false;
+  const item = node.child(0);
+  return item.childCount === 1 && item.child(0).type.name === "paragraph" && item.child(0).content.size === 0;
+}
+function stripFitterArtifacts(node) {
+  if (!node.isBlock || node.isLeaf) return node;
+  const children = [];
+  node.forEach((child) => children.push(stripFitterArtifacts(child)));
+  const kept = [];
+  children.forEach((cur, i) => {
+    const next = children[i + 1];
+    if (isEmptyPlaceholderList(cur) && next && LIST_WRAPPER_TYPES.has(next.type.name) && next.type !== cur.type) {
+      return;
+    }
+    kept.push(cur);
+  });
+  const unchanged = kept.length === node.childCount && kept.every((c, i) => c === node.child(i));
+  return unchanged ? node : node.copy(model.Fragment.fromArray(kept));
+}
 function isJSONContent(content) {
   return typeof content === "object" && content !== null && "type" in content && typeof content.type === "string";
 }
@@ -1040,7 +1061,7 @@ function parseHTMLContent(html, schema, options) {
   const element = document.createElement("div");
   element.innerHTML = html;
   const parser = model.DOMParser.fromSchema(schema);
-  return parser.parse(element, options?.parseOptions);
+  return stripFitterArtifacts(parser.parse(element, options?.parseOptions));
 }
 function createDocument(content, schema, options) {
   if (content === null || content === void 0 || content === "") {
@@ -4113,6 +4134,21 @@ function copyThemeClass(view, target) {
   });
 }
 
+// src/utils/refocusEditorAfterCommand.ts
+function refocusEditorAfterCommand(view) {
+  requestAnimationFrame(() => {
+    const ae = document.activeElement;
+    if (!ae) {
+      view.focus();
+      return;
+    }
+    if (ae.closest("[data-dm-editor-ui]") && !ae.closest(".dm-toolbar") && !ae.closest(".dm-bubble-menu") && !ae.closest(".dm-floating-menu") && !view.dom.contains(ae)) {
+      return;
+    }
+    view.focus();
+  });
+}
+
 // src/utils/defaultBubbleContexts.ts
 var NOTION_MODE_CLASS = "dm-notion-mode";
 var NOTION_TEXT_CONTEXT = Object.freeze([
@@ -4121,6 +4157,7 @@ var NOTION_TEXT_CONTEXT = Object.freeze([
   "underline",
   "strike",
   "code",
+  "mathInline",
   "|",
   "link",
   "|",
@@ -4132,6 +4169,7 @@ var STANDARD_TEXT_CONTEXT = Object.freeze([
   "underline",
   "strike",
   "code",
+  "mathInline",
   "|",
   "link"
 ]);
@@ -4143,12 +4181,12 @@ function defaultBubbleContexts(editor) {
 
 // src/utils/insertAsListItemChild.ts
 var LIST_ITEM_TYPES3 = /* @__PURE__ */ new Set(["listItem", "taskItem"]);
-var LIST_WRAPPER_TYPES = /* @__PURE__ */ new Set(["bulletList", "orderedList", "taskList"]);
+var LIST_WRAPPER_TYPES2 = /* @__PURE__ */ new Set(["bulletList", "orderedList", "taskList"]);
 function insertAsListItemChild(args) {
   const { tr, wrapperPos, targetItemPos, blockNode, sourceRange, childIndex } = args;
   if (wrapperPos < 0 || wrapperPos >= tr.doc.content.size) return { ok: false };
   const wrapper = tr.doc.nodeAt(wrapperPos);
-  if (!wrapper || !LIST_WRAPPER_TYPES.has(wrapper.type.name)) return { ok: false };
+  if (!wrapper || !LIST_WRAPPER_TYPES2.has(wrapper.type.name)) return { ok: false };
   if (wrapper.childCount === 0) return { ok: false };
   let targetItem;
   let targetItemStart;
@@ -5368,6 +5406,9 @@ var defaultIcons = {
   highlighterCircle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M201.54,54.46A104,104,0,0,0,54.46,201.54,104,104,0,0,0,201.54,54.46ZM96,210V152h64v58a88.33,88.33,0,0,1-64,0Zm48-74H112V100.94l32-16Zm46.22,54.22A88.09,88.09,0,0,1,176,201.77V152a16,16,0,0,0-16-16V72a8,8,0,0,0-11.58-7.16l-48,24A8,8,0,0,0,96,96v40a16,16,0,0,0-16,16v49.77a88,88,0,1,1,110.22-11.55Z"/></svg>',
   textSubscript: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M248,208a8,8,0,0,1-8,8H192a8,8,0,0,1-6.4-12.8l43.17-57.56a16,16,0,1,0-27.86-15,8,8,0,0,1-15.09-5.34,32.18,32.18,0,0,1,4.63-8.59,32,32,0,0,1,51.11,38.52L208,200h32A8,8,0,0,1,248,208ZM149.24,50a8,8,0,0,0-11.29.81L92,103.78l-45.95-53A8,8,0,0,0,34,61.24L81.41,116,34,170.76a8,8,0,0,0,12.1,10.48l46-53,45.95,53a8,8,0,1,0,12.1-10.48L102.59,116l47.46-54.76A8,8,0,0,0,149.24,50Z"/></svg>',
   textSuperscript: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M248,144a8,8,0,0,1-8,8H192a8,8,0,0,1-6.4-12.8l43.17-57.55a16,16,0,1,0-27.86-15,8,8,0,0,1-15.09-5.33,32,32,0,1,1,55.74,29.92L208,136h32A8,8,0,0,1,248,144ZM149.24,74a8,8,0,0,0-11.29.8L92,127.79l-45.95-53A8,8,0,0,0,34,85.24L81.41,140,34,194.76a8,8,0,0,0,12.1,10.48l46-53,45.95,53a8,8,0,1,0,12.1-10.48L102.59,140l47.46-54.76A8,8,0,0,0,149.24,74Z"/></svg>',
+  // --- Math ---
+  sigma: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="none" stroke="currentColor" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"><path d="M196 56H64l64 72-64 72h132"/></svg>',
+  radical: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="none" stroke="currentColor" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"><path d="M24 150 L66 200 L118 56 L236 56 M150 98 L204 156 M204 98 L150 156"/></svg>',
   link: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,16,.45A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z"/></svg>',
   // --- Format: Block ---
   paragraph: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M208,40H96a64,64,0,0,0,0,128h40v40a8,8,0,0,0,16,0V56h24V208a8,8,0,0,0,16,0V56h16a8,8,0,0,0,0-16ZM136,152H96a48,48,0,0,1,0-96h40Z"/></svg>',
@@ -5929,6 +5970,50 @@ var CodeBlock = Node2.create({
     ];
   }
 });
+var LIST_ITEM_TYPES4 = /* @__PURE__ */ new Set(["listItem", "taskItem"]);
+function liftCrossTypeListItem(state$1, dispatch) {
+  const { $from } = state$1.selection;
+  if (!state$1.selection.empty) return false;
+  let itemDepth = -1;
+  for (let d = $from.depth; d > 0; d--) {
+    if (LIST_ITEM_TYPES4.has($from.node(d).type.name)) {
+      itemDepth = d;
+      break;
+    }
+  }
+  if (itemDepth < 4) return false;
+  const item = $from.node(itemDepth);
+  const wrapper = $from.node(itemDepth - 1);
+  const parentItem = $from.node(itemDepth - 2);
+  if (!LIST_ITEM_TYPES4.has(parentItem.type.name)) return false;
+  if (parentItem.type === item.type) return false;
+  const parentWrapper = $from.node(itemDepth - 3);
+  const grandParent = $from.node(itemDepth - 4);
+  const gpIndex = $from.index(itemDepth - 4);
+  if (!grandParent.canReplaceWith(gpIndex + 1, gpIndex + 1, wrapper.type)) return false;
+  if (!dispatch) return true;
+  const onlyChild = wrapper.childCount === 1;
+  const removeFrom = onlyChild ? $from.before(itemDepth - 1) : $from.before(itemDepth);
+  const removeTo = onlyChild ? $from.after(itemDepth - 1) : $from.after(itemDepth);
+  const parentIsLast = $from.index(itemDepth - 3) === parentWrapper.childCount - 1;
+  const tr = state$1.tr;
+  tr.delete(removeFrom, removeTo);
+  const newList = wrapper.type.create(wrapper.attrs, item);
+  if (parentIsLast) {
+    const insertAt = tr.mapping.map($from.after(itemDepth - 3));
+    tr.insert(insertAt, newList);
+    tr.setSelection(state.Selection.near(tr.doc.resolve(insertAt + 2)));
+  } else {
+    const splitAt = tr.mapping.map($from.after(itemDepth - 2));
+    tr.split(splitAt, 1);
+    tr.insert(splitAt + 1, newList);
+    tr.setSelection(state.Selection.near(tr.doc.resolve(splitAt + 2)));
+  }
+  dispatch(tr.scrollIntoView());
+  return true;
+}
+
+// src/extensions/ListKeymap.ts
 var LIST_GROUP_TYPES = /* @__PURE__ */ new Set(["bulletList", "orderedList", "taskList"]);
 function getListItemContext(editor, listItemName) {
   const { state, view } = editor;
@@ -5970,6 +6055,7 @@ var ListKeymap = Extension.create({
         if (!this.editor) return false;
         const ctx = getListItemContext(this.editor, this.options.listItem);
         if (!ctx) return false;
+        if (liftCrossTypeListItem(ctx.state, ctx.view.dispatch)) return true;
         return schemaList.liftListItem(ctx.listItemType)(ctx.state, ctx.view.dispatch);
       },
       // Backspace at start of list item to lift
@@ -6023,6 +6109,7 @@ var ListKeymap = Extension.create({
         if (firstChild?.isTextblock) {
           const posInListItem = $from.pos - $from.start(listItemDepth);
           if (posInListItem <= 1) {
+            if (liftCrossTypeListItem(state$1, view.dispatch)) return true;
             return schemaList.liftListItem(listItemType)(state$1, view.dispatch);
           }
         }
@@ -6069,7 +6156,22 @@ var ListItem = Node2.create({
             if (commands.splitBlock(state$1, view.dispatch)) return true;
           }
         }
-        if (schemaList.splitListItem(this.nodeType)(state$1, view.dispatch)) return true;
+        const item = $from.node(-1);
+        const hasChildren = item.childCount > 1;
+        const atEnd = $from.parentOffset === $from.parent.content.size;
+        const labelEmpty = $from.parent.content.size === 0;
+        if (!ctx?.isInChildrenZone && hasChildren && atEnd && !labelEmpty) {
+          const newItem = this.nodeType.createAndFill();
+          if (newItem) {
+            const insertAt = $from.after($from.depth - 1);
+            const tr = state$1.tr.insert(insertAt, newItem);
+            tr.setSelection(state.Selection.near(tr.doc.resolve(insertAt + 2)));
+            view.dispatch(tr.scrollIntoView());
+            return true;
+          }
+        }
+        const skipSplit = !ctx?.isInChildrenZone && labelEmpty && hasChildren;
+        if (!skipSplit && schemaList.splitListItem(this.nodeType)(state$1, view.dispatch)) return true;
         const listDepth = $from.depth - 2;
         const taskItemType = state$1.schema.nodes["taskItem"];
         if ($from.parent.content.size === 0 && listDepth > 0 && taskItemType && $from.node(listDepth - 1).type === taskItemType) {
@@ -6078,9 +6180,9 @@ var ListItem = Node2.create({
           tr.delete($from.before(delDepth), $from.after(delDepth));
           const taskItemDepth = listDepth - 1;
           const end = tr.mapping.map($from.after(taskItemDepth));
-          const item = taskItemType.createAndFill();
-          if (item) {
-            tr.insert(end, item);
+          const item2 = taskItemType.createAndFill();
+          if (item2) {
+            tr.insert(end, item2);
             tr.setSelection(state.Selection.near(tr.doc.resolve(end + 2)));
             view.dispatch(tr.scrollIntoView());
             return true;
@@ -6209,16 +6311,20 @@ var OrderedList = Node2.create({
     return {
       start: {
         default: 1,
+        // Clamp to a finite integer >= 1. Without this, a malformed
+        // `start="abc"` parses to NaN; `JSON.stringify(NaN)` is `null`, so
+        // getJSON() serializes `start: null` and a save/load cycle
+        // permanently dirties the document (reloads as `<ol start="null">`).
         parseHTML: (element) => {
-          const start = element.getAttribute("start");
-          return start ? parseInt(start, 10) : 1;
+          const n = parseInt(element.getAttribute("start") ?? "", 10);
+          return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 1;
         },
         renderHTML: (attributes) => {
           const start = attributes["start"];
-          if (start === 1) {
+          if (!Number.isFinite(start) || start <= 1) {
             return {};
           }
-          return { start: String(start) };
+          return { start: String(Math.floor(start)) };
         }
       }
     };
@@ -6297,8 +6403,8 @@ var OrderedList = Node2.create({
         guard: notInsideList,
         joinForward: true,
         getAttributes: (match) => {
-          const num = match[1];
-          return { start: num ? parseInt(num, 10) : 1 };
+          const n = parseInt(match[1] ?? "", 10);
+          return { start: Number.isFinite(n) && n >= 1 ? Math.floor(n) : 1 };
         }
       })
     ];
@@ -6570,7 +6676,10 @@ var TaskItem = Node2.create({
         keepOnSplit: false,
         parseHTML: (element) => {
           const dataChecked = element.getAttribute("data-checked");
-          return dataChecked === "true" || dataChecked === "";
+          if (dataChecked !== null) {
+            return dataChecked.toLowerCase() === "true" || dataChecked === "";
+          }
+          return element.querySelector('input[type="checkbox"]')?.hasAttribute("checked") ?? false;
         },
         renderHTML: (attributes) => ({
           "data-checked": attributes["checked"] ? "true" : "false"
@@ -6583,6 +6692,14 @@ var TaskItem = Node2.create({
       {
         tag: `li[data-type="${this.name}"]`,
         priority: 51
+      },
+      // GFM / markdown task lists: `<li class="task-list-item">` carries no
+      // data-type. Priority 51 keeps it ahead of the generic `li` (listItem,
+      // 50); class-scoped so it never swallows ordinary bullet items. The
+      // `checked` attribute is derived from the descendant `<input>` above.
+      {
+        tag: "li.task-list-item",
+        priority: 51
       }
     ];
   },
@@ -6668,7 +6785,22 @@ var TaskItem = Node2.create({
             return true;
           }
         }
-        if (schemaList.splitListItem(this.nodeType, { checked: false })(state$1, view.dispatch)) return true;
+        const item = $from.node(-1);
+        const hasChildren = item.childCount > 1;
+        const labelEmpty = $from.parent.content.size === 0;
+        const atEnd = $from.parentOffset === $from.parent.content.size;
+        if (!ctx?.isInChildrenZone && hasChildren && atEnd && !labelEmpty) {
+          const newItem = this.nodeType.createAndFill({ checked: false });
+          if (newItem) {
+            const insertAt = $from.after($from.depth - 1);
+            const tr = state$1.tr.insert(insertAt, newItem);
+            tr.setSelection(state.Selection.near(tr.doc.resolve(insertAt + 2)));
+            view.dispatch(tr.scrollIntoView());
+            return true;
+          }
+        }
+        const skipSplit = !ctx?.isInChildrenZone && labelEmpty && hasChildren;
+        if (!skipSplit && 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"];
           if (listItemType) {
@@ -6715,9 +6847,11 @@ var TaskItem = Node2.create({
       },
       "Shift-Tab": () => {
         if (!this.editor || !this.nodeType) return false;
-        const { $from } = this.editor.state.selection;
+        const { state, view } = this.editor;
+        const { $from } = state.selection;
         if ($from.depth < 1 || $from.node(-1).type !== this.nodeType) return false;
-        return schemaList.liftListItem(this.nodeType)(this.editor.state, this.editor.view.dispatch);
+        if (liftCrossTypeListItem(state, view.dispatch)) return true;
+        return schemaList.liftListItem(this.nodeType)(state, view.dispatch);
       },
       Backspace: () => {
         if (!this.editor || !this.nodeType) return false;
@@ -6739,6 +6873,7 @@ var TaskItem = Node2.create({
         }
         if (taskItemDepth === -1) return false;
         if ($from.index(taskItemDepth) !== 0) return false;
+        if (liftCrossTypeListItem(state, view.dispatch)) return true;
         return schemaList.liftListItem(this.nodeType)(state, view.dispatch);
       },
       "Mod-Enter": () => {
@@ -6765,6 +6900,13 @@ var TaskList = Node2.create({
         tag: `ul[data-type="${this.name}"]`,
         priority: 51
         // Higher priority than regular bulletList
+      },
+      // GFM / markdown task lists: `<ul class="contains-task-list">`. Priority
+      // 51 keeps it ahead of the generic `ul` (bulletList, 50); class-scoped so
+      // it only matches real GFM task-list containers, not ordinary bullets.
+      {
+        tag: "ul.contains-task-list",
+        priority: 51
       }
     ];
   },
@@ -8025,12 +8167,12 @@ var Placeholder = Extension.create({
     ];
   }
 });
-var LIST_ITEM_TYPES4 = /* @__PURE__ */ new Set(["listItem", "taskItem"]);
-var LIST_WRAPPER_TYPES2 = /* @__PURE__ */ new Set(["bulletList", "orderedList", "taskList"]);
+var LIST_ITEM_TYPES5 = /* @__PURE__ */ new Set(["listItem", "taskItem"]);
+var LIST_WRAPPER_TYPES3 = /* @__PURE__ */ new Set(["bulletList", "orderedList", "taskList"]);
 function isCursorInsideListItem(state) {
   const { $from } = state.selection;
   for (let d = $from.depth; d > 0; d--) {
-    if (LIST_ITEM_TYPES4.has($from.node(d).type.name)) return true;
+    if (LIST_ITEM_TYPES5.has($from.node(d).type.name)) return true;
   }
   return false;
 }
@@ -8061,7 +8203,7 @@ function indentBlockAsListChild(state$1, dispatch) {
   }
   if (blockIndex === 0) return false;
   const prevSibling = state$1.doc.child(blockIndex - 1);
-  if (!LIST_WRAPPER_TYPES2.has(prevSibling.type.name)) return false;
+  if (!LIST_WRAPPER_TYPES3.has(prevSibling.type.name)) return false;
   let wrapperPos = 0;
   for (let i = 0; i < blockIndex - 1; i++) {
     wrapperPos += state$1.doc.child(i).nodeSize;
@@ -8085,7 +8227,7 @@ function outdentBlockFromListItem(state$1, dispatch) {
   const { $from } = selection;
   let listItemDepth = -1;
   for (let d = $from.depth; d > 0; d--) {
-    if (LIST_ITEM_TYPES4.has($from.node(d).type.name)) {
+    if (LIST_ITEM_TYPES5.has($from.node(d).type.name)) {
       listItemDepth = d;
       break;
     }
@@ -8865,7 +9007,7 @@ var BlockColor = Extension.create({
     };
   }
 });
-var Selection4 = Extension.create({
+var Selection5 = Extension.create({
   name: "selection",
   addStorage() {
     return {
@@ -10419,7 +10561,7 @@ exports.NotionColorPicker = NotionColorPicker;
 exports.OrderedList = OrderedList;
 exports.Paragraph = Paragraph;
 exports.Placeholder = Placeholder;
-exports.Selection = Selection4;
+exports.Selection = Selection5;
 exports.SelectionDecoration = SelectionDecoration;
 exports.StarterKit = StarterKit;
 exports.Strike = Strike;
@@ -10500,6 +10642,7 @@ exports.outdentBlockFromListItem = outdentBlockFromListItem;
 exports.placeholderPluginKey = placeholderPluginKey;
 exports.positionFloating = positionFloating;
 exports.positionFloatingOnce = positionFloatingOnce;
+exports.refocusEditorAfterCommand = refocusEditorAfterCommand;
 exports.resetAttributes = resetAttributes;
 exports.selectAll = selectAll;
 exports.selectNodeBackward = selectNodeBackward;