🎨 Vanessa219#27 render code

stevapple · Apr 8, 2020 · 5d973a0 · 5d973a0
1 parent 75f5540
commit 5d973a0
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 14 deletions.
diff --git a/demo/static-preview.html b/demo/static-preview.html
@@ -644,8 +644,12 @@ <h2><a href="static.html" id="VditorForYou">Vditor for you</a></h2>
     document.getElementById('VditorForYou').href = '/'
   }
 
+  let textElement = document.getElementById(`${location.search.split('=')[1]}Text`)
+  if (!textElement) {
+    textElement = document.getElementById('zh_CNText')
+  }
   Vditor.preview(document.getElementById('preview'),
-    document.getElementById(`${location.search.split('=')[1]}Text`).textContent, {
+    textElement.textContent, {
       speech: {
         enable: true,
       },

diff --git a/src/assets/scss/_ir.scss b/src/assets/scss/_ir.scss
@@ -47,6 +47,10 @@
       &--info {
         color: var(--ir-heading-color);
       }
+
+      &--pre {
+        color: var(--textarea-text-color);
+      }
     }
 
     &--expand {

diff --git a/src/ts/hint/index.ts b/src/ts/hint/index.ts
@@ -7,6 +7,7 @@ import {hasClosestByAttribute, hasClosestByClassName} from "../util/hasClosest";
 import {getCursorPosition, getSelectPosition, insertHTML, setSelectionFocus} from "../util/selection";
 import {afterRenderEvent} from "../wysiwyg/afterRenderEvent";
 import {processCodeRender} from "../wysiwyg/processCodeRender";
+import {processCodeRender as processIRCodeRender} from "../ir/process";
 
 export class Hint {
     public timeId: number;
@@ -147,6 +148,10 @@ ${i === 0 ? "class='vditor-hint--current'" : ""}> ${html}</button>`;
                     range.selectNodeContents(preBeforeElement);
                     range.collapse(false);
                     processAfterRender(vditor);
+                    preBeforeElement.parentElement.querySelectorAll('code').forEach(item => {
+                        item.className = 'language-' + value.trimRight();
+                    })
+                    processIRCodeRender(preBeforeElement.parentElement.querySelector('.vditor-ir__preview'), vditor)
                     return;
                 }
             }
@@ -201,7 +206,7 @@ ${i === 0 ? "class='vditor-hint--current'" : ""}> ${html}</button>`;
 
         const currentHintElement: HTMLElement = this.element.querySelector(".vditor-hint--current");
 
-        if (event.key === "ArrowDown") {
+        if (event.key === "ArrowDown" || event.key === "ArrowRight") {
             event.preventDefault();
             event.stopPropagation();
             currentHintElement.removeAttribute("class");
@@ -211,7 +216,7 @@ ${i === 0 ? "class='vditor-hint--current'" : ""}> ${html}</button>`;
                 currentHintElement.nextElementSibling.className = "vditor-hint--current";
             }
             return true;
-        } else if (event.key === "ArrowUp") {
+        } else if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
             event.preventDefault();
             event.stopPropagation();
             currentHintElement.removeAttribute("class");

diff --git a/src/ts/ir/index.ts b/src/ts/ir/index.ts
@@ -2,12 +2,12 @@ import {uploadFiles} from "../upload";
 import {setHeaders} from "../upload/setHeaders";
 import {isCtrl} from "../util/compatibility";
 import {focusEvent, hotkeyEvent, selectEvent} from "../util/editorCommenEvent";
-import { hasClosestByMatchTag} from "../util/hasClosest";
+import {hasClosestByMatchTag} from "../util/hasClosest";
 import {processPasteCode} from "../util/processPasteCode";
 import {getSelectPosition, insertHTML, setSelectionByPosition} from "../util/selection";
 import {expandMarker} from "./expandMarker";
 import {input} from "./input";
-import {processAfterRender} from "./process";
+import {processAfterRender, processCodeRender} from "./process";
 
 class IR {
     public element: HTMLPreElement;
@@ -79,6 +79,9 @@ class IR {
                     + textPlain + codeElement.textContent.substring(position.end);
                 setSelectionByPosition(position.start + textPlain.length, position.start + textPlain.length,
                     codeElement.parentElement);
+                const previewElement = codeElement.parentElement.parentElement.querySelector('.vditor-ir__preview') as HTMLElement
+                previewElement.innerHTML = codeElement.outerHTML
+                processCodeRender(previewElement, vditor)
             } else if (code) {
                 document.execCommand("insertHTML", false, code);
             } else {

diff --git a/src/ts/ir/input.ts b/src/ts/ir/input.ts
@@ -1,7 +1,7 @@
 import {getTopList, hasClosestBlock, hasClosestByTag} from "../util/hasClosest";
 import {log} from "../util/log";
 import {getSelectPosition, setRangeByWbr} from "../util/selection";
-import {processAfterRender} from "./process";
+import {processAfterRender, processCodeRender} from "./process";
 
 export const input = (vditor: IVditor, range: Range) => {
     Array.from(vditor.ir.element.querySelectorAll(".vditor-ir__node--expand")).forEach((item) => {
@@ -101,6 +101,11 @@ export const input = (vditor: IVditor, range: Range) => {
     }
 
     setRangeByWbr(vditor.ir.element, range);
+
+    vditor.ir.element.querySelectorAll(".vditor-ir__preview").forEach((item: HTMLElement) => {
+        processCodeRender(item, vditor);
+    });
+
     processAfterRender(vditor, {
         enableAddUndoStack: true,
         enableHint: true,

diff --git a/src/ts/ir/process.ts b/src/ts/ir/process.ts
@@ -3,6 +3,12 @@ import {isSafari} from "../util/compatibility";
 import {getMarkdown} from "../util/getMarkdown";
 import {hasClosestByAttribute} from "../util/hasClosest";
 import {getEditorRange} from "../util/selection";
+import {abcRender} from "../markdown/abcRender";
+import {mermaidRender} from "../markdown/mermaidRender";
+import {chartRender} from "../markdown/chartRender";
+import {graphvizRender} from "../markdown/graphvizRender";
+import {highlightRender} from "../markdown/highlightRender";
+import {codeRender} from "../markdown/codeRender";
 
 export const processAfterRender = (vditor: IVditor, options = {
     enableAddUndoStack: true,
@@ -16,7 +22,7 @@ export const processAfterRender = (vditor: IVditor, options = {
         const matchLangData: IHintData[] = [];
         const key = preBeforeElement.textContent.replace(Constants.ZWSP, "").trim();
         Constants.CODE_LANGUAGES.forEach((keyName) => {
-            if (keyName.indexOf(key.toLowerCase()) === 0) {
+            if (keyName.indexOf(key.toLowerCase()) > -1) {
                 matchLangData.push({
                     html: keyName,
                     value: keyName,
@@ -56,3 +62,22 @@ export const processAfterRender = (vditor: IVditor, options = {
         }
     }, 800);
 };
+
+export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) => {
+    const language = previewPanel.querySelector('code').className.replace('language-', '');
+    if (language === "abc") {
+        previewPanel.style.marginTop = "1em";
+        abcRender(previewPanel, vditor.options.cdn);
+    } else if (language === "mermaid") {
+        mermaidRender(previewPanel, ".vditor-ir__preview .language-mermaid",
+            vditor.options.cdn);
+    } else if (language === "echarts") {
+        chartRender(previewPanel, vditor.options.cdn);
+    } else if (language === "graphviz") {
+        graphvizRender(previewPanel, vditor.options.cdn);
+    } else {
+        highlightRender(Object.assign({}, vditor.options.preview.hljs, {enable: true}),
+            previewPanel, vditor.options.cdn);
+        codeRender(previewPanel, vditor.options.lang);
+    }
+}
diff --git a/src/ts/ir/processKeydown.ts b/src/ts/ir/processKeydown.ts
@@ -17,8 +17,8 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
     }
 
     // 仅处理以下快捷键操作
-    if (event.key !== "Enter" && event.key !== "Tab" && event.key !== "Backspace" &&
-        !isCtrl(event) && event.key !== "Escape") {
+    if (event.key !== "Enter" && event.key !== "Tab" && event.key !== "Backspace" && event.key !== "ArrowLeft" &&
+        event.key !== "ArrowUp" && !isCtrl(event) && event.key !== "Escape") {
         return false;
     }
 
@@ -71,10 +71,24 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
         }
 
         // TODO shift + tab, shift and 选中文字
-    }
 
+        if (event.key === "Backspace" && !isCtrl(event) && !event.shiftKey && !event.altKey) {
+            const codePosition = getSelectPosition(codeRenderElement, range);
+            if ((codePosition.start === 0 ||
+                (codePosition.start === 1 && codeRenderElement.innerText === "\n")) // 空代码块，光标在 \n 后
+                && range.toString() === "") {
+                // Backspace: 光标位于第零个字符，仅删除代码块标签
+                preRenderElement.parentElement.outerHTML =
+                    `<p data-block="0"><wbr>${codeRenderElement.innerHTML}</p>`;
+                setRangeByWbr(vditor.wysiwyg.element, range);
+                processAfterRender(vditor);
+                event.preventDefault();
+                return true;
+            }
+        }
+    }
     const preBeforeElement = hasClosestByAttribute(startContainer, "data-type", "code-block-info");
-    if (preBeforeElement) {
+    if (preBeforeElement && range.toString() === "") {
         if (event.key === "Backspace" && preBeforeElement.textContent.replace(Constants.ZWSP, "").trim() === "") {
             event.preventDefault();
             return true;
@@ -85,6 +99,25 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
             event.preventDefault();
             return true;
         }
+
+        if (!preBeforeElement.parentElement.previousElementSibling && (event.key === "ArrowUp" || event.key === "ArrowLeft")
+            && getSelectPosition(preBeforeElement, range).start < 2) {
+            preBeforeElement.parentElement.insertAdjacentHTML("beforebegin",
+                `<p data-block="0">${Constants.ZWSP}<wbr></p>`)
+            setRangeByWbr(vditor.ir.element, range);
+            event.preventDefault();
+            return true;
+        }
+    }
+    const preAfterElement = hasClosestByAttribute(startContainer, "data-type", "code-block-close-marker-zwsp");
+    if (preAfterElement) {
+        if (event.key === "Enter") {
+            preAfterElement.parentElement.insertAdjacentHTML("afterend",
+                `<p data-block="0">${Constants.ZWSP}<wbr></p>`)
+            setRangeByWbr(vditor.ir.element, range);
+            event.preventDefault();
+            return true;
+        }
     }
 
     const liElement = hasClosestByMatchTag(startContainer, "LI");

diff --git a/src/ts/toolbar/EditMode.ts b/src/ts/toolbar/EditMode.ts
@@ -1,7 +1,7 @@
 import editSVG from "../../assets/icons/edit.svg";
 import {Constants} from "../constants";
 import {i18n} from "../i18n";
-import {processAfterRender} from "../ir/process";
+import {processAfterRender, processCodeRender} from "../ir/process";
 import {formatRender} from "../sv/formatRender";
 import {setPadding} from "../ui/initUI";
 import {getEventName, updateHotkeyTip} from "../util/compatibility";
@@ -48,6 +48,10 @@ export const setEditMode = (vditor: IVditor, type: string, event?: Event) => {
            vditor.ir.element.focus();
         }
         setPadding(vditor);
+
+        vditor.ir.element.querySelectorAll(".vditor-ir__preview").forEach((item: HTMLElement) => {
+            processCodeRender(item, vditor);
+        });
     } else if (type === "wysiwyg") {
         hideToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
         enableToolbar(vditor.toolbar.elements, allToolbar);

diff --git a/src/ts/util/processPasteCode.ts b/src/ts/util/processPasteCode.ts
@@ -1,4 +1,3 @@
-
 export const processPasteCode = (html: string, text: string, type = "sv") => {
     const tempElement = document.createElement("div");
     tempElement.innerHTML = html;
@@ -27,6 +26,9 @@ export const processPasteCode = (html: string, text: string, type = "sv") => {
                 return `<div class="vditor-wysiwyg__block" data-block="0" data-type="code-block"><pre><code>${
                     code.replace(/&/g, "&amp;").replace(/</g, "&lt;")}<wbr></code></pre></div>`;
             }
+            if (type === 'ir') {
+                return "```\n" + code.replace(/&/g, "&amp;").replace(/</g, "&lt;") + "\n```"
+            }
             return "```\n" + code + "\n```";
         } else {
             if (type === "wysiwyg") {

diff --git a/src/ts/wysiwyg/highlightToolbar.ts b/src/ts/wysiwyg/highlightToolbar.ts
@@ -645,7 +645,7 @@ export const highlightToolbar = (vditor: IVditor) => {
                         const matchLangData: IHintData[] = [];
                         const key = language.value;
                         Constants.CODE_LANGUAGES.forEach((keyName) => {
-                            if (keyName.indexOf(key.toLowerCase()) === 0) {
+                            if (keyName.indexOf(key.toLowerCase()) > -1) {
                                 matchLangData.push({
                                     html: keyName,
                                     value: keyName,