ux: ask in slack and generate link selection menu (#1336)

Author: MykolaGolubyev

znai-docs/znai/release-notes/1.78/add-2025-08-24-selected-text-menu.md

@@ -0,0 +1 @@
+* Add: Initial menu for selected text. Generate link with comment and send to slack.

znai-reactjs/src/App.css

@@ -194,6 +194,9 @@
     --znai-attention-recommendation-color: var(--znai-attention-question-color);
     --znai-attention-recommendation-background-color: var(--znai-attention-question-background-color);
 
+    --znai-text-selection-menu-background-color: var(--znai-brand-primary-color);
+    --znai-text-selection-menu-text-color: #fff;
+
     --znai-text-badge-background-color: #06437c;
     --znai-text-badge-text-color: #eee;
 

znai-reactjs/src/App.jsx

@@ -112,7 +112,8 @@ const docMeta = {
   type: "User Guide",
   title: "Znai",
   previewEnabled: true,
-  hipchatRoom: "Test Room",
+  slackChannel: "help-domain-name",
+  sendToSlackUrl: "http://localhost:5111/ask-in-slack",
   viewOn: {
     link: "https://github.com/testingisdocumenting/znai/znai-cli/documentation",
     title: "View On GitHub",

znai-reactjs/src/components/Notification.css

@@ -0,0 +1,83 @@
+.znai-notification {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10000;
+  padding: 12px 16px;
+  font-size: 14px;
+  font-family: inherit;
+  opacity: 0;
+  transform: translateY(-100%);
+  transition: all 0.3s ease-in-out;
+}
+
+.znai-notification.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.znai-notification.fade-out {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+.znai-notification-success {
+  background-color: #d4edda;
+  color: #155724;
+  border-bottom: 2px solid #28a745;
+}
+
+.znai-notification-error {
+  background-color: #f8d7da;
+  color: #721c24;
+  border-bottom: 2px solid #dc3545;
+}
+
+.znai-notification-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.znai-notification-message {
+  flex: 1;
+  padding-right: 16px;
+}
+
+.znai-notification-close {
+  background: none;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 4px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+  flex-shrink: 0;
+}
+
+.znai-notification-success .znai-notification-close {
+  color: #155724;
+}
+
+.znai-notification-error .znai-notification-close {
+  color: #721c24;
+}
+
+.znai-notification-close:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.znai-notification-close:focus {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}

znai-reactjs/src/components/Notification.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 React, { useEffect, useState } from "react";
+import "./Notification.css";
+
+export interface NotificationProps {
+  type: "success" | "error";
+  message: string;
+  onClose: () => void;
+}
+
+export function Notification({ type, message, onClose }: NotificationProps) {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    if (type === "success") {
+      const timer = setTimeout(() => {
+        setVisible(false);
+        setTimeout(onClose, 300); // Wait for fade out animation
+      }, 2000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [type, onClose]);
+
+  const handleClose = () => {
+    setVisible(false);
+    setTimeout(onClose, 300); // Wait for fade out animation
+  };
+
+  return (
+    <div className={`znai-notification znai-notification-${type} ${visible ? "visible" : "fade-out"}`}>
+      <div className="znai-notification-content">
+        <span className="znai-notification-message">{message}</span>
+        <button className="znai-notification-close" onClick={handleClose} aria-label="Close notification">
+          ✕
+        </button>
+      </div>
+    </div>
+  );
+}

znai-reactjs/src/doc-elements/Documentation.jsx

@@ -24,7 +24,6 @@ import SearchPopup from './search/SearchPopup'
 import {getSearchPromise} from './search/searchPromise'
 import {documentationNavigation} from '../structure/DocumentationNavigation'
 import {documentationTracking} from './tracking/DocumentationTracking'
-import {textSelection} from './selected-text-extensions/TextSelection'
 import {tableOfContents} from '../structure/toc/TableOfContents'
 import {getAllPagesPromise} from './allPages'
 
@@ -115,11 +114,9 @@ export class Documentation extends Component {
         this.onPageGenError = this.onPageGenError.bind(this)
         this.updateCurrentPageSection = this.updateCurrentPageSection.bind(this)
         this.keyDownHandler = this.keyDownHandler.bind(this)
-        this.mouseUpHandler = this.mouseUpHandler.bind(this)
         this.mouseClickHandler = this.mouseClickHandler.bind(this)
 
         documentationNavigation.addUrlChangeListener(this.onUrlChange.bind(this))
-        textSelection.addListener(this.onTextSelection.bind(this))
     }
 
     get theme() {
@@ -224,7 +221,6 @@ export class Documentation extends Component {
                                          onTocItemPageSectionClick={this.onTocItemPageSectionClick}
                                          onNextPage={this.onNextPage}
                                          onPrevPage={this.onPrevPage}
-                                         textSelection={textSelection}
                                          scrollToTop={this.scrollTop}
                                          scrollToPageSection={this.scrollToPageSection}
                                          pageGenError={pageGenError}/>
@@ -265,8 +261,6 @@ export class Documentation extends Component {
         this.onPageLoad()
 
         document.addEventListener('keydown', this.keyDownHandler)
-        document.addEventListener('mouseup', this.mouseUpHandler)
-        document.addEventListener('click', this.mouseClickHandler)
 
         presentationModeListeners.addListener(this)
     }
@@ -275,15 +269,14 @@ export class Documentation extends Component {
         this.disableScrollListener()
 
         document.removeEventListener('keydown', this.keyDownHandler)
-        document.removeEventListener('mouseup', this.mouseUpHandler)
-        document.removeEventListener('click', this.mouseClickHandler)
 
         presentationModeListeners.removeListener(this)
     }
 
     keyDownHandler(e) {
         const {isSearchActive, mode} = this.state
-        if (e.code === "Slash" && !isSearchActive && mode === DocumentationModes.DEFAULT) {
+        const isFromInputElement = e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA'
+        if (e.code === "Slash" && !isSearchActive && mode === DocumentationModes.DEFAULT && !isFromInputElement) {
             e.preventDefault()
             this.setState({isSearchActive: true})
         } else if (mode === DocumentationModes.DEFAULT && e.code === 'KeyP' && e.altKey) {
@@ -301,32 +294,6 @@ export class Documentation extends Component {
         }
     }
 
-    mouseUpHandler() {
-        const {isSearchActive, mode} = this.state
-        if (mode !== DocumentationModes.DEFAULT || isSearchActive) {
-            return
-        }
-
-        const selection = window.getSelection()
-        if (!selection.rangeCount) {
-            return
-        }
-
-        const rangeAt = selection.getRangeAt(0)
-        const text = selection.toString()
-
-        if (!text || selection.isCollapsed) {
-            textSelection.clear()
-        } else {
-            const {page} = this.state
-
-            const tocItem = page.tocItem
-            const startNode = selection.isCollapsed ? null : rangeAt.startContainer.parentNode
-
-            textSelection.endSelection({tocItem, startNode, text})
-        }
-    }
-
     mouseClickHandler() {
     }
 
@@ -361,7 +328,7 @@ export class Documentation extends Component {
         if (isMobile) {
             window.removeEventListener("scroll", this.updateCurrentPageSection)
         } else {
-            this.mainPanelDom.addEventListener("scroll", this.updateCurrentPageSection)
+            this.mainPanelDom.removeEventListener("scroll", this.updateCurrentPageSection)
         }
     }
 
@@ -637,9 +604,6 @@ export class Documentation extends Component {
         return funcToUpdatePage()
     }
 
-    onTextSelection(selectedText) {
-    }
-
     onUrlChange(url, urlHistoryState) {
         return this.getAllPagesPromise().then((allPages) => {
             const currentPageLocation = documentationNavigation.extractPageLocation(url)

znai-reactjs/src/doc-elements/default-elements/PresentationHeading.jsx renamed to znai-reactjs/src/doc-elements/default-elements/PresentationHeading.tsx

@@ -15,16 +15,22 @@
  * limitations under the License.
  */
 
-import React from 'react'
+import React from "react";
 
-import './PresentationHeading.css'
+import "./PresentationHeading.css";
 
-export function PresentationHeading({level, title, className}) {
-    const Element = `h${level}`
+interface Props {
+  level: number;
+  title: string;
+  className?: string;
+}
+
+export function PresentationHeading({ level, title, className }: Props) {
+  const Element = `h${level}` as keyof JSX.IntrinsicElements;
 
-    return (
-        <div className="presentation-heading-wrapper">
-            <Element className={className}>{title}</Element>
-        </div>
-    )
+  return (
+    <div className="presentation-heading-wrapper">
+      <Element className={className}>{title}</Element>
+    </div>
+  );
 }