🎨 Vanessa219#27 代码块预览

stevapple · Apr 8, 2020 · efa560c · efa560c
1 parent 17a788b
commit efa560c
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 52 deletions.
diff --git a/src/assets/scss/_ir.scss b/src/assets/scss/_ir.scss
@@ -14,60 +14,65 @@
       color: var(--second-color);
     }
 
+
+    &:not(.vditor-ir__node--expand) .vditor-ir__marker {
+      padding: 0 !important;
+    }
+
     .vditor-ir__marker {
-      color: var(--second-color);
       width: 0;
       overflow: hidden;
       display: inline-block;
       height: 0;
       transition: $transition;
+    }
 
-      &--heading {
-        color: var(--ir-heading-color);
-      }
-
-      &--bi {
-        color: var(--ir-bi-color);
-      }
+    &--expand {
+      .vditor-ir__marker {
+        color: var(--second-color);
+        display: inline;
+        height: auto;
+        width: auto;
 
-      &--link {
-        color: var(--ir-link-color);
-      }
+        &--heading {
+          color: var(--ir-heading-color);
+        }
 
-      &--title {
-        color: var(--ir-title-color);
-      }
+        &--bi {
+          color: var(--ir-bi-color);
+        }
 
-      &--bracket {
-        color: var(--ir-bracket-color);
-        text-decoration: underline;
-      }
+        &--link {
+          color: var(--ir-link-color);
+        }
 
-      &--paren {
-        color: var(--ir-paren-color);
-      }
+        &--title {
+          color: var(--ir-title-color);
+        }
 
-      &--info {
-        color: var(--ir-heading-color);
-      }
+        &--bracket {
+          color: var(--ir-bracket-color);
+          text-decoration: underline;
+        }
 
-      &--pre {
-        color: var(--textarea-text-color);
+        &--paren {
+          color: var(--ir-paren-color);
+        }
 
-        .language-mermaid,
-        .language-math,
-        .language-graphviz,
-        .language-echarts {
-          background-color: var(--code-background-color) !important;
+        &--info {
+          color: var(--ir-heading-color);
         }
-      }
-    }
 
-    &--expand {
-      .vditor-ir__marker {
-        display: inline;
-        height: auto;
-        width: auto;
+        &--pre {
+          color: var(--textarea-text-color);
+
+          .language-mermaid,
+          .language-math,
+          .language-graphviz,
+          .language-echarts {
+            background-color: var(--code-background-color) !important;
+          }
+        }
       }
 
       &[data-type="code-block"]:before,

diff --git a/src/ts/ir/index.ts b/src/ts/ir/index.ts
@@ -4,7 +4,12 @@ import {isCtrl} from "../util/compatibility";
 import {focusEvent, hotkeyEvent, scrollCenter, selectEvent} from "../util/editorCommenEvent";
 import {hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
 import {processPasteCode} from "../util/processPasteCode";
-import {getSelectPosition, insertHTML, setSelectionByPosition, setSelectionFocus} from "../util/selection";
+import {
+    getSelectPosition,
+    insertHTML,
+    setSelectionByPosition,
+    setSelectionFocus
+} from "../util/selection";
 import {expandMarker} from "./expandMarker";
 import {highlightToolbar} from "./highlightToolbar";
 import {input} from "./input";
@@ -203,7 +208,12 @@ class IR {
                     range.startContainer, "vditor-ir__preview");
             }
             if (previewElement) {
-                range.selectNodeContents(previewElement.previousElementSibling.firstElementChild);
+                if (previewElement.previousElementSibling.firstElementChild) {
+                    range.selectNodeContents(previewElement.previousElementSibling.firstElementChild);
+                } else {
+                    // 行内数学公式
+                    range.selectNodeContents(previewElement.previousElementSibling);
+                }
                 range.collapse(true);
                 setSelectionFocus(range);
                 scrollCenter(this.element);
@@ -228,11 +238,25 @@ class IR {
                 expandMarker(getSelection().getRangeAt(0), vditor);
             }
 
-            if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
-                const range = getSelection().getRangeAt(0);
-                const previewRenderElement = hasClosestByClassName(range.startContainer, "vditor-ir__preview");
-                if (previewRenderElement) {
-                    range.selectNodeContents(previewRenderElement.previousElementSibling.firstElementChild);
+            const range = getSelection().getRangeAt(0);
+            const previewRenderElement = hasClosestByClassName(range.startContainer, "vditor-ir__preview");
+
+            if (previewRenderElement) {
+                if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+                    if (previewRenderElement.previousElementSibling.firstElementChild) {
+                        range.selectNodeContents(previewRenderElement.previousElementSibling.firstElementChild);
+                    } else {
+                        // 行内数学公式
+                        range.selectNodeContents(previewRenderElement.previousElementSibling);
+                    }
+                    range.collapse(false);
+                    event.preventDefault();
+                    return true;
+                }
+                // 行内数学公式
+                if (previewRenderElement.tagName === "SPAN" &&
+                    (event.key === "ArrowDown" || event.key === "ArrowRight")) {
+                    range.selectNodeContents(previewRenderElement.parentElement.lastElementChild)
                     range.collapse(false);
                     event.preventDefault();
                     return true;

diff --git a/src/ts/ir/input.ts b/src/ts/ir/input.ts
@@ -1,4 +1,4 @@
-import {getTopList, hasClosestBlock, hasClosestByTag} from "../util/hasClosest";
+import {getTopList, hasClosestBlock, hasClosestByClassName, hasClosestByTag} from "../util/hasClosest";
 import {log} from "../util/log";
 import {getSelectPosition, setRangeByWbr} from "../util/selection";
 import {processAfterRender, processCodeRender} from "./process";
@@ -51,6 +51,16 @@ export const input = (vditor: IVditor, range: Range) => {
         blockElement = vditor.ir.element;
     }
     if (!blockElement.querySelector("wbr")) {
+        const previewRenderElement = hasClosestByClassName(range.startContainer, "vditor-ir__preview");
+        if (previewRenderElement) {
+            // 光标如果落在预览区域中，则重置到代码区域
+            if (previewRenderElement.previousElementSibling.firstElementChild) {
+                range.selectNodeContents(previewRenderElement.previousElementSibling.firstElementChild);
+            } else {
+                range.selectNodeContents(previewRenderElement.previousElementSibling);
+            }
+            range.collapse(false);
+        }
         // document.exeComment insertHTML 会插入 wbr
         range.insertNode(document.createElement("wbr"));
     }

diff --git a/src/ts/ir/process.ts b/src/ts/ir/process.ts
@@ -76,8 +76,11 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
     } else if (language === "graphviz") {
         graphvizRender(previewPanel, vditor.options.cdn);
     } else if (language === "math") {
-        previewPanel.innerHTML = `<code class="language-math"><div class="vditor-math">${
-            previewPanel.innerHTML}</div></code>`;
+        let tag = "div";
+        if (previewPanel.tagName === "SPAN") {
+            tag = "span";
+        }
+        previewPanel.innerHTML = `<code class="language-math"><${tag} class="vditor-math">${previewPanel.innerHTML}</${tag}></code>`;
         mathRender(previewPanel.parentElement, {cdn: vditor.options.cdn, math: vditor.options.preview.math});
     } else {
         highlightRender(Object.assign({}, vditor.options.preview.hljs, {enable: true}),

diff --git a/src/ts/ir/processKeydown.ts b/src/ts/ir/processKeydown.ts
@@ -44,7 +44,7 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
 
     const pElement = hasClosestByMatchTag(startContainer, "P");
     const preRenderElement = hasClosestByClassName(startContainer, "vditor-ir__marker--pre");
-    if (preRenderElement) {
+    if (preRenderElement && preRenderElement.tagName === "PRE") {
         const codeRenderElement = preRenderElement.firstChild as HTMLElement;
         const codePosition = getSelectPosition(codeRenderElement, range);
         // 换行
@@ -97,10 +97,11 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
             return true;
         }
 
-        // 代码块下无元素，添加空块
+        // 代码块下无元素或者为代码块元素，添加空块
         if ((event.key === "ArrowDown" && codeRenderElement.textContent.trimRight().substr(codePosition.start).indexOf("\n") === -1) ||
             (event.key === "ArrowRight" && codePosition.start >= codeRenderElement.textContent.trimRight().length)) {
-            if (!preRenderElement.parentElement.nextElementSibling) {
+            const nextElement = preRenderElement.parentElement.nextElementSibling
+            if (!nextElement || (nextElement && nextElement.getAttribute('data-type'))) {
                 preRenderElement.parentElement.insertAdjacentHTML("afterend",
                     `<p data-block="0">${Constants.ZWSP}<wbr></p>`);
                 setRangeByWbr(vditor.ir.element, range);
@@ -151,7 +152,6 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
             range.insertNode(document.createTextNode("\n"));
             range.collapse(false);
             processAfterRender(vditor);
-            // processCodeRender(liElement, vditor);
             event.preventDefault();
             return true;
         }