feat: button status change with action

package.json

@@ -27,8 +27,6 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.37.0",
-    "@commitlint/cli": "^17.5.1",
-    "@commitlint/config-conventional": "^17.4.4",
     "@iconify-json/tabler": "^1.1.68",
     "@tailwindcss/typography": "^0.5.9",
     "@vitejs/plugin-vue": "^4.1.0",

src/components/Tiptap/BubbleMenu.vue

@@ -12,14 +12,16 @@ const inputUrl = ref<HTMLInputElement | null>(null)
 
 const openLinkInput = () => {
   showUrlInput.value = true
-  nextTick(() => inputUrl.value?.focus())
+  nextTick(() =>
+    inputUrl.value?.focus(),
+  )
 }
 
 const setLink = () => {
   const previousUrl = editor.getAttributes('link').href
 
   if (previousUrl)
-    placeholder.value = previousUrl
+    inputUrl.value = previousUrl
 
   // cancelled
   if (url.value === null)
@@ -36,8 +38,6 @@ const setLink = () => {
     .extendMarkRange('link')
     .setLink({ href: url.value })
     .run()
-
-  return (showUrlInput.value = false)
 }
 </script>
 
@@ -53,7 +53,11 @@ const setLink = () => {
         :class="{ 'btn-active': editor.isActive('bold') }"
         @click="editor.chain().focus().toggleBold().run()"
       >
-        <span class="i-tabler-bold" />
+        <span
+          :class="[
+            editor.isActive('bold') ? 'i-tabler-bold-off' : 'i-tabler-bold',
+          ]"
+        />
       </button>
       <button
         class="menu-btn"
@@ -74,21 +78,33 @@ const setLink = () => {
         :class="{ 'btn-active': editor.isActive('code') }"
         @click="editor.chain().focus().toggleCode().run()"
       >
-        <span class="i-tabler-code" />
+        <span
+          :class="[
+            editor.isActive('code') ? 'i-tabler-code-off' : 'i-tabler-code',
+          ]"
+        />
       </button>
       <button
         class="menu-btn"
-        :class="{ 'btn-active': editor.isActive('quote') }"
+        :class="{ 'btn-active': editor.isActive('blockquote') }"
         @click="editor.chain().focus().toggleBlockquote().run()"
       >
-        <span class="i-tabler-quote" />
+        <span
+          :class="[
+            editor.isActive('blockquote') ? 'i-tabler-quote-off' : 'i-tabler-quote',
+          ]"
+        />
       </button>
       <button
         :class="{ 'btn-active': editor.isActive('link') }"
         class="menu-btn"
         @click="openLinkInput"
       >
-        <span class="i-tabler-link" />
+        <span
+          :class="[
+            editor.isActive('link') ? 'i-tabler-unlink' : 'i-tabler-link',
+          ]"
+        />
       </button>
     </div>
     <div

src/components/Tiptap/Editor.vue

@@ -6,7 +6,12 @@ import Link from '@tiptap/extension-link'
 import BubbleMenu from './BubbleMenu.vue'
 
 const editor = useEditor({
-  content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
+  content: `<p>
+          Wow, this editor has support for links to the whole <a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>. We tested a lot of URLs and I think you can add *every URL* you want. Isn’t that cool? Let’s try <a href="https://statamic.com/">another one!</a> Yep, seems to work.
+        </p>
+        <p>
+          By default every link will get a <code>rel="noopener noreferrer nofollow"</code> attribute. It’s configurable though.
+        </p>`,
   extensions: [
     StarterKit,
     Typography,

src/style.css

@@ -32,4 +32,8 @@
 
 .input-group{
   @apply h-4;
-}
+}
+
+  a {
+    color: #68CEF8;
+  }