@liminis/editor 0.1.0-rc.1

package/dist/app/editor/SearchPlugin.js

@@ -0,0 +1,379 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $createRangeSelection, $getRoot, $isTextNode, $setSelection } from 'lexical';
+// Debounce delay in ms
+const SEARCH_DEBOUNCE_MS = 150;
+export function SearchPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [isOpen, setIsOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const [debouncedQuery, setDebouncedQuery] = useState('');
+    const [matches, setMatches] = useState([]);
+    const [currentMatchIndex, setCurrentMatchIndex] = useState(0);
+    const inputRef = useRef(null);
+    const highlightLayerRef = useRef(null);
+    const debounceTimerRef = useRef(null);
+    const pendingMatchOffsetRef = useRef(null);
+    const lastContentRef = useRef('');
+    useEffect(() => {
+        const handleExternalSearch = (event) => {
+            const customEvent = event;
+            const queryText = customEvent?.detail?.query ?? '';
+            const matchIndex = customEvent?.detail?.matchIndex;
+            pendingMatchOffsetRef.current = typeof matchIndex === 'number' ? matchIndex : null;
+            setIsOpen(true);
+            setQuery(queryText);
+            setDebouncedQuery(queryText);
+            setTimeout(() => {
+                inputRef.current?.focus();
+                inputRef.current?.select();
+            }, 0);
+        };
+        window.addEventListener('slashmd:search', handleExternalSearch);
+        return () => window.removeEventListener('slashmd:search', handleExternalSearch);
+    }, []);
+    // Debounce the query
+    useEffect(() => {
+        if (debounceTimerRef.current !== null) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = window.setTimeout(() => {
+            setDebouncedQuery(query);
+            debounceTimerRef.current = null;
+        }, SEARCH_DEBOUNCE_MS);
+        return () => {
+            if (debounceTimerRef.current !== null) {
+                clearTimeout(debounceTimerRef.current);
+            }
+        };
+    }, [query]);
+    // Get all text nodes recursively - defined as a regular function to allow recursion
+    const getAllTextNodes = useCallback((startNode) => {
+        const textNodes = [];
+        // Inner recursive function
+        const collect = (node) => {
+            if ($isTextNode(node)) {
+                textNodes.push(node);
+            }
+            if ('getChildren' in node && typeof node.getChildren === 'function') {
+                const children = node.getChildren();
+                children.forEach((child) => {
+                    collect(child);
+                });
+            }
+        };
+        collect(startNode);
+        return textNodes;
+    }, []);
+    // Find all text matches in the editor
+    const findMatches = useCallback((searchQuery) => {
+        if (!searchQuery.trim())
+            return [];
+        const foundMatches = [];
+        const lowerQuery = searchQuery.toLowerCase();
+        editor.getEditorState().read(() => {
+            const root = $getRoot();
+            const textNodes = getAllTextNodes(root);
+            let runningOffset = 0;
+            textNodes.forEach((node) => {
+                const text = node.getTextContent().toLowerCase();
+                let startIndex = 0;
+                while (true) {
+                    const matchIndex = text.indexOf(lowerQuery, startIndex);
+                    if (matchIndex === -1)
+                        break;
+                    foundMatches.push({
+                        node,
+                        startOffset: matchIndex,
+                        endOffset: matchIndex + searchQuery.length,
+                        index: foundMatches.length,
+                        globalOffset: runningOffset + matchIndex,
+                    });
+                    startIndex = matchIndex + 1;
+                }
+                runningOffset += node.getTextContent().length;
+            });
+        });
+        return foundMatches;
+    }, [editor, getAllTextNodes]);
+    // Run search when debounced query changes
+    useEffect(() => {
+        const found = findMatches(debouncedQuery);
+        setMatches(found);
+        if (found.length === 0) {
+            setCurrentMatchIndex(-1);
+            return;
+        }
+        if (pendingMatchOffsetRef.current !== null) {
+            const targetOffset = pendingMatchOffsetRef.current;
+            const closest = found.reduce((best, match) => {
+                const distance = Math.abs(match.globalOffset - targetOffset);
+                if (!best || distance < best.distance) {
+                    return { index: match.index, distance };
+                }
+                return best;
+            }, null);
+            setCurrentMatchIndex(closest ? closest.index : 0);
+            pendingMatchOffsetRef.current = null;
+            return;
+        }
+        setCurrentMatchIndex(0);
+    }, [debouncedQuery, findMatches]);
+    // Find the actual text node in the DOM
+    const findTextNodeWithContent = useCallback((element, content) => {
+        const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+        let node;
+        while ((node = walker.nextNode())) {
+            if (node.textContent?.includes(content.substring(0, Math.min(content.length, 10)))) {
+                return node;
+            }
+        }
+        // Fallback: just return the first text node
+        const textWalker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+        return textWalker.nextNode();
+    }, []);
+    // Create highlight overlay for matches
+    const updateHighlights = useCallback(() => {
+        // Remove existing highlights
+        if (highlightLayerRef.current) {
+            highlightLayerRef.current.remove();
+            highlightLayerRef.current = null;
+        }
+        if (matches.length === 0 || !debouncedQuery.trim())
+            return;
+        // Create highlight layer
+        const editorElement = editor.getRootElement();
+        if (!editorElement)
+            return;
+        const editorContainer = editorElement.closest('.editor-container');
+        if (!editorContainer)
+            return;
+        // Create highlight container
+        const highlightLayer = document.createElement('div');
+        highlightLayer.className = 'search-highlight-layer';
+        editorContainer.appendChild(highlightLayer);
+        highlightLayerRef.current = highlightLayer;
+        // Get container bounds for positioning (use container, not editor element)
+        const containerRect = editorContainer.getBoundingClientRect();
+        matches.forEach((match, idx) => {
+            editor.getEditorState().read(() => {
+                const key = match.node.getKey();
+                const domElement = editor.getElementByKey(key);
+                if (!domElement)
+                    return;
+                // Find the text node within the DOM element
+                const textNode = findTextNodeWithContent(domElement, match.node.getTextContent());
+                if (!textNode)
+                    return;
+                // Create a range for the match
+                const range = document.createRange();
+                try {
+                    range.setStart(textNode, match.startOffset);
+                    range.setEnd(textNode, match.endOffset);
+                }
+                catch {
+                    return;
+                }
+                // Get the bounding rectangles for the range
+                const rects = Array.from(range.getClientRects());
+                for (const rect of rects) {
+                    const highlight = document.createElement('div');
+                    highlight.className = `search-highlight ${idx === currentMatchIndex ? 'current' : ''}`;
+                    // Position relative to the container, accounting for scroll
+                    highlight.style.left = `${rect.left - containerRect.left + editorContainer.scrollLeft}px`;
+                    highlight.style.top = `${rect.top - containerRect.top + editorContainer.scrollTop}px`;
+                    highlight.style.width = `${rect.width}px`;
+                    highlight.style.height = `${rect.height}px`;
+                    highlightLayer.appendChild(highlight);
+                }
+            });
+        });
+    }, [editor, matches, currentMatchIndex, debouncedQuery, findTextNodeWithContent]);
+    // Scroll to current match
+    // setSelection parameter controls whether to set Lexical selection (which steals focus)
+    // - true (default): Set selection AND scroll (for navigation via Enter/buttons)
+    // - false: Only scroll, no selection (for soft scroll during typing)
+    const scrollToMatch = useCallback((matchIndex, setSelection = true) => {
+        if (matches.length === 0 || matchIndex < 0 || matchIndex >= matches.length)
+            return;
+        const match = matches[matchIndex];
+        // Only set Lexical selection when explicitly navigating
+        if (setSelection) {
+            editor.update(() => {
+                const selection = $createRangeSelection();
+                selection.anchor.set(match.node.getKey(), match.startOffset, 'text');
+                selection.focus.set(match.node.getKey(), match.endOffset, 'text');
+                $setSelection(selection);
+            });
+        }
+        // Always scroll (no focus change)
+        editor.getEditorState().read(() => {
+            const key = match.node.getKey();
+            const domElement = editor.getElementByKey(key);
+            if (domElement) {
+                domElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+    }, [editor, matches]);
+    // Navigate to next match
+    const goToNextMatch = useCallback(() => {
+        if (matches.length === 0)
+            return;
+        const nextIndex = (currentMatchIndex + 1) % matches.length;
+        setCurrentMatchIndex(nextIndex);
+        scrollToMatch(nextIndex, true); // Explicit selection for navigation
+    }, [matches, currentMatchIndex, scrollToMatch]);
+    // Navigate to previous match
+    const goToPrevMatch = useCallback(() => {
+        if (matches.length === 0)
+            return;
+        const prevIndex = currentMatchIndex <= 0 ? matches.length - 1 : currentMatchIndex - 1;
+        setCurrentMatchIndex(prevIndex);
+        scrollToMatch(prevIndex, true); // Explicit selection for navigation
+    }, [matches, currentMatchIndex, scrollToMatch]);
+    // Close search
+    const closeSearch = useCallback(() => {
+        // Set selection at current match before closing (if we have a valid match)
+        // This allows user to immediately edit at the found location after pressing Escape
+        scrollToMatch(currentMatchIndex, true);
+        // Save scroll position before any DOM changes
+        const scrollY = window.scrollY;
+        const scrollX = window.scrollX;
+        setIsOpen(false);
+        setQuery('');
+        setDebouncedQuery('');
+        setMatches([]);
+        setCurrentMatchIndex(-1);
+        // Remove highlights
+        if (highlightLayerRef.current) {
+            highlightLayerRef.current.remove();
+            highlightLayerRef.current = null;
+        }
+        // Return focus to editor without scrolling
+        const editorElement = editor.getRootElement();
+        if (editorElement) {
+            // Use preventScroll to avoid jumping
+            editorElement.focus({ preventScroll: true });
+        }
+        // Restore scroll position in case it shifted
+        requestAnimationFrame(() => {
+            window.scrollTo(scrollX, scrollY);
+        });
+    }, [editor, scrollToMatch, currentMatchIndex]);
+    // Update highlights when matches or current index changes
+    useEffect(() => {
+        if (isOpen) {
+            updateHighlights();
+        }
+    }, [isOpen, matches, currentMatchIndex, updateHighlights]);
+    // Update highlights on scroll
+    useEffect(() => {
+        if (!isOpen || matches.length === 0)
+            return;
+        const editorElement = editor.getRootElement();
+        if (!editorElement)
+            return;
+        const handleScroll = () => {
+            requestAnimationFrame(updateHighlights);
+        };
+        // Listen on window and editor container for scroll events
+        window.addEventListener('scroll', handleScroll, true);
+        return () => {
+            window.removeEventListener('scroll', handleScroll, true);
+        };
+    }, [isOpen, matches.length, editor, updateHighlights]);
+    // Cleanup highlights on unmount or when closing
+    useEffect(() => {
+        return () => {
+            if (highlightLayerRef.current) {
+                highlightLayerRef.current.remove();
+                highlightLayerRef.current = null;
+            }
+        };
+    }, []);
+    // Re-update highlights when editor content changes
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const unregister = editor.registerUpdateListener(({ editorState }) => {
+            if (!debouncedQuery)
+                return;
+            const textContent = editorState.read(() => $getRoot().getTextContent());
+            if (textContent === lastContentRef.current)
+                return;
+            lastContentRef.current = textContent;
+            const found = findMatches(debouncedQuery);
+            setMatches(found);
+            // Keep current index in bounds
+            setCurrentMatchIndex(prev => found.length === 0 ? -1 : Math.min(prev, found.length - 1));
+        });
+        return unregister;
+    }, [editor, isOpen, debouncedQuery, findMatches]);
+    // Handle keyboard shortcuts
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            // Cmd+F or Ctrl+F to open search
+            if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
+                e.preventDefault();
+                e.stopPropagation();
+                setIsOpen(true);
+                // Focus input after render
+                setTimeout(() => {
+                    inputRef.current?.focus();
+                    inputRef.current?.select();
+                }, 0);
+                return;
+            }
+            // Only handle these if search is open
+            if (!isOpen)
+                return;
+            // Escape to close
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                closeSearch();
+                return;
+            }
+            // Enter to go to next, Shift+Enter to go to previous
+            if (e.key === 'Enter' && document.activeElement === inputRef.current) {
+                e.preventDefault();
+                if (e.shiftKey) {
+                    goToPrevMatch();
+                }
+                else {
+                    goToNextMatch();
+                }
+                return;
+            }
+            // Cmd+G or Ctrl+G for next match (even when not focused on input)
+            if ((e.metaKey || e.ctrlKey) && e.key === 'g') {
+                e.preventDefault();
+                if (e.shiftKey) {
+                    goToPrevMatch();
+                }
+                else {
+                    goToNextMatch();
+                }
+                return;
+            }
+        };
+        // Use capture phase to intercept before browser default
+        document.addEventListener('keydown', handleKeyDown, true);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown, true);
+        };
+    }, [isOpen, closeSearch, goToNextMatch, goToPrevMatch]);
+    // Scroll to first match when search results appear (soft scroll, no selection)
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        if (matches.length > 0 && currentMatchIndex >= 0) {
+            scrollToMatch(currentMatchIndex, false); // Soft scroll only - don't steal focus from input
+        }
+    }, [isOpen, matches, currentMatchIndex, scrollToMatch]);
+    if (!isOpen)
+        return null;
+    return (_jsxs("div", { className: "search-bar", children: [_jsxs("div", { className: "search-input-wrapper", children: [_jsx("svg", { className: "search-icon", viewBox: "0 0 24 24", width: "16", height: "16", children: _jsx("path", { fill: "currentColor", d: "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }) }), _jsx("input", { ref: inputRef, type: "text", className: "search-input", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search...", autoFocus: true }), query && (_jsx("span", { className: "search-count", children: matches.length > 0
+                            ? `${currentMatchIndex + 1} of ${matches.length}`
+                            : debouncedQuery !== query ? '...' : 'No results' }))] }), _jsxs("div", { className: "search-buttons", children: [_jsx("button", { type: "button", className: "search-nav-button", onClick: goToPrevMatch, disabled: matches.length === 0, title: "Previous match (Shift+Enter)", "aria-label": "Previous match", children: _jsx("svg", { viewBox: "0 0 24 24", width: "16", height: "16", children: _jsx("path", { fill: "currentColor", d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" }) }) }), _jsx("button", { type: "button", className: "search-nav-button", onClick: goToNextMatch, disabled: matches.length === 0, title: "Next match (Enter)", "aria-label": "Next match", children: _jsx("svg", { viewBox: "0 0 24 24", width: "16", height: "16", children: _jsx("path", { fill: "currentColor", d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z" }) }) }), _jsx("button", { type: "button", className: "search-close-button", onClick: closeSearch, title: "Close (Escape)", "aria-label": "Close search", children: _jsx("svg", { viewBox: "0 0 24 24", width: "16", height: "16", children: _jsx("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] })] }));
+}

package/dist/app/editor/SelectionContextMenuPlugin.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Lexical plugin that shows a context menu when right-clicking a text selection.
+ * Provides a "Chat about this..." action that passes the selected text and click
+ * position to the host via callback, plus one entry per configured
+ * `contextMenu`-surfaced annotation kind (ADR-077) — `correction` additionally
+ * opens the legacy inline correction panel.
+ *
+ * Follows the TableActionsPlugin pattern for attaching to the editor root element,
+ * and the DiagramContextMenu pattern for the overlay menu UI.
+ */
+export interface SelectionContextMenuEvent {
+    position: {
+        x: number;
+        y: number;
+    };
+    selectedText: string;
+}
+/** One context-menu-surfaced annotation kind's affordance, plain data only (FR-004/FR-010). */
+export interface ContextMenuAnnotationAffordance {
+    kind: string;
+    label: string;
+}
+interface SelectionContextMenuPluginProps {
+    onSelectionContextMenu?: (event: SelectionContextMenuEvent) => void;
+    /** One entry per configured kind whose `createAffordance.surface` is `contextMenu` (ADR-077). */
+    annotationAffordances?: ContextMenuAnnotationAffordance[];
+}
+export declare function SelectionContextMenuPlugin({ onSelectionContextMenu, annotationAffordances, }: SelectionContextMenuPluginProps): import("react").JSX.Element;
+export {};

package/dist/app/editor/SelectionContextMenuPlugin.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Lexical plugin that shows a context menu when right-clicking a text selection.
+ * Provides a "Chat about this..." action that passes the selected text and click
+ * position to the host via callback, plus one entry per configured
+ * `contextMenu`-surfaced annotation kind (ADR-077) — `correction` additionally
+ * opens the legacy inline correction panel.
+ *
+ * Follows the TableActionsPlugin pattern for attaching to the editor root element,
+ * and the DiagramContextMenu pattern for the overlay menu UI.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { OPEN_ANNOTATION_COMPOSER_COMMAND } from './annotationCommands.js';
+import { $getSelection, $isRangeSelection } from 'lexical';
+import { useCorrectionStore } from '../../stores/correctionStore.js';
+// --- Menu overlay component ---
+const menuStyle = {
+    position: 'fixed',
+    zIndex: 10000,
+    borderRadius: '6px',
+    padding: '4px 0',
+    minWidth: '180px',
+};
+const itemStyle = {
+    display: 'block',
+    width: '100%',
+    padding: '6px 12px',
+    background: 'transparent',
+    border: 'none',
+    fontSize: '13px',
+    textAlign: 'left',
+    cursor: 'pointer',
+    fontFamily: 'system-ui, -apple-system, sans-serif',
+};
+function SelectionContextMenu({ visible, x, y, selectedText, onChatAboutThis, annotationAffordances, onCreateAnnotation, onClose, }) {
+    const menuRef = useRef(null);
+    const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+    const bgColor = `var(--vscode-menu-background, ${isDark ? '#252526' : '#ffffff'})`;
+    const borderColor = `var(--vscode-menu-border, ${isDark ? '#454545' : '#d4d4d4'})`;
+    const textColor = `var(--vscode-menu-foreground, ${isDark ? '#cccccc' : '#333333'})`;
+    const hoverBg = `var(--vscode-menu-selectionBackground, ${isDark ? '#094771' : '#e8e8e8'})`;
+    useEffect(() => {
+        if (!visible)
+            return;
+        const handleClick = (e) => {
+            if (menuRef.current && !menuRef.current.contains(e.target)) {
+                onClose();
+            }
+        };
+        const handleKey = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('mousedown', handleClick);
+        document.addEventListener('keydown', handleKey);
+        return () => {
+            document.removeEventListener('mousedown', handleClick);
+            document.removeEventListener('keydown', handleKey);
+        };
+    }, [visible, onClose]);
+    if (!visible)
+        return null;
+    const handleHover = (e, entering) => {
+        e.currentTarget.style.background = entering ? hoverBg : 'transparent';
+    };
+    const handleAnnotationClick = (kind) => {
+        // Every kind on this surface enters the same shared capture path
+        // (ADR-077). `correction` additionally opens the legacy, name-gated
+        // correction panel (Out-of-Scope: this generalizes only the dispatch, not
+        // the panel). The `correction` kind discards its transient mark, so
+        // nothing paints and the panel's visible behaviour is unchanged. A host
+        // that supplies no `onCreateAnnotation` (as liminis-app does not) has no
+        // handler registered for the command, so dispatch is simply a no-op there.
+        //
+        // CAUTION for future hosts: if a host ever configures a kind literally
+        // named `correction` *and* supplies `onCreateAnnotation`, both fire off
+        // this one click — the host's generic create flow and this hardcoded
+        // legacy panel, with no coordination between them. See the caveat on
+        // `AnnotationKindConfig` in `annotations/types.ts`.
+        onCreateAnnotation(kind);
+        if (kind === 'correction') {
+            useCorrectionStore.getState().open({ x, y }, selectedText);
+        }
+        onClose();
+    };
+    return (_jsxs("div", { ref: menuRef, 
+        // Keep the document selection alive across a menu click. This overlay is
+        // a fixed-position sibling of the contenteditable, so pressing a button
+        // in it moves focus out of the editor on `mousedown` and collapses
+        // `window.getSelection()` — before any `onClick` handler runs. The
+        // annotation create path reads that native selection
+        // (`AnnotationPlugin`) and bails silently on a collapsed one, so a
+        // contextMenu-surfaced kind would capture no anchor while the correction
+        // panel still opened as if nothing had gone wrong (review finding,
+        // @handarbeit-pruefer). Preventing the default mousedown action stops
+        // the focus shift without affecting the subsequent click.
+        //
+        // Liminis doesn't feel this today only because it supplies no
+        // `onCreateAnnotation`, leaving the command unlistened — i.e. it would
+        // have bitten the first host to wire the callback up.
+        onMouseDown: (e) => e.preventDefault(), style: {
+            ...menuStyle,
+            left: x,
+            top: y,
+            background: bgColor,
+            border: `1px solid ${borderColor}`,
+            boxShadow: isDark ? '0 4px 12px rgba(0,0,0,0.3)' : '0 4px 12px rgba(0,0,0,0.12)',
+        }, children: [onChatAboutThis && (_jsx("button", { onClick: () => { onChatAboutThis(); onClose(); }, style: { ...itemStyle, color: textColor }, onMouseEnter: (e) => handleHover(e, true), onMouseLeave: (e) => handleHover(e, false), children: "Chat about this\u2026" })), onChatAboutThis && annotationAffordances.length > 0 && (_jsx("hr", { style: { margin: '4px 0', border: 'none', borderTop: `1px solid ${borderColor}` } })), annotationAffordances.map(({ kind, label }) => (_jsx("button", { onClick: () => handleAnnotationClick(kind), style: { ...itemStyle, color: textColor }, onMouseEnter: (e) => handleHover(e, true), onMouseLeave: (e) => handleHover(e, false), children: label }, kind)))] }));
+}
+// --- Plugin ---
+export function SelectionContextMenuPlugin({ onSelectionContextMenu, annotationAffordances = [], }) {
+    const [editor] = useLexicalComposerContext();
+    const [menuState, setMenuState] = useState({ visible: false, x: 0, y: 0, selectedText: '' });
+    const close = useCallback(() => {
+        setMenuState((prev) => ({ ...prev, visible: false }));
+    }, []);
+    useEffect(() => {
+        const handleContextMenu = (e) => {
+            editor.getEditorState().read(() => {
+                const selection = $getSelection();
+                if (!$isRangeSelection(selection) || selection.isCollapsed())
+                    return;
+                const selectedText = selection.getTextContent();
+                if (!selectedText.trim())
+                    return;
+                e.preventDefault();
+                setMenuState({
+                    visible: true,
+                    x: e.clientX,
+                    y: e.clientY,
+                    selectedText,
+                });
+            });
+        };
+        const editorElement = editor.getRootElement();
+        if (editorElement) {
+            editorElement.addEventListener('contextmenu', handleContextMenu);
+            return () => editorElement.removeEventListener('contextmenu', handleContextMenu);
+        }
+    }, [editor]);
+    // Dispatching the command rather than calling the capture primitive
+    // directly is deliberate: `annotationCommands` declares the command and
+    // nothing else, so this statically-imported plugin can enter the annotation
+    // mechanism without pulling any annotation machinery into the default
+    // (annotations-disabled) import graph. The listener lives in the lazily
+    // loaded surface, and is simply absent when annotations are off.
+    const dispatchCreateAnnotation = useCallback((kind) => {
+        editor.dispatchCommand(OPEN_ANNOTATION_COMPOSER_COMMAND, { kind });
+    }, [editor]);
+    const handleChatAboutThis = useCallback(() => {
+        if (onSelectionContextMenu && menuState.selectedText) {
+            onSelectionContextMenu({
+                position: { x: menuState.x, y: menuState.y },
+                selectedText: menuState.selectedText,
+            });
+        }
+    }, [onSelectionContextMenu, menuState]);
+    return (_jsx(SelectionContextMenu, { visible: menuState.visible, x: menuState.x, y: menuState.y, selectedText: menuState.selectedText, onChatAboutThis: onSelectionContextMenu ? handleChatAboutThis : null, annotationAffordances: annotationAffordances, onCreateAnnotation: dispatchCreateAnnotation, onClose: close }));
+}

package/dist/app/editor/SlashMenu.d.ts

@@ -0,0 +1,11 @@
+interface SlashMenuProps {
+    isOpen: boolean;
+    position: {
+        top: number;
+        left: number;
+    } | null;
+    query: string;
+    onClose: () => void;
+}
+export declare function SlashMenu({ isOpen, position, query, onClose }: SlashMenuProps): import("react").JSX.Element | null;
+export {};