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

package/dist/index6.js

@@ -1,52 +1,77 @@
-import { jsx as m } from "react/jsx-runtime";
-import { BubbleMenuPlugin as x } from "@vizel/core";
-import { useRef as f, useEffect as g } from "react";
-import { VizelBubbleMenuDefault as y } from "./index9.js";
-import { useVizelContextSafe as B } from "./index2.js";
-function S({
-  editor: d,
-  className: b,
-  children: a,
-  showDefaultMenu: p = !0,
-  pluginKey: n = "vizelBubbleMenu",
-  updateDelay: u = 100,
-  shouldShow: l,
-  enableEmbed: s
-}) {
-  const v = B(), e = d ?? v?.editor ?? null, r = f(null), o = f(l);
-  return o.current = l, g(() => {
-    if (!(e && r.current))
-      return;
-    const w = x({
-      pluginKey: n,
-      editor: e,
-      element: r.current,
-      updateDelay: u,
-      ...o.current && {
-        shouldShow: ({ editor: t, from: z, to: h }) => o.current?.({ editor: t, from: z, to: h }) ?? !1
+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: {}
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "em"
+      },
+      {
+        tag: "i",
+        getAttrs: (t) => t.style.fontStyle !== "normal" && null
+      },
+      {
+        style: "font-style=normal",
+        clearMark: (t) => t.type.name === this.name
       },
-      options: {
-        placement: "top"
+      {
+        style: "font-style=italic"
       }
-    });
-    e.registerPlugin(w);
-    const i = e, c = (t) => {
-      t.key === "Escape" && !i.view.state.selection.empty && (t.preventDefault(), i.commands.setTextSelection(i.view.state.selection.to));
+    ];
+  },
+  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)
     };
-    return document.addEventListener("keydown", c), () => {
-      e.unregisterPlugin(n), document.removeEventListener("keydown", c);
+  },
+  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()
     };
-  }, [e, n, u]), e ? /* @__PURE__ */ m(
-    "div",
-    {
-      ref: r,
-      className: `vizel-bubble-menu ${b ?? ""}`,
-      "data-vizel-bubble-menu": "",
-      style: { visibility: "hidden" },
-      children: a ?? (p && /* @__PURE__ */ m(y, { editor: e, ...s ? { enableEmbed: s } : {} }))
-    }
-  ) : null;
-}
+  },
+  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 {
-  S as VizelBubbleMenu
+  i as starInputRegex,
+  d as starPasteRegex,
+  o as underscoreInputRegex,
+  l as underscorePasteRegex
 };

package/dist/index7.js

@@ -1,28 +1,66 @@
-import { jsx as l } from "react/jsx-runtime";
-function i({
-  onClick: e,
-  isActive: t = !1,
-  disabled: a = !1,
-  children: n,
-  title: o,
-  className: u,
-  action: b
-}) {
-  return /* @__PURE__ */ l(
-    "button",
-    {
-      type: "button",
-      onClick: e,
-      disabled: a,
-      "aria-pressed": t,
-      className: `vizel-bubble-menu-button ${t ? "is-active" : ""} ${u ?? ""}`,
-      title: o,
-      "data-active": t || void 0,
-      "data-action": b,
-      children: n
-    }
-  );
-}
+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 {
-  i as VizelBubbleMenuButton
+  i as inputRegex,
+  d as pasteRegex
 };

package/dist/index8.js

@@ -1,63 +1,62 @@
-import { jsxs as V, jsx as l } from "react/jsx-runtime";
-import { getVizelRecentColors as H, addVizelRecentColor as u, VIZEL_TEXT_COLORS as L, VIZEL_HIGHLIGHT_COLORS as O } from "@vizel/core";
-import { useState as h, useRef as E, useEffect as g, useCallback as I } from "react";
-import { VizelColorPicker as T } from "./index11.js";
-import { VizelIcon as C } from "./index14.js";
-function A({
-  editor: o,
-  type: e,
-  colors: f,
-  className: m,
-  allowCustomColor: d = !0,
-  showRecentColors: s = !0
-}) {
-  const [r, c] = h(!1), [b, x] = h([]), a = E(null), v = f ?? (e === "textColor" ? L : O), i = e === "textColor" ? o.getAttributes("textStyle").color : o.getAttributes("highlight").color;
-  g(() => {
-    r && s && x(H(e));
-  }, [r, s, e]);
-  const p = I(
-    (t) => {
-      e === "textColor" ? t === "inherit" ? o.chain().focus().unsetColor().run() : (o.chain().focus().setColor(t).run(), u(e, t)) : t === "transparent" ? o.chain().focus().unsetHighlight().run() : (o.chain().focus().toggleHighlight({ color: t }).run(), u(e, t)), c(!1);
-    },
-    [o, e]
-  );
-  g(() => {
-    const t = (k) => {
-      a.current && !a.current.contains(k.target) && c(!1);
-    };
-    return r && document.addEventListener("mousedown", t), () => {
-      document.removeEventListener("mousedown", t);
+import { Mark as s, mergeAttributes as d } from "@tiptap/core";
+s.create({
+  name: "underline",
+  addOptions() {
+    return {
+      HTMLAttributes: {}
     };
-  }, [r]);
-  const n = e === "textColor", z = n ? /* @__PURE__ */ l(C, { name: "textColor" }) : /* @__PURE__ */ l(C, { name: "highlighter" });
-  return /* @__PURE__ */ V("div", { ref: a, className: `vizel-color-picker ${m ?? ""}`, "data-type": e, children: [
-    /* @__PURE__ */ l(
-      "button",
+  },
+  parseHTML() {
+    return [
       {
-        type: "button",
-        className: `vizel-bubble-menu-button vizel-color-picker-trigger ${i ? "has-color" : ""}`,
-        onClick: () => c(!r),
-        title: n ? "Text Color" : "Highlight",
-        "data-action": e,
-        style: n ? { color: i || "inherit" } : { "--highlight-color": i || "transparent" },
-        children: z
-      }
-    ),
-    r && /* @__PURE__ */ l("div", { className: "vizel-color-picker-dropdown", children: /* @__PURE__ */ l(
-      T,
+        tag: "u"
+      },
       {
-        colors: v,
-        value: i,
-        onChange: p,
-        label: n ? "Text color palette" : "Highlight color palette",
-        allowCustomColor: d,
-        recentColors: b,
-        showRecentColors: s,
-        noneValues: n ? ["inherit"] : ["transparent"]
+        style: "text-decoration",
+        consuming: !1,
+        getAttrs: (e) => e.includes("underline") ? {} : !1
       }
-    ) })
-  ] });
-}
-export {
-  A as VizelBubbleMenuColorPicker
-};
+    ];
+  },
+  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)
+      };
+    }
+  },
+  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()
+    };
+  }
+});

package/dist/index9.js

@@ -1,91 +1,2 @@
-import { jsx as e, jsxs as u } from "react/jsx-runtime";
-import { useState as a } from "react";
-import { useVizelState as m } from "./index28.js";
-import { VizelBubbleMenuButton as t } from "./index7.js";
-import { VizelBubbleMenuColorPicker as o } from "./index8.js";
-import { VizelIcon as l } from "./index14.js";
-import { VizelLinkEditor as h } from "./index15.js";
-import { VizelNodeSelector as k } from "./index16.js";
-function z({
-  editor: i,
-  className: r,
-  enableEmbed: n
-}) {
-  m(() => i);
-  const [s, c] = a(!1);
-  return s ? /* @__PURE__ */ e(
-    h,
-    {
-      editor: i,
-      onClose: () => c(!1),
-      ...n ? { enableEmbed: n } : {}
-    }
-  ) : /* @__PURE__ */ u("div", { className: `vizel-bubble-menu-toolbar ${r ?? ""}`, children: [
-    /* @__PURE__ */ e(k, { editor: i }),
-    /* @__PURE__ */ e(
-      t,
-      {
-        action: "bold",
-        onClick: () => i.chain().focus().toggleBold().run(),
-        isActive: i.isActive("bold"),
-        title: "Bold (Cmd+B)",
-        children: /* @__PURE__ */ e(l, { name: "bold" })
-      }
-    ),
-    /* @__PURE__ */ e(
-      t,
-      {
-        action: "italic",
-        onClick: () => i.chain().focus().toggleItalic().run(),
-        isActive: i.isActive("italic"),
-        title: "Italic (Cmd+I)",
-        children: /* @__PURE__ */ e(l, { name: "italic" })
-      }
-    ),
-    /* @__PURE__ */ e(
-      t,
-      {
-        action: "strike",
-        onClick: () => i.chain().focus().toggleStrike().run(),
-        isActive: i.isActive("strike"),
-        title: "Strikethrough",
-        children: /* @__PURE__ */ e(l, { name: "strikethrough" })
-      }
-    ),
-    /* @__PURE__ */ e(
-      t,
-      {
-        action: "underline",
-        onClick: () => i.chain().focus().toggleUnderline().run(),
-        isActive: i.isActive("underline"),
-        title: "Underline (Cmd+U)",
-        children: /* @__PURE__ */ e(l, { name: "underline" })
-      }
-    ),
-    /* @__PURE__ */ e(
-      t,
-      {
-        action: "code",
-        onClick: () => i.chain().focus().toggleCode().run(),
-        isActive: i.isActive("code"),
-        title: "Code (Cmd+E)",
-        children: /* @__PURE__ */ e(l, { name: "code" })
-      }
-    ),
-    /* @__PURE__ */ e(
-      t,
-      {
-        action: "link",
-        onClick: () => c(!0),
-        isActive: i.isActive("link"),
-        title: "Link (Cmd+K)",
-        children: /* @__PURE__ */ e(l, { name: "link" })
-      }
-    ),
-    /* @__PURE__ */ e(o, { editor: i, type: "textColor" }),
-    /* @__PURE__ */ e(o, { editor: i, type: "highlight" })
-  ] });
-}
-export {
-  z as VizelBubbleMenuDefault
-};
+import { initVizelIconRenderer as e } from "@vizel/core";
+e();

package/package.json

@@ -1,43 +1,29 @@
 {
   "name": "@vizel/react",
-  "version": "0.0.1-alpha.1",
-  "description": "React components for Vizel block-based Markdown editor",
-  "keywords": [
-    "react",
-    "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/react"
   },
-  "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"
@@ -48,13 +34,21 @@
   },
   "dependencies": {
     "@iconify/react": "^6",
-    "@vizel/core": "^0.0.1-alpha.1"
+    "@vizel/core": "^0.0.1-alpha.5"
   },
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19"
   },
   "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",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^5",