From 7dc61c0385af26ddeb92c144e9ff4d0217cdd5a9 Mon Sep 17 00:00:00 2001
From: Micle Bu <mekery@qq.com>
Date: Fri, 24 Apr 2020 19:58:25 +0800
Subject: [PATCH] fix(link): link button

---
 src/components/buttons/OLinkBtn.vue        | 61 ++++++++++++++++++++++
 src/components/common/OMetaInput.vue       | 14 ++++-
 src/components/menubars/OEditorMenuBar.vue |  2 +
 src/data/editor.js                         |  1 +
 src/pages/examples/basic.vue               |  1 +
 src/utils/menu.js                          |  7 ++-
 6 files changed, 83 insertions(+), 3 deletions(-)
 create mode 100644 src/components/buttons/OLinkBtn.vue

diff --git a/src/components/buttons/OLinkBtn.vue b/src/components/buttons/OLinkBtn.vue
new file mode 100644
index 0000000..0990a43
--- /dev/null
+++ b/src/components/buttons/OLinkBtn.vue
@@ -0,0 +1,61 @@
+<template>
+  <o-menubar-btn icon="link" :tooltip="$o.lang.editor.hyperlink" class="o-link-btn">
+    <q-menu ref="linkPopover"
+            anchor="bottom middle"
+            self="top middle"
+            class="shadow-5" @show="onShow">
+      <o-meta-input :val="href" :title="$o.lang.editor.hyperlink" icon="link"
+                    @primaryAction="insertLink(commands.link, $event)">
+      </o-meta-input>
+    </q-menu>
+  </o-menubar-btn>
+</template>
+
+<script>
+import OMenubarBtn from 'src/components/buttons/OMenubarBtn'
+import OMetaInput from 'src/components/common/OMetaInput'
+export default {
+  name: 'o-link-btn',
+  data () {
+    return {
+      href: ''
+    }
+  },
+  props: {
+    commands: {
+      type: Object
+    },
+    isActive: {
+      type: Object
+    },
+    getMarkAttrs: {
+      type: Function
+    }
+  },
+  components: {
+    OMenubarBtn,
+    OMetaInput
+  },
+  methods: {
+    onShow () {
+      this.href = ''
+
+      let link = this.getMarkAttrs('link')
+      console.log('show', link)
+      if (link) {
+        this.href = link.href
+      }
+    },
+    insertLink (command, href) {
+      command({ href })
+    }
+  },
+  computed: {
+  }
+}
+</script>
+
+<style lang="stylus">
+  .o-photo-btn {
+  }
+</style>
diff --git a/src/components/common/OMetaInput.vue b/src/components/common/OMetaInput.vue
index 4ec239d..a4e7195 100644
--- a/src/components/common/OMetaInput.vue
+++ b/src/components/common/OMetaInput.vue
@@ -2,7 +2,7 @@
   <section class="o-meta-input">
     <div class="title">{{title}}</div>
     <div class="fields">
-      <q-input v-model="value" ref="input" standout="bg-blue" flat
+      <q-input v-model="value" ref="input" standout="bg-blue" clearable flat
                :autofocus="true"
                @keyup.enter.native="onConfirm" :placeholder="$o.lang.label.linkAddress">
         <template v-slot:prepend>
@@ -30,6 +30,10 @@ export default {
     }
   },
   props: {
+    val: {
+      type: String,
+      default: ''
+    },
     title: {
       type: String,
       default: '超链接'
@@ -56,6 +60,14 @@ export default {
       this.$emit('primaryAction', this.value)
       this.value = ''
     }
+  },
+  watch: {
+    val (to, from) {
+      this.value = to
+    }
+  },
+  mounted () {
+    this.value = this.val
   }
 }
 </script>
diff --git a/src/components/menubars/OEditorMenuBar.vue b/src/components/menubars/OEditorMenuBar.vue
index 0c44a29..acd733b 100644
--- a/src/components/menubars/OEditorMenuBar.vue
+++ b/src/components/menubars/OEditorMenuBar.vue
@@ -68,6 +68,7 @@ import OHeadingList from 'src/components/buttons/OHeadingList'
 
 import OAddMoreBtn from 'src/components/buttons/OAddMoreBtn'
 import OPhotoBtn from 'src/components/buttons/OPhotoBtn'
+import OLinkBtn from 'src/components/buttons/OLinkBtn'
 import OTableBtn from 'src/components/buttons/OTableBtn'
 import OTableGroup from 'src/components/buttons/OTableGroup'
 
@@ -110,6 +111,7 @@ export default {
     OHeadingList,
     OAddMoreBtn,
     OPhotoBtn,
+    OLinkBtn,
     OTableBtn,
     OTableGroup
   },
diff --git a/src/data/editor.js b/src/data/editor.js
index 5ebf340..28df9e4 100644
--- a/src/data/editor.js
+++ b/src/data/editor.js
@@ -33,6 +33,7 @@ export const DefaultToolbar = [
   'separator',
   'blockquote',
   'code_block',
+  'link',
   'photo',
   'table',
   'separator',
diff --git a/src/pages/examples/basic.vue b/src/pages/examples/basic.vue
index e6d01f8..c1446c5 100644
--- a/src/pages/examples/basic.vue
+++ b/src/pages/examples/basic.vue
@@ -76,6 +76,7 @@ export default {
           'separator',
           'blockquote',
           'code_block',
+          'link',
           'photo',
           'table',
           'separator',
diff --git a/src/utils/menu.js b/src/utils/menu.js
index 5cc82c1..8a2df72 100644
--- a/src/utils/menu.js
+++ b/src/utils/menu.js
@@ -15,6 +15,7 @@ export const CommandComponents = {
   'align-group': 'o-align-group',
   'line-height': 'o-line-height-dropdown',
   heading: 'o-heading-dropdown',
+  link: 'o-link-btn',
   photo: 'o-photo-btn',
   table: 'o-table-btn',
 }
@@ -23,14 +24,16 @@ export const CommandComponents = {
  * Table toolbar
  */
 export const TableToolbar = [
+  'add-more',
+  'separator',
   'bold',
   'italic',
-  'strike',
-  'underline',
+  'code',
   'separator',
   'font-family',
   'fore-color',
   'back-color',
+  'format_clear',
   'separator',
   'bullet_list',
   'ordered_list',