@liminis/editor 0.1.0-rc.1

package/dist/app/editor/DragHandlePlugin.js

@@ -0,0 +1,300 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getNodeByKey, $getSelection, $isRangeSelection, $createParagraphNode } from 'lexical';
+// Find the top-level block element (direct child of editor root)
+function getBlockElement(target, editorRoot) {
+    let element = target;
+    // Walk up until we find a direct child of the editor root
+    while (element && element.parentElement !== editorRoot) {
+        element = element.parentElement;
+    }
+    // Return the element if it's a valid block (direct child of editor root)
+    if (element?.parentElement === editorRoot) {
+        return element;
+    }
+    return null;
+}
+// Find block element based on Y position
+function getBlockElementAtY(y, editorRoot) {
+    for (const child of editorRoot.children) {
+        const rect = child.getBoundingClientRect();
+        if (y >= rect.top && y <= rect.bottom) {
+            return child;
+        }
+    }
+    return null;
+}
+// Get the node key from a block element's internal Lexical property
+function getNodeKeyFromBlockElement(element) {
+    // Lexical stores the key in __lexicalKey_[editorKey] property
+    const keys = Object.keys(element);
+    for (const key of keys) {
+        if (key.startsWith('__lexicalKey_')) {
+            return element[key] || null;
+        }
+    }
+    return null;
+}
+export function DragHandlePlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [isEditable, setIsEditable] = useState(editor.isEditable());
+    const [dragState, setDragState] = useState({
+        isVisible: false,
+        position: { top: 0, left: 0 },
+        nodeKey: null,
+        blockElement: null,
+    });
+    const [isDragging, setIsDragging] = useState(false);
+    const [dropIndicator, setDropIndicator] = useState(null);
+    const draggedNodeKey = useRef(null);
+    const dropTargetKey = useRef(null);
+    const dropPosition = useRef('after');
+    const handleRef = useRef(null);
+    // Use ref to access isDragging in event handlers without causing re-registration
+    const isDraggingRef = useRef(false);
+    // Sync isDragging state to ref (must be in effect, not during render)
+    useEffect(() => {
+        isDraggingRef.current = isDragging;
+    }, [isDragging]);
+    // Track editable state changes
+    useEffect(() => {
+        return editor.registerEditableListener((editable) => {
+            setIsEditable(editable);
+        });
+    }, [editor]);
+    // Listen for selection changes to hide handle when navigating via keyboard
+    useEffect(() => {
+        return editor.registerUpdateListener(({ editorState }) => {
+            if (isDraggingRef.current)
+                return;
+            editorState.read(() => {
+                const selection = $getSelection();
+                if (!$isRangeSelection(selection)) {
+                    setDragState((prev) => ({ ...prev, isVisible: false }));
+                    return;
+                }
+                // Get the current anchor node and find its top-level block
+                const anchorNode = selection.anchor.getNode();
+                const topLevelElement = anchorNode.getTopLevelElement();
+                if (!topLevelElement) {
+                    setDragState((prev) => ({ ...prev, isVisible: false }));
+                    return;
+                }
+                const nodeKey = topLevelElement.getKey();
+                const editorElement = editor.getRootElement();
+                if (!editorElement)
+                    return;
+                // Find the DOM element for this node
+                const blockElement = editor.getElementByKey(nodeKey);
+                if (!blockElement) {
+                    setDragState((prev) => ({ ...prev, isVisible: false }));
+                    return;
+                }
+                const rect = blockElement.getBoundingClientRect();
+                const editorRect = editorElement.getBoundingClientRect();
+                setDragState({
+                    isVisible: true,
+                    position: {
+                        top: rect.top - editorRect.top,
+                        left: 0,
+                    },
+                    nodeKey,
+                    blockElement,
+                });
+            });
+        });
+    }, [editor]);
+    useEffect(() => {
+        const editorElement = editor.getRootElement();
+        if (!editorElement)
+            return;
+        // Get the .editor-inner container (parent of editor root)
+        const editorInner = editorElement.closest('.editor-inner');
+        if (!editorInner)
+            return;
+        const handleMouseMove = (event) => {
+            if (isDraggingRef.current)
+                return;
+            const mouseEvent = event;
+            const target = mouseEvent.target;
+            // Ignore if hovering over the drag handle itself
+            if (target.closest('.drag-handle')) {
+                return;
+            }
+            // Try to find block element directly under cursor
+            let blockElement = getBlockElement(target, editorElement);
+            // If not found (e.g., in padding area), find by Y position
+            if (!blockElement) {
+                blockElement = getBlockElementAtY(mouseEvent.clientY, editorElement);
+            }
+            if (blockElement) {
+                const nodeKey = getNodeKeyFromBlockElement(blockElement);
+                if (nodeKey) {
+                    const rect = blockElement.getBoundingClientRect();
+                    const editorRect = editorElement.getBoundingClientRect();
+                    setDragState({
+                        isVisible: true,
+                        position: {
+                            top: rect.top - editorRect.top,
+                            left: 0,
+                        },
+                        nodeKey,
+                        blockElement,
+                    });
+                }
+            }
+            else {
+                setDragState((prev) => ({ ...prev, isVisible: false }));
+            }
+        };
+        const handleMouseLeave = () => {
+            if (isDraggingRef.current)
+                return;
+            setDragState((prev) => ({ ...prev, isVisible: false }));
+        };
+        // Native drag events for drop handling
+        const handleDragOver = (event) => {
+            const dragEvent = event;
+            if (!draggedNodeKey.current)
+                return;
+            dragEvent.preventDefault();
+            dragEvent.dataTransfer.dropEffect = 'move';
+            const target = dragEvent.target;
+            let blockElement = getBlockElement(target, editorElement);
+            if (!blockElement) {
+                blockElement = getBlockElementAtY(dragEvent.clientY, editorElement);
+            }
+            if (blockElement) {
+                const nodeKey = getNodeKeyFromBlockElement(blockElement);
+                if (nodeKey && nodeKey !== draggedNodeKey.current) {
+                    dropTargetKey.current = nodeKey;
+                    // Determine if dropping before or after based on cursor position
+                    const rect = blockElement.getBoundingClientRect();
+                    const midpoint = rect.top + rect.height / 2;
+                    dropPosition.current = dragEvent.clientY < midpoint ? 'before' : 'after';
+                    // Show drop indicator
+                    const editorRect = editorElement.getBoundingClientRect();
+                    const indicatorTop = dropPosition.current === 'before'
+                        ? rect.top - editorRect.top
+                        : rect.bottom - editorRect.top;
+                    setDropIndicator({ top: indicatorTop });
+                }
+            }
+        };
+        const handleDrop = (event) => {
+            const dragEvent = event;
+            dragEvent.preventDefault();
+            if (draggedNodeKey.current && dropTargetKey.current) {
+                editor.update(() => {
+                    const draggedNode = $getNodeByKey(draggedNodeKey.current);
+                    const targetNode = $getNodeByKey(dropTargetKey.current);
+                    if (draggedNode && targetNode && draggedNode !== targetNode) {
+                        if (dropPosition.current === 'before') {
+                            targetNode.insertBefore(draggedNode);
+                        }
+                        else {
+                            targetNode.insertAfter(draggedNode);
+                        }
+                    }
+                });
+            }
+            // Reset state
+            draggedNodeKey.current = null;
+            dropTargetKey.current = null;
+            setIsDragging(false);
+            setDropIndicator(null);
+        };
+        const handleDragLeave = (event) => {
+            const dragEvent = event;
+            // Only hide indicator if leaving the editor entirely
+            const relatedTarget = dragEvent.relatedTarget;
+            if (!relatedTarget || !editorInner.contains(relatedTarget)) {
+                setDropIndicator(null);
+            }
+        };
+        editorInner.addEventListener('mousemove', handleMouseMove);
+        editorInner.addEventListener('mouseleave', handleMouseLeave);
+        editorInner.addEventListener('dragover', handleDragOver);
+        editorInner.addEventListener('drop', handleDrop);
+        editorInner.addEventListener('dragleave', handleDragLeave);
+        return () => {
+            editorInner.removeEventListener('mousemove', handleMouseMove);
+            editorInner.removeEventListener('mouseleave', handleMouseLeave);
+            editorInner.removeEventListener('dragover', handleDragOver);
+            editorInner.removeEventListener('drop', handleDrop);
+            editorInner.removeEventListener('dragleave', handleDragLeave);
+        };
+    }, [editor]);
+    const handleDragStart = (event) => {
+        if (dragState.nodeKey) {
+            draggedNodeKey.current = dragState.nodeKey;
+            setIsDragging(true);
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', dragState.nodeKey);
+            // Set a drag image
+            if (dragState.blockElement) {
+                event.dataTransfer.setDragImage(dragState.blockElement, 0, 0);
+            }
+        }
+    };
+    const handleDragEnd = () => {
+        setIsDragging(false);
+        setDropIndicator(null);
+        draggedNodeKey.current = null;
+        dropTargetKey.current = null;
+    };
+    const handleDelete = useCallback(() => {
+        if (!dragState.nodeKey)
+            return;
+        editor.update(() => {
+            const node = $getNodeByKey(dragState.nodeKey);
+            if (node) {
+                // If this is the only node, replace with empty paragraph
+                const parent = node.getParent();
+                if (parent?.getChildrenSize() === 1) {
+                    const paragraph = $createParagraphNode();
+                    node.replace(paragraph);
+                    paragraph.selectStart();
+                }
+                else {
+                    // Select the next or previous node before removing
+                    const nextSibling = node.getNextSibling();
+                    const prevSibling = node.getPreviousSibling();
+                    node.remove();
+                    if (nextSibling) {
+                        nextSibling.selectStart();
+                    }
+                    else if (prevSibling) {
+                        prevSibling.selectEnd();
+                    }
+                }
+            }
+        });
+        setDragState((prev) => ({ ...prev, isVisible: false }));
+    }, [editor, dragState.nodeKey]);
+    // Don't render drag handle or delete button in read-only mode
+    if (!isEditable) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [dragState.isVisible && (_jsxs(_Fragment, { children: [_jsx("div", { ref: handleRef, className: `drag-handle ${isDragging ? 'dragging' : ''}`, style: {
+                            position: 'absolute',
+                            top: dragState.position.top,
+                            left: dragState.position.left,
+                            transform: 'translateX(-100%)',
+                        }, draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, "aria-label": "Drag to reorder block", role: "button", tabIndex: 0, children: _jsx("span", { className: "drag-handle-icon", children: "\u22EE\u22EE" }) }), _jsx("button", { className: "block-delete-button", style: {
+                            position: 'absolute',
+                            top: dragState.position.top,
+                            right: 0,
+                            transform: 'translateX(100%)',
+                        }, onClick: handleDelete, "aria-label": "Delete block", title: "Delete block", tabIndex: 0, children: _jsx("span", { className: "block-delete-icon", children: "\u00D7" }) })] })), dropIndicator && (_jsx("div", { className: "drop-indicator", style: {
+                    position: 'absolute',
+                    top: dropIndicator.top,
+                    left: 0,
+                    right: 0,
+                    height: 2,
+                    background: 'var(--vscode-focusBorder, #007acc)',
+                    pointerEvents: 'none',
+                    zIndex: 100,
+                } }))] }));
+}

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

@@ -0,0 +1,84 @@
+import { type MutableRefObject } from 'react';
+import type { SelectionContextMenuEvent } from './SelectionContextMenuPlugin.js';
+import { type SweepFn } from './AmbientCorrectionPlugin.js';
+import type { Annotation, AnnotationEditorHandle, AnnotationKindConfigs } from '../../annotations/types.js';
+import type { AnnotationCreateEvent } from './AnnotationPlugin.js';
+import { type WikiLinkPromotionMode } from '../mapper/lexicalToMdast.js';
+import type { ImagePathResolution } from '../../types.js';
+import type { CursorState } from '../App.js';
+interface EditorProps {
+    initialContent: string;
+    /**
+     * Whether the editor takes focus shortly after mounting. Defaults to
+     * `false`: an embedded editor does not know whether it is the surface the
+     * user is working in, and the host does.
+     *
+     * Opt in where opening the editor *is* the user's action — clicking a
+     * document to edit it. Do not opt in for an editor that mounts beside
+     * something else the user may be typing in, renders in a preview or a list,
+     * or remounts while focus belongs elsewhere.
+     *
+     * This defaulted to on until it was found to steal the caret out of
+     * whatever the user was actually using. Focus is taken on a timer after
+     * mount, so a host cannot reliably take it back afterwards — it has to be
+     * declined up front, which is why this is a prop and not something to work
+     * around at the call site.
+     */
+    autoFocus?: boolean;
+    contentVersion?: number;
+    /** Ref to cursor state - read inside effects, not during render */
+    cursorToRestoreRef?: React.RefObject<CursorState | null>;
+    onChange: (markdown: string) => void;
+    onCursorChange?: (cursor: CursorState) => void;
+    onSelectionContextMenu?: (event: SelectionContextMenuEvent) => void;
+    assetBaseUri?: string;
+    documentDirUri?: string;
+    imagePathResolution?: ImagePathResolution;
+    /**
+     * Whether an untitled relative link (a `.md` path, a `.md` path with an
+     * anchor, a bare `#anchor`, or a directory-style path) is promoted to
+     * wiki-link syntax on export. Defaults to `'promote'`, today's only
+     * behavior — set to `'off'` for a host whose documents are rendered
+     * somewhere that doesn't understand wiki-link syntax (liminis#951). Never
+     * affects a genuine author-written `[[target]]` wiki-link, which always
+     * round-trips as one regardless of this setting.
+     */
+    wikiLinkPromotion?: WikiLinkPromotionMode;
+    /** Resolve a workspace-relative file path to a data URL for display */
+    resolveLocalAsset?: (relativePath: string) => Promise<string | null>;
+    /** When false, the editor is read-only */
+    editable?: boolean;
+    /** Path to the file being edited (used for file-type-specific UI like .mdc) */
+    filePath?: string;
+    /** Called when a single-word substitution is detected after a debounce window. */
+    onSubstitutionDetected?: (oldTerm: string, newTerm: string) => void;
+    /** Ref populated with a sweep function by AmbientCorrectionPlugin when active. */
+    sweepRef?: MutableRefObject<SweepFn | null>;
+    /**
+     * Per-kind configuration. Supplying this is what turns the annotation
+     * mechanism on; the kinds themselves are the only difference between
+     * features built on it (a comment kind vs. a correction kind).
+     */
+    annotationKinds?: AnnotationKindConfigs;
+    /** Host-supplied annotations to render markers for, already resolved by the host. */
+    annotations?: Annotation[];
+    /** Which annotation is currently active, for marker styling. */
+    activeAnnotationId?: string | null;
+    /** Host-driven scroll-to signal; `nonce` forces a re-scroll to the same id. */
+    scrollToAnnotation?: {
+        id: string;
+        nonce: number;
+    } | null;
+    /** Fires when a user creates an annotation via a kind's create affordance. */
+    onCreateAnnotation?: (event: AnnotationCreateEvent) => void;
+    /** Fires when a marker is activated; the host opens its own panel or thread. */
+    onActivateAnnotation?: (id: string) => void;
+    /** Populated with the imperative handle for the mounted editor's live marks. */
+    annotationEditorHandleRef?: MutableRefObject<AnnotationEditorHandle | null>;
+    /** Injected logger, so the package never imports a host logger (FR-010). */
+    annotationLogger?: {
+        warn: (message: string, ...args: unknown[]) => void;
+    };
+}
+export declare function Editor({ initialContent, autoFocus, contentVersion, cursorToRestoreRef, onChange, onCursorChange, onSelectionContextMenu, assetBaseUri, documentDirUri, imagePathResolution, wikiLinkPromotion, resolveLocalAsset, editable, filePath, onSubstitutionDetected, sweepRef, annotationKinds, annotations, activeAnnotationId, scrollToAnnotation, onCreateAnnotation, onActivateAnnotation, annotationEditorHandleRef, annotationLogger, }: EditorProps): import("react").JSX.Element;
+export {};