@rtif-sdk/web 1.0.0

package/dist/block-drag-handler.js

@@ -0,0 +1,745 @@
+/**
+ * Block drag-and-drop handler — enables reordering blocks via drag handles.
+ *
+ * Provides two main exports:
+ * - {@link computeMoveBlockOps} — Pure function that computes the RTIF operations
+ *   needed to move a block from one position to another.
+ * - {@link BlockDragHandler} — DOM event handler class that manages drag handles,
+ *   drag events, drop indicator, and dispatches move operations.
+ *
+ * Since RTIF has no `move_block` core operation, block reordering is composed
+ * from existing operations: `delete_text`, `merge_block`, `split_block`,
+ * `insert_text`, `set_block_type`, `set_block_attrs`, and `set_span_marks`.
+ *
+ * @module
+ */
+import { blockTextLength } from '@rtif-sdk/core';
+import { DropIndicator } from './drop-indicator.js';
+// ---------------------------------------------------------------------------
+// CSS class names
+// ---------------------------------------------------------------------------
+const CSS_HANDLE = 'rtif-drag-handle';
+const CSS_DRAGGING = 'rtif-block-dragging';
+const CSS_DRAG_OVER = 'rtif-block-drag-over';
+// ---------------------------------------------------------------------------
+// Pure helpers
+// ---------------------------------------------------------------------------
+/**
+ * Compute the shallow-merge diff needed to transform `currentAttrs` into
+ * `targetAttrs` via a single `set_block_attrs` operation.
+ *
+ * Returns `null` if no changes are needed (attrs are already equivalent).
+ *
+ * @param currentAttrs - The block's current attrs (may be undefined)
+ * @param targetAttrs - The desired attrs (may be undefined)
+ * @returns An attrs diff object for `set_block_attrs`, or null if no diff
+ *
+ * @example
+ * ```ts
+ * computeAttrsDiff({ level: 1 }, { level: 2 });
+ * // => { level: 2 }
+ *
+ * computeAttrsDiff({ level: 1, indent: 2 }, { color: 'red' });
+ * // => { level: null, indent: null, color: 'red' }
+ *
+ * computeAttrsDiff({ level: 1 }, { level: 1 });
+ * // => null
+ * ```
+ */
+export function computeAttrsDiff(currentAttrs, targetAttrs) {
+    const current = currentAttrs ?? {};
+    const target = targetAttrs ?? {};
+    const diff = {};
+    let hasChanges = false;
+    // Keys in current but not in target: remove (set to null)
+    for (const key of Object.keys(current)) {
+        if (!(key in target)) {
+            diff[key] = null;
+            hasChanges = true;
+        }
+    }
+    // Keys in target: set if different from current
+    for (const key of Object.keys(target)) {
+        if (current[key] !== target[key]) {
+            diff[key] = target[key];
+            hasChanges = true;
+        }
+    }
+    return hasChanges ? diff : null;
+}
+/**
+ * Compute the absolute document offset where a block begins.
+ *
+ * Sums all preceding block text lengths plus virtual `\n` separators.
+ *
+ * @param doc - The RTIF document
+ * @param blockIndex - The index of the block
+ * @returns The absolute offset of the block's first character
+ */
+function blockStartOffset(doc, blockIndex) {
+    let offset = 0;
+    for (let i = 0; i < blockIndex; i++) {
+        offset += blockTextLength(doc.blocks[i]) + 1; // +1 for virtual \n
+    }
+    return offset;
+}
+/**
+ * Concatenate all span texts in a block into a single string.
+ *
+ * @param block - The block to extract text from
+ * @returns The full text content of the block
+ */
+function blockFullText(block) {
+    return block.spans.map((s) => s.text).join('');
+}
+/**
+ * Compute the RTIF operations needed to move a block to a new position.
+ *
+ * This is a pure function that takes the current document, the block ID to
+ * move, and the desired target index in the final array. It returns an
+ * array of RTIF operations that, when applied in sequence, produce a
+ * document with the block at the target position.
+ *
+ * The algorithm has three phases:
+ * 1. **Remove** — Delete the source block's text and merge it away
+ * 2. **Create** — Split at the target position to create an empty block
+ * 3. **Restore** — Insert text, set type/attrs, apply marks
+ *
+ * Block IDs are preserved when the source block is not the first block
+ * and the target position is not 0. In the target=0 case, the moved
+ * block inherits the ID of the block that was previously at index 0.
+ *
+ * @param doc - The current RTIF document
+ * @param blockId - The ID of the block to move
+ * @param targetIndex - The desired final index (0-based) in the result
+ * @returns Array of operations to apply, or empty array if no move needed
+ *
+ * @example
+ * ```ts
+ * // Move third block to first position
+ * const ops = computeMoveBlockOps(doc, 'b3', 0);
+ * for (const op of ops) {
+ *   const result = apply(currentDoc, op);
+ *   currentDoc = result.doc;
+ * }
+ * ```
+ */
+export function computeMoveBlockOps(doc, blockId, targetIndex) {
+    const sourceIdx = doc.blocks.findIndex((b) => b.id === blockId);
+    // Guard: block not found, same position, or invalid target
+    if (sourceIdx === -1)
+        return [];
+    if (sourceIdx === targetIndex)
+        return [];
+    if (doc.blocks.length <= 1)
+        return [];
+    if (targetIndex < 0 || targetIndex >= doc.blocks.length)
+        return [];
+    const srcBlock = doc.blocks[sourceIdx];
+    const srcTextLen = blockTextLength(srcBlock);
+    const srcText = blockFullText(srcBlock);
+    const srcType = srcBlock.type;
+    const srcAttrs = srcBlock.attrs;
+    const srcSpans = srcBlock.spans;
+    const ops = [];
+    // ===================================================================
+    // PHASE 1: Remove the source block
+    // ===================================================================
+    const srcStartOff = blockStartOffset(doc, sourceIdx);
+    // Step 1a: Delete all text in the source block
+    if (srcTextLen > 0) {
+        ops.push({ type: 'delete_text', offset: srcStartOff, count: srcTextLen });
+    }
+    // Step 1b: Remove the now-empty block via merge
+    if (sourceIdx > 0) {
+        // Source is not the first block — merge into previous
+        ops.push({ type: 'merge_block', blockId });
+    }
+    else {
+        // Source IS the first block — merge second block into first
+        const secondBlock = doc.blocks[1];
+        ops.push({ type: 'merge_block', blockId: secondBlock.id });
+        // After merge, block[0] keeps srcBlock's id/type/attrs but has
+        // secondBlock's content. We need to fix type and attrs to match
+        // what secondBlock had (since that's what should remain at index 0).
+        if (srcType !== secondBlock.type) {
+            ops.push({
+                type: 'set_block_type',
+                blockId: srcBlock.id,
+                blockType: secondBlock.type,
+            });
+        }
+        const attrsDiff = computeAttrsDiff(srcAttrs, secondBlock.attrs);
+        if (attrsDiff !== null) {
+            ops.push({
+                type: 'set_block_attrs',
+                blockId: srcBlock.id,
+                attrs: attrsDiff,
+            });
+        }
+    }
+    // ===================================================================
+    // After Phase 1, we have N-1 blocks.
+    // Compute text lengths and ids of the reduced block array.
+    // ===================================================================
+    const reducedTextLens = [];
+    const reducedIds = [];
+    const reducedTypes = [];
+    const reducedAttrs = [];
+    if (sourceIdx > 0) {
+        // Removed sourceIdx; all others unchanged
+        for (let i = 0; i < doc.blocks.length; i++) {
+            if (i === sourceIdx)
+                continue;
+            const b = doc.blocks[i];
+            reducedTextLens.push(blockTextLength(b));
+            reducedIds.push(b.id);
+            reducedTypes.push(b.type);
+            reducedAttrs.push(b.attrs);
+        }
+    }
+    else {
+        // sourceIdx === 0: merged second into first
+        // Block 0 now has second block's text length (and after fixes, its type/attrs)
+        reducedTextLens.push(blockTextLength(doc.blocks[1]));
+        reducedIds.push(srcBlock.id); // keeps first block's id
+        reducedTypes.push(doc.blocks[1].type); // type was fixed
+        reducedAttrs.push(doc.blocks[1].attrs); // attrs were fixed
+        for (let i = 2; i < doc.blocks.length; i++) {
+            const b = doc.blocks[i];
+            reducedTextLens.push(blockTextLength(b));
+            reducedIds.push(b.id);
+            reducedTypes.push(b.type);
+            reducedAttrs.push(b.attrs);
+        }
+    }
+    // ===================================================================
+    // PHASE 2: Create an empty block at targetIndex in the reduced array
+    // ===================================================================
+    let insertOffset;
+    let targetBlockId;
+    if (targetIndex === 0) {
+        // Split the first block at offset 0
+        // Left part: empty block (keeps reduced block 0's id, type, attrs)
+        // Right part: reduced block 0's content (gets new id)
+        //
+        // We use a generated id for the right part. The left part (our target)
+        // gets the reduced block 0's id.
+        const rightBlockId = `${reducedIds[0]}_moved`;
+        ops.push({ type: 'split_block', offset: 0, newBlockId: rightBlockId });
+        // The right block inherits the split-from block's type but NOT attrs.
+        // The left block (empty) keeps the original block's id, type, and attrs.
+        // After the split, the right block needs to be fixed if the reduced block[0]
+        // had attrs (since split doesn't inherit attrs).
+        const rb0Attrs = reducedAttrs[0];
+        if (rb0Attrs && Object.keys(rb0Attrs).length > 0) {
+            ops.push({
+                type: 'set_block_attrs',
+                blockId: rightBlockId,
+                attrs: { ...rb0Attrs },
+            });
+        }
+        targetBlockId = reducedIds[0];
+        insertOffset = 0;
+    }
+    else {
+        // Split the block at reducedIndex (targetIndex - 1) at its end.
+        // This creates a new empty block after it.
+        let endOfPrev = 0;
+        for (let i = 0; i < targetIndex; i++) {
+            if (i > 0)
+                endOfPrev += 1; // virtual \n
+            endOfPrev += reducedTextLens[i];
+        }
+        // When sourceIdx was 0, the reduced block at index 0 kept the source
+        // block's id (merge_block semantics). We can't reuse that id for the
+        // new block — it would create a duplicate. Use a generated id instead.
+        const canReuseId = sourceIdx > 0;
+        const newBlockId = canReuseId ? blockId : `${blockId}_moved`;
+        ops.push({
+            type: 'split_block',
+            offset: endOfPrev,
+            newBlockId,
+        });
+        targetBlockId = newBlockId;
+        insertOffset = endOfPrev + 1; // +1 for the virtual \n created by the split
+    }
+    // ===================================================================
+    // PHASE 3: Fill the empty block with source content
+    // ===================================================================
+    // Step 3a: Insert text
+    if (srcTextLen > 0) {
+        ops.push({ type: 'insert_text', offset: insertOffset, text: srcText });
+    }
+    // Step 3b: Set block type
+    // The empty block inherited its type from the split-from block.
+    // Determine the inherited type:
+    let inheritedType;
+    if (targetIndex === 0) {
+        // The target block is the left part of splitting reduced block[0]
+        inheritedType = reducedTypes[0];
+    }
+    else {
+        // The target block is the right part of splitting reduced block[targetIndex-1]
+        inheritedType = reducedTypes[targetIndex - 1];
+    }
+    if (inheritedType !== srcType) {
+        ops.push({
+            type: 'set_block_type',
+            blockId: targetBlockId,
+            blockType: srcType,
+        });
+    }
+    // Step 3c: Set block attrs
+    // For targetIndex > 0: new block from split has NO attrs (split doesn't inherit attrs)
+    // For targetIndex === 0: the empty block (left part) keeps the split-from block's attrs
+    if (targetIndex === 0) {
+        // The target block has reduced block[0]'s attrs. Diff to srcAttrs.
+        const attrsDiff = computeAttrsDiff(reducedAttrs[0], srcAttrs);
+        if (attrsDiff !== null) {
+            ops.push({
+                type: 'set_block_attrs',
+                blockId: targetBlockId,
+                attrs: attrsDiff,
+            });
+        }
+    }
+    else {
+        // The target block has NO attrs. Set srcAttrs directly if any.
+        if (srcAttrs && Object.keys(srcAttrs).length > 0) {
+            ops.push({
+                type: 'set_block_attrs',
+                blockId: targetBlockId,
+                attrs: { ...srcAttrs },
+            });
+        }
+    }
+    // Step 3d: Apply marks to the inserted text
+    // The inserted text has no marks (inserted into an empty block).
+    // Walk source spans and emit set_span_marks for each span with marks.
+    if (srcTextLen > 0) {
+        let markOffset = insertOffset;
+        for (const span of srcSpans) {
+            if (span.marks &&
+                Object.keys(span.marks).length > 0 &&
+                span.text.length > 0) {
+                ops.push({
+                    type: 'set_span_marks',
+                    offset: markOffset,
+                    count: span.text.length,
+                    marks: { ...span.marks },
+                });
+            }
+            markOffset += span.text.length;
+        }
+    }
+    return ops;
+}
+// ---------------------------------------------------------------------------
+// BlockDragHandler class
+// ---------------------------------------------------------------------------
+/**
+ * DOM event handler for block drag-and-drop reordering.
+ *
+ * Shows a drag handle on block hover. When the user drags a block handle
+ * and drops it between other blocks, computes and dispatches the RTIF
+ * operations to move the block to the new position.
+ *
+ * Uses the existing {@link DropIndicator} for visual drop feedback.
+ *
+ * @example
+ * ```ts
+ * const handler = new BlockDragHandler({
+ *   root: editorRoot,
+ *   getDoc: () => engine.state.doc,
+ *   dispatch: (ops) => engine.dispatch(ops),
+ *   isReadOnly: () => false,
+ * });
+ *
+ * handler.attach();
+ * // ... user drags blocks ...
+ * handler.detach();
+ * ```
+ */
+export class BlockDragHandler {
+    _deps;
+    _dropIndicator;
+    _dragBlockId = null;
+    _handleEl = null;
+    _attached = false;
+    // Bound event handlers for cleanup
+    _onMouseOver;
+    _onMouseOut;
+    _onDragStart;
+    _onDragOver;
+    _onDragLeave;
+    _onDrop;
+    _onDragEnd;
+    /**
+     * Create a block drag handler.
+     *
+     * @param deps - Injected dependencies
+     *
+     * @example
+     * ```ts
+     * const handler = new BlockDragHandler(deps);
+     * handler.attach();
+     * ```
+     */
+    constructor(deps) {
+        this._deps = deps;
+        this._dropIndicator = new DropIndicator(deps.root);
+        // Bind event handlers
+        this._onMouseOver = this._handleMouseOver.bind(this);
+        this._onMouseOut = this._handleMouseOut.bind(this);
+        this._onDragStart = this._handleDragStart.bind(this);
+        this._onDragOver = this._handleDragOver.bind(this);
+        this._onDragLeave = this._handleDragLeave.bind(this);
+        this._onDrop = this._handleDrop.bind(this);
+        this._onDragEnd = this._handleDragEnd.bind(this);
+    }
+    /**
+     * Attach event listeners to the editor root.
+     *
+     * @example
+     * ```ts
+     * handler.attach();
+     * ```
+     */
+    attach() {
+        if (this._attached)
+            return;
+        this._attached = true;
+        const root = this._deps.root;
+        root.addEventListener('mouseover', this._onMouseOver);
+        root.addEventListener('mouseout', this._onMouseOut);
+        root.addEventListener('dragstart', this._onDragStart);
+        root.addEventListener('dragover', this._onDragOver);
+        root.addEventListener('dragleave', this._onDragLeave);
+        root.addEventListener('drop', this._onDrop);
+        root.addEventListener('dragend', this._onDragEnd);
+    }
+    /**
+     * Detach event listeners and clean up DOM.
+     *
+     * @example
+     * ```ts
+     * handler.detach();
+     * ```
+     */
+    detach() {
+        if (!this._attached)
+            return;
+        this._attached = false;
+        const root = this._deps.root;
+        root.removeEventListener('mouseover', this._onMouseOver);
+        root.removeEventListener('mouseout', this._onMouseOut);
+        root.removeEventListener('dragstart', this._onDragStart);
+        root.removeEventListener('dragover', this._onDragOver);
+        root.removeEventListener('dragleave', this._onDragLeave);
+        root.removeEventListener('drop', this._onDrop);
+        root.removeEventListener('dragend', this._onDragEnd);
+        this._removeHandle();
+        this._dropIndicator.destroy();
+        this._dragBlockId = null;
+    }
+    // -----------------------------------------------------------------------
+    // Private: Handle rendering
+    // -----------------------------------------------------------------------
+    /**
+     * Show the drag handle next to a block element.
+     */
+    _showHandle(blockEl) {
+        if (this._deps.isReadOnly())
+            return;
+        if (this._dragBlockId !== null)
+            return; // Don't show during drag
+        if (!this._handleEl) {
+            this._handleEl = createHandleElement();
+            this._deps.root.appendChild(this._handleEl);
+        }
+        // Position relative to the block element
+        const rootRect = this._deps.root.getBoundingClientRect();
+        const blockRect = blockEl.getBoundingClientRect();
+        this._handleEl.style.top = `${blockRect.top - rootRect.top}px`;
+        this._handleEl.style.left = '-24px'; // Just outside left edge
+        this._handleEl.style.height = `${blockRect.height}px`;
+        this._handleEl.style.display = 'flex';
+        // Store the block ID on the handle for dragstart
+        const blockId = blockEl.getAttribute('data-rtif-block');
+        if (blockId) {
+            this._handleEl.setAttribute('data-drag-block-id', blockId);
+        }
+    }
+    /**
+     * Hide the drag handle.
+     */
+    _hideHandle() {
+        if (this._handleEl) {
+            this._handleEl.style.display = 'none';
+        }
+    }
+    /**
+     * Remove the drag handle from the DOM.
+     */
+    _removeHandle() {
+        if (this._handleEl && this._handleEl.parentNode) {
+            this._handleEl.parentNode.removeChild(this._handleEl);
+        }
+        this._handleEl = null;
+    }
+    // -----------------------------------------------------------------------
+    // Private: Event handlers
+    // -----------------------------------------------------------------------
+    _handleMouseOver(e) {
+        const blockEl = findBlockElement(e.target, this._deps.root);
+        if (blockEl) {
+            this._showHandle(blockEl);
+        }
+    }
+    _handleMouseOut(e) {
+        // Only hide if leaving the editor root entirely or moving to a non-block area
+        const relatedTarget = e.relatedTarget;
+        if (relatedTarget && this._deps.root.contains(relatedTarget)) {
+            // Check if we're moving to the handle itself
+            if (this._handleEl && this._handleEl.contains(relatedTarget)) {
+                return;
+            }
+            // Check if still on a block
+            const blockEl = findBlockElement(relatedTarget, this._deps.root);
+            if (blockEl)
+                return;
+        }
+        this._hideHandle();
+    }
+    _handleDragStart(e) {
+        if (this._deps.isReadOnly())
+            return;
+        // Only start drag from the handle element
+        const target = e.target;
+        if (!target.classList?.contains(CSS_HANDLE) && !this._handleEl?.contains(target)) {
+            return;
+        }
+        const blockId = this._handleEl?.getAttribute('data-drag-block-id');
+        if (!blockId) {
+            e.preventDefault();
+            return;
+        }
+        this._dragBlockId = blockId;
+        this._hideHandle();
+        // Set drag data
+        if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('application/x-rtif-block-id', blockId);
+        }
+        // Add dragging class to the block element
+        const blockEl = this._deps.root.querySelector(`[data-rtif-block="${escapeAttrValue(blockId)}"]`);
+        if (blockEl) {
+            blockEl.classList.add(CSS_DRAGGING);
+        }
+    }
+    _handleDragOver(e) {
+        if (!this._dragBlockId)
+            return;
+        if (!e.dataTransfer)
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        // Show drop indicator between blocks
+        const blockEl = findNearestBlock(this._deps.root, e.clientY);
+        if (blockEl) {
+            const blockRect = blockEl.getBoundingClientRect();
+            const midY = blockRect.top + blockRect.height / 2;
+            const position = e.clientY < midY ? 'before' : 'after';
+            this._dropIndicator.showBetweenBlocks(blockEl, position);
+        }
+    }
+    _handleDragLeave(e) {
+        if (!this._dragBlockId)
+            return;
+        // Only hide if leaving the editor root
+        if (e.relatedTarget &&
+            this._deps.root.contains(e.relatedTarget)) {
+            return;
+        }
+        this._dropIndicator.hide();
+    }
+    _handleDrop(e) {
+        e.preventDefault();
+        this._dropIndicator.hide();
+        if (!this._dragBlockId)
+            return;
+        if (this._deps.isReadOnly())
+            return;
+        const doc = this._deps.getDoc();
+        const sourceBlockId = this._dragBlockId;
+        // Determine target index from drop position
+        const targetIndex = computeDropTargetIndex(this._deps.root, doc, e.clientY, sourceBlockId);
+        if (targetIndex === null) {
+            this._cleanup();
+            return;
+        }
+        // Compute and dispatch the move operations
+        const ops = computeMoveBlockOps(doc, sourceBlockId, targetIndex);
+        if (ops.length > 0) {
+            this._deps.dispatch(ops);
+        }
+        this._cleanup();
+    }
+    _handleDragEnd(_e) {
+        this._cleanup();
+    }
+    /**
+     * Clean up drag state after drop or cancel.
+     */
+    _cleanup() {
+        if (this._dragBlockId) {
+            // Remove dragging class
+            const blockEl = this._deps.root.querySelector(`[data-rtif-block="${escapeAttrValue(this._dragBlockId)}"]`);
+            if (blockEl) {
+                blockEl.classList.remove(CSS_DRAGGING);
+            }
+        }
+        this._dragBlockId = null;
+        this._dropIndicator.hide();
+    }
+}
+// ---------------------------------------------------------------------------
+// DOM helpers
+// ---------------------------------------------------------------------------
+/**
+ * Create the drag handle element.
+ *
+ * A small vertical "grip" icon positioned to the left of blocks.
+ * Set `draggable="true"` so it can initiate HTML5 drag events.
+ */
+function createHandleElement() {
+    const el = document.createElement('div');
+    el.className = CSS_HANDLE;
+    el.setAttribute('draggable', 'true');
+    el.setAttribute('aria-hidden', 'true');
+    el.setAttribute('role', 'button');
+    el.setAttribute('tabindex', '-1');
+    el.title = 'Drag to reorder';
+    // Styling (inline for self-containment; consumers can override via CSS)
+    el.style.position = 'absolute';
+    el.style.width = '20px';
+    el.style.display = 'none';
+    el.style.alignItems = 'center';
+    el.style.justifyContent = 'center';
+    el.style.cursor = 'grab';
+    el.style.opacity = '0.4';
+    el.style.userSelect = 'none';
+    el.style.zIndex = '5';
+    el.style.fontSize = '14px';
+    el.style.lineHeight = '1';
+    el.style.color = 'currentColor';
+    // Grip icon (six dots pattern)
+    el.textContent = '\u2807'; // BRAILLE PATTERN DOTS-123
+    return el;
+}
+/**
+ * Walk up the DOM from a node to find the nearest block element.
+ *
+ * @param node - The starting DOM node
+ * @param root - The editor root (stop walking here)
+ * @returns The block element, or null if not found
+ */
+function findBlockElement(node, root) {
+    let current = node;
+    while (current && current !== root) {
+        if (current instanceof Element &&
+            current.hasAttribute('data-rtif-block')) {
+            return current;
+        }
+        current = current.parentNode;
+    }
+    return null;
+}
+/**
+ * Find the nearest block element to a Y coordinate.
+ *
+ * @param root - The editor root element
+ * @param clientY - The Y coordinate (from mouse/drag event)
+ * @returns The nearest block element, or null
+ */
+function findNearestBlock(root, clientY) {
+    const blocks = root.querySelectorAll('[data-rtif-block]');
+    if (blocks.length === 0)
+        return null;
+    let nearest = null;
+    let nearestDistance = Infinity;
+    for (let i = 0; i < blocks.length; i++) {
+        const block = blocks[i];
+        const rect = block.getBoundingClientRect();
+        const midY = rect.top + rect.height / 2;
+        const distance = Math.abs(clientY - midY);
+        if (distance < nearestDistance) {
+            nearestDistance = distance;
+            nearest = block;
+        }
+    }
+    return nearest;
+}
+/**
+ * Compute the target block index from a drop position.
+ *
+ * Determines which block the drop is nearest to and whether the drop
+ * is above or below it, then computes the target index accordingly.
+ *
+ * @param root - The editor root element
+ * @param doc - The current RTIF document
+ * @param clientY - The Y coordinate of the drop
+ * @param sourceBlockId - The ID of the block being dragged
+ * @returns The target index, or null if the drop position is invalid
+ */
+function computeDropTargetIndex(root, doc, clientY, sourceBlockId) {
+    const blockEls = root.querySelectorAll('[data-rtif-block]');
+    if (blockEls.length === 0)
+        return null;
+    // Find nearest block and determine before/after
+    let nearestIdx = 0;
+    let nearestDistance = Infinity;
+    for (let i = 0; i < blockEls.length; i++) {
+        const rect = blockEls[i].getBoundingClientRect();
+        const midY = rect.top + rect.height / 2;
+        const distance = Math.abs(clientY - midY);
+        if (distance < nearestDistance) {
+            nearestDistance = distance;
+            nearestIdx = i;
+        }
+    }
+    const nearestRect = blockEls[nearestIdx].getBoundingClientRect();
+    const midY = nearestRect.top + nearestRect.height / 2;
+    const dropBefore = clientY < midY;
+    // Compute target index:
+    // - dropBefore means we want to place at nearestIdx (pushing it down)
+    // - dropAfter means we want to place at nearestIdx + 1
+    let targetIndex = dropBefore ? nearestIdx : nearestIdx + 1;
+    // Clamp to valid range
+    if (targetIndex >= doc.blocks.length) {
+        targetIndex = doc.blocks.length - 1;
+    }
+    // Find source index and check if target is effectively the same position
+    const sourceIdx = doc.blocks.findIndex((b) => b.id === sourceBlockId);
+    if (sourceIdx === -1)
+        return null;
+    if (targetIndex === sourceIdx)
+        return null;
+    // When dropping right after the source block, the effective position
+    // doesn't change (the block stays where it is).
+    // targetIndex = sourceIdx + 1 would place it one after its current position,
+    // but since we're removing from sourceIdx first, this is effectively a no-op
+    // only when targetIndex equals sourceIdx. Already handled above.
+    return targetIndex;
+}
+/**
+ * Escape a string for use in a CSS attribute selector value.
+ *
+ * jsdom doesn't support `CSS.escape()`, so we do minimal escaping
+ * of characters that would break `[attr="value"]` selectors.
+ */
+function escapeAttrValue(value) {
+    return value.replace(/["\\]/g, '\\$&');
+}
+//# sourceMappingURL=block-drag-handler.js.map