From de733187e35a7fc297b268977b4370103395c56b Mon Sep 17 00:00:00 2001
From: MykolaGolubyev <golubev.nikolay@gmail.com>
Date: Sun, 16 Nov 2025 09:32:51 -0500
Subject: [PATCH 1/7] in progress

---
 .../text-selection/TextSelectionMenu.tsx      |  10 +
 .../text-selection/selectionUtils.js          | 171 +++++++++++++++++-
 .../textSelectionBuilder.test.js              | 112 ++++++++++++
 3 files changed, 285 insertions(+), 8 deletions(-)

diff --git a/znai-reactjs/src/doc-elements/text-selection/TextSelectionMenu.tsx b/znai-reactjs/src/doc-elements/text-selection/TextSelectionMenu.tsx
index bc89a54ae..6fc1f69b2 100644
--- a/znai-reactjs/src/doc-elements/text-selection/TextSelectionMenu.tsx
+++ b/znai-reactjs/src/doc-elements/text-selection/TextSelectionMenu.tsx
@@ -219,6 +219,16 @@ export function TextSelectionMenu({ containerNode }: { containerNode: HTMLDivEle
       question: comment,
       context: panelData?.context || "",
     });
+
+    // Check if clipboard API is available
+    if (!navigator.clipboard || !navigator.clipboard.writeText) {
+      setNotification({
+        type: "error",
+        message: "Clipboard API not available. Link: " + pageUrl,
+      });
+      return;
+    }
+
     try {
       await navigator.clipboard.writeText(pageUrl);
       setNotification({ type: "success", message: "Link is generated and copied to clipboard" });
diff --git a/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js b/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js
index 36bf1ec42..02c4390b4 100644
--- a/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js
+++ b/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js
@@ -14,23 +14,145 @@
  * limitations under the License.
  */
 
+/**
+ * Normalizes a range boundary point to always be a text node.
+ * When triple-clicking, browsers often create ranges with element nodes as containers.
+ * This function converts such boundaries to text node boundaries.
+ *
+ * @param {Node} node - The container node (text or element)
+ * @param {number} offset - The offset within the container
+ * @param {boolean} isEnd - Whether this is an end boundary (affects navigation for element nodes)
+ * @returns {{node: Node, offset: number}|null} Normalized boundary with text node, or null if no text node found
+ */
+function normalizeRangeBoundary(node, offset, isEnd = false) {
+  // If already a text node, return as-is
+  if (node.nodeType === Node.TEXT_NODE) {
+    console.debug("normalizeRangeBoundary: already text node", { isEnd });
+    return { node, offset };
+  }
+
+  // Element node - the offset refers to child node index
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    console.debug("normalizeRangeBoundary: element node", {
+      nodeName: node.nodeName,
+      offset,
+      isEnd,
+      childNodesLength: node.childNodes.length,
+    });
+
+    // For start boundary at offset 0, get first text node in the element
+    if (offset === 0 && !isEnd) {
+      const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT);
+      const firstTextNode = walker.nextNode();
+      console.debug("normalizeRangeBoundary: start at 0", { found: !!firstTextNode });
+      if (!firstTextNode) {
+        return null;
+      }
+      return { node: firstTextNode, offset: 0 };
+    }
+
+    // For end boundary at childNodes.length, get last text node in the element
+    if (isEnd && offset === node.childNodes.length) {
+      const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT);
+      let lastTextNode = null;
+      while (walker.nextNode()) {
+        lastTextNode = walker.currentNode;
+      }
+      console.debug("normalizeRangeBoundary: end at childNodes.length", { found: !!lastTextNode });
+      if (!lastTextNode) {
+        return null;
+      }
+      return { node: lastTextNode, offset: lastTextNode.nodeValue.length };
+    }
+
+    // For other offsets, the offset refers to a position among direct children
+    // offset N means: for start, before child N; for end, after child N-1
+    let targetChild;
+    if (isEnd) {
+      // For end boundary, we want the last text node before this offset
+      // offset N means after child N-1
+      targetChild = node.childNodes[offset - 1];
+    } else {
+      // For start boundary, we want the first text node at/after this offset
+      // offset N means before child N
+      targetChild = node.childNodes[offset];
+    }
+
+    console.debug("normalizeRangeBoundary: other offset", {
+      targetChild: targetChild?.nodeName,
+      targetChildType: targetChild?.nodeType,
+    });
+
+    if (!targetChild) {
+      console.debug("normalizeRangeBoundary: no target child found");
+      return null;
+    }
+
+    // If the target child is already a text node, use it directly
+    if (targetChild.nodeType === Node.TEXT_NODE) {
+      console.debug("normalizeRangeBoundary: target child is text node");
+      if (isEnd) {
+        return { node: targetChild, offset: targetChild.nodeValue.length };
+      } else {
+        return { node: targetChild, offset: 0 };
+      }
+    }
+
+    // Otherwise, find the appropriate text node within this child element
+    const walker = document.createTreeWalker(targetChild, NodeFilter.SHOW_TEXT);
+
+    if (isEnd) {
+      // Get last text node in this child
+      let lastTextNode = null;
+      while (walker.nextNode()) {
+        lastTextNode = walker.currentNode;
+      }
+      console.debug("normalizeRangeBoundary: found last text in child", { found: !!lastTextNode });
+      if (!lastTextNode) {
+        return null;
+      }
+      return { node: lastTextNode, offset: lastTextNode.nodeValue.length };
+    } else {
+      // Get first text node in this child
+      const firstTextNode = walker.nextNode();
+      console.debug("normalizeRangeBoundary: found first text in child", { found: !!firstTextNode });
+      if (!firstTextNode) {
+        return null;
+      }
+      return { node: firstTextNode, offset: 0 };
+    }
+  }
+
+  // For other node types, return null (can't normalize)
+  console.debug("normalizeRangeBoundary: unknown node type", { nodeType: node.nodeType });
+  return null;
+}
+
 export function getSelectionText(range) {
+  const start = normalizeRangeBoundary(range.startContainer, range.startOffset, false);
+  const end = normalizeRangeBoundary(range.endContainer, range.endOffset, true);
+
+  // If we can't normalize the boundaries, fall back to empty string
+  if (!start || !end) {
+    return "";
+  }
+
   const walker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_TEXT);
 
-  walker.currentNode = range.startContainer;
+  walker.currentNode = start.node;
 
   let text = "";
 
-  if (range.startContainer === range.endContainer) {
-    return range.startContainer.nodeValue.substring(range.startOffset, range.endOffset);
+  if (start.node === end.node) {
+    return start.node.nodeValue.substring(start.offset, end.offset);
   }
 
-  text += range.startContainer.nodeValue.substring(range.startOffset);
+  text += start.node.nodeValue.substring(start.offset);
 
   while (walker.nextNode()) {
     const node = walker.currentNode;
-    if (node === range.endContainer) {
-      text += node.nodeValue.substring(0, range.endOffset);
+    if (node === end.node) {
+      text += node.nodeValue.substring(0, end.offset);
       break;
     }
     text += node.nodeValue;
@@ -150,9 +272,42 @@ export function createSelectionExpander(container) {
 
   const range = selection.getRangeAt(0);
 
+  // Normalize range boundaries to handle triple-click selections with element nodes
+  let start = normalizeRangeBoundary(range.startContainer, range.startOffset, false);
+  let end = normalizeRangeBoundary(range.endContainer, range.endOffset, true);
+
+  // Fallback: if normalization fails but the original boundaries are text nodes, use them directly
+  if (!start && range.startContainer.nodeType === Node.TEXT_NODE) {
+    console.warn("Normalization failed but startContainer is text node, using original");
+    start = { node: range.startContainer, offset: range.startOffset };
+  }
+  if (!end && range.endContainer.nodeType === Node.TEXT_NODE) {
+    console.warn("Normalization failed but endContainer is text node, using original");
+    end = { node: range.endContainer, offset: range.endOffset };
+  }
+
+  // If we still can't get valid boundaries, return empty result
+  if (!start || !end) {
+    console.warn("Failed to normalize range boundaries", {
+      startContainer: range.startContainer,
+      startOffset: range.startOffset,
+      endContainer: range.endContainer,
+      endOffset: range.endOffset,
+      startNormalized: start,
+      endNormalized: end,
+    });
+    return function () {
+      return {
+        prefix: "",
+        selection: "",
+        suffix: "",
+      };
+    };
+  }
+
   const selectionText = getSelectionText(range);
-  const prefixExpander = new TextExpander(range.startContainer, range.startOffset, false, container);
-  const suffixExpander = new TextExpander(range.endContainer, range.endOffset, true, container);
+  const prefixExpander = new TextExpander(start.node, start.offset, false, container);
+  const suffixExpander = new TextExpander(end.node, end.offset, true, container);
 
   return function () {
     prefixExpander.expand(10);
diff --git a/znai-reactjs/src/doc-elements/text-selection/textSelectionBuilder.test.js b/znai-reactjs/src/doc-elements/text-selection/textSelectionBuilder.test.js
index 92304b7b7..b3689e3f6 100644
--- a/znai-reactjs/src/doc-elements/text-selection/textSelectionBuilder.test.js
+++ b/znai-reactjs/src/doc-elements/text-selection/textSelectionBuilder.test.js
@@ -128,5 +128,117 @@ describe("textSelectionBuilder", () => {
       expect(result.prefix).toBe("          ");
       expect(result.suffix).toBe(", b) {\n   ");
     });
+
+    it("should handle triple-click selection with element node boundaries", () => {
+      const { container } = setupDOM(`
+        <div>
+          <p>First paragraph with some text.</p>
+          <p id="target">Second paragraph to triple click.</p>
+          <p>Third paragraph with more text.</p>
+        </div>
+      `);
+
+      const targetP = document.getElementById("target");
+
+      // Triple-click typically selects with element node as container
+      // startContainer = <p> element, startOffset = 0 (before first child)
+      // endContainer = <p> element, endOffset = childNodes.length (after last child)
+      selectText(targetP, 0, targetP, targetP.childNodes.length);
+
+      const result = findPrefixSuffixAndMatch(container);
+
+      expect(result.selection).toBe("Second paragraph to triple click.");
+      expect(result.prefix.length).toBeGreaterThan(0);
+      expect(result.suffix.length).toBeGreaterThan(0);
+    });
+
+    it("should handle triple-click with parent container selecting single child", () => {
+      const { container } = setupDOM(`
+        <div id="parent">
+          <ul>
+            <li>First bullet point item.</li>
+            <li id="target-li">Second bullet point item.</li>
+            <li>Third bullet point item.</li>
+          </ul>
+          <p>Following paragraph that should not be included.</p>
+        </div>
+      `);
+
+      const parent = document.getElementById("parent");
+      const ul = parent.querySelector("ul");
+      const targetLi = document.getElementById("target-li");
+
+      // Find the actual child index of the target <li> in the <ul>
+      // (accounting for whitespace text nodes between elements)
+      const childIndex = Array.from(ul.childNodes).indexOf(targetLi);
+
+      // Triple-click on second <li> might create selection with <ul> as container
+      // startContainer = <ul>, startOffset = childIndex (before target child)
+      // endContainer = <ul>, endOffset = childIndex + 1 (after target child)
+      selectText(ul, childIndex, ul, childIndex + 1);
+
+      const result = findPrefixSuffixAndMatch(container);
+
+      expect(result.selection).toBe("Second bullet point item.");
+      // Should NOT include "Following paragraph"
+      expect(result.selection).not.toContain("Following paragraph");
+    });
+
+    it("should handle triple-click on the last bullet point", () => {
+      const { container } = setupDOM(`
+        <div id="parent">
+          <ul>
+            <li>First bullet point item.</li>
+            <li>Second bullet point item.</li>
+            <li id="last-li">Third bullet point item.</li>
+          </ul>
+        </div>
+      `);
+
+      const parent = document.getElementById("parent");
+      const ul = parent.querySelector("ul");
+      const lastLi = document.getElementById("last-li");
+
+      // Find the actual child index of the last <li> in the <ul>
+      const childIndex = Array.from(ul.childNodes).indexOf(lastLi);
+
+      // Triple-click on last <li> creates selection with <ul> as container
+      selectText(ul, childIndex, ul, childIndex + 1);
+
+      const result = findPrefixSuffixAndMatch(container);
+
+      expect(result.selection).toBe("Third bullet point item.");
+      expect(result.prefix.length).toBeGreaterThan(0);
+      // Suffix may include trailing whitespace, which is fine
+    });
+
+    it("should handle triple-click where end boundary is outside the list", () => {
+      const { container } = setupDOM(`
+        <div id="parent">
+          <ul id="list">
+            <li>First bullet point item.</li>
+            <li>Second bullet point item.</li>
+            <li id="last-li">Third bullet point item.</li>
+          </ul>
+        </div>
+      `);
+
+      const parent = document.getElementById("parent");
+      const ul = document.getElementById("list");
+      const lastLi = document.getElementById("last-li");
+
+      // Some browsers might create selection where:
+      // startContainer = <li>, startOffset = 0
+      // endContainer = parent div, endOffset = 2 (after <ul>)
+      const ulChildIndex = Array.from(parent.childNodes).indexOf(ul);
+
+      selectText(lastLi, 0, parent, ulChildIndex + 1);
+
+      const result = findPrefixSuffixAndMatch(container);
+
+      // Selection may include trailing whitespace from the DOM
+      expect(result.selection.trim()).toBe("Third bullet point item.");
+      expect(result.prefix.length).toBeGreaterThan(0);
+    });
   });
 });

From 8945d9d699afe9a198f127215c308400d3fee435 Mon Sep 17 00:00:00 2001
From: MykolaGolubyev <golubev.nikolay@gmail.com>
Date: Sun, 16 Nov 2025 12:25:02 -0500
Subject: [PATCH 2/7] in progress

---
 .../text-selection/selectionUtils.js          | 208 ++++----
 .../textSelectionBuilder.test.js              | 450 +++++++++---------
 2 files changed, 344 insertions(+), 314 deletions(-)

diff --git a/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js b/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js
index 02c4390b4..f1eddfb33 100644
--- a/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js
+++ b/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js
@@ -14,6 +14,84 @@
  * limitations under the License.
  */
 
+/**
+ * Finds the first or last text node within a given node.
+ */
+function findTextNode(node, findLast = false) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node;
+  }
+
+  const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT);
+
+  if (findLast) {
+    let lastTextNode = null;
+    while (walker.nextNode()) {
+      lastTextNode = walker.currentNode;
+    }
+    return lastTextNode;
+  }
+
+  return walker.nextNode();
+}
+
+/**
+ * Finds a text node before the given node by searching siblings and ancestors.
+ */
+function findPrecedingTextNode(node) {
+  // Search previous siblings
+  let sibling = node.previousSibling;
+  while (sibling) {
+    const textNode = findTextNode(sibling, true);
+    if (textNode) {
+      return textNode;
+    }
+    sibling = sibling.previousSibling;
+  }
+
+  // Search parent's previous siblings
+  if (node.parentNode) {
+    let parentSibling = node.parentNode.previousSibling;
+    while (parentSibling) {
+      const textNode = findTextNode(parentSibling, true);
+      if (textNode) {
+        return textNode;
+      }
+      parentSibling = parentSibling.previousSibling;
+    }
+  }
+
+  // Last resort: search all preceding nodes in ancestor
+  let ancestor = node.parentNode;
+  while (ancestor) {
+    const walker = document.createTreeWalker(
+      ancestor,
+      NodeFilter.SHOW_TEXT,
+      {
+        acceptNode: (textNode) => {
+          const position = node.compareDocumentPosition(textNode);
+          return position & Node.DOCUMENT_POSITION_PRECEDING
+            ? NodeFilter.FILTER_ACCEPT
+            : NodeFilter.FILTER_SKIP;
+        },
+      }
+    );
+
+    let lastTextNode = null;
+    while (walker.nextNode()) {
+      lastTextNode = walker.currentNode;
+    }
+
+    if (lastTextNode) {
+      return lastTextNode;
+    }
+
+    ancestor = ancestor.parentNode;
+  }
+
+  return null;
+}
+
 /**
  * Normalizes a range boundary point to always be a text node.
  * When triple-clicking, browsers often create ranges with element nodes as containers.
@@ -25,107 +103,49 @@
  * @returns {{node: Node, offset: number}|null} Normalized boundary with text node, or null if no text node found
  */
 function normalizeRangeBoundary(node, offset, isEnd = false) {
-  // If already a text node, return as-is
+  // Already a text node - return as-is
   if (node.nodeType === Node.TEXT_NODE) {
-    console.debug("normalizeRangeBoundary: already text node", { isEnd });
     return { node, offset };
   }
 
-  // Element node - the offset refers to child node index
-  if (node.nodeType === Node.ELEMENT_NODE) {
-    console.debug("normalizeRangeBoundary: element node", {
-      nodeName: node.nodeName,
-      offset,
-      isEnd,
-      childNodesLength: node.childNodes.length,
-    });
-
-    // For start boundary at offset 0, get first text node in the element
-    if (offset === 0 && !isEnd) {
-      const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT);
-      const firstTextNode = walker.nextNode();
-      console.debug("normalizeRangeBoundary: start at 0", { found: !!firstTextNode });
-      if (!firstTextNode) {
-        return null;
-      }
-      return { node: firstTextNode, offset: 0 };
-    }
-
-    // For end boundary at childNodes.length, get last text node in the element
-    if (isEnd && offset === node.childNodes.length) {
-      const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT);
-      let lastTextNode = null;
-      while (walker.nextNode()) {
-        lastTextNode = walker.currentNode;
-      }
-      console.debug("normalizeRangeBoundary: end at childNodes.length", { found: !!lastTextNode });
-      if (!lastTextNode) {
-        return null;
-      }
-      return { node: lastTextNode, offset: lastTextNode.nodeValue.length };
-    }
-
-    // For other offsets, the offset refers to a position among direct children
-    // offset N means: for start, before child N; for end, after child N-1
-    let targetChild;
-    if (isEnd) {
-      // For end boundary, we want the last text node before this offset
-      // offset N means after child N-1
-      targetChild = node.childNodes[offset - 1];
-    } else {
-      // For start boundary, we want the first text node at/after this offset
-      // offset N means before child N
-      targetChild = node.childNodes[offset];
-    }
+  // Not an element node - can't normalize
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return null;
+  }
 
-    console.debug("normalizeRangeBoundary: other offset", {
-      targetChild: targetChild?.nodeName,
-      targetChildType: targetChild?.nodeType,
-    });
+  // Special case: end boundary at offset 0 means selection ends before this element
+  if (isEnd && offset === 0) {
+    const textNode = findPrecedingTextNode(node);
+    return textNode ? { node: textNode, offset: textNode.nodeValue.length } : null;
+  }
 
-    if (!targetChild) {
-      console.debug("normalizeRangeBoundary: no target child found");
+  // Boundary at element's edge (start at 0, end at childNodes.length)
+  if (offset === 0 || offset === node.childNodes.length) {
+    const findLast = isEnd && offset === node.childNodes.length;
+    const textNode = findTextNode(node, findLast);
+    if (!textNode) {
       return null;
     }
+    return { node: textNode, offset: findLast ? textNode.nodeValue.length : 0 };
+  }
 
-    // If the target child is already a text node, use it directly
-    if (targetChild.nodeType === Node.TEXT_NODE) {
-      console.debug("normalizeRangeBoundary: target child is text node");
-      if (isEnd) {
-        return { node: targetChild, offset: targetChild.nodeValue.length };
-      } else {
-        return { node: targetChild, offset: 0 };
-      }
-    }
-
-    // Otherwise, find the appropriate text node within this child element
-    const walker = document.createTreeWalker(targetChild, NodeFilter.SHOW_TEXT);
+  // Boundary points to a specific child
+  const targetChild = isEnd ? node.childNodes[offset - 1] : node.childNodes[offset];
+  if (!targetChild) {
+    return null;
+  }
 
-    if (isEnd) {
-      // Get last text node in this child
-      let lastTextNode = null;
-      while (walker.nextNode()) {
-        lastTextNode = walker.currentNode;
-      }
-      console.debug("normalizeRangeBoundary: found last text in child", { found: !!lastTextNode });
-      if (!lastTextNode) {
-        return null;
-      }
-      return { node: lastTextNode, offset: lastTextNode.nodeValue.length };
-    } else {
-      // Get first text node in this child
-      const firstTextNode = walker.nextNode();
-      console.debug("normalizeRangeBoundary: found first text in child", { found: !!firstTextNode });
-      if (!firstTextNode) {
-        return null;
-      }
-      return { node: firstTextNode, offset: 0 };
-    }
+  // Child is a text node - use it directly
+  if (targetChild.nodeType === Node.TEXT_NODE) {
+    return { node: targetChild, offset: isEnd ? targetChild.nodeValue.length : 0 };
   }
 
-  // For other node types, return null (can't normalize)
-  console.debug("normalizeRangeBoundary: unknown node type", { nodeType: node.nodeType });
-  return null;
+  // Child is an element - find text node within it
+  const textNode = findTextNode(targetChild, isEnd);
+  if (!textNode) {
+    return null;
+  }
+  return { node: textNode, offset: isEnd ? textNode.nodeValue.length : 0 };
 }
 
 export function getSelectionText(range) {
@@ -278,24 +298,14 @@ export function createSelectionExpander(container) {
 
   // Fallback: if normalization fails but the original boundaries are text nodes, use them directly
   if (!start && range.startContainer.nodeType === Node.TEXT_NODE) {
-    console.warn("Normalization failed but startContainer is text node, using original");
     start = { node: range.startContainer, offset: range.startOffset };
   }
   if (!end && range.endContainer.nodeType === Node.TEXT_NODE) {
-    console.warn("Normalization failed but endContainer is text node, using original");
     end = { node: range.endContainer, offset: range.endOffset };
   }
 
   // If we still can't get valid boundaries, return empty result
   if (!start || !end) {
-    console.warn("Failed to normalize range boundaries", {
-      startContainer: range.startContainer,
-      startOffset: range.startOffset,
-      endContainer: range.endContainer,
-      endOffset: range.endOffset,
-      startNormalized: start,
-      endNormalized: end,
-    });
     return function () {
       return {
         prefix: "",
diff --git a/znai-reactjs/src/doc-elements/text-selection/textSelectionBuilder.test.js b/znai-reactjs/src/doc-elements/text-selection/textSelectionBuilder.test.js
index b3689e3f6..19f48bf6b 100644
--- a/znai-reactjs/src/doc-elements/text-selection/textSelectionBuilder.test.js
+++ b/znai-reactjs/src/doc-elements/text-selection/textSelectionBuilder.test.js
@@ -20,225 +20,245 @@ import { selectText, setupDOM } from "./selectionTestUtils.js";
 
 describe("textSelectionBuilder", () => {
   describe("findPrefixSuffixAndMatch", () => {
-    it("should handle unique text with minimal context when multiple entries are present", () => {
-      const { container } = setupDOM(`
-        <div>
-          <p>This is a sample text with multiple words.</p>
-          <p>This text contains repeated phrases.</p>
-          <p id="content">The sample text is useful for testing.</p>
-        </div>
-      `);
-
-      const lastP = document.getElementById("content");
-      const textNode = lastP.firstChild;
-
-      selectText(textNode, 4, textNode, 10);
-
-      const result = findPrefixSuffixAndMatch(container);
-
-      expect(result.selection).toBe("sample");
-      expect(result.prefix).toBe("      The ");
-      expect(result.suffix).toBe(" text is u");
+    describe("basic text node selections", () => {
+      it("should handle unique text with minimal context when multiple entries are present", () => {
+        const { container } = setupDOM(`
+          <div>
+            <p>This is a sample text with multiple words.</p>
+            <p>This text contains repeated phrases.</p>
+            <p id="content">The sample text is useful for testing.</p>
+          </div>
+        `);
+
+        const textNode = document.getElementById("content").firstChild;
+        selectText(textNode, 4, textNode, 10);
+
+        const result = findPrefixSuffixAndMatch(container);
+
+        expect(result.selection).toBe("sample");
+        expect(result.prefix).toBe("      The ");
+        expect(result.suffix).toBe(" text is u");
+      });
+
+      it("should handle selection across multiple nodes", () => {
+        const { container } = setupDOM(`
+          <div>
+            <p>This is a sample text with multiple words.</p>
+            <p>This text contains repeated phrases.</p>
+            <p>The sample text is useful for testing.</p>
+          </div>
+        `);
+
+        const paragraphs = container.querySelectorAll("p");
+        selectText(paragraphs[0].firstChild, 37, paragraphs[1].firstChild, 4);
+
+        const result = findPrefixSuffixAndMatch(container);
+
+        expect(result.selection).toBe("ords.\n            This");
+        expect(result.prefix).toBe("multiple w");
+        expect(result.suffix).toBe(" text cont");
+      });
+
+      it("should handle selection at the beginning of container", () => {
+        const { container } = setupDOM(`
+          <div id="boundary"><p>This is a sample text with multiple words.</p>
+            <p>This text contains repeated phrases.</p>
+            <p>The sample text is useful for testing.</p></div>
+        `);
+
+        const boundaryContainer = document.getElementById("boundary");
+        const textNode = container.querySelector("p").firstChild;
+        selectText(textNode, 0, textNode, 7);
+
+        const result = findPrefixSuffixAndMatch(boundaryContainer);
+
+        expect(result.selection).toBe("This is");
+        expect(result.prefix).toBe("");
+        expect(result.suffix).toBe(" a sample ");
+      });
+
+      it("should handle selection at the end of container", () => {
+        const { container } = setupDOM(`
+          <div id="boundary">
+            <p>This is a sample text with multiple words.</p>
+            <p>This text contains repeated phrases.</p>
+            <p>The sample text is useful for testing.</p></div>
+        `);
+
+        const boundaryContainer = document.getElementById("boundary");
+        const textNode = container.querySelectorAll("p")[2].firstChild;
+        const text = textNode.textContent;
+        selectText(textNode, text.length - 8, textNode, text.length);
+
+        const result = findPrefixSuffixAndMatch(boundaryContainer);
+
+        expect(result.selection).toBe("testing.");
+        expect(result.prefix).toBe("seful for ");
+        expect(result.suffix).toBe("");
+      });
+
+      it("should handle selection across code snippet span elements", () => {
+        const { container } = setupDOM(`
+          <div>
+            <pre><code>
+              <span class="keyword">function</span> <span class="function-name">calculateSum</span>(<span class="parameter">a</span>, <span class="parameter">b</span>) {
+                <span class="keyword">return</span> <span class="variable">a</span> + <span class="variable">b</span>;
+              }
+              <span class="keyword">const</span> <span class="variable">result</span> = <span class="function-name">calculateSum</span>(<span class="number">5</span>, <span class="number">3</span>);
+            </code></pre>
+          </div>
+        `);
+
+        const functionSpan = container.querySelector(".keyword");
+        const parameterSpan = container.querySelector(".parameter");
+        selectText(functionSpan.firstChild, 0, parameterSpan.firstChild, 1);
+
+        const result = findPrefixSuffixAndMatch(container);
+
+        expect(result.selection).toBe("function calculateSum(a");
+        expect(result.prefix).toBe("          ");
+        expect(result.suffix).toBe(", b) {\n   ");
+      });
     });
 
-    it("should handle selection across multiple nodes", () => {
-      const { container } = setupDOM(`
-        <div>
-          <p>This is a sample text with multiple words.</p>
-          <p>This text contains repeated phrases.</p>
-          <p>The sample text is useful for testing.</p>
-        </div>
-      `);
-
-      const paragraphs = container.querySelectorAll("p");
-      const firstTextNode = paragraphs[0].firstChild;
-      const secondTextNode = paragraphs[1].firstChild;
-
-      selectText(firstTextNode, 37, secondTextNode, 4);
-
-      const result = findPrefixSuffixAndMatch(container);
-
-      expect(result.selection).toBe("ords.\n          This");
-      expect(result.prefix).toBe("multiple w");
-      expect(result.suffix).toBe(" text cont");
-    });
-
-    it("should handle selection at the beginning of container", () => {
-      const { container } = setupDOM(`
-        <div id="boundary"><p>This is a sample text with multiple words.</p>
-          <p>This text contains repeated phrases.</p>
-          <p>The sample text is useful for testing.</p></div>
-      `);
-
-      const boundaryContainer = document.getElementById("boundary");
-      const firstP = container.querySelector("p");
-      const textNode = firstP.firstChild;
-
-      selectText(textNode, 0, textNode, 7);
-
-      const result = findPrefixSuffixAndMatch(boundaryContainer);
-
-      expect(result.selection).toBe("This is");
-      expect(result.prefix).toBe("");
-      expect(result.suffix).toBe(" a sample ");
-    });
-
-    it("should handle selection at the end of container", () => {
-      const { container } = setupDOM(`
-        <div id="boundary">
-          <p>This is a sample text with multiple words.</p>
-          <p>This text contains repeated phrases.</p>
-          <p>The sample text is useful for testing.</p></div>
-      `);
-
-      const boundaryContainer = document.getElementById("boundary");
-      const lastP = container.querySelectorAll("p")[2];
-      const textNode = lastP.firstChild;
-      const text = textNode.textContent;
-
-      selectText(textNode, text.length - 8, textNode, text.length);
-
-      const result = findPrefixSuffixAndMatch(boundaryContainer);
-
-      expect(result.selection).toBe("testing.");
-      expect(result.prefix).toBe("seful for ");
-      expect(result.suffix).toBe("");
-    });
-
-    it("should handle selection across code snippet span elements", () => {
-      const { container } = setupDOM(`
-        <div>
-          <pre><code>
-            <span class="keyword">function</span> <span class="function-name">calculateSum</span>(<span class="parameter">a</span>, <span class="parameter">b</span>) {
-              <span class="keyword">return</span> <span class="variable">a</span> + <span class="variable">b</span>;
-            }
-            <span class="keyword">const</span> <span class="variable">result</span> = <span class="function-name">calculateSum</span>(<span class="number">5</span>, <span class="number">3</span>);
-          </code></pre>
-        </div>
-      `);
-
-      const functionSpan = container.querySelector(".keyword");
-      const parameterSpan = container.querySelector(".parameter");
-
-      selectText(functionSpan.firstChild, 0, parameterSpan.firstChild, 1);
-
-      const result = findPrefixSuffixAndMatch(container);
-
-      expect(result.selection).toBe("function calculateSum(a");
-      expect(result.prefix).toBe("          ");
-      expect(result.suffix).toBe(", b) {\n   ");
-    });
-
-    it("should handle triple-click selection with element node boundaries", () => {
-      const { container } = setupDOM(`
-        <div>
-          <p>First paragraph with some text.</p>
-          <p id="target">Second paragraph to triple click.</p>
-          <p>Third paragraph with more text.</p>
-        </div>
-      `);
-
-      const targetP = document.getElementById("target");
-
-      // Triple-click typically selects with element node as container
-      // startContainer = <p> element, startOffset = 0 (before first child)
-      // endContainer = <p> element, endOffset = childNodes.length (after last child)
-      selectText(targetP, 0, targetP, targetP.childNodes.length);
-
-      const result = findPrefixSuffixAndMatch(container);
-
-      expect(result.selection).toBe("Second paragraph to triple click.");
-      expect(result.prefix.length).toBeGreaterThan(0);
-      expect(result.suffix.length).toBeGreaterThan(0);
-    });
-
-    it("should handle triple-click with parent container selecting single child", () => {
-      const { container } = setupDOM(`
-        <div id="parent">
-          <ul>
-            <li>First bullet point item.</li>
-            <li id="target-li">Second bullet point item.</li>
-            <li>Third bullet point item.</li>
-          </ul>
-          <p>Following paragraph that should not be included.</p>
-        </div>
-      `);
-
-      const parent = document.getElementById("parent");
-      const ul = parent.querySelector("ul");
-      const targetLi = document.getElementById("target-li");
-
-      // Find the actual child index of the target <li> in the <ul>
-      // (accounting for whitespace text nodes between elements)
-      const childIndex = Array.from(ul.childNodes).indexOf(targetLi);
-
-      // Triple-click on second <li> might create selection with <ul> as container
-      // startContainer = <ul>, startOffset = childIndex (before target child)
-      // endContainer = <ul>, endOffset = childIndex + 1 (after target child)
-      selectText(ul, childIndex, ul, childIndex + 1);
-
-      const result = findPrefixSuffixAndMatch(container);
-
-      expect(result.selection).toBe("Second bullet point item.");
-      // Should NOT include "Following paragraph"
-      expect(result.selection).not.toContain("Following paragraph");
-    });
-
-    it("should handle triple-click on the last bullet point", () => {
-      const { container } = setupDOM(`
-        <div id="parent">
-          <ul>
-            <li>First bullet point item.</li>
-            <li>Second bullet point item.</li>
-            <li id="last-li">Third bullet point item.</li>
-          </ul>
-        </div>
-      `);
-
-      const parent = document.getElementById("parent");
-      const ul = parent.querySelector("ul");
-      const lastLi = document.getElementById("last-li");
-
-      // Find the actual child index of the last <li> in the <ul>
-      const childIndex = Array.from(ul.childNodes).indexOf(lastLi);
-
-      // Triple-click on last <li> creates selection with <ul> as container
-      selectText(ul, childIndex, ul, childIndex + 1);
-
-      const result = findPrefixSuffixAndMatch(container);
-
-      expect(result.selection).toBe("Third bullet point item.");
-      expect(result.prefix.length).toBeGreaterThan(0);
-      // Suffix may include trailing whitespace, which is fine
+    describe("triple-click selections with element node boundaries", () => {
+      it("should handle triple-click on middle paragraph", () => {
+        const { container } = setupDOM(`
+          <div>
+            <p>First paragraph with some text.</p>
+            <p id="target">Second paragraph to triple click.</p>
+            <p>Third paragraph with more text.</p>
+          </div>
+        `);
+
+        const targetP = document.getElementById("target");
+        selectText(targetP, 0, targetP, targetP.childNodes.length);
+
+        const result = findPrefixSuffixAndMatch(container);
+
+        expect(result.selection).toBe("Second paragraph to triple click.");
+        expect(result.prefix.length).toBeGreaterThan(0);
+        expect(result.suffix.length).toBeGreaterThan(0);
+      });
+
+      const bulletTestCases = [
+        { position: "first", id: "first-li", text: "First bullet point item.", expectPrefix: false },
+        { position: "second", id: "second-li", text: "Second bullet point item.", expectPrefix: true },
+        { position: "last", id: "last-li", text: "Third bullet point item.", expectPrefix: true },
+      ];
+
+      bulletTestCases.forEach(({ position, id, text, expectPrefix }) => {
+        it(`should handle triple-click on ${position} bullet point`, () => {
+          const { container } = setupDOM(`
+            <div>
+              <ul id="list">
+                <li id="first-li">First bullet point item.</li>
+                <li id="second-li">Second bullet point item.</li>
+                <li id="last-li">Third bullet point item.</li>
+              </ul>
+            </div>
+          `);
+
+          const ul = document.getElementById("list");
+          const targetLi = document.getElementById(id);
+          const childIndex = Array.from(ul.childNodes).indexOf(targetLi);
+          selectText(ul, childIndex, ul, childIndex + 1);
+
+          const result = findPrefixSuffixAndMatch(container);
+
+          expect(result.selection).toBe(text);
+          if (expectPrefix) {
+            expect(result.prefix.length).toBeGreaterThan(0);
+          }
+          expect(result.suffix.length).toBeGreaterThan(0);
+        });
+      });
+
+      it("should not include following paragraphs when selecting a bullet point", () => {
+        const { container } = setupDOM(`
+          <div>
+            <ul>
+              <li>First bullet point item.</li>
+              <li id="target-li">Second bullet point item.</li>
+              <li>Third bullet point item.</li>
+            </ul>
+            <p>Following paragraph that should not be included.</p>
+          </div>
+        `);
+
+        const ul = container.querySelector("ul");
+        const targetLi = document.getElementById("target-li");
+        const childIndex = Array.from(ul.childNodes).indexOf(targetLi);
+        selectText(ul, childIndex, ul, childIndex + 1);
+
+        const result = findPrefixSuffixAndMatch(container);
+
+        expect(result.selection).toBe("Second bullet point item.");
+        expect(result.selection).not.toContain("Following paragraph");
+      });
     });
 
-    it("should handle triple-click where end boundary is outside the list", () => {
-      const { container } = setupDOM(`
-        <div id="parent">
-          <ul id="list">
-            <li>First bullet point item.</li>
-            <li>Second bullet point item.</li>
-            <li id="last-li">Third bullet point item.</li>
-          </ul>
-        </div>
-      `);
-
-      const parent = document.getElementById("parent");
-      const ul = document.getElementById("list");
-      const lastLi = document.getElementById("last-li");
-
-      // Some browsers might create selection where:
-      // startContainer = <li>, startOffset = 0
-      // endContainer = parent div, endOffset = 2 (after <ul>)
-      const ulChildIndex = Array.from(parent.childNodes).indexOf(ul);
-
-      selectText(lastLi, 0, parent, ulChildIndex + 1);
-
-      const result = findPrefixSuffixAndMatch(container);
-
-      // Selection may include trailing whitespace from the DOM
-      expect(result.selection.trim()).toBe("Third bullet point item.");
-      expect(result.prefix.length).toBeGreaterThan(0);
+    describe("edge cases with complex boundary scenarios", () => {
+      it("should handle end boundary outside the list", () => {
+        const { container } = setupDOM(`
+          <div id="parent">
+            <ul id="list">
+              <li>First bullet point item.</li>
+              <li>Second bullet point item.</li>
+              <li id="last-li">Third bullet point item.</li>
+            </ul>
+          </div>
+        `);
+
+        const parent = document.getElementById("parent");
+        const ul = document.getElementById("list");
+        const lastLi = document.getElementById("last-li");
+        const ulChildIndex = Array.from(parent.childNodes).indexOf(ul);
+        selectText(lastLi, 0, parent, ulChildIndex + 1);
+
+        const result = findPrefixSuffixAndMatch(container);
+
+        expect(result.selection.trim()).toBe("Third bullet point item.");
+        expect(result.prefix.length).toBeGreaterThan(0);
+      });
+
+      it("should handle end boundary at offset 0 of next element", () => {
+        const { container } = setupDOM(`
+          <div>
+            <ul id="list">
+              <li id="last-li">Last bullet point item.</li>
+            </ul>
+            <div id="next-block" class="paragraph content-block">Next paragraph.</div>
+          </div>
+        `);
+
+        const lastLi = document.getElementById("last-li");
+        const nextBlock = document.getElementById("next-block");
+        selectText(lastLi.firstChild, 0, nextBlock, 0);
+
+        const result = findPrefixSuffixAndMatch(container);
+
+        expect(result.selection.trim()).toBe("Last bullet point item.");
+        expect(result.suffix.length).toBeGreaterThan(0);
+      });
+
+      it("should handle triple-click on paragraph where end is next paragraph at offset 0", () => {
+        const { container } = setupDOM(`
+          <div>
+            <div class="paragraph content-block" id="first-para">First paragraph of text.</div>
+            <div class="paragraph content-block" id="second-para">Second paragraph of text.</div>
+          </div>
+        `);
+
+        const firstPara = document.getElementById("first-para");
+        const secondPara = document.getElementById("second-para");
+        selectText(firstPara.firstChild, 0, secondPara, 0);
+
+        const result = findPrefixSuffixAndMatch(container);
+
+        expect(result.selection.trim()).toBe("First paragraph of text.");
+        expect(result.suffix.length).toBeGreaterThan(0);
+      });
     });
   });
 });

From 07ce12c0a0dc08e04b2138b1a3e4e3e15c905645 Mon Sep 17 00:00:00 2001
From: MykolaGolubyev <golubev.nikolay@gmail.com>
Date: Sun, 16 Nov 2025 13:55:05 -0500
Subject: [PATCH 3/7] in progress

---
 .../text-selection/selectionUtils.js          | 180 ++++++++----------
 1 file changed, 79 insertions(+), 101 deletions(-)

diff --git a/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js b/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js
index f1eddfb33..27cb0adb1 100644
--- a/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js
+++ b/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js
@@ -15,137 +15,115 @@
  */
 
 /**
- * Finds the first or last text node within a given node.
+ * Normalizes element node boundaries to text nodes.
+ * Handles cases like triple-click selections where browsers use element nodes as boundaries.
  */
-function findTextNode(node, findLast = false) {
+function normalizeRangeBoundary(node, offset, isEnd = false) {
+  // Already a text node - return as-is
   if (node.nodeType === Node.TEXT_NODE) {
-    return node;
+    return { node, offset };
   }
 
-  const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT);
-
-  if (findLast) {
-    let lastTextNode = null;
-    while (walker.nextNode()) {
-      lastTextNode = walker.currentNode;
-    }
-    return lastTextNode;
+  // Only handle element nodes
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return null;
   }
 
-  return walker.nextNode();
-}
-
-/**
- * Finds a text node before the given node by searching siblings and ancestors.
- */
-function findPrecedingTextNode(node) {
-  // Search previous siblings
-  let sibling = node.previousSibling;
-  while (sibling) {
-    const textNode = findTextNode(sibling, true);
-    if (textNode) {
-      return textNode;
+  try {
+    // Strategy 1: Check if the child at offset is a text node
+    const childAtOffset = node.childNodes[offset];
+    if (childAtOffset?.nodeType === Node.TEXT_NODE) {
+      return { node: childAtOffset, offset: 0 };
     }
-    sibling = sibling.previousSibling;
-  }
 
-  // Search parent's previous siblings
-  if (node.parentNode) {
-    let parentSibling = node.parentNode.previousSibling;
-    while (parentSibling) {
-      const textNode = findTextNode(parentSibling, true);
-      if (textNode) {
-        return textNode;
+    // Strategy 2: Check the previous child (for end boundaries or when offset > 0)
+    if (offset > 0) {
+      const prevChild = node.childNodes[offset - 1];
+      if (prevChild?.nodeType === Node.TEXT_NODE) {
+        return { node: prevChild, offset: prevChild.nodeValue.length };
       }
-      parentSibling = parentSibling.previousSibling;
-    }
-  }
 
-  // Last resort: search all preceding nodes in ancestor
-  let ancestor = node.parentNode;
-  while (ancestor) {
-    const walker = document.createTreeWalker(
-      ancestor,
-      NodeFilter.SHOW_TEXT,
-      {
-        acceptNode: (textNode) => {
-          const position = node.compareDocumentPosition(textNode);
-          return position & Node.DOCUMENT_POSITION_PRECEDING
-            ? NodeFilter.FILTER_ACCEPT
-            : NodeFilter.FILTER_SKIP;
-        },
+      // If previous child is an element, find text node within it
+      if (prevChild?.nodeType === Node.ELEMENT_NODE) {
+        const textNode = findTextNodeInElement(prevChild, isEnd);
+        if (textNode) return textNode;
       }
-    );
+    }
 
-    let lastTextNode = null;
-    while (walker.nextNode()) {
-      lastTextNode = walker.currentNode;
+    // Strategy 3: Special case for end boundary at offset 0
+    // This happens when selection ends right before an element starts
+    if (isEnd && offset === 0) {
+      return findPrecedingTextNode(node);
     }
 
-    if (lastTextNode) {
-      return lastTextNode;
+    // Strategy 4: If child at offset is an element, find text node within it
+    if (childAtOffset?.nodeType === Node.ELEMENT_NODE) {
+      const textNode = findTextNodeInElement(childAtOffset, isEnd);
+      if (textNode) return textNode;
     }
 
-    ancestor = ancestor.parentNode;
-  }
+    // Strategy 5: Fallback - search within the element itself
+    return findTextNodeInElement(node, isEnd);
 
-  return null;
+  } catch (e) {
+    return null;
+  }
 }
 
 /**
- * Normalizes a range boundary point to always be a text node.
- * When triple-clicking, browsers often create ranges with element nodes as containers.
- * This function converts such boundaries to text node boundaries.
- *
- * @param {Node} node - The container node (text or element)
- * @param {number} offset - The offset within the container
- * @param {boolean} isEnd - Whether this is an end boundary (affects navigation for element nodes)
- * @returns {{node: Node, offset: number}|null} Normalized boundary with text node, or null if no text node found
+ * Finds a text node within an element, either first or last depending on position.
  */
-function normalizeRangeBoundary(node, offset, isEnd = false) {
-  // Already a text node - return as-is
-  if (node.nodeType === Node.TEXT_NODE) {
-    return { node, offset };
-  }
+function findTextNodeInElement(element, preferLast = false) {
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
 
-  // Not an element node - can't normalize
-  if (node.nodeType !== Node.ELEMENT_NODE) {
-    return null;
+  if (preferLast) {
+    let last = null;
+    while (walker.nextNode()) {
+      last = walker.currentNode;
+    }
+    return last ? { node: last, offset: last.nodeValue.length } : null;
   }
 
-  // Special case: end boundary at offset 0 means selection ends before this element
-  if (isEnd && offset === 0) {
-    const textNode = findPrecedingTextNode(node);
-    return textNode ? { node: textNode, offset: textNode.nodeValue.length } : null;
-  }
+  const first = walker.nextNode();
+  return first ? { node: first, offset: 0 } : null;
+}
 
-  // Boundary at element's edge (start at 0, end at childNodes.length)
-  if (offset === 0 || offset === node.childNodes.length) {
-    const findLast = isEnd && offset === node.childNodes.length;
-    const textNode = findTextNode(node, findLast);
-    if (!textNode) {
-      return null;
+/**
+ * Finds the text node that precedes a given element in document order.
+ * Used for end boundaries that point to the start of an element.
+ */
+function findPrecedingTextNode(element) {
+  // Check previous sibling and its descendants
+  let sibling = element.previousSibling;
+  while (sibling) {
+    if (sibling.nodeType === Node.TEXT_NODE && sibling.nodeValue.length > 0) {
+      return { node: sibling, offset: sibling.nodeValue.length };
     }
-    return { node: textNode, offset: findLast ? textNode.nodeValue.length : 0 };
-  }
-
-  // Boundary points to a specific child
-  const targetChild = isEnd ? node.childNodes[offset - 1] : node.childNodes[offset];
-  if (!targetChild) {
-    return null;
+    if (sibling.nodeType === Node.ELEMENT_NODE) {
+      const textNode = findTextNodeInElement(sibling, true);
+      if (textNode) return textNode;
+    }
+    sibling = sibling.previousSibling;
   }
 
-  // Child is a text node - use it directly
-  if (targetChild.nodeType === Node.TEXT_NODE) {
-    return { node: targetChild, offset: isEnd ? targetChild.nodeValue.length : 0 };
+  // Check parent's previous siblings and ancestors
+  let parent = element.parentNode;
+  while (parent && parent.nodeType === Node.ELEMENT_NODE) {
+    let parentSibling = parent.previousSibling;
+    while (parentSibling) {
+      if (parentSibling.nodeType === Node.TEXT_NODE && parentSibling.nodeValue.length > 0) {
+        return { node: parentSibling, offset: parentSibling.nodeValue.length };
+      }
+      if (parentSibling.nodeType === Node.ELEMENT_NODE) {
+        const textNode = findTextNodeInElement(parentSibling, true);
+        if (textNode) return textNode;
+      }
+      parentSibling = parentSibling.previousSibling;
+    }
+    parent = parent.parentNode;
   }
 
-  // Child is an element - find text node within it
-  const textNode = findTextNode(targetChild, isEnd);
-  if (!textNode) {
-    return null;
-  }
-  return { node: textNode, offset: isEnd ? textNode.nodeValue.length : 0 };
+  return null;
 }
 
 export function getSelectionText(range) {

From f2f7b0aaf837431c20af9531e27a66d5d3985528 Mon Sep 17 00:00:00 2001
From: MykolaGolubyev <golubev.nikolay@gmail.com>
Date: Sun, 16 Nov 2025 15:27:42 -0500
Subject: [PATCH 4/7] in progress

---
 .../text-selection/selectionUtils.js          | 115 +++++++++++-------
 1 file changed, 74 insertions(+), 41 deletions(-)

diff --git a/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js b/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js
index 27cb0adb1..cc5d7dbb4 100644
--- a/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js
+++ b/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js
@@ -16,7 +16,12 @@
 
 /**
  * Normalizes element node boundaries to text nodes.
- * Handles cases like triple-click selections where browsers use element nodes as boundaries.
+ *
+ * When a browser provides an element node as a range boundary with offset N,
+ * it represents a position between the element's children (between child N-1 and N).
+ *
+ * For start boundaries: Find the first text node at or after this position
+ * For end boundaries: Find the last text node before this position
  */
 function normalizeRangeBoundary(node, offset, isEnd = false) {
   // Already a text node - return as-is
@@ -30,64 +35,92 @@ function normalizeRangeBoundary(node, offset, isEnd = false) {
   }
 
   try {
-    // Strategy 1: Check if the child at offset is a text node
-    const childAtOffset = node.childNodes[offset];
-    if (childAtOffset?.nodeType === Node.TEXT_NODE) {
-      return { node: childAtOffset, offset: 0 };
+    if (isEnd) {
+      // End boundary: find the last text node before position 'offset'
+      // This means looking backward from offset
+      return findTextNodeBackward(node, offset);
+    } else {
+      // Start boundary: find the first text node at or after position 'offset'
+      // This means looking forward from offset
+      return findTextNodeForward(node, offset);
     }
+  } catch (e) {
+    return null;
+  }
+}
 
-    // Strategy 2: Check the previous child (for end boundaries or when offset > 0)
-    if (offset > 0) {
-      const prevChild = node.childNodes[offset - 1];
-      if (prevChild?.nodeType === Node.TEXT_NODE) {
-        return { node: prevChild, offset: prevChild.nodeValue.length };
-      }
-
-      // If previous child is an element, find text node within it
-      if (prevChild?.nodeType === Node.ELEMENT_NODE) {
-        const textNode = findTextNodeInElement(prevChild, isEnd);
-        if (textNode) return textNode;
-      }
-    }
+/**
+ * Finds the first text node at or after the given offset position in an element.
+ * Used for start boundaries.
+ */
+function findTextNodeForward(element, offset) {
+  // First, try to find text within children starting from offset
+  for (let i = offset; i < element.childNodes.length; i++) {
+    const child = element.childNodes[i];
 
-    // Strategy 3: Special case for end boundary at offset 0
-    // This happens when selection ends right before an element starts
-    if (isEnd && offset === 0) {
-      return findPrecedingTextNode(node);
+    if (child.nodeType === Node.TEXT_NODE) {
+      return { node: child, offset: 0 };
     }
 
-    // Strategy 4: If child at offset is an element, find text node within it
-    if (childAtOffset?.nodeType === Node.ELEMENT_NODE) {
-      const textNode = findTextNodeInElement(childAtOffset, isEnd);
+    if (child.nodeType === Node.ELEMENT_NODE) {
+      const textNode = findFirstTextNode(child);
       if (textNode) return textNode;
     }
-
-    // Strategy 5: Fallback - search within the element itself
-    return findTextNodeInElement(node, isEnd);
-
-  } catch (e) {
-    return null;
   }
+
+  // No text node found among this element's children
+  return null;
 }
 
 /**
- * Finds a text node within an element, either first or last depending on position.
+ * Finds the last text node before the given offset position in an element.
+ * Used for end boundaries.
  */
-function findTextNodeInElement(element, preferLast = false) {
-  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+function findTextNodeBackward(element, offset) {
+  // If offset is 0, need to look before this element entirely
+  if (offset === 0) {
+    return findPrecedingTextNode(element);
+  }
+
+  // Search backward through children before offset
+  for (let i = offset - 1; i >= 0; i--) {
+    const child = element.childNodes[i];
+
+    if (child.nodeType === Node.TEXT_NODE) {
+      return { node: child, offset: child.nodeValue.length };
+    }
 
-  if (preferLast) {
-    let last = null;
-    while (walker.nextNode()) {
-      last = walker.currentNode;
+    if (child.nodeType === Node.ELEMENT_NODE) {
+      const textNode = findLastTextNode(child);
+      if (textNode) return textNode;
     }
-    return last ? { node: last, offset: last.nodeValue.length } : null;
   }
 
+  // No text node found among this element's children
+  return null;
+}
+
+/**
+ * Finds the first text node within an element.
+ */
+function findFirstTextNode(element) {
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
   const first = walker.nextNode();
   return first ? { node: first, offset: 0 } : null;
 }
 
+/**
+ * Finds the last text node within an element.
+ */
+function findLastTextNode(element) {
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+  let last = null;
+  while (walker.nextNode()) {
+    last = walker.currentNode;
+  }
+  return last ? { node: last, offset: last.nodeValue.length } : null;
+}
+
 /**
  * Finds the text node that precedes a given element in document order.
  * Used for end boundaries that point to the start of an element.
@@ -100,7 +133,7 @@ function findPrecedingTextNode(element) {
       return { node: sibling, offset: sibling.nodeValue.length };
     }
     if (sibling.nodeType === Node.ELEMENT_NODE) {
-      const textNode = findTextNodeInElement(sibling, true);
+      const textNode = findLastTextNode(sibling);
       if (textNode) return textNode;
     }
     sibling = sibling.previousSibling;
@@ -115,7 +148,7 @@ function findPrecedingTextNode(element) {
         return { node: parentSibling, offset: parentSibling.nodeValue.length };
       }
       if (parentSibling.nodeType === Node.ELEMENT_NODE) {
-        const textNode = findTextNodeInElement(parentSibling, true);
+        const textNode = findLastTextNode(parentSibling);
         if (textNode) return textNode;
       }
       parentSibling = parentSibling.previousSibling;

From de53de8f125c3f2a14465d69f440e5ecadd6870c Mon Sep 17 00:00:00 2001
From: MykolaGolubyev <golubev.nikolay@gmail.com>
Date: Sun, 16 Nov 2025 15:34:20 -0500
Subject: [PATCH 5/7] in progress

---
 .../text-selection/selectionUtils.js            | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js b/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js
index cc5d7dbb4..ca0d923aa 100644
--- a/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js
+++ b/znai-reactjs/src/doc-elements/text-selection/selectionUtils.js
@@ -17,11 +17,20 @@
 /**
  * Normalizes element node boundaries to text nodes.
  *
- * When a browser provides an element node as a range boundary with offset N,
- * it represents a position between the element's children (between child N-1 and N).
+ * Triple-click selections often use element nodes as boundaries (e.g., <p> at offset 0).
+ * We need text nodes with character offsets to extract text accurately.
  *
- * For start boundaries: Find the first text node at or after this position
- * For end boundaries: Find the last text node before this position
+ * Element offset N means "between child N-1 and child N":
+ *   <p> offset=0 → before first child
+ *   <p> offset=1 → after first child
+ *
+ * Examples:
+ *   Triple-click <p>: (<p>, 0) to (<p>, 1) → normalize to text node boundaries
+ *   Triple-click <li>: (<ul>, 1) to (<ul>, 2) → normalize to second <li>'s text nodes
+ *
+ * Strategy:
+ *   Start boundaries: search forward from offset for first text node
+ *   End boundaries: search backward from offset for last text node
  */
 function normalizeRangeBoundary(node, offset, isEnd = false) {
   // Already a text node - return as-is

From 7428bcd98650113861f5637a76b875efa6ac6144 Mon Sep 17 00:00:00 2001
From: MykolaGolubyev <golubev.nikolay@gmail.com>
Date: Sun, 16 Nov 2025 18:38:59 -0500
Subject: [PATCH 6/7] in progress

---
 .../groovy/scenarios/textSelection.groovy     | 91 +++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 znai-tests/src/test/groovy/scenarios/textSelection.groovy

diff --git a/znai-tests/src/test/groovy/scenarios/textSelection.groovy b/znai-tests/src/test/groovy/scenarios/textSelection.groovy
new file mode 100644
index 000000000..c7d7ace32
--- /dev/null
+++ b/znai-tests/src/test/groovy/scenarios/textSelection.groovy
@@ -0,0 +1,91 @@
+/*
+ * Copyright 2025 znai maintainers
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package scenarios
+
+import docgen.ScaffoldUtils
+import org.testingisdocumenting.webtau.WebTauGroovyDsl
+
+import static org.testingisdocumenting.webtau.WebTauGroovyDsl.*
+import static pages.Pages.*
+
+def scaffoldServerUrl = cache.value('text-selection-scaffold-url')
+
+scenario('scaffold docs for text selection test') {
+    scaffoldServerUrl.set(
+            ScaffoldUtils.scaffoldAndServe('text-selection-scaffold').baseUrl)
+}
+
+scenario('open docs in browser') {
+    browser.open(scaffoldServerUrl.get() + '/my-product')
+}
+
+scenario('triple-click bullet point and generate link') {
+    standardView.gettingStartedTocItem.click()
+    standardView.pageTitle.waitTo == "Getting Started"
+
+    def bulletElement = $("ul li").get(2)
+    bulletElement.waitTo visible
+
+    // TODO expose triple click and selenium actions via webtau
+    def originalText = browser.driver.executeScript("""
+        var elements = document.querySelectorAll('ul li');
+        var element = elements[2];
+        var range = document.createRange();
+        range.selectNodeContents(element);
+        var selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+
+        var mouseUpEvent = new MouseEvent('mouseup', {
+            view: window,
+            bubbles: true,
+            cancelable: true
+        });
+        element.dispatchEvent(mouseUpEvent);
+
+        return selection.toString();
+    """)
+
+    def menu = $(".znai-text-selection-menu")
+    menu.waitTo visible
+
+    def generateLinkItem = $(".znai-text-selection-menu-item").get("Generate Link")
+    generateLinkItem.waitTo visible
+    generateLinkItem.click()
+
+    def questionInput = $(".znai-text-selection-question-input")
+    questionInput.waitTo visible
+
+    questionInput.sendKeys("test")
+
+    def sendButton = $(".znai-text-selection-send-button")
+    sendButton.click()
+
+    // TODO expose this via webtau
+    def highlightUrl = browser.driver.executeAsyncScript("""
+        var callback = arguments[arguments.length - 1];
+        navigator.clipboard.readText().then(function(text) {
+            callback(text);
+        }).catch(function(err) {
+            callback("Error reading clipboard: " + err);
+        });
+    """)
+
+    browser.reopen(highlightUrl)
+    def highlightedElement = $(".znai-highlight")
+    highlightedElement.waitTo contain(originalText)
+}

From 031f2eaa35d2b3f8a1d387a4b218b412a56ffbc7 Mon Sep 17 00:00:00 2001
From: MykolaGolubyev <golubev.nikolay@gmail.com>
Date: Sun, 16 Nov 2025 18:49:04 -0500
Subject: [PATCH 7/7] in progress

---
 ...5-11-16-llm-text-selection-triple-click.md |  1 +
 .../groovy/scenarios/textSelection.groovy     | 29 ++++++-------------
 2 files changed, 10 insertions(+), 20 deletions(-)
 create mode 100644 znai-docs/znai/release-notes/1.83/fix-2025-11-16-llm-text-selection-triple-click.md

diff --git a/znai-docs/znai/release-notes/1.83/fix-2025-11-16-llm-text-selection-triple-click.md b/znai-docs/znai/release-notes/1.83/fix-2025-11-16-llm-text-selection-triple-click.md
new file mode 100644
index 000000000..978698992
--- /dev/null
+++ b/znai-docs/znai/release-notes/1.83/fix-2025-11-16-llm-text-selection-triple-click.md
@@ -0,0 +1 @@
+* Fix: Ask In Slack and Generate Link are now working for paragraphs selected with triple click
\ No newline at end of file
diff --git a/znai-tests/src/test/groovy/scenarios/textSelection.groovy b/znai-tests/src/test/groovy/scenarios/textSelection.groovy
index c7d7ace32..90b3dd56f 100644
--- a/znai-tests/src/test/groovy/scenarios/textSelection.groovy
+++ b/znai-tests/src/test/groovy/scenarios/textSelection.groovy
@@ -17,6 +17,8 @@
 package scenarios
 
 import docgen.ScaffoldUtils
+import org.openqa.selenium.WebElement
+import org.openqa.selenium.interactions.Actions
 import org.testingisdocumenting.webtau.WebTauGroovyDsl
 
 import static org.testingisdocumenting.webtau.WebTauGroovyDsl.*
@@ -37,28 +39,14 @@ scenario('triple-click bullet point and generate link') {
     standardView.gettingStartedTocItem.click()
     standardView.pageTitle.waitTo == "Getting Started"
 
-    def bulletElement = $("ul li").get(2)
+    def bulletElement = $("ul li").get(3)
     bulletElement.waitTo visible
 
-    // TODO expose triple click and selenium actions via webtau
-    def originalText = browser.driver.executeScript("""
-        var elements = document.querySelectorAll('ul li');
-        var element = elements[2];
-        var range = document.createRange();
-        range.selectNodeContents(element);
-        var selection = window.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
-
-        var mouseUpEvent = new MouseEvent('mouseup', {
-            view: window,
-            bubbles: true,
-            cancelable: true
-        });
-        element.dispatchEvent(mouseUpEvent);
+    Actions actions = new Actions(browser.driver);
 
-        return selection.toString();
-    """)
+    // TODO expose triple click and selenium actions via webtau
+    def webElement = bulletElement.findElement()
+    actions.click(webElement).click(webElement).click(webElement).perform()
 
     def menu = $(".znai-text-selection-menu")
     menu.waitTo visible
@@ -86,6 +74,7 @@ scenario('triple-click bullet point and generate link') {
     """)
 
     browser.reopen(highlightUrl)
+
     def highlightedElement = $(".znai-highlight")
-    highlightedElement.waitTo contain(originalText)
+    highlightedElement.waitTo contain("Page Sections")
 }