fix: image cannot be previewed (hinesboy#738)

* fix: image cannot be previewed,issue hinesboy#737 * fix test * Update src/lib/core/rules.js Co-authored-by: ygj6 <[email protected]> Co-authored-by: ygj6 <[email protected]> (cherry picked from commit 9933119) # Conflicts: # src/mavon-editor.vue
langren1353 · Aug 1, 2022 · b462fe9 · b462fe9
1 parent b0bb40f
commit b462fe9
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
@@ -217,7 +217,7 @@ import md_toolbar_right from './components/md-toolbar-right'
 import autoTextarea from './components/auto-textarea'
 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 {
@@ -890,7 +890,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)
         }