@vizel/core 0.0.1-alpha.1 → 0.0.1-alpha.3

package/dist/index37.js

@@ -1,66 +1,329 @@
-import { Mark as d, mergeAttributes as a } from "@tiptap/core";
-var s = d.create({
-  name: "underline",
+import { Node as L, createBlockMarkdownSpec as N, isActive as F, findChildren as b, defaultBlockAt as x, findParentNode as w, mergeAttributes as v } from "@tiptap/core";
+import { Plugin as z, PluginKey as G, TextSelection as R, Selection as D } from "./index38.js";
+import { GapCursor as H } from "./index48.js";
+var S = (t, s) => s.view.domAtPos(t).node.offsetParent !== null, W = (t, s, o) => {
+  for (let e = t.depth; e > 0; e -= 1) {
+    const n = t.node(e), c = s(n), r = S(t.start(e), o);
+    if (c && r)
+      return {
+        pos: e > 0 ? t.before(e) : 0,
+        start: t.start(e),
+        depth: e,
+        node: n
+      };
+  }
+}, O = (t, s) => {
+  const { state: o, view: e, extensionManager: n } = t, { schema: c, selection: r } = o, { empty: d, $anchor: l } = r, i = !!n.extensions.find((u) => u.name === "gapCursor");
+  if (!d || l.parent.type !== c.nodes.detailsSummary || !i || s === "right" && l.parentOffset !== l.parent.nodeSize - 2)
+    return !1;
+  const a = w((u) => u.type === c.nodes.details)(r);
+  if (!a)
+    return !1;
+  const p = b(a.node, (u) => u.type === c.nodes.detailsContent);
+  if (!p.length || S(a.start + p[0].pos + 1, t))
+    return !1;
+  const m = o.doc.resolve(a.pos + a.node.nodeSize), h = H.findFrom(m, 1, !1);
+  if (!h)
+    return !1;
+  const { tr: y } = o, C = new H(h);
+  return y.setSelection(C), y.scrollIntoView(), e.dispatch(y), !0;
+}, j = L.create({
+  name: "details",
+  content: "detailsSummary detailsContent",
+  group: "block",
+  defining: !0,
+  isolating: !0,
+  // @ts-ignore reason: `allowGapCursor` is not a valid property by default, but the `GapCursor` extension adds it to the Nodeconfig type
+  allowGapCursor: !1,
   addOptions() {
     return {
+      persist: !1,
+      openClassName: "is-open",
       HTMLAttributes: {}
     };
   },
+  addAttributes() {
+    return this.options.persist ? {
+      open: {
+        default: !1,
+        parseHTML: (t) => t.hasAttribute("open"),
+        renderHTML: ({ open: t }) => t ? { open: "" } : {}
+      }
+    } : [];
+  },
   parseHTML() {
     return [
       {
-        tag: "u"
-      },
-      {
-        style: "text-decoration",
-        consuming: !1,
-        getAttrs: (e) => e.includes("underline") ? {} : !1
+        tag: "details"
       }
     ];
   },
-  renderHTML({ HTMLAttributes: e }) {
-    return ["u", a(this.options.HTMLAttributes, e), 0];
+  renderHTML({ HTMLAttributes: t }) {
+    return ["details", v(this.options.HTMLAttributes, t), 0];
   },
-  parseMarkdown(e, n) {
-    return n.applyMark(this.name || "underline", n.parseInline(e.tokens || []));
-  },
-  renderMarkdown(e, n) {
-    return `++${n.renderChildren(e)}++`;
-  },
-  markdownTokenizer: {
-    name: "underline",
-    level: "inline",
-    start(e) {
-      return e.indexOf("++");
-    },
-    tokenize(e, n, i) {
-      const r = /^(\+\+)([\s\S]+?)(\+\+)/.exec(e);
-      if (!r)
-        return;
-      const t = r[2].trim();
-      return {
-        type: "underline",
-        raw: r[0],
-        text: t,
-        tokens: i.inlineTokens(t)
+  ...N({
+    nodeName: "details",
+    content: "block"
+  }),
+  addNodeView() {
+    return ({ editor: t, getPos: s, node: o, HTMLAttributes: e }) => {
+      const n = document.createElement("div"), c = v(this.options.HTMLAttributes, e, {
+        "data-type": this.name
+      });
+      Object.entries(c).forEach(([i, a]) => n.setAttribute(i, a));
+      const r = document.createElement("button");
+      r.type = "button", n.append(r);
+      const d = document.createElement("div");
+      n.append(d);
+      const l = (i) => {
+        if (i !== void 0)
+          if (i) {
+            if (n.classList.contains(this.options.openClassName))
+              return;
+            n.classList.add(this.options.openClassName);
+          } else {
+            if (!n.classList.contains(this.options.openClassName))
+              return;
+            n.classList.remove(this.options.openClassName);
+          }
+        else
+          n.classList.toggle(this.options.openClassName);
+        const a = new Event("toggleDetailsContent"), p = d.querySelector(':scope > div[data-type="detailsContent"]');
+        p?.dispatchEvent(a);
       };
-    }
+      return o.attrs.open && setTimeout(() => l()), r.addEventListener("click", () => {
+        if (l(), !this.options.persist) {
+          t.commands.focus(void 0, { scrollIntoView: !1 });
+          return;
+        }
+        if (t.isEditable && typeof s == "function") {
+          const { from: i, to: a } = t.state.selection;
+          t.chain().command(({ tr: p }) => {
+            const f = s();
+            if (!f)
+              return !1;
+            const m = p.doc.nodeAt(f);
+            return m?.type !== this.type ? !1 : (p.setNodeMarkup(f, void 0, {
+              open: !m.attrs.open
+            }), !0);
+          }).setTextSelection({
+            from: i,
+            to: a
+          }).focus(void 0, { scrollIntoView: !1 }).run();
+        }
+      }), {
+        dom: n,
+        contentDOM: d,
+        ignoreMutation(i) {
+          return i.type === "selection" ? !1 : !n.contains(i.target) || n === i.target;
+        },
+        update: (i) => i.type !== this.type ? !1 : (i.attrs.open !== void 0 && l(i.attrs.open), !0)
+      };
+    };
   },
   addCommands() {
     return {
-      setUnderline: () => ({ commands: e }) => e.setMark(this.name),
-      toggleUnderline: () => ({ commands: e }) => e.toggleMark(this.name),
-      unsetUnderline: () => ({ commands: e }) => e.unsetMark(this.name)
+      setDetails: () => ({ state: t, chain: s }) => {
+        var o;
+        const { schema: e, selection: n } = t, { $from: c, $to: r } = n, d = c.blockRange(r);
+        if (!d)
+          return !1;
+        const l = t.doc.slice(d.start, d.end);
+        if (!e.nodes.detailsContent.contentMatch.matchFragment(l.content))
+          return !1;
+        const a = ((o = l.toJSON()) == null ? void 0 : o.content) || [];
+        return s().insertContentAt(
+          { from: d.start, to: d.end },
+          {
+            type: this.name,
+            content: [
+              {
+                type: "detailsSummary"
+              },
+              {
+                type: "detailsContent",
+                content: a
+              }
+            ]
+          }
+        ).setTextSelection(d.start + 2).run();
+      },
+      unsetDetails: () => ({ state: t, chain: s }) => {
+        const { selection: o, schema: e } = t, n = w((u) => u.type === this.type)(o);
+        if (!n)
+          return !1;
+        const c = b(n.node, (u) => u.type === e.nodes.detailsSummary), r = b(n.node, (u) => u.type === e.nodes.detailsContent);
+        if (!c.length || !r.length)
+          return !1;
+        const d = c[0], l = r[0], i = n.pos, a = t.doc.resolve(i), p = i + n.node.nodeSize, f = { from: i, to: p }, m = l.node.content.toJSON() || [], h = a.parent.type.contentMatch.defaultType, C = [h?.create(null, d.node.content).toJSON(), ...m];
+        return s().insertContentAt(f, C).setTextSelection(i + 1).run();
+      }
     };
   },
   addKeyboardShortcuts() {
     return {
-      "Mod-u": () => this.editor.commands.toggleUnderline(),
-      "Mod-U": () => this.editor.commands.toggleUnderline()
+      Backspace: () => {
+        const { schema: t, selection: s } = this.editor.state, { empty: o, $anchor: e } = s;
+        return !o || e.parent.type !== t.nodes.detailsSummary ? !1 : e.parentOffset !== 0 ? this.editor.commands.command(({ tr: n }) => {
+          const c = e.pos - 1, r = e.pos;
+          return n.delete(c, r), !0;
+        }) : this.editor.commands.unsetDetails();
+      },
+      // Creates a new node below it if it is closed.
+      // Otherwise inside `DetailsContent`.
+      Enter: ({ editor: t }) => {
+        const { state: s, view: o } = t, { schema: e, selection: n } = s, { $head: c } = n;
+        if (c.parent.type !== e.nodes.detailsSummary)
+          return !1;
+        const r = S(c.after() + 1, t), d = r ? s.doc.nodeAt(c.after()) : c.node(-2);
+        if (!d)
+          return !1;
+        const l = r ? 0 : c.indexAfter(-1), i = x(d.contentMatchAt(l));
+        if (!i || !d.canReplaceWith(l, l, i))
+          return !1;
+        const a = i.createAndFill();
+        if (!a)
+          return !1;
+        const p = r ? c.after() + 1 : c.after(-1), f = s.tr.replaceWith(p, p, a), m = f.doc.resolve(p), h = D.near(m, 1);
+        return f.setSelection(h), f.scrollIntoView(), o.dispatch(f), !0;
+      },
+      // The default gapcursor implementation can’t handle hidden content, so we need to fix this.
+      ArrowRight: ({ editor: t }) => O(t, "right"),
+      // The default gapcursor implementation can’t handle hidden content, so we need to fix this.
+      ArrowDown: ({ editor: t }) => O(t, "down")
     };
+  },
+  addProseMirrorPlugins() {
+    return [
+      // This plugin prevents text selections within the hidden content in `DetailsContent`.
+      // The cursor is moved to the next visible position.
+      new z({
+        key: new G("detailsSelection"),
+        appendTransaction: (t, s, o) => {
+          const { editor: e, type: n } = this;
+          if (e.view.composing || !t.some((u) => u.selectionSet) || !s.selection.empty || !o.selection.empty || !F(o, n.name))
+            return;
+          const { $from: l } = o.selection;
+          if (S(l.pos, e))
+            return;
+          const a = W(l, (u) => u.type === n, e);
+          if (!a)
+            return;
+          const p = b(
+            a.node,
+            (u) => u.type === o.schema.nodes.detailsSummary
+          );
+          if (!p.length)
+            return;
+          const f = p[0], h = (s.selection.from < o.selection.from ? "forward" : "backward") === "forward" ? a.start + f.pos : a.pos + f.pos + f.node.nodeSize, y = R.create(o.doc, h);
+          return o.tr.setSelection(y);
+        }
+      })
+    ];
   }
-}), l = s;
+}), q = L.create({
+  name: "detailsContent",
+  content: "block+",
+  defining: !0,
+  selectable: !1,
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: `div[data-type="${this.name}"]`
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: t }) {
+    return ["div", v(this.options.HTMLAttributes, t, { "data-type": this.name }), 0];
+  },
+  addNodeView() {
+    return ({ HTMLAttributes: t }) => {
+      const s = document.createElement("div"), o = v(this.options.HTMLAttributes, t, {
+        "data-type": this.name,
+        hidden: "hidden"
+      });
+      return Object.entries(o).forEach(([e, n]) => s.setAttribute(e, n)), s.addEventListener("toggleDetailsContent", () => {
+        s.toggleAttribute("hidden");
+      }), {
+        dom: s,
+        contentDOM: s,
+        ignoreMutation(e) {
+          return e.type === "selection" ? !1 : !s.contains(e.target) || s === e.target;
+        },
+        update: (e) => e.type === this.type
+      };
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      // Escape node on double enter
+      Enter: ({ editor: t }) => {
+        const { state: s, view: o } = t, { selection: e } = s, { $from: n, empty: c } = e, r = w(($) => $.type === this.type)(e);
+        if (!c || !r || !r.node.childCount)
+          return !1;
+        const d = n.index(r.depth), { childCount: l } = r.node;
+        if (!(l === d + 1))
+          return !1;
+        const a = r.node.type.contentMatch.defaultType, p = a?.createAndFill();
+        if (!p)
+          return !1;
+        const f = s.doc.resolve(r.pos + 1), m = l - 1, h = r.node.child(m), y = f.posAtIndex(m, r.depth);
+        if (!h.eq(p))
+          return !1;
+        const u = n.node(-3);
+        if (!u)
+          return !1;
+        const A = n.indexAfter(-3), M = x(u.contentMatchAt(A));
+        if (!M || !u.canReplaceWith(A, A, M))
+          return !1;
+        const E = M.createAndFill();
+        if (!E)
+          return !1;
+        const { tr: g } = s, T = n.after(-2);
+        g.replaceWith(T, T, E);
+        const k = g.doc.resolve(T), I = D.near(k, 1);
+        g.setSelection(I);
+        const V = y, P = y + h.nodeSize;
+        return g.delete(V, P), g.scrollIntoView(), o.dispatch(g), !0;
+      }
+    };
+  },
+  ...N({
+    nodeName: "detailsContent"
+  })
+}), _ = L.create({
+  name: "detailsSummary",
+  content: "text*",
+  defining: !0,
+  selectable: !1,
+  isolating: !0,
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "summary"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: t }) {
+    return ["summary", v(this.options.HTMLAttributes, t), 0];
+  },
+  ...N({
+    nodeName: "detailsSummary",
+    content: "inline"
+  })
+});
 export {
-  s as Underline,
-  l as default
+  j as Details,
+  q as DetailsContent,
+  _ as DetailsSummary
 };