From 92e2537fde1809cc848ac8ffb6d0dc66493eda3f Mon Sep 17 00:00:00 2001
From: Naty S <9094039+eclecticpassions@users.noreply.github.com>
Date: Thu, 30 Apr 2026 05:55:13 +0000
Subject: [PATCH] feat: improve markdown link handling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Improve how Markdown links are handled when the "link" button is pressed by removing the placeholder `https://` inside the `()`. Now when the button is pressed, the cursor jumps to the empty `()` after the `[link text]` and ctrl+v will paste the link in.
- Added new feature: auto paste links and have it be converted to Markdown link syntax automatically without using the link button in the editor toolbar (like in GitHub — https://github.blog/changelog/2022-02-02-paste-links-directly-in-markdown/).
---
 .../frontend/components/textarea/index.js     | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/packages/frontend/components/textarea/index.js b/packages/frontend/components/textarea/index.js
index e82a8e485..ebf7ec16a 100644
--- a/packages/frontend/components/textarea/index.js
+++ b/packages/frontend/components/textarea/index.js
@@ -103,6 +103,49 @@ export const TextareaFieldComponent = class extends HTMLElement {
       unorderedListStyle: "-",
     });
 
+    // Generate Markdown link syntax (without adding `https:`)
+    // Place cursor within empty brackets for easier URL pasting
+    document.addEventListener(
+      "click",
+      function (event) {
+        const linkButton = event.target?.closest(".link");
+        if (linkButton) {
+          event.preventDefault();
+          event.stopPropagation();
+
+          const linkTemplate = `[${editor.codemirror.getSelection()}]()`;
+          editor.codemirror.replaceSelection(linkTemplate);
+          editor.codemirror.focus();
+
+          // Move cursor into the bracket for direct pasting
+          const cursorPosition = editor.codemirror.getCursor();
+          editor.codemirror.setSelection(
+            { line: cursorPosition.line, ch: cursorPosition.ch - 1 },
+            { line: cursorPosition.line, ch: cursorPosition.ch - 1 },
+          );
+        }
+      },
+      { capture: true },
+    );
+
+    // Auto convert clipboard URL to Markdown link syntax when pasting a URL
+    // with a text span highlighted
+    editor.codemirror.on("paste", function (_cm, event) {
+      const selectedText = editor.codemirror.getSelection();
+      if (!selectedText) {
+        return;
+      }
+
+      const pastedText = event.clipboardData?.getData("text/plain") || "";
+      const urlMatch = pastedText.match(/https?:\/\/[^\s]+/);
+
+      if (urlMatch) {
+        event.preventDefault();
+        const link = `[${selectedText}](${urlMatch[0]})`;
+        editor.codemirror.replaceSelection(link);
+      }
+    });
+
     // Restore label behaviour
     /** @type {HTMLTextAreaElement} */
     const $codeMirrorTextarea = this.querySelector(".CodeMirror textarea");