feat: ✨ apply link

Leecason · Dec 13, 2019 · b3d3295 · b3d3295
1 parent 6165a58
commit b3d3295
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 0 deletions.
diff --git a/src/components/MenuBar/CommandButton.vue b/src/components/MenuBar/CommandButton.vue
@@ -65,6 +65,7 @@ export default {
     justify-content: center;
     height: 40px;
     margin: 2px;
+    outline: 0;
     width: 40px;
 
     &:hover {

diff --git a/src/components/MenuBar/index.vue b/src/components/MenuBar/index.vue
@@ -36,6 +36,13 @@
         icon="strikethrough"
       />
 
+      <command-button
+        :is-active="editorContext.isActive.link()"
+        :command="openApplyLinkControl"
+        tooltip="Apply link"
+        icon="link"
+      />
+
       <command-button
         :is-active="editorContext.isActive.code_block()"
         :command="editorContext.commands.code_block"
@@ -164,6 +171,19 @@ export default {
     isTextAlignActive (align) {
       return isTextAlignActive(this.editor.state, align);
     },
+
+    openApplyLinkControl () {
+      this.$prompt('', 'Apply link', {
+        confirmButtonText: 'Apply',
+        cancelButtonText: 'Close',
+        inputPlaceholder: 'Href',
+        roundButton: true,
+      }).then(({ value: href }) => {
+        this.editor.commands.link({ href });
+      }).catch(() => {
+        this.editor.focus();
+      });
+    },
   },
 };
 </script>

diff --git a/src/main.js b/src/main.js
@@ -9,6 +9,7 @@ import {
   Dropdown,
   DropdownMenu,
   DropdownItem,
+  MessageBox,
 } from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 
@@ -26,6 +27,8 @@ Vue.use(Dropdown);
 Vue.use(DropdownMenu);
 Vue.use(DropdownItem);
 
+Vue.prototype.$prompt = MessageBox.prompt;
+
 new Vue({
   router,
   render: h => h(App),

diff --git a/src/views/Index.vue b/src/views/Index.vue
@@ -20,6 +20,7 @@ import {
   Underline,
   Italic,
   Strike,
+  Link,
 
   CodeBlock,
 
@@ -68,6 +69,7 @@ export default {
         new Underline(),
         new Italic(),
         new Strike(),
+        new Link(),
 
         new Blockquote(),
         new CodeBlock(),