@vizel/core 0.0.1-alpha.6 → 1.0.0

package/dist/index37.js

@@ -1,66 +1,125 @@
-import { Mark as d, mergeAttributes as a } from "@tiptap/core";
-var s = d.create({
-  name: "underline",
-  addOptions() {
-    return {
-      HTMLAttributes: {}
+import x from "@tiptap/extension-code-block";
+import { findChildren as p } from "@tiptap/core";
+import { Plugin as y, PluginKey as w } from "./index40.js";
+import { Decoration as N, DecorationSet as L } from "./index52.js";
+import C from "./index53.js";
+function v(e, i = []) {
+  return e.flatMap((t) => {
+    const a = [...i, ...t.properties ? t.properties.className : []];
+    return t.children ? v(t.children, a) : {
+      text: t.value,
+      classes: a
     };
-  },
-  parseHTML() {
-    return [
-      {
-        tag: "u"
-      },
-      {
-        style: "text-decoration",
-        consuming: !1,
-        getAttrs: (e) => e.includes("underline") ? {} : !1
+  });
+}
+function f(e) {
+  return e.value || e.children || [];
+}
+function P(e) {
+  return !!C.getLanguage(e);
+}
+function m({
+  doc: e,
+  name: i,
+  lowlight: t,
+  defaultLanguage: a
+}) {
+  const n = [];
+  return p(e, (r) => r.type.name === i).forEach((r) => {
+    var u;
+    let l = r.pos + 1;
+    const s = r.node.attrs.language || a, h = t.listLanguages(), d = s && (h.includes(s) || P(s) || (u = t.registered) != null && u.call(t, s)) ? f(t.highlight(s, r.node.textContent)) : f(t.highlightAuto(r.node.textContent));
+    v(d).forEach((g) => {
+      const o = l + g.text.length;
+      if (g.classes.length) {
+        const c = N.inline(l, o, {
+          class: g.classes.join(" ")
+        });
+        n.push(c);
+      }
+      l = o;
+    });
+  }), L.create(e, n);
+}
+function _(e) {
+  return typeof e == "function";
+}
+function A({
+  name: e,
+  lowlight: i,
+  defaultLanguage: t
+}) {
+  if (!["highlight", "highlightAuto", "listLanguages"].every((n) => _(i[n])))
+    throw Error("You should provide an instance of lowlight to use the code-block-lowlight extension");
+  const a = new y({
+    key: new w("lowlight"),
+    state: {
+      init: (n, { doc: r }) => m({
+        doc: r,
+        name: e,
+        lowlight: i,
+        defaultLanguage: t
+      }),
+      apply: (n, r, u, l) => {
+        const s = u.selection.$head.parent.type.name, h = l.selection.$head.parent.type.name, d = p(u.doc, (o) => o.type.name === e), g = p(l.doc, (o) => o.type.name === e);
+        return n.docChanged && // Apply decorations if:
+        // selection includes named node,
+        ([s, h].includes(e) || // OR transaction adds/removes named node,
+        g.length !== d.length || // OR transaction has changes that completely encapsulte a node
+        // (for example, a transaction that affects the entire document).
+        // Such transactions can happen during collab syncing via y-prosemirror, for example.
+        n.steps.some((o) => (
+          // @ts-ignore
+          o.from !== void 0 && // @ts-ignore
+          o.to !== void 0 && d.some((c) => (
+            // @ts-ignore
+            c.pos >= o.from && // @ts-ignore
+            c.pos + c.node.nodeSize <= o.to
+          ))
+        ))) ? m({
+          doc: n.doc,
+          name: e,
+          lowlight: i,
+          defaultLanguage: t
+        }) : r.map(n.mapping, n.doc);
       }
-    ];
-  },
-  renderHTML({ HTMLAttributes: e }) {
-    return ["u", a(this.options.HTMLAttributes, e), 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)
-      };
+    props: {
+      decorations(n) {
+        return a.getState(n);
+      }
     }
-  },
-  addCommands() {
+  });
+  return a;
+}
+var D = x.extend({
+  addOptions() {
+    var e;
     return {
-      setUnderline: () => ({ commands: e }) => e.setMark(this.name),
-      toggleUnderline: () => ({ commands: e }) => e.toggleMark(this.name),
-      unsetUnderline: () => ({ commands: e }) => e.unsetMark(this.name)
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      lowlight: {},
+      languageClassPrefix: "language-",
+      exitOnTripleEnter: !0,
+      exitOnArrowDown: !0,
+      defaultLanguage: null,
+      enableTabIndentation: !1,
+      tabSize: 4,
+      HTMLAttributes: {}
     };
   },
-  addKeyboardShortcuts() {
-    return {
-      "Mod-u": () => this.editor.commands.toggleUnderline(),
-      "Mod-U": () => this.editor.commands.toggleUnderline()
-    };
+  addProseMirrorPlugins() {
+    var e;
+    return [
+      ...((e = this.parent) == null ? void 0 : e.call(this)) || [],
+      A({
+        name: this.name,
+        lowlight: this.options.lowlight,
+        defaultLanguage: this.options.defaultLanguage
+      })
+    ];
   }
-}), l = s;
+}), S = D;
 export {
-  s as Underline,
-  l as default
+  D as CodeBlockLowlight,
+  S as default
 };

package/dist/index38.js

@@ -1,6 +1,329 @@
-import { CharacterCount as a } from "./index48.js";
-var t = a;
+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 "./index40.js";
+import { GapCursor as H } from "./index51.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: "details"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: t }) {
+    return ["details", v(this.options.HTMLAttributes, t), 0];
+  },
+  ...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 {
+      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 {
+      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);
+        }
+      })
+    ];
+  }
+}), 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 {
-  a as CharacterCount,
-  t as default
+  j as Details,
+  q as DetailsContent,
+  _ as DetailsSummary
 };

package/dist/index39.js

@@ -1,125 +1,15 @@
-import x from "@tiptap/extension-code-block";
-import { findChildren as p } from "@tiptap/core";
-import { Plugin as y, PluginKey as w } from "./index41.js";
-import { Decoration as N, DecorationSet as L } from "./index49.js";
-import C from "./index50.js";
-function v(e, i = []) {
-  return e.flatMap((t) => {
-    const a = [...i, ...t.properties ? t.properties.className : []];
-    return t.children ? v(t.children, a) : {
-      text: t.value,
-      classes: a
-    };
-  });
-}
-function f(e) {
-  return e.value || e.children || [];
-}
-function P(e) {
-  return !!C.getLanguage(e);
-}
-function m({
-  doc: e,
-  name: i,
-  lowlight: t,
-  defaultLanguage: a
-}) {
-  const n = [];
-  return p(e, (r) => r.type.name === i).forEach((r) => {
-    var u;
-    let l = r.pos + 1;
-    const s = r.node.attrs.language || a, h = t.listLanguages(), d = s && (h.includes(s) || P(s) || (u = t.registered) != null && u.call(t, s)) ? f(t.highlight(s, r.node.textContent)) : f(t.highlightAuto(r.node.textContent));
-    v(d).forEach((g) => {
-      const o = l + g.text.length;
-      if (g.classes.length) {
-        const c = N.inline(l, o, {
-          class: g.classes.join(" ")
-        });
-        n.push(c);
-      }
-      l = o;
-    });
-  }), L.create(e, n);
-}
-function _(e) {
-  return typeof e == "function";
-}
-function A({
-  name: e,
-  lowlight: i,
-  defaultLanguage: t
-}) {
-  if (!["highlight", "highlightAuto", "listLanguages"].every((n) => _(i[n])))
-    throw Error("You should provide an instance of lowlight to use the code-block-lowlight extension");
-  const a = new y({
-    key: new w("lowlight"),
-    state: {
-      init: (n, { doc: r }) => m({
-        doc: r,
-        name: e,
-        lowlight: i,
-        defaultLanguage: t
-      }),
-      apply: (n, r, u, l) => {
-        const s = u.selection.$head.parent.type.name, h = l.selection.$head.parent.type.name, d = p(u.doc, (o) => o.type.name === e), g = p(l.doc, (o) => o.type.name === e);
-        return n.docChanged && // Apply decorations if:
-        // selection includes named node,
-        ([s, h].includes(e) || // OR transaction adds/removes named node,
-        g.length !== d.length || // OR transaction has changes that completely encapsulte a node
-        // (for example, a transaction that affects the entire document).
-        // Such transactions can happen during collab syncing via y-prosemirror, for example.
-        n.steps.some((o) => (
-          // @ts-ignore
-          o.from !== void 0 && // @ts-ignore
-          o.to !== void 0 && d.some((c) => (
-            // @ts-ignore
-            c.pos >= o.from && // @ts-ignore
-            c.pos + c.node.nodeSize <= o.to
-          ))
-        ))) ? m({
-          doc: n.doc,
-          name: e,
-          lowlight: i,
-          defaultLanguage: t
-        }) : r.map(n.mapping, n.doc);
-      }
-    },
-    props: {
-      decorations(n) {
-        return a.getState(n);
-      }
+function i(l, t) {
+  let r = null, e = null;
+  return () => r ? Promise.resolve(r) : e || (e = t().then(
+    (n) => (r = n, e = null, n),
+    (n) => {
+      throw e = null, new Error(
+        `[Vizel] Failed to load "${l}". Please install it: npm install ${l}
+Original error: ${n instanceof Error ? n.message : String(n)}`
+      );
     }
-  });
-  return a;
+  ), e);
 }
-var D = x.extend({
-  addOptions() {
-    var e;
-    return {
-      ...(e = this.parent) == null ? void 0 : e.call(this),
-      lowlight: {},
-      languageClassPrefix: "language-",
-      exitOnTripleEnter: !0,
-      exitOnArrowDown: !0,
-      defaultLanguage: null,
-      enableTabIndentation: !1,
-      tabSize: 4,
-      HTMLAttributes: {}
-    };
-  },
-  addProseMirrorPlugins() {
-    var e;
-    return [
-      ...((e = this.parent) == null ? void 0 : e.call(this)) || [],
-      A({
-        name: this.name,
-        lowlight: this.options.lowlight,
-        defaultLanguage: this.options.defaultLanguage
-      })
-    ];
-  }
-}), S = D;
 export {
-  D as CodeBlockLowlight,
-  S as default
+  i as createLazyLoader
 };

package/dist/index4.js

@@ -1,4 +1,4 @@
-import n from "./index38.js";
+import n from "./index36.js";
 function u(e = {}) {
   const { limit: o = null, mode: r = "textSize", wordCounter: t } = e;
   return n.configure({