feat: Allow select link selector during text edit (#4505)

## Description

Before, there was no way to select a link inside the text on the canvas
in content mode (it was only possible through the navigation menu).
Now, when the cursor is over a link, it is displayed in the settings
panel.

This does not work with newly created links. Will do in the following
PR.



https://github.com/user-attachments/assets/7472bfd1-3cf7-4ad5-9d39-1bd2effdab26



## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

apps/builder/app/builder/features/workspace/canvas-tools/outline/selected-instance-outline.tsx

@@ -5,13 +5,20 @@ import {
   $selectedInstanceSelector,
 } from "~/shared/nano-states";
 import { $textEditingInstanceSelector } from "~/shared/nano-states";
-import { areInstanceSelectorsEqual } from "~/shared/tree-utils";
+import { type InstanceSelector } from "~/shared/tree-utils";
 import { Outline } from "./outline";
 import { applyScale } from "./apply-scale";
 import { $scale } from "~/builder/shared/nano-states";
 import { findClosestSlot } from "~/shared/instance-utils";
 import { $ephemeralStyles } from "~/canvas/stores";
 
+const isDescendantOrSelf = (
+  descendant: InstanceSelector,
+  self: InstanceSelector
+) => {
+  return descendant.join(",").endsWith(self.join(","));
+};
+
 export const SelectedInstanceOutline = () => {
   const instances = useStore($instances);
   const selectedInstanceSelector = useStore($selectedInstanceSelector);
@@ -20,17 +27,20 @@ export const SelectedInstanceOutline = () => {
   const scale = useStore($scale);
   const ephemeralStyles = useStore($ephemeralStyles);
 
+  if (selectedInstanceSelector === undefined) {
+    return;
+  }
+
   const isEditingCurrentInstance =
     textEditingInstanceSelector !== undefined &&
-    areInstanceSelectorsEqual(
-      textEditingInstanceSelector.selector,
-      selectedInstanceSelector
+    isDescendantOrSelf(
+      selectedInstanceSelector,
+      textEditingInstanceSelector.selector
     );
 
   if (
     isEditingCurrentInstance ||
     outline === undefined ||
-    selectedInstanceSelector === undefined ||
     ephemeralStyles.length !== 0
   ) {
     return;

apps/builder/app/canvas/features/text-editor/text-editor.tsx

@@ -62,6 +62,7 @@ import {
   $hoveredInstanceOutline,
   $hoveredInstanceSelector,
   $registeredComponentMetas,
+  $selectedInstanceSelector,
   $textEditingInstanceSelector,
 } from "~/shared/nano-states";
 import {
@@ -71,6 +72,7 @@ import {
 import deepEqual from "fast-deep-equal";
 import { setDataCollapsed } from "~/canvas/collapsed";
 import { $selectedPage, selectInstance } from "~/shared/awareness";
+import { shallowEqual } from "shallow-equal";
 
 const BindInstanceToNodePlugin = ({
   refs,
@@ -93,7 +95,7 @@ const BindInstanceToNodePlugin = ({
         // @todo: A normal selector must be used, but it would require significantly more code to detect the tree structure.
         element.setAttribute(
           selectorIdAttribute,
-          [idAttribute, ...rootInstanceSelector].join(",")
+          [instanceId, ...rootInstanceSelector].join(",")
         );
       }
     }
@@ -174,6 +176,67 @@ const OnChangeOnBlurPlugin = ({
   return null;
 };
 
+const LinkSelectionPlugin = () => {
+  const [editor] = useLexicalComposerContext();
+  const [preservedSelection] = useState($selectedInstanceSelector.get());
+
+  useEffect(() => {
+    if (!editor.isEditable()) {
+      return;
+    }
+
+    const removeUpdateListener = editor.registerUpdateListener(
+      ({ editorState }) => {
+        editorState.read(() => {
+          const selection = $getSelection();
+          // console.log(selection);
+          if (!$isRangeSelection(selection)) {
+            return false;
+          }
+          const key = selection.anchor.getNode().getKey();
+
+          const elt = editor.getElementByKey(key);
+          const link = elt?.closest(`a[${selectorIdAttribute}]`);
+
+          if (link == null) {
+            if (
+              shallowEqual(preservedSelection, $selectedInstanceSelector.get())
+            ) {
+              return false;
+            }
+
+            selectInstance(preservedSelection);
+
+            return false;
+          }
+
+          const selectorAttribute = link
+            .getAttribute(selectorIdAttribute)
+            ?.split(",");
+
+          if (selectorAttribute === undefined) {
+            return false;
+          }
+
+          if (
+            shallowEqual(selectorAttribute, $selectedInstanceSelector.get())
+          ) {
+            return false;
+          }
+
+          selectInstance(selectorAttribute);
+        });
+      }
+    );
+
+    return () => {
+      removeUpdateListener();
+    };
+  }, [editor, preservedSelection]);
+
+  return null;
+};
+
 const RemoveParagaphsPlugin = () => {
   const [editor] = useLexicalComposerContext();
 
@@ -434,6 +497,7 @@ const InitCursorPlugin = () => {
             }
             const normalizedSelection =
               $normalizeSelection__EXPERIMENTAL(selection);
+
             $setSelection(normalizedSelection);
             return;
           }
@@ -1071,12 +1135,14 @@ export const TextEditor = ({
         placeholder={<></>}
       />
       <LinkPlugin />
+
       <LinkSanitizePlugin />
       <HistoryPlugin />
 
       <SwitchBlockPlugin onNext={handleNext} />
       <OnChangeOnBlurPlugin onChange={handleChange} />
       <InitCursorPlugin />
+      <LinkSelectionPlugin />
       <AnyKeyDownPlugin onKeyDown={handleAnyKeydown} />
       <InitialJSONStatePlugin
         onInitialState={(json) => {