@domternal/extension-details 0.2.0

package/dist/index.cjs

@@ -0,0 +1,656 @@
+'use strict';
+
+var core = require('@domternal/core');
+var state = require('@domternal/pm/state');
+var gapcursor = require('@domternal/pm/gapcursor');
+
+// src/Details.ts
+
+// src/helpers/isNodeVisible.ts
+var isNodeVisible = (position, editor) => {
+  let node = editor.view.domAtPos(position).node;
+  while (node && !(node instanceof HTMLElement)) {
+    node = node.parentNode;
+  }
+  if (!node) return false;
+  return node.offsetParent !== null;
+};
+
+// src/helpers/findClosestVisibleNode.ts
+var findClosestVisibleNode = ($pos, predicate, editor) => {
+  for (let i = $pos.depth; i > 0; i--) {
+    const node = $pos.node(i);
+    const match = predicate(node);
+    const visible = isNodeVisible($pos.start(i), editor);
+    if (match && visible) {
+      return {
+        pos: i > 0 ? $pos.before(i) : 0,
+        start: $pos.start(i),
+        depth: i,
+        node
+      };
+    }
+  }
+  return void 0;
+};
+var setGapCursor = (editor, direction) => {
+  const { state, view } = editor;
+  const { schema, selection } = state;
+  const { empty, $anchor } = selection;
+  const summaryType = schema.nodes["detailsSummary"];
+  const detailsType = schema.nodes["details"];
+  const contentType = schema.nodes["detailsContent"];
+  const hasGapCursor = editor.extensionManager?.extensions.some(
+    (ext) => ext.name === "gapcursor" || ext.name === "gapCursor"
+  );
+  if (!empty || $anchor.parent.type !== summaryType || !hasGapCursor) {
+    return false;
+  }
+  if (direction === "right" && $anchor.parentOffset !== $anchor.parent.nodeSize - 2) {
+    return false;
+  }
+  const details = core.findParentNode((node) => node.type === detailsType)(selection);
+  if (!details) return false;
+  const detailsContent = core.findChildren(details.node, (node) => node.type === contentType);
+  if (!detailsContent.length) return false;
+  const firstContent = detailsContent[0];
+  if (!firstContent) return false;
+  const isOpen = isNodeVisible(details.start + firstContent.pos + 1, editor);
+  if (isOpen) return false;
+  const $position = state.doc.resolve(details.pos + details.node.nodeSize);
+  const found = gapcursor.GapCursor.findFrom($position, 1, false);
+  if (!found) return false;
+  const { tr } = state;
+  const gapCursorSelection = new gapcursor.GapCursor(found.$from);
+  tr.setSelection(gapCursorSelection);
+  tr.scrollIntoView();
+  view.dispatch(tr);
+  return true;
+};
+var DetailsSummary = core.Node.create({
+  name: "detailsSummary",
+  content: "inline*",
+  defining: true,
+  selectable: false,
+  isolating: true,
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  parseHTML() {
+    return [{ tag: "summary" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["summary", { ...this.options.HTMLAttributes, ...HTMLAttributes }, 0];
+  }
+});
+var DetailsContent = core.Node.create({
+  name: "detailsContent",
+  content: "block+",
+  defining: true,
+  selectable: false,
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  parseHTML() {
+    return [
+      { tag: "div[data-details-content]" },
+      { tag: 'div[data-type="detailsContent"]' }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      { ...this.options.HTMLAttributes, ...HTMLAttributes, "data-details-content": "" },
+      0
+    ];
+  },
+  addNodeView() {
+    const options = this.options;
+    return () => {
+      const dom = document.createElement("div");
+      dom.setAttribute("data-details-content", "");
+      dom.setAttribute("hidden", "hidden");
+      for (const [key, value] of Object.entries(options.HTMLAttributes)) {
+        if (value !== null && value !== void 0) {
+          dom.setAttribute(key, typeof value === "string" ? value : JSON.stringify(value));
+        }
+      }
+      dom.addEventListener("toggleDetailsContent", () => {
+        dom.toggleAttribute("hidden");
+      });
+      return {
+        dom,
+        contentDOM: dom,
+        ignoreMutation(mutation) {
+          if (mutation.type === "selection") {
+            return false;
+          }
+          return !dom.contains(mutation.target) || dom === mutation.target;
+        },
+        update: (updatedNode) => {
+          if (updatedNode.type.name !== "detailsContent") {
+            return false;
+          }
+          return true;
+        }
+      };
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      // Double-Enter escape: when pressing Enter on the last empty block
+      // inside details content, escape out and create a new block after details
+      Enter: () => {
+        const editor = this.editor;
+        if (!editor) return false;
+        const { state: state$1, view } = editor;
+        const { selection } = state$1;
+        const { $from, empty } = selection;
+        const detailsContent = core.findParentNode(
+          (node2) => node2.type === state$1.schema.nodes["detailsContent"]
+        )(selection);
+        if (!empty || !detailsContent?.node.childCount) {
+          return false;
+        }
+        const fromIndex = $from.index(detailsContent.depth);
+        const { childCount } = detailsContent.node;
+        const isAtEnd = childCount === fromIndex + 1;
+        if (!isAtEnd) {
+          return false;
+        }
+        const defaultChildType = detailsContent.node.type.contentMatch.defaultType;
+        const defaultChildNode = defaultChildType?.createAndFill();
+        if (!defaultChildNode) {
+          return false;
+        }
+        const $childPos = state$1.doc.resolve(detailsContent.pos + 1);
+        const lastChildIndex = childCount - 1;
+        const lastChildNode = detailsContent.node.child(lastChildIndex);
+        const lastChildPos = $childPos.posAtIndex(lastChildIndex, detailsContent.depth);
+        const lastChildNodeIsEmpty = lastChildNode.eq(defaultChildNode);
+        if (!lastChildNodeIsEmpty) {
+          return false;
+        }
+        const above = $from.node(-3);
+        const after = $from.indexAfter(-3);
+        const type = core.defaultBlockAt(above.contentMatchAt(after));
+        if (!type || !above.canReplaceWith(after, after, type)) {
+          return false;
+        }
+        const node = type.createAndFill();
+        if (!node) {
+          return false;
+        }
+        const { tr } = state$1;
+        const pos = $from.after(-2);
+        tr.replaceWith(pos, pos, node);
+        const $pos = tr.doc.resolve(pos);
+        const newSelection = state.Selection.near($pos, 1);
+        tr.setSelection(newSelection);
+        const deleteFrom = lastChildPos;
+        const deleteTo = lastChildPos + lastChildNode.nodeSize;
+        tr.delete(deleteFrom, deleteTo);
+        tr.scrollIntoView();
+        view.dispatch(tr);
+        return true;
+      }
+    };
+  }
+});
+
+// src/Details.ts
+var detailsSelectionPluginKey = new state.PluginKey("detailsSelection");
+var Details = core.Node.create({
+  name: "details",
+  group: "block",
+  content: "detailsSummary detailsContent",
+  defining: true,
+  isolating: true,
+  allowGapCursor: false,
+  addOptions() {
+    return {
+      persist: false,
+      openClassName: "is-open",
+      HTMLAttributes: {}
+    };
+  },
+  addAttributes() {
+    if (!this.options.persist) {
+      return {};
+    }
+    return {
+      open: {
+        default: false,
+        parseHTML: (element) => element.hasAttribute("open"),
+        renderHTML: (attrs) => {
+          if (!attrs["open"]) {
+            return {};
+          }
+          return { open: "" };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      { tag: "details" },
+      { tag: 'div[data-type="details"]' }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["details", { ...this.options.HTMLAttributes, ...HTMLAttributes }, 0];
+  },
+  addNodeView() {
+    const options = this.options;
+    const editor = this.editor;
+    const nodeType = this.nodeType;
+    return (node, _view, getPos) => {
+      const dom = document.createElement("div");
+      dom.setAttribute("data-type", "details");
+      for (const [key, value] of Object.entries(options.HTMLAttributes)) {
+        if (value !== null && value !== void 0) {
+          dom.setAttribute(key, typeof value === "string" ? value : JSON.stringify(value));
+        }
+      }
+      const toggle = document.createElement("button");
+      toggle.type = "button";
+      toggle.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+      });
+      dom.append(toggle);
+      const content = document.createElement("div");
+      dom.append(content);
+      const toggleDetailsContent = (setToValue) => {
+        const isOpen = dom.classList.contains(options.openClassName);
+        if (setToValue !== void 0 && setToValue === isOpen) return;
+        dom.classList.toggle(options.openClassName, setToValue);
+        content.querySelector(":scope > div[data-details-content]")?.dispatchEvent(new Event("toggleDetailsContent"));
+      };
+      if (node.attrs["open"]) {
+        setTimeout(() => {
+          toggleDetailsContent();
+        });
+      }
+      toggle.addEventListener("click", () => {
+        toggleDetailsContent();
+        if (!options.persist) {
+          if (editor) {
+            editor.commands["focus"]?.();
+          }
+          return;
+        }
+        if (editor && typeof getPos === "function") {
+          const pos = getPos();
+          if (pos === void 0) return;
+          const { state: state$1, view } = editor;
+          const { from, to } = state$1.selection;
+          const currentNode = state$1.doc.nodeAt(pos);
+          if (currentNode?.type !== nodeType) return;
+          const tr = state$1.tr.setNodeMarkup(pos, void 0, {
+            open: !currentNode.attrs["open"]
+          });
+          tr.setSelection(state.TextSelection.create(tr.doc, from, to));
+          view.dispatch(tr);
+          editor.commands["focus"]?.();
+        }
+      });
+      return {
+        dom,
+        contentDOM: content,
+        ignoreMutation(mutation) {
+          if (mutation.type === "selection") {
+            return false;
+          }
+          return !dom.contains(mutation.target) || dom === mutation.target;
+        },
+        update: (updatedNode) => {
+          if (updatedNode.type !== nodeType) {
+            return false;
+          }
+          if (updatedNode.attrs["open"] !== void 0) {
+            toggleDetailsContent(updatedNode.attrs["open"]);
+          }
+          return true;
+        }
+      };
+    };
+  },
+  addToolbarItems() {
+    return [
+      {
+        type: "button",
+        name: "details",
+        command: "toggleDetails",
+        isActive: "details",
+        icon: "caretCircleRight",
+        label: "Toggle Details",
+        group: "insert",
+        priority: 100
+      }
+    ];
+  },
+  addExtensions() {
+    return [DetailsSummary, DetailsContent];
+  },
+  addCommands() {
+    return {
+      setDetails: () => ({ state: state$1, tr, dispatch }) => {
+        const { schema } = state$1;
+        const { $from, $to } = tr.selection;
+        const range = $from.blockRange($to);
+        if (!range) return false;
+        const detailsType = schema.nodes["details"];
+        const summaryType = schema.nodes["detailsSummary"];
+        const contentType = schema.nodes["detailsContent"];
+        if (!detailsType || !summaryType || !contentType) return false;
+        for (let d = $from.depth; d > 0; d--) {
+          if ($from.node(d).type === detailsType) return false;
+        }
+        if (!dispatch) return true;
+        const selectedContent = [];
+        for (let i = range.startIndex; i < range.endIndex; i++) {
+          selectedContent.push(range.parent.child(i));
+        }
+        if (selectedContent.length === 0) return false;
+        const summary = summaryType.create(null);
+        const content = contentType.create(null, selectedContent);
+        const details = detailsType.create(null, [summary, content]);
+        tr.replaceWith(range.start, range.end, details);
+        tr.setSelection(state.TextSelection.create(tr.doc, range.start + 2));
+        dispatch(tr.scrollIntoView());
+        return true;
+      },
+      unsetDetails: () => ({ state: state$1, tr, dispatch }) => {
+        const { schema } = state$1;
+        const detailsType = schema.nodes["details"];
+        if (!detailsType) return false;
+        const details = core.findParentNode(
+          (node) => node.type === detailsType
+        )(tr.selection);
+        if (!details) return false;
+        if (!dispatch) return true;
+        const summaries = core.findChildren(
+          details.node,
+          (node) => node.type === schema.nodes["detailsSummary"]
+        );
+        const contents = core.findChildren(
+          details.node,
+          (node) => node.type === schema.nodes["detailsContent"]
+        );
+        if (!summaries.length || !contents.length) return false;
+        const detailsSummary = summaries[0];
+        const detailsContent = contents[0];
+        if (!detailsSummary || !detailsContent) return false;
+        const from = details.pos;
+        const $from = state$1.doc.resolve(from);
+        const to = from + details.node.nodeSize;
+        const defaultType = $from.parent.type.contentMatch.defaultType;
+        const blocks = [];
+        if (defaultType && detailsSummary.node.content.size > 0) {
+          blocks.push(defaultType.create(null, detailsSummary.node.content));
+        }
+        detailsContent.node.forEach((child) => blocks.push(child));
+        tr.replaceWith(from, to, blocks);
+        tr.setSelection(state.TextSelection.create(tr.doc, from + 1));
+        dispatch(tr.scrollIntoView());
+        return true;
+      },
+      toggleDetails: () => ({ state: state$1, tr, dispatch }) => {
+        const { schema } = state$1;
+        const detailsType = schema.nodes["details"];
+        const summaryType = schema.nodes["detailsSummary"];
+        const contentType = schema.nodes["detailsContent"];
+        if (!detailsType || !summaryType || !contentType) return false;
+        const wrapInDetails = (t, $from, $to) => {
+          const range = $from.blockRange($to);
+          if (!range) return -1;
+          for (let d = $from.depth; d > 0; d--) {
+            if ($from.node(d).type === detailsType) return -1;
+          }
+          const blocks = [];
+          for (let i = range.startIndex; i < range.endIndex; i++) {
+            blocks.push(range.parent.child(i));
+          }
+          if (blocks.length === 0) return -1;
+          const summary = summaryType.create(null);
+          const content = contentType.create(null, blocks);
+          t.replaceWith(range.start, range.end, detailsType.create(null, [summary, content]));
+          return range.start;
+        };
+        const unwrapDetails = (t, details) => {
+          const sums = core.findChildren(details.node, (n) => n.type === summaryType);
+          const conts = core.findChildren(details.node, (n) => n.type === contentType);
+          if (!sums.length || !conts.length) return -1;
+          const detailsSummary = sums[0];
+          const detailsContent = conts[0];
+          if (!detailsSummary || !detailsContent) return -1;
+          const from = details.pos;
+          const $f = t.doc.resolve(from);
+          const to = from + details.node.nodeSize;
+          const defaultType = $f.parent.type.contentMatch.defaultType;
+          const result = [];
+          if (defaultType && detailsSummary.node.content.size > 0) {
+            result.push(defaultType.create(null, detailsSummary.node.content));
+          }
+          detailsContent.node.forEach((child) => result.push(child));
+          t.replaceWith(from, to, result);
+          return from;
+        };
+        const { ranges } = state$1.selection;
+        if (ranges.length <= 1) {
+          const { $from } = state$1.selection;
+          for (let d = $from.depth; d > 0; d--) {
+            if ($from.node(d).type === detailsType) {
+              if (!dispatch) return true;
+              const details = core.findParentNode((n) => n.type === detailsType)(tr.selection);
+              if (!details) return false;
+              const pos2 = unwrapDetails(tr, details);
+              if (pos2 < 0) return false;
+              tr.setSelection(state.TextSelection.create(tr.doc, pos2 + 1));
+              dispatch(tr.scrollIntoView());
+              return true;
+            }
+          }
+          if (!dispatch) return true;
+          const pos = wrapInDetails(tr, tr.selection.$from, tr.selection.$to);
+          if (pos < 0) return false;
+          tr.setSelection(state.TextSelection.create(tr.doc, pos + 2));
+          dispatch(tr.scrollIntoView());
+          return true;
+        }
+        const cellHasDetails = (doc, from) => {
+          const $f = doc.resolve(from);
+          const cell = $f.parent;
+          return cell.childCount === 1 && cell.firstChild?.type === detailsType;
+        };
+        const cells = ranges.map((r) => ({ from: r.$from.pos, to: r.$to.pos })).sort((a, b) => b.from - a.from);
+        const allInDetails = cells.every((c) => cellHasDetails(state$1.doc, c.from));
+        if (!dispatch) return true;
+        for (const cell of cells) {
+          const from = tr.mapping.map(cell.from);
+          const to = tr.mapping.map(cell.to);
+          if (allInDetails) {
+            const detailsNode = tr.doc.nodeAt(from);
+            if (detailsNode?.type === detailsType) {
+              unwrapDetails(tr, { pos: from, node: detailsNode });
+            }
+          } else {
+            if (cellHasDetails(tr.doc, from)) continue;
+            const $f = tr.doc.resolve(from);
+            const $to2 = tr.doc.resolve(to);
+            wrapInDetails(tr, $f, $to2);
+          }
+        }
+        dispatch(tr.scrollIntoView());
+        return true;
+      },
+      openDetails: () => ({ commands }) => commands.setDetailsOpen(true),
+      closeDetails: () => ({ commands }) => commands.setDetailsOpen(false),
+      setDetailsOpen: (open) => ({ state, tr, dispatch }) => {
+        if (!this.options.persist) return false;
+        const detailsType = state.schema.nodes["details"];
+        if (!detailsType) return false;
+        const details = core.findParentNode(
+          (node) => node.type === detailsType
+        )(state.selection);
+        if (!details) return false;
+        if (!!details.node.attrs["open"] === open) return false;
+        if (dispatch) {
+          tr.setNodeMarkup(details.pos, void 0, {
+            ...details.node.attrs,
+            open
+          });
+          dispatch(tr);
+        }
+        return true;
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () => {
+        const editor = this.editor;
+        if (!editor) return false;
+        const { schema, selection } = editor.state;
+        const { empty, $anchor } = selection;
+        const summaryType = schema.nodes["detailsSummary"];
+        if (!empty || !summaryType || $anchor.parent.type !== summaryType) {
+          return false;
+        }
+        if ($anchor.parentOffset !== 0) {
+          const { tr } = editor.state;
+          tr.delete($anchor.pos - 1, $anchor.pos);
+          editor.view.dispatch(tr);
+          return true;
+        }
+        return editor.commands["unsetDetails"]?.() ?? false;
+      },
+      Enter: () => {
+        const editor = this.editor;
+        if (!editor) return false;
+        const { state: state$1, view } = editor;
+        const { schema, selection } = state$1;
+        const { $head } = selection;
+        const summaryType = schema.nodes["detailsSummary"];
+        if (!summaryType || $head.parent.type !== summaryType) {
+          return false;
+        }
+        const isVisible = isNodeVisible($head.after() + 1, editor);
+        if (!isVisible) {
+          const detailsPos = $head.before(-1);
+          const detailsDom = view.nodeDOM(detailsPos);
+          if (detailsDom instanceof HTMLElement) {
+            detailsDom.classList.add(this.options.openClassName);
+            const contentEl = detailsDom.querySelector("[data-details-content]");
+            if (contentEl) {
+              contentEl.dispatchEvent(new Event("toggleDetailsContent"));
+            }
+          }
+          if (this.options.persist) {
+            const detailsNode = state$1.doc.nodeAt(detailsPos);
+            if (detailsNode) {
+              const { tr: tr2 } = state$1;
+              tr2.setNodeMarkup(detailsPos, void 0, {
+                ...detailsNode.attrs,
+                open: true
+              });
+              const contentStartPos = $head.after() + 1;
+              tr2.setSelection(state.Selection.near(tr2.doc.resolve(contentStartPos), 1));
+              tr2.scrollIntoView();
+              view.dispatch(tr2);
+              return true;
+            }
+          }
+        }
+        const above = state$1.doc.nodeAt($head.after());
+        if (!above) return false;
+        const type = core.defaultBlockAt(above.contentMatchAt(0));
+        if (!type || !above.canReplaceWith(0, 0, type)) {
+          return false;
+        }
+        const node = type.createAndFill();
+        if (!node) return false;
+        const pos = $head.after() + 1;
+        const tr = state$1.tr.replaceWith(pos, pos, node);
+        const $pos = tr.doc.resolve(pos);
+        const newSelection = state.Selection.near($pos, 1);
+        tr.setSelection(newSelection);
+        tr.setMeta("detailsEnterOpen", true);
+        tr.scrollIntoView();
+        view.dispatch(tr);
+        return true;
+      },
+      ArrowRight: () => {
+        const editor = this.editor;
+        if (!editor) return false;
+        return setGapCursor(editor, "right");
+      },
+      ArrowDown: () => {
+        const editor = this.editor;
+        if (!editor) return false;
+        return setGapCursor(editor, "down");
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    const editor = this.editor;
+    const nodeType = this.nodeType;
+    return [
+      // Prevent text selections within hidden content
+      new state.Plugin({
+        key: detailsSelectionPluginKey,
+        appendTransaction: (transactions, oldState, newState) => {
+          if (!editor) return;
+          const isComposing = editor.view.composing;
+          if (isComposing) return;
+          const selectionSet = transactions.some((t) => t.selectionSet);
+          if (!selectionSet || !oldState.selection.empty || !newState.selection.empty) {
+            return;
+          }
+          if (transactions.some((t) => t.getMeta("detailsEnterOpen"))) {
+            return;
+          }
+          if (!nodeType) return;
+          const { $from } = newState.selection;
+          let inDetails = false;
+          for (let d = $from.depth; d > 0; d--) {
+            if ($from.node(d).type === nodeType) {
+              inDetails = true;
+              break;
+            }
+          }
+          if (!inDetails) return;
+          const visible = isNodeVisible($from.pos, editor);
+          if (visible) return;
+          const details = findClosestVisibleNode(
+            $from,
+            (node) => node.type === nodeType,
+            editor
+          );
+          if (!details) return;
+          const detailsSummaries = core.findChildren(
+            details.node,
+            (node) => node.type === newState.schema.nodes["detailsSummary"]
+          );
+          if (!detailsSummaries.length) return;
+          const detailsSummary = detailsSummaries[0];
+          if (!detailsSummary) return;
+          const selectionDirection = oldState.selection.from < newState.selection.from ? "forward" : "backward";
+          const correctedPosition = selectionDirection === "forward" ? details.start + detailsSummary.pos : details.pos + detailsSummary.pos + detailsSummary.node.nodeSize;
+          const correctedSelection = state.TextSelection.create(newState.doc, correctedPosition);
+          return newState.tr.setSelection(correctedSelection);
+        }
+      })
+    ];
+  }
+});
+
+exports.Details = Details;
+exports.DetailsContent = DetailsContent;
+exports.DetailsSummary = DetailsSummary;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map