@sia.soul/sia-react-ui 0.1.0

package/dist/chunk-OMA75YLM.js

@@ -0,0 +1,298 @@
+import {
+  Dropdown,
+  Input
+} from "./chunk-DZ45HRVP.js";
+import {
+  Button
+} from "./chunk-MBS2HXLZ.js";
+import {
+  Icon
+} from "./chunk-YCVXUMGP.js";
+
+// src/components/RichTextEditor.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import DOMPurify from "dompurify";
+import { Editor as TiptapEditor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import Image from "@tiptap/extension-image";
+import { Table } from "@tiptap/extension-table";
+import TableRow from "@tiptap/extension-table-row";
+import TableHeader from "@tiptap/extension-table-header";
+import TableCell from "@tiptap/extension-table-cell";
+import TaskList from "@tiptap/extension-task-list";
+import TaskItem from "@tiptap/extension-task-item";
+import { Markdown } from "@tiptap/markdown";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function escapeHtml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#039;");
+}
+function normalizeContent(value) {
+  if (!value.trim()) return "";
+  if (/<\/?[a-z][\s\S]*>/i.test(value)) return value;
+  return escapeHtml(value).replace(/\r?\n/g, "<br>");
+}
+function sanitizeContent(value) {
+  return DOMPurify.sanitize(normalizeContent(value), {
+    USE_PROFILES: { html: true },
+    ADD_ATTR: ["loading", "decoding"]
+  }).replace(/<img\b/giu, '<img loading="lazy" decoding="async"');
+}
+function RichTextContent({ content, emptyText = "\u6682\u65E0\u5185\u5BB9", className = "", ...props }) {
+  const html = useMemo(() => sanitizeContent(content), [content]);
+  if (!html.trim()) return /* @__PURE__ */ jsx("div", { className: `sia-rich-text-content sia-rich-text-content--empty ${className}`.trim(), children: emptyText });
+  return /* @__PURE__ */ jsx("article", { className: `sia-rich-text-content ${className}`.trim(), dangerouslySetInnerHTML: { __html: html }, ...props });
+}
+function RichTextEditor({
+  value,
+  defaultValue = "",
+  contentFormat = "html",
+  toolbar = "basic",
+  placeholder = "\u8BF7\u8F93\u5165\u5185\u5BB9",
+  disabled = false,
+  minHeight = 150,
+  pasteImageHint = "\u53EF\u76F4\u63A5\u7C98\u8D34\u56FE\u7247",
+  onChange,
+  onPasteImage,
+  saveShortcut,
+  className = "",
+  id,
+  style,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const initialValueRef = useRef(value ?? defaultValue);
+  const lastEmittedValueRef = useRef(value ?? defaultValue);
+  const onChangeRef = useRef(onChange);
+  const onPasteImageRef = useRef(onPasteImage);
+  const saveShortcutRef = useRef(saveShortcut);
+  const contentFormatRef = useRef(contentFormat);
+  const editorElementRef = useRef(null);
+  const editorRef = useRef(null);
+  const [editor, setEditor] = useState(null);
+  const [linkEditorOpen, setLinkEditorOpen] = useState(false);
+  const [linkHref, setLinkHref] = useState("");
+  const [, setEditorRevision] = useState(0);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    onPasteImageRef.current = onPasteImage;
+  }, [onPasteImage]);
+  useEffect(() => {
+    saveShortcutRef.current = saveShortcut;
+  }, [saveShortcut]);
+  useEffect(() => {
+    contentFormatRef.current = contentFormat;
+  }, [contentFormat]);
+  const extensions = useMemo(() => [
+    StarterKit.configure({
+      heading: { levels: [1, 2, 3, 4, 5, 6] },
+      link: { openOnClick: false, autolink: true, linkOnPaste: true },
+      underline: { HTMLAttributes: { "data-sia-underline": "" } }
+    }),
+    Placeholder.configure({ placeholder }),
+    Image.configure({ allowBase64: false, inline: false }),
+    Table.configure({ resizable: true }),
+    TableRow,
+    TableHeader,
+    TableCell,
+    TaskList,
+    TaskItem.configure({ nested: true }),
+    Markdown.configure({ markedOptions: { gfm: true } })
+  ], [placeholder]);
+  useEffect(() => {
+    const element = editorElementRef.current;
+    if (!element) return;
+    const nextEditor = new TiptapEditor({
+      element,
+      extensions,
+      content: initialValueRef.current,
+      contentType: contentFormatRef.current,
+      editable: !disabled,
+      editorProps: {
+        attributes: {
+          role: "textbox",
+          "aria-label": ariaLabel ?? "\u5BCC\u6587\u672C\u7F16\u8F91\u5668",
+          "aria-multiline": "true"
+        },
+        handlePaste: (_view, event) => {
+          const pasteHandler = onPasteImageRef.current;
+          if (!pasteHandler) return false;
+          const images = Array.from(event.clipboardData?.items ?? []).filter((item) => item.kind === "file" && item.type.startsWith("image/")).map((item) => item.getAsFile()).filter((file) => Boolean(file));
+          if (!images.length) return false;
+          event.preventDefault();
+          void (async () => {
+            for (const file of images) {
+              try {
+                const src = await pasteHandler(file);
+                if (src) nextEditor.chain().focus().setImage({ src, alt: file.name || "\u7C98\u8D34\u7684\u56FE\u7247" }).run();
+              } catch {
+              }
+            }
+          })();
+          return true;
+        },
+        handleKeyDown: (_view, event) => {
+          if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "s" && saveShortcutRef.current) {
+            event.preventDefault();
+            saveShortcutRef.current();
+            return true;
+          }
+          return false;
+        }
+      },
+      onSelectionUpdate: () => setEditorRevision((current) => current + 1),
+      onUpdate: ({ editor: currentEditor }) => {
+        setEditorRevision((current) => current + 1);
+        const nextValue = contentFormatRef.current === "markdown" ? currentEditor.getMarkdown() : currentEditor.getHTML();
+        lastEmittedValueRef.current = nextValue;
+        onChangeRef.current?.(nextValue);
+      }
+    });
+    editorRef.current = nextEditor;
+    setEditor(nextEditor);
+    return () => {
+      editorRef.current = null;
+      setEditor(null);
+      nextEditor.destroy();
+    };
+  }, [ariaLabel, extensions]);
+  useEffect(() => {
+    editor?.setEditable(!disabled);
+  }, [disabled, editor]);
+  useEffect(() => {
+    if (!editor || value === void 0 || value === lastEmittedValueRef.current) return;
+    editor.commands.setContent(value, { emitUpdate: false, contentType: contentFormat });
+    lastEmittedValueRef.current = value;
+  }, [contentFormat, editor, value]);
+  function openLinkEditor(open) {
+    if (open && editor) setLinkHref(String(editor.getAttributes("link").href ?? ""));
+    setLinkEditorOpen(open);
+  }
+  function submitLink(event) {
+    event?.preventDefault();
+    if (!editor) return;
+    if (!linkHref.trim()) {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    } else {
+      editor.chain().focus().extendMarkRange("link").setLink({ href: linkHref.trim() }).run();
+    }
+    setLinkEditorOpen(false);
+  }
+  function formatButton(label, action, active = false, disabledByState = false, content) {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "text",
+        size: "small",
+        className: `sia-rich-text-editor__tool${active ? " is-active" : ""}`,
+        disabled: disabled || disabledByState || !editor,
+        "aria-label": label,
+        "aria-pressed": active || void 0,
+        title: label,
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: action,
+        children: content ?? label
+      }
+    );
+  }
+  const mergedStyle = {
+    ...style,
+    "--sia-rich-text-min-height": typeof minHeight === "number" ? `${minHeight}px` : minHeight
+  };
+  const currentBlockLabel = editor?.isActive("heading", { level: 1 }) ? "H1" : editor?.isActive("heading", { level: 2 }) ? "H2" : editor?.isActive("heading", { level: 3 }) ? "H3" : "\u6B63\u6587";
+  const blockTypeMenu = {
+    selectable: true,
+    selectedKeys: [editor?.isActive("heading", { level: 1 }) ? "h1" : editor?.isActive("heading", { level: 2 }) ? "h2" : editor?.isActive("heading", { level: 3 }) ? "h3" : "paragraph"],
+    items: [
+      { key: "paragraph", label: "\u6B63\u6587" },
+      { key: "h1", label: "\u4E00\u7EA7\u6807\u9898" },
+      { key: "h2", label: "\u4E8C\u7EA7\u6807\u9898" },
+      { key: "h3", label: "\u4E09\u7EA7\u6807\u9898" }
+    ],
+    onClick: ({ key }) => {
+      if (!editor) return;
+      if (key === "paragraph") editor.chain().focus().setParagraph().run();
+      else editor.chain().focus().toggleHeading({ level: Number(key.slice(1)) }).run();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ...props, id, style: mergedStyle, className: `sia-rich-text-editor${disabled ? " is-disabled" : ""} sia-rich-text-editor--${toolbar} ${className}`.trim(), children: [
+    /* @__PURE__ */ jsxs("div", { className: "sia-rich-text-editor__toolbar", "aria-label": "\u6587\u672C\u683C\u5F0F\u5DE5\u5177\u680F", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sia-rich-text-editor__toolbar-main", children: [
+        toolbar === "full" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          formatButton("\u64A4\u9500", () => editor?.chain().focus().undo().run(), false, !editor?.can().undo(), /* @__PURE__ */ jsx(Icon, { name: "undo" })),
+          formatButton("\u91CD\u505A", () => editor?.chain().focus().redo().run(), false, !editor?.can().redo(), /* @__PURE__ */ jsx(Icon, { name: "redo" })),
+          /* @__PURE__ */ jsx("span", { className: "sia-rich-text-editor__divider" }),
+          /* @__PURE__ */ jsx(Dropdown, { menu: blockTypeMenu, trigger: ["click"], placement: "bottomLeft", disabled: disabled || !editor, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "text", size: "small", className: "sia-rich-text-editor__block-type", disabled: disabled || !editor, "aria-label": "\u6BB5\u843D\u683C\u5F0F", title: "\u6BB5\u843D\u683C\u5F0F", onMouseDown: (event) => event.preventDefault(), children: [
+            currentBlockLabel,
+            /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 13 })
+          ] }) }),
+          /* @__PURE__ */ jsx("span", { className: "sia-rich-text-editor__divider" })
+        ] }) : null,
+        formatButton("\u52A0\u7C97", () => editor?.chain().focus().toggleBold().run(), Boolean(editor?.isActive("bold")), false, /* @__PURE__ */ jsx("strong", { children: "B" })),
+        formatButton("\u659C\u4F53", () => editor?.chain().focus().toggleItalic().run(), Boolean(editor?.isActive("italic")), false, /* @__PURE__ */ jsx("em", { children: "I" })),
+        toolbar === "full" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          formatButton("\u4E0B\u5212\u7EBF", () => editor?.chain().focus().toggleUnderline().run(), Boolean(editor?.isActive("underline")), false, /* @__PURE__ */ jsx("u", { children: "U" })),
+          formatButton("\u5220\u9664\u7EBF", () => editor?.chain().focus().toggleStrike().run(), Boolean(editor?.isActive("strike")), false, /* @__PURE__ */ jsx("s", { children: "S" })),
+          formatButton("\u884C\u5185\u4EE3\u7801", () => editor?.chain().focus().toggleCode().run(), Boolean(editor?.isActive("code")), false, "</>"),
+          /* @__PURE__ */ jsx(
+            Dropdown,
+            {
+              menu: { items: [] },
+              trigger: ["click"],
+              placement: "bottomLeft",
+              open: linkEditorOpen,
+              disabled: disabled || !editor,
+              onOpenChange: openLinkEditor,
+              popupClassName: "sia-rich-text-editor__link-popup",
+              popupRender: () => /* @__PURE__ */ jsxs("form", { className: "sia-rich-text-editor__link-form", onSubmit: submitLink, children: [
+                /* @__PURE__ */ jsx(Input, { autoFocus: true, "aria-label": "\u94FE\u63A5\u5730\u5740", value: linkHref, onChange: (event) => setLinkHref(event.target.value), placeholder: "https://example.com" }),
+                /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "small", children: "\u5E94\u7528" }),
+                editor?.isActive("link") ? /* @__PURE__ */ jsx(Button, { type: "button", size: "small", onClick: () => {
+                  setLinkHref("");
+                  editor.chain().focus().extendMarkRange("link").unsetLink().run();
+                  setLinkEditorOpen(false);
+                }, children: "\u79FB\u9664" }) : null
+              ] }),
+              children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "text", size: "small", className: `sia-rich-text-editor__tool${editor?.isActive("link") ? " is-active" : ""}`, disabled: disabled || !editor, "aria-label": "\u94FE\u63A5", "aria-pressed": editor?.isActive("link") || void 0, title: "\u94FE\u63A5", onMouseDown: (event) => event.preventDefault(), children: /* @__PURE__ */ jsx(Icon, { name: "link" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "sia-rich-text-editor__divider" })
+        ] }) : null,
+        formatButton("\u65E0\u5E8F\u5217\u8868", () => editor?.chain().focus().toggleBulletList().run(), Boolean(editor?.isActive("bulletList")), false, "\u2022 \u5217\u8868"),
+        formatButton("\u6709\u5E8F\u5217\u8868", () => editor?.chain().focus().toggleOrderedList().run(), Boolean(editor?.isActive("orderedList")), false, "1. \u5217\u8868"),
+        toolbar === "full" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          formatButton("\u4EFB\u52A1\u5217\u8868", () => editor?.chain().focus().toggleTaskList().run(), Boolean(editor?.isActive("taskList")), false, "\u2611 \u4EFB\u52A1"),
+          formatButton("\u5F15\u7528", () => editor?.chain().focus().toggleBlockquote().run(), Boolean(editor?.isActive("blockquote")), false, "\u275D \u5F15\u7528"),
+          formatButton("\u4EE3\u7801\u5757", () => editor?.chain().focus().toggleCodeBlock().run(), Boolean(editor?.isActive("codeBlock")), false, "\u4EE3\u7801\u5757"),
+          formatButton("\u63D2\u5165\u8868\u683C", () => editor?.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(), Boolean(editor?.isActive("table")), false, "\u8868\u683C"),
+          formatButton("\u5206\u5272\u7EBF", () => editor?.chain().focus().setHorizontalRule().run(), false, false, /* @__PURE__ */ jsx(Icon, { name: "minus" }))
+        ] }) : null
+      ] }),
+      onPasteImage ? /* @__PURE__ */ jsxs("small", { children: [
+        /* @__PURE__ */ jsx(Icon, { name: "image", size: 14 }),
+        pasteImageHint
+      ] }) : null
+    ] }),
+    toolbar === "full" && editor?.isActive("table") ? /* @__PURE__ */ jsxs("div", { className: "sia-rich-text-editor__table-toolbar", "aria-label": "\u8868\u683C\u5DE5\u5177\u680F", children: [
+      /* @__PURE__ */ jsx("span", { children: "\u8868\u683C" }),
+      formatButton("\u524D\u65B9\u63D2\u5165\u5217", () => editor.chain().focus().addColumnBefore().run(), false, !editor.can().addColumnBefore(), "\u524D\u63D2\u5217"),
+      formatButton("\u540E\u65B9\u63D2\u5165\u5217", () => editor.chain().focus().addColumnAfter().run(), false, !editor.can().addColumnAfter(), "\u540E\u63D2\u5217"),
+      formatButton("\u5220\u9664\u5F53\u524D\u5217", () => editor.chain().focus().deleteColumn().run(), false, !editor.can().deleteColumn(), "\u5220\u5217"),
+      /* @__PURE__ */ jsx("span", { className: "sia-rich-text-editor__divider" }),
+      formatButton("\u4E0A\u65B9\u63D2\u5165\u884C", () => editor.chain().focus().addRowBefore().run(), false, !editor.can().addRowBefore(), "\u4E0A\u63D2\u884C"),
+      formatButton("\u4E0B\u65B9\u63D2\u5165\u884C", () => editor.chain().focus().addRowAfter().run(), false, !editor.can().addRowAfter(), "\u4E0B\u63D2\u884C"),
+      formatButton("\u5220\u9664\u5F53\u524D\u884C", () => editor.chain().focus().deleteRow().run(), false, !editor.can().deleteRow(), "\u5220\u884C"),
+      /* @__PURE__ */ jsx("span", { className: "sia-rich-text-editor__divider" }),
+      formatButton("\u5220\u9664\u8868\u683C", () => editor.chain().focus().deleteTable().run(), false, !editor.can().deleteTable(), "\u5220\u9664\u8868\u683C")
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { ref: editorElementRef, className: "sia-rich-text-editor__content" })
+  ] });
+}
+
+export {
+  RichTextContent,
+  RichTextEditor
+};