add button for unfurling links

fr0tt · Feb 27, 2022 · bc90db8 · bc90db8
1 parent cf8daa8
commit bc90db8
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 39 deletions.
diff --git a/composer.json b/composer.json
@@ -3,7 +3,7 @@
     "description": "App for bookmarks and notes.",
     "keywords": ["laravel", "lumen", "bookmark", "notes"],
     "license": "MIT",
-    "version": "2.1.5",
+    "version": "2.1.6",
     "type": "project",
     "require": {
         "php": "^7.2.5",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     },
     "dependencies": {
         "@tiptap/core": "^2.0.0-beta.159",
+        "@tiptap/extension-link": "^2.0.0-beta.36",
         "@tiptap/extension-placeholder": "^2.0.0-beta.26",
         "@tiptap/extension-typography": "^2.0.0-beta.13",
         "@tiptap/extension-underline": "^2.0.0-beta.16",

diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/service-worker.js b/public/service-worker.js
diff --git a/resources/js/UnfurlingLink.js b/resources/js/UnfurlingLink.js
@@ -50,15 +50,12 @@ export default Node.create({
 
     addCommands() {
         return {
-            setUnfurlingLink: options => ({ tr, dispatch }) => {
-                const { selection } = tr
-                const node = this.type.create(options)
-
-                if (dispatch) {
-                    tr.replaceRangeWith(selection.from, selection.to, node)
-                }
-
-                return true
+            setUnfurlingLink: options => ({ commands, editor }) => {
+                commands.deleteSelection()
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: { href: editor.state.selection.$to.nodeBefore.text },
+                })
             },
         }
     },

diff --git a/resources/js/components/EditorMenuBar.vue b/resources/js/components/EditorMenuBar.vue
@@ -26,72 +26,75 @@
             </transition>
         </button>
 
-        <!--
-            really neccessary ?
-        <button class="menubar-button" :class="{ 'is-active': editor.isActive('paragraph') }"
-            @click="editor.chain().focus().setParagraph().run()">
-            <svg-vue class="editor-icon" icon="zondicons/text-decoration"/>
-        </button>
-        -->
-
         <i class="delimiter"></i>
 
         <button class="menubar-button" :class="{ 'is-active': editor.isActive('bold') }"
-            @click="editor.chain().focus().toggleBold().run()">
+            @click="editor.chain().focus().toggleBold().run()" title="Bold">
             <svg-vue class="editor-icon" icon="material/format_bold"/>
         </button>
 
         <button class="menubar-button" :class="{ 'is-active': editor.isActive('italic') }"
-            @click="editor.chain().focus().toggleItalic().run()">
+            @click="editor.chain().focus().toggleItalic().run()" title="Italic">
             <svg-vue class="editor-icon" icon="material/format_italic"/>
         </button>
 
         <button
             class="menubar-button" :class="{ 'is-active': editor.isActive('underline') }"
-            @click="editor.chain().focus().toggleUnderline().run()">
+            @click="editor.chain().focus().toggleUnderline().run()" title="Underline">
             <svg-vue class="editor-icon" icon="material/format_underlined"/>
         </button>
 
         <i class="delimiter"></i>
 
         <button class="menubar-button" :class="{ 'is-active': editor.isActive('bulletList') }"
-            @click="editor.chain().focus().toggleBulletList().run()" >
+            @click="editor.chain().focus().toggleBulletList().run()" title="Bullet List">
             <svg-vue class="editor-icon" icon="material/list_bulleted"/>
         </button>
 
         <button class="menubar-button" :class="{ 'is-active': editor.isActive('orderedList') }"
-            @click="editor.chain().focus().toggleOrderedList().run()">
+            @click="editor.chain().focus().toggleOrderedList().run()" title="Ordered List">
             <svg-vue class="editor-icon" icon="material/list_numbered"/>
         </button>
-        
+
         <i class="delimiter"></i>
 
         <button class="menubar-button" :class="{ 'is-active': editor.isActive('blockquote') }"
-            @click="editor.chain().focus().toggleBlockquote().run()">
+            @click="editor.chain().focus().toggleBlockquote().run()" title="Blockquote">
             <svg-vue class="editor-icon" icon="material/format_quote"/>
         </button>
 
         <button class="menubar-button" :class="{ 'is-active': editor.isActive('codeBlock') }"
-            @click="editor.chain().focus().toggleCodeBlock().run()">
+            @click="editor.chain().focus().toggleCodeBlock().run()" title="Code Block">
             <svg-vue class="editor-icon" icon="material/code"/>
         </button>
-
-        <button class="menubar-button" @click="editor.chain().focus().setHorizontalRule().run()">
+
+        <button class="menubar-button" @click="editor.chain().focus().setHorizontalRule().run()"
+            title="Horizontal Rule">
             <svg-vue class="editor-icon" icon="material/horizontal_rule"/>
         </button>
 
         <i class="delimiter"></i>
 
-        <button class="menubar-button" @click="editor.chain().focus().undo().run()">
+        <button class="menubar-button" @click="editor.chain().focus().setUnfurlingLink().run()"
+            title="Unfurling Link">
+            <svg-vue class="editor-icon" icon="material/art_track"/>
+        </button>
+
+        <i class="delimiter"></i>
+
+        <button class="menubar-button" @click="editor.chain().focus().undo().run()"
+            title="Undo">
             <svg-vue class="editor-icon" icon="material/undo"/>
         </button>
 
-        <button class="menubar-button" @click="editor.chain().focus().redo().run()">
+        <button class="menubar-button" @click="editor.chain().focus().redo().run()"
+            title="Redo">
             <svg-vue class="editor-icon" icon="material/redo"/>
         </button>
 
     </div>
 </template>
+
 <script>
 export default {
     props: ['editor'],

diff --git a/resources/js/components/UnfurlingLink.vue b/resources/js/components/UnfurlingLink.vue
@@ -1,5 +1,5 @@
 <template>
-    <NodeViewWrapper class="unfurling-link max-w-md block whitespace-normal" >
+    <NodeViewWrapper class="unfurling-link max-w-md block whitespace-normal">
         <a class="shadow-md flex my-1"
             target="_blank" rel="noopener noreferrer nofollow"
             :href="node.attrs.href"
@@ -41,7 +41,7 @@ export default {
     },
     created () {
 
-        if (this.node.attrs['data-title'] === null || 
+        if (this.node.attrs['data-title'] === null ||
             this.node.attrs['data-title'] === '') {
             axios.get('/api/meta', {
                 params: {
@@ -59,17 +59,20 @@ export default {
             }).catch(error => {
                 console.log(error)
             })
-        
+
         } else {
             const domain = new URL(this.node.attrs.href).origin.replace(/https?:\/\//, '')
             this.image = `https://external-content.duckduckgo.com/ip3/${domain}.ico`
         }
-        
+
     }
 }
 </script>
 <style>
     .has-focus {
         box-shadow: 0 1px 3px 0 rgb(255 119 0 / 42%), 0 1px 2px 0 rgb(255 119 0 / 38%);
     }
+    .unfurling-link a {
+        @apply no-underline;
+    }
 </style>
diff --git a/resources/js/components/pages/Collection.vue b/resources/js/components/pages/Collection.vue
@@ -143,9 +143,6 @@ export default {
                     condition: this.isRealCollection
                 }
             ])
-        },
-        currentCollection: function (newValue, oldValue) {
-            this.$store.commit('appbar/setTitle', newValue.name, { root: true })
         }
     },
     computed: {

diff --git a/resources/svg/material/art_track.svg b/resources/svg/material/art_track.svg