fix: 🐛 enable open in new tab when add link

Leecason · Jul 6, 2020 · bcea961 · bcea961
1 parent ccd305f
commit bcea961
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 43 deletions.
diff --git a/src/components/MenuCommands/Link/AddLinkCommandButton.vue b/src/components/MenuCommands/Link/AddLinkCommandButton.vue
@@ -1,22 +1,79 @@
 <template>
-  <command-button
-    :is-active="editorContext.isActive.link()"
-    :readonly="et.isCodeViewMode"
-    :command="openApplyLinkControl"
-    :enable-tooltip="et.tooltip"
-    :tooltip="et.t('editor.extensions.Link.add.tooltip')"
-    icon="link"
-  />
+  <div>
+    <command-button
+      :is-active="editorContext.isActive.link()"
+      :readonly="et.isCodeViewMode"
+      :command="openAddLinkDialog"
+      :enable-tooltip="et.tooltip"
+      :tooltip="et.t('editor.extensions.Link.add.tooltip')"
+      icon="link"
+    />
+
+    <el-dialog
+      :title="et.t('editor.extensions.Link.add.control.title')"
+      :visible.sync="addLinkDialogVisible"
+      :append-to-body="true"
+      width="400px"
+      custom-class="el-tiptap-edit-link-dialog"
+    >
+      <el-form
+        :model="linkAttrs"
+        label-position="right"
+        size="small"
+      >
+        <el-form-item
+          :label="et.t('editor.extensions.Link.add.control.href')"
+          prop="href"
+        >
+          <el-input
+            v-model="linkAttrs.href"
+            autocomplete="off"
+          />
+        </el-form-item>
+
+        <el-form-item prop="openInNewTab">
+          <el-checkbox v-model="linkAttrs.openInNewTab">
+            {{ et.t('editor.extensions.Link.add.control.open_in_new_tab') }}
+          </el-checkbox>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button
+          size="small"
+          round
+          @click="closeAddLinkDialog"
+        >
+          {{ et.t('editor.extensions.Link.add.control.cancel') }}
+        </el-button>
+
+        <el-button
+          type="primary"
+          size="small"
+          round
+          @mousedown.prevent
+          @click="addLink"
+        >
+          {{ et.t('editor.extensions.Link.add.control.confirm') }}
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Inject, Vue } from 'vue-property-decorator';
-import { MessageBox } from 'element-ui';
+import { Component, Prop, Inject, Vue, Watch } from 'vue-property-decorator';
+import { Dialog, Form, FormItem, Input, Checkbox } from 'element-ui';
 import { MenuData } from 'tiptap';
 import CommandButton from '../CommandButton.vue';
 
 @Component({
   components: {
+    [Dialog.name]: Dialog,
+    [Form.name]: Form,
+    [FormItem.name]: FormItem,
+    [Input.name]: Input,
+    [Checkbox.name]: Checkbox,
     CommandButton,
   },
 })
@@ -29,29 +86,27 @@ export default class AddLinkCommandButton extends Vue {
 
   @Inject() readonly et!: any;
 
-  openApplyLinkControl (): void {
-    const { editor } = this.editorContext;
-    const { state, view } = editor;
-    const { tr } = state; // current trascation, need to restore when confirmed
-
-    MessageBox.prompt('', this.et.t('editor.extensions.Link.add.control.title'), {
-      confirmButtonText: this.et.t('editor.extensions.Link.add.control.confirm'),
-      cancelButtonText: this.et.t('editor.extensions.Link.add.control.cancel'),
-      inputPlaceholder: this.et.t('editor.extensions.Link.add.control.placeholder'),
-      roundButton: true,
-    // @ts-ignore
-    }).then(({ value: href }) => {
-      // https://github.com/Leecason/element-tiptap/issues/119
-      // in Firefox 77, when message-box confirm button clicked, editor will lose focus
-      // and re-focus on closeDialog's next tick, https://github.com/ElemeFE/element/blob/dev/src/utils/aria-dialog.js#L66
-      // but re-focus will lose the previous selection, so add link will not work
-      // here need to restore the previous trascation
-      view.dispatch(tr);
-
-      this.editorContext.commands.link({ href });
-    }).catch(() => {
-
-    });
+  linkAttrs = {};
+
+  addLinkDialogVisible = false;
+
+  @Watch('addLinkDialogVisible', { immediate: true })
+  onDialogVisibleChange () {
+    this.linkAttrs = { href: '', openInNewTab: true };
+  }
+
+  private addLink () {
+    this.editorContext.commands.link(this.linkAttrs);
+
+    this.closeAddLinkDialog();
+  }
+
+  private openAddLinkDialog () {
+    this.addLinkDialogVisible = true;
+  }
+
+  private closeAddLinkDialog () {
+    this.addLinkDialogVisible = false;
   }
 };
 </script>
diff --git a/src/components/MenuCommands/Link/EditLinkCommandButton.vue b/src/components/MenuCommands/Link/EditLinkCommandButton.vue
@@ -42,7 +42,7 @@
           round
           @click="closeEditLinkDialog"
         >
-          {{ et.t('editor.extensions.Image.control.edit_image.cancel') }}
+          {{ et.t('editor.extensions.Link.edit.control.cancel') }}
         </el-button>
 
         <el-button
@@ -52,7 +52,7 @@
           @mousedown.prevent
           @click="updateLinkAttrs"
         >
-          {{ et.t('editor.extensions.Image.control.edit_image.confirm') }}
+          {{ et.t('editor.extensions.Link.edit.control.confirm') }}
         </el-button>
       </template>
     </el-dialog>

diff --git a/src/i18n/de/index.ts b/src/i18n/de/index.ts
@@ -31,7 +31,8 @@ export default {
           tooltip: 'Link hinzufügen',
           control: {
             title: 'Link hinzufügen',
-            placeholder: 'Link',
+            href: 'Link',
+            open_in_new_tab: 'Öffnen Sie in einem neuen Tab',
             confirm: 'Hinzufügen',
             cancel: 'Abbrechen',
           },

diff --git a/src/i18n/en/index.ts b/src/i18n/en/index.ts
@@ -31,7 +31,8 @@ export default {
           tooltip: 'Apply link',
           control: {
             title: 'Apply Link',
-            placeholder: 'Href',
+            href: 'Href',
+            open_in_new_tab: 'Open in new tab',
             confirm: 'Apply',
             cancel: 'Cancel',
           },

diff --git a/src/i18n/es/index.ts b/src/i18n/es/index.ts
@@ -31,7 +31,8 @@ export default {
           tooltip: 'Crear enlace',
           control: {
             title: 'Crear enlace',
-            placeholder: 'Href',
+            href: 'Href',
+            open_in_new_tab: 'Abrir en una pestaña nueva',
             confirm: 'Crear',
             cancel: 'Cancelar',
           },

diff --git a/src/i18n/ko/index.ts b/src/i18n/ko/index.ts
@@ -31,7 +31,8 @@ export default {
           tooltip: '링크 추가',
           control: {
             title: '링크 추가',
-            placeholder: 'URL주소',
+            href: 'URL주소',
+            open_in_new_tab: '새 탭에서 열기',
             confirm: '적용',
             cancel: '취소',
           },

diff --git a/src/i18n/pl/index.ts b/src/i18n/pl/index.ts
@@ -31,7 +31,8 @@ export default {
           tooltip: 'Dodaj link',
           control: {
             title: 'Dodaj Link',
-            placeholder: 'Źródło',
+            href: 'Źródło',
+            open_in_new_tab: 'Otwórz w nowej karcie',
             confirm: 'Dodaj',
             cancel: 'Anuluj',
           },

diff --git a/src/i18n/ru/index.ts b/src/i18n/ru/index.ts
@@ -31,7 +31,8 @@ export default {
           tooltip: 'Добавить ссылку',
           control: {
             title: 'Добавить ссылку',
-            placeholder: 'Адрес',
+            href: 'Адрес',
+            open_in_new_tab: 'Открыть в новой вкладке',
             confirm: 'Применить',
             cancel: 'Отменить',
           },

diff --git a/src/i18n/zh-tw/index.ts b/src/i18n/zh-tw/index.ts
@@ -31,7 +31,8 @@ export default {
           tooltip: '新增超連結',
           control: {
             title: '新增超連結',
-            placeholder: '輸入超連結',
+            href: '超連結',
+            open_in_new_tab: '在新分頁開啟',
             confirm: '新增',
             cancel: '取消',
           },

diff --git a/src/i18n/zh/index.ts b/src/i18n/zh/index.ts
@@ -31,7 +31,8 @@ export default {
           tooltip: '添加链接',
           control: {
             title: '添加链接',
-            placeholder: '输入链接',
+            href: '链接',
+            open_in_new_tab: '在新标签页中打开',
             confirm: '添加',
             cancel: '取消',
           },