fix: disable command button when editor is in code view mode

Leecason · Jul 8, 2022 · 6e0b41f · 6e0b41f
1 parent 4d1aa2f
commit 6e0b41f
Show file tree

Hide file tree

Showing 10 changed files with 32 additions and 19 deletions.
diff --git a/src/components/ElementTiptap.vue b/src/components/ElementTiptap.vue
@@ -264,6 +264,8 @@ export default defineComponent({
 
     const { isCodeViewMode, cmTextAreaRef } = useCodeView(editor);
 
+    provide('isCodeViewMode', isCodeViewMode);
+
     const { characters } = useCharacterCount(editor);
 
     const showFooter = computed(() => {

diff --git a/src/components/MenuBar/index.vue b/src/components/MenuBar/index.vue
@@ -6,7 +6,7 @@
       :is="spec.component"
       :enable-tooltip="enableTooltip"
       v-bind="spec.componentProps"
-      :readonly="false"
+      :readonly="isCodeViewMode"
       v-on="spec.componentEvents || {}"
     />
   </div>
@@ -29,8 +29,9 @@ export default defineComponent({
   setup() {
     const t = inject('t');
     const enableTooltip = inject('enableTooltip', true);
+    const isCodeViewMode = inject('isCodeViewMode', false);
 
-    return { t, enableTooltip };
+    return { t, enableTooltip, isCodeViewMode };
   },
 
   methods: {

diff --git a/src/components/MenuBubble/index.vue b/src/components/MenuBubble/index.vue
@@ -26,7 +26,7 @@
           :is="spec.component"
           :enable-tooltip="enableTooltip"
           v-bind="spec.componentProps"
-          :readonly="false"
+          :readonly="isCodeViewMode"
           v-on="spec.componentEvents || {}"
         />
       </template>
@@ -79,8 +79,9 @@ export default defineComponent({
   setup() {
     const t = inject('t');
     const enableTooltip = inject('enableTooltip', true);
+    const isCodeViewMode = inject('isCodeViewMode', false);
 
-    return { t, enableTooltip };
+    return { t, enableTooltip, isCodeViewMode };
   },
 
   computed: {

diff --git a/src/components/MenuCommands/ColorPopover.vue b/src/components/MenuCommands/ColorPopover.vue
@@ -1,6 +1,6 @@
 <template>
   <el-popover
-    :disabled="false"
+    :disabled="isCodeViewMode"
     placement="bottom"
     trigger="click"
     popper-class="el-tiptap-popper"
@@ -55,7 +55,7 @@
           :enable-tooltip="enableTooltip"
           :tooltip="t('editor.extensions.TextColor.tooltip')"
           icon="font-color"
-          :readonly="false"
+          :readonly="isCodeViewMode"
         />
       </span>
     </template>
@@ -88,6 +88,7 @@ export default defineComponent({
   setup(props) {
     const t = inject('t');
     const enableTooltip = inject('enableTooltip', true);
+    const isCodeViewMode = inject('isCodeViewMode', false);
 
     const popoverRef = ref();
     const colorText = ref('');
@@ -113,6 +114,7 @@ export default defineComponent({
     return {
       t,
       enableTooltip,
+      isCodeViewMode,
       popoverRef,
       colorText,
       selectedColor,

diff --git a/src/components/MenuCommands/FontFamilyDropdown.vue b/src/components/MenuCommands/FontFamilyDropdown.vue
@@ -3,7 +3,7 @@
     <command-button
       :enable-tooltip="enableTooltip"
       :tooltip="t('editor.extensions.FontType.tooltip')"
-      :readonly="false"
+      :readonly="isCodeViewMode"
       icon="font-family"
     />
 
@@ -52,8 +52,9 @@ export default defineComponent({
   setup() {
     const t = inject('t');
     const enableTooltip = inject('enableTooltip', true);
+    const isCodeViewMode = inject('isCodeViewMode', false);
 
-    return { t, enableTooltip };
+    return { t, enableTooltip, isCodeViewMode };
   },
 
   computed: {

diff --git a/src/components/MenuCommands/FontSizeDropdown.vue b/src/components/MenuCommands/FontSizeDropdown.vue
@@ -3,7 +3,7 @@
     <command-button
       :enable-tooltip="enableTooltip"
       :tooltip="t('editor.extensions.FontSize.tooltip')"
-      :readonly="false"
+      :readonly="isCodeViewMode"
       icon="font-size"
     />
 
@@ -67,8 +67,9 @@ export default defineComponent({
   setup() {
     const t = inject('t');
     const enableTooltip = inject('enableTooltip', true);
+    const isCodeViewMode = inject('isCodeViewMode', false);
 
-    return { t, enableTooltip, defaultSize: DEFAULT_FONT_SIZE };
+    return { t, enableTooltip, isCodeViewMode, defaultSize: DEFAULT_FONT_SIZE };
   },
 
   computed: {

diff --git a/src/components/MenuCommands/HighlightPopover.vue b/src/components/MenuCommands/HighlightPopover.vue
@@ -1,6 +1,6 @@
 <template>
   <el-popover
-    :disabled="false"
+    :disabled="isCodeViewMode"
     placement="bottom"
     trigger="click"
     popper-class="el-tiptap-popper"
@@ -34,7 +34,7 @@
           :enable-tooltip="enableTooltip"
           :tooltip="t('editor.extensions.TextHighlight.tooltip')"
           icon="highlight"
-          :readonly="false"
+          :readonly="isCodeViewMode"
         />
       </span>
     </template>
@@ -67,6 +67,7 @@ export default defineComponent({
   setup(props) {
     const t = inject('t');
     const enableTooltip = inject('enableTooltip', true);
+    const isCodeViewMode = inject('isCodeViewMode', false);
 
     const popoverRef = ref();
     const popoverVisible = ref(false);
@@ -88,6 +89,7 @@ export default defineComponent({
     return {
       t,
       enableTooltip,
+      isCodeViewMode,
       popoverRef,
       selectedColor,
       popoverVisible,

diff --git a/src/components/MenuCommands/IframeCommandButton.vue b/src/components/MenuCommands/IframeCommandButton.vue
@@ -3,7 +3,7 @@
     :command="openInsertVideoControl"
     :enable-tooltip="enableTooltip"
     :tooltip="t('editor.extensions.Iframe.tooltip')"
-    :readonly="false"
+    :readonly="isCodeViewMode"
     icon="video"
   />
 </template>
@@ -31,8 +31,9 @@ export default defineComponent({
   setup() {
     const t = inject('t');
     const enableTooltip = inject('enableTooltip', true);
+    const isCodeViewMode = inject('isCodeViewMode', false);
 
-    return { t, enableTooltip };
+    return { t, enableTooltip, isCodeViewMode };
   },
 
   methods: {

diff --git a/src/components/MenuCommands/LineHeightDropdown.vue b/src/components/MenuCommands/LineHeightDropdown.vue
@@ -7,7 +7,7 @@
     <command-button
       :enable-tooltip="enableTooltip"
       :tooltip="t('editor.extensions.LineHeight.tooltip')"
-      :readonly="false"
+      :readonly="isCodeViewMode"
       icon="text-height"
     />
     <template #dropdown>
@@ -56,8 +56,9 @@ export default defineComponent({
   setup() {
     const t = inject('t');
     const enableTooltip = inject('enableTooltip', true);
+    const isCodeViewMode = inject('isCodeViewMode', false);
 
-    return { t, enableTooltip };
+    return { t, enableTooltip, isCodeViewMode };
   },
 
   computed: {

diff --git a/src/components/MenuCommands/TablePopover/index.vue b/src/components/MenuCommands/TablePopover/index.vue
@@ -1,6 +1,6 @@
 <template>
   <el-popover
-    :disabled="false"
+    :disabled="isCodeViewMode"
     placement="bottom"
     trigger="click"
     popper-class="el-tiptap-popper"
@@ -109,7 +109,7 @@
           :is-active="isTableActive"
           :enable-tooltip="enableTooltip"
           :tooltip="t('editor.extensions.Table.tooltip')"
-          :readonly="false"
+          :readonly="isCodeViewMode"
           icon="table"
         />
       </span>
@@ -148,14 +148,15 @@ export default defineComponent({
   setup() {
     const t = inject('t');
     const enableTooltip = inject('enableTooltip', true);
+    const isCodeViewMode = inject('isCodeViewMode', false);
 
     const popoverRef = ref();
 
     const hidePopover = () => {
       unref(popoverRef).hide();
     };
 
-    return { t, enableTooltip, popoverRef, hidePopover };
+    return { t, enableTooltip, isCodeViewMode, popoverRef, hidePopover };
   },
 
   computed: {