zs_library 0.4.10 → 0.4.11

package/dist/components/editor/generative/ai-selector-commands.js

@@ -0,0 +1,78 @@
+import "./index.css";
+import { jsxs as t, Fragment as m, jsx as a } from "react/jsx-runtime";
+import { RefreshCcwDot as p, CheckCheck as d, ArrowDownWideNarrow as u, WrapText as h, StepForward as x } from "lucide-react";
+import { useEditor as v, getPrevText as f } from "novel";
+import { CommandGroup as n, CommandItem as c, CommandSeparator as g } from "../ui/command.js";
+const w = [
+  {
+    value: "improve",
+    label: "改进写作",
+    // Improve writing
+    icon: p
+  },
+  {
+    value: "fix",
+    label: "修正语法",
+    // Fix grammar
+    icon: d
+  },
+  {
+    value: "shorter",
+    label: "缩短文本",
+    // Make shorter
+    icon: u
+  },
+  {
+    value: "longer",
+    label: "扩展文本",
+    // Make longer
+    icon: h
+  }
+], A = ({ onSelect: l }) => {
+  const { editor: o } = v();
+  return /* @__PURE__ */ t(m, { children: [
+    /* @__PURE__ */ t(n, { heading: "编辑或校对选中文本", children: [
+      "  ",
+      w.map((e) => /* @__PURE__ */ t(
+        c,
+        {
+          onSelect: (r) => {
+            const s = o.state.selection.content(), i = o.storage.markdown.serializer.serialize(
+              s.content
+            );
+            l(i, r);
+          },
+          className: "flex gap-2 px-4",
+          value: e.value,
+          children: [
+            /* @__PURE__ */ a(e.icon, { className: "h-4 w-4 text-purple-500" }),
+            e.label
+          ]
+        },
+        e.value
+      ))
+    ] }),
+    /* @__PURE__ */ a(g, {}),
+    /* @__PURE__ */ t(n, { heading: "使用 AI 完成更多", children: [
+      "  ",
+      /* @__PURE__ */ t(
+        c,
+        {
+          onSelect: () => {
+            const e = o.state.selection.from, r = f(o, e);
+            l(r, "continue");
+          },
+          value: "continue",
+          className: "gap-2 px-4",
+          children: [
+            /* @__PURE__ */ a(x, { className: "h-4 w-4 text-purple-500" }),
+            "继续写作"
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  A as default
+};

package/dist/components/editor/generative/ai-selector.js

@@ -0,0 +1,90 @@
+import "./index.css";
+import { jsxs as i, jsx as e, Fragment as h } from "react/jsx-runtime";
+import { useCompletion as f } from "@ai-sdk/react";
+import { ArrowUp as g } from "lucide-react";
+import { useEditor as x, addAIHighlight as C } from "novel";
+import { useState as v } from "react";
+import A from "react-markdown";
+import { toast as c } from "sonner";
+import { Button as I } from "../ui/button.js";
+import N from "../ui/icons/crazy-spinner.js";
+import { ScrollArea as w } from "../ui/scroll-area.js";
+import y from "./ai-completion-command.js";
+import z from "./ai-selector-commands.js";
+import { Command as S, CommandInput as b } from "../ui/command.js";
+import { RiSparklingFill as k } from "@remixicon/react";
+function K({ onOpenChange: d, options: u }) {
+  const { editor: t } = x(), [n, m] = v(""), { completion: r, complete: s, isLoading: p } = f({
+    // id: "novel",
+    api: "/api/generate",
+    onResponse: (o) => {
+      if (o.status === 429) {
+        c.error("You have reached your request limit for the day.");
+        return;
+      }
+    },
+    onError: (o) => {
+      c.error(o.message);
+    },
+    ...u
+  }), a = r.length > 0;
+  return /* @__PURE__ */ i(S, { className: "w-[350px]", children: [
+    a && /* @__PURE__ */ e("div", { className: "flex max-h-[400px]", children: /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e("div", { className: "prose p-2 px-4 prose-sm", children: /* @__PURE__ */ e(A, { children: r }) }) }) }),
+    p && /* @__PURE__ */ i("div", { className: "flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-purple-500", children: [
+      /* @__PURE__ */ e(k, { size: 14, className: "mr-2 shrink-0" }),
+      "AI正在思考",
+      /* @__PURE__ */ e("div", { className: "ml-2 mt-1", children: /* @__PURE__ */ e(N, {}) })
+    ] }),
+    !p && /* @__PURE__ */ i(h, { children: [
+      /* @__PURE__ */ i("div", { className: "relative", children: [
+        /* @__PURE__ */ e(
+          b,
+          {
+            value: n,
+            onValueChange: m,
+            autoFocus: !0,
+            placeholder: a ? "告诉AI下一步该怎么做" : "要求AI编辑或生成……",
+            onFocus: () => C(t)
+          }
+        ),
+        /* @__PURE__ */ e(
+          I,
+          {
+            size: "icon",
+            className: "absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full bg-purple-500 hover:bg-purple-900",
+            onClick: () => {
+              if (r)
+                return s(r, {
+                  body: { option: "zap", command: n }
+                }).then(() => m(""));
+              const o = t.state.selection.content(), l = t.storage.markdown.serializer.serialize(
+                o.content
+              );
+              s(l, {
+                body: { option: "zap", command: n }
+              }).then(() => m(""));
+            },
+            children: /* @__PURE__ */ e(g, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      a ? /* @__PURE__ */ e(
+        y,
+        {
+          onDiscard: () => {
+            t.chain().unsetHighlight().focus().run(), d(!1);
+          },
+          completion: r
+        }
+      ) : /* @__PURE__ */ e(
+        z,
+        {
+          onSelect: (o, l) => s(o, { body: { option: l } })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  K as AISelector
+};

package/dist/components/editor/generative/drag-handle.js

@@ -0,0 +1,70 @@
+import "./index.css";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { cx as m, css as l } from "@emotion/css";
+import { RiAddLine as p, RiDraggable as u } from "@remixicon/react";
+import { useEditor as h } from "novel";
+import { Button as s } from "../ui/button.js";
+import i from "../ui/tooltip.js";
+import f from "./generative-dropdown-menu.js";
+const P = () => {
+  const { editor: t } = h(), c = (d) => {
+    if (!t) return;
+    const o = d.target.closest(".custom-drag-handle");
+    if (!o) return;
+    const a = o.dataset.nodePos, n = a !== void 0 ? parseInt(o.dataset.nodePos || "0", 10) : a;
+    n !== void 0 && (t.commands.focus(), t.commands.setNodeSelection(n), t.commands.createParagraphNear() ? t.commands.insertContent("/") : t.chain().insertContentAt(n, {
+      type: "paragraph",
+      content: [{ type: "text", text: "/" }]
+    }).run());
+  };
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: m(
+        "custom-drag-handle",
+        l`
+          width: auto;
+          background: none;
+          display: flex;
+          align-items: center;
+        `
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          i,
+          {
+            placement: "bottom",
+            overlay: /* @__PURE__ */ r("div", { children: [
+              "点击",
+              /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "以在下方添加快" })
+            ] }),
+            children: /* @__PURE__ */ e(
+              s,
+              {
+                size: "icon",
+                variant: "ghost",
+                className: "w-auto h-auto p-0.5",
+                onClick: c,
+                children: /* @__PURE__ */ e(p, { className: "cursor-pointer", size: 22 })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(
+          i,
+          {
+            placement: "bottom",
+            overlay: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ r("div", { children: [
+              "拖动",
+              /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "以移动" })
+            ] }) }),
+            children: /* @__PURE__ */ e(s, { size: "icon", variant: "ghost", className: "w-auto h-auto p-0.5", children: /* @__PURE__ */ e(u, { size: 22 }) })
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  P as default
+};

package/dist/components/editor/generative/generative-dropdown-menu.js

@@ -0,0 +1,55 @@
+import "./index.css";
+import { jsx as n } from "react/jsx-runtime";
+import { RiRepeatLine as m, RiFileCopyLine as d, RiDeleteBinLine as f } from "@remixicon/react";
+import { DropdownMenu as p } from "../ui/dropdown-menu.js";
+import { useEditor as u } from "novel";
+import { NodeSelection as o } from "prosemirror-state";
+import { NODE_SELECTOR_ITEMS as y } from "../lib/nodes.js";
+const h = ({ children: i, ...s }) => {
+  const { editor: e } = u(), r = () => {
+    e && e.state.selection instanceof o && (e.commands.deleteSelection(), e.commands.focus());
+  }, c = () => {
+    if (e && e.state.selection instanceof o) {
+      const t = e.state.selection.node, l = e.state.selection.to;
+      e.chain().insertContentAt(l, {
+        type: t.type.name,
+        attrs: { ...t.attrs },
+        content: t.content.toJSON()
+      }).focus().run();
+    }
+  }, a = y.map((t) => ({
+    key: `transform-${t.name}`,
+    icon: /* @__PURE__ */ n(t.icon, { size: 16 }),
+    label: t.name,
+    onClick: () => {
+      e && e.state.selection instanceof o && t.command(e);
+    },
+    isActive: t.isActive(e)
+  }));
+  return /* @__PURE__ */ n(p, { items: [
+    {
+      key: "transform",
+      type: "submenu",
+      icon: /* @__PURE__ */ n(m, { size: 16 }),
+      label: "转换成",
+      children: a
+    },
+    {
+      key: "duplicate",
+      icon: /* @__PURE__ */ n(d, { size: 16 }),
+      label: "创建副本",
+      onClick: c
+    },
+    { key: "divider", type: "divider" },
+    {
+      key: "delete",
+      icon: /* @__PURE__ */ n(f, { size: 16 }),
+      label: "删除",
+      className: "text-red-500",
+      onClick: r
+    }
+  ], ...s, children: i });
+};
+export {
+  h as default
+};

package/dist/components/editor/generative/generative-menu-switch.js

@@ -0,0 +1,59 @@
+import "./index.css";
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { useEditor as a, removeAIHighlight as d, EditorBubble as f } from "novel";
+import { useEffect as c, Fragment as u } from "react";
+import { Button as p } from "../ui/button.js";
+import { AISelector as n } from "./ai-selector.js";
+import { RiSparklingFill as g } from "@remixicon/react";
+const H = ({
+  children: m,
+  open: t,
+  onOpenChange: r,
+  enableAI: o = !1,
+  aiOptions: l
+}) => {
+  const { editor: e } = a();
+  return c(() => {
+    t || d(e);
+  }, [t]), /* @__PURE__ */ i(
+    f,
+    {
+      tippyOptions: {
+        placement: t ? "bottom-start" : "top",
+        onHidden: () => {
+          r(!1), e.chain().unsetHighlight().run();
+        }
+      },
+      className: "flex w-fit max-w-[90vw] overflow-hidden rounded-lg border border-muted bg-background shadow-xl p-1 gap-1",
+      children: [
+        t && o && /* @__PURE__ */ s(
+          n,
+          {
+            open: t,
+            onOpenChange: r,
+            options: l
+          }
+        ),
+        !t && /* @__PURE__ */ i(u, { children: [
+          o && /* @__PURE__ */ i(
+            p,
+            {
+              className: "gap-1 text-purple-500",
+              variant: "ghost",
+              onClick: () => r(!0),
+              size: "sm",
+              children: [
+                /* @__PURE__ */ s(g, { size: 14 }),
+                "询问AI"
+              ]
+            }
+          ),
+          m
+        ] })
+      ]
+    }
+  );
+};
+export {
+  H as default
+};

package/dist/components/editor/image-upload.js

@@ -0,0 +1,36 @@
+import "./index.css";
+import { createImageUpload as m } from "novel";
+import { toast as o } from "sonner";
+const p = (e) => {
+  const s = fetch("/api/upload", {
+    method: "POST",
+    headers: {
+      "content-type": (e == null ? void 0 : e.type) || "application/octet-stream",
+      "x-vercel-filename": (e == null ? void 0 : e.name) || "image.png"
+    },
+    body: e
+  });
+  return new Promise((a, i) => {
+    o.promise(
+      s.then(async (r) => {
+        if (r.status === 200) {
+          const { url: t } = await r.json(), n = new Image();
+          n.src = t, n.onload = () => {
+            a(t);
+          };
+        } else throw r.status === 401 ? (a(e), new Error("`BLOB_READ_WRITE_TOKEN` environment variable not found, reading image locally instead.")) : new Error("Error uploading image. Please try again.");
+      }),
+      {
+        loading: "Uploading image...",
+        success: "Image uploaded successfully.",
+        error: (r) => (i(r), r.message)
+      }
+    );
+  });
+}, g = m({
+  onUpload: p,
+  validateFn: (e) => e.type.includes("image/") ? e.size / 1024 / 1024 > 20 ? (o.error("File size too big (max 20MB)."), !1) : !0 : (o.error("File type not supported."), !1)
+});
+export {
+  g as uploadFn
+};

package/dist/components/editor/index.js

@@ -0,0 +1,8 @@
+import "./index.css";
+import { Editor as r } from "./editor.js";
+import o from "./preview.js";
+const t = r;
+t.Preview = o;
+export {
+  t as default
+};

package/dist/components/editor/lib/colors.js

@@ -0,0 +1,98 @@
+import "./index.css";
+const l = [
+  {
+    name: "默认",
+    // Default
+    color: "var(--novel-black)"
+  },
+  {
+    name: "紫色",
+    // Purple
+    color: "#9333EA"
+  },
+  {
+    name: "红色",
+    // Red
+    color: "#E00000"
+  },
+  {
+    name: "黄色",
+    // Yellow
+    color: "#EAB308"
+  },
+  {
+    name: "蓝色",
+    // Blue
+    color: "#2563EB"
+  },
+  {
+    name: "绿色",
+    // Green
+    color: "#008A00"
+  },
+  {
+    name: "橙色",
+    // Orange
+    color: "#FFA500"
+  },
+  {
+    name: "粉色",
+    // Pink
+    color: "#BA4081"
+  },
+  {
+    name: "灰色",
+    // Gray
+    color: "#A8A29E"
+  }
+], e = [
+  {
+    name: "默认背景",
+    // Default
+    color: "var(--novel-highlight-default)"
+  },
+  {
+    name: "紫色背景",
+    // Purple
+    color: "var(--novel-highlight-purple)"
+  },
+  {
+    name: "红色背景",
+    // Red
+    color: "var(--novel-highlight-red)"
+  },
+  {
+    name: "黄色背景",
+    // Yellow
+    color: "var(--novel-highlight-yellow)"
+  },
+  {
+    name: "蓝色背景",
+    // Blue
+    color: "var(--novel-highlight-blue)"
+  },
+  {
+    name: "绿色背景",
+    // Green
+    color: "var(--novel-highlight-green)"
+  },
+  {
+    name: "橙色背景",
+    // Orange
+    color: "var(--novel-highlight-orange)"
+  },
+  {
+    name: "粉色背景",
+    // Pink
+    color: "var(--novel-highlight-pink)"
+  },
+  {
+    name: "灰色背景",
+    // Gray
+    color: "var(--novel-highlight-gray)"
+  }
+];
+export {
+  e as HIGHLIGHT_COLORS,
+  l as TEXT_COLORS
+};

package/dist/components/editor/lib/content.js

@@ -0,0 +1,8 @@
+import "./index.css";
+const o = {
+  type: "doc",
+  content: []
+};
+export {
+  o as defaultEditorContent
+};

package/dist/components/editor/lib/nodes.js

@@ -0,0 +1,70 @@
+import "./index.css";
+import { RiText as i, RiH1 as c, RiH2 as o, RiH3 as n, RiListCheck as s, RiListUnordered as t, RiListOrdered as a, RiQuoteText as l, RiCodeLine as d } from "@remixicon/react";
+const v = [
+  {
+    name: "正文",
+    // Text
+    icon: i,
+    command: (e) => e.chain().focus().clearNodes().run(),
+    isActive: (e) => e.isActive("paragraph") && !e.isActive("bulletList") && !e.isActive("orderedList")
+  },
+  {
+    name: "标题 1",
+    // Heading 1
+    icon: c,
+    command: (e) => e.chain().focus().clearNodes().toggleHeading({ level: 1 }).run(),
+    isActive: (e) => e.isActive("heading", { level: 1 })
+  },
+  {
+    name: "标题 2",
+    // Heading 2
+    icon: o,
+    command: (e) => e.chain().focus().clearNodes().toggleHeading({ level: 2 }).run(),
+    isActive: (e) => e.isActive("heading", { level: 2 })
+  },
+  {
+    name: "标题 3",
+    // Heading 3
+    icon: n,
+    command: (e) => e.chain().focus().clearNodes().toggleHeading({ level: 3 }).run(),
+    isActive: (e) => e.isActive("heading", { level: 3 })
+  },
+  {
+    name: "待办列表",
+    // To-do List
+    icon: s,
+    command: (e) => e.chain().focus().clearNodes().toggleTaskList().run(),
+    isActive: (e) => e.isActive("taskItem")
+  },
+  {
+    name: "无序列表",
+    // Bullet List
+    icon: t,
+    command: (e) => e.chain().focus().clearNodes().toggleBulletList().run(),
+    isActive: (e) => e.isActive("bulletList")
+  },
+  {
+    name: "有序列表",
+    // Numbered List
+    icon: a,
+    command: (e) => e.chain().focus().clearNodes().toggleOrderedList().run(),
+    isActive: (e) => e.isActive("orderedList")
+  },
+  {
+    name: "引用",
+    // Quote
+    icon: l,
+    command: (e) => e.chain().focus().clearNodes().toggleBlockquote().run(),
+    isActive: (e) => e.isActive("blockquote")
+  },
+  {
+    name: "代码块",
+    // Code
+    icon: d,
+    command: (e) => e.chain().focus().clearNodes().toggleCodeBlock().run(),
+    isActive: (e) => e.isActive("codeBlock")
+  }
+];
+export {
+  v as NODE_SELECTOR_ITEMS
+};

package/dist/components/editor/lib/url-utils.js

@@ -0,0 +1,21 @@
+import "./index.css";
+function r(n) {
+  try {
+    return new URL(n), !0;
+  } catch {
+    return !1;
+  }
+}
+function e(n) {
+  if (r(n)) return n;
+  try {
+    if (n.includes(".") && !n.includes(" "))
+      return new URL(`https://${n}`).toString();
+  } catch {
+    return null;
+  }
+}
+export {
+  e as getUrlFromString,
+  r as isValidUrl
+};

package/dist/components/editor/preview.js

@@ -0,0 +1,12 @@
+import "./index.css";
+import { jsx as r } from "react/jsx-runtime";
+import { generateHTML as o } from "@tiptap/html";
+import { useMemo as n } from "react";
+import { defaultExtensions as i } from "./extensions.js";
+const u = ({ json: e }) => {
+  const t = n(() => o(e ?? {}, i), [e]);
+  return /* @__PURE__ */ r("div", { className: "tiptap ProseMirror prose prose-lg dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full", children: /* @__PURE__ */ r("div", { dangerouslySetInnerHTML: { __html: t } }) });
+};
+export {
+  u as default
+};