feat: ✨ add tooltip prop to enable/disable tooltip (#121)

close #121

README.md

@@ -422,6 +422,14 @@ Default: `true`
 
 Enables or disables the display of the character counter.
 
+### tooltip
+
+Type: `boolean`
+
+Default: `true`
+
+Control if tooltips are shown when getting with mouse over the buttons from the toolbar.
+
 ## 👽 Events
 
 ### Init

README_ZH.md

@@ -423,6 +423,14 @@ height: 100%;
 
 是否显示字数统计
 
+### tooltip
+
+类型: `boolean`
+
+默认值: `true`
+
+鼠标移到按钮上时是否显示 tooltip
+
 ## 👽 事件 Events
 
 ### Init

rollup.config.js

@@ -46,6 +46,7 @@ function getConfig ({
     output: {
       file,
       name: 'ElementTiptap',
+      exports: 'named',
       format,
       globals: {
         vue: 'Vue',

src/components/ElementTiptap.vue

@@ -2,7 +2,7 @@
   <div
     v-if="editor"
     :style="elTiptapEditorStyle"
-    :class="{ 'el-tiptap-editor--fullscreen': editorStateOptions.isFullscreen }"
+    :class="{ 'el-tiptap-editor--fullscreen': isFullscreen }"
     class="el-tiptap-editor"
   >
     <menu-bubble
@@ -69,7 +69,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Watch, Provide, Model, Mixins, Vue } from 'vue-property-decorator';
+import { Component, Prop, Watch, Provide, Model, Mixins } from 'vue-property-decorator';
 import { Editor, EditorContent, Extension, EditorUpdateEvent } from 'tiptap';
 import { Placeholder } from 'tiptap-extensions';
 import { Node as ProsemirrorNode } from 'prosemirror-model';
@@ -80,7 +80,6 @@ import { EVENTS } from '@/constants';
 import EditorStylesMixin from '@/mixins/EditorStylesMixin';
 import CodeViewMixin from '@/mixins/CodeViewMixin';
 import i18nMixin from '@/mixins/i18nMixin';
-import { EditorStateOptions } from '@/../types';
 
 import MenuBar from './MenuBar/index.vue';
 import MenuBubble from './MenuBubble/index.vue';
@@ -149,6 +148,12 @@ export default class ElTiptap extends Mixins(EditorStylesMixin, CodeViewMixin, i
   })
   readonly spellcheck!: boolean | undefined;
 
+  @Prop({
+    type: Boolean,
+    default: true,
+  })
+  readonly tooltip!: boolean;
+
   // TODO: popper.js
   @Prop({
     type: Object,
@@ -158,6 +163,11 @@ export default class ElTiptap extends Mixins(EditorStylesMixin, CodeViewMixin, i
 
   editor: Editor | null = null;
   emitAfterOnUpdate: boolean = false;
+  isFullscreen: boolean = false;
+
+  @Provide() get et (): ElTiptap {
+    return this;
+  };
 
   get characters (): number {
     if (!this.editor) return 0;
@@ -260,13 +270,6 @@ export default class ElTiptap extends Mixins(EditorStylesMixin, CodeViewMixin, i
     this.$emit(this.genEvent(EVENTS.UPDATE), output, options);
   }
 
-  @Provide() get editorStateOptions (): EditorStateOptions {
-    return Vue.observable({
-      isFullscreen: false,
-      isCodeViewMode: false,
-    });
-  };
-
   private genEvent (event: EVENTS) {
     return `on${capitalize(event)}`;
   }

src/components/MenuBar/index.vue

@@ -9,8 +9,9 @@
           v-for="(spec, i) in generateCommandButtonComponentSpecs(editorContext)"
           :key="'command-button' + i"
           :is="spec.component"
+          :enable-tooltip="et.tooltip"
           v-bind="spec.componentProps"
-          :readonly="editorStateOptions.isCodeViewMode"
+          :readonly="et.isCodeViewMode"
           v-on="spec.componentEvents"
         />
       </div>
@@ -21,7 +22,7 @@
 <script lang="ts">
 import { Component, Prop, Vue, Inject } from 'vue-property-decorator';
 import { Editor, EditorMenuBar, MenuData } from 'tiptap';
-import { MenuBtnViewType, EditorStateOptions } from '@/../types';
+import { MenuBtnViewType } from '@/../types';
 
 @Component({
   components: {
@@ -35,7 +36,7 @@ export default class Menubar extends Vue {
   })
   readonly editor!: Editor;
 
-  @Inject() readonly editorStateOptions!: EditorStateOptions;
+  @Inject() readonly et!: any;
 
   private generateCommandButtonComponentSpecs (editorContext: MenuData): MenuBtnViewType[] {
     const extensionManager = this.editor.extensions;

src/components/MenuBubble/index.vue

@@ -25,6 +25,7 @@
           v-for="(spec, i) in generateCommandButtonComponentSpecs(editorContext)"
           :key="'command-button' + i"
           :is="spec.component"
+          :enable-tooltip="et.tooltip"
           v-bind="spec.componentProps"
           v-on="spec.componentEvents"
         />
@@ -34,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue, Inject } from 'vue-property-decorator';
 import { TextSelection } from 'prosemirror-state';
 import { Editor, EditorMenuBubble, MenuData } from 'tiptap';
 // @ts-ignore
@@ -62,6 +63,8 @@ export default class MenuBubble extends Vue {
   })
   readonly menuBubbleOptions!: Object;
 
+  @Inject() readonly et!: any;
+
   /* Only appears when link is selected separately */
   private get showLinkMenu (): boolean {
     const { state, schema } = this.editor;

src/components/MenuCommands/CodeViewCommandButton.vue

@@ -1,15 +1,15 @@
 <template>
   <command-button
     :command="() => isCodeViewMode = !isCodeViewMode"
+    :enable-tooltip="et.tooltip"
     :tooltip="t('editor.extensions.CodeView.tooltip')"
     icon="regular/file-code"
-    :is-active="editorStateOptions.isCodeViewMode"
+    :is-active="isCodeViewMode"
   />
 </template>
 
 <script lang="ts">
 import { Component, Inject, Mixins } from 'vue-property-decorator';
-import { EditorStateOptions } from '@/../types';
 import i18nMixin from '@/mixins/i18nMixin';
 import CommandButton from './CommandButton.vue';
 
@@ -19,14 +19,14 @@ import CommandButton from './CommandButton.vue';
   },
 })
 export default class CodeViewCommandButton extends Mixins(i18nMixin) {
-  @Inject() readonly editorStateOptions!: EditorStateOptions;
+  @Inject() readonly et!: any;
 
-  get isCodeViewMode (): EditorStateOptions['isCodeViewMode'] {
-    return this.editorStateOptions.isCodeViewMode;
+  get isCodeViewMode (): boolean {
+    return this.et.isCodeViewMode;
   }
 
   set isCodeViewMode (val: boolean) {
-    this.editorStateOptions.isCodeViewMode = val;
+    this.et.isCodeViewMode = val;
   }
 };
 </script>

src/components/MenuCommands/ColorPopover.vue

@@ -1,7 +1,7 @@
 <template>
   <el-popover
     v-model="popoverVisible"
-    :disabled="editorStateOptions.isCodeViewMode"
+    :disabled="et.isCodeViewMode"
     placement="bottom"
     trigger="click"
     popper-class="el-tiptap-popper"
@@ -54,16 +54,16 @@
 
     <command-button
       slot="reference"
+      :enable-tooltip="et.tooltip"
       :tooltip="tooltip"
       :icon="icon"
-      :readonly="editorStateOptions.isCodeViewMode"
+      :readonly="et.isCodeViewMode"
     />
   </el-popover>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Watch, Emit, Vue, Inject } from 'vue-property-decorator';
-import { EditorStateOptions } from '@/../types';
 import { Button, Popover, Input } from 'element-ui';
 import CommandButton from './CommandButton.vue';
 
@@ -109,7 +109,7 @@ export default class ColorPopover extends Vue {
   private color: string = '';
   private popoverVisible: boolean = false;
 
-  @Inject() readonly editorStateOptions!: EditorStateOptions;
+  @Inject() readonly et!: any;
 
   @Watch('selectedColor', {
     immediate: true,

src/components/MenuCommands/CommandButton.vue

@@ -2,7 +2,7 @@
   <el-tooltip
     :content="tooltip"
     :open-delay="350"
-    :disabled="readonly"
+    :disabled="!enableTooltip || readonly"
     transition="el-zoom-in-bottom"
     effect="dark"
     placement="top"
@@ -90,6 +90,12 @@ export default class CommandButton extends Vue {
   })
   readonly tooltip!: string;
 
+  @Prop({
+    type: Boolean,
+    required: true,
+  })
+  readonly enableTooltip!: boolean;
+
   @Prop({
     type: Function,
     default: noop,

src/components/MenuCommands/FontSizeDropdown.vue

@@ -5,8 +5,9 @@
     @command="toggleFontSize"
   >
     <command-button
+      :enable-tooltip="et.tooltip"
       :tooltip="t('editor.extensions.FontSize.tooltip')"
-      :readonly="editorStateOptions.isCodeViewMode"
+      :readonly="et.isCodeViewMode"
       icon="text-width"
     />
 
@@ -43,7 +44,6 @@
 <script lang="ts">
 import { Component, Prop, Mixins, Inject } from 'vue-property-decorator';
 import { MenuData } from 'tiptap';
-import { EditorStateOptions } from '@/../types';
 import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui';
 import i18nMixin from '@/mixins/i18nMixin';
 import { DEFAULT_FONT_SIZE, findActiveFontSize } from '@/utils/font_size';
@@ -66,7 +66,7 @@ export default class FontSizeDropdown extends Mixins(i18nMixin) {
 
   defaultSize = DEFAULT_FONT_SIZE;
 
-  @Inject() readonly editorStateOptions!: EditorStateOptions;
+  @Inject() readonly et!: any;
 
   private get editor () {
     return this.editorContext.editor;

src/components/MenuCommands/FontTypeDropdown.vue

@@ -5,8 +5,9 @@
     @command="toggleFontType"
   >
     <command-button
+      :enable-tooltip="et.tooltip"
       :tooltip="t('editor.extensions.FontType.tooltip')"
-      :readonly="editorStateOptions.isCodeViewMode"
+      :readonly="et.isCodeViewMode"
       icon="font"
     />
 
@@ -35,7 +36,6 @@
 <script lang="ts">
 import { Component, Prop, Mixins, Inject } from 'vue-property-decorator';
 import { MenuData } from 'tiptap';
-import { EditorStateOptions } from '@/../types';
 import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui';
 import i18nMixin from '@/mixins/i18nMixin';
 import { DEFAULT_FONT_TYPE_MAP, findActiveFontType } from '@/utils/font_type';
@@ -58,7 +58,7 @@ export default class FontTypeDropdown extends Mixins(i18nMixin) {
   })
   readonly editorContext!: MenuData;
 
-  @Inject() readonly editorStateOptions!: EditorStateOptions;
+  @Inject() readonly et!: any;
 
   private get editor () {
     return this.editorContext.editor;

src/components/MenuCommands/FullscreenCommandButton.vue

@@ -1,6 +1,7 @@
 <template>
   <command-button
     :command="() => isFullscreen = !isFullscreen"
+    :enable-tooltip="et.tooltip"
     :tooltip="buttonTooltip"
     :icon="isFullscreen ? 'compress' : 'expand'"
     :is-active="isFullscreen"
@@ -9,7 +10,6 @@
 
 <script lang="ts">
 import { Component, Inject, Mixins } from 'vue-property-decorator';
-import { EditorStateOptions } from '@/../types';
 import i18nMixin from '@/mixins/i18nMixin';
 import CommandButton from './CommandButton.vue';
 
@@ -19,15 +19,15 @@ import CommandButton from './CommandButton.vue';
   },
 })
 export default class FullscreenCommandButton extends Mixins(i18nMixin) {
-  @Inject() readonly editorStateOptions!: EditorStateOptions;
+  @Inject() readonly et!: any;
 
-  get isFullscreen (): EditorStateOptions['isFullscreen'] {
-    return this.editorStateOptions.isFullscreen;
+  get isFullscreen (): boolean {
+    return this.et.isFullscreen;
   }
 
   set isFullscreen (val: boolean) {
     // eslint-disable-next-line no-debugger
-    this.editorStateOptions.isFullscreen = val;
+    this.et.isFullscreen = val;
   }
 
   private get buttonTooltip () {

src/components/MenuCommands/HeadingDropdown.vue

@@ -9,8 +9,9 @@
   >
     <command-button
       :is-active="isHeadingActive()"
+      :enable-tooltip="et.tooltip"
       :tooltip="t('editor.extensions.Heading.tooltip')"
-      :readonly="editorStateOptions.isCodeViewMode"
+      :readonly="et.isCodeViewMode"
       icon="heading"
     />
     <el-dropdown-menu
@@ -52,7 +53,6 @@ import { MenuData } from 'tiptap';
 import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui';
 import i18nMixin from '@/mixins/i18nMixin';
 import { isHeadingActive } from '@/utils/heading';
-import { EditorStateOptions } from '@/../types';
 import CommandButton from './CommandButton.vue';
 
 @Component({
@@ -70,7 +70,7 @@ export default class HeadingDropdown extends Mixins(i18nMixin) {
   })
   readonly editorContext!: MenuData;
 
-  @Inject() readonly editorStateOptions!: EditorStateOptions;
+  @Inject() readonly et!: any;
 
   private get editor () {
     return this.editorContext.editor;