spoiler: handle text highlight from slack

znai-docs/znai/release-notes/1.80/add-2025-09-14-highlight-inside-spoiler.md

@@ -0,0 +1 @@
+* Add: highlight Slack questions inside spoiler block

znai-reactjs/src/doc-elements/spoiler/Spoiler.css

@@ -17,6 +17,7 @@
 
 .znai-spoiler {
     display: grid;
+    background-color: var(--znai-spoiler-background-color);
 
     border: solid 1px var(--znai-spoiler-border-color);
     cursor: pointer;
@@ -25,10 +26,6 @@
     margin-bottom: 16px;
 }
 
-.znai-spoiler {
-    background-color: var(--znai-spoiler-background-color);
-}
-
 .znai-spoiler-content {
     visibility: hidden;
     grid-column: 1;

znai-reactjs/src/doc-elements/spoiler/Spoiler.demo.tsx

@@ -0,0 +1,134 @@
+/*
+ * Copyright 2025 znai maintainers
+ * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
+ *
+ * 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 * as React from "react";
+import { Spoiler } from "./Spoiler";
+import { elementsLibrary } from "../DefaultElementsLibrary";
+
+export function spoilerDemo(registry: any) {
+  registry
+    .add("regular text", () =>
+      surroundWithText(
+        <Spoiler title="Press to reveal" content={paragraphContent()} elementsLibrary={elementsLibrary} />
+      )
+    )
+
+    .add("regular text small box", () => (
+      <div style={{ width: 250 }}>
+        {surroundWithText(
+          <Spoiler
+            title="Long spoiler title to cause wrap. On multiple lines."
+            content={paragraphContent()}
+            elementsLibrary={elementsLibrary}
+          />
+        )}
+      </div>
+    ))
+
+    .add("code snippet", () =>
+      surroundWithText(<Spoiler title="Press to show code" content={codeContent()} elementsLibrary={elementsLibrary} />)
+    )
+    .add("code snippet with bullets", () =>
+      surroundWithText(<Spoiler title="reveal" content={codeWithBulletsContent()} elementsLibrary={elementsLibrary} />)
+    )
+    .add("tabs", () =>
+      surroundWithText(<Spoiler title="Reveal tabs" content={tabsContent()} elementsLibrary={elementsLibrary} />)
+    );
+}
+
+function surroundWithText(rendered: React.ReactNode) {
+  const DocElement = elementsLibrary.DocElement as any;
+  return (
+    <React.Fragment>
+      <DocElement content={paragraphContent()} elementsLibrary={elementsLibrary} />
+      {rendered}
+      <DocElement content={paragraphContent()} elementsLibrary={elementsLibrary} />
+    </React.Fragment>
+  );
+}
+
+function paragraphContent() {
+  return [
+    {
+      type: "Paragraph",
+      content: [
+        {
+          text:
+            "line of text line of text line of text line of text line of text line of text line of text " +
+            "line of text line of text line of text line of text",
+          type: "SimpleText",
+        },
+      ],
+    },
+    {
+      type: "Paragraph",
+      content: [
+        {
+          text:
+            "another of text another of text another of text another of text another of text another of " +
+            "text another of text another of text another of text another of text another of text",
+          type: "SimpleText",
+        },
+      ],
+    },
+  ];
+}
+
+function codeContent() {
+  return [
+    {
+      type: "Snippet",
+      snippet: "class Hello {\n ...\n}",
+    },
+  ];
+}
+
+function codeWithBulletsContent() {
+  return [
+    {
+      type: "Snippet",
+      snippet:
+        "class InternationalPriceService implements PriceService {\n" +
+        "    private static void main(String... args) {\n" +
+        "        ... // code goes here\n" +
+        "    } // code stops here\n" +
+        "}\n",
+      commentsType: "inline",
+    },
+  ];
+}
+
+function tabsContent() {
+  return [
+    {
+      type: "Tabs",
+      tabsContent: [
+        {
+          name: "cpp",
+          content: [
+            {
+              lang: "cpp",
+              snippet: "code snippet \n",
+              lineNumber: "",
+              type: "Snippet",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+}

znai-reactjs/src/doc-elements/spoiler/Spoiler.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright 2025 znai maintainers
+ * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
+ *
+ * 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 React, { useRef, useState } from "react";
+import { documentationTracking } from "../tracking/DocumentationTracking";
+import { useHighlightOfHiddenElement } from "../text-selection/componentsHighlightUtils";
+import "./Spoiler.css";
+
+interface SpoilerProps {
+  title: string;
+  content: any;
+  elementsLibrary: any;
+}
+
+export function Spoiler({ title, content, elementsLibrary }: SpoilerProps) {
+  const [active, setActive] = useState(true);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const hasHiddenHighlightedElement = useHighlightOfHiddenElement(containerRef, containerRef, !active);
+
+  const DocElement = elementsLibrary.DocElement;
+
+  const reveal = () => {
+    setActive(false);
+    documentationTracking.onInteraction("spoiler", title);
+  };
+
+  if (active) {
+    // TODO function to augment class name with highlight?
+    const titleClassName = "znai-spoiler-title" + (hasHiddenHighlightedElement ? " znai-highlight single" : "");
+    return (
+      <div className="znai-spoiler content-block" onClick={reveal} ref={containerRef}>
+        <div className={titleClassName}>{title}</div>
+        <div className="znai-spoiler-content">
+          <DocElement content={content} elementsLibrary={elementsLibrary} />
+        </div>
+      </div>
+    );
+  }
+
+  return <DocElement content={content} elementsLibrary={elementsLibrary} />;
+}