@sia.soul/sia-react-ui 0.1.0

package/dist/chunk-6VXOLMKZ.js

@@ -0,0 +1,381 @@
+// src/components/MarkdownEditor.tsx
+import { useEffect, useRef, useState } from "react";
+import "vditor/dist/index.css";
+
+// src/components/markdownPaste.ts
+function isLikelyMarkdown(value) {
+  const text = value.trim();
+  if (!text) return false;
+  const blockMarkdown = [
+    /(^|\n)[ \t]{0,3}#{1,6}[ \t]+\S/,
+    /(^|\n)[ \t]{0,3}(?:[-+*]|\d+[.)])[ \t]+\S/,
+    /(^|\n)[ \t]{0,3}>[ \t]+\S/,
+    /(^|\n)[ \t]{0,3}(?:```|~~~)/,
+    /(^|\n)[ \t]{0,3}[-+*][ \t]+\[[ xX]\][ \t]+\S/,
+    /(^|\n)[ \t]{0,3}(?:[-*_][ \t]*){3,}(?:\n|$)/,
+    /(^|\n)[^\n]*\|[^\n]*\n[ \t]*\|?[ \t]*:?-{3,}/
+  ];
+  if (blockMarkdown.some((pattern) => pattern.test(text))) return true;
+  return /!\[[^\]]*\]\([^\n)]+\)|\[[^\]]+\]\([^\n)]+\)|\*\*[^\n*]+\*\*|__[^\n_]+__|~~[^\n~]+~~/.test(text);
+}
+
+// src/components/vditorZhCn.ts
+var VDITOR_ZH_CN = {
+  alignCenter: "\u5C45\u4E2D",
+  alignLeft: "\u5C45\u5DE6",
+  alignRight: "\u5C45\u53F3",
+  alternateText: "\u66FF\u4EE3\u6587\u672C",
+  bold: "\u7C97\u4F53",
+  both: "\u7F16\u8F91 & \u9884\u89C8",
+  cancelUpload: "\u53D6\u6D88\u4E0A\u4F20",
+  check: "\u4EFB\u52A1\u5217\u8868",
+  close: "\u5173\u95ED",
+  code: "\u4EE3\u7801\u5757",
+  "code-theme": "\u4EE3\u7801\u5757\u4E3B\u9898\u9884\u89C8",
+  column: "\u5217",
+  comment: "\u8BC4\u8BBA",
+  confirm: "\u786E\u5B9A",
+  "content-theme": "\u5185\u5BB9\u4E3B\u9898\u9884\u89C8",
+  copied: "\u5DF2\u590D\u5236",
+  copy: "\u590D\u5236",
+  "delete-column": "\u5220\u9664\u5217",
+  "delete-row": "\u5220\u9664\u884C",
+  devtools: "\u5F00\u53D1\u8005\u5DE5\u5177",
+  down: "\u4E0B",
+  downloadTip: "\u8BE5\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u4E0B\u8F7D\u529F\u80FD",
+  edit: "\u7F16\u8F91",
+  "edit-mode": "\u5207\u6362\u7F16\u8F91\u6A21\u5F0F",
+  emoji: "\u8868\u60C5",
+  export: "\u5BFC\u51FA",
+  fileTypeError: "\u6587\u4EF6\u7C7B\u578B\u4E0D\u5141\u8BB8\u4E0A\u4F20\uFF0C\u8BF7\u538B\u7F29\u540E\u518D\u8BD5",
+  footnoteRef: "\u811A\u6CE8\u6807\u8BC6",
+  fullscreen: "\u5168\u5C4F\u5207\u6362",
+  generate: "\u751F\u6210\u4E2D",
+  headings: "\u6807\u9898",
+  heading1: "\u4E00\u7EA7\u6807\u9898",
+  heading2: "\u4E8C\u7EA7\u6807\u9898",
+  heading3: "\u4E09\u7EA7\u6807\u9898",
+  heading4: "\u56DB\u7EA7\u6807\u9898",
+  heading5: "\u4E94\u7EA7\u6807\u9898",
+  heading6: "\u516D\u7EA7\u6807\u9898",
+  help: "\u5E2E\u52A9",
+  imageURL: "\u56FE\u7247\u5730\u5740",
+  indent: "\u5217\u8868\u7F29\u8FDB",
+  info: "\u5173\u4E8E",
+  "inline-code": "\u884C\u5185\u4EE3\u7801",
+  "insert-after": "\u672B\u5C3E\u63D2\u5165\u884C",
+  "insert-before": "\u8D77\u59CB\u63D2\u5165\u884C",
+  insertColumnLeft: "\u5728\u5DE6\u8FB9\u63D2\u5165\u4E00\u5217",
+  insertColumnRight: "\u5728\u53F3\u8FB9\u63D2\u5165\u4E00\u5217",
+  insertRowAbove: "\u5728\u4E0A\u65B9\u63D2\u5165\u4E00\u884C",
+  insertRowBelow: "\u5728\u4E0B\u65B9\u63D2\u5165\u4E00\u884C",
+  instantRendering: "\u5373\u65F6\u6E32\u67D3",
+  italic: "\u659C\u4F53",
+  language: "\u8BED\u8A00",
+  line: "\u5206\u9694\u7EBF",
+  link: "\u94FE\u63A5",
+  linkRef: "\u5F15\u7528\u6807\u8BC6",
+  list: "\u65E0\u5E8F\u5217\u8868",
+  more: "\u66F4\u591A",
+  nameEmpty: "\u6587\u4EF6\u540D\u4E0D\u80FD\u4E3A\u7A7A",
+  "ordered-list": "\u6709\u5E8F\u5217\u8868",
+  outdent: "\u5217\u8868\u53CD\u5411\u7F29\u8FDB",
+  outline: "\u5927\u7EB2",
+  over: "\u8D85\u8FC7",
+  performanceTip: "\u5B9E\u65F6\u9884\u89C8\u9700 ${x}ms\uFF0C\u53EF\u70B9\u51FB\u7F16\u8F91 & \u9884\u89C8\u6309\u94AE\u8FDB\u884C\u5173\u95ED",
+  preview: "\u9884\u89C8",
+  quote: "\u5F15\u7528",
+  record: "\u5F00\u59CB\u5F55\u97F3/\u7ED3\u675F\u5F55\u97F3",
+  "record-tip": "\u8BE5\u8BBE\u5907\u4E0D\u652F\u6301\u5F55\u97F3\u529F\u80FD",
+  recording: "\u5F55\u97F3\u4E2D...",
+  redo: "\u91CD\u505A",
+  remove: "\u5220\u9664",
+  row: "\u884C",
+  spin: "\u65CB\u8F6C",
+  splitView: "\u5206\u5C4F\u9884\u89C8",
+  strike: "\u5220\u9664\u7EBF",
+  table: "\u8868\u683C",
+  textIsNotEmpty: "\u6587\u672C\uFF08\u4E0D\u80FD\u4E3A\u7A7A\uFF09",
+  title: "\u6807\u9898",
+  tooltipText: "\u63D0\u793A\u6587\u672C",
+  undo: "\u64A4\u9500",
+  up: "\u4E0A",
+  update: "\u66F4\u65B0",
+  upload: "\u4E0A\u4F20\u56FE\u7247\u6216\u6587\u4EF6",
+  uploadError: "\u4E0A\u4F20\u9519\u8BEF",
+  uploading: "\u4E0A\u4F20\u4E2D...",
+  wysiwyg: "\u6240\u89C1\u5373\u6240\u5F97"
+};
+
+// src/components/MarkdownEditor.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var vditorLoaders = /* @__PURE__ */ new Map();
+var BASE_TOOLBAR = [
+  "headings",
+  "bold",
+  "italic",
+  "strike",
+  "link",
+  "|",
+  "list",
+  "ordered-list",
+  "check",
+  "outdent",
+  "indent",
+  "|",
+  "quote",
+  "line",
+  "code",
+  "inline-code",
+  "table",
+  "|",
+  "undo",
+  "redo",
+  "|",
+  "edit-mode",
+  "both",
+  "preview",
+  "outline",
+  "fullscreen"
+];
+function escapeMarkdownAlt(value) {
+  return value.replace(/[\[\]\\]/g, "\\$&");
+}
+function applyEditorAriaLabel(element, label) {
+  element.querySelectorAll(".vditor-wysiwyg, .vditor-ir, .vditor-sv").forEach((editor) => {
+    editor.setAttribute("aria-label", label);
+    editor.setAttribute("role", "textbox");
+    editor.setAttribute("aria-multiline", "true");
+  });
+}
+function loadVditor(assetBaseUrl) {
+  if (typeof window === "undefined") {
+    return Promise.reject(new Error("Vditor \u53EA\u80FD\u5728\u6D4F\u89C8\u5668\u4E2D\u52A0\u8F7D"));
+  }
+  if (window.Vditor) return Promise.resolve(window.Vditor);
+  if (!assetBaseUrl) {
+    const bundledKey = "__sia_bundled_vditor__";
+    const bundledPending = vditorLoaders.get(bundledKey);
+    if (bundledPending) return bundledPending;
+    const bundledLoader = Promise.all([
+      // Vditor normally requests its Markdown engine from a CDN at runtime.
+      // @ts-ignore The bundled script installs window.Lute as a side effect.
+      import("vditor/dist/js/lute/lute.min.js"),
+      // Vditor also loads its SVG sprite from the CDN unless it already exists.
+      // @ts-ignore The side-effect module injects the Ant Design icon sprite.
+      import("vditor/dist/js/icons/ant.js"),
+      import("vditor")
+    ]).then(([, , { default: Vditor }]) => {
+      if (!document.getElementById("vditorLuteScript")) {
+        const bundledLuteMarker = document.createElement("script");
+        bundledLuteMarker.id = "vditorLuteScript";
+        bundledLuteMarker.dataset.siaBundled = "true";
+        document.head.append(bundledLuteMarker);
+      }
+      if (!document.getElementById("vditorIconScript")) {
+        const bundledIconMarker = document.createElement("script");
+        bundledIconMarker.id = "vditorIconScript";
+        bundledIconMarker.dataset.siaBundled = "true";
+        document.head.append(bundledIconMarker);
+      }
+      window.Vditor = Vditor;
+      return Vditor;
+    });
+    vditorLoaders.set(bundledKey, bundledLoader);
+    return bundledLoader;
+  }
+  const baseUrl = assetBaseUrl.replace(/\/$/, "");
+  const scriptUrl = `${baseUrl}/dist/index.min.js`;
+  const pending = vditorLoaders.get(scriptUrl);
+  if (pending) return pending;
+  const loader = new Promise((resolve, reject) => {
+    const existing = document.querySelector(`script[data-sia-vditor="${scriptUrl}"]`);
+    const script = existing ?? document.createElement("script");
+    const handleLoad = () => {
+      if (window.Vditor) resolve(window.Vditor);
+      else reject(new Error("Vditor \u811A\u672C\u5DF2\u52A0\u8F7D\uFF0C\u4F46\u672A\u627E\u5230\u5168\u5C40\u6784\u9020\u5668"));
+    };
+    const handleError = () => reject(new Error(`Vditor \u811A\u672C\u52A0\u8F7D\u5931\u8D25\uFF1A${scriptUrl}`));
+    script.addEventListener("load", handleLoad, { once: true });
+    script.addEventListener("error", handleError, { once: true });
+    if (!existing) {
+      script.src = scriptUrl;
+      script.async = true;
+      script.dataset.siaVditor = scriptUrl;
+      document.head.append(script);
+    }
+  });
+  vditorLoaders.set(scriptUrl, loader);
+  return loader;
+}
+function MarkdownEditor({
+  value,
+  defaultValue = "",
+  onChange,
+  mode = "wysiwyg",
+  placeholder = "\u8BF7\u8F93\u5165 Markdown \u6B63\u6587",
+  minHeight = 320,
+  disabled = false,
+  ariaLabel = "Markdown \u7F16\u8F91\u5668",
+  assetBaseUrl,
+  saveShortcut,
+  onUploadImage,
+  smartMarkdownPaste = true,
+  className,
+  style,
+  ...props
+}) {
+  const mountRef = useRef(null);
+  const editorRef = useRef(null);
+  const onChangeRef = useRef(onChange);
+  const saveShortcutRef = useRef(saveShortcut);
+  const uploadImageRef = useRef(onUploadImage);
+  const disabledRef = useRef(disabled);
+  const smartMarkdownPasteRef = useRef(smartMarkdownPaste);
+  const valueRef = useRef(value ?? defaultValue);
+  const lastEmittedValueRef = useRef(value ?? defaultValue);
+  const [ready, setReady] = useState(false);
+  const [loadError, setLoadError] = useState("");
+  const hasImageUpload = Boolean(onUploadImage);
+  onChangeRef.current = onChange;
+  saveShortcutRef.current = saveShortcut;
+  uploadImageRef.current = onUploadImage;
+  disabledRef.current = disabled;
+  smartMarkdownPasteRef.current = smartMarkdownPaste;
+  valueRef.current = value ?? valueRef.current;
+  useEffect(() => {
+    const mount = mountRef.current;
+    if (!mount) return;
+    let disposed = false;
+    let createdEditor = null;
+    let editorInitialized = false;
+    let removeSmartMarkdownPaste = () => {
+    };
+    setLoadError("");
+    void loadVditor(assetBaseUrl).then((Vditor) => {
+      if (disposed) return;
+      const toolbar = hasImageUpload ? [...BASE_TOOLBAR.slice(0, 17), "upload", ...BASE_TOOLBAR.slice(17)] : [...BASE_TOOLBAR];
+      createdEditor = new Vditor(mount, {
+        value: valueRef.current,
+        mode,
+        lang: "zh_CN",
+        i18n: VDITOR_ZH_CN,
+        icon: "ant",
+        width: "100%",
+        height: "100%",
+        minHeight: typeof minHeight === "number" ? minHeight : void 0,
+        placeholder,
+        cdn: assetBaseUrl,
+        cache: { enable: false },
+        toolbar,
+        toolbarConfig: { pin: true },
+        counter: { enable: true, type: "text" },
+        outline: { enable: false, position: "right" },
+        preview: {
+          mode: "both",
+          delay: 180,
+          actions: []
+        },
+        ...hasImageUpload ? { upload: {
+          accept: "image/*",
+          handler: async (files) => {
+            const imageFiles = Array.from(files).filter(
+              (file) => file.type.startsWith("image/")
+            );
+            if (imageFiles.length === 0 || !uploadImageRef.current) return null;
+            const images = await Promise.all(
+              imageFiles.map(async (file) => ({
+                name: file.name,
+                url: await uploadImageRef.current(file)
+              }))
+            );
+            editorRef.current?.insertValue(
+              images.map(({ name, url }) => `![${escapeMarkdownAlt(name)}](${url})`).join("\n")
+            );
+            return null;
+          }
+        } } : {},
+        input: (markdown) => {
+          lastEmittedValueRef.current = markdown;
+          onChangeRef.current?.(markdown);
+        },
+        keydown: (event) => {
+          if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "s") {
+            event.preventDefault();
+            event.stopPropagation();
+            saveShortcutRef.current?.();
+          }
+        },
+        after: () => {
+          editorInitialized = true;
+          if (disposed || !createdEditor) {
+            createdEditor?.destroy();
+            return;
+          }
+          editorRef.current = createdEditor;
+          applyEditorAriaLabel(mount, ariaLabel);
+          const handleSmartMarkdownPaste = (event) => {
+            if (!smartMarkdownPasteRef.current || disabledRef.current) return;
+            const target = event.target;
+            if (!(target instanceof Element) || !target.closest(".vditor-wysiwyg, .vditor-ir")) return;
+            const clipboard = event.clipboardData;
+            const explicitMarkdown = clipboard?.getData("text/markdown") ?? "";
+            const markdown = explicitMarkdown || clipboard?.getData("text/plain") || "";
+            if (!clipboard || !explicitMarkdown && !isLikelyMarkdown(markdown)) return;
+            event.preventDefault();
+            event.stopPropagation();
+            editorRef.current?.insertMD(markdown);
+          };
+          mount.addEventListener("paste", handleSmartMarkdownPaste, true);
+          removeSmartMarkdownPaste = () => mount.removeEventListener("paste", handleSmartMarkdownPaste, true);
+          if (disabledRef.current) createdEditor.disabled();
+          setReady(true);
+        }
+      });
+    }).catch((error) => {
+      if (disposed) return;
+      setLoadError(error instanceof Error ? error.message : "\u7F16\u8F91\u5668\u52A0\u8F7D\u5931\u8D25");
+    });
+    return () => {
+      disposed = true;
+      setReady(false);
+      removeSmartMarkdownPaste();
+      if (editorRef.current === createdEditor) editorRef.current = null;
+      if (editorInitialized) createdEditor?.destroy();
+    };
+  }, [ariaLabel, assetBaseUrl, hasImageUpload, minHeight, mode, placeholder]);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor || value === void 0) return;
+    if (value === lastEmittedValueRef.current || editor.getValue() === value) return;
+    lastEmittedValueRef.current = value;
+    editor.setValue(value, true);
+  }, [ready, value]);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    if (disabled) editor.disabled();
+    else editor.enable();
+  }, [disabled, ready]);
+  const editorStyle = {
+    ...style,
+    "--sia-markdown-editor-min-height": typeof minHeight === "number" ? `${minHeight}px` : minHeight
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["sia-markdown-editor", className].filter(Boolean).join(" "),
+      style: editorStyle,
+      "data-ready": ready ? "true" : "false",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: mountRef, className: "sia-markdown-editor__mount" }),
+        !ready ? /* @__PURE__ */ jsx("div", { className: "sia-markdown-editor__loading", "aria-live": "polite", children: loadError || "\u6B63\u5728\u52A0\u8F7D\u7F16\u8F91\u5668\u2026" }) : null
+      ]
+    }
+  );
+}
+
+export {
+  MarkdownEditor
+};