slack: initial highlight existing questions inside readmore code blocks (#1350)

Author: MykolaGolubyev

znai-docs/znai/release-notes/1.80/add-2025-09-09-highlight-inside-codesnippet-readmore.md

@@ -0,0 +1,2 @@
+* Add: Initial attempt to highlight Slack questions inside code snippets "read more" part
+* Add: Initial attempt to highlight Slack questions inside read more blocks

znai-reactjs/src/doc-elements/code-snippets/CodeSnippetWithCallouts.tsx

@@ -82,6 +82,7 @@ const CodeSnippetWithCallouts = ({
               references={mergedReferences}
               isPresentation={isPresentation}
               wrap={wrap}
+              isHidden={false}
               endOfLineRender={() => {
                 const calloutContent = callouts[lineIdx];
 

znai-reactjs/src/doc-elements/code-snippets/LineOfTokens.css

@@ -20,6 +20,10 @@
     white-space: pre;
 }
 
+.znai-code-line.hidden {
+    display: none;
+}
+
 .znai-code-line.highlight {
     background: var(--znai-snippets-line-highlighted-background-color);
     margin-left: -16px;

znai-reactjs/src/doc-elements/code-snippets/LineOfTokens.jsx

@@ -23,34 +23,53 @@ import CodeToken from "./CodeToken";
 
 import "./LineOfTokens.css";
 
-const LineOfTokens = ({tokens, references, isHighlighted, isPrevHighlighted, isNextHighlighted, isPresentation, wrap, endOfLineRender}) => {
-    const className = "znai-code-line"
-      + (isHighlighted ? " highlight" : "")
-      + (isHighlighted && !isPrevHighlighted ? " no-highlight-top-neighbour" : "")
-      + (isHighlighted && !isNextHighlighted ? " no-highlight-bottom-neighbour" : "")
-      + (wrap ? " wrap": "")
-
-    const trimmedOnRight = lineWithTokensTrimmedOnRight(tokens)
-    const enhancedTokens = enhanceTokens(trimmedOnRight)
-
-    return (
-        <span className={className}>
-            {enhancedTokens.map((t, idx) => <CodeToken key={idx} token={t} isPresentation={isPresentation}/>)}
-            {endOfLineRender && endOfLineRender()}
-            <span>{"\n"}</span>
-        </span>
-    )
-
-    function enhanceTokens(tokens) {
-        if (!references) {
-            return tokens
-        }
-
-        return enhanceMatchedTokensWithMeta(tokens, Object.keys(references), () => 'link', (referenceText) => {
-            const reference = references[referenceText]
-            return reference.pageUrl
-        })
+const LineOfTokens = ({
+  tokens,
+  references,
+  isHighlighted,
+  isPrevHighlighted,
+  isNextHighlighted,
+  isPresentation,
+  wrap,
+  endOfLineRender,
+  isHidden,
+}) => {
+  const className =
+    "znai-code-line" +
+    (isHighlighted ? " highlight" : "") +
+    (isHighlighted && !isPrevHighlighted ? " no-highlight-top-neighbour" : "") +
+    (isHighlighted && !isNextHighlighted ? " no-highlight-bottom-neighbour" : "") +
+    (wrap ? " wrap" : "") +
+    (isHidden ? " hidden" : "");
+
+  const trimmedOnRight = lineWithTokensTrimmedOnRight(tokens);
+  const enhancedTokens = enhanceTokens(trimmedOnRight);
+
+  return (
+    <span className={className}>
+      {enhancedTokens.map((t, idx) => (
+        <CodeToken key={idx} token={t} isPresentation={isPresentation} />
+      ))}
+      {endOfLineRender && endOfLineRender()}
+      <span>{"\n"}</span>
+    </span>
+  );
+
+  function enhanceTokens(tokens) {
+    if (!references) {
+      return tokens;
     }
-}
 
-export default LineOfTokens
+    return enhanceMatchedTokensWithMeta(
+      tokens,
+      Object.keys(references),
+      () => "link",
+      (referenceText) => {
+        const reference = references[referenceText];
+        return reference.pageUrl;
+      }
+    );
+  }
+};
+
+export default LineOfTokens;