You can implement this if you like

.gitignore

@@ -118,3 +118,5 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+pnpm-lock.yaml

package.json

@@ -1,26 +1,27 @@
 {
   "name": "logseq-copy-url",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A simple plugin that allows you to easily copy the URL of a link, enhancing workflow efficiency.",
   "main": "dist/index.html",
   "targets": {
     "main": false
   },
   "scripts": {
-    "build": "bun run ./build.ts"
+    "dev": "vite build --watch",
+    "build": "vite build"
   },
   "logseq": {
     "id": "logseq-copy-url",
     "title": "Copy URL",
     "icon": "./icon.png"
   },
   "keywords": [],
-  "author": "RubenSmn",
+  "author": "RubenSmn + tejonaco",
   "license": "MIT",
   "dependencies": {
     "@logseq/libs": "^0.0.15"
   },
   "devDependencies": {
-    "bun-plugin-html": "^1.2.0"
+    "vite": "^5.2.12"
   }
 }

src/copyButtons.ts

@@ -4,7 +4,7 @@ import { clipboardIcon, checkIcon } from ".";
 
 export const setCopyButtons = (links: HTMLAnchorElement[]) => {
   links.forEach((link) => {
-    if (link.nextElementSibling?.classList.contains(`${PL.id}-button`)) return;
+    if (link.querySelector(`.${PL.id}-button`) !== null) return
 
     const href = link.getAttribute("href");
 
@@ -18,7 +18,8 @@ export const setCopyButtons = (links: HTMLAnchorElement[]) => {
     // add icon
     button.innerHTML = clipboardIcon;
 
-    button.addEventListener("click", async () => {
+    button.addEventListener("click", async e => {
+      e.preventDefault()
       try {
         await parent.navigator.clipboard.writeText(href);
         button.innerHTML = checkIcon;
@@ -29,7 +30,7 @@ export const setCopyButtons = (links: HTMLAnchorElement[]) => {
     });
 
     // add button
-    link.insertAdjacentElement("afterend", button);
+    link.appendChild(button);
   });
 };
 

src/index.ts

@@ -3,6 +3,7 @@ import { logseq as PL } from "../package.json";
 import { getExternalLinks } from "./utils";
 import { initLinksObserver, runLinksObserver } from "./observer";
 import { removeCopyButtons, setCopyButtons } from "./copyButtons";
+import { globals } from './global'
 
 export const clipboardIcon = `
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
@@ -24,7 +25,12 @@ const main = () => {
         vertical-align: middle;
         cursor: pointer;
         display: inline-flex;
-        margin-left: 0.25rem;
+        margin-left: 0.3rem;
+        width: 1.3em;
+        margin-bottom: 0.15rem;
+      }
+      ${globals.extLinksSelector}:not(:hover) > .logseq-copy-url-button {
+        display: none;
       }
     `,
   });

vite.config.ts

@@ -0,0 +1,13 @@
+import { ConfigEnv, UserConfig, defineConfig } from 'vite'
+
+export default defineConfig((mode: ConfigEnv): UserConfig => {
+  return {
+    root: './src',
+    base: './',
+    build: {
+      target: 'esnext',
+      minify: false,
+      outDir: '../dist'
+    }
+  }
+})