slack: toggle bubble on click

znai-docs/znai/release-notes/1.79/add-2025-08-31-ask-in-slack-bubble-toggle.md

@@ -0,0 +1 @@
+* Add: Hide/show ask in slack bubble when clicking

znai-docs/znai/release-notes/1.79/fix-2025-08-31-ask-in-slack-bubble-height.md

@@ -0,0 +1 @@
+* Fix: Adjust position for ask in slack bubble with multiline text

znai-reactjs/src/doc-elements/text-selection/HighlightUrlText.css

@@ -3,12 +3,11 @@
     position: absolute;
     background: #1e40af;
     color: white;
-    padding: 12px 18px;
+    padding: 8px 16px;
     border-radius: 8px;
     font-size: 14px;
-    font-weight: 500;
     line-height: 1.4;
-    max-width: 280px;
+    max-width: 380px;
     box-shadow: 0 12px 28px rgba(30, 64, 175, 0.25), 
                 0 6px 12px rgba(0, 0, 0, 0.12);
     backdrop-filter: blur(10px);

znai-reactjs/src/doc-elements/text-selection/HighlightUrlText.tsx

@@ -23,14 +23,28 @@ import "./HighlightUrlText.css";
 
 export function HighlightUrlText({ containerNode }: { containerNode: HTMLDivElement }) {
   const bubbleRef = useRef<HTMLDivElement>(null);
+
+  function toggleBubble() {
+    if (!bubbleRef.current) {
+      return;
+    }
+
+    const bubble = bubbleRef.current as HTMLDivElement;
+    if (bubble.style.display === "block") {
+      bubble.style.display = "none";
+    } else {
+      bubble.style.display = "block";
+    }
+  }
+
   useEffect(() => {
     const params = extractHighlightParams();
     let highlighter: TextHighlighter | null = null;
 
     if (params) {
       const container = document.querySelector(mainPanelClassName) || document.body;
       highlighter = new TextHighlighter(container);
-      const highlights = highlighter.highlight(params.selection, params.prefix, params.suffix);
+      const highlights = highlighter.highlight(params.selection, params.prefix, params.suffix, toggleBubble);
       const firstHighlightedElement = highlights[0];
       if (!firstHighlightedElement) {
         return;
@@ -52,11 +66,9 @@ export function HighlightUrlText({ containerNode }: { containerNode: HTMLDivElem
         bubble.style.display = "block";
 
         const bubbleRect = bubble.getBoundingClientRect();
-        const bubbleWidth = bubbleRect.width;
-
-        const top = selectionRect.top - containerRect.top + containerNode.scrollTop - 60;
+        const top = selectionRect.top - containerRect.top + containerNode.scrollTop - bubbleRect.height - 10;
         const selectionCenter = selectionRect.left + selectionRect.width / 2.0;
-        const left = selectionCenter - bubbleWidth / 2.0 - containerRect.left;
+        const left = selectionCenter - bubbleRect.width / 2.0 - containerRect.left;
 
         bubble.style.top = `${top}px`;
         bubble.style.left = `${left}px`;

znai-reactjs/src/doc-elements/text-selection/textHighlihter.js

@@ -41,7 +41,6 @@ export class TextHighlighter {
     const textNodes = this.getTextNodes(this.container);
     const matches = [];
 
-    // Build node map
     let currentPos = 0;
     const nodeMap = textNodes.map((node) => {
       const start = currentPos;
@@ -132,9 +131,13 @@ export class TextHighlighter {
         }
 
         const fragment = document.createDocumentFragment();
-        if (beforeText) fragment.appendChild(document.createTextNode(beforeText));
+        if (beforeText) {
+          fragment.appendChild(document.createTextNode(beforeText));
+        }
         fragment.appendChild(highlightSpan);
-        if (afterText) fragment.appendChild(document.createTextNode(afterText));
+        if (afterText) {
+          fragment.appendChild(document.createTextNode(afterText));
+        }
 
         parent.replaceChild(fragment, nodeInfo.node);
         highlightGroup.push(highlightSpan);