Refactor and add DialogForm

package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.1.0",
     "@luogu-dev/markdown-it-katex": "^0.0.1",
+    "axios": "^0.18.0",
     "codemirror": "^5.39.0",
     "highlight.js": "^9.12.0",
     "katex": "^0.9.0",

src/components/MarkdownPalettes.vue → src/MarkdownPalettes.vue

@@ -178,17 +178,17 @@
 import '@fortawesome/fontawesome-free/css/solid.css'
 import '@fortawesome/fontawesome-free/css/fontawesome.css'
 
-import Dialog from './Dialog.vue'
+import Dialog from './components/Dialog/Dialog.vue'
 
-import InputAreaMixin from './InputAreaMixin'
-import PreviewAreaMixin from './PreviewAreaMixin'
-import ToolbarMixin from './ToolbarMixin'
-import ActionMixin from './ActionMixin'
+import InputAreaMixin from './mixins/InputAreaMixin'
+import PreviewAreaMixin from './mixins/PreviewAreaMixin'
+import ToolbarMixin from './mixins/ToolbarMixin'
+import ActionMixin from './mixins/ActionMixin'
 
-import { defaultConfig, getConfig } from './DefaultConfig'
-import { contentParserFactory } from './ContentParserFactory'
-import InjectLnParser from './plugins/InjectLnParser.js'
-import { getText } from './i18n'
+import { defaultConfig, getConfig } from './utils/DefaultConfig'
+import { contentParserFactory } from './parsers/ContentParserFactory'
+import InjectLnParser from './parsers/InjectLnParser.js'
+import { getText } from './utils/i18n'
 
 export default {
     name: 'markdown-palettes',

src/components/Dialog.vue → src/components/Dialog/Dialog.vue

@@ -10,11 +10,7 @@
                     </div>
 
                     <form class="mp-dialog-body" @submit.prevent="finish">
-                        <div class="mp-dialog-form">
-                            <div class="mp-dialog-field" v-for="field in request.body" :key="field.name">
-                                <component :is="field.type || field.component" :request-field="field" v-model="responseData[field.name]"></component>
-                            </div>
-                        </div>
+                        <dialog-form :fields="this.request.body" v-model="responseData"></dialog-form>
 
                         <div class="mp-dialog-footer">
                             <div>
@@ -71,11 +67,6 @@
         padding-bottom: 10px;
     }
 
-    .mp-dialog-field {
-        margin: 10px 8px;
-        overflow:auto;
-    }
-
     .mp-dialog-footer {
         overflow:auto;
     }
@@ -114,7 +105,7 @@
 </style>
 
 <script>
-import DialogComponents from './dialog-input-components/components'
+import DialogForm from './DialogForm'
 
 export default {
     name: 'editor-dialog',
@@ -146,7 +137,7 @@ export default {
             this.$emit('finish', this.response)
         }
     },
-    components: DialogComponents,
+    components: { DialogForm },
     inject: ['t']
 }
 </script>

src/components/dialog-input-components/CodeMirror.vue → src/components/Dialog/DialogCodeMirror.vue

@@ -18,13 +18,13 @@
 </style>
 
 <script>
-import abstractInputComponent from './AbstractInputComponent'
+import AbstractDialogComponent from './AbstractDialogComponent'
 import CodeMirror from 'codemirror'
 import 'codemirror/lib/codemirror.css'
 
 export default {
     name: 'dialog-codemirror',
-    extends: abstractInputComponent,
+    extends: AbstractDialogComponent,
     data () {
         return {
             editor: null

src/components/Dialog/DialogComponentMap.js

@@ -0,0 +1,11 @@
+import DialogInput from './DialogInput'
+import DialogSelect from './DialogSelect'
+import DialogCodeMirror from './DialogCodeMirror'
+import DialogFile from './DialogFile'
+
+export default {
+    'dialog-input': DialogInput,
+    'dialog-select': DialogSelect,
+    'dialog-codemirror': DialogCodeMirror,
+    'dialog-file': DialogFile
+}

src/components/Dialog/DialogFile.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="mp-dialog-input">
+        <label>{{ title }}</label>
+        <input type="file" name="picture" @change="handleFile">
+    </div>
+</template>
+
+<style scoped>
+    .mp-dialog-input {
+        overflow: auto;
+    }
+
+    .mp-dialog-input label {
+        float: left;
+        padding-top: 5px;
+        vertical-align: top;
+        margin-right: 10px;
+        width: 20%;
+        font-size: 14px;
+        color: #666;
+    }
+
+    .mp-dialog-input input {
+        float: left;
+        width: 70%;
+        color: #999;
+        padding: 8px;
+        border: 1px solid #ddd;
+    }
+</style>
+
+<script>
+import abstractInputComponent from './AbstractDialogComponent'
+
+export default {
+    name: 'file',
+    extends: abstractInputComponent,
+    methods: {
+        async handleFile (event) {
+            let file = event.target.files[0]
+            this.fieldValue = await this.param.callback(file)
+        }
+    }
+}
+</script>

src/components/Dialog/DialogForm.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="dialog-form">
+        <div class="mp-dialog-field" v-for="field in fields" :key="field.name">
+            <component :is="field.type || field.component" :request-field="field" v-model="data[field.name]"></component>
+        </div>
+    </div>
+</template>
+
+<script>
+import DialogComponents from './DialogComponentMap'
+
+export default {
+    name: 'dialog-form',
+    props: {
+        fields: {
+            type: Array,
+            required: true
+        },
+        value: {
+            type: Object,
+            required: true
+        }
+    },
+    model: {
+        prop: 'value',
+        event: 'change'
+    },
+    computed: {
+        data: {
+            get () {
+                return this.value
+            },
+            set (value) {
+                this.$emit('change', value)
+            }
+        }
+    },
+    methods: {
+        close () {
+            this.$emit('close')
+        },
+        finish () {
+            this.$emit('finish', this.response)
+        }
+    },
+    components: DialogComponents,
+    inject: ['t']
+}
+</script>
+
+<style scoped>
+    .mp-dialog-field {
+        margin: 10px 8px;
+        overflow:auto;
+    }
+</style>

src/components/dialog-input-components/Input.vue → src/components/Dialog/DialogInput.vue

@@ -30,10 +30,10 @@
 </style>
 
 <script>
-import abstractInputComponent from './AbstractInputComponent'
+import AbstractDialogComponent from './AbstractDialogComponent'
 
 export default {
     name: 'dialog-input',
-    extends: abstractInputComponent
+    extends: AbstractDialogComponent
 }
 </script>

src/components/dialog-input-components/Select.vue → src/components/Dialog/DialogSelect.vue

@@ -2,7 +2,7 @@
     <div class="mp-dialog-select">
         <label>{{ title }}</label>
         <select v-model="value">
-            <option v-for="option in param.options" :value="option.value">{{ t(option.title) }}</option>
+            <option v-for="option in param.options" :key="option.title" :value="option.value">{{ t(option.title) }}</option>
         </select>
     </div>
 </template>
@@ -33,10 +33,10 @@
 </style>
 
 <script>
-import abstractInputComponent from './AbstractInputComponent'
+import AbstractDialogComponent from './AbstractDialogComponent'
 
 export default {
     name: 'dialog-select',
-    extends: abstractInputComponent
+    extends: AbstractDialogComponent
 }
 </script>

src/main.js

@@ -4,11 +4,12 @@ import Editor from './module.js'
 // register languages for hljs
 import hljs from 'highlight.js/lib/highlight'
 import cpp from 'highlight.js/lib/languages/cpp'
-hljs.registerLanguage('cpp', cpp)
 
 // register languages for CodeMirror
 import 'codemirror/mode/clike/clike'
 
+hljs.registerLanguage('cpp', cpp)
+
 // eslint-disable-next-line
 const app = new Vue({
     functional: true,

src/module.js

@@ -1,7 +1,7 @@
-import Editor from './components/MarkdownPalettes.vue'
+import Editor from './MarkdownPalettes.vue'
 
-import { contentParserFactory } from './components/ContentParserFactory'
-import { defaultConfig } from './components/DefaultConfig'
+import { contentParserFactory } from './parsers/ContentParserFactory'
+import { defaultConfig } from './utils/DefaultConfig'
 
 export default Editor
 

src/components/DefaultConfig.js → src/utils/DefaultConfig.js

@@ -1,8 +1,8 @@
 import KatexParser from '@luogu-dev/markdown-it-katex'
 import 'katex/dist/katex.css'
-import HighlightjsParser from './plugins/HighlightjsParser'
+import HighlightjsParser from '../parsers/HighlightjsParser'
 import 'highlight.js/styles/tomorrow.css'
-import { defaultBtns, defaultSimpleBtns, getBtns } from './toolbar-button/toolbarBtn'
+import { defaultBtns, defaultSimpleBtns, getBtns } from '../components/toolbar-button/toolbarBtn'
 import _ from 'lodash'
 
 function mixin (dest, src) {

src/utils/ImageUploaderFactory.js

@@ -0,0 +1,12 @@
+import axios from 'axios'
+
+function ImageUploaderFactory (uploadURL, fieldName) {
+    return async (file) => {
+        let form = new FormData()
+        form.append(fieldName, file, file.name)
+
+        return axios.post(uploadURL, form)
+    }
+}
+
+export { ImageUploaderFactory }

yarn.lock

@@ -1908,6 +1908,13 @@ aws4@^1.6.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.7.0.tgz#d4d0e9b9dbfca77bf08eeb0a8a471550fe39e289"
 
+axios@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
+  dependencies:
+    follow-redirects "^1.3.0"
+    is-buffer "^1.1.5"
+
 babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -3687,7 +3694,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.3.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.1.tgz#67a8f14f5a1f67f962c2c46469c79eaec0a90291"
   dependencies: