Merge pull request #176 from GeekGene/fix/link-tag-input-render

Fix/link tag input render
GeekGene · Aug 31, 2023 · b23624c · b23624c
2 parents 17e68a7 + ea339d9
commit b23624c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/ui/src/components/CreateMewInput.vue b/ui/src/components/CreateMewInput.vue
@@ -370,12 +370,12 @@ const createLinkTag = (e: Event) => {
   range.insertNode(anchor);
 
   // insert space after html link
-  const spaceNode = document.createTextNode(String.fromCharCode(160));
+  const spaceNode = document.createTextNode("");
   anchor.after(spaceNode);
 
   // reset input
   resetLinkTargetInput();
-  document.getSelection()?.setPosition(spaceNode, 1);
+  document.getSelection()?.setPosition(spaceNode, 0);
 };
 
 /**
@@ -579,12 +579,24 @@ const onCaretPositionChange = () => {
       }
       // current word is a URL
     } else if (isLinkTag(currentWord)) {
+
+      // find start of tag that the caret is positioned at
+      const behind = content.substring(0, selection.anchorOffset - 1);
+      let lastCaretIndex = -1;
+      // find last index of space, which can be " " (32) or "&nbsp;" (160)
+      for (let i = behind.length - 1; i >= 0; i--) {
+        if (behind.charCodeAt(i) === 94) {
+          lastCaretIndex = i;
+          break;
+        }
+      }
+
       showElement(
         selection.anchorNode,
-        startOfWordIndex,
+        lastCaretIndex,
         "#link-target-input-container"
       );
-      currentAnchorOffset = startOfWordIndex;
+      currentAnchorOffset = lastCaretIndex;
       currentFocusOffset = endOfWordIndex;
     } else {
       hideAutocompleter();

diff --git a/ui/src/utils/tags.ts b/ui/src/utils/tags.ts
@@ -1,15 +1,3 @@
-import { ROUTES } from "@/router";
-import {
-  LinkTarget,
-  LinkTargetName,
-  MentionLinkTarget,
-  MewContentPart,
-  MewTagType,
-  UrlLinkTarget,
-} from "@/types/types";
-import { AgentPubKey, encodeHashToBase64 } from "@holochain/client";
-import { RouteLocationRaw } from "vue-router";
-
 export const TAG_SYMBOLS = {
   CASHTAG: "$",
   HASHTAG: "#",
@@ -20,7 +8,7 @@ export const TAG_SYMBOLS = {
 const MENTION_TAG_REGEX_STRING = `\\B\\${TAG_SYMBOLS.MENTION}\\S+`;
 const MENTION_TAG_REGEX = new RegExp(MENTION_TAG_REGEX_STRING, "mi");
 
-const LINK_TAG_REGEX_STRING = `\\B\\${TAG_SYMBOLS.LINK}\\S+`;
+const LINK_TAG_REGEX_STRING = `\\B\\${TAG_SYMBOLS.LINK}\\w+`;
 const LINK_TAG_REGEX = new RegExp(LINK_TAG_REGEX_STRING, "mi");
 
 const CASH_TAG_REGEX_STRING = `\\B\\${TAG_SYMBOLS.CASHTAG}\\w+`;