Skip to content

Commit d58e671

Browse files
TitanSnowdark-flames
TitanSnow
authored and
dark-flames
committed
New preview render method and other improvments (#21)
* markdown-it-v! * add built languages * Revert "ignore css-tree" * webpack-node-externals * dynamically load codemirror modes
1 parent c9ae9b4 commit d58e671

20 files changed

+312
-871
lines changed

‎.babelrc‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
{
22
"presets": [
3-
["modern-browsers", {
4-
"modules": false
5-
}],
6-
"@babel/preset-stage-3"
3+
"@vue/babel-preset-app"
74
],
85
"plugins": [
9-
"transform-vue-jsx",
106
"lodash"
117
]
128
}

‎.eslintrc‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎.eslintrc.yml‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
root: true
2+
extends:
3+
- "plugin:vue/recommended"
4+
- "@vue/standard"
5+
- "eslint:recommended"
6+
rules:
7+
indent: [error, 4]
8+
vue/name-property-casing: "off"
9+
vue/html-indent: [error, 4]
10+
parserOptions:
11+
parser: babel-eslint

‎package.json‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,48 +4,50 @@
44
"version": "0.4.6",
55
"author": "Luogu Dev Team",
66
"license": "MIT",
7-
"module": "dist/MarkdownPalettes.esm.js",
87
"main": "dist/MarkdownPalettes.common.js",
98
"style": "dist/MarkdownPalettes.css",
109
"scripts": {
1110
"dev": "vue-cli-service serve --open",
1211
"prod-test": "vue-cli-service serve --open --mode production",
13-
"build": "vue-cli-service build --name MarkdownPalettes --target lib src/browserModule.js && rollup -c && cp demo.html dist && ./.after-build.sh",
12+
"build": "vue-cli-service build --name MarkdownPalettes --target lib src/browserModule.js && cp demo.html dist && ./.after-build.sh",
1413
"build-dev": "vue-cli-service build --name MarkdownPalettes --target lib src/browserModule.js --mode development",
1514
"lint": "vue-cli-service lint",
1615
"lint-fix": "vue-cli-service lint --fix",
17-
"analyze": "vue-cli-service build --name MarkdownPalettes --target lib src/browserModule.js --report"
16+
"analyze": "vue-cli-service build --name MarkdownPalettes --target lib src/browserModule.js --report",
17+
"test-dist": "node ./test_dist_server.js"
1818
},
1919
"dependencies": {
2020
"@fortawesome/fontawesome-free": "^5.1.0",
21-
"@luogu-dev/markdown-it-katex": "^0.0.1",
2221
"axios": "^0.18.0",
2322
"codemirror": "^5.39.0",
24-
"highlight.js": "^9.12.0",
2523
"katex": "^0.9.0",
2624
"lodash": "^4.17.4",
27-
"markdown-it": "^8.4.1"
25+
"markdown-it": "^8.4.2",
26+
"markdown-it-v": "^1.0.0-alpha.3",
27+
"markdown-it-v-codemirror-highlighter": "^1.0.0-alpha.1",
28+
"markdown-it-v-katex": "^1.0.0-alpha.1"
2829
},
2930
"devDependencies": {
30-
"@babel/plugin-syntax-jsx": "^7.0.0-beta.53",
31-
"@babel/preset-env": "^7.0.0-beta.53",
32-
"@babel/preset-stage-3": "^7.0.0-beta.53",
3331
"@vue/cli-plugin-babel": "^3.0.0-beta.15",
3432
"@vue/cli-plugin-eslint": "^3.0.0-beta.15",
3533
"@vue/cli-service": "^3.0.0-beta.15",
3634
"@vue/eslint-config-standard": "^3.0.0-rc.3",
3735
"babel-plugin-lodash": "^3.3.4",
38-
"babel-plugin-transform-vue-jsx": "^4.0.1",
39-
"babel-preset-modern-browsers": "^12.0.0-beta.1",
40-
"rollup": "^0.62.0",
41-
"rollup-plugin-babel": "^4.0.0-beta.7",
42-
"rollup-plugin-vue": "^4.3.1",
36+
"express": "^4.16.3",
37+
"morgan": "^1.9.0",
4338
"stylus": "^0.54.5",
4439
"stylus-loader": "^3.0.2",
4540
"vue": "^2.5.11",
4641
"vue-template-compiler": "^2.5.16"
4742
},
4843
"peerDependencies": {
4944
"vue": "^2.5.11"
50-
}
45+
},
46+
"browserslist": [
47+
"Edge >= 15",
48+
"Firefox >= 53",
49+
"Chrome >= 55",
50+
"Opera >= 42",
51+
"Safari >= 10.1"
52+
]
5153
}

‎rollup.config.js‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎src/MarkdownPalettes.vue‎

Lines changed: 56 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,64 @@
11
<template>
2-
<div class="mp-editor-container" :class="{'mp-full-screen': this.fullScreen}">
3-
<div class="mp-editor-toolbar" v-if="toolbarBtns.length">
2+
<div
3+
:class="{'mp-full-screen': fullScreen}"
4+
class="mp-editor-container">
5+
<div
6+
v-if="toolbarBtns.length"
7+
class="mp-editor-toolbar">
48
<ul class="mp-editor-menu">
5-
<li v-for="(item, index) in toolbarBtns" :class="{'mp-divider':item.name === '|'}" :key="item.name + index">
9+
<li
10+
v-for="(item, index) in toolbarBtns"
11+
:class="{'mp-divider':item.name === '|'}"
12+
:key="item.name + index">
613
<span v-if="item.name === '|'">|</span>
7-
<a v-else :title="t(ensureValue(item.title))" @click="toolbarAction(item)" unselectable="on">
8-
<i :class="['fa', ensureValue(item.icon)]" unselectable="on">{{ ensureValue(item.content) }}</i>
14+
<a
15+
v-else
16+
:title="t(ensureValue(item.title))"
17+
unselectable="on"
18+
@click="toolbarAction(item)">
19+
<i
20+
:class="['fa', ensureValue(item.icon)]"
21+
unselectable="on">{{ ensureValue(item.content) }}</i>
922
</a>
1023
</li>
1124
</ul>
1225
</div>
1326
<div class="mp-editor-ground">
14-
<div class="mp-editor-zone mp-input-zone" :class="{
15-
'mp-editor-zone': previewDisplay === 'normal',
16-
'mp-editor-zone-full': previewDisplay === 'hide',
17-
'mp-editor-zone-hide': previewDisplay === 'full'
18-
}">
19-
<div class="mp-input-area" ref="inputArea"></div>
27+
<div
28+
:class="{
29+
'mp-editor-zone': previewDisplay === 'normal',
30+
'mp-editor-zone-full': previewDisplay === 'hide',
31+
'mp-editor-zone-hide': previewDisplay === 'full'
32+
}"
33+
class="mp-editor-zone mp-input-zone">
34+
<div
35+
ref="inputArea"
36+
class="mp-input-area"/>
2037
</div>
21-
<div class="mp-editor-zone mp-preview-zone" :class="{
22-
'mp-editor-zone': previewDisplay === 'normal',
23-
'mp-editor-zone-hide': previewDisplay === 'hide',
24-
'mp-editor-zone-full': previewDisplay === 'full'
25-
}">
26-
<div class="mp-preview-area" ref="previewArea" @scroll="previewAreaScroll">
27-
<div class="mp-preview-content" ref="previewContent" v-html="previewContent"></div>
38+
<div
39+
:class="{
40+
'mp-editor-zone': previewDisplay === 'normal',
41+
'mp-editor-zone-hide': previewDisplay === 'hide',
42+
'mp-editor-zone-full': previewDisplay === 'full'
43+
}"
44+
class="mp-editor-zone mp-preview-zone">
45+
<div
46+
ref="previewArea"
47+
class="mp-preview-area"
48+
@scroll="previewAreaScroll">
49+
<preview-area
50+
ref="previewContent"
51+
:content="previewContent"
52+
class="mp-preview-content"/>
2853
</div>
2954
</div>
3055
</div>
3156
<div>
32-
<editor-dialog v-if="showDialog" :request="dialogRequest"
33-
@finish="dialogFinish" @close="closeDialog"></editor-dialog>
57+
<editor-dialog
58+
v-if="showDialog"
59+
:request="dialogRequest"
60+
@finish="dialogFinish"
61+
@close="closeDialog"/>
3462
</div>
3563
</div>
3664
</template>
@@ -179,6 +207,7 @@ import '@fortawesome/fontawesome-free/css/solid.css'
179207
import '@fortawesome/fontawesome-free/css/fontawesome.css'
180208
181209
import Dialog from './components/Dialog/Dialog.vue'
210+
import PreviewArea from './components/PreviewArea.js'
182211
183212
import InputAreaMixin from './mixins/InputAreaMixin'
184213
import PreviewAreaMixin from './mixins/PreviewAreaMixin'
@@ -192,6 +221,8 @@ import { getText } from './utils/i18n'
192221
193222
export default {
194223
name: 'markdown-palettes',
224+
components: { 'editor-dialog': Dialog, PreviewArea },
225+
mixins: [InputAreaMixin, PreviewAreaMixin, ToolbarMixin, ActionMixin],
195226
props: {
196227
value: {
197228
type: String,
@@ -223,6 +254,11 @@ export default {
223254
}
224255
}
225256
},
257+
watch: {
258+
value (newValue) {
259+
this.setCode(newValue)
260+
}
261+
},
226262
methods: {
227263
setCode (code) {
228264
this.code = code
@@ -249,13 +285,6 @@ export default {
249285
250286
t: getText
251287
},
252-
watch: {
253-
value (newValue) {
254-
this.setCode(newValue)
255-
}
256-
},
257288
provide: () => ({ t: getText }),
258-
mixins: [InputAreaMixin, PreviewAreaMixin, ToolbarMixin, ActionMixin],
259-
components: { 'editor-dialog': Dialog }
260289
}
261290
</script>

‎src/components/Dialog/Dialog.vue‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,33 @@
66

77
<div class="mp-dialog-header">
88
<strong>{{ t(request.title) }}</strong>
9-
<a class="fa fa-times mp-dialog-close" @click="close"></a>
9+
<a
10+
class="fa fa-times mp-dialog-close"
11+
@click="close"/>
1012
</div>
1113

12-
<form class="mp-dialog-body" @submit.prevent="finish">
13-
<dialog-form v-if="this.request.type === 'form'" :fields="this.request.body" v-model="responseData"></dialog-form>
14-
<dialog-tab v-else-if="this.request.type === 'tab'" :fields="this.request.body" v-model="responseData"></dialog-tab>
14+
<form
15+
class="mp-dialog-body"
16+
@submit.prevent="finish">
17+
<dialog-form
18+
v-if="request.type === 'form'"
19+
:fields="request.body"
20+
v-model="responseData"/>
21+
<dialog-tab
22+
v-else-if="request.type === 'tab'"
23+
:fields="request.body"
24+
v-model="responseData"/>
1525

1626
<div class="mp-dialog-footer">
1727
<div>
18-
<button class="mp-dialog-button" type="button" @click="close">{{ t('取消') }}</button>
19-
<button class="mp-dialog-button" type="submit" style="margin-right: 7px">{{ t('确定') }}</button>
28+
<button
29+
class="mp-dialog-button"
30+
type="button"
31+
@click="close">{{ t('取消') }}</button>
32+
<button
33+
class="mp-dialog-button"
34+
type="submit"
35+
style="margin-right: 7px">{{ t('确定') }}</button>
2036
</div>
2137
</div>
2238
</form>
@@ -111,6 +127,7 @@ import DialogTab from './DialogTab.vue'
111127
112128
export default {
113129
name: 'editor-dialog',
130+
components: { DialogForm, DialogTab },
114131
props: {
115132
request: {
116133
type: Object,
@@ -143,7 +160,6 @@ export default {
143160
this.$emit('finish', this.response)
144161
}
145162
},
146-
components: { DialogForm, DialogTab },
147163
inject: ['t']
148164
}
149165
</script>

‎src/components/Dialog/DialogForm.vue‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
<template>
22
<div class="dialog-form">
3-
<div class="mp-dialog-field" v-for="field in fields" :key="field.name">
4-
<component :is="field.type || field.component" :request-field="field" v-model="data[field.name]"></component>
3+
<div
4+
v-for="field in fields"
5+
:key="field.name"
6+
class="mp-dialog-field">
7+
<component
8+
:is="field.type || field.component"
9+
:request-field="field"
10+
v-model="data[field.name]"/>
511
</div>
612
</div>
713
</template>
@@ -11,6 +17,11 @@ import DialogComponents from './FormComponent/DialogFormComponentMap'
1117
1218
export default {
1319
name: 'dialog-form',
20+
components: DialogComponents,
21+
model: {
22+
prop: 'value',
23+
event: 'change'
24+
},
1425
props: {
1526
fields: {
1627
type: Array,
@@ -21,10 +32,6 @@ export default {
2132
required: true
2233
}
2334
},
24-
model: {
25-
prop: 'value',
26-
event: 'change'
27-
},
2835
data () {
2936
const initialData = {}
3037
this.fields.forEach((field) => {
@@ -43,7 +50,6 @@ export default {
4350
}
4451
}
4552
},
46-
components: DialogComponents,
4753
inject: ['t']
4854
}
4955
</script>

0 commit comments

Comments
 (0)