From bcfdacce70f8dea8bfc03d7b1c100d71589ef484 Mon Sep 17 00:00:00 2001 From: yutent Date: Thu, 12 Jan 2023 17:03:23 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BB=A3=E7=A0=81=E9=AB=98?= =?UTF-8?q?=E4=BA=AE=E7=9A=84=E5=AD=97=E7=AC=A6=E8=BD=AC=E4=B9=89;?= =?UTF-8?q?=E4=BC=98=E5=8C=96js=E4=BB=A3=E7=A0=81=E9=AB=98=E4=BA=AE?= =?UTF-8?q?=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/code/colorful.js | 46 ++++++++++++++++++++++-------- src/code/index.wc | 14 ++++------ src/editor/index.wc | 4 ++- src/meditor/addon.js | 6 ++++ src/meditor/helper.js | 65 ++++++++++++++++++++----------------------- src/meditor/index.wc | 10 ++++--- 6 files changed, 84 insertions(+), 61 deletions(-) diff --git a/src/code/colorful.js b/src/code/colorful.js index 01b5348..0c815be 100644 --- a/src/code/colorful.js +++ b/src/code/colorful.js @@ -7,18 +7,22 @@ const DOCTYPE_EXP = /<\!DOCTYPE html>/ const TAG_START_EXP = /<([\w\-]+)([\w\W]*?)>/g const TAG_END_EXP = /<\/([\w\-]+)>/g -const TAG_ATTR_EXP = /[@a-zA-Z\-.]+=(["'])[^"]+\1|[@a-zA-Z\-.]+=[a-zA-Z0-9]+|[@a-zA-Z\-.]+/g +const TAG_ATTR_EXP = + /[@a-zA-Z\-.]+=(["'])[^"]+\1|[@a-zA-Z\-.]+=[a-zA-Z0-9]+|[@a-zA-Z\-.]+/g const TAG_CM_EXP = //g const SCRIPT_TAG = /(]*?>)([\w\W]*?)(<\/script>)/g -const KEYWOWRD1 = /\b(var|const|let|function|for|switch|with|if|else|export|import|async|await|break|continue|return|class|try|catch|throw|new|while|this|super|default|case|debugger|delete|do|goto|in|static|get|set|public|private|protected|package|typeof|void)\b/g -const KEYWOWRD2 = /\b\s(=|-|\+|\/|\*|<|>|%)\s\b/g -const KEYWOWRD3 = /(\+\=|-=|\/=|\*=|--|\+\+|==|===)/g +const KEYWOWRD1 = + /\b(var|const|let|function|for|switch|with|if|else|export|import|from|async|await|break|continue|return|class|try|catch|throw|new|while|this|super|default|case|debugger|delete|do|goto|in|static|get|set|public|private|protected|package|typeof|void)\b/g +const KEYWOWRD2 = /\s(=|-|\+|\/|\*|<|>|%)\s/g +const KEYWOWRD3 = /(\+\=|-=|\/=|\*=|--|\+\+|===|==|=>|\.\.\.|\.|&&|\|\|)/g const BUILDIN1 = /\b(null|undefined|true|false|NaN|Infinity)\b/g -const BUILDIN2 = /\b(Object|String|Array|Boolean|Number|Function|class)\b/g -const STR = /(['"`])(.*?)\1/g +const BUILDIN2 = + /\b(Object|String|Array|Boolean|Number|Function|class|Promise|Map|Set|WeakMap|WeakSet|URL)\b/g +const STR = /(['"`])(.*?)(? { + str = str.replace(/&/g, '&').replace(/(\\.)/g, '[fn]$1[/fn]') + + return `${pun}[type]/[/type][cm]${str}[/cm][type]/[/type]${ + flag ? `[num]${flag}[/num]` : '' + }` + }) .replace(FN, '$1[fn]$2[/fn]$3') .replace(KEYWOWRD1, '[key]$1[/key]') - .replace(KEYWOWRD2, '[key] $1 [/key]') + .replace(KEYWOWRD2, ' [key]$1[/key] ') .replace(KEYWOWRD3, '[key]$1[/key]') .replace(BUILDIN1, '[num]$1[/num]') .replace(BUILDIN2, '[type]$1[/type]') .replace(NUM, '[num]$1[/num]') - .replace(STR, (m, q, str) => { - str = str.replace(/\[(\w+)\](.*?)\[\/\1\]/g, '$2') - return `[str]${q}${str}${q}[/str]` + .replace(STR, (m, pun, str) => { + str = str + .replace(/\[(\w+)\](.*?)\[\/\1\]/g, '$2') + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/(\\.)/g, '[fn]$1[/fn]') + + return `[cm]${pun}[/cm][str]${str}[/str][cm]${pun}[/cm]` }) .replace(CM, (m, str) => { - str = str.replace(/\[(\w+)\](.*?)\[\/\1\]/g, '$2') + str = str + .replace(/\[(\w+)\](.*?)\[\/\1\]/g, '$2') + .replace(/&/g, '&') + .replace(//g, '>') return `[cm]${str}[/cm]` }) } @@ -109,7 +131,7 @@ export function colorHtml(code) { }) .replace(TAG_START_EXP, (m, tag, attr) => { if (attr) { - attr = attr.replace(TAG_ATTR_EXP, function(t) { + attr = attr.replace(TAG_ATTR_EXP, function (t) { if (~t.indexOf('=')) { t = t.split('=') let a = t.shift() diff --git a/src/code/index.wc b/src/code/index.wc index 2a164bb..c37953c 100644 --- a/src/code/index.wc +++ b/src/code/index.wc @@ -78,6 +78,7 @@ } .scroll { + overflow: hidden; flex: 1; padding: 5px 0 0; line-height: 20px; @@ -112,10 +113,10 @@ } .r { - color: var(--color-red-1); + color: var(--color-red-2); } .b { - color: var(--color-blue-1); + color: var(--color-blue-2); } .g { color: var(--color-green-2); @@ -124,10 +125,10 @@ color: var(--color-grey-2); } .o { - color: var(--color-orange-2); + color: var(--color-orange-1); } .pp { - color: #6a1ea8; + color: #a46ad3; } .link { font-style: italic; @@ -207,11 +208,6 @@ export default class Code { } set code(txt) { - txt = txt - .replace(/&/g, '&') - .replace(/</g, '<') - .replace(/>/g, '>') - this.state.content = txt switch (this.props.lang) { diff --git a/src/editor/index.wc b/src/editor/index.wc index 63452f0..6c499d5 100644 --- a/src/editor/index.wc +++ b/src/editor/index.wc @@ -309,7 +309,9 @@ function renderToolbar(list) { it => `${it === 'image' ? '' : ''}` + }"/>${ + it === 'image' ? '' : '' + }` ) .join('') + `` diff --git a/src/meditor/addon.js b/src/meditor/addon.js index 875cd99..3a2f083 100644 --- a/src/meditor/addon.js +++ b/src/meditor/addon.js @@ -108,12 +108,18 @@ export default { }, image(elem) { + var $file = this.__ATTACH_ADDON__.querySelector('input') + this._attach = 'image' + $file.setAttribute('accept', 'image/*') + showDialog(this.__ATTACH_ADDON__, elem) }, attach(elem) { + var $file = this.__ATTACH_ADDON__.querySelector('input') this._attach = 'file' + $file.removeAttribute('accept') showDialog(this.__ATTACH_ADDON__, elem) }, diff --git a/src/meditor/helper.js b/src/meditor/helper.js index 755be8d..12446dd 100644 --- a/src/meditor/helper.js +++ b/src/meditor/helper.js @@ -7,7 +7,7 @@ import ICONS from './svg' const ELEMS = { - a: function(str, attr, inner) { + a: function (str, attr, inner) { let href = attr.match(attrExp('href')) let title = attr.match(attrExp('title')) let tar = attr.match(attrExp('target')) @@ -27,23 +27,23 @@ const ELEMS = { return `[${inner || href}](${href} "${attrs}")` }, - em: function(str, attr, inner) { + em: function (str, attr, inner) { return (inner && '_' + inner + '_') || '' }, - strong: function(str, attr, inner) { + strong: function (str, attr, inner) { return (inner && '**' + inner + '**') || '' }, - pre: function(str, attr, inner) { + pre: function (str, attr, inner) { inner = inner.replace(/<[/]?code>/g, '') return '\n\n```\n' + inner + '\n```\n' }, - code: function(str, attr, inner) { + code: function (str, attr, inner) { return (inner && '`' + inner + '`') || '' }, - blockquote: function(str, attr, inner) { + blockquote: function (str, attr, inner) { return '> ' + inner.trim() }, - img: function(str, attr, inner) { + img: function (str, attr, inner) { var src = attr.match(attrExp('src')), alt = attr.match(attrExp('alt')) @@ -52,11 +52,11 @@ const ELEMS = { return '![' + alt + '](' + src + ')' }, - p: function(str, attr, inner) { + p: function (str, attr, inner) { return inner ? '\n' + inner : '' }, br: '\n', - 'h([1-6])': function(str, level, attr, inner) { + 'h([1-6])': function (str, level, attr, inner) { let h = '#'.repeat(level) return '\n' + h + ' ' + inner + '\n' }, @@ -107,8 +107,6 @@ export const TOOL_TITLE = { preview: '预览' } -export const IMAGE_EXP = /image\/(jpeg|gif|png|webp|bmp|vnd\.microsoft\.icon|svg\+xml)/ - const LI_EXP = /<(ul|ol)>(?:(?!/gi // html标签的属性正则 @@ -136,9 +134,7 @@ export function renderToolbar(list, tag = 'span', dict = {}, showText = false) { var title = showText ? '' : `title="${dict[it] || ''}"` var text = showText ? dict[it] || '' : '' - return `<${tag} data-act="${it}" ${title}>${text}` + return `<${tag} data-act="${it}" ${title}>${text}` }) .join('') } @@ -188,35 +184,34 @@ export function html2md(str) { } while (str.match(LI_EXP)) { - str = str.replace(LI_EXP, function(match) { - match = match.replace(/<(ul|ol)>([\s\S]*?)<\/\1>/gi, function( - m, - t, - inner - ) { - let li = inner.split('') - li.pop() + str = str.replace(LI_EXP, function (match) { + match = match.replace( + /<(ul|ol)>([\s\S]*?)<\/\1>/gi, + function (m, t, inner) { + let li = inner.split('') + li.pop() - for (let i = 0, len = li.length; i < len; i++) { - let pre = t === 'ol' ? i + 1 + '. ' : '* ' - li[i] = - pre + - li[i] - .replace(/\s*
  • ([\s\S]*)/i, function(m, n) { - n = n.trim().replace(/\n/g, '\n ') - return n - }) - .replace(/<[\/]?[\w]*[^>]*>/g, '') + for (let i = 0, len = li.length; i < len; i++) { + let pre = t === 'ol' ? i + 1 + '. ' : '* ' + li[i] = + pre + + li[i] + .replace(/\s*
  • ([\s\S]*)/i, function (m, n) { + n = n.trim().replace(/\n/g, '\n ') + return n + }) + .replace(/<[\/]?[\w]*[^>]*>/g, '') + } + return li.join('\n') } - return li.join('\n') - }) + ) return '\n' + match.trim() }) } str = str .replace(/<[\/]?[\w]*[^>]*>/g, '') - .replace(/```([\w\W]*)```/g, function(str, inner) { + .replace(/```([\w\W]*)```/g, function (str, inner) { inner = inner .replace(/&/g, '&') .replace(/</g, '<') diff --git a/src/meditor/index.wc b/src/meditor/index.wc index 2e3b35c..3ade319 100644 --- a/src/meditor/index.wc +++ b/src/meditor/index.wc @@ -377,7 +377,7 @@ import '../form/radio' import '../layer/index' import '../markd/index' -import { renderToolbar, html2md, TOOL_TITLE, IMAGE_EXP } from './helper' +import { renderToolbar, html2md, TOOL_TITLE } from './helper' import Addon from './addon' export default class Meditor { @@ -606,8 +606,10 @@ export default class Meditor { var file = ev.dataTransfer.files[0] if (file) { if (this._attach === 'image') { - if (IMAGE_EXP.test(file.type)) { + if (file.type.includes('image')) { this._handleUpload(file) + } else { + layer.toast('只支持图片格式', 'warning') } } else { this._handleUpload(file, '') @@ -621,7 +623,7 @@ export default class Meditor { if (file) { ev.target.value = '' if (this._attach === 'image') { - if (IMAGE_EXP.test(file.type)) { + if (file.type.includes('image')) { this._handleUpload(file) } } else { @@ -964,7 +966,7 @@ export default class Meditor { break } if (file) { - if (IMAGE_EXP.test(file.type)) { + if (file.type.includes('image')) { this._handleUpload(file) } else { this._handleUpload(file, '')