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

package/dist/index6.js

@@ -1,108 +1,77 @@
-import { defineComponent as $, computed as l, ref as A, createBlock as B, createElementBlock as _, openBlock as u, normalizeClass as y, createVNode as i, withCtx as r } from "vue";
-import { useVizelState as E } from "./index29.js";
-import a from "./index4.js";
-import c from "./index5.js";
-import d from "./index11.js";
-import S from "./index13.js";
-import z from "./index14.js";
-const D = /* @__PURE__ */ $({
-  __name: "VizelBubbleMenuDefault",
-  props: {
-    editor: {},
-    class: {},
-    enableEmbed: { type: Boolean }
+import { Mark as s, markPasteRule as r, markInputRule as a, mergeAttributes as n } from "@tiptap/core";
+var i = /(?:^|\s)(\*(?!\s+\*)((?:[^*]+))\*(?!\s+\*))$/, d = /(?:^|\s)(\*(?!\s+\*)((?:[^*]+))\*(?!\s+\*))/g, o = /(?:^|\s)(_(?!\s+_)((?:[^_]+))_(?!\s+_))$/, l = /(?:^|\s)(_(?!\s+_)((?:[^_]+))_(?!\s+_))/g;
+s.create({
+  name: "italic",
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
   },
-  setup(v) {
-    const e = v, o = E(() => e.editor), m = l(() => (o.value, e.editor.isActive("bold"))), f = l(() => (o.value, e.editor.isActive("italic"))), k = l(() => (o.value, e.editor.isActive("strike"))), p = l(() => (o.value, e.editor.isActive("underline"))), C = l(() => (o.value, e.editor.isActive("code"))), b = l(() => (o.value, e.editor.isActive("link"))), s = A(!1);
-    return (g, t) => s.value ? (u(), B(S, {
-      key: 0,
-      editor: e.editor,
-      "enable-embed": e.enableEmbed,
-      onClose: t[0] || (t[0] = (n) => s.value = !1)
-    }, null, 8, ["editor", "enable-embed"])) : (u(), _("div", {
-      key: 1,
-      class: y(["vizel-bubble-menu-toolbar", g.$props.class])
-    }, [
-      i(z, {
-        editor: e.editor
-      }, null, 8, ["editor"]),
-      i(a, {
-        action: "bold",
-        "is-active": m.value,
-        title: "Bold (Cmd+B)",
-        onClick: t[1] || (t[1] = (n) => e.editor.chain().focus().toggleBold().run())
-      }, {
-        default: r(() => [
-          i(d, { name: "bold" })
-        ]),
-        _: 1
-      }, 8, ["is-active"]),
-      i(a, {
-        action: "italic",
-        "is-active": f.value,
-        title: "Italic (Cmd+I)",
-        onClick: t[2] || (t[2] = (n) => e.editor.chain().focus().toggleItalic().run())
-      }, {
-        default: r(() => [
-          i(d, { name: "italic" })
-        ]),
-        _: 1
-      }, 8, ["is-active"]),
-      i(a, {
-        action: "strike",
-        "is-active": k.value,
-        title: "Strikethrough",
-        onClick: t[3] || (t[3] = (n) => e.editor.chain().focus().toggleStrike().run())
-      }, {
-        default: r(() => [
-          i(d, { name: "strikethrough" })
-        ]),
-        _: 1
-      }, 8, ["is-active"]),
-      i(a, {
-        action: "underline",
-        "is-active": p.value,
-        title: "Underline (Cmd+U)",
-        onClick: t[4] || (t[4] = (n) => e.editor.chain().focus().toggleUnderline().run())
-      }, {
-        default: r(() => [
-          i(d, { name: "underline" })
-        ]),
-        _: 1
-      }, 8, ["is-active"]),
-      i(a, {
-        action: "code",
-        "is-active": C.value,
-        title: "Code (Cmd+E)",
-        onClick: t[5] || (t[5] = (n) => e.editor.chain().focus().toggleCode().run())
-      }, {
-        default: r(() => [
-          i(d, { name: "code" })
-        ]),
-        _: 1
-      }, 8, ["is-active"]),
-      i(a, {
-        action: "link",
-        "is-active": b.value,
-        title: "Link (Cmd+K)",
-        onClick: t[6] || (t[6] = (n) => s.value = !0)
-      }, {
-        default: r(() => [
-          i(d, { name: "link" })
-        ]),
-        _: 1
-      }, 8, ["is-active"]),
-      i(c, {
-        editor: e.editor,
-        type: "textColor"
-      }, null, 8, ["editor"]),
-      i(c, {
-        editor: e.editor,
-        type: "highlight"
-      }, null, 8, ["editor"])
-    ], 2));
+  parseHTML() {
+    return [
+      {
+        tag: "em"
+      },
+      {
+        tag: "i",
+        getAttrs: (t) => t.style.fontStyle !== "normal" && null
+      },
+      {
+        style: "font-style=normal",
+        clearMark: (t) => t.type.name === this.name
+      },
+      {
+        style: "font-style=italic"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: t }) {
+    return ["em", n(this.options.HTMLAttributes, t), 0];
+  },
+  addCommands() {
+    return {
+      setItalic: () => ({ commands: t }) => t.setMark(this.name),
+      toggleItalic: () => ({ commands: t }) => t.toggleMark(this.name),
+      unsetItalic: () => ({ commands: t }) => t.unsetMark(this.name)
+    };
+  },
+  markdownTokenName: "em",
+  parseMarkdown: (t, e) => e.applyMark("italic", e.parseInline(t.tokens || [])),
+  renderMarkdown: (t, e) => `*${e.renderChildren(t)}*`,
+  addKeyboardShortcuts() {
+    return {
+      "Mod-i": () => this.editor.commands.toggleItalic(),
+      "Mod-I": () => this.editor.commands.toggleItalic()
+    };
+  },
+  addInputRules() {
+    return [
+      a({
+        find: i,
+        type: this.type
+      }),
+      a({
+        find: o,
+        type: this.type
+      })
+    ];
+  },
+  addPasteRules() {
+    return [
+      r({
+        find: d,
+        type: this.type
+      }),
+      r({
+        find: l,
+        type: this.type
+      })
+    ];
   }
 });
 export {
-  D as default
+  i as starInputRegex,
+  d as starPasteRegex,
+  o as underscoreInputRegex,
+  l as underscorePasteRegex
 };

package/dist/index60.js

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

package/dist/index7.js

@@ -1,15 +1,66 @@
-import { defineComponent as s, createElementBlock as l, openBlock as n, normalizeClass as r } from "vue";
-const c = /* @__PURE__ */ s({
-  __name: "VizelBubbleMenuDivider",
-  props: {
-    class: {}
-  },
-  setup(o) {
-    return (e, a) => (n(), l("span", {
-      class: r(["vizel-bubble-menu-divider", e.$props.class])
-    }, null, 2));
+import { Mark as r, markPasteRule as s, markInputRule as n, mergeAttributes as a } from "@tiptap/core";
+var i = /(?:^|\s)(~~(?!\s+~~)((?:[^~]+))~~(?!\s+~~))$/, d = /(?:^|\s)(~~(?!\s+~~)((?:[^~]+))~~(?!\s+~~))/g;
+r.create({
+  name: "strike",
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "s"
+      },
+      {
+        tag: "del"
+      },
+      {
+        tag: "strike"
+      },
+      {
+        style: "text-decoration",
+        consuming: !1,
+        getAttrs: (e) => e.includes("line-through") ? {} : !1
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: e }) {
+    return ["s", a(this.options.HTMLAttributes, e), 0];
+  },
+  markdownTokenName: "del",
+  parseMarkdown: (e, t) => t.applyMark("strike", t.parseInline(e.tokens || [])),
+  renderMarkdown: (e, t) => `~~${t.renderChildren(e)}~~`,
+  addCommands() {
+    return {
+      setStrike: () => ({ commands: e }) => e.setMark(this.name),
+      toggleStrike: () => ({ commands: e }) => e.toggleMark(this.name),
+      unsetStrike: () => ({ commands: e }) => e.unsetMark(this.name)
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Shift-s": () => this.editor.commands.toggleStrike()
+    };
+  },
+  addInputRules() {
+    return [
+      n({
+        find: i,
+        type: this.type
+      })
+    ];
+  },
+  addPasteRules() {
+    return [
+      s({
+        find: d,
+        type: this.type
+      })
+    ];
   }
 });
 export {
-  c as default
+  i as inputRegex,
+  d as pasteRegex
 };

package/dist/index8.js

@@ -1,191 +1,62 @@
-import { defineComponent as U, computed as k, ref as C, watch as N, onMounted as F, createElementBlock as s, openBlock as i, normalizeClass as _, createCommentVNode as b, createElementVNode as u, Fragment as B, renderList as M, normalizeStyle as z, createVNode as V } from "vue";
-import { isVizelValidHexColor as S, normalizeVizelHexColor as g } from "@vizel/core";
-import x from "./index11.js";
-const G = ["aria-label"], P = {
-  key: 0,
-  class: "vizel-color-picker-section"
-}, j = { class: "vizel-color-picker-recent" }, q = ["aria-selected", "aria-label", "tabindex", "data-color", "onClick", "onKeydown"], J = {
-  key: 0,
-  class: "vizel-color-picker-none"
-}, Q = { class: "vizel-color-picker-section" }, T = { class: "vizel-color-picker-grid" }, W = ["aria-selected", "aria-label", "tabindex", "data-color", "onClick", "onKeydown"], X = {
-  key: 0,
-  class: "vizel-color-picker-none"
-}, Y = {
-  key: 1,
-  class: "vizel-color-picker-input-row"
-}, Z = ["value"], D = ["disabled"], $ = 4, te = /* @__PURE__ */ U({
-  __name: "VizelColorPicker",
-  props: {
-    colors: {},
-    value: {},
-    modelValue: {},
-    label: { default: "Color palette" },
-    class: {},
-    allowCustomColor: { type: Boolean, default: !0 },
-    recentColors: { default: () => [] },
-    showRecentColors: { type: Boolean, default: !0 },
-    noneValues: { default: () => ["transparent", "inherit"] }
+import { Mark as s, mergeAttributes as d } from "@tiptap/core";
+s.create({
+  name: "underline",
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
   },
-  emits: ["change", "update:modelValue"],
-  setup(d, { emit: H }) {
-    const a = d, f = H, c = k(() => a.modelValue ?? a.value), r = C(""), v = C(-1), p = C([]), I = C(null), m = k(() => [
-      ...a.showRecentColors ? a.recentColors : [],
-      ...a.colors.map((e) => e.color)
-    ]);
-    N(
-      () => m.value.length,
-      (e) => {
-        p.value.length > e && (p.value.length = e);
-      }
-    );
-    const y = k(() => a.showRecentColors ? a.recentColors.length : 0);
-    function h(e) {
-      return a.noneValues.includes(e);
-    }
-    function w(e) {
-      f("change", e), f("update:modelValue", e), r.value = "";
-    }
-    function R() {
-      const e = g(r.value);
-      S(e) && (f("change", e), f("update:modelValue", e), r.value = "");
-    }
-    function O(e) {
-      e.key === "Enter" && (e.preventDefault(), R());
-    }
-    function K(e, n) {
-      const l = m.value.length;
-      if (l === 0) return;
-      let t = n, o = !1;
-      switch (e.key) {
-        case "ArrowRight":
-          t = (n + 1) % l, o = !0;
-          break;
-        case "ArrowLeft":
-          t = (n - 1 + l) % l, o = !0;
-          break;
-        case "ArrowDown":
-          t = Math.min(n + $, l - 1), o = !0;
-          break;
-        case "ArrowUp":
-          t = Math.max(n - $, 0), o = !0;
-          break;
-        case "Home":
-          t = 0, o = !0;
-          break;
-        case "End":
-          t = l - 1, o = !0;
-          break;
-        case "Enter":
-        case " ": {
-          e.preventDefault();
-          const E = m.value[n];
-          E && w(E);
-          return;
-        }
+  parseHTML() {
+    return [
+      {
+        tag: "u"
+      },
+      {
+        style: "text-decoration",
+        consuming: !1,
+        getAttrs: (e) => e.includes("underline") ? {} : !1
       }
-      o && (e.preventDefault(), v.value = t, p.value[t]?.focus());
+    ];
+  },
+  renderHTML({ HTMLAttributes: e }) {
+    return ["u", d(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)
+      };
     }
-    N(
-      c,
-      (e) => {
-        e && !h(e) ? r.value = e : r.value = "";
-      },
-      { immediate: !0 }
-    ), F(() => {
-      const e = c.value ? m.value.indexOf(c.value) : -1;
-      e >= 0 ? v.value = e : m.value.length > 0 && (v.value = 0);
-    });
-    const A = k(() => S(g(r.value))), L = k(
-      () => A.value ? g(r.value) : void 0
-    );
-    return (e, n) => (i(), s("div", {
-      class: _(["vizel-color-picker-content", e.$props.class]),
-      role: "listbox",
-      "aria-label": a.label
-    }, [
-      d.showRecentColors && a.recentColors && a.recentColors.length > 0 ? (i(), s("div", P, [
-        n[1] || (n[1] = u("div", { class: "vizel-color-picker-label" }, "Recent", -1)),
-        u("div", j, [
-          (i(!0), s(B, null, M(d.recentColors, (l, t) => (i(), s("button", {
-            key: l,
-            ref_for: !0,
-            ref: (o) => {
-              p.value[t] = o;
-            },
-            type: "button",
-            role: "option",
-            "aria-selected": c.value === l,
-            "aria-label": l,
-            tabindex: v.value === t ? 0 : -1,
-            class: _(["vizel-color-picker-swatch", { "is-active": c.value === l }]),
-            style: z({ backgroundColor: h(l) ? "transparent" : l }),
-            "data-color": l,
-            onClick: (o) => w(l),
-            onKeydown: (o) => K(o, t)
-          }, [
-            h(l) ? (i(), s("span", J, [
-              V(x, { name: "x" })
-            ])) : b("", !0)
-          ], 46, q))), 128))
-        ])
-      ])) : b("", !0),
-      u("div", Q, [
-        u("div", T, [
-          (i(!0), s(B, null, M(d.colors, (l, t) => (i(), s("button", {
-            key: l.color,
-            ref_for: !0,
-            ref: (o) => {
-              p.value[y.value + t] = o;
-            },
-            type: "button",
-            role: "option",
-            "aria-selected": c.value === l.color,
-            "aria-label": l.name,
-            tabindex: v.value === y.value + t ? 0 : -1,
-            class: _(["vizel-color-picker-swatch", { "is-active": c.value === l.color }]),
-            style: z({ backgroundColor: h(l.color) ? "transparent" : l.color }),
-            "data-color": l.color,
-            onClick: (o) => w(l.color),
-            onKeydown: (o) => K(o, y.value + t)
-          }, [
-            h(l.color) ? (i(), s("span", X, [
-              V(x, { name: "x" })
-            ])) : b("", !0)
-          ], 46, W))), 128))
-        ])
-      ]),
-      d.allowCustomColor ? (i(), s("div", Y, [
-        u("span", {
-          class: "vizel-color-picker-preview",
-          style: z({ backgroundColor: L.value || "transparent" }),
-          "aria-hidden": "true"
-        }, null, 4),
-        u("input", {
-          ref_key: "inputRef",
-          ref: I,
-          type: "text",
-          class: "vizel-color-picker-input",
-          placeholder: "#000000",
-          value: r.value,
-          maxlength: "7",
-          "aria-label": "Custom color hex value",
-          onInput: n[0] || (n[0] = (l) => r.value = l.target.value),
-          onKeydown: O
-        }, null, 40, Z),
-        u("button", {
-          type: "button",
-          class: "vizel-color-picker-apply",
-          disabled: !A.value,
-          title: "Apply",
-          "aria-label": "Apply custom color",
-          onClick: R
-        }, [
-          V(x, { name: "check" })
-        ], 8, D)
-      ])) : b("", !0)
-    ], 10, G));
+  },
+  addCommands() {
+    return {
+      setUnderline: () => ({ commands: e }) => e.setMark(this.name),
+      toggleUnderline: () => ({ commands: e }) => e.toggleMark(this.name),
+      unsetUnderline: () => ({ commands: e }) => e.unsetMark(this.name)
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-u": () => this.editor.commands.toggleUnderline(),
+      "Mod-U": () => this.editor.commands.toggleUnderline()
+    };
   }
 });
-export {
-  te as default
-};

package/dist/index9.js

@@ -1,35 +1,2 @@
-import { defineComponent as d, ref as m, computed as f, watch as v, createElementBlock as u, createCommentVNode as C, openBlock as _, normalizeClass as w } from "vue";
-import { useVizelContextSafe as E } from "./index23.js";
-const x = /* @__PURE__ */ d({
-  __name: "VizelEditor",
-  props: {
-    editor: {},
-    class: {}
-  },
-  setup(a, { expose: c }) {
-    const l = a, t = m(null), p = E(), i = f(() => l.editor ?? p?.());
-    return c({
-      get container() {
-        return t.value;
-      }
-    }), v(
-      () => [i.value, t.value],
-      ([e, o], s) => {
-        const n = s?.[0], r = s?.[1];
-        n && r && n.view.dom.parentNode === r && r.removeChild(n.view.dom), e && o && (o.appendChild(e.view.dom), e.view.setProps({
-          editable: () => e?.isEditable ?? !1
-        }));
-      },
-      { immediate: !0 }
-    ), (e, o) => i.value ? (_(), u("div", {
-      key: 0,
-      ref_key: "containerRef",
-      ref: t,
-      class: w(e.$props.class),
-      "data-vizel-content": ""
-    }, null, 2)) : C("", !0);
-  }
-});
-export {
-  x as default
-};
+import { initVizelIconRenderer as e } from "@vizel/core";
+e();

package/package.json

@@ -1,44 +1,29 @@
 {
   "name": "@vizel/vue",
-  "version": "0.0.1-alpha.1",
-  "description": "Vue 3 components for Vizel block-based Markdown editor",
-  "keywords": [
-    "vue",
-    "vue3",
-    "tiptap",
-    "editor",
-    "markdown",
-    "wysiwyg",
-    "rich-text",
-    "block-editor"
-  ],
-  "license": "MIT",
-  "author": "Seiji Kohara",
+  "version": "0.0.1-alpha.5",
+  "type": "module",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/seijikohara/vizel.git",
+    "url": "https://github.com/seijikohara/vizel",
     "directory": "packages/vue"
   },
-  "homepage": "https://github.com/seijikohara/vizel",
-  "bugs": "https://github.com/seijikohara/vizel/issues",
-  "type": "module",
-  "sideEffects": false,
-  "engines": {
-    "node": ">=18"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
-    },
-    "./package.json": "./package.json"
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    }
   },
   "publishConfig": {
-    "access": "public"
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      }
+    }
   },
   "files": [
     "dist"
@@ -49,12 +34,20 @@
   },
   "dependencies": {
     "@iconify/vue": "^5",
-    "@vizel/core": "^0.0.1-alpha.1"
+    "@vizel/core": "^0.0.1-alpha.5"
   },
   "peerDependencies": {
     "vue": "^3.4"
   },
   "devDependencies": {
+    "@tiptap/extension-bold": "^3",
+    "@tiptap/extension-code": "^3",
+    "@tiptap/extension-color": "^3",
+    "@tiptap/extension-highlight": "^3",
+    "@tiptap/extension-italic": "^3",
+    "@tiptap/extension-strike": "^3",
+    "@tiptap/extension-text-style": "^3",
+    "@tiptap/extension-underline": "^3",
     "@vitejs/plugin-vue": "^6",
     "vite": "^7",
     "vite-plugin-dts": "^4",