:art: fix #567

CHANGELOG.md

@@ -68,9 +68,12 @@
 
 ### v3.3.7 / 2020-07-xx
 
+* [570](https://github.com/Vanessa219/vditor/issues/570) no placeholder after(SV) `修复缺陷`
+* [569](https://github.com/Vanessa219/vditor/issues/569) 预览区域工具栏配置 `引入特性`
 * [565](https://github.com/Vanessa219/vditor/issues/565) SV 模式支持缩进代码块 `改进功能`
 * [566](https://github.com/Vanessa219/vditor/issues/566) 行级代码解析渲染 `修复缺陷`
 * options.mode 默认值修改为 `ir`
+* 工具栏配置：默认值：["desktop", "tablet", "mobile", "mp-wechat", "zhihu"] 
 
 ### v3.3.6 / 2020-07-09
 

README.md

@@ -271,6 +271,17 @@ new Vditor('vditor', {
 | macros | Macro definition passed in when rendering with MathJax | {} |
 | engine | Math formula rendering engine: KaTeX, MathJax | 'KaTeX' |
 
+#### options.preview.actions
+
+Default: "desktop" | "tablet" | "mobile" | "mp-wechat" | "zhihu"
+
+|   | Explanation | Default |
+| - | - | - |
+| key | Custom action ID, not Empty. | - |
+| text | Button Text | - |
+| className | Button Class | - |
+| click: (key: string) => void; | Click Event | - |
+
 #### options.hint
 
 |   | Explanation | Default |

src/ts/preview/index.ts

@@ -38,23 +38,13 @@ export class Preview {
             event.preventDefault();
         });
 
-        const actions = this.genActions(vditor.options.preview.actions);
-        // 如果只有一个选项时也没必要呈现
-        if (actions.length <= 1) {
-            this.element.appendChild(previewElement);
-            return ;
-        }
-
+        const actions = vditor.options.preview.actions;
         const actionElement = document.createElement("div");
         actionElement.className = "vditor-preview__action";
         const actionHtml: string[] = [];
-        const actionCustom: IPreviewActionCustom[] = [];
-        const customPrefix = `_custom-`;
         for (let i = 0; i < actions.length; i++) {
             const action = actions[i];
             if (typeof action === "object") {
-                action.key = customPrefix + (action.key || `${i + 1}`);
-                actionCustom.push(action);
                 actionHtml.push(`
                     <button data-type="${action.key}" class="${action.className}">${action.text}</button>`);
                 continue;
@@ -77,7 +67,7 @@ export class Preview {
                     break;
             }
         }
-        actionElement.innerHTML = actionHtml.join(``);
+        actionElement.innerHTML = actionHtml.join("");
         this.element.appendChild(actionElement);
         this.element.appendChild(previewElement);
 
@@ -86,17 +76,13 @@ export class Preview {
             if (!btn) {
                 return;
             }
-
             const type = btn.getAttribute("data-type");
-            if (type === actionElement.querySelector(".vditor-preview__action--current").getAttribute("data-type")) {
+            const actionCustom = actions.find((w: IPreviewActionCustom) => w?.key === type) as IPreviewActionCustom;
+            if (actionCustom) {
+                actionCustom.click(type);
                 return;
             }
 
-            if (type.startsWith(customPrefix)) {
-                actionCustom.find((w: IPreviewActionCustom) => w.key === type).click();
-                return ;
-            }
-
             if (type === "mp-wechat" || type === "zhihu") {
                 this.copyToX(vditor, this.element.lastElementChild.cloneNode(true) as HTMLElement, type);
                 return;
@@ -238,13 +224,4 @@ export class Preview {
         this.element.lastElementChild.remove();
         vditor.tip.show(`已复制，可到${type === "zhihu" ? "知乎" : "微信公众号平台"}进行粘贴`);
     }
-
-    private genActions(actions: IPreviewActionType): Array<IPreviewAction| IPreviewActionCustom> {
-        if (actions === "none") {
-            return [];
-        } else if (actions === "all") {
-            return ["desktop" , "tablet" , "mobile" , "mp-wechat", "zhihu"];
-        }
-        return actions;
-    }
 }

src/ts/util/Options.ts

@@ -71,7 +71,7 @@ export class Options {
         outline: false,
         placeholder: "",
         preview: {
-            actions: "all",
+            actions: ["desktop", "tablet", "mobile", "mp-wechat", "zhihu"],
             delay: 1000,
             hljs: Constants.HLJS_OPTIONS,
             markdown: Constants.MARKDOWN_OPTIONS,

types/index.d.ts

@@ -372,13 +372,9 @@ interface IPreview {
     markdown?: IMarkdownConfig;
     /** @link https://hacpai.com/article/1549638745630#options-preview-theme */
     theme?: IPreviewTheme;
-    /**
-     * 工具条，默认值：`all`
-     * - `all` 表示显示所有
-     * - `none` 表示不显示
-     * - `[ 'desktop', 'mobile']` 表示只显示桌面与手机
-     */
-    actions?: IPreviewActionType;
+    /** @link https://hacpai.com/article/1549638745630#options-preview-actions  */
+    actions?: Array<IPreviewAction | IPreviewActionCustom>;
+
     /** 预览回调 */
     parse?(element: HTMLElement): void;
 
@@ -387,25 +383,17 @@ interface IPreview {
 }
 
 type IPreviewAction = "desktop" | "tablet" | "mobile" | "mp-wechat" | "zhihu";
+
 interface IPreviewActionCustom {
-    /**
-     * 键名，不指定时自动生成
-     */
-    key?: string;
-    /**
-     * 按钮文本
-     */
+    /** 键名 */
+    key: string;
+    /** 按钮文本 */
     text: string;
-    /**
-     * 按钮 `class` 值
-     */
+    /** 按钮 className 值 */
     className?: string;
-    /**
-     * 点击时回调
-     */
-    click: () => void;
+    /** 点击回调 */
+    click: (key: string) => void;
 }
-type IPreviewActionType = "all" | "none" | Array<IPreviewAction | IPreviewActionCustom>;
 
 interface IPreviewOptions {
     customEmoji?: IObject;