testingisdocumenting · MykolaGolubyev · Sep 9, 2025 · Sep 9, 2025 · Sep 9, 2025
diff --git a/znai-docs/znai/release-notes/1.80/add-2025-09-09-highlight-svg.md b/znai-docs/znai/release-notes/1.80/add-2025-09-09-highlight-svg.md
@@ -0,0 +1 @@
+* Add: SVG support for Slack/Generate Link 
diff --git a/znai-reactjs/src/doc-elements/testDocumentation.jsx b/znai-reactjs/src/doc-elements/testDocumentation.jsx
diff --git a/znai-reactjs/src/doc-elements/text-selection/markdownContextBuilder.test.ts b/znai-reactjs/src/doc-elements/text-selection/markdownContextBuilder.test.ts
@@ -396,4 +396,20 @@ export default JsClass
       expect(result).toBe("");
     });
   });
+
+  describe("buildContext - svg", () => {
+    it("should return svg context", () => {
+      const { container } = setupDOM(`<svg>
+<text>This is a sample text with multiple words.</text>
+<text>This text contains repeated phrases.</text>
+<text>The sample text is useful for testing.</text></svg>`);
+
+      const text = container.querySelector("text");
+      selectText(text.firstChild, 0, text.firstChild, 5);
+
+      const result = buildContext();
+
+      expect(result).toBe("```\n[svg image]\nselected text: This\n```");
+    });
+  });
 });
diff --git a/znai-reactjs/src/doc-elements/text-selection/markdownContextBuilder.ts b/znai-reactjs/src/doc-elements/text-selection/markdownContextBuilder.ts
@@ -22,6 +22,10 @@ export function buildContext(): string {
 
   const range = selection.getRangeAt(0);
 
+  if (isSvgContainer(range)) {
+    return "```\n[svg image]\n" + "selected text: " + selection.toString().trim() + "\n```";
+  }
+
   const codeBlock = findCodeBlock(range);
   if (codeBlock) {
     return buildCodeSnippetContext(range, codeBlock);
@@ -59,7 +63,6 @@ function buildParagraphContext(range: Range): string {
     return "";
   }
 
-  // Find the paragraph containing the start of the selection
   const paragraph = findContainingParagraph(range.startContainer);
   if (!paragraph) {
     return "";
@@ -87,7 +90,6 @@ function findContainingParagraph(node: Node): HTMLElement | null {
 function buildParagraphOutput(paragraph: HTMLElement, selectedText: string, range: Range): string {
   const paragraphText = paragraph.textContent ?? "";
 
-  // Calculate the position of the selection within the paragraph
   let selectionPosition = -1;
   if (paragraph.contains(range.startContainer)) {
     const tempRange = document.createRange();
@@ -97,20 +99,31 @@ function buildParagraphOutput(paragraph: HTMLElement, selectedText: string, rang
   }
 
   const highlightedText = highlightSelectedTextInParagraph(paragraphText, selectedText, selectionPosition);
-  // Handle multi-line content with proper markdown quoting
   return "> " + highlightedText.replace(/\n/g, "\n> ");
 }
 
 function highlightSelectedTextInParagraph(text: string, selectedText: string, selectionPosition: number = -1): string {
   return highlightText(text, selectedText, selectionPosition, false);
 }
 
+function isSvgContainer(range: Range): boolean {
+  let element: Node | null = range.commonAncestorContainer;
+
+  while (element) {
+    if (element.nodeName.toLowerCase() === "svg") {
+      return true;
+    }
+
+    element = element?.parentNode;
+  }
+
+  return false;
+}
+
 function findCodeBlock(range: Range): HTMLElement | null {
   let element: Node | null = range.commonAncestorContainer;
 
-  // Walk up the DOM tree to find a code block
   while (element) {
-    // Check if it's an element node (nodeType 1)
     if (element.nodeType === 1) {
       const htmlElement = element as HTMLElement;
       if (htmlElement.tagName === "PRE" || htmlElement.classList.contains("snippet")) {

diff --git a/znai-reactjs/src/doc-elements/text-selection/selectionTestUtils.js b/znai-reactjs/src/doc-elements/text-selection/selectionTestUtils.js
@@ -21,9 +21,7 @@ export function setupDOM(htmlContent) {
     `
       <!DOCTYPE html>
       <html lang="en">
-        <body>
-          ${htmlContent}
-        </body>
+        <body>${htmlContent}</body>
       </html>
     `,
     { pretendToBeVisual: true }

diff --git a/znai-reactjs/src/doc-elements/text-selection/textHighlighter.css b/znai-reactjs/src/doc-elements/text-selection/textHighlighter.css
@@ -20,6 +20,15 @@
     transition: background-color 0.2s;
 }
 
+.znai-highlight-svg {
+    fill: black !important;
+    stroke: #ffeb3b !important;
+    stroke-width: 8;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+    paint-order: stroke fill;
+}
+
 .znai-highlight-hover {
     background-color: #efdd47;
     cursor: pointer;

diff --git a/znai-reactjs/src/doc-elements/text-selection/textHighlighter.js b/znai-reactjs/src/doc-elements/text-selection/textHighlighter.js
@@ -28,7 +28,9 @@ export class TextHighlighter {
 
     let textNode;
     while ((textNode = walker.nextNode())) {
-      textNodes.push(textNode);
+      const localName = textNode.parentNode.localName;
+      const isSvg = localName === "text" || localName === "tspan";
+      textNodes.push({ node: textNode, isSvg });
     }
     return textNodes;
   }
@@ -43,10 +45,11 @@ export class TextHighlighter {
 
     let currentPos = 0;
     const nodeMap = textNodes.map((node) => {
+      const nodeValue = node.node.nodeValue;
       const start = currentPos;
-      const end = currentPos + node.nodeValue.length;
+      const end = currentPos + nodeValue.length;
       currentPos = end;
-      return { node, start, end, text: node.nodeValue };
+      return { node: node.node, isSvg: node.isSvg, start, end, text: nodeValue };
     });
 
     const fullText = nodeMap.map((item) => item.text).join("");
@@ -63,6 +66,7 @@ export class TextHighlighter {
         if (nodeInfo.end > matchStart && nodeInfo.start < matchEnd) {
           affectedNodes.push({
             node: nodeInfo.node,
+            isSvg: nodeInfo.isSvg,
             start: Math.max(0, matchStart - nodeInfo.start),
             end: Math.min(nodeInfo.text.length, matchEnd - nodeInfo.start),
             text: nodeInfo.text,
@@ -85,7 +89,7 @@ export class TextHighlighter {
 
     const matches = this.findMatches(searchText, prefix, suffix);
 
-    matches.forEach((match, matchIndex) => {
+    matches.forEach((match) => {
       const highlightGroup = [];
 
       const handleMouseEnter = () => {
@@ -124,24 +128,31 @@ export class TextHighlighter {
 
       match.nodes.forEach((nodeInfo, nodeIndex) => {
         const parent = nodeInfo.node.parentNode;
-        if (!parent) return;
+        if (!parent) {
+          return;
+        }
 
         const beforeText = nodeInfo.node.nodeValue.substring(0, nodeInfo.start);
         const highlightText = nodeInfo.node.nodeValue.substring(nodeInfo.start, nodeInfo.end);
         const afterText = nodeInfo.node.nodeValue.substring(nodeInfo.end);
 
-        const highlightSpan = document.createElement("span");
-        highlightSpan.className = "znai-highlight";
+        const highlightSpan = nodeInfo.isSvg
+          ? document.createElementNS("http://www.w3.org/2000/svg", "tspan")
+          : document.createElement("span");
+
+        highlightSpan.setAttribute("class", nodeInfo.isSvg ? "znai-highlight-svg" : "znai-highlight");
         highlightSpan.textContent = highlightText;
 
-        if (match.nodes.length === 1) {
-          highlightSpan.classList.add("single");
-        } else if (nodeIndex === 0) {
-          highlightSpan.classList.add("start");
-        } else if (nodeIndex === match.nodes.length - 1) {
-          highlightSpan.classList.add("end");
-        } else {
-          highlightSpan.classList.add("middle");
+        if (!nodeInfo.isSvg) {
+          if (match.nodes.length === 1) {
+            highlightSpan.classList.add("single");
+          } else if (nodeIndex === 0) {
+            highlightSpan.classList.add("start");
+          } else if (nodeIndex === match.nodes.length - 1) {
+            highlightSpan.classList.add("end");
+          } else {
+            highlightSpan.classList.add("middle");
+          }
         }
 
         const fragment = document.createDocumentFragment();

diff --git a/znai-reactjs/src/doc-elements/text-selection/textHighlighter.test.js b/znai-reactjs/src/doc-elements/text-selection/textHighlighter.test.js
@@ -0,0 +1,56 @@
+/*
+ * 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.
+ */
+
+import { describe } from "vitest";
+
+import { setupDOM } from "./selectionTestUtils.js";
+import { TextHighlighter } from "./textHighlighter.js";
+
+describe("textSelectionBuilder", () => {
+  it("add highlight class to html text", () => {
+    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 highlighter = new TextHighlighter(container);
+    highlighter.highlight("contains", "text ", " repeated");
+
+    expect(container.innerHTML.trim()).toEqual(
+      "<div>\n" +
+        "<p>This is a sample text with multiple words.</p>\n" +
+        '<p>This text <span class="znai-highlight single">contains</span> repeated phrases.</p>\n' +
+        "<p>The sample text is useful for testing.</p></div>"
+    );
+  });
+
+  it("add highlight class to svg text", () => {
+    const { container } = setupDOM(`<svg>
+<text>This is a sample text with multiple words.</text>
+<text>This text contains repeated phrases.</text>
+<text>The sample text is useful for testing.</text></svg>`);
+
+    const highlighter = new TextHighlighter(container);
+    highlighter.highlight("contains", "text ", " repeated");
+
+    expect(container.innerHTML.trim()).toEqual(
+      "<svg>\n" +
+        "<text>This is a sample text with multiple words.</text>\n" +
+        '<text>This text <tspan class="znai-highlight-svg">contains</tspan> repeated phrases.</text>\n' +
+        "<text>The sample text is useful for testing.</text></svg>"
+    );
+  });
+});