fix: in code view mode, disable menu button

Leecason · Jul 8, 2022 · 3d5e8d8 · 3d5e8d8
1 parent 5817266
commit 3d5e8d8
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,
         };