🎨 Vanessa219#27 math

stevapple · Apr 8, 2020 · b7972d7 · b7972d7
1 parent a7be14f
commit b7972d7
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 4 deletions.
diff --git a/src/assets/scss/_ir.scss b/src/assets/scss/_ir.scss
@@ -52,6 +52,7 @@
         color: var(--textarea-text-color);
 
         .language-mermaid,
+        .language-math,
         .language-graphviz,
         .language-echarts {
           background-color: var(--code-background-color) !important;
@@ -71,10 +72,18 @@
         content: '```';
         color: var(--second-color);
       }
+
+      &[data-type="math-block"]:before,
+      span[data-type="math-block-close-marker-zwsp"]:before {
+        content: '$$';
+        color: var(--second-color);
+      }
     }
 
     span[data-type="code-block-open-marker"],
-    span[data-type="code-block-close-marker"] {
+    span[data-type="code-block-close-marker"],
+    span[data-type="math-block-open-marker"],
+    span[data-type="math-block-close-marker"]{
       display: none;
     }
   }

diff --git a/src/assets/scss/_reset.scss b/src/assets/scss/_reset.scss
@@ -203,6 +203,7 @@
       background-color: var(--code-background-color);
 
       &.language-mermaid,
+      &.language-math,
       &.language-graphviz,
       &.language-echarts {
         background-color: var(--preview-background-color);

diff --git a/src/assets/scss/_wysiwyg.scss b/src/assets/scss/_wysiwyg.scss
@@ -74,6 +74,7 @@
 
         &.language-mermaid,
         &.language-graphviz,
+        &.language-math,
         &.language-echarts {
           background-color: var(--code-background-color) !important;
         }

diff --git a/src/ts/ir/index.ts b/src/ts/ir/index.ts
@@ -1,7 +1,7 @@
 import {uploadFiles} from "../upload";
 import {setHeaders} from "../upload/setHeaders";
 import {isCtrl} from "../util/compatibility";
-import {focusEvent, hotkeyEvent, selectEvent} from "../util/editorCommenEvent";
+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";
@@ -203,6 +203,7 @@ class IR {
                 range.selectNodeContents(previewElement.previousElementSibling.firstElementChild);
                 range.collapse(true);
                 setSelectionFocus(range);
+                scrollCenter(this.element);
             }
         });
 
@@ -227,7 +228,7 @@ class IR {
             const previewRenderElement = hasClosestByClassName(range.startContainer, "vditor-ir__preview");
             if (previewRenderElement && event.key.indexOf("Arrow") > -1) {
                 if (event.key === "ArrowDown" || event.key === "ArrowRight") {
-                    range.selectNodeContents(previewRenderElement.parentElement.querySelector('[data-type="code-block-close-marker-zwsp"]'));
+                    range.selectNodeContents(previewRenderElement.parentElement.lastElementChild);
                 } else {
                     range.selectNodeContents(previewRenderElement.previousElementSibling.firstElementChild);
                 }

diff --git a/src/ts/ir/process.ts b/src/ts/ir/process.ts
@@ -4,6 +4,7 @@ import {chartRender} from "../markdown/chartRender";
 import {codeRender} from "../markdown/codeRender";
 import {graphvizRender} from "../markdown/graphvizRender";
 import {highlightRender} from "../markdown/highlightRender";
+import {mathRender} from "../markdown/mathRender";
 import {mermaidRender} from "../markdown/mermaidRender";
 import {isSafari} from "../util/compatibility";
 import {getMarkdown} from "../util/getMarkdown";
@@ -73,6 +74,10 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
         chartRender(previewPanel, vditor.options.cdn);
     } 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>`;
+        mathRender(previewPanel.parentElement, {cdn: vditor.options.cdn, math: vditor.options.preview.math});
     } else {
         highlightRender(Object.assign({}, vditor.options.preview.hljs, {enable: true}),
             previewPanel, vditor.options.cdn);

diff --git a/src/ts/ir/processKeydown.ts b/src/ts/ir/processKeydown.ts
@@ -85,6 +85,17 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
                 return true;
             }
         }
+        // 数学公式上无元素，按上或左将添加新块
+        if ((event.key === "ArrowUp" || event.key === "ArrowLeft") &&
+            codeRenderElement.getAttribute("data-type") === "math-block"
+            && !preRenderElement.parentElement.previousElementSibling &&
+            getSelectPosition(codeRenderElement, range).start === 0) {
+            preRenderElement.parentElement.insertAdjacentHTML("beforebegin",
+                `<p data-block="0">${Constants.ZWSP}<wbr></p>`);
+            setRangeByWbr(vditor.ir.element, range);
+            event.preventDefault();
+            return true;
+        }
     }
     const preBeforeElement = hasClosestByAttribute(startContainer, "data-type", "code-block-info");
     if (preBeforeElement && range.toString() === "") {
@@ -108,7 +119,8 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
             return true;
         }
     }
-    const preAfterElement = hasClosestByAttribute(startContainer, "data-type", "code-block-close-marker-zwsp");
+    const preAfterElement = hasClosestByAttribute(startContainer, "data-type", "code-block-close-marker-zwsp")
+        || hasClosestByAttribute(startContainer, "data-type", "math-block-close-marker-zwsp");
     if (preAfterElement) {
         if (event.key === "Enter") {
             preAfterElement.parentElement.insertAdjacentHTML("afterend",

diff --git a/src/ts/util/editorCommenEvent.ts b/src/ts/util/editorCommenEvent.ts
@@ -28,6 +28,9 @@ export const scrollCenter = (editorElement: HTMLElement) => {
     if (cursorTop > center) {
         editorElement.scrollTop = editorElement.scrollTop + (cursorTop - center);
     }
+    if (cursorTop < 0) {
+        editorElement.scrollTop = editorElement.scrollTop + cursorTop;
+    }
 };
 
 export const hotkeyEvent = (vditor: IVditor, editorElement: HTMLElement) => {