Vanessa 4 năm trước cách đây
mục cha
commit
9fe8afb876

+ 1 - 0
CHANGELOG.md

@@ -98,6 +98,7 @@
 
 ### v3.8.1 / 2021-02-xx
 
+* [904](https://github.com/Vanessa219/vditor/issues/904) wysiwyg 和 ir 模式表格增加向上插入行和向左插入列 `改进功能`
 * [920](https://github.com/Vanessa219/vditor/issues/920) ” 无法输入 `修复缺陷`
 * [919](https://github.com/Vanessa219/vditor/issues/919) 支持外部文本内容拖拽进入编辑器 `改进功能`
 * [917](https://github.com/Vanessa219/vditor/issues/917) intsertValue无法一次添加多行markdown内容 `修复缺陷`

+ 14 - 2
demo/icon.html

@@ -26,7 +26,7 @@
     </style>
 </head>
 <body>
-<h2>SiYuan</h2>
+<h2>Vditor</h2>
 <div class="fn__clear">
     <div>
         <svg>
@@ -268,6 +268,18 @@
         </svg>
         vditor-icon-insert-column
     </div>
+    <div>
+        <svg>
+            <use xlink:href="#vditor-icon-insert-rowb"></use>
+        </svg>
+        vditor-icon-insert-rowb
+    </div>
+    <div>
+        <svg>
+            <use xlink:href="#vditor-icon-insert-columnb"></use>
+        </svg>
+        vditor-icon-insert-columnb
+    </div>
     <div>
         <svg>
             <use xlink:href="#vditor-icon-italic"></use>
@@ -335,6 +347,6 @@
         vditor-icon-zhihu
     </div>
 </div>
-<script src="../src/js/icons/material.js"></script>
+<script src="../src/js/icons/ant.js"></script>
 </body>
 </html>

+ 6 - 0
src/js/icons/ant.js

@@ -126,11 +126,17 @@ document.body.insertAdjacentHTML('afterBegin', `<svg style="position: absolute;
       <path d="M31.663 5.221h-3.158c-0.215 0-0.417 0.105-0.543 0.278l-11.962 16.489-11.962-16.489c-0.126-0.173-0.328-0.278-0.543-0.278h-3.158c-0.274 0-0.434 0.312-0.274 0.535l14.847 20.468c0.539 0.741 1.642 0.741 2.177 0l14.847-20.468c0.164-0.223 0.004-0.535-0.269-0.535z"></path>
     </symbol>
     <symbol id="vditor-icon-insert-row" viewBox="0 0 32 32">
+      <path d="M30.668 23.040h-29.336c-0.736 0-1.332-0.572-1.332-1.28v-18.56c0-0.708 0.596-1.28 1.332-1.28h29.332c0.736 0 1.332 0.572 1.332 1.28v18.56c0.004 0.708-0.592 1.28-1.328 1.28zM9.92 4.8h-7.040v6.4h7.040v-6.4zM9.92 13.76h-7.040v6.4h7.040v-6.4zM19.52 4.8h-7.040v6.4h7.040v-6.4zM19.52 13.76h-7.040v6.4h7.040v-6.4zM29.12 4.8h-7.040v6.4h7.040v-6.4zM29.12 13.76h-7.040v6.4h7.040v-6.4zM31.68 30.080h-31.36c-0.176 0-0.32-0.144-0.32-0.32v-3.2c0-0.176 0.144-0.32 0.32-0.32h31.36c0.176 0 0.32 0.144 0.32 0.32v3.2c0 0.176-0.144 0.32-0.32 0.32z"></path>
+    </symbol>
+    <symbol id="vditor-icon-insert-rowb" viewBox="0 0 32 32">
       <path d="M30.668 8.96h-29.336c-0.736 0-1.332 0.572-1.332 1.28v18.56c0 0.708 0.596 1.28 1.332 1.28h29.332c0.736 0 1.332-0.572 1.332-1.28v-18.56c0.004-0.708-0.592-1.28-1.328-1.28zM9.92 27.2h-7.040v-6.4h7.040v6.4zM9.92 18.24h-7.040v-6.4h7.040v6.4zM19.52 27.2h-7.040v-6.4h7.040v6.4zM19.52 18.24h-7.040v-6.4h7.040v6.4zM29.12 27.2h-7.040v-6.4h7.040v6.4zM29.12 18.24h-7.040v-6.4h7.040v6.4zM31.68 1.92h-31.36c-0.176 0-0.32 0.144-0.32 0.32v3.2c0 0.176 0.144 0.32 0.32 0.32h31.36c0.176 0 0.32-0.144 0.32-0.32v-3.2c0-0.176-0.144-0.32-0.32-0.32z"></path>
     </symbol>
     <symbol id="vditor-icon-insert-column" viewBox="0 0 32 32">
       <path d="M29.76 0h-3.2c-0.176 0-0.32 0.144-0.32 0.32v31.36c0 0.176 0.144 0.32 0.32 0.32h3.2c0.176 0 0.32-0.144 0.32-0.32v-31.36c0-0.176-0.144-0.32-0.32-0.32zM21.76 0h-18.56c-0.708 0-1.28 0.596-1.28 1.332v29.332c0 0.736 0.572 1.332 1.28 1.332h18.56c0.708 0 1.28-0.596 1.28-1.332v-29.332c0-0.736-0.572-1.332-1.28-1.332zM11.2 29.12h-6.4v-7.040h6.4v7.040zM11.2 19.52h-6.4v-7.040h6.4v7.040zM11.2 9.92h-6.4v-7.040h6.4v7.040zM20.16 29.12h-6.4v-7.040h6.4v7.040zM20.16 19.52h-6.4v-7.040h6.4v7.040zM20.16 9.92h-6.4v-7.040h6.4v7.040z"></path>
     </symbol>
+    <symbol id="vditor-icon-insert-columnb" viewBox="0 0 32 32">
+      <path d="M2.24 32h3.2c0.176 0 0.32-0.144 0.32-0.32v-31.36c0-0.176-0.144-0.32-0.32-0.32h-3.2c-0.176 0-0.32 0.144-0.32 0.32v31.36c0 0.176 0.144 0.32 0.32 0.32zM10.24 32h18.56c0.708 0 1.28-0.596 1.28-1.332v-29.332c0-0.736-0.572-1.332-1.28-1.332h-18.56c-0.708 0-1.28 0.596-1.28 1.332v29.332c0 0.736 0.572 1.332 1.28 1.332zM20.8 2.88h6.4v7.040h-6.4v-7.040zM20.8 12.48h6.4v7.040h-6.4v-7.040zM20.8 22.080h6.4v7.040h-6.4v-7.040zM11.84 2.88h6.4v7.040h-6.4v-7.040zM11.84 12.48h6.4v7.040h-6.4v-7.040zM11.84 22.080h6.4v7.040h-6.4v-7.040z"></path>
+    </symbol>
     <symbol id="vditor-icon-italic" viewBox="0 0 32 32">
       <path d="M29 0h-19.636c-0.2 0-0.364 0.164-0.364 0.364v2.909c0 0.2 0.164 0.364 0.364 0.364h8.236l-7.091 24.727h-7.373c-0.2 0-0.364 0.164-0.364 0.364v2.909c0 0.2 0.164 0.364 0.364 0.364h19.636c0.2 0 0.364-0.164 0.364-0.364v-2.909c0-0.2-0.164-0.364-0.364-0.364h-8.482l7.091-24.727h7.618c0.2 0 0.364-0.164 0.364-0.364v-2.909c0-0.2-0.164-0.364-0.364-0.364z"></path>
     </symbol>

+ 22 - 4
src/js/icons/material.js

@@ -32,11 +32,29 @@ document.body.insertAdjacentHTML('afterBegin', `<svg style="position: absolute;
       <path d="M0 14.231h17.797v3.538h-17.797v-3.538z"></path>
       <path d="M28.387 16l3.613 3.613-2.023 2.023-3.613-3.613-3.613 3.613-2.023-2.023 3.613-3.613-3.613-3.613 2.023-2.023 3.613 3.613 3.613-3.613 2.023 2.023-3.613 3.613z"></path>
     </symbol>
-    <symbol id="vditor-icon-insert-column" viewBox="0 0 32 32">
-        <path d="M26.667 0v23.111h-3.556v-23.111h3.556zM17.778 0v17.778h-3.556v-17.778h3.556zM5.333 0h3.556v23.111h-3.556v-23.111zM22.382 32l-6.382-6.364-6.382 6.364-2.507-2.507 8.889-8.889 8.889 8.889-2.507 2.507z"></path>
-    </symbol>
     <symbol id="vditor-icon-insert-row" viewBox="0 0 32 32">
-        <path d="M0 26.667h23.111v-3.556h-23.111v3.556zM0 17.778h17.778v-3.556h-17.778v3.556zM0 5.333v3.556h23.111v-3.556h-23.111zM32 22.382l-6.364-6.382 6.364-6.382-2.507-2.507-8.889 8.889 8.889 8.889 2.507-2.507z"></path>
+      <path d="M1.462 5.493h21.543v3.276h-21.543v-3.276z"></path>
+      <path d="M1.462 22.072h16.48v3.276h-16.48v-3.276z"></path>
+      <path d="M1.462 13.783h21.543v3.276h-21.543v-3.276z"></path>
+      <path d="M24.366 23.71l6.171 5.952-2.43 2.338-8.619-8.29 8.619-8.29 2.43 2.337-6.171 5.953z"></path>
+    </symbol>
+    <symbol id="vditor-icon-insert-rowb" viewBox="0 0 32 32">
+      <path d="M1.462 26.507h21.543v-3.276h-21.543v3.276z"></path>
+      <path d="M1.462 9.928h16.48v-3.276h-16.48v3.276z"></path>
+      <path d="M1.462 18.217h21.543v-3.276h-21.543v3.276z"></path>
+      <path d="M24.366 8.29l6.171-5.952-2.43-2.338-8.619 8.29 8.619 8.29 2.43-2.337-6.171-5.953z"></path>
+    </symbol>
+    <symbol id="vditor-icon-insert-column" viewBox="0 0 32 32">
+      <path d="M5.493 1.462v21.543h3.276v-21.543h-3.276z"></path>
+      <path d="M22.072 1.462v16.48h3.276v-16.48h-3.276z"></path>
+      <path d="M13.783 1.462v21.543h3.276v-21.543h-3.276z"></path>
+      <path d="M23.71 24.366l5.952 6.171 2.338-2.43-8.29-8.619-8.29 8.619 2.337 2.43 5.953-6.171z"></path>
+    </symbol>
+    <symbol id="vditor-icon-insert-columnb" viewBox="0 0 32 32">
+      <path d="M26.507 1.462v21.543h-3.276v-21.543h3.276z"></path>
+      <path d="M9.928 1.462v16.48h-3.276v-16.48h3.276z"></path>
+      <path d="M18.217 1.462v21.543h-3.276v-21.543h3.276z"></path>
+      <path d="M8.29 24.366l-5.952 6.171-2.338-2.43 8.29-8.619 8.29 8.619-2.337 2.43-5.953-6.171z"></path>
     </symbol>
     <symbol id="vditor-icon-code-theme" viewBox="0 0 32 32">
         <path d="M28.444 12.444v16h-24.924v-24.889h16v-3.556h-15.964c-1.956 0-3.556 1.6-3.556 3.556v24.889c0 1.956 1.6 3.556 3.556 3.556h24.889c1.956 0 3.556-1.6 3.556-3.556v-16h-3.556zM23.218 8.782l1.671 3.662 1.671-3.662 3.662-1.671-3.662-1.671-1.671-3.662-1.671 3.662-3.662 1.671zM16 8.889l-2.222 4.889-4.889 2.222 4.889 2.222 2.222 4.889 2.222-4.889 4.889-2.222-4.889-2.222z"></path>

+ 16 - 8
src/ts/i18n/index.ts

@@ -37,8 +37,10 @@ export const i18n: II18n = {
         "inline-code": "Inline Code",
         "insert-after": "Insert line after",
         "insert-before": "Insert line Before",
-        "insert-column": "Insert Column",
-        "insert-row": "Insert Row",
+        "insertColumnLeft": "Insert 1 left",
+        "insertColumnRight": "Insert 1 right",
+        "insertRowAbove": "Insert 1 above",
+        "insertRowBelow": "Insert 1 below",
         "instantRendering": "Instant Rendering",
         "italic": "Italic",
         "language": "Language",
@@ -114,8 +116,10 @@ export const i18n: II18n = {
         "inline-code": "インラインコード",
         "insert-after": "ブロックの後ろに入力",
         "insert-before": "ブロックの前に入力",
-        "insert-column": "列 挿入",
-        "insert-row": "行 挿入",
+        "insertColumnLeft": "左側に列を挿入",
+        "insertColumnRight": "右側に列を挿入",
+        "insertRowAbove": "上に行を挿入",
+        "insertRowBelow": "下に行を挿入",
         "instantRendering": "インスタントレンダリング",
         "italic": "斜体",
         "language": "言語",
@@ -191,8 +195,10 @@ export const i18n: II18n = {
         "inline-code": "인라인코드",
         "insert-after": "블락 뒤로 입력",
         "insert-before": "블락 앞으로 입력",
-        "insert-column": "열 삽입",
-        "insert-row": "행 삽입",
+        "insertColumnLeft": "왼쪽에 열 삽입",
+        "insertColumnRight": "오른쪽에 열 삽입",
+        "insertRowAbove": "위에 행 삽입",
+        "insertRowBelow": "아래에 행 삽입",
         "instantRendering": "타이포라",
         "italic": "기울임꼴",
         "language": "언어",
@@ -268,8 +274,10 @@ export const i18n: II18n = {
         "inline-code": "行内代码",
         "insert-after": "末尾插入行",
         "insert-before": "起始插入行",
-        "insert-column": "插入列",
-        "insert-row": "插入行",
+        "insertColumnLeft": "在左边插入一列",
+        "insertColumnRight": "在右边插入一列",
+        "insertRowAbove": "在上方插入一行",
+        "insertRowBelow": "在下方插入一行",
         "instantRendering": "即时渲染",
         "italic": "斜体",
         "language": "语言",

+ 2 - 2
src/ts/ir/processKeydown.ts

@@ -160,7 +160,7 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
     const headingElement = hasClosestByHeadings(startContainer);
     if (headingElement) {
         // enter++: 标题变大
-        if (matchHotKey("⌘-=", event)) {
+        if (matchHotKey("⌘=", event)) {
             const headingMarkerElement = headingElement.querySelector(".vditor-ir__marker--heading");
             if (headingMarkerElement && headingMarkerElement.textContent.trim().length > 1) {
                 processHeading(vditor, headingMarkerElement.textContent.substr(1));
@@ -170,7 +170,7 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
         }
 
         // enter++: 标题变小
-        if (matchHotKey("⌘--", event)) {
+        if (matchHotKey("⌘-", event)) {
             const headingMarkerElement = headingElement.querySelector(".vditor-ir__marker--heading");
             if (headingMarkerElement && headingMarkerElement.textContent.trim().length < 6) {
                 processHeading(vditor, headingMarkerElement.textContent.trim() + "# ");

+ 3 - 3
src/ts/toolbar/EditMode.ts

@@ -157,9 +157,9 @@ export class EditMode extends MenuItem {
 
         const panelElement = document.createElement("div");
         panelElement.className = `vditor-hint${menuItem.level === 2 ? "" : " vditor-panel--arrow"}`;
-        panelElement.innerHTML = `<button data-mode="wysiwyg">${i18n[vditor.options.lang].wysiwyg} &lt;${updateHotkeyTip("⌘-⌥-7")}></button>
-<button data-mode="ir">${i18n[vditor.options.lang].instantRendering} &lt;${updateHotkeyTip("⌘-⌥-8")}></button>
-<button data-mode="sv">${i18n[vditor.options.lang].splitView} &lt;${updateHotkeyTip("⌘-⌥-9")}></button>`;
+        panelElement.innerHTML = `<button data-mode="wysiwyg">${i18n[vditor.options.lang].wysiwyg} &lt;${updateHotkeyTip("⌥⌘7")}></button>
+<button data-mode="ir">${i18n[vditor.options.lang].instantRendering} &lt;${updateHotkeyTip("⌥⌘8")}></button>
+<button data-mode="sv">${i18n[vditor.options.lang].splitView} &lt;${updateHotkeyTip("⌥⌘9")}></button>`;
 
         this.element.appendChild(panelElement);
 

+ 6 - 6
src/ts/toolbar/Headings.ts

@@ -15,12 +15,12 @@ export class Headings extends MenuItem {
 
         const panelElement = document.createElement("div");
         panelElement.className = "vditor-hint vditor-panel--arrow";
-        panelElement.innerHTML = `<button data-tag="h1" data-value="# ">Heading 1 ${updateHotkeyTip("&lt;⌘-⌥-1>")}</button>
-<button data-tag="h2" data-value="## ">Heading 2 &lt;${updateHotkeyTip("⌘-⌥-2")}></button>
-<button data-tag="h3" data-value="### ">Heading 3 &lt;${updateHotkeyTip("⌘-⌥-3")}></button>
-<button data-tag="h4" data-value="#### ">Heading 4 &lt;${updateHotkeyTip("⌘-⌥-4")}></button>
-<button data-tag="h5" data-value="##### ">Heading 5 &lt;${updateHotkeyTip("⌘-⌥-5")}></button>
-<button data-tag="h6" data-value="###### ">Heading 6 &lt;${updateHotkeyTip("⌘-⌥-6")}></button>`;
+        panelElement.innerHTML = `<button data-tag="h1" data-value="# ">Heading 1 ${updateHotkeyTip("&lt;⌥⌘1>")}</button>
+<button data-tag="h2" data-value="## ">Heading 2 &lt;${updateHotkeyTip("⌥⌘2")}></button>
+<button data-tag="h3" data-value="### ">Heading 3 &lt;${updateHotkeyTip("⌥⌘3")}></button>
+<button data-tag="h4" data-value="#### ">Heading 4 &lt;${updateHotkeyTip("⌥⌘4")}></button>
+<button data-tag="h5" data-value="##### ">Heading 5 &lt;${updateHotkeyTip("⌥⌘5")}></button>
+<button data-tag="h6" data-value="###### ">Heading 6 &lt;${updateHotkeyTip("⌥⌘6")}></button>`;
 
         this.element.appendChild(panelElement);
 

+ 14 - 15
src/ts/util/compatibility.ts

@@ -38,26 +38,25 @@ export const isCtrl = (event: KeyboardEvent) => {
         return false;
     }
 };
-
 // Mac,Windows 快捷键展示
 export const updateHotkeyTip = (hotkey: string) => {
     if (/Mac/.test(navigator.platform) || navigator.platform === "iPhone") {
-        hotkey = hotkey.replace("ctrl", "⌘").replace("shift", "⇧")
-            .replace("alt", "⌥");
-        if (hotkey.indexOf("⇧") > -1) {
-            if (!isFirefox()) {
-                hotkey = hotkey.replace(":", ";").replace("+", "=")
-                    .replace("_", "-");
-            } else {
-                // Mac Firefox 按下 shift 后,key 同 windows 系统
-                hotkey = hotkey.replace(";", ":").replace("=", "+");
-            }
+        if (hotkey.indexOf("⇧") > -1 && isFirefox()) {
+            // Mac Firefox 按下 shift 后,key 同 windows 系统
+            hotkey = hotkey.replace(";", ":").replace("=", "+").replace("-", "_");
         }
     } else {
-        hotkey = hotkey.replace("⌘", "ctrl").replace("⇧", "shift")
-            .replace("⌥", "alt");
-        if (hotkey.indexOf("shift") > -1) {
-            hotkey = hotkey.replace(";", ":").replace("=", "+");
+        if (hotkey.startsWith("⌘")) {
+            hotkey = hotkey.replace("⌘", "⌘+");
+        } else if (hotkey.startsWith("⌥") && hotkey.substr(1, 1) !== "⌘") {
+            hotkey = hotkey.replace("⌥", "⌥+");
+        } else {
+            hotkey = hotkey.replace("⇧⌘", "⌘+⇧+").replace("⌥⌘", "⌥+⌘+");
+        }
+        hotkey = hotkey.replace("⌘", "Ctrl").replace("⇧", "Shift")
+            .replace("⌥", "Alt");
+        if (hotkey.indexOf("Shift") > -1) {
+            hotkey = hotkey.replace(";", ":").replace("=", "+").replace("-", "_");
         }
     }
     return hotkey;