@vizel/vue 0.0.1-alpha.1 → 0.0.1-alpha.5

package/dist/index39.js

@@ -1,4 +1,17 @@
-import f from "./index9.js";
+var t = (e, n) => {
+  if (e === "slot")
+    return 0;
+  if (e instanceof Function)
+    return e(n);
+  const { children: r, ...s } = n ?? {};
+  if (e === "svg")
+    throw new Error("SVG elements are not supported in the JSX syntax, use the array syntax instead");
+  return [e, s, r];
+};
 export {
-  f as default
+  t as createElement,
+  t as h,
+  t as jsx,
+  t as jsxDEV,
+  t as jsxs
 };

package/dist/index4.js

@@ -1,34 +1,240 @@
-import { defineComponent as n, createElementBlock as o, openBlock as c, normalizeClass as d, renderSlot as r } from "vue";
-const u = ["disabled", "aria-pressed", "title", "data-active", "data-action"], v = /* @__PURE__ */ n({
-  __name: "VizelBubbleMenuButton",
-  props: {
-    isActive: { type: Boolean },
-    disabled: { type: Boolean },
-    title: {},
-    class: {},
-    action: {}
-  },
-  emits: ["click"],
-  setup(t, { emit: a }) {
-    const s = t, l = a;
-    return (e, i) => (c(), o("button", {
-      type: "button",
-      disabled: t.disabled,
-      "aria-pressed": t.isActive,
-      class: d([
-        "vizel-bubble-menu-button",
-        { "is-active": t.isActive },
-        e.$props.class
-      ]),
-      title: t.title,
-      "data-active": t.isActive || void 0,
-      "data-action": s.action,
-      onClick: i[0] || (i[0] = (b) => l("click"))
-    }, [
-      r(e.$slots, "default")
-    ], 10, u));
+import { Mark as y, mergeAttributes as p, Extension as l } from "@tiptap/core";
+var d = 20, u = (t, e = 0) => {
+  const r = [];
+  return !t.children.length || e > d || Array.from(t.children).forEach((o) => {
+    o.tagName === "SPAN" ? r.push(o) : o.children.length && r.push(...u(o, e + 1));
+  }), r;
+}, f = (t) => {
+  if (!t.children.length)
+    return;
+  const e = u(t);
+  e && e.forEach((r) => {
+    var o, n;
+    const s = r.getAttribute("style"), i = (n = (o = r.parentElement) == null ? void 0 : o.closest("span")) == null ? void 0 : n.getAttribute("style");
+    r.setAttribute("style", `${i};${s}`);
+  });
+}, c = y.create({
+  name: "textStyle",
+  priority: 101,
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      mergeNestedSpanStyles: !0
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span",
+        consuming: !1,
+        getAttrs: (t) => t.hasAttribute("style") ? (this.options.mergeNestedSpanStyles && f(t), {}) : !1
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: t }) {
+    return ["span", p(this.options.HTMLAttributes, t), 0];
+  },
+  addCommands() {
+    return {
+      toggleTextStyle: (t) => ({ commands: e }) => e.toggleMark(this.name, t),
+      removeEmptyTextStyle: () => ({ tr: t }) => {
+        const { selection: e } = t;
+        return t.doc.nodesBetween(e.from, e.to, (r, o) => {
+          if (r.isTextblock)
+            return !0;
+          r.marks.filter((n) => n.type === this.type).some((n) => Object.values(n.attrs).some((s) => !!s)) || t.removeMark(o, o + r.nodeSize, this.type);
+        }), !0;
+      }
+    };
+  }
+}), m = l.create({
+  name: "backgroundColor",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          backgroundColor: {
+            default: null,
+            parseHTML: (t) => {
+              var e;
+              const r = t.getAttribute("style");
+              if (r) {
+                const o = r.split(";").map((n) => n.trim()).filter(Boolean);
+                for (let n = o.length - 1; n >= 0; n -= 1) {
+                  const s = o[n].split(":");
+                  if (s.length >= 2) {
+                    const i = s[0].trim().toLowerCase(), a = s.slice(1).join(":").trim();
+                    if (i === "background-color")
+                      return a.replace(/['"]+/g, "");
+                  }
+                }
+              }
+              return (e = t.style.backgroundColor) == null ? void 0 : e.replace(/['"]+/g, "");
+            },
+            renderHTML: (t) => t.backgroundColor ? {
+              style: `background-color: ${t.backgroundColor}`
+            } : {}
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setBackgroundColor: (t) => ({ chain: e }) => e().setMark("textStyle", { backgroundColor: t }).run(),
+      unsetBackgroundColor: () => ({ chain: t }) => t().setMark("textStyle", { backgroundColor: null }).removeEmptyTextStyle().run()
+    };
+  }
+}), g = l.create({
+  name: "color",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          color: {
+            default: null,
+            parseHTML: (t) => {
+              var e;
+              const r = t.getAttribute("style");
+              if (r) {
+                const o = r.split(";").map((n) => n.trim()).filter(Boolean);
+                for (let n = o.length - 1; n >= 0; n -= 1) {
+                  const s = o[n].split(":");
+                  if (s.length >= 2) {
+                    const i = s[0].trim().toLowerCase(), a = s.slice(1).join(":").trim();
+                    if (i === "color")
+                      return a.replace(/['"]+/g, "");
+                  }
+                }
+              }
+              return (e = t.style.color) == null ? void 0 : e.replace(/['"]+/g, "");
+            },
+            renderHTML: (t) => t.color ? {
+              style: `color: ${t.color}`
+            } : {}
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setColor: (t) => ({ chain: e }) => e().setMark("textStyle", { color: t }).run(),
+      unsetColor: () => ({ chain: t }) => t().setMark("textStyle", { color: null }).removeEmptyTextStyle().run()
+    };
+  }
+}), h = l.create({
+  name: "fontFamily",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontFamily: {
+            default: null,
+            parseHTML: (t) => t.style.fontFamily,
+            renderHTML: (t) => t.fontFamily ? {
+              style: `font-family: ${t.fontFamily}`
+            } : {}
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setFontFamily: (t) => ({ chain: e }) => e().setMark("textStyle", { fontFamily: t }).run(),
+      unsetFontFamily: () => ({ chain: t }) => t().setMark("textStyle", { fontFamily: null }).removeEmptyTextStyle().run()
+    };
+  }
+}), S = l.create({
+  name: "fontSize",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: null,
+            parseHTML: (t) => t.style.fontSize,
+            renderHTML: (t) => t.fontSize ? {
+              style: `font-size: ${t.fontSize}`
+            } : {}
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setFontSize: (t) => ({ chain: e }) => e().setMark("textStyle", { fontSize: t }).run(),
+      unsetFontSize: () => ({ chain: t }) => t().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run()
+    };
+  }
+}), b = l.create({
+  name: "lineHeight",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          lineHeight: {
+            default: null,
+            parseHTML: (t) => t.style.lineHeight,
+            renderHTML: (t) => t.lineHeight ? {
+              style: `line-height: ${t.lineHeight}`
+            } : {}
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setLineHeight: (t) => ({ chain: e }) => e().setMark("textStyle", { lineHeight: t }).run(),
+      unsetLineHeight: () => ({ chain: t }) => t().setMark("textStyle", { lineHeight: null }).removeEmptyTextStyle().run()
+    };
+  }
+});
+l.create({
+  name: "textStyleKit",
+  addExtensions() {
+    const t = [];
+    return this.options.backgroundColor !== !1 && t.push(m.configure(this.options.backgroundColor)), this.options.color !== !1 && t.push(g.configure(this.options.color)), this.options.fontFamily !== !1 && t.push(h.configure(this.options.fontFamily)), this.options.fontSize !== !1 && t.push(S.configure(this.options.fontSize)), this.options.lineHeight !== !1 && t.push(b.configure(this.options.lineHeight)), this.options.textStyle !== !1 && t.push(c.configure(this.options.textStyle)), t;
   }
 });
 export {
-  v as default
+  m as BackgroundColor,
+  g as Color,
+  h as FontFamily,
+  S as FontSize,
+  b as LineHeight,
+  c as TextStyle
 };

package/dist/index40.js

@@ -1,4 +1,4 @@
-import f from "./index10.js";
+const e = /* @__PURE__ */ Symbol("VizelThemeContext");
 export {
-  f as default
+  e as VIZEL_THEME_CONTEXT_KEY
 };

package/dist/index41.js

@@ -1,4 +1,4 @@
-import f from "./index11.js";
+import f from "./index10.js";
 export {
   f as default
 };

package/dist/index42.js

@@ -1,4 +1,4 @@
-import f from "./index12.js";
+import f from "./index11.js";
 export {
   f as default
 };

package/dist/index43.js

@@ -1,4 +1,4 @@
-import f from "./index13.js";
+import f from "./index12.js";
 export {
   f as default
 };

package/dist/index44.js

@@ -1,4 +1,4 @@
-import f from "./index14.js";
+import f from "./index13.js";
 export {
   f as default
 };

package/dist/index45.js

@@ -1,4 +1,4 @@
-import f from "./index15.js";
+import f from "./index14.js";
 export {
   f as default
 };

package/dist/index46.js

@@ -1,4 +1,4 @@
-import f from "./index16.js";
+import f from "./index15.js";
 export {
   f as default
 };

package/dist/index47.js

@@ -1,4 +1,4 @@
-import f from "./index17.js";
+import f from "./index16.js";
 export {
   f as default
 };

package/dist/index5.js

@@ -1,76 +1,84 @@
-import { defineComponent as w, ref as i, computed as n, watch as b, onMounted as x, onUnmounted as z, createElementBlock as d, openBlock as a, normalizeClass as h, createElementVNode as R, createCommentVNode as V, normalizeStyle as E, createBlock as v, createVNode as H } from "vue";
-import { VIZEL_TEXT_COLORS as L, VIZEL_HIGHLIGHT_COLORS as T, getVizelRecentColors as B, addVizelRecentColor as f } from "@vizel/core";
-import O from "./index8.js";
-import m from "./index11.js";
-const S = ["data-type"], I = ["title", "data-action"], $ = {
-  key: 0,
-  class: "vizel-color-picker-dropdown"
-}, Z = /* @__PURE__ */ w({
-  __name: "VizelBubbleMenuColorPicker",
-  props: {
-    editor: {},
-    type: {},
-    colors: {},
-    class: {},
-    allowCustomColor: { type: Boolean, default: !0 },
-    showRecentColors: { type: Boolean, default: !0 }
+import { Mark as a, markPasteRule as s, markInputRule as l, mergeAttributes as u } from "@tiptap/core";
+var d = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))$/, h = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))/g;
+a.create({
+  name: "highlight",
+  addOptions() {
+    return {
+      multicolor: !1,
+      HTMLAttributes: {}
+    };
   },
-  setup(C) {
-    const e = C, o = i(!1), c = i([]), s = i(null), g = n(() => e.colors ?? (e.type === "textColor" ? L : T)), r = n(() => e.type === "textColor" ? e.editor.getAttributes("textStyle").color : e.editor.getAttributes("highlight").color), l = n(() => e.type === "textColor"), y = n(() => l.value ? ["inherit"] : ["transparent"]);
-    b(o, (t) => {
-      t && e.showRecentColors && (c.value = B(e.type));
-    });
-    function _(t) {
-      e.type === "textColor" ? t === "inherit" ? e.editor.chain().focus().unsetColor().run() : (e.editor.chain().focus().setColor(t).run(), f(e.type, t)) : t === "transparent" ? e.editor.chain().focus().unsetHighlight().run() : (e.editor.chain().focus().toggleHighlight({ color: t }).run(), f(e.type, t)), o.value = !1;
-    }
-    function u(t) {
-      s.value && !s.value.contains(t.target) && (o.value = !1);
-    }
-    x(() => {
-      document.addEventListener("mousedown", u);
-    }), z(() => {
-      document.removeEventListener("mousedown", u);
-    });
-    function k() {
-      return l.value ? { color: r.value || "inherit" } : { "--highlight-color": r.value || "transparent" };
+  addAttributes() {
+    return this.options.multicolor ? {
+      color: {
+        default: null,
+        parseHTML: (r) => r.getAttribute("data-color") || r.style.backgroundColor,
+        renderHTML: (r) => r.color ? {
+          "data-color": r.color,
+          style: `background-color: ${r.color}; color: inherit`
+        } : {}
+      }
+    } : {};
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "mark"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: r }) {
+    return ["mark", u(this.options.HTMLAttributes, r), 0];
+  },
+  renderMarkdown: (r, t) => `==${t.renderChildren(r)}==`,
+  parseMarkdown: (r, t) => t.applyMark("highlight", t.parseInline(r.tokens || [])),
+  markdownTokenizer: {
+    name: "highlight",
+    level: "inline",
+    start: (r) => r.indexOf("=="),
+    tokenize(r, t, i) {
+      const e = /^(==)([^=]+)(==)/.exec(r);
+      if (e) {
+        const n = e[2].trim(), o = i.inlineTokens(n);
+        return {
+          type: "highlight",
+          raw: e[0],
+          text: n,
+          tokens: o
+        };
+      }
     }
-    return (t, p) => (a(), d("div", {
-      ref_key: "containerRef",
-      ref: s,
-      class: h(["vizel-color-picker", t.$props.class]),
-      "data-type": e.type
-    }, [
-      R("button", {
-        type: "button",
-        class: h(["vizel-bubble-menu-button", "vizel-color-picker-trigger", { "has-color": r.value }]),
-        title: l.value ? "Text Color" : "Highlight",
-        "data-action": e.type,
-        style: E(k()),
-        onClick: p[0] || (p[0] = (N) => o.value = !o.value)
-      }, [
-        l.value ? (a(), v(m, {
-          key: 0,
-          name: "textColor"
-        })) : (a(), v(m, {
-          key: 1,
-          name: "highlighter"
-        }))
-      ], 14, I),
-      o.value ? (a(), d("div", $, [
-        H(O, {
-          colors: g.value,
-          value: r.value,
-          label: l.value ? "Text color palette" : "Highlight color palette",
-          "allow-custom-color": e.allowCustomColor,
-          "recent-colors": c.value,
-          "show-recent-colors": e.showRecentColors,
-          "none-values": y.value,
-          onChange: _
-        }, null, 8, ["colors", "value", "label", "allow-custom-color", "recent-colors", "show-recent-colors", "none-values"])
-      ])) : V("", !0)
-    ], 10, S));
+  },
+  addCommands() {
+    return {
+      setHighlight: (r) => ({ commands: t }) => t.setMark(this.name, r),
+      toggleHighlight: (r) => ({ commands: t }) => t.toggleMark(this.name, r),
+      unsetHighlight: () => ({ commands: r }) => r.unsetMark(this.name)
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Shift-h": () => this.editor.commands.toggleHighlight()
+    };
+  },
+  addInputRules() {
+    return [
+      l({
+        find: d,
+        type: this.type
+      })
+    ];
+  },
+  addPasteRules() {
+    return [
+      s({
+        find: h,
+        type: this.type
+      })
+    ];
   }
 });
 export {
-  Z as default
+  d as inputRegex,
+  h as pasteRegex
 };

package/dist/index51.js

@@ -1,4 +1,4 @@
-import f from "./index21.js";
+import f from "./index22.js";
 export {
   f as default
 };

package/dist/index52.js

@@ -0,0 +1,4 @@
+import f from "./index23.js";
+export {
+  f as default
+};

package/dist/index53.js

@@ -0,0 +1,4 @@
+import f from "./index24.js";
+export {
+  f as default
+};

package/dist/index54.js

@@ -0,0 +1,4 @@
+import f from "./index25.js";
+export {
+  f as default
+};

package/dist/index55.js

@@ -0,0 +1,4 @@
+import f from "./index26.js";
+export {
+  f as default
+};

package/dist/index56.js

@@ -0,0 +1,4 @@
+import f from "./index27.js";
+export {
+  f as default
+};

package/dist/index57.js

@@ -0,0 +1,4 @@
+import f from "./index28.js";
+export {
+  f as default
+};

package/dist/index58.js

@@ -0,0 +1,4 @@
+import f from "./index29.js";
+export {
+  f as default
+};

package/dist/index59.js

@@ -0,0 +1,4 @@
+import f from "./index30.js";
+export {
+  f as default
+};