Fix height

dark-flames · dark-flames · commit 981445f1cda2 · 2018-07-01T02:38:27.000+08:00
diff --git a/index.html b/index.html
@@ -7,7 +7,10 @@
     <link rel="stylesheet" href="/dist/markdown-palettes.css" />
   </head>
   <body>
-    <div id="editor"></div>
+    <div id="editor-container" style="height: 700px;">
+      <div id="editor"></div>
+    </div>
+
     <script src="/dist/markdown-palettes.js"></script>
     <script>
       var editor = new MarkdownPalettes("#editor")
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
     "build-dev": "cross-env NODE_ENV=development webpack --progress",
     "lint": "eslint --ext .js,.vue src/",
-    "lint-fix": "eslint --ext .js,.vue --fix src/"
+    "lint-fix": "eslint --ext .js,.vue --fix src/",
+    "analyze": "cross-env NODE_ENV=development BUNDLE_ANALYZE=true webpack --progress --hide-modules"
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
diff --git a/src/components/DefaultConfig.js b/src/components/DefaultConfig.js
@@ -13,7 +13,6 @@ function set (obj, config) {
 }
 
 export const defaultConfig = {
-    height: '500px',
     previewDisplay: 'normal',
     fullScreen: false,
     parsers: [
diff --git a/src/components/MarkdownPalettes.vue b/src/components/MarkdownPalettes.vue
@@ -32,6 +32,9 @@
 </template>
 
 <style>
+    .mp-editor-container {
+        height: 100%;
+    }
     .mp-editor-area {
         box-sizing: border-box;
         width: 50%;
@@ -94,16 +97,28 @@ export default {
         const config = getConfig(this.config)
         return {
             code: '',
+            ready: false,
             showDialog: false,
             dialogRequest: {},
             insertCode: null,
             editorConfig: config,
-            editorHeight: config.height,
+            editorHeight: '500px',
             contentParser: contentParserFactory(config.parsers)
         }
     },
+    computed: {
+        elementHeight () {
+            if (this.ready) {
+                return this.$el.clientHeight
+            } else {
+                return '100%'
+            }
+        }
+    },
     mounted () {
         this.code = this.value
+        this.ready = true
+        this.updateEditorHeight()
     },
     components: {
         InputArea,
@@ -134,17 +149,24 @@ 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 if (this.$el !== undefined) {
+                this.editorHeight = (this.elementHeight - 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.editorHeight = (window.innerHeight - this.$refs.toolbar.$el.clientHeight).toString() + 'px'
+                    this.updateEditorHeight()
                 } else {
                     this.config.fullScreen = false
-                    this.editorHeight = this.editorConfig.height
+                    this.updateEditorHeight()
                 }
             }
         }
@@ -153,6 +175,11 @@ export default {
         value (newValue) {
             this.code = newValue
             this.updateCode(newValue)
+        },
+        elementHeight () {
+            if (this.ready) {
+                this.updateEditorHeight()
+            }
         }
     }
 }
diff --git a/src/main.js b/src/main.js
@@ -40,7 +40,7 @@ class MarkdownPalettes {
         })
     }
     getContentParaser () {
-        return contentParserFactory(getConfig(this.config))
+        return contentParserFactory(getConfig(this.config).parsers)
     }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,6 @@ function set (obj, config) {`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`export const defaultConfig = {`
`16`		`- height: '500px',`
`17`	`16`	`previewDisplay: 'normal',`
`18`	`17`	`fullScreen: false,`
`19`	`18`	`parsers: [`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ class MarkdownPalettes {`
`40`	`40`	`})`
`41`	`41`	`}`
`42`	`42`	`getContentParaser () {`
`43`		`- return contentParserFactory(getConfig(this.config))`
	`43`	`+ return contentParserFactory(getConfig(this.config).parsers)`
`44`	`44`	`}`
`45`	`45`	`}`
`46`	`46`