@vizel/react 0.0.1-alpha.1

package/dist/index8.js

@@ -0,0 +1,63 @@
+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);
+    };
+  }, [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",
+      {
+        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,
+      {
+        colors: v,
+        value: i,
+        onChange: p,
+        label: n ? "Text color palette" : "Highlight color palette",
+        allowCustomColor: d,
+        recentColors: b,
+        showRecentColors: s,
+        noneValues: n ? ["inherit"] : ["transparent"]
+      }
+    ) })
+  ] });
+}
+export {
+  A as VizelBubbleMenuColorPicker
+};

package/dist/index9.js

@@ -0,0 +1,91 @@
+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
+};

package/package.json

@@ -0,0 +1,64 @@
+{
+  "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",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/seijikohara/vizel.git",
+    "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",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@iconify/react": "^6",
+    "@vizel/core": "^0.0.1-alpha.1"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^5",
+    "vite": "^7",
+    "vite-plugin-dts": "^4"
+  }
+}