From e179bf017a2407811f990f47835fc43f491d5af9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Mon, 17 May 2021 20:56:05 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96code=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E9=BB=91=E6=9A=97=E6=A8=A1=E5=BC=8F;=E4=BC=98=E5=8C=96markd?= =?UTF-8?q?=E6=8D=A2=E8=A1=8C;=E6=9B=B4=E6=96=B0meditor=E9=80=82=E9=85=8D?= =?UTF-8?q?=E6=96=B0=E7=89=88markd?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/code/colorful.js | 9 ++++-- src/code/index.wc | 8 +++--- src/markd/core.js | 68 ++++++++++++++++++++++++-------------------- src/meditor/index.wc | 10 ++++--- 4 files changed, 54 insertions(+), 41 deletions(-) diff --git a/src/code/colorful.js b/src/code/colorful.js index a11e646..f60bb95 100644 --- a/src/code/colorful.js +++ b/src/code/colorful.js @@ -19,8 +19,9 @@ const FN = /([\.\s])([a-zA-Z$][\da-zA-Z_]*)(\(.*?\))/g const CM = /(?=\s)([ ]*\/\/.*)|(^\/\/.*)/g const INLINE = { code: /`([^`]*?[^`\\\s])`/g, + codeBlock: /^```(.*?)$/gm, strong: [/__([\s\S]*?[^\s\\])__(?!_)/g, /\*\*([\s\S]*?[^\s\\])\*\*(?!\*)/g], - em: [/_([\s\S]*?[^\s\\])_(?!_)/g, /\*([\s\S]*?[^\s\\*])\*(?!\*)/g], + em: [/_([\s\S]*?[^\s\\_])_(?!_)/g, /\*([\s\S]*?[^\s\\*])\*(?!\*)/g], del: /~~([\s\S]*?[^\s\\~])~~/g, qlinkVar: /^\[(\d+)\]: ([\S]+)\s*?((['"])[\s\S]*?\4)?\s*?$/gm, // 引用声明 qlink: /\[([^\]]*?)\]\[(\d*?)\]/g, // 引用链接 @@ -29,7 +30,8 @@ const INLINE = { head: /^(#{1,6} )(.*)$/gm, quote: /^(>{1,} )(.*)$/gm, task: /^([\-\+\*]) \[( |x)\] (.*)$/gm, - list: /^([ \t]*?([\-\+\*]|\d+\.) )(.*)$/gm + list: /^([ \t]*?([\-\+\*]|\d+\.) )(.*)$/gm, + br: /^([\-\*_=]{3})(.*?)$/gm } function parseJs(code) { @@ -62,12 +64,15 @@ function rebuild(code) { export function colorMd(code) { code = code .replace(INLINE.head, '[cm]$1[/cm][tag]$2[/tag]') + .replace(INLINE.br, '[cm]$1[/cm][tag]$2[/tag]') .replace(INLINE.quote, '[cm]$1[/cm]$2') .replace( INLINE.task, '[cm]$1 [[/cm][attr]$2[/attr][cm]][/cm] $3' ) .replace(INLINE.list, '[cm]$1[/cm]$3') + .replace(INLINE.code, '[cm]`[/cm][tag]$1[/tag][cm]`[/cm]') + .replace(INLINE.codeBlock, '[cm]```[/cm][tag]$1[/tag]') .replace(INLINE.strong[0], '[cm]__[/cm]$1[cm]__[/cm]') .replace(INLINE.strong[1], '[cm]**[/cm]$1[cm]**[/cm]') .replace(INLINE.em[0], '[cm]_[/cm]$1[cm]_[/cm]') diff --git a/src/code/index.wc b/src/code/index.wc index e710298..8cc8bab 100644 --- a/src/code/index.wc +++ b/src/code/index.wc @@ -8,7 +8,7 @@ - + @@ -77,7 +77,7 @@ } } - .scoll { + .scroll { flex: 1; padding: 5px 0 0; line-height: 20px; @@ -163,10 +163,10 @@ background: var(--color-dark-1); color: var(--color-plain-3); - .code { + .scroll { color: var(--color-plain-2); - p::before { + code::before { color: var(--color-grey-3); } } diff --git a/src/markd/core.js b/src/markd/core.js index 36c88e5..a67feb8 100644 --- a/src/markd/core.js +++ b/src/markd/core.js @@ -177,7 +177,7 @@ function fixed(str) { }) .replace(BLOCK_RE, (m, tag, attr, txt) => { return `<${tag + attr.replace(/(⨨☇)+/g, ' ')}>${txt - .replace(/⨨⤶/g, ' ') + .replace(/⨨⤶/g, '\n') .replace(/(⨨☇)+/g, ' ')}` }) } @@ -212,17 +212,6 @@ class Tool { list.push(tmp.replace(/^```([\w\#\-]*?)$/, '')) } isCodeBlock = !isCodeBlock - } else if (Helper.isTable(tmp) && !isTable) { - var thead = tmp.split('|') - // 去头去尾 - thead.shift() - thead.pop() - list.push( - `${thead - .map(_ => ``) - .join('')}` - ) - isTable = true } else { var qlink if (isCodeBlock) { @@ -231,22 +220,38 @@ class Tool { .replace(/>/g, '>') .replace('\\`\\`\\`', '```') } else { - it = it - // 非代码块进行xss过滤 - .replace(INLINE.code, (m, txt) => { - return `\`${txt.replace(//g, '>')}\`` - }) - .replace(/<(\/?)script[^>]*?>/g, '<$1script>') - .replace(TAG_RE, (m, name, attr = '') => { - // 过滤所有onXX=""事件属性 - attr = attr.replace(ATTR_RE, ' ').trim() - if (attr) { - attr = ' ' + attr - } - return `<${name}${attr}>` - }) - // 不在代码块中, 才判断引用声明 - qlink = Helper.isQLink(it) + if (Helper.isTable(tmp) && !isTable) { + var thead = tmp.split('|') + // 去头去尾 + thead.shift() + thead.pop() + list.push( + `
${_}
${thead + .map(_ => ``) + .join('')}` + ) + isTable = true + continue + } else { + it = it + // 非代码块进行xss过滤 + .replace(INLINE.code, (m, txt) => { + return `\`${txt + .replace(//g, '>')}\`` + }) + .replace(/<(\/?)script[^>]*?>/g, '<$1script>') + .replace(TAG_RE, (m, name, attr = '') => { + // 过滤所有onXX=""事件属性 + attr = attr.replace(ATTR_RE, ' ').trim() + if (attr) { + attr = ' ' + attr + } + return `<${name}${attr}>` + }) + // 不在代码块中, 才判断引用声明 + qlink = Helper.isQLink(it) + } } if (qlink) { @@ -300,7 +305,7 @@ class Tool { } if (isTable) { - var tmp = it.split('|').map(_ => _.trim()) + let tmp = it.split('|').map(_ => _.trim()) tmp.shift() tmp.pop() @@ -327,8 +332,9 @@ class Tool { continue } - // wc-code标签直接拼接 - if (~it.indexOf('wc-code')) { + // wc-code标签直接拼接, 判断时多拼一个 < 和 >, + // 是为了避免在 wc-markd嵌入代码块示例时, 将其内容编译为html + if (~it.indexOf('')) { html += it isCodeBlock = !isCodeBlock continue diff --git a/src/meditor/index.wc b/src/meditor/index.wc index eecad33..d1aaf66 100644 --- a/src/meditor/index.wc +++ b/src/meditor/index.wc @@ -423,8 +423,10 @@ export default class Meditor { } if (isToolbarShow) { this.__TOOLBAR__.classList.toggle('active', isToolbarShow) - this.__TOOLBAR__.lastElementChild.classList.toggle('active', preview) - this.__VIEW__.classList.toggle('active', preview) + if (toolbar === null || toolbar.includes('preview')) { + this.__TOOLBAR__.lastElementChild.classList.toggle('active', preview) + this.__VIEW__.classList.toggle('active', preview) + } } } @@ -763,7 +765,7 @@ export default class Meditor { set value(val) { this.__EDITOR__.value = val if (this.state.preview) { - this.__VIEW__.value = val + this.__VIEW__.md = val } } @@ -821,7 +823,7 @@ export default class Meditor { if (this.state.preview) { var txt = this.__EDITOR__.value.trim() if (txt) { - this.__VIEW__.value = txt + this.__VIEW__.md = txt } else { this.__VIEW__.clear() }
${_}