fix: image cannot be previewed (#738)

* fix: image cannot be previewed,issue #737 * fix test * Update src/lib/core/rules.js Co-authored-by: ygj6 <[email protected]> Co-authored-by: ygj6 <[email protected]>
hinesboy · Dec 4, 2021 · 9933119 · 9933119
1 parent ca87152
commit 9933119
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/src/lib/core/rules.js b/src/lib/core/rules.js
@@ -1,8 +1,10 @@
 export const HEADER_FLAG = ' _MD-HEADER_ ';
+export const IMAGE_FLAG = ['_MD-HEADER_', true];
+const IMAGE_FLAG_STR = `${IMAGE_FLAG[0]}="${IMAGE_FLAG[1]}" `;
 
-export function headRule(tocHeadRule) {
+export function headRule(defaultTocHeadRule) {
   return function (tokens, index) {
-    let code = tocHeadRule(tokens, index);
+    let code = defaultTocHeadRule(tokens, index);
     var label = tokens[index + 1];
     if (label.type === 'inline') {
       return code.replace('<a', `<a${HEADER_FLAG}`);
@@ -11,9 +13,22 @@ export function headRule(tocHeadRule) {
   };
 }
 
-export function recoverHead(tag, html) {
+export function imageRule(defaultImageRule) {
+  return function (tokens, idx, options, env, self) {
+    var token = tokens[idx];
+    token.attrs.push(IMAGE_FLAG);
+    return defaultImageRule(tokens, idx, options, env, self);
+  };
+}
+
+export function skipRule(tag, html) {
   if (tag === 'a' && html.indexOf(HEADER_FLAG) !== -1) {
     return html.replace(HEADER_FLAG, '');
   }
+
+  if (tag === 'img' && html.indexOf(IMAGE_FLAG_STR) !== -1) {
+    return html.replace(IMAGE_FLAG_STR, '');
+  }
+
   return html;
 }
diff --git a/src/lib/mixins/markdown.js b/src/lib/mixins/markdown.js
@@ -2,7 +2,7 @@ import hljsLangs from '../core/hljs/lang.hljs.js'
 import {
     loadScript
 } from '../core/extra-function.js'
-import { headRule } from '../core/rules.js'
+import { headRule, imageRule } from '../core/rules.js'
 
 var markdown_config = {
     html: true,        // Enable HTML tags in source
@@ -56,6 +56,10 @@ markdown.renderer.rules.link_open = function (tokens, idx, options, env, self) {
     // pass token to default renderer.
     return defaultRender(tokens, idx, options, env, self);
 };
+
+const defautlImageRule = markdown.renderer.rules.image;
+markdown.renderer.rules.image = imageRule(defautlImageRule);
+
 var mihe = require('markdown-it-highlightjs-external');
 // math katex
 var katex = require('markdown-it-katex-external');

diff --git a/src/mavon-editor.vue b/src/mavon-editor.vue
@@ -119,7 +119,7 @@ import md_toolbar_left from './components/md-toolbar-left.vue'
 import md_toolbar_right from './components/md-toolbar-right.vue'
 import "./lib/font/css/fontello.css"
 import './lib/css/md.css'
-import { recoverHead } from './lib/core/rules.js'
+import { skipRule } from './lib/core/rules.js'
 import { FilterXSS } from 'xss';
 
 export default {
@@ -653,7 +653,7 @@ export default {
                 originalTagFun = this.xssOptions['onTag'];
             }
             this.xssOptions['onTag'] =  function(tag, html, info) {
-                let code = recoverHead(tag, html);
+                let code = skipRule(tag, html);
                 if (originalTagFun) {
                   code = originalTagFun(tag,code);
                 }