improvement(min-height, max-height): allow to use any CSS unit and px…

… as default re #99
iliyaZelenko · Nov 8, 2019 · 2015ea2 · 2015ea2
1 parent 5b37bb8
commit 2015ea2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 25 deletions.
diff --git a/demo/pages/Index.vue b/demo/pages/Index.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <!-- :toolbar-attributes="{ color: 'yellow' }" -->
+    <!-- :toolbar-attributes="{ color: 'yellow' }"
+    min-height="500"
+    max-height="600"
+   -->
     <tiptap-vuetify
       v-model="content"
       :extensions="extensions"

diff --git a/src/components/TiptapVuetify.vue b/src/components/TiptapVuetify.vue
@@ -3,7 +3,6 @@
     v-if="editor"
     class="tiptap-vuetify-editor"
   >
-    <!-- hasLink || -->
     <bubble
       v-if="availableActions.bubbleMenu.length"
       :editor="editor"
@@ -36,14 +35,11 @@
 
       <slot name="toolbar-after" />
 
-      <div
-        class="tiptap-vuetify-editor__content"
+      <editor-content
+        :editor="editor"
         :style="contentDynamicStyles"
-      >
-        <editor-content
-          :editor="editor"
-        />
-      </div>
+        class="tiptap-vuetify-editor__content"
+      />
 
       <slot name="footer" />
     </VCard>
@@ -57,7 +53,6 @@ import Toolbar from '~/components/Toolbar.vue'
 import { Component, Prop, Watch } from 'vue-property-decorator'
 import { EVENTS, PROPS, EDITOR_TYPES_ENUM } from '~/const'
 import Bubble from '~/components/Bubble.vue'
-import { Link } from '~/main'
 import { Placeholder } from 'tiptap-extensions'
 import { ExtensionActionRenderInEnum } from '~/extensions/actions/ExtensionActionRenderInEnum'
 import ExtensionActionInterface from '~/extensions/actions/ExtensionActionInterface'
@@ -115,11 +110,11 @@ export default class TiptapVuetify extends Vue {
   })
   readonly [PROPS.TYPE]: EDITOR_TYPES_ENUM
 
-  @Prop({ type: Number })
-  readonly [PROPS.MIN_HEIGHT]: number
+  @Prop({ type: [String, Number] })
+  readonly [PROPS.MIN_HEIGHT]: string | number
 
-  @Prop({ type: Number })
-  readonly [PROPS.MAX_HEIGHT]: number
+  @Prop({ type: [String, Number] })
+  readonly [PROPS.MAX_HEIGHT]: string | number
 
   PROPS = PROPS
   EDITOR_TYPES_ENUM = EDITOR_TYPES_ENUM
@@ -133,19 +128,21 @@ export default class TiptapVuetify extends Vue {
   }
   emitAfterOnUpdate = false
 
-  get hasLink (): boolean {
-    return this[PROPS.EXTENSIONS].some((extension: AbstractExtension) => extension instanceof Link)
-  }
+  get contentDynamicStyles () {
+    // если не указана еденица измерения (e.g. 60, 25), то будет как px. То есть 60em, 25% такими и останетутся.
+    const getUnitWithPxAsDefault = (str) => {
+      if (!str) return str
 
-  get toolbarActions () {
-    return this[PROPS.EXTENSIONS].filter(i => i.renderIn)
-  }
+      const num = parseInt(str, 10)
+      const unit = str.slice(num.toString().length)
 
-  get contentDynamicStyles () {
-    let dynamicStylesToReturn = {}
-    if (this[PROPS.MIN_HEIGHT]) Object.assign(dynamicStylesToReturn, { minHeight: `${this[PROPS.MIN_HEIGHT]}px` })
-    if (this[PROPS.MAX_HEIGHT]) Object.assign(dynamicStylesToReturn, { maxHeight: `${this[PROPS.MAX_HEIGHT]}px` })
-    return dynamicStylesToReturn
+      return num + (unit || 'px')
+    }
+
+    return {
+      minHeight: getUnitWithPxAsDefault(this[PROPS.MIN_HEIGHT]),
+      maxHeight: getUnitWithPxAsDefault(this[PROPS.MAX_HEIGHT])
+    }
   }
 
   @Watch('value')