frappe-ui 0.0.20 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -22,6 +22,7 @@
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/typography": "^0.5.0",
     "@tiptap/extension-image": "^2.0.0-beta.27",
+    "@tiptap/extension-link": "^2.0.0-beta.37",
     "@tiptap/extension-placeholder": "^2.0.0-beta.48",
     "@tiptap/starter-kit": "^2.0.0-beta.183",
     "@tiptap/vue-3": "^2.0.0-beta.90",

package/src/components/TextEditor/Menu.vue

@@ -10,7 +10,7 @@
           v-else
           class="flex p-1 text-gray-800 transition-colors rounded"
           :class="button.isActive(editor) ? 'bg-gray-100' : 'hover:bg-gray-100'"
-          @click="() => button.action(editor)"
+          @click="onClick(button)"
           :title="button.label"
         >
           <FeatherIcon v-if="button.icon" :name="button.icon" class="w-4" />
@@ -20,6 +20,15 @@
         </button>
       </template>
     </div>
+
+    <Dialog :options="{ title: 'Set Link' }" v-model="setLinkDialog.show">
+      <template #body-content>
+        <Input type="text" label="URL" v-model="setLinkDialog.url" />
+      </template>
+      <template #actions>
+        <Button appearance="primary" @click="setLink"> Save </Button>
+      </template>
+    </Dialog>
   </div>
 </template>
 <script>
@@ -28,5 +37,40 @@ export default {
   name: 'TipTapMenu',
   props: ['editor', 'buttons'],
   components: { FeatherIcon },
+  data() {
+    return {
+      setLinkDialog: { url: '', show: false },
+    }
+  },
+  methods: {
+    onClick(button) {
+      if (button.label === 'Link') {
+        this.setLinkDialog.show = true
+        let existingURL = this.editor.getAttributes('link').href
+        if (existingURL) {
+          this.setLinkDialog.url = existingURL
+        }
+      } else {
+        button.action(this.editor)
+      }
+    },
+    setLink() {
+      // empty
+      if (this.setLinkDialog.url === '') {
+        this.editor.chain().focus().extendMarkRange('link').unsetLink().run()
+      } else {
+        // update link
+        this.editor
+          .chain()
+          .focus()
+          .extendMarkRange('link')
+          .setLink({ href: this.setLinkDialog.url })
+          .run()
+      }
+
+      this.setLinkDialog.show = false
+      this.setLinkDialog.url = ''
+    },
+  },
 }
 </script>

package/src/components/TextEditor/TextEditor.vue

@@ -49,6 +49,7 @@ import { Editor, EditorContent, BubbleMenu, FloatingMenu } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
 import Image from '@tiptap/extension-image'
+import Link from '@tiptap/extension-link'
 import Menu from './Menu.vue'
 import commands from './commands'
 
@@ -101,6 +102,7 @@ export default {
       extensions: [
         StarterKit,
         Image,
+        Link,
         Placeholder.configure({
           placeholder: this.placeholder || 'Write something...',
         }),
@@ -156,6 +158,7 @@ export default {
           'Separator',
           'Bold',
           'Italic',
+          'Link',
           'Separator',
           'Bullet List',
           'Numbered List',

package/src/components/TextEditor/commands.js

@@ -61,6 +61,11 @@ export default {
     action: (editor) => editor.chain().focus().setHorizontalRule().run(),
     isActive: (editor) => false,
   },
+  Link: {
+    label: 'Link',
+    icon: 'link',
+    isActive: (editor) => editor.isActive('link'),
+  },
   Undo: {
     label: 'Undo',
     icon: 'corner-up-left',