:art: fix #250

CHANGELOG.md

@@ -49,8 +49,9 @@
 
 * [open issues](https://github.com/Vanessa219/vditor/issues)
 
-### v3.0.7 / 2020-03-xx
+### v3.0.7 / 2020-04-01
 
+* [250](https://github.com/Vanessa219/vditor/issues/250) 支持配置是否开启 wysiwyg 模式下代码块渲染 `引入特性`
 * [258](https://github.com/Vanessa219/vditor/issues/258) wysiwyg a 元素子导航居右被挤变形 `修复缺陷`
 * [212](https://github.com/Vanessa219/vditor/issues/212) Sync XMLHttpRequest Deprecation message `改进功能`
 * [251](https://github.com/Vanessa219/vditor/issues/251) 所见即所得模式下，光标后图片工具层会遮挡文字 `改进功能`
@@ -87,6 +88,7 @@
   * id 可以传入 element
   * cache 修改为 {enable: boolean, id: string}
   * md2html 改为异步
+  * 添加 `options.preview.markdown.codeBlockPreview`
 
 ### v2.3.0 / 2020-03-12
 

demo/index.js

@@ -4,7 +4,7 @@ import '../src/assets/scss/index.scss'
 window.vditor = new Vditor('vditor', {
   debugger: true,
   typewriterMode: true,
-  // mode: 'ir',
+  // mode: 'sv',
   placeholder: 'placeholder',
   preview: {
     markdown: {

package.json

@@ -56,7 +56,7 @@
     "url": "https://github.com/Vanessa219/vditor/issues"
   },
   "scripts": {
-    "lint": "tslint --fix -c tslint.json 'src/**/*.ts'",
+    "lint": "tslint --fix -c tslint.json '{src,types}/**/*.ts'",
     "test:watch": "jest --watch",
     "test": "jest --coverage",
     "start": "webpack-dev-server --config webpack.start.js",

src/index.ts

@@ -105,10 +105,11 @@ class Vditor extends VditorMethod {
         // `http://192.168.2.248:9090/lute.min.js?${new Date().getTime()}`
         // "'src/js/lute/lute.min.js"'
         // `${mergedOptions.cdn}/dist/js/lute/lute.min.js`
-        addScript("/src/js/lute/lute.min.js", "vditorLuteScript").then(() => {
+        addScript(`http://192.168.2.248:9090/lute.min.js?${new Date().getTime()}`, "vditorLuteScript").then(() => {
             this.vditor.lute = setLute({
                 autoSpace: this.vditor.options.preview.markdown.autoSpace,
                 chinesePunct: this.vditor.options.preview.markdown.chinesePunct,
+                codeBlockPreview: this.vditor.options.preview.markdown.codeBlockPreview,
                 emojiSite: this.vditor.options.hint.emojiPath,
                 emojis: this.vditor.options.hint.emoji,
                 fixTermTypo: this.vditor.options.preview.markdown.fixTermTypo,

src/ts/hint/index.ts

@@ -175,13 +175,13 @@ ${i === 0 ? "class='vditor-hint--current'" : ""}> ${html}</button>`;
 
             if (vditor.currentMode === "wysiwyg") {
                  const preElement = hasClosestByClassName(range.startContainer, "vditor-wysiwyg__block");
-                 if (preElement) {
+                 if (preElement && preElement.lastElementChild.classList.contains("vditor-wysiwyg__preview")) {
                      preElement.lastElementChild.innerHTML = preElement.firstElementChild.innerHTML;
                      processCodeRender(preElement.lastElementChild as HTMLElement, vditor);
                  }
             } else {
                 const preElement = hasClosestByClassName(range.startContainer, "vditor-ir__marker--pre");
-                if (preElement) {
+                if (preElement && preElement.nextElementSibling.classList.contains("vditor-ir__preview")) {
                     preElement.nextElementSibling.innerHTML = preElement.innerHTML;
                     processCodeRender(preElement.nextElementSibling as HTMLElement, vditor);
                 }

src/ts/ir/index.ts

@@ -90,8 +90,10 @@ class IR {
                     + textPlain + codeElement.textContent.substring(position.end);
                 setSelectionByPosition(position.start + textPlain.length, position.start + textPlain.length,
                     codeElement.parentElement);
-                codeElement.parentElement.nextElementSibling.innerHTML = codeElement.outerHTML;
-                processCodeRender(codeElement.parentElement.nextElementSibling as HTMLElement, vditor);
+                if (codeElement.parentElement.nextElementSibling.classList.contains("vditor-ir__preview")) {
+                    codeElement.parentElement.nextElementSibling.innerHTML = codeElement.outerHTML;
+                    processCodeRender(codeElement.parentElement.nextElementSibling as HTMLElement, vditor);
+                }
             } else if (code) {
                 document.execCommand("insertHTML", false, code);
             } else {

src/ts/markdown/previewRender.ts

@@ -28,6 +28,7 @@ const mergeOptions = (options?: IPreviewOptions) => {
         markdown: {
             autoSpace: false,
             chinesePunct: false,
+            codeBlockPreview: true,
             fixTermTypo: false,
             footnotes: true,
             toc: false,
@@ -63,6 +64,7 @@ export const md2html = (mdText: string, options?: IPreviewOptions) => {
         const lute = setLute({
             autoSpace: mergedOptions.markdown.autoSpace,
             chinesePunct: mergedOptions.markdown.chinesePunct,
+            codeBlockPreview: mergedOptions.markdown.codeBlockPreview,
             emojiSite: mergedOptions.emojiPath,
             emojis: mergedOptions.customEmoji,
             fixTermTypo: mergedOptions.markdown.fixTermTypo,

src/ts/markdown/setLute.ts

@@ -9,5 +9,6 @@ export const setLute = (options: ILuteOptions) => {
     lute.SetFootnotes(options.footnotes);
     lute.SetChinesePunct(options.chinesePunct);
     lute.SetFixTermTypo(options.fixTermTypo);
+    lute.SetVditorCodeBlockPreview(options.codeBlockPreview);
     return lute;
 };

src/ts/util/Options.ts

@@ -46,6 +46,7 @@ export class Options {
             markdown: {
                 autoSpace: false,
                 chinesePunct: false,
+                codeBlockPreview: true,
                 fixTermTypo: false,
                 footnotes: true,
                 toc: false,

src/ts/util/processCode.ts

@@ -49,6 +49,9 @@ export const processPasteCode = (html: string, text: string, type = "sv") => {
 };
 
 export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) => {
+    if (!previewPanel) {
+        return;
+    }
     const codeElement = previewPanel.querySelector("code");
     if (!codeElement) {
         return;

src/ts/wysiwyg/highlightToolbar.ts

@@ -486,8 +486,10 @@ export const highlightToolbar = (vditor: IVditor) => {
                     codeElement.className.split("-")[1].split(" ")[0] : vditor.hint.recentLanguage;
                 language.oninput = () => {
                     updateLanguage();
-                    blockRenderElement.lastElementChild.innerHTML = blockRenderElement.firstElementChild.innerHTML;
-                    processCodeRender(blockRenderElement.lastElementChild as HTMLElement, vditor);
+                    if (blockRenderElement.lastElementChild.classList.contains("vditor-wysiwyg__preview")) {
+                        blockRenderElement.lastElementChild.innerHTML = blockRenderElement.firstElementChild.innerHTML;
+                        processCodeRender(blockRenderElement.lastElementChild as HTMLElement, vditor);
+                    }
                     afterRenderEvent(vditor);
                 };
                 language.onkeydown = (event: KeyboardEvent) => {

src/ts/wysiwyg/index.ts

@@ -146,8 +146,10 @@ class WYSIWYG {
                     + textPlain + codeElement.textContent.substring(position.end);
                 setSelectionByPosition(position.start + textPlain.length, position.start + textPlain.length,
                     codeElement.parentElement);
-                codeElement.parentElement.nextElementSibling.innerHTML = codeElement.outerHTML;
-                processCodeRender(codeElement.parentElement.nextElementSibling as HTMLElement, vditor);
+                if (codeElement.parentElement.nextElementSibling.classList.contains("vditor-wysiwyg__preview")) {
+                    codeElement.parentElement.nextElementSibling.innerHTML = codeElement.outerHTML;
+                    processCodeRender(codeElement.parentElement.nextElementSibling as HTMLElement, vditor);
+                }
             } else if (code) {
                 const node = document.createElement("template");
                 node.innerHTML = code;

types/index.d.ts

@@ -12,22 +12,16 @@ interface ILuteRender {
                 Type: number,
             },
         }
-    }, entering: boolean) => [string, number];
+    },               entering: boolean) => [string, number];
 }
 
-interface ILuteOptions {
+interface ILuteOptions extends IMarkdownConfig {
     emojis: { [key: string]: string };
-    emojiSite: string
-    headingAnchor: boolean
-    inlineMathDigit: boolean
-    autoSpace: boolean
-    toc: boolean
-    footnotes: boolean
-    chinesePunct: boolean
-    fixTermTypo: boolean
+    emojiSite: string;
+    headingAnchor: boolean;
+    inlineMathDigit: boolean;
 }
 
-
 interface ILute {
     WalkStop: number;
 
@@ -57,6 +51,8 @@ interface ILute {
 
     SetEmojiSite(emojiSite: string): void;
 
+    SetVditorCodeBlockPreview(enable: boolean): void;
+
     PutEmojis(emojis: { [key: string]: string }): void;
 
     GetEmojis(): { [key: string]: string };
@@ -222,6 +218,8 @@ interface IMarkdownConfig {
     toc?: boolean;
     /** 脚注。默认值: true */
     footnotes?: boolean;
+    /** wysiwyg & ir 模式代码块是否渲染。默认值: true */
+    codeBlockPreview: boolean;
 }
 
 /** @link https://hacpai.com/article/1549638745630#options-preview */
@@ -403,7 +401,7 @@ interface IVditor {
         fillEmoji(element: HTMLElement, vditor: IVditor): void
         render(vditor: IVditor): void,
         genHTML(data: IHintData[], key: string, vditor: IVditor): void
-        select(event: KeyboardEvent, vditor: IVditor): boolean
+        select(event: KeyboardEvent, vditor: IVditor): boolean,
     };
     tip: {
         element: HTMLElement