优化代码块和markd
parent
ec26d32d8e
commit
a4a8f7dfe1
|
@ -11,10 +11,14 @@
|
||||||
"url": "git+https://github.com/bytedo/wcui.git"
|
"url": "git+https://github.com/bytedo/wcui.git"
|
||||||
},
|
},
|
||||||
"main": "dist/",
|
"main": "dist/",
|
||||||
"keywords": ["web-components", "wc", "components", "yutent"],
|
"keywords": [
|
||||||
|
"web-components",
|
||||||
|
"wc",
|
||||||
|
"components",
|
||||||
|
"yutent"
|
||||||
|
],
|
||||||
"author": "yutent",
|
"author": "yutent",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {},
|
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"chalk": "^2.4.2",
|
"chalk": "^2.4.2",
|
||||||
"chokidar": "^1.7.0",
|
"chokidar": "^1.7.0",
|
||||||
|
|
|
@ -159,7 +159,12 @@ import { colorHtml, colorCss } from './colorful'
|
||||||
export default class Code {
|
export default class Code {
|
||||||
props = {
|
props = {
|
||||||
dark: '',
|
dark: '',
|
||||||
lang: ''
|
lang: '',
|
||||||
|
code: ''
|
||||||
|
}
|
||||||
|
|
||||||
|
state = {
|
||||||
|
content: ''
|
||||||
}
|
}
|
||||||
|
|
||||||
__init__() {
|
__init__() {
|
||||||
|
@ -176,17 +181,14 @@ export default class Code {
|
||||||
this.__CP__ = header.children[2].lastElementChild
|
this.__CP__ = header.children[2].lastElementChild
|
||||||
}
|
}
|
||||||
|
|
||||||
get value() {
|
get code() {
|
||||||
return this.props.content
|
return this.state.content
|
||||||
}
|
}
|
||||||
|
|
||||||
set value(txt) {
|
set code(txt) {
|
||||||
txt = txt
|
txt = txt.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||||||
.replace(/&/g, '&')
|
|
||||||
.replace(/</g, '<')
|
|
||||||
.replace(/>/g, '>')
|
|
||||||
|
|
||||||
this.props.content = txt
|
this.state.content = txt
|
||||||
|
|
||||||
switch (this.props.lang) {
|
switch (this.props.lang) {
|
||||||
case 'html':
|
case 'html':
|
||||||
|
@ -218,9 +220,10 @@ export default class Code {
|
||||||
if (txt.startsWith('<xmp>') && txt.endsWith('</xmp>')) {
|
if (txt.startsWith('<xmp>') && txt.endsWith('</xmp>')) {
|
||||||
txt = txt.slice(5, -6).trim()
|
txt = txt.slice(5, -6).trim()
|
||||||
}
|
}
|
||||||
|
if (txt) {
|
||||||
this.value = txt
|
this.value = txt
|
||||||
this.textContent = ''
|
this.textContent = ''
|
||||||
|
}
|
||||||
|
|
||||||
this._cpFN = $.bind(this.__CP__, 'click', ev => {
|
this._cpFN = $.bind(this.__CP__, 'click', ev => {
|
||||||
try {
|
try {
|
||||||
|
@ -248,13 +251,15 @@ export default class Code {
|
||||||
watch() {
|
watch() {
|
||||||
switch (name) {
|
switch (name) {
|
||||||
case 'lang':
|
case 'lang':
|
||||||
this.props.lang = val.toLowerCase()
|
this.props.lang = (val || '').toLowerCase()
|
||||||
this.__LANG__.textContent = this.props.lang
|
this.__LANG__.textContent = this.props.lang
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'value':
|
case 'code':
|
||||||
this.value = val
|
if (val !== null) {
|
||||||
this.removeAttribute('value')
|
this.code = val
|
||||||
|
this.removeAttribute('code')
|
||||||
|
}
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue