From 3d5e8d8531baa6736356ba6ef0b21e5e066ead20 Mon Sep 17 00:00:00 2001
From: Leecason <leecason0722@gmail.com>
Date: Fri, 8 Jul 2022 09:20:21 +0800
Subject: [PATCH] fix: in code view mode, disable menu button

---
 .../MenuCommands/CodeViewCommandButton.vue       | 16 +++++++++-------
 .../MenuCommands/FullscreenCommandButton.vue     | 16 +++++++++-------
 src/components/MenuCommands/HeadingDropdown.vue  |  4 +++-
 .../Image/InsertImageCommandButton.vue           |  5 ++++-
 .../MenuCommands/Link/AddLinkCommandButton.vue   |  4 +++-
 src/extensions/code-view.ts                      |  2 +-
 6 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/components/MenuCommands/CodeViewCommandButton.vue b/src/components/MenuCommands/CodeViewCommandButton.vue
index 0bd14e3..65dd59f 100644
--- a/src/components/MenuCommands/CodeViewCommandButton.vue
+++ b/src/components/MenuCommands/CodeViewCommandButton.vue
@@ -1,11 +1,13 @@
 <template>
-  <command-button
-    :command="() => toggleIsCodeViewMode(!isCodeViewMode)"
-    :enable-tooltip="enableTooltip"
-    :tooltip="t('editor.extensions.CodeView.tooltip')"
-    icon="file-code"
-    :is-active="isCodeViewMode"
-  />
+  <div>
+    <command-button
+      :command="() => toggleIsCodeViewMode(!isCodeViewMode)"
+      :enable-tooltip="enableTooltip"
+      :tooltip="t('editor.extensions.CodeView.tooltip')"
+      icon="file-code"
+      :is-active="isCodeViewMode"
+    />
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/src/components/MenuCommands/FullscreenCommandButton.vue b/src/components/MenuCommands/FullscreenCommandButton.vue
index 9bf4690..1bbd1bc 100644
--- a/src/components/MenuCommands/FullscreenCommandButton.vue
+++ b/src/components/MenuCommands/FullscreenCommandButton.vue
@@ -1,11 +1,13 @@
 <template>
-  <command-button
-    :command="() => toggleFullscreen(!isFullscreen)"
-    :enable-tooltip="enableTooltip"
-    :tooltip="buttonTooltip"
-    :icon="isFullscreen ? 'compress' : 'expand'"
-    :is-active="isFullscreen"
-  />
+  <div>
+    <command-button
+      :command="() => toggleFullscreen(!isFullscreen)"
+      :enable-tooltip="enableTooltip"
+      :tooltip="buttonTooltip"
+      :icon="isFullscreen ? 'compress' : 'expand'"
+      :is-active="isFullscreen"
+    />
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/src/components/MenuCommands/HeadingDropdown.vue b/src/components/MenuCommands/HeadingDropdown.vue
index 0004ce0..edbfdb9 100644
--- a/src/components/MenuCommands/HeadingDropdown.vue
+++ b/src/components/MenuCommands/HeadingDropdown.vue
@@ -9,6 +9,7 @@
       :enable-tooltip="enableTooltip"
       :is-active="editor.isActive('heading')"
       :tooltip="t('editor.extensions.Heading.tooltip')"
+      :disabled="isCodeViewMode"
       icon="heading"
     />
     <template #dropdown>
@@ -78,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 };
   },
 
   methods: {
diff --git a/src/components/MenuCommands/Image/InsertImageCommandButton.vue b/src/components/MenuCommands/Image/InsertImageCommandButton.vue
index 5975506..efd0e58 100644
--- a/src/components/MenuCommands/Image/InsertImageCommandButton.vue
+++ b/src/components/MenuCommands/Image/InsertImageCommandButton.vue
@@ -1,5 +1,6 @@
 <template>
   <el-popover
+    :disabled="isCodeViewMode"
     placement="bottom"
     trigger="click"
     popper-class="el-tiptap-popper"
@@ -26,6 +27,7 @@
         <command-button
           :enable-tooltip="enableTooltip"
           :tooltip="t('editor.extensions.Image.buttons.insert_image.tooltip')"
+          :readonly="isCodeViewMode"
           icon="image"
         />
       </span>
@@ -89,8 +91,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 };
   },
 
   data() {
diff --git a/src/components/MenuCommands/Link/AddLinkCommandButton.vue b/src/components/MenuCommands/Link/AddLinkCommandButton.vue
index 8cc4140..d8dbf39 100644
--- a/src/components/MenuCommands/Link/AddLinkCommandButton.vue
+++ b/src/components/MenuCommands/Link/AddLinkCommandButton.vue
@@ -2,6 +2,7 @@
   <div>
     <command-button
       :is-active="editor.isActive('link')"
+      :readonly="isCodeViewMode"
       :command="openAddLinkDialog"
       :enable-tooltip="enableTooltip"
       :tooltip="t('editor.extensions.Link.add.tooltip')"
@@ -85,8 +86,9 @@ export default defineComponent({
   setup() {
     const t = inject('t');
     const enableTooltip = inject('enableTooltip', true);
+    const isCodeViewMode = inject('isCodeViewMode', true);
 
-    return { t, enableTooltip };
+    return { t, enableTooltip, isCodeViewMode };
   },
 
   data() {
diff --git a/src/extensions/code-view.ts b/src/extensions/code-view.ts
index 0084e2b..f86cd06 100644
--- a/src/extensions/code-view.ts
+++ b/src/extensions/code-view.ts
@@ -43,7 +43,7 @@ const CodeView = Extension.create<CodeViewOptions>({
   addOptions() {
     return {
       ...this.parent?.(),
-      button({ editor, t }: { editor: Editor; t: (...args: any[]) => string }) {
+      button({ editor }: { editor: Editor }) {
         return {
           component: CodeViewCommandButton,
         };