@wyttime04/react-vditor 0.1.0 → 1.0.0

package/README.md

@@ -1,5 +1,11 @@
 # @wyttime04/react-vditor
 
+[![GitHub](https://img.shields.io/badge/GitHub-wyttime04%2Freact--vditor-24292f?logo=github)](https://github.com/wyttime04/react-vditor)
+[![npm](https://img.shields.io/npm/v/@wyttime04/react-vditor)](https://www.npmjs.com/package/@wyttime04/react-vditor)
+[![license](https://img.shields.io/npm/l/@wyttime04/react-vditor)](https://github.com/wyttime04/react-vditor/blob/main/LICENSE)
+[![vditor](https://img.shields.io/npm/dependency-version/@wyttime04/react-vditor/vditor)](https://github.com/Vanessa219/vditor)
+[![react](https://img.shields.io/npm/dependency-version/@wyttime04/react-vditor/peer/react)](https://github.com/wyttime04/react-vditor#相容性)
+
 以 [vditor](https://github.com/Vanessa219/vditor) 4.0.0 為基礎的 React 元件，**僅支援 GFM 語法，並可於完全離線的環境運作**。
 
 - mermaid、數學式、echarts 等 GFM 以外的附加渲染一律停用，相關區塊以一般程式碼區塊呈現
@@ -62,7 +68,7 @@ const ref = useRef(null);
 // 僅渲染內容，不建立編輯器
 <VditorPreview value={markdown}/>
 
-// 轉換為 HTML（GFM 以外的區塊同樣轉為一般程式碼區塊）
+// 轉換為 HTML
 const html = await md2html(markdown);
 ```
 
@@ -163,9 +169,19 @@ props 沿用 `Vditor.preview` 的 `IPreviewOptions`，另增 `value`（要渲染
 
 ### `md2html(markdown, options?)`
 
-將 Markdown 轉換為 HTML，回傳 `Promise<string>`。GFM 以外的區塊會與預覽相同，轉換為一般程式碼區塊
+將 Markdown 轉換為 HTML，回傳 `Promise<string>`。GFM 以外的區塊與網址不合法的連結，處理方式與預覽相同
 （vditor 原生的 `md2html` 不套用 `transform`，因此由本函式處理）。
 
+### `gfmTransform`, `linkTransform`, `previewTransform`
+
+預覽輸出所套用的 HTML 轉換，型別皆為 `(html: string) => string`。
+
+| 函式 | 說明 |
+|---|---|
+| `gfmTransform` | GFM 以外的區塊（mermaid、數學式等）轉為一般程式碼區塊 |
+| `linkTransform` | 網址不合法的連結轉為純文字，規則詳見「[預設值與原生 vditor 的差異](#預設值與原生-vditor-的差異)」 |
+| `previewTransform` | 依序套用 `gfmTransform`、`linkTransform`；`<VditorPreview>`、`md2html()` 與編輯器的預覽區皆使用此轉換 |
+
 ## 主題
 
 `<Vditor>` 與 `<VditorPreview>` 提供 `light`, `dark` 兩種主題，另可設為 `auto`，依作業系統的外觀設定（`prefers-color-scheme`）自動切換，並在系統設定變更時即時套用。
@@ -234,7 +250,7 @@ const App = () => {
     "headings", "bold", "italic", "strike", "link", "|",
     "list", "ordered-list", "check", "outdent", "indent", "|",
     "quote", "line", "code", "inline-code", "insert-before", "insert-after", "|",
-    "upload-image", "table", "|",
+    "upload", "table", "|",
     "undo", "redo", "|",
     "fullscreen", "edit-mode",
     {name: "more", toolbar: ["both", "outline", "preview"]},
@@ -244,14 +260,13 @@ const App = () => {
 與 vditor 原生的預設工具列相比：
 
 - 移除 `export`（寫死連線至 CDN）、`devtools`（依賴 echarts）、`info`（寫死 unpkg 的圖片網址）
-- 移除 `emoji`, `record`, `upload`, `code-theme`, `content-theme`, `help`
-- 新增 `upload-image`
+- 移除 `emoji`, `record`, `code-theme`, `content-theme`, `help`
 
 傳入 `toolbar` prop 時，會完整取代預設工具列。
 
-### 上傳圖片按鈕 `upload-image`
+### 上傳
 
-僅接受圖片的上傳按鈕，已包含在預設工具列中，並可與 vditor 內建的 `upload`（圖片或文件）同時使用。
+工具列的 `upload` 按鈕、拖放與貼上加入的檔案，皆交由 `upload.handler` 處理，預設僅接受圖片。
 
 #### 範例
 
@@ -272,35 +287,35 @@ const editorRef = useRef(null);
 />
 ```
 
-使用自訂的 `toolbar` 時，請將 `"upload-image"` 加入其中：
+允許上傳文件時，將 `upload.imageOnly` 設為 `false`：
 
 ```jsx
-<Vditor toolbar={["bold", "italic", "|", "upload-image"]} upload={{handler}}/>
+<Vditor upload={{handler, imageOnly: false, accept: "image/*,.pdf"}}/>
 ```
 
 #### 行為
 
-1. 點選按鈕後開啟檔案選擇視窗，僅列出圖片檔
-2. 選取的檔案再次過濾，僅保留圖片，交由 `upload.handler` 處理
+1. 檔案依 `upload.imageOnly` 與 `upload.accept` 過濾，僅將符合者交由 `upload.handler` 處理
+2. 全部不符合時不呼叫 `handler`，並顯示「檔案類型不允許上傳」
 3. `handler` 回傳字串時，以提示訊息顯示（例如「檔案過大」）
 
-此行為與 vditor 內建上傳在設定 `handler` 時相同。插入圖片語法由 `handler` 負責，例如呼叫 ref 的 `insertValue`。
+插入圖片或連結語法由 `handler` 負責，例如呼叫 ref 的 `insertValue`。
 
 #### 相關設定
 
 | 設定 | 說明 |
 |---|---|
-| `upload.handler` | 必填。未設定時，點選按鈕僅顯示設定提示，不開啟檔案選擇視窗 |
-| `upload.multiple` | 為 `true`（vditor 預設）時可一次選取多張圖片，否則僅能選取一張 |
-| `lang` | 按鈕的提示文字依語言顯示，支援 zh_TW、zh_CN、en_US，其他語言顯示英文 |
-| 以物件指定按鈕 | 如需自訂提示文字或圖示：`{name: "upload-image", tip: "…", icon: "<svg>…</svg>"}`，指定的欄位優先於預設值。自訂的 `tip` 為固定字串，不會隨語言切換 |
+| `upload.imageOnly` | 本套件新增，預設 `true`：僅接受圖片，按鈕提示為「上傳圖片」（支援 zh_TW、zh_CN、en_US，其他語言顯示英文）。設為 `false` 時僅依 `upload.accept` 過濾，按鈕提示為 vditor 的「上傳圖片或文件」 |
+| `upload.accept` | 格式同 `<input accept>`，例如 `image/png,.pdf`。`imageOnly` 為 `true` 時僅能進一步限縮圖片類型；為 `false` 且未設定時不限制 |
+| `upload.handler` | 處理上傳的檔案。上述過濾僅作用於 `handler`；改用 vditor 的 `upload.url` 上傳時，由 vditor 依 `upload.accept` 檢查 |
+| `upload.multiple` | 為 `true`（vditor 預設）時可一次選取多個檔案，否則僅能選取一個 |
+| 以物件指定按鈕 | 如需自訂提示文字或圖示：`{name: "upload", tip: "…", icon: "<svg>…</svg>"}`，指定的欄位優先於預設值。自訂的 `tip` 為固定字串，不會隨語言切換 |
 
 #### 限制
 
-- 僅支援 `upload.handler`，不支援 `upload.url`：`url` 屬於 vditor 內部的上傳流程，未提供可呼叫的公開 API
-- 檔案類型的限制僅作用於檔案選擇視窗；以拖放或貼上方式加入的檔案不經過此按鈕。
-  另外，設定 `upload.handler` 時 vditor 不會檢查檔案類型與大小，請於 `handler` 中自行驗證
-- `upload.handler` 只在建立編輯器時讀取，詳見「[props 變更時的行為](#props-變更時的行為)」
+- 設定 `upload.handler` 時 vditor 不會檢查檔案大小（`upload.max`），請於 `handler` 中自行驗證
+- `upload.multiple` 不為 `true` 時，vditor 會先只取第一個檔案再交由過濾，同時拖入多個檔案可能因此全部被擋下
+- `upload` 的設定只在建立編輯器時讀取，詳見「[props 變更時的行為](#props-變更時的行為)」
 
 ## 預設值與原生 vditor 的差異
 
@@ -311,16 +326,48 @@ const editorRef = useRef(null);
 | `theme` | `light` | 僅支援 `light` / `dark` / `auto`，詳見「[主題](#主題)」 |
 | `toolbar` | 詳見「[預設工具列](#預設工具列)」 | |
 | `cache` | `{enable: false}` | vditor 啟用快取時必須提供 `cache.id` |
+| `upload.imageOnly` | `true` | 本套件新增的選項：僅接受圖片，詳見「[上傳](#上傳)」 |
 | `preview.markdown.footnotes` | `false` | GFM 不包含註腳 |
 | `preview.markdown.codeBlockPreview`, `mathBlockPreview` | `false` | ir / wysiwyg 模式不顯示程式碼區塊的預覽面板，避免渲染 mermaid 等區塊 |
 | `preview.render.media.enable` | `false` | 不將影片、音訊連結嵌入為 iframe |
-| `preview.transform` | GFM 以外的區塊轉為一般程式碼區塊 | 使用端傳入的 `transform` 會於其後執行 |
+| `preview.transform` | GFM 以外的區塊轉為一般程式碼區塊；網址不合法的連結轉為純文字 | 網址規則同 DOMPurify 的 `IS_ALLOWED_URI`：允許 `http(s)`、`mailto`、`tel` 等協定與相對路徑。使用端傳入的 `transform` 會於其後執行 |
 | `preview.theme.current` | `""`（固定） | 內容主題改由 `theme` 決定，不使用 vditor 整頁共用的 `<link>` |
 | 行內數學式 `$…$` | 視為一般文字 | GFM 不包含數學式 |
 
+## XSS 防護
+
+內建的過濾如下：
+
+| 來源 | 處理內容 |
+|---|---|
+| Lute 的 `sanitize`（vditor 預設啟用） | 移除 `<script>`、`<style>`、`on*` 事件屬性與 `javascript:` 網址 |
+| `linkTransform` | 網址不合法的連結轉為純文字，詳見「[預設值與原生 vditor 的差異](#預設值與原生-vditor-的差異)」 |
+
+`<iframe>`、`<embed>`、`<form>` 等元素與 `style` 屬性仍會保留，建議透過 `transform` 以 DOMPurify 等工具再行過濾：
+
+```jsx
+import DOMPurify from "dompurify";
+
+// iframe、embed、object 由 DOMPurify 預設移除；表單元素與 style 屬性需另行禁止
+const sanitize = (html) => DOMPurify.sanitize(html, {
+    FORBID_TAGS: ["form", "button", "textarea", "select"],
+    FORBID_ATTR: ["style"],
+});
+
+<Vditor preview={{transform: sanitize}}/>
+<VditorPreview value={markdown} transform={sanitize}/>
+const html = await md2html(markdown, {transform: sanitize});
+```
+
+- 使用端的 `transform` 於 `previewTransform` 之後執行
+- 任務清單的勾選框為 `<input type="checkbox">`：需要任務清單時不可禁止 `input`；不需要時可將 `input` 加入 `FORBID_TAGS`
+- 程式碼區塊的複製按鈕與上色由 vditor 於 `transform` 之後加入，不受影響
+- `<Vditor>` 的 `preview.transform` 僅作用於預覽區（sv 模式的分屏預覽與預覽模式）；wysiwyg、ir 模式的編輯區不經過 `transform`
+
 ## 已知限制
 
 - ir / wysiwyg 模式中的程式碼區塊不會上色（停用預覽面板所致）；sv 模式的預覽區與 `<VditorPreview>` 仍會上色
+- 網址不合法的連結轉為純文字，僅作用於 `<VditorPreview>`、`md2html()` 與編輯器的預覽區；ir / wysiwyg 模式的編輯區不套用 `transform`，連結仍會顯示
 - `$$ … $$` 區塊會以程式碼區塊呈現（Lute 未提供停用此語法的設定）
 - `:smile:` 等 emoji 代碼會轉為對應字元，YAML front matter 會以程式碼區塊呈現；兩者雖非 GFM 語法，仍予以保留
 - vditor 無論設定為何，都會整頁載入 highlight.js 的 `github.min.css`；`dark` 主題的程式碼樣式以局部化且優先權較高的規則覆寫
@@ -340,9 +387,9 @@ npm test             # 建置測試頁、檢查型別，並執行 puppeteer 測
 
 ### 開發用畫面
 
-`dev/` 提供開發用畫面：左側為 `<Vditor>`，右側為 `<VditorPreview>` 與 `md2html()` 的輸出，下方列出事件紀錄。
-上方可切換主題（透過 `VditorThemeProvider`），並呼叫 ref 的 `insertValue`, `disabled` / `enable`, `getValue`。
-工具列的「上傳圖片」不會實際上傳，選取的圖片以 `blob:` 網址直接顯示。
+`dev/` 提供開發用畫面，展示 `<Vditor>`、`<VditorPreview>` 與 `md2html()` 的輸出，並列出編輯器的事件紀錄。
+可切換主題（透過 `VditorThemeProvider`），並呼叫 ref 的 `insertValue`, `disabled` / `enable`, `getValue`。
+上傳的圖片（工具列、拖放、貼上）不會實際上傳，以 `blob:` 網址直接顯示。
 
 `dev/main.jsx` 與使用端相同，以 `import "@wyttime04/react-vditor"` 及 `import "@wyttime04/react-vditor/index.css"` 引用套件，
 由 `dev/webpack.config.cjs` 依 mode 決定來源：

package/dist/Vditor.js

@@ -1,7 +1,6 @@
 import * as React from "react";
 import VditorCore from "vditor";
-import { defaultCdn } from "./cdn.js";
-import { gfmEditorOptions } from "./gfm.js";
+import { editorOptions } from "./options/default.js";
 import { themeClassName, useResolvedTheme } from "./theme.js";
 
 /**
@@ -93,11 +92,11 @@ export const Vditor = /*#__PURE__*/React.forwardRef(function Vditor(props, ref)
     } = propsRef.current;
     // 先用空內容建立，after 裡關掉行內數學式之後才放入真正的內容；否則初次渲染就會去載入 katex
     const instance = new VditorCore(host, {
-      ...gfmEditorOptions({
+      ...editorOptions({
         ...options,
         value: "",
         theme: editorTheme(themeRef.current)
-      }, options.cdn || defaultCdn()),
+      }),
       ...callbacks
     });
     return () => {
@@ -162,7 +161,7 @@ export const Vditor = /*#__PURE__*/React.forwardRef(function Vditor(props, ref)
           return contentRef.current ?? "";
         }
         if (name === "getCurrentMode") {
-          return propsRef.current.mode || "wysiwyg"; // 跟 gfm.js 的預設 mode 一致
+          return propsRef.current.mode || "wysiwyg"; // 跟 options/default.js 的預設 mode 一致
         }
         return undefined;
       };

package/dist/VditorPreview.js

@@ -1,7 +1,6 @@
 import * as React from "react";
 import VditorCore from "vditor";
-import { defaultCdn } from "./cdn.js";
-import { gfmPreviewOptions } from "./gfm.js";
+import { previewOptions } from "./options/default.js";
 import { themeClassName, useResolvedTheme } from "./theme.js";
 
 /**
@@ -21,7 +20,7 @@ export const VditorPreview = props => {
   // 選項常常是每次 render 都新建的物件；用內容比較，避免每次 render 都重新渲染
   const optionsKey = JSON.stringify(options);
   React.useEffect(() => {
-    VditorCore.preview(elementRef.current, value, gfmPreviewOptions(options, options.cdn || defaultCdn()));
+    VditorCore.preview(elementRef.current, value, previewOptions(options));
   }, [value, optionsKey]); // options 以內容比較（optionsKey），不放物件本身
 
   // 主題只看外層容器的 class（index.css 裡局部化的樣式），換主題不用重新渲染；

package/dist/index.d.ts

@@ -17,10 +17,17 @@ export type VditorRef = Pick<VditorCore,
     | "getValue" | "getCurrentMode" | "getSelection" | "getCursorPosition" | "isUploading"
     | "html2md" | "exportJSON" | "getHTML" | "getCommentIds">;
 
-/** props 就是 vditor 的 IOptions（theme 換成 VditorTheme），另外加 className、style */
-export type VditorProps = Omit<IOptions, "theme"> & {
+/** props 就是 vditor 的 IOptions（theme 換成 VditorTheme，upload 多了 imageOnly），另外加 className、style */
+export type VditorProps = Omit<IOptions, "theme" | "upload"> & {
     /** 預設取最近的 VditorThemeProvider，沒有就是 light */
     theme?: VditorTheme;
+    upload?: IUpload & {
+        /**
+         * 預設 true：upload 按鈕、拖曳、貼上只收圖片，accept 再從中限縮，按鈕提示為「上傳圖片」。
+         * false 時只依 accept 過濾，按鈕提示為「上傳圖片或文件」
+         */
+        imageOnly?: boolean;
+    };
     className?: string;
     style?: React.CSSProperties;
 };
@@ -41,8 +48,14 @@ export type VditorPreviewProps = Omit<Partial<IPreviewOptions>, "theme" | "mode"
 /** 只渲染 Markdown、不建立編輯器 */
 export declare const VditorPreview: (props: VditorPreviewProps) => React.ReactElement;
 
-/** 預覽用的 HTML 轉換：非 GFM 的區塊一律變成普通程式碼區塊 */
+/** 非 GFM 的區塊（mermaid、數學式等）一律變成普通程式碼區塊 */
 export declare const gfmTransform: (html: string) => string;
 
-/** Markdown 轉 HTML，非 GFM 的區塊跟預覽一樣轉成普通程式碼區塊 */
+/** 網址不合法的連結變成純文字，只留下連結文字 */
+export declare const linkTransform: (html: string) => string;
+
+/** 預覽輸出使用的轉換：依序套用 gfmTransform、linkTransform */
+export declare const previewTransform: (html: string) => string;
+
+/** Markdown 轉 HTML，跟預覽一樣套用 previewTransform */
 export declare const md2html: (markdown: string, options?: Partial<IPreviewOptions>) => Promise<string>;

package/dist/index.js

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

package/dist/options/default.js

@@ -0,0 +1,81 @@
+// 套件的預設選項：預設值合併 gfm.js 的 GFM 限定設定，再疊上使用端的選項
+import { TOOLBAR, expandToolbar } from "../toolbar/index.js";
+import { previewTransform } from "../transforms/index.js";
+import { uploadableOnly } from "../upload.js";
+import { merge } from "../utils/merge.js";
+import { gfmEditorOptions, gfmPreviewOptions } from "./gfm.js";
+
+/* global __webpack_public_path__ */
+/**
+ * vditor 在執行期會去 `${cdn}/dist/...` 載入 lute、語系、圖示等資源。
+ * webpack plugin 把它們輸出在 output 目錄底下的 vditor/，所以預設 cdn 跟著 webpack 的 publicPath 走。
+ */
+const defaultCdn = () => {
+  // 不是用 webpack 打包時，typeof 未宣告的識別字會得到 "undefined"，不會拋錯
+  const base = typeof __webpack_public_path__ === "string" ? __webpack_public_path__ : "/";
+  return base === "" || base.endsWith("/") ? `${base}vditor` : `${base}/vditor`;
+};
+
+/** 使用端自己的 transform 接在 previewTransform 之後 */
+const withPreviewTransform = transform => transform ? html => transform(previewTransform(html)) : previewTransform;
+
+/** 編輯器選項 */
+export const editorOptions = options => {
+  const defaults = merge({
+    cdn: defaultCdn(),
+    lang: "zh_TW",
+    mode: "wysiwyg",
+    // 傳 HTMLElement 給 vditor 時，開快取一定要有 cache.id，否則直接拋錯
+    cache: {
+      enable: false
+    },
+    toolbar: TOOLBAR,
+    preview: {
+      actions: []
+    },
+    // 本套件的選項：upload 按鈕、拖曳、貼上預設只收圖片
+    upload: {
+      imageOnly: true
+    }
+  }, gfmEditorOptions());
+  const merged = merge(defaults, options);
+  const {
+    upload
+  } = merged;
+  merged.upload = {
+    ...upload,
+    // upload 按鈕的檔案選擇框用 accept 決定列出哪些檔案；imageOnly 而沒指定 accept 時只列出圖片
+    accept: upload.imageOnly && !upload.accept ? "image/*" : upload.accept,
+    ...(upload.handler && {
+      handler: uploadableOnly(upload.handler, upload)
+    })
+  };
+  merged.preview = {
+    ...merged.preview,
+    transform: withPreviewTransform(options.preview?.transform),
+    // 內容主題不交給 vditor（它用整頁共用的 <link>），改由元件容器的 class 套用 index.css 裡局部化的主題
+    theme: {
+      ...merged.preview.theme,
+      current: ""
+    }
+  };
+  merged.toolbar = expandToolbar(merged.toolbar, merged.lang, upload.imageOnly);
+  return merged;
+};
+
+/** Vditor.preview 的選項 */
+export const previewOptions = options => {
+  const defaults = merge({
+    cdn: defaultCdn(),
+    lang: "zh_TW",
+    mode: "light"
+  }, gfmPreviewOptions());
+  const merged = merge(defaults, options);
+  merged.transform = withPreviewTransform(options.transform);
+  // 同編輯器：內容主題改由元件容器的 class 決定
+  merged.theme = {
+    ...merged.theme,
+    current: ""
+  };
+  return merged;
+};

package/dist/options/gfm.js

@@ -0,0 +1,32 @@
+// GFM 限定的設定：關掉 vditor 預設會渲染、但不屬於 GFM 的語法。
+// 每次回傳新物件，避免不同的編輯器、預覽共用同一份選項物件
+
+/** 編輯器 */
+export const gfmEditorOptions = () => ({
+  preview: {
+    markdown: {
+      footnotes: false,
+      // GFM 以外、預設開著的只有註腳
+      codeBlockPreview: false,
+      // ir / wysiwyg 的程式碼區塊不開預覽面板，否則會去渲染 mermaid 等區塊
+      mathBlockPreview: false // 同上，$$ 區塊
+    },
+    render: {
+      media: {
+        enable: false
+      }
+    } // 不把影片、音訊連結嵌成 iframe
+  }
+});
+
+/** Vditor.preview */
+export const gfmPreviewOptions = () => ({
+  markdown: {
+    footnotes: false
+  },
+  render: {
+    media: {
+      enable: false
+    }
+  }
+});

package/dist/toolbar/index.js

@@ -0,0 +1,34 @@
+/**
+ * 預設工具列。跟 vditor 原本的相比：
+ * - 拿掉 export（寫死連 CDN）、devtools（要 echarts）、info（寫死 unpkg 的 logo）
+ * - 拿掉 emoji、record、code-theme、content-theme、help
+ */
+export const TOOLBAR = ["headings", "bold", "italic", "strike", "link", "|", "list", "ordered-list", "check", "outdent", "indent", "|", "quote", "line", "code", "inline-code", "insert-before", "insert-after", "|", "upload", "table", "|", "undo", "redo", "|", "fullscreen", "edit-mode", {
+  name: "more",
+  toolbar: ["both", "outline", "preview"]
+}];
+
+/** upload.imageOnly 時 upload 按鈕的提示。vditor 語系檔沒有這個字，照各語系「上傳圖片或文件」的譯法拿掉「或文件」；沒列到的語言用英文 */
+const IMAGE_ONLY_TIPS = {
+  en_US: "Upload image",
+  zh_CN: "上传图片",
+  zh_TW: "上傳圖片"
+};
+
+/**
+ * upload.imageOnly 時，upload 按鈕（含 more 之類的子選單裡的）的提示改成「上傳圖片」；使用端在物件裡給的 tip 優先。
+ * 不是 imageOnly 時沿用 vditor 語系檔的「上傳圖片或文件」
+ */
+export const expandToolbar = (toolbar, lang, imageOnly) => toolbar.map(item => {
+  if (imageOnly && (item === "upload" || item?.name === "upload")) {
+    return {
+      name: "upload",
+      tip: IMAGE_ONLY_TIPS[lang] || IMAGE_ONLY_TIPS.en_US,
+      ...(typeof item === "string" ? {} : item)
+    };
+  }
+  return item?.toolbar ? {
+    ...item,
+    toolbar: expandToolbar(item.toolbar, lang, imageOnly)
+  } : item;
+});

package/dist/transforms/gfm.js

@@ -0,0 +1,14 @@
+// 非 GFM 的區塊（mermaid、數學式、echarts…）一律變成普通程式碼區塊；webpack plugin 也不會輸出那些渲染套件。
+
+/** Lute 會把這些語言輸出成 <div class="language-xxx"> 等渲染器畫圖 */
+const DIV_LANGUAGES = "mermaid|echarts|abc|graphviz|mindmap|flowchart|plantuml|infographic|math";
+/** 這些語言輸出成 <pre><code class="language-xxx">，但渲染器一樣會找上門 */
+const CODE_LANGUAGES = "smiles|wavedrom|markmap|math";
+const DIV_PATTERN = new RegExp(`<div(?: data-code="[^"]*")? class="language-(${DIV_LANGUAGES})">([\\s\\S]*?)</div>`, "g");
+const CODE_PATTERN = new RegExp(`<code class="language-(${CODE_LANGUAGES})">`, "g");
+const INLINE_MATH_PATTERN = /<span class="language-math">([\s\S]*?)<\/span>/g;
+
+/**
+ * class 改成 language-plaintext，渲染器就找不到它們，也就不會去載入沒輸出的套件；原本的語言留在 data-lang。
+ */
+export const gfmTransform = html => html.replace(DIV_PATTERN, '<pre><code class="language-plaintext" data-lang="$1">$2</code></pre>').replace(CODE_PATTERN, '<code class="language-plaintext" data-lang="$1">').replace(INLINE_MATH_PATTERN, "$$$1$$");

package/dist/transforms/index.js

@@ -0,0 +1,7 @@
+// 預覽輸出的 HTML 轉換：各個 transform 都從這裡引用
+import { gfmTransform } from "./gfm.js";
+import { linkTransform } from "./link.js";
+export { gfmTransform, linkTransform };
+
+/** 預覽輸出使用的轉換：非 GFM 的區塊變成普通程式碼區塊，再把網址不合法的連結變成純文字 */
+export const previewTransform = html => linkTransform(gfmTransform(html));

package/dist/transforms/link.js

@@ -0,0 +1,25 @@
+// 網址不合法的連結變成純文字：拿掉 <a>，只留下連結文字（含粗體等格式）。
+// Lute 的 sanitize 只會清掉 javascript: 開頭的 href，data:、vbscript: 等仍會輸出成連結，所以這裡再檢查一次。
+
+// 規則取自 DOMPurify 的 src/regexp.ts：放行 http(s)、ftp(s)、mailto、tel 等協定，以及相對路徑
+const IS_ALLOWED_URI = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i;
+const ATTR_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
+const isAllowedUri = url => IS_ALLOWED_URI.test(url.replace(ATTR_WHITESPACE, ""));
+
+/**
+ * 用 <template> 解析，裡面的 script 不會執行、圖片也不會載入。
+ * 沒有要拆的連結時原樣回傳：重新序列化會改變輸出的寫法（例如 <img … /> 變成 <img …>）
+ */
+export const linkTransform = html => {
+  const template = document.createElement("template");
+  template.innerHTML = html;
+  let changed = false;
+  template.content.querySelectorAll("a").forEach(a => {
+    const href = a.getAttribute("href");
+    if (href === null || !isAllowedUri(href)) {
+      a.replaceWith(...a.childNodes);
+      changed = true;
+    }
+  });
+  return changed ? template.innerHTML : html;
+};

package/dist/upload.js

@@ -0,0 +1,32 @@
+// 上傳檔案的過濾。設了 upload.handler 時，vditor 不檢查檔案類型就把所有檔案交給 handler
+// （拖曳、貼上、工具列的 upload 按鈕都是），這裡依 upload.imageOnly 與 upload.accept 補上檢查。
+
+/**
+ * 檔案是否符合 accept，規則同 <input accept>：.png 比對副檔名、image/* 比對類型前綴、image/png 比對完整類型。
+ * accept 為空時不限制
+ */
+const isAccepted = (file, accept) => !accept || accept.split(",").some(item => {
+  const type = item.trim().toLowerCase();
+  if (type.startsWith(".")) {
+    return file.name.toLowerCase().endsWith(type);
+  }
+  if (type.endsWith("/*")) {
+    return file.type.startsWith(type.slice(0, -1));
+  }
+  return file.type === type;
+});
+
+/** imageOnly 時必須是圖片，accept 再從中限縮；否則只看 accept */
+const isUploadable = (file, {
+  imageOnly,
+  accept
+}) => (!imageOnly || isAccepted(file, "image/*")) && isAccepted(file, accept);
+
+/**
+ * 包裝 upload.handler：只把可上傳的檔案交給它。
+ * 一個都不符合時回傳提示文字，vditor 會顯示出來；不帶檔名，因為 vditor 用 innerHTML 顯示提示
+ */
+export const uploadableOnly = (handler, upload) => files => {
+  const uploadable = files.filter(file => isUploadable(file, upload));
+  return uploadable.length > 0 ? handler(uploadable) : window.VditorI18n.fileTypeError;
+};

package/dist/utils/merge.js

@@ -0,0 +1,15 @@
+const isPlainObject = value => Object.prototype.toString.call(value) === "[object Object]";
+
+/** 物件逐層合併，陣列與其他值直接覆蓋 */
+export const merge = (base, override) => {
+  if (!isPlainObject(base) || !isPlainObject(override)) {
+    return override === undefined ? base : override;
+  }
+  const result = {
+    ...base
+  };
+  Object.keys(override).forEach(key => {
+    result[key] = merge(result[key], override[key]);
+  });
+  return result;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wyttime04/react-vditor",
-    "version": "0.1.0",
+    "version": "1.0.0",
     "description": "React component for the Vditor Markdown editor, limited to GFM and fully offline",
     "keywords": [
         "react",

package/dist/cdn.js

@@ -1,9 +0,0 @@
-// vditor 在執行期會去 `${cdn}/dist/...` 載入 lute、語系、圖示等資源。
-// webpack plugin 把它們輸出在 output 目錄底下的 vditor/，所以預設 cdn 跟著 webpack 的 publicPath 走。
-
-/* global __webpack_public_path__ */
-export const defaultCdn = () => {
-  // 不是用 webpack 打包時，typeof 未宣告的識別字會得到 "undefined"，不會拋錯
-  const base = typeof __webpack_public_path__ === "string" ? __webpack_public_path__ : "/";
-  return base === "" || base.endsWith("/") ? `${base}vditor` : `${base}/vditor`;
-};

package/dist/gfm.js

@@ -1,121 +0,0 @@
-// 只支援 GFM 的預設設定。vditor 原本的附加渲染（mermaid、數學式、echarts…）一律不渲染，
-// 顯示成普通程式碼區塊；webpack plugin 也不會輸出那些渲染套件。
-import { UPLOAD_IMAGE, uploadImageItem } from "./uploadImage.js";
-
-/** Lute 會把這些語言輸出成 <div class="language-xxx"> 等渲染器畫圖 */
-const DIV_LANGUAGES = "mermaid|echarts|abc|graphviz|mindmap|flowchart|plantuml|infographic|math";
-/** 這些語言輸出成 <pre><code class="language-xxx">，但渲染器一樣會找上門 */
-const CODE_LANGUAGES = "smiles|wavedrom|markmap|math";
-const DIV_PATTERN = new RegExp(`<div(?: data-code="[^"]*")? class="language-(${DIV_LANGUAGES})">([\\s\\S]*?)</div>`, "g");
-const CODE_PATTERN = new RegExp(`<code class="language-(${CODE_LANGUAGES})">`, "g");
-const INLINE_MATH_PATTERN = /<span class="language-math">([\s\S]*?)<\/span>/g;
-
-/**
- * 預覽用的 HTML 轉換：非 GFM 的區塊一律變成普通程式碼區塊。
- * class 改成 language-plaintext，渲染器就找不到它們，也就不會去載入沒輸出的套件；原本的語言留在 data-lang。
- */
-export const gfmTransform = html => html.replace(DIV_PATTERN, '<pre><code class="language-plaintext" data-lang="$1">$2</code></pre>').replace(CODE_PATTERN, '<code class="language-plaintext" data-lang="$1">').replace(INLINE_MATH_PATTERN, "$$$1$$");
-
-/**
- * 預設工具列。跟 vditor 原本的相比：
- * - 拿掉 export（寫死連 CDN）、devtools（要 echarts）、info（寫死 unpkg 的 logo）
- * - 拿掉 emoji、record、upload、code-theme、content-theme、help
- * - 加上只收圖片的 upload-image
- */
-const TOOLBAR = ["headings", "bold", "italic", "strike", "link", "|", "list", "ordered-list", "check", "outdent", "indent", "|", "quote", "line", "code", "inline-code", "insert-before", "insert-after", "|", UPLOAD_IMAGE, "table", "|", "undo", "redo", "|", "fullscreen", "edit-mode", {
-  name: "more",
-  toolbar: ["both", "outline", "preview"]
-}];
-
-/** 工具列裡的 upload-image（含 more 之類的子選單）換成完整的按鈕設定 */
-const expandToolbar = (toolbar, lang) => toolbar.map(item => {
-  if (item === UPLOAD_IMAGE || item?.name === UPLOAD_IMAGE) {
-    return uploadImageItem(item, lang);
-  }
-  return item?.toolbar ? {
-    ...item,
-    toolbar: expandToolbar(item.toolbar, lang)
-  } : item;
-});
-const isPlainObject = value => Object.prototype.toString.call(value) === "[object Object]";
-
-/** 物件逐層合併，陣列與其他值直接覆蓋 */
-const merge = (base, override) => {
-  if (!isPlainObject(base) || !isPlainObject(override)) {
-    return override === undefined ? base : override;
-  }
-  const result = {
-    ...base
-  };
-  Object.keys(override).forEach(key => {
-    result[key] = merge(result[key], override[key]);
-  });
-  return result;
-};
-
-/** 使用端自己的 transform 接在 gfmTransform 之後 */
-const withGfmTransform = transform => transform ? html => transform(gfmTransform(html)) : gfmTransform;
-
-/** 編輯器選項：GFM 預設值，再疊上使用端的選項 */
-export const gfmEditorOptions = (options, cdn) => {
-  const merged = merge({
-    cdn,
-    lang: "zh_TW",
-    mode: "wysiwyg",
-    // 傳 HTMLElement 給 vditor 時，開快取一定要有 cache.id，否則直接拋錯
-    cache: {
-      enable: false
-    },
-    toolbar: TOOLBAR,
-    preview: {
-      actions: [],
-      markdown: {
-        footnotes: false,
-        // GFM 以外、預設開著的只有註腳
-        codeBlockPreview: false,
-        // ir / wysiwyg 的程式碼區塊不開預覽面板，否則會去渲染 mermaid 等區塊
-        mathBlockPreview: false // 同上，$$ 區塊
-      },
-      render: {
-        media: {
-          enable: false
-        }
-      } // 不把影片、音訊連結嵌成 iframe
-    }
-  }, options);
-  merged.preview = {
-    ...merged.preview,
-    transform: withGfmTransform(options.preview?.transform),
-    // 內容主題不交給 vditor（它用整頁共用的 <link>），改由元件容器的 class 套用 index.css 裡局部化的主題
-    theme: {
-      ...merged.preview.theme,
-      current: ""
-    }
-  };
-  merged.toolbar = expandToolbar(merged.toolbar, merged.lang);
-  return merged;
-};
-
-/** Vditor.preview 的選項：GFM 預設值，再疊上使用端的選項 */
-export const gfmPreviewOptions = (options, cdn) => {
-  const merged = merge({
-    cdn,
-    lang: "zh_TW",
-    mode: "light",
-    markdown: {
-      footnotes: false
-    },
-    render: {
-      media: {
-        enable: false
-      }
-    }
-  }, options);
-  merged.transform = withGfmTransform(options.transform);
-  // 同編輯器：內容主題改由元件容器的 class 決定
-  merged.theme = {
-    ...merged.theme,
-    current: ""
-  };
-  return merged;
-};

package/dist/uploadImage.js

@@ -1,51 +0,0 @@
-// 「上傳圖片」按鈕：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)
-});