Fix height and webpack Release 0.4.0

Author: dark-flames

package.json

@@ -23,6 +23,7 @@
     "lodash": "^4.17.4",
     "markdown-it": "^8.4.1",
     "markdown-it-highlightjs": "^3.0.0",
+    "uglifyjs-webpack-plugin": "^1.2.7",
     "vue": "^2.5.11",
     "vue-codemirror-lite": "^1.0.3"
   },

src/components/InputArea.vue

@@ -10,6 +10,23 @@
 </template>
 
 <style>
+    #mp-input-area {
+        height: 100%;
+    }
+    /* hack CodeMirror */
+    .CodeMirror {
+        height: 100% !important;
+    }
+
+    .CodeMirror-scroll {
+        height: 100%;
+        overflow-y: hidden;
+        overflow-x: auto;
+    }
+
+    .vue-codemirror-wrap {
+        height: 100%;
+    }
 </style>
 
 <script>
@@ -27,9 +44,6 @@ export default {
         },
         insertCode: {
             default: null
-        },
-        height: {
-            type: String
         }
     },
     computed: {
@@ -62,9 +76,6 @@ export default {
         },
         value (newValue) {
             this.code = newValue
-        },
-        height (newHeight) {
-            this.editor.setSize('100%', newHeight)
         }
     },
     data: function () {
@@ -77,7 +88,6 @@ export default {
     },
     mounted: function () {
         this.code = this.value
-        this.editor.setSize('100%', this.height)
     },
     methods: {
         updateCode (code) {

src/components/MarkdownPalettes.vue

@@ -4,7 +4,7 @@
             <toolbar @change="insert" @click="clickToolbar" @input="handleToolbarOperation"
                      :toolbarConfig="editorConfig.toolbarConfig" ref="toolbar"></toolbar>
         </div>
-        <div id="mp-editor-area" :style="{ height: editorHeight }">
+        <div id="mp-editor-area">
             <div id="mp-editor-input-area" class="mp-editor-area mp-input-area" :class="{
                         'mp-editor-area': this.config.previewDisplay === 'normal',
                         'mp-editor-area-full': this.config.previewDisplay === 'hide'
@@ -14,14 +14,13 @@
                             @input="updateCode"
                             @finish="insertCode = null"
                             :insertCode="insertCode"
-                            :height="editorHeight"
                             :editorOption="editorConfig.editorOption"></input-area>
             </div>
             <div id="mp-editor-preview-area" class="mp-editor-area mp-preview-area" :class="{
                         'mp-editor-area': this.config.previewDisplay === 'normal',
                         'mp-editor-area-hide': this.config.previewDisplay === 'hide'
                 }">
-                <preview-area v-model="code" :parser="contentParser" ref="previewArea" :height="editorHeight"></preview-area>
+                <preview-area v-model="code" :parser="contentParser" ref="previewArea"></preview-area>
             </div>
         </div>
         <div id="mp-editor-dialog">
@@ -32,7 +31,22 @@
 </template>
 
 <style>
+    #mp-editor-toolbar {
+        float: left;
+        width: 100%;
+        height: 40px;
+    }
+    #mp-editor-area {
+        position: absolute;
+        width: 100%;
+        top: 40px;
+        bottom: 0;
+        overflow: hidden;
+        border: 1px solid #ddd;
+    }
+
     .mp-editor-container {
+        position:relative;
         height: 100%;
     }
     .mp-editor-area {
@@ -42,11 +56,6 @@
         float: left;
     }
 
-    #mp-editor-area {
-        overflow: hidden;
-        border: 1px solid #ddd;
-    }
-
     .mp-editor-area-full {
         box-sizing: border-box;
         width: 100%;
@@ -91,10 +100,6 @@ export default {
             default: function () {
                 return defaultConfig
             }
-        },
-        size: {
-            required: false,
-            default: true
         }
     },
     data () {
@@ -111,7 +116,6 @@ export default {
     },
     mounted () {
         this.code = this.value
-        this.$nextTick(this.updateEditorHeight)
     },
     components: {
         InputArea,
@@ -141,36 +145,12 @@ export default {
             }
             this.dialogRequest = request
             this.showDialog = true
-        },
-        updateEditorHeight () {
-            if (this.config.fullScreen) {
-                this.editorHeight = (window.innerHeight - this.$refs.toolbar.$el.clientHeight).toString() + 'px'
-            } else {
-                this.editorHeight = (this.$el.clientHeight - this.$refs.toolbar.$el.clientHeight).toString() + 'px'
-            }
-        },
-        handleToolbarOperation (operation) {
-            if (operation === 'hide') {
-                if (this.config.previewDisplay === 'normal') { this.config.previewDisplay = 'hide' } else { this.config.previewDisplay = 'normal' }
-            }
-            if (operation === 'fullScreen') {
-                if (!this.config.fullScreen) {
-                    this.config.fullScreen = true
-                    this.updateEditorHeight()
-                } else {
-                    this.config.fullScreen = false
-                    this.updateEditorHeight()
-                }
-            }
         }
     },
     watch: {
         value (newValue) {
             this.code = newValue
             this.updateCode(newValue)
-        },
-        size () {
-            this.$nextTick(this.updateEditorHeight)
         }
     }
 }

src/components/PreviewArea.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="mp-preview-area" :style="{ height: height }">
+    <div id="mp-preview-area">
         <div id="mp-preview-content" v-html="content"></div>
     </div>
 </template>
@@ -11,6 +11,7 @@
         padding-left: 20px;
         padding-right: 20px;
         overflow: auto;
+        height: auto;
         word-wrap:break-word;
     }
 

src/components/Toolbar.vue

@@ -18,7 +18,6 @@
         background-color: white;
         width: 100%;
         padding-right: 1px;
-        min-height: 35px;
         border-right: 1px solid #ddd;
         border-left: 1px solid #ddd;
         border-top: 1px solid #ddd;

src/components/toolbar-button/btn-info.js

@@ -4,7 +4,7 @@ export default {
     title: '关于',
     action: {
         insert () {
-            window.location.href = 'https://github.com/luogu-dev/markdown-palettes'
+            window.open('https://github.com/luogu-dev/markdown-palettes')
             return ''
         }
     }

webpack.config.js

@@ -4,6 +4,7 @@ const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
 const CleanWebpackPlugin = require('clean-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
 module.exports = {
     entry: ['./src/main.js'],
@@ -84,12 +85,7 @@ if (process.env.NODE_ENV === 'production') {
                 NODE_ENV: '"production"'
             }
         }),
-        new webpack.optimize.UglifyJsPlugin({
-            sourceMap: true,
-            compress: {
-                warnings: false
-            }
-        }),
+        new UglifyJsPlugin(),
         new webpack.LoaderOptionsPlugin({
             minimize: true
         })