✨ fix #70

Vanessa219 · Jan 14, 2020 · d8c0343 · d8c0343
1 parent a6c608b
commit d8c0343
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 29 deletions.
diff --git a/src/ts/toolbar/Headings.ts b/src/ts/toolbar/Headings.ts
@@ -2,6 +2,7 @@ import headingsSVG from "../../assets/icons/headings.svg";
 import {insertText} from "../editor/insertText";
 import {getEventName} from "../util/getEventName";
 import {highlightToolbar} from "../wysiwyg/highlightToolbar";
+import {setHeading} from "../wysiwyg/setHeading";
 import {MenuItem} from "./MenuItem";
 
 export class Headings extends MenuItem {
@@ -59,13 +60,7 @@ export class Headings extends MenuItem {
         for (let i = 0; i < 6; i++) {
             headingsPanelElement.children.item(i).addEventListener(getEventName(), (event: Event) => {
                 if (vditor.currentMode === "wysiwyg") {
-                    document.execCommand("formatblock", false, (event.target as HTMLElement).tagName.toLowerCase());
-                    // https://github.com/Vanessa219/vditor/issues/50
-                    const range = getSelection().getRangeAt(0);
-                    if (!range.collapsed && !range.startContainer.isEqualNode(range.endContainer)) {
-                        range.setStart(range.endContainer, 0);
-                    }
-                    highlightToolbar(vditor);
+                    setHeading(vditor, (event.target as HTMLElement).tagName.toLowerCase());
                 } else {
                     insertText(vditor, (event.target as HTMLElement).getAttribute("data-value"), "",
                         false, true);

diff --git a/src/ts/util/editorCommenEvent.ts b/src/ts/util/editorCommenEvent.ts
@@ -4,9 +4,10 @@ import {getSelectText} from "../editor/getSelectText";
 import {insertText} from "../editor/insertText";
 import {getCursorPosition} from "../hint/getCursorPosition";
 import {deleteKey, tabKey} from "../wysiwyg/processKeydown";
+import {setHeading} from "../wysiwyg/setHeading";
 import {getCurrentLinePosition} from "./getCurrentLinePosition";
 import {getMarkdown} from "./getMarkdown";
-import {hasClosestByAttribute, hasClosestByClassName} from "./hasClosest";
+import {hasClosestByAttribute, hasClosestByClassName, hasClosestByTag} from "./hasClosest";
 
 export const focusEvent = (vditor: IVditor, editorElement: HTMLElement) => {
     editorElement.addEventListener("focus", () => {
@@ -37,7 +38,7 @@ export const hotkeyEvent = (vditor: IVditor, editorElement: HTMLElement) => {
     const processKeymap = (hotkey: string, event: KeyboardEvent, action: () => void) => {
         const hotkeys = hotkey.split("-");
         const hasShift = hotkeys.length === 3 && (hotkeys[1] === "shift" || hotkeys[1] === "⇧");
-        const key = hasShift ? hotkeys[2] : hotkeys[1];
+        const key = (hasShift ? hotkeys[2] : hotkeys[1]) || "-";
         if ((hotkeys[0] === "ctrl" || hotkeys[0] === "⌘") && (event.metaKey || event.ctrlKey)
             && event.key.toLowerCase() === key.toLowerCase()) {
             if ((!hasShift && !event.shiftKey) || (hasShift && event.shiftKey)) {
@@ -102,6 +103,7 @@ export const hotkeyEvent = (vditor: IVditor, editorElement: HTMLElement) => {
             return;
         }
 
+        // esc
         if (event.key === "Escape") {
             if (vditor.options.esc) {
                 vditor.options.esc(getMarkdown(vditor));
@@ -222,16 +224,6 @@ export const hotkeyEvent = (vditor: IVditor, editorElement: HTMLElement) => {
             return;
         }
 
-        // 行级代码块中 ctrl + a，近对当前代码块进行全选
-        if (vditor.currentMode === "wysiwyg" && range.startContainer.parentElement.tagName === "CODE" &&
-            hasClosestByClassName(range.startContainer, "vditor-wysiwyg__block")) {
-            if (processKeymap("⌘-a", event, () => {
-                range.selectNodeContents(range.startContainer.parentElement);
-            })) {
-                return;
-            }
-        }
-
         // hotkey command + delete
         if (vditor.options.keymap.deleteLine && vditor.currentMode === "markdown") {
             if (processKeymap(vditor.options.keymap.deleteLine, event, () => {
@@ -277,16 +269,6 @@ export const hotkeyEvent = (vditor: IVditor, editorElement: HTMLElement) => {
             }
         }
 
-        // toolbar action
-        vditor.options.toolbar.forEach((menuItem: IMenuItem) => {
-            if (!menuItem.hotkey) {
-                return;
-            }
-            processKeymap(menuItem.hotkey, event, () => {
-                (vditor.toolbar.elements[menuItem.name].children[0] as HTMLElement).click();
-            });
-        });
-
         if (vditor.currentMode === "wysiwyg") {
             processKeymap("⌘-⇧-x", event, () => {
                 const itemElement: HTMLElement = vditor.wysiwyg.popover.querySelector('[data-type="remove"]');
@@ -308,8 +290,53 @@ export const hotkeyEvent = (vditor: IVditor, editorElement: HTMLElement) => {
                     itemElement.click();
                 }
             });
+
+            // 行级代码块中 command + a，近对当前代码块进行全选
+            if (range.startContainer.parentElement.tagName === "CODE" &&
+                hasClosestByClassName(range.startContainer, "vditor-wysiwyg__block")) {
+                if (processKeymap("⌘-a", event, () => {
+                    range.selectNodeContents(range.startContainer.parentElement);
+                })) {
+                    return;
+                }
+            }
+
+            const headingElement = hasClosestByTag(range.startContainer, "H");
+            if (headingElement) {
+                if (processKeymap("⌘-=", event, () => {
+                    event.preventDefault();
+                    const index = parseInt((headingElement as HTMLElement).tagName.substr(1), 10) - 1;
+                    if (index < 1) {
+                        return;
+                    }
+                    setHeading(vditor, `h${index}`);
+                })) {
+                    return;
+                }
+
+                if (processKeymap("⌘--", event, () => {
+                    event.preventDefault();
+                    const index = parseInt((headingElement as HTMLElement).tagName.substr(1), 10) + 1;
+                    if (index > 6) {
+                        return;
+                    }
+                    setHeading(vditor, `h${index}`);
+                })) {
+                    return;
+                }
+            }
         }
 
+        // toolbar action
+        vditor.options.toolbar.forEach((menuItem: IMenuItem) => {
+            if (!menuItem.hotkey) {
+                return;
+            }
+            processKeymap(menuItem.hotkey, event, () => {
+                (vditor.toolbar.elements[menuItem.name].children[0] as HTMLElement).click();
+            });
+        });
+
         // hint: 上下选择
         if (vditor.options.hint.at || vditor.toolbar.elements.emoji) {
             hint(event, hintElement);

diff --git a/src/ts/wysiwyg/setHeading.ts b/src/ts/wysiwyg/setHeading.ts
@@ -0,0 +1,11 @@
+import {highlightToolbar} from "./highlightToolbar";
+
+export const setHeading = (vditor: IVditor, tagName: string) => {
+    document.execCommand("formatblock", false, tagName);
+    // https://github.com/Vanessa219/vditor/issues/50
+    const range = getSelection().getRangeAt(0);
+    if (!range.collapsed && !range.startContainer.isEqualNode(range.endContainer)) {
+        range.setStart(range.endContainer, 0);
+    }
+    highlightToolbar(vditor);
+};