From 99331191d19770c5731e336bbc290f752b0b2ef5 Mon Sep 17 00:00:00 2001
From: 50 <jiawulin@vip.qq.com>
Date: Sat, 4 Dec 2021 16:00:26 +0800
Subject: [PATCH] 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 <7699524+ygj6@users.noreply.github.com>

Co-authored-by: ygj6 <7699524+ygj6@users.noreply.github.com>
---
 src/lib/core/rules.js      | 21 ++++++++++++++++++---
 src/lib/mixins/markdown.js |  6 +++++-
 src/mavon-editor.vue       |  4 ++--
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/lib/core/rules.js b/src/lib/core/rules.js
index 064756e16..504a9d4b3 100644
--- 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
index 51749641f..43f0a19e4 100644
--- 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
index 033fa9a74..5e2c8d876 100644
--- 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);
                 }