@wyttime04/react-vditor 0.1.0-alpha.0

package/dist/index.d.ts

@@ -0,0 +1,48 @@
+// react-vditor 的型別。IOptions、IPreviewOptions 是 vditor 提供的全域型別，import vditor 時一併載入
+import * as React from "react";
+import type VditorCore from "vditor";
+
+/** 主題。auto 跟著作業系統的深色模式 */
+export type VditorTheme = "light" | "dark" | "auto";
+
+/** 讓底下所有 <Vditor>、<VditorPreview> 預設用同一個主題；值變動時它們會跟著切換。元件自己的 theme prop 優先 */
+export declare const VditorThemeProvider: (props: {theme: VditorTheme, children?: React.ReactNode}) => React.ReactElement;
+
+/** ref 上可以呼叫的方法，名稱與原生 vditor 相同（destroy 由元件管理、setTheme 改用 theme prop，都不開放） */
+export type VditorRef = Pick<VditorCore,
+    | "updateToolbarConfig" | "focus" | "blur" | "disabled" | "enable" | "renderPreview"
+    | "clearCache" | "disabledCache" | "enableCache" | "tip" | "setPreviewMode" | "deleteValue" | "updateValue"
+    | "insertValue" | "insertMD" | "setValue" | "insertEmptyBlock" | "clearStack"
+    | "hlCommentIds" | "unHlCommentIds" | "removeCommentIds"
+    | "getValue" | "getCurrentMode" | "getSelection" | "getCursorPosition" | "isUploading"
+    | "html2md" | "exportJSON" | "getHTML" | "getCommentIds">;
+
+/** props 就是 vditor 的 IOptions（theme 換成 VditorTheme），另外加 className、style */
+export type VditorProps = Omit<IOptions, "theme"> & {
+    /** 預設取最近的 VditorThemeProvider，沒有就是 light */
+    theme?: VditorTheme;
+    className?: string;
+    style?: React.CSSProperties;
+};
+
+/** vditor 編輯器。value 是初始值；之後使用端改 value 會套用，打字觸發的 input 回傳值不會被蓋回去 */
+export declare const Vditor: React.ForwardRefExoticComponent<VditorProps & React.RefAttributes<VditorRef>>;
+
+/** props 是 Vditor.preview 的 IPreviewOptions（theme 換成 VditorTheme；mode 只給 GFM 以外的渲染器用，拿掉），加上 value、className、style */
+export type VditorPreviewProps = Omit<Partial<IPreviewOptions>, "theme" | "mode"> & {
+    /** 要渲染的 Markdown */
+    value: string;
+    /** 預設取最近的 VditorThemeProvider，沒有就是 light */
+    theme?: VditorTheme;
+    className?: string;
+    style?: React.CSSProperties;
+};
+
+/** 只渲染 Markdown、不建立編輯器 */
+export declare const VditorPreview: (props: VditorPreviewProps) => React.ReactElement;
+
+/** 預覽用的 HTML 轉換：非 GFM 的區塊一律變成普通程式碼區塊 */
+export declare const gfmTransform: (html: string) => string;
+
+/** Markdown 轉 HTML，非 GFM 的區塊跟預覽一樣轉成普通程式碼區塊 */
+export declare const md2html: (markdown: string, options?: Partial<IPreviewOptions>) => Promise<string>;

package/dist/index.js

@@ -0,0 +1,13 @@
+import VditorCore from "vditor";
+import { defaultCdn } from "./cdn.js";
+import { gfmPreviewOptions, gfmTransform } from "./gfm.js";
+export { Vditor } from "./Vditor.js";
+export { VditorPreview } from "./VditorPreview.js";
+export { VditorThemeProvider } from "./theme.js";
+export { gfmTransform };
+
+/** Markdown 轉 HTML，非 GFM 的區塊跟預覽一樣轉成普通程式碼區塊（原生 md2html 不吃 transform） */
+export const md2html = async (markdown, options = {}) => {
+  const merged = gfmPreviewOptions(options, options.cdn || defaultCdn());
+  return merged.transform(await VditorCore.md2html(markdown, merged));
+};

package/dist/theme.js

@@ -0,0 +1,43 @@
+// 主題：只有 light / dark，外加跟著作業系統的 auto。
+// 決定順序：元件自己的 theme prop → 最近的 <VditorThemeProvider> → light。
+import * as React from "react";
+const ThemeContext = /*#__PURE__*/React.createContext(undefined);
+
+/** 讓底下所有 <Vditor>、<VditorPreview> 預設用同一個主題；值變動時它們會跟著切換 */
+export const VditorThemeProvider = ({
+  theme,
+  children
+}) => /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+  value: theme
+}, children);
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+
+/** 作業系統目前是不是深色模式；系統切換時會重新 render */
+const useSystemDark = enabled => {
+  const [dark, setDark] = React.useState(() => enabled && window.matchMedia(DARK_QUERY).matches);
+  React.useEffect(() => {
+    if (!enabled) {
+      return undefined;
+    }
+    const query = window.matchMedia(DARK_QUERY);
+    const update = () => setDark(query.matches);
+    update();
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, [enabled]);
+  return dark;
+};
+
+/** 算出元件實際要用的主題："light" 或 "dark" */
+export const useResolvedTheme = theme => {
+  const provided = React.useContext(ThemeContext);
+  const wanted = theme || provided || "light";
+  const systemDark = useSystemDark(wanted === "auto");
+  if (wanted === "auto") {
+    return systemDark ? "dark" : "light";
+  }
+  return wanted === "dark" ? "dark" : "light";
+};
+
+/** 容器上的 class，對應 index.css 裡局部化的主題樣式 */
+export const themeClassName = theme => `react-vditor--${theme}`;

package/dist/uploadImage.js

@@ -0,0 +1,51 @@
+// 「上傳圖片」按鈕：toolbar 裡寫 "upload-image" 就會換成這顆按鈕。
+// vditor 內建的 upload 只有一顆，檔案類型看的是共用的 upload.accept，所以另做一顆只收圖片的。
+
+/** 按鈕的 tip。vditor 語系檔沒有這個字，照各語系「上傳圖片或文件」的譯法拿掉「或文件」；沒列到的語言用英文 */
+const TIPS = {
+  en_US: "Upload image",
+  zh_CN: "上传图片",
+  zh_TW: "上傳圖片"
+};
+export const UPLOAD_IMAGE = "upload-image";
+
+/**
+ * 選完圖片後交給 upload.handler，做法與 vditor 內建上傳在設了 handler 時相同：
+ * upload.multiple 不是 true 時只能選一張；handler 回傳字串時當成錯誤訊息顯示。
+ * 只支援 upload.handler，不支援 upload.url（那條路是 vditor 內部的 XHR 上傳流程，沒有公開的 API 可以呼叫）。
+ */
+const pickImages = vditor => {
+  const {
+    handler,
+    multiple
+  } = vditor.options.upload;
+  if (!handler) {
+    vditor.tip.show("please config: options.upload.handler");
+    return;
+  }
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = "image/*";
+  input.multiple = multiple === true;
+  input.addEventListener("change", async () => {
+    // 檔案選擇框可以切成「所有檔案」，所以再過濾一次
+    const images = [...input.files].filter(file => file.type.startsWith("image/"));
+    if (images.length === 0) {
+      return;
+    }
+    const message = await handler(images);
+    if (typeof message === "string") {
+      vditor.tip.show(message);
+    }
+  });
+  input.click();
+};
+
+/** "upload-image"（字串或物件）換成完整的按鈕設定；使用端在物件裡給的欄位優先 */
+export const uploadImageItem = (item, lang) => ({
+  name: UPLOAD_IMAGE,
+  icon: '<svg><use xlink:href="#vditor-icon-upload"></use></svg>',
+  tip: TIPS[lang] || TIPS.en_US,
+  click: (event, vditor) => pickImages(vditor),
+  ...(typeof item === "string" ? {} : item)
+});

package/package.json

@@ -0,0 +1,77 @@
+{
+    "name": "@wyttime04/react-vditor",
+    "version": "0.1.0-alpha.0",
+    "description": "vditor 的 React 元件：只支援 GFM、完全離線",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/wyttime04/react-vditor.git"
+    },
+    "type": "module",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        },
+        "./index.css": "./dist/index.css",
+        "./webpack-plugin": {
+            "types": "./webpack-plugin/index.d.ts",
+            "require": "./webpack-plugin/index.cjs"
+        }
+    },
+    "files": [
+        "dist",
+        "webpack-plugin"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "sideEffects": [
+        "*.css"
+    ],
+    "scripts": {
+        "start": "webpack serve --config dev/webpack.config.cjs --open",
+        "preview": "npm run build && webpack serve --config dev/webpack.config.cjs --mode production --open",
+        "build": "node scripts/build.cjs",
+        "build:page": "npm run build && webpack --config dev/webpack.config.cjs --mode production",
+        "build:test": "webpack --config test/app/webpack.config.cjs",
+        "test:types": "tsc -p tsconfig.json",
+        "test": "npm run build:test && npm run test:types && jest"
+    },
+    "dependencies": {
+        "vditor": "4.0.0"
+    },
+    "peerDependencies": {
+        "react": ">=16.9.0 <20",
+        "webpack": "^5.76.0"
+    },
+    "peerDependenciesMeta": {
+        "webpack": {
+            "optional": true
+        }
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.26.0",
+        "@babel/core": "^7.26.0",
+        "@babel/preset-env": "^7.26.0",
+        "@babel/preset-react": "^7.26.0",
+        "@types/react": "^16.14.0",
+        "babel-loader": "^9.2.1",
+        "css-loader": "^7.1.5",
+        "html-webpack-plugin": "^5.6.8",
+        "jest": "^29.7.0",
+        "postcss": "^8.5.28",
+        "postcss-prefix-selector": "^2.2.1",
+        "puppeteer": "^23.0.2",
+        "react": "16.9.0",
+        "react-dom": "16.9.0",
+        "style-loader": "^4.0.0",
+        "typescript": "^5.6.0",
+        "val-loader": "^6.0.0",
+        "webpack": "^5.111.1",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^5.2.0"
+    }
+}

package/webpack-plugin/index.cjs

@@ -0,0 +1,44 @@
+// 把 vditor 執行期要載入的資源輸出到 webpack output 的 vditor/dist/ 底下。
+// 只輸出 GFM 用得到的部分；附加渲染套件（mermaid、katex、mathjax、echarts…）一律不輸出。
+// 內容主題與 dark 的程式碼主題已經局部化、併進 react-vditor/index.css，這裡也不輸出。
+const fs = require("fs");
+const path = require("path");
+
+const PLUGIN_NAME = "VditorAssetsPlugin";
+const DIST = path.dirname(require.resolve("vditor/dist/index.css"));
+const INCLUDE = [
+    "js/lute",                              // Markdown 解析引擎
+    "js/i18n",                              // 介面語系
+    "js/icons",                             // 工具列圖示
+    "js/highlight.js/highlight.min.js",     // 程式碼上色
+    "js/highlight.js/third-languages.js",   // vditor 自己加的語言
+    "js/highlight.js/styles/github.min.css", // vditor 一定會整頁載入這一個，不論設定
+    "images",                               // 圖片 emoji、載入中圖示
+];
+
+const listFiles = (target) => (fs.statSync(target).isDirectory()
+    ? fs.readdirSync(target).flatMap((name) => listFiles(path.join(target, name)))
+    : [target]);
+
+class VditorAssetsPlugin {
+    apply(compiler) {
+        const {RawSource} = compiler.webpack.sources;
+        let files;
+        compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+            compilation.hooks.processAssets.tap({
+                name: PLUGIN_NAME,
+                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+            }, () => {
+                // watch 模式下每次編譯都會進來，檔案內容不會變，讀一次就好
+                files = files || INCLUDE.flatMap((dir) => listFiles(path.join(DIST, dir))).map((file) => ({
+                    name: `vditor/dist/${path.relative(DIST, file).split(path.sep).join("/")}`,
+                    source: new RawSource(fs.readFileSync(file)),
+                }));
+                // minimized：vditor 的檔案本來就壓縮過，不要讓 production build 的 terser 再處理一次
+                files.forEach(({name, source}) => compilation.emitAsset(name, source, {minimized: true}));
+            });
+        });
+    }
+}
+
+module.exports = VditorAssetsPlugin;

package/webpack-plugin/index.d.ts

@@ -0,0 +1,8 @@
+import type {Compiler} from "webpack";
+
+/** 把 vditor 執行期要載入的資源（只含 GFM 用得到的部分）輸出到 webpack output 的 vditor/dist/ 底下 */
+declare class VditorAssetsPlugin {
+    apply(compiler: Compiler): void;
+}
+
+export = VditorAssetsPlugin;