feat: ✨ support showMenubar and charCounterCount props (#75)

close #75

src/components/ElementTiptap.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="editor"
-    :style="editorSizeStyle"
+    :style="elTiptapEditorStyle"
     :class="{ 'el-tiptap-editor--fullscreen': isFullscreen }"
     class="el-tiptap-editor"
   >
@@ -10,6 +10,7 @@
     />
 
     <menu-bar
+      v-if="showMenubar"
       :editor="editor"
     >
       <template
@@ -32,7 +33,10 @@
       name="footer"
       :editor="editor"
     >
-      <div class="el-tiptap-editor__footer">
+      <div
+        v-if="charCounterCount"
+        class="el-tiptap-editor__footer"
+      >
         <span class="el-tiptap-editor__characters">
           {{ t('editor.characters') }}: {{ characters }}
         </span>
@@ -46,15 +50,14 @@ import { Component, Prop, Watch, Provide, ProvideReactive, Model, Mixins } from
 import { Editor, EditorContent, Extension, EditorUpdateEvent } from 'tiptap';
 import { Placeholder } from 'tiptap-extensions';
 import ContentAttributes from '@/extensions/content_attributes';
-import { isNaN, capitalize } from '@/utils/shared';
+import { capitalize } from '@/utils/shared';
 import { EVENTS } from '@/constants';
+import EditorStylesMixin from '@/mixins/EditorStylesMixin';
 import i18nMixin from '@/mixins/i18nMixin';
 
 import MenuBar from './MenuBar/index.vue';
 import MenuBubble from './MenuBubble/index.vue';
 
-const DEFAULT_EDITOR_SIZE_UNIT = 'px';
-
 const COMMON_EMIT_EVENTS: EVENTS[] = [
   EVENTS.TRANSACTION,
   EVENTS.FOCUS,
@@ -73,7 +76,7 @@ const COMMON_EMIT_EVENTS: EVENTS[] = [
   // https://github.com/kaorun343/vue-property-decorator/issues/277#issuecomment-558594655
   inject: [],
 })
-export default class ElTiptap extends Mixins(i18nMixin) {
+export default class ElTiptap extends Mixins(EditorStylesMixin, i18nMixin) {
   @Prop({
     type: Array,
     default: () => [],
@@ -119,18 +122,6 @@ export default class ElTiptap extends Mixins(i18nMixin) {
   })
   readonly spellcheck!: boolean | undefined;
 
-  @Prop({
-    type: [String, Number],
-    default: undefined,
-  })
-  readonly width!: string | number;
-
-  @Prop({
-    type: [String, Number],
-    default: undefined,
-  })
-  readonly height!: string | number;
-
   editor: Editor | null = null;
   emitAfterOnUpdate: boolean = false;
 
@@ -140,18 +131,6 @@ export default class ElTiptap extends Mixins(i18nMixin) {
     return this.editor.state.doc.textContent.length;
   }
 
-  get editorSizeStyle () {
-    let { width, height } = this;
-
-    width = isNaN(Number(width)) ? width : `${width}${DEFAULT_EDITOR_SIZE_UNIT}`;
-    height = isNaN(Number(height)) ? height : `${height}${DEFAULT_EDITOR_SIZE_UNIT}`;
-
-    return {
-      width,
-      height,
-    };
-  }
-
   @Watch('content')
   onContentChange (val: string): void {
     if (this.emitAfterOnUpdate) {

src/mixins/EditorStylesMixin.ts

@@ -0,0 +1,49 @@
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import { isNaN } from '@/utils/shared';
+
+const DEFAULT_EDITOR_SIZE_UNIT = 'px';
+
+@Component
+export default class EditorStylesMixin extends Vue {
+  @Prop({
+    type: [String, Number],
+    default: undefined,
+  })
+  readonly width!: string | number;
+
+  @Prop({
+    type: [String, Number],
+    default: undefined,
+  })
+  readonly height!: string | number;
+
+  @Prop({
+    type: Boolean,
+    default: true,
+  })
+  readonly showMenubar!: boolean;
+
+  @Prop({
+    type: Boolean,
+    default: true,
+  })
+  readonly charCounterCount!: boolean;
+
+  get elTiptapEditorStyle () {
+    return [
+      this.editorSizeStyle,
+    ];
+  }
+
+  get editorSizeStyle () {
+    let { width, height } = this;
+
+    width = isNaN(Number(width)) ? width : `${width}${DEFAULT_EDITOR_SIZE_UNIT}`;
+    height = isNaN(Number(height)) ? height : `${height}${DEFAULT_EDITOR_SIZE_UNIT}`;
+
+    return {
+      width,
+      height,
+    };
+  }
+};

src/styles/editor.scss

@@ -4,9 +4,11 @@
   $root: &;
 
   box-sizing: border-box;
+  border-radius: 8px;
   display: flex;
   flex-direction: column;
   max-height: 100%;
+  overflow: hidden;
   position: relative;
   width: 100%;
 
@@ -36,14 +38,13 @@
     border-top: 0;
     color: $black-color;
     flex-grow: 1;
-    padding: 20px;
+    padding: 30px 20px;
   }
 
   &__menu-bar {
     background-color: $white-color;
     border: 1px solid $lighter-border-color;
     border-bottom: 0;
-    border-radius: 8px 8px 0 0;
     display: flex;
     flex-shrink: 0;
     flex-wrap: wrap;
@@ -491,7 +492,6 @@
   &__footer {
     align-items: center;
     background-color: $white-color;
-    border-radius: 0 0 8px 8px;
     border: 1px solid $lighter-border-color;
     display: flex;
     font-family: sans-serif;