✨ Add halo render to vditor

demo/index.html

@@ -50,6 +50,24 @@
         a {
             color: #4285f4;
         }
+
+        .tips-warn {
+            background-color: peru;
+            color: #ffffff;
+            padding: 10px 20px;
+        }
+
+        .tips-danger {
+            background-color: darkred;
+            color: #ffffff;
+            padding: 10px 20px;
+        }
+
+        .tips-success {
+            background-color: darkgreen;
+            color: #ffffff;
+            padding: 10px 20px;
+        }
     </style>
     <script src="https://unpkg.com/vconsole@3.14.7/dist/vconsole.min.js"></script>
 </head>

demo/index.js

@@ -55,7 +55,7 @@ const initVditor = (language) => {
         // cdn: 'http://localhost:9000',
         toolbar,
         lang: language,
-        mode: 'wysiwyg',
+        mode: 'sv',
         height: window.innerHeight + 100,
         outline: {
             enable: true,

src/ts/constants.ts

@@ -17,7 +17,7 @@ export abstract class Constants {
     "monokailight", "murphy", "native", "paraiso-dark", "paraiso-light", "pastie", "perldoc", "pygments",
     "rainbow_dash", "rrt", "solarized-dark", "solarized-dark256", "solarized-light", "swapoff", "tango", "trac",
     "vim", "vs", "xcode", "ant-design"];
-  public static readonly CODE_LANGUAGES: string[] = ["mermaid", "echarts", "mindmap", "plantuml", "abc", "graphviz", "flowchart", "apache",
+  public static readonly CODE_LANGUAGES: string[] = ["halo", "mermaid", "echarts", "mindmap", "plantuml", "abc", "graphviz", "flowchart", "apache",
     "js", "ts", "html","markmap",
     // common
     "properties", "apache", "bash", "c", "csharp", "cpp", "css", "coffeescript", "diff", "go", "xml", "http",

src/ts/markdown/adapterRender.ts

@@ -35,3 +35,8 @@ export const plantumlRenderAdapter = {
     getCode: (el: Element) => el.textContent,
     getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-plantuml"),
 };
+
+export const haloRenderAdapter = {
+    getCode: (el:Element) => el.textContent,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-halo")
+}

src/ts/markdown/haloRender.ts

@@ -0,0 +1,23 @@
+import {Constants} from "../constants";
+import {haloRenderAdapter} from "./adapterRender";
+
+export const haloRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN) => {
+    haloRenderAdapter.getElements(element).forEach((el: Element) => {
+        const renderText = el.textContent
+        const lines = renderText.split("\n");
+        let doc = document.createElement("div")
+        let html = ""
+        const type = lines[0]
+        if (type.startsWith("tips")) {
+            doc.className = lines[0].replace(":","-")
+            lines.forEach((line: string, index: number) => {
+                if (index === 0) return
+                if (line) html += `<div>${line}</div>`
+            })
+        } else if (type.startsWith("expand")) {
+        }
+        doc.innerHTML = html
+        el.parentElement.insertBefore(doc, el)
+        el.remove()
+    })
+}

src/ts/markdown/highlightRender.ts

@@ -42,7 +42,7 @@ export const highlightRender = (hljsOption?: IHljs, element: HTMLElement | Docum
                         block.classList.contains("language-echarts") || block.classList.contains("language-mindmap") ||
                         block.classList.contains("language-plantuml") ||
                         block.classList.contains("language-abc") || block.classList.contains("language-graphviz") ||
-                        block.classList.contains("language-math")) {
+                        block.classList.contains("language-math") || block.classList.contains("language-halo")) {
                         return;
                     }
 

src/ts/preview/index.ts

@@ -16,6 +16,7 @@ import {hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
 import {hasClosestByTag} from "../util/hasClosestByHeadings";
 import {setSelectionFocus} from "../util/selection";
 import {previewImage} from "./image";
+import {haloRender} from "../markdown/haloRender";
 
 export class Preview {
     public element: HTMLElement;
@@ -232,6 +233,7 @@ export class Preview {
         plantumlRender(vditor.preview.previewElement, vditor.options.cdn);
         abcRender(vditor.preview.previewElement, vditor.options.cdn);
         mediaRender(vditor.preview.previewElement);
+        haloRender(vditor.preview.previewElement, vditor.options.cdn)
         // toc render
         const editorElement = vditor.preview.element;
         let tocHTML = vditor.outline.render(vditor);

src/ts/util/processCode.ts

@@ -9,6 +9,7 @@ import {mermaidRender} from "../markdown/mermaidRender";
 import {markmapRender} from "../markdown/markmapRender";
 import {mindmapRender} from "../markdown/mindmapRender";
 import {plantumlRender} from "../markdown/plantumlRender";
+import {haloRender} from "../markdown/haloRender";
 
 export const processPasteCode = (html: string, text: string, type = "sv") => {
     const tempElement = document.createElement("div");
@@ -81,6 +82,8 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
         graphvizRender(previewPanel, vditor.options.cdn);
     } else if (language === "math") {
         mathRender(previewPanel, {cdn: vditor.options.cdn, math: vditor.options.preview.math});
+    } else if (language === "halo") {
+        haloRender(previewPanel, vditor.options.cdn)
     } else {
         highlightRender(Object.assign({}, vditor.options.preview.hljs), previewPanel, vditor.options.cdn);
         codeRender(previewPanel);