Merge pull request #14 from doocs/hot-fix-highlight

fix: highlight refresh

public/assets/scripts/renderers/wx-renderer.js

@@ -1,190 +0,0 @@
-let WxRenderer = function (opts) {
-  this.opts = opts;
-  let ENV_STRETCH_IMAGE = true;
-
-  let footnotes = [];
-  let footnoteIndex = 0;
-  let styleMapping = null;
-
-  const CODE_FONT_FAMILY = "Menlo, Operator Mono, Consolas, Monaco, monospace";
-
-  let merge = (base, extend) => Object.assign({}, base, extend);
-
-  this.buildTheme = themeTpl => {
-    let mapping = {};
-    let base = merge(themeTpl.BASE, {
-      'font-family': this.opts.fonts,
-      'font-size': this.opts.size
-    });
-    let base_block = merge(base, {});
-    for (let ele in themeTpl.inline) {
-      if (themeTpl.inline.hasOwnProperty(ele)) {
-        let style = themeTpl.inline[ele];
-        if (ele === 'codespan') {
-          style['font-family'] = CODE_FONT_FAMILY;
-          style['white-space'] = 'normal';
-        }
-        mapping[ele] = merge(base, style);
-      }
-    }
-
-    for (let ele in themeTpl.block) {
-      if (themeTpl.block.hasOwnProperty(ele)) {
-        let style = themeTpl.block[ele];
-        if (ele === 'code') {
-          style['font-family'] = CODE_FONT_FAMILY;
-        }
-        mapping[ele] = merge(base_block, style);
-      }
-    }
-    return mapping;
-  };
-
-  let getStyles = (tokenName, addition) => {
-    let arr = [];
-    let dict = styleMapping[tokenName];
-    if (!dict) return '';
-    for (const key in dict) {
-      arr.push(key + ':' + dict[key]);
-    }
-    return `style="${arr.join(';') + (addition || '')}"`;
-  };
-
-  let addFootnote = (title, link) => {
-    footnotes.push([++footnoteIndex, title, link]);
-    return footnoteIndex;
-  };
-
-  this.buildFootnotes = () => {
-    let footnoteArray = footnotes.map(x => {
-      if (x[1] === x[2]) {
-        return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code>: <i>${x[1]}</i><br/>`;
-      }
-      return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code> ${x[1]}: <i>${x[2]}</i><br/>`;
-    });
-    return `<h4 ${getStyles('h4')}>引用链接</h4><p ${getStyles('footnotes')}>${footnoteArray.join('\n')}</p>`;
-  };
-
-  this.buildAddition = () => {
-    return `
-    <style>
-      .preview-wrapper pre::before {
-        font-family: "SourceSansPro", "HelveticaNeue", Arial, sans-serif;
-        position: absolute;
-        top: 0;
-        right: 0;
-        color: #ccc;
-        text-align: center;
-        font-size: 0.8em;
-        padding: 5px 10px 0;
-        line-height: 15px;
-        height: 15px;
-        font-weight: 600;
-      }
-    </style>
-    `;
-  }
-
-  this.setOptions = newOpts => {
-    this.opts = merge(this.opts, newOpts);
-  };
-
-  this.hasFootnotes = () => footnotes.length !== 0;
-
-  this.getRenderer = (status) => {
-    footnotes = [];
-    footnoteIndex = 0;
-
-    styleMapping = this.buildTheme(this.opts.theme);
-    let renderer = new marked.Renderer();
-
-    renderer.heading = (text, level) => {
-      switch (level) {
-        case 1:
-          return `<h1 ${getStyles('h1')}>${text}</h1>`;
-        case 2:
-          return `<h2 ${getStyles('h2')}>${text}</h2>`;
-        case 3:
-          return `<h3 ${getStyles('h3')}>${text}</h3>`;
-        default:
-          return `<h4 ${getStyles('h4')}>${text}</h4>`;
-      }
-    };
-    renderer.paragraph = text => `<p ${getStyles('p')}>${text}</p>`;
-
-    renderer.blockquote = text => {
-      text = text.replace(/<p.*?>/, `<p ${getStyles('blockquote_p')}>`);
-      return `<blockquote ${getStyles('blockquote')}>${text}</blockquote>`;
-    };
-    renderer.code = (text, infoString) => {
-      text = text.replace(/</g, "&lt;");
-      text = text.replace(/>/g, "&gt;");
-
-      let lines = text.split('\n');
-      let codeLines = [];
-      let numbers = [];
-
-      for (let i = 0; i < lines.length; i++) {
-        const line = lines[i];
-        codeLines.push(`<code class="prettyprint"><span class="code-snippet_outer">${(line || '<br>')}</span></code>`);
-        numbers.push('<li></li>');
-      }
-      let lang = infoString || '';
-
-      return `
-        <section class="code-snippet__fix code-snippet__js">
-            <ul class="code-snippet__line-index code-snippet__js">${numbers.join('')}</ul>
-            <pre class="code-snippet__js" data-lang="${lang}">
-                ${codeLines.join('')}
-            </pre>
-        </section>
-        `;
-    };
-    renderer.codespan = (text, infoString) => `<code ${getStyles('codespan')}>${text}</code>`;
-    renderer.listitem = text => `<span ${getStyles('listitem')}><span style="margin-right: 10px;"><%s/></span>${text}</span>`;
-
-    renderer.list = (text, ordered, start) => {
-      text = text.replace(/<\/*p.*?>/g, '');
-      let segments = text.split(`<%s/>`);
-      if (!ordered) {
-        text = segments.join('•');
-        return `<p ${getStyles('ul')}>${text}</p>`;
-      }
-      text = segments[0];
-      for (let i = 1; i < segments.length; i++) {
-        text = text + i + '.' + segments[i];
-      }
-      return `<p ${getStyles('ol')}>${text}</p>`;
-    };
-    renderer.image = (href, title, text) => {
-      let subText = '';
-      if (text) {
-        subText = `<figcaption ${getStyles('figcaption')}>${text}</figcaption>`;
-      }
-      let figureStyles = getStyles('figure');
-      let imgStyles = getStyles(ENV_STRETCH_IMAGE ? 'image' : 'image_org');
-      return `<figure ${figureStyles}><img ${imgStyles} src="${href}" title="${title}" alt="${text}"/>${subText}</figure>`;
-    };
-    renderer.link = (href, title, text) => {
-      if (href.indexOf('https://mp.weixin.qq.com') === 0) {
-        return `<a href="${href}" title="${(title || text)}" ${getStyles('wx_link')}>${text}</a>`;
-      } else if (href === text) {
-        return text;
-      } else {
-        if (status) {
-          let ref = addFootnote(title || text, href);
-          return `<span ${getStyles('link')}>${text}<sup>[${ref}]</sup></span>`;
-        } else {
-          return text;
-        }
-      }
-    };
-    renderer.strong = text => `<strong ${getStyles('strong')}>${text}</strong>`;
-    renderer.em = text => `<p ${getStyles('p', ';font-style: italic;')}>${text}</p>`;
-    renderer.table = (header, body) => `<section style="padding:0 8px;"><table class="preview-table"><thead ${getStyles('thead')}>${header}</thead><tbody>${body}</tbody></table></section>`;
-    // renderer.tablerow = (text) => `<tr style="">${text}</tr>`;
-    renderer.tablecell = (text, flags) => `<td ${getStyles('td')}>${text}</td>`;
-    renderer.hr = () => `<hr style="border-style: solid;border-width: 1px 0 0;border-color: rgba(0,0,0,0.1);-webkit-transform-origin: 0 0;-webkit-transform: scale(1, 0.5);transform-origin: 0 0;transform: scale(1, 0.5);">`;
-    return renderer;
-  }
-};

src/components/CodemirrorEditor.vue

@@ -3,6 +3,7 @@
         <el-container>
             <el-header class="top editor__header">
                 <editor-header
+                    @refresh="onEditorRefresh"
                     @uploaded="uploaded"
                     @cssChanged="cssChanged"
                     @showBox="showBox = !showBox"
@@ -100,7 +101,7 @@ export default {
         this.$nextTick(() => {
             this.initEditor()
             this.initCssEditor()
-            this.editorRefresh()
+            this.onEditorRefresh()
         })
     },
     methods: {
@@ -109,8 +110,7 @@ export default {
             this.editor.on('change', (cm, e) => {
                 if (this.changeTimer) clearTimeout(this.changeTimer);
                 this.changeTimer = setTimeout(() => {
-                    setTimeout(()=> PR.prettyPrint(), 0);
+                    this.onEditorRefresh()
-                    this.editorRefresh()
                     console.log('tick');
                     saveEditorContent(this.editor, '__editor_content')
                 }, 300);
@@ -168,7 +168,7 @@ export default {
             this.setWxRendererOptions({
                 theme: theme
             });
-            this.editorRefresh()
+            this.onEditorRefresh()
         },
         onTextareaChange() {
             console.log('change');
@@ -188,7 +188,7 @@ export default {
                         message: '图片插入成功',
                         type: 'success'
                     })
-                    this.editorRefresh()
+                    this.onEditorRefresh()
                 } else {
                     // 上传失败
                     this.$message({
@@ -227,6 +227,10 @@ export default {
                 }, 100)
             })
         },
+        onEditorRefresh() {
+            this.editorRefresh();
+            setTimeout(()=> PR.prettyPrint(), 0);
+        },
         ...mapMutations(['initEditorState', 'initEditorEntity', 'setWxRendererOptions',
             'editorRefresh', 'initCssEditorEntity'])
     },

src/components/codeMirror/header.vue

@@ -105,7 +105,7 @@ export default {
                 fonts: fonts
             })
             this.setCurrentFont(fonts);
-            this.editorRefresh()
+            this.$emit('refresh')
         },
         sizeChanged(size) {
             let theme = setFontSize(size.replace('px', ''))
@@ -115,7 +115,7 @@ export default {
                 theme: theme
             })
             this.setCurrentSize(size);
-            this.editorRefresh()
+            this.$emit('refresh')
         },
         colorChanged(color) {
             let theme = setFontSize(this.currentSize.replace('px', ''))
@@ -124,11 +124,11 @@ export default {
                 theme: theme
             })
             this.setCurrentColor(color);
-            this.editorRefresh()
+            this.$emit('refresh')
         },
         statusChanged(val) {
             this.setCiteStatus(val)
-            this.editorRefresh()
+            this.$emit('refresh')
         },
         // 图片上传前的处理
         beforeUpload(file) {
@@ -175,6 +175,7 @@ export default {
                 type: 'success'
             })
             clipboardDiv.innerHTML = this.output; // 恢复现场
+            this.$emit('refresh')
         },
         // 自定义CSS样式
         async customStyle () {
@@ -227,7 +228,7 @@ export default {
             downLink.click()
             document.body.removeChild(downLink)
         },
-        ...mapMutations(['editorRefresh', 'clearEditorToDefault','setCurrentColor', 'setCiteStatus',
+        ...mapMutations(['clearEditorToDefault','setCurrentColor', 'setCiteStatus',
             'setHtml', 'setCurrentFont', 'setCurrentSize', 'setCssEditorValue', 'setWxRendererOptions'])
     },
     mounted() {