Skip to content

Commit

Permalink
feat: add tooltip prop, enable to hide tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
@Leecason
Leecason committed Jul 8, 2022
1 parent f5d9668 commit 4d1aa2f
Show file tree
Hide file tree
Showing 24 changed files with 90 additions and 59 deletions.
9 changes: 9 additions & 0 deletions src/components/ElementTiptap.vue
View file
Expand Up @@ -81,6 +81,7 @@ interface Props {
height?: string | number;
output: 'html' | 'json';
readonly?: boolean;
tooltip?: boolean;
enableCharCount?: boolean;
charCountMax?: number;
spellcheck?: boolean;
Expand Down Expand Up @@ -142,6 +143,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
tooltip: {
type: Boolean,
default: true,
},
enableCharCount: {
type: Boolean,
default: true,
Expand Down Expand Up @@ -205,6 +210,8 @@ export default defineComponent({
output = editor.getJSON();
}
emit('update:content', output);
emit('onUpdate', output, editor);
};
Expand Down Expand Up @@ -253,6 +260,8 @@ export default defineComponent({
provide('isFullscreen', isFullscreen);
provide('toggleFullscreen', toggleFullscreen);
provide('enableTooltip', props.tooltip);
const { isCodeViewMode, cmTextAreaRef } = useCodeView(editor);
const { characters } = useCharacterCount(editor);
Expand Down
5 changes: 3 additions & 2 deletions src/components/MenuBar/index.vue
View file
Expand Up @@ -4,7 +4,7 @@
v-for="(spec, i) in generateCommandButtonComponentSpecs()"
:key="'command-button' + i"
:is="spec.component"
:enable-tooltip="true"
:enable-tooltip="enableTooltip"
v-bind="spec.componentProps"
:readonly="false"
v-on="spec.componentEvents || {}"
Expand All @@ -28,8 +28,9 @@ export default defineComponent({
setup() {
const t = inject('t');
const enableTooltip = inject('enableTooltip', true);
return { t };
return { t, enableTooltip };
},
methods: {
Expand Down
5 changes: 3 additions & 2 deletions src/components/MenuBubble/index.vue
View file
Expand Up @@ -24,7 +24,7 @@
v-for="(spec, i) in generateCommandButtonComponentSpecs()"
:key="'command-button' + i"
:is="spec.component"
:enable-tooltip="true"
:enable-tooltip="enableTooltip"
v-bind="spec.componentProps"
:readonly="false"
v-on="spec.componentEvents || {}"
Expand Down Expand Up @@ -78,8 +78,9 @@ export default defineComponent({
setup() {
const t = inject('t');
const enableTooltip = inject('enableTooltip', true);
return { t };
return { t, enableTooltip };
},
computed: {
Expand Down
5 changes: 3 additions & 2 deletions src/components/MenuCommands/CodeViewCommandButton.vue
View file
@@ -1,7 +1,7 @@
<template>
<command-button
:command="() => toggleIsCodeViewMode(!isCodeViewMode)"
:enable-tooltip="true"
:enable-tooltip="enableTooltip"
:tooltip="t('editor.extensions.CodeView.tooltip')"
icon="file-code"
:is-active="isCodeViewMode"
Expand All @@ -21,10 +21,11 @@ export default defineComponent({
setup() {
const t = inject('t');
const enableTooltip = inject('enableTooltip', true);
const isCodeViewMode = inject('isCodeViewMode', false);
const toggleIsCodeViewMode = inject('toggleIsCodeViewMode');
return { t, isCodeViewMode, toggleIsCodeViewMode };
return { t, enableTooltip, isCodeViewMode, toggleIsCodeViewMode };
},
});
</script>
4 changes: 3 additions & 1 deletion src/components/MenuCommands/ColorPopover.vue
View file
Expand Up @@ -52,7 +52,7 @@
<template #reference>
<span>
<command-button
:enable-tooltip="true"
:enable-tooltip="enableTooltip"
:tooltip="t('editor.extensions.TextColor.tooltip')"
icon="font-color"
:readonly="false"
Expand Down Expand Up @@ -87,6 +87,7 @@ export default defineComponent({
setup(props) {
const t = inject('t');
const enableTooltip = inject('enableTooltip', true);
const popoverRef = ref();
const colorText = ref('');
Expand All @@ -111,6 +112,7 @@ export default defineComponent({
return {
t,
enableTooltip,
popoverRef,
colorText,
selectedColor,
Expand Down
5 changes: 3 additions & 2 deletions src/components/MenuCommands/FontFamilyDropdown.vue
View file
@@ -1,7 +1,7 @@
<template>
<el-dropdown placement="bottom" trigger="click" @command="toggleFontType">
<command-button
:enable-tooltip="true"
:enable-tooltip="enableTooltip"
:tooltip="t('editor.extensions.FontType.tooltip')"
:readonly="false"
icon="font-family"
Expand Down Expand Up @@ -51,8 +51,9 @@ export default defineComponent({
setup() {
const t = inject('t');
const enableTooltip = inject('enableTooltip', true);
return { t };
return { t, enableTooltip };
},
computed: {
Expand Down
5 changes: 3 additions & 2 deletions src/components/MenuCommands/FontSizeDropdown.vue
View file
@@ -1,7 +1,7 @@
<template>
<el-dropdown placement="bottom" trigger="click" @command="toggleFontSize">
<command-button
:enable-tooltip="true"
:enable-tooltip="enableTooltip"
:tooltip="t('editor.extensions.FontSize.tooltip')"
:readonly="false"
icon="font-size"
Expand Down Expand Up @@ -66,8 +66,9 @@ export default defineComponent({
setup() {
const t = inject('t');
const enableTooltip = inject('enableTooltip', true);
return { t, defaultSize: DEFAULT_FONT_SIZE };
return { t, enableTooltip, defaultSize: DEFAULT_FONT_SIZE };
},
computed: {
Expand Down
5 changes: 3 additions & 2 deletions src/components/MenuCommands/FullscreenCommandButton.vue
View file
@@ -1,7 +1,7 @@
<template>
<command-button
:command="() => toggleFullscreen(!isFullscreen)"
:enable-tooltip="true"
:enable-tooltip="enableTooltip"
:tooltip="buttonTooltip"
:icon="isFullscreen ? 'compress' : 'expand'"
:is-active="isFullscreen"
Expand Down Expand Up @@ -29,10 +29,11 @@ export default defineComponent({
setup() {
const t = inject('t');
const enableTooltip = inject('enableTooltip', true);
const isFullscreen = inject('isFullscreen', false);
const toggleFullscreen = inject('toggleFullscreen');
return { t, isFullscreen, toggleFullscreen };
return { t, enableTooltip, isFullscreen, toggleFullscreen };
},
computed: {
Expand Down
16 changes: 9 additions & 7 deletions src/components/MenuCommands/HeadingDropdown.vue
View file
Expand Up @@ -6,7 +6,7 @@
@command="toggleHeading"
>
<command-button
enable-tooltip
:enable-tooltip="enableTooltip"
:is-active="editor.isActive('heading')"
:tooltip="t('editor.extensions.Heading.tooltip')"
icon="heading"
Expand Down Expand Up @@ -47,7 +47,7 @@
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, inject } from 'vue';
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
import type { Level } from '@tiptap/extension-heading';
import { Editor } from '@tiptap/core';
Expand All @@ -69,17 +69,19 @@ export default defineComponent({
required: true,
},
t: {
type: Function,
required: true,
},
levels: {
type: Array,
required: true,
},
},
setup() {
const t = inject('t');
const enableTooltip = inject('enableTooltip', true);
return { t, enableTooltip };
},
methods: {
toggleHeading(level: Level) {
if (level > 0) {
Expand Down
4 changes: 3 additions & 1 deletion src/components/MenuCommands/HighlightPopover.vue
View file
Expand Up @@ -31,7 +31,7 @@
<template #reference>
<span>
<command-button
:enable-tooltip="true"
:enable-tooltip="enableTooltip"
:tooltip="t('editor.extensions.TextHighlight.tooltip')"
icon="highlight"
:readonly="false"
Expand Down Expand Up @@ -66,6 +66,7 @@ export default defineComponent({
setup(props) {
const t = inject('t');
const enableTooltip = inject('enableTooltip', true);
const popoverRef = ref();
const popoverVisible = ref(false);
Expand All @@ -86,6 +87,7 @@ export default defineComponent({
return {
t,
enableTooltip,
popoverRef,
selectedColor,
popoverVisible,
Expand Down
5 changes: 3 additions & 2 deletions src/components/MenuCommands/IframeCommandButton.vue
View file
@@ -1,7 +1,7 @@
<template>
<command-button
:command="openInsertVideoControl"
:enable-tooltip="true"
:enable-tooltip="enableTooltip"
:tooltip="t('editor.extensions.Iframe.tooltip')"
:readonly="false"
icon="video"
Expand Down Expand Up @@ -30,8 +30,9 @@ export default defineComponent({
setup() {
const t = inject('t');
const enableTooltip = inject('enableTooltip', true);
return { t };
return { t, enableTooltip };
},
methods: {
Expand Down
7 changes: 4 additions & 3 deletions src/components/MenuCommands/Image/EditImageCommandButton.vue
View file
Expand Up @@ -2,7 +2,7 @@
<div>
<command-button
:command="openEditImageDialog"
enable-tooltip
:enable-tooltip="enableTooltip"
:tooltip="t('editor.extensions.Image.buttons.image_options.tooltip')"
icon="ellipsis-h"
/>
Expand Down Expand Up @@ -101,9 +101,10 @@ export default defineComponent({
},
setup() {
const t = inject<(k: string) => string>('t', (k) => k);
const t = inject('t');
const enableTooltip = inject('enableTooltip', true);
return { t };
return { t, enableTooltip };
},
methods: {
Expand Down
7 changes: 4 additions & 3 deletions src/components/MenuCommands/Image/ImageDisplayCommandButton.vue
View file
Expand Up @@ -25,7 +25,7 @@
<template #reference>
<span>
<command-button
enable-tooltip
:enable-tooltip="enableTooltip"
:tooltip="t('editor.extensions.Image.buttons.display.tooltip')"
icon="image-align"
/>
Expand Down Expand Up @@ -65,9 +65,10 @@ export default defineComponent({
},
setup() {
const t = inject<(k: string) => string>('t', (k) => k);
const t = inject('t');
const enableTooltip = inject('enableTooltip', true);
return { t };
return { t, enableTooltip };
},
computed: {
Expand Down
14 changes: 8 additions & 6 deletions src/components/MenuCommands/Image/InsertImageCommandButton.vue
View file
Expand Up @@ -24,7 +24,7 @@
<template #reference>
<span>
<command-button
:enable-tooltip="true"
:enable-tooltip="enableTooltip"
:tooltip="t('editor.extensions.Image.buttons.insert_image.tooltip')"
icon="image"
/>
Expand Down Expand Up @@ -56,7 +56,7 @@
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, inject } from 'vue';
import {
ElDialog,
ElUpload,
Expand Down Expand Up @@ -84,11 +84,13 @@ export default defineComponent({
type: Editor,
required: true,
},
},
t: {
type: Function,
required: true,
},
setup() {
const t = inject('t');
const enableTooltip = inject('enableTooltip', true);
return { t, enableTooltip };
},
data() {
Expand Down
5 changes: 3 additions & 2 deletions src/components/MenuCommands/Image/RemoveImageCommandButton.vue
View file
@@ -1,7 +1,7 @@
<template>
<command-button
:command="removeImage"
enable-tooltip
:enable-tooltip="enableTooltip"
:tooltip="t('editor.extensions.Image.buttons.remove_image.tooltip')"
icon="trash-alt"
/>
Expand All @@ -28,8 +28,9 @@ export default defineComponent({
setup() {
const t = inject('t');
const enableTooltip = inject('enableTooltip', true);
return { t };
return { t, enableTooltip };
},
methods: {
Expand Down
5 changes: 3 additions & 2 deletions src/components/MenuCommands/LineHeightDropdown.vue
View file
Expand Up @@ -5,7 +5,7 @@
@command="(lineHeight) => editor.commands.setLineHeight(lineHeight)"
>
<command-button
:enable-tooltip="true"
:enable-tooltip="enableTooltip"
:tooltip="t('editor.extensions.LineHeight.tooltip')"
:readonly="false"
icon="text-height"
Expand Down Expand Up @@ -55,8 +55,9 @@ export default defineComponent({
setup() {
const t = inject('t');
const enableTooltip = inject('enableTooltip', true);
return { t };
return { t, enableTooltip };
},
computed: {
Expand Down

0 comments on commit 4d1aa2f

Please sign in to comment.