:sparkles: fix #326

CHANGELOG.md

@@ -102,12 +102,12 @@
   * 添加 `options.upload.setHeaders: { [key: string]: string }`
   * 为 `options.toolbar` 添加 outdent，indent, outline
   * 添加静态方法 `outlineRender`
-  * insert line 默认快捷键由 `⌘-⇧-D` 修改为 `⌘-⇧-H`，添加下移 `⌘-⇧-D`、上移 `⌘-⇧-U` 快捷键，移除上传快捷键
-  * 为 `options.toolbar` 添加 outdent，indent, outline, insert-after, insert-before
   * options.preview.maxWidth 默认值改为 800
   * IPreviewOptions 添加 `after`，`lazyLoadImage`
   * 添加 lazyLoadImageRender 静态方法
   * `setTheme` 方法添加 `codeTheme` 参数
+  * insert line 默认快捷键由 `⌘-⇧-D` 修改为 `⌘-⇧-H`，添加下移 `⌘-⇧-D`、上移 `⌘-⇧-U` 快捷键，移除上传、编辑器模式切换快捷键
+  * 为 `options.toolbar` 添加 outdent，indent, outline, insert-after, insert-before, 子菜单，code-theme
 
 ### v3.0.12 / 2020-04-06
 

src/assets/scss/_panel.scss

@@ -62,6 +62,11 @@
         left: auto;
       }
     }
+
+    &--side {
+      right: 100%;
+      margin-top: -26px !important;
+    }
   }
 
   &-input {

src/index.ts

@@ -338,7 +338,7 @@ class Vditor extends VditorMethod {
         }
 
         if (!markdown) {
-            hidePanel(this.vditor, ["emoji", "headings", "edit-mode", "hint"]);
+            hidePanel(this.vditor, ["emoji", "headings", "submenu", "hint"]);
             if (this.vditor.wysiwyg.popover) {
                 this.vditor.wysiwyg.popover.style.display = "none";
             }

src/ts/ir/index.ts

@@ -40,7 +40,7 @@ class IR {
 
     private bindEvent(vditor: IVditor) {
         this.element.addEventListener("scroll", () => {
-            hidePanel(vditor, ["hint", "headings", "emoji"]);
+            hidePanel(vditor, ["hint", "headings", "emoji", "submenu"]);
         });
 
         this.element.addEventListener("copy", (event: ClipboardEvent & { target: HTMLElement }) => {

src/ts/sv/index.ts

@@ -62,7 +62,7 @@ class Editor {
         });
 
         this.element.addEventListener("scroll", () => {
-            hidePanel(vditor, ["hint", "headings", "emoji"]);
+            hidePanel(vditor, ["hint", "headings", "emoji", "submenu"]);
             if (!vditor.preview || (vditor.preview && vditor.preview.element.style.display === "none")) {
                 return;
             }

src/ts/toolbar/EditMode.ts

@@ -16,7 +16,7 @@ import {disableToolbar, enableToolbar, hidePanel, hideToolbar, removeCurrentTool
 export const setEditMode = (vditor: IVditor, type: string, event: Event | string) => {
     let markdownText;
     if (typeof event !== "string") {
-        hidePanel(vditor, ["hint", "headings", "emoji"]);
+        hidePanel(vditor, ["hint", "headings", "emoji", "submenu"]);
         event.preventDefault();
         markdownText = getMarkdown(vditor);
     } else {
@@ -135,7 +135,7 @@ export class EditMode extends MenuItem {
         super(vditor, menuItem);
 
         this.panelElement = document.createElement("div");
-        this.panelElement.className = "vditor-hint vditor-panel--arrow";
+        this.panelElement.className = "vditor-hint vditor-panel--side";
         this.panelElement.innerHTML = `<button>${i18n[vditor.options.lang].wysiwyg} &lt;${updateHotkeyTip("⌘-⌥-7")}></button>
 <button>${i18n[vditor.options.lang].instantRendering} &lt;${updateHotkeyTip("⌘-⌥-8")}></button>
 <button>${i18n[vditor.options.lang].splitView} &lt;${updateHotkeyTip("⌘-⌥-9")}></button>`;
@@ -146,19 +146,11 @@ export class EditMode extends MenuItem {
     }
 
     public _bindEvent(vditor: IVditor) {
-        this.element.children[0].addEventListener(getEventName(), (event) => {
-            event.preventDefault();
-            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
-                return;
-            }
-            (this.element.firstElementChild as HTMLElement).blur();
-
-            if (this.panelElement.style.display === "block") {
-                this.panelElement.style.display = "none";
-            } else {
-                this.panelElement.style.display = "block";
-            }
-            hidePanel(vditor, ["hint", "headings", "emoji"]);
+        this.element.addEventListener("mouseover", (event) => {
+            this.panelElement.style.display = "block";
+        });
+        this.element.addEventListener("mouseout", (event) => {
+            this.panelElement.style.display = "none";
         });
 
         this.panelElement.children.item(0).addEventListener(getEventName(), (event: Event) => {

src/ts/toolbar/Emoji.ts

@@ -50,7 +50,7 @@ data-value=":${key}: " data-key=":${key}:" class="vditor-emojis__icon" src="${em
             } else {
                 panelElement.style.display = "block";
             }
-            hidePanel(vditor, ["hint", "headings", "popover"]);
+            hidePanel(vditor, ["hint", "headings", "popover", "submenu"]);
         });
 
         panelElement.querySelectorAll(".vditor-emojis button").forEach((element: HTMLElement) => {

src/ts/toolbar/Headings.ts

@@ -47,7 +47,7 @@ export class Headings extends MenuItem {
                     panelElement.style.display = "block";
                 }
             }
-            hidePanel(vditor, ["hint", "emoji", "popover"]);
+            hidePanel(vditor, ["hint", "emoji", "popover", "submenu"]);
         });
 
         for (let i = 0; i < 6; i++) {

src/ts/toolbar/setToolbar.ts

@@ -70,7 +70,7 @@ export const showToolbar = (toolbar: { [key: string]: HTMLElement }, names: stri
     });
 };
 
-// ["hint", "headings", "popover", "emoji"]
+// ["headings", "emoji", "submenu", "popover", "hint"]
 export const hidePanel = (vditor: IVditor, panels: string[]) => {
     if (vditor.toolbar.elements.emoji && panels.includes("emoji")) {
         (vditor.toolbar.elements.emoji.lastElementChild as HTMLElement).style.display = "none";
@@ -84,4 +84,9 @@ export const hidePanel = (vditor: IVditor, panels: string[]) => {
     if (vditor.wysiwyg.popover && panels.includes("popover")) {
         vditor.wysiwyg.popover.style.display = "none";
     }
+    if (panels.includes("submenu")) {
+        vditor.toolbar.element.querySelectorAll(".vditor-panel--left").forEach((item: HTMLElement) => {
+            item.style.display = "none";
+        });
+    }
 };

src/ts/ui/initUI.ts

@@ -99,8 +99,8 @@ export const setPadding = (vditor: IVditor) => {
         outlineWidth = outlienElement.offsetWidth;
     }
 
-    vditor.toolbar.element.style.paddingLeft = parseInt(vditor[vditor.currentMode].element.style.paddingLeft, 10)
-        + outlineWidth + "px";
+    vditor.toolbar.element.style.paddingLeft =
+        parseInt(vditor[vditor.currentMode].element.style.paddingLeft || "0", 10) + outlineWidth + "px";
 };
 
 export const setTypewriterPosition = (vditor: IVditor) => {

src/ts/util/Options.ts

@@ -241,7 +241,12 @@ export class Options {
             tipPosition: "nw",
             toolbar: [
                 {
-                    hotkey: "⌘-⇧-M",
+                    hotkey: "⌘-'",
+                    icon: fullscreenSVG,
+                    name: "fullscreen",
+                    tipPosition: "nw",
+                },
+                {
                     icon: editSVG,
                     name: "edit-mode",
                     tipPosition: "nw",
@@ -261,11 +266,6 @@ export class Options {
                     icon: formatSVG,
                     name: "format",
                     tipPosition: "nw",
-                }, {
-                    hotkey: "⌘-'",
-                    icon: fullscreenSVG,
-                    name: "fullscreen",
-                    tipPosition: "nw",
                 }, {
                     icon: outlinerSVG,
                     name: "outline",

src/ts/util/editorCommonEvent.ts

@@ -19,7 +19,7 @@ export const focusEvent = (vditor: IVditor, editorElement: HTMLElement) => {
         if (vditor.options.focus) {
             vditor.options.focus(getMarkdown(vditor));
         }
-        hidePanel(vditor, ["headings", "emoji"]);
+        hidePanel(vditor, ["headings", "emoji", "submenu"]);
     });
 };
 

src/ts/wysiwyg/index.ts

@@ -64,7 +64,7 @@ class WYSIWYG {
         }
 
         window.addEventListener("scroll", () => {
-            hidePanel(vditor, ["hint", "headings", "emoji"]);
+            hidePanel(vditor, ["hint", "headings", "emoji", "submenu"]);
             if (this.popover.style.display !== "block") {
                 return;
             }
@@ -82,7 +82,7 @@ class WYSIWYG {
         });
 
         this.element.addEventListener("scroll", () => {
-            hidePanel(vditor, ["hint", "headings", "emoji"]);
+            hidePanel(vditor, ["hint", "headings", "emoji", "submenu"]);
             if (this.popover.style.display !== "block") {
                 return;
             }