@peers-app/peers-ui 0.15.5 → 0.16.0

package/src/components/markdown-editor/move-line-plugin.tsx

@@ -5,6 +5,7 @@ import {
   $createRangeSelection,
   $getNodeByKey,
   $getSelection,
+  $isElementNode,
   $isRangeSelection,
   $isRootOrShadowRoot,
   $setSelection,
@@ -15,10 +16,11 @@ import {
 import { useEffect } from "react";
 
 /**
- * Returns the node to reorder for Alt/Option + arrow "move line":
- * a list item (among siblings in its list), or else the top-level block under the root.
+ * Walks up from `node` to find the reorderable block for keyboard shortcuts that
+ * operate on "lines" (blocks). Returns a list item when inside a list, or the
+ * top-level block directly under the root.
  */
-function $getMovableBlock(node: LexicalNode): LexicalNode | null {
+export function $getMovableBlock(node: LexicalNode): LexicalNode | null {
   let n: LexicalNode | null = node;
   while (n !== null) {
     const parent: LexicalNode | null = n.getParent();
@@ -37,7 +39,26 @@ function $getMovableBlock(node: LexicalNode): LexicalNode | null {
 }
 
 /**
- * Registers Alt/Option + ArrowUp/ArrowDown to swap the caret's block (or list item) with an adjacent sibling.
+ * Returns true when `node` sits at the absolute start of `block` — i.e. it is
+ * the block itself or lies along the first-child path from block down to node.
+ * Used to detect a selection endpoint that bled into the next block at offset 0.
+ */
+function $isFirstPositionInBlock(node: LexicalNode, block: LexicalNode): boolean {
+  let n: LexicalNode | null = node;
+  while (n !== null && n !== block) {
+    if (n.getPreviousSibling() !== null) {
+      return false;
+    }
+    n = n.getParent();
+  }
+  return n === block;
+}
+
+/**
+ * Registers Alt/Option + ArrowUp/ArrowDown to move the selected block(s) — or the
+ * block at the caret — past an adjacent sibling. Supports both collapsed cursors and
+ * multi-block selections: the single neighbor block is relocated to the other side of
+ * the selection range, which effectively shifts the selected blocks up or down by one.
  * @param props.mentionsOpen — when true, the plugin defers so mention typeahead keeps keyboard focus.
  */
 export function MoveLineWithAltArrowsPlugin(props: { mentionsOpen: Observable<boolean> }) {
@@ -64,34 +85,83 @@ export function MoveLineWithAltArrowsPlugin(props: { mentionsOpen: Observable<bo
         // built-in arrow handler + browser would move the caret on top of our swap.
 
         const selection = $getSelection();
-        if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+        if (!$isRangeSelection(selection)) {
+          return false;
+        }
+
+        const anchorBlock = $getMovableBlock(selection.anchor.getNode());
+        const focusBlock = $getMovableBlock(selection.focus.getNode());
+        if (anchorBlock === null || focusBlock === null) {
           return false;
         }
-        const anchorNode = selection.anchor.getNode();
-        const block = $getMovableBlock(anchorNode);
-        if (block === null) {
+
+        // Both endpoints must share the same parent (same nesting level).
+        if (anchorBlock.getParent()?.getKey() !== focusBlock.getParent()?.getKey()) {
           return false;
         }
 
-        const anchorKey = selection.anchor.key;
-        const anchorOffset = selection.anchor.offset;
-        const anchorType = selection.anchor.type;
-        const focusKey = selection.focus.key;
-        const focusOffset = selection.focus.offset;
-        const focusType = selection.focus.type;
+        const anchorIdx = anchorBlock.getIndexWithinParent();
+        const focusIdx = focusBlock.getIndexWithinParent();
+        const firstBlock = anchorIdx <= focusIdx ? anchorBlock : focusBlock;
+        let lastBlock = anchorIdx <= focusIdx ? focusBlock : anchorBlock;
+
+        let anchorKey = selection.anchor.key;
+        let anchorOffset = selection.anchor.offset;
+        let anchorType = selection.anchor.type;
+        let focusKey = selection.focus.key;
+        let focusOffset = selection.focus.offset;
+        let focusType = selection.focus.type;
+
+        // When a selection extends to offset 0 of the next block (common when
+        // selecting to "end of line"), that trailing block has no selected
+        // content — exclude it so it isn't dragged along. Also clamp the
+        // trailing selection endpoint to the end of the new lastBlock so the
+        // restored highlight doesn't overextend into the excluded block.
+        if (lastBlock !== firstBlock) {
+          const lastPoint = anchorIdx > focusIdx ? selection.anchor : selection.focus;
+          if (lastPoint.offset === 0 && $isFirstPositionInBlock(lastPoint.getNode(), lastBlock)) {
+            const stepped = lastBlock.getPreviousSibling();
+            if (stepped === null) {
+              return false;
+            }
+            lastBlock = stepped;
+
+            const lastDesc = $isElementNode(lastBlock) ? lastBlock.getLastDescendant() : null;
+            const clampKey = lastDesc ? lastDesc.getKey() : lastBlock.getKey();
+            const clampOffset = lastDesc
+              ? lastDesc.getTextContentSize()
+              : $isElementNode(lastBlock)
+                ? lastBlock.getChildrenSize()
+                : lastBlock.getTextContentSize();
+            const clampType: "text" | "element" = lastDesc
+              ? "text"
+              : $isElementNode(lastBlock)
+                ? "element"
+                : "text";
+            if (anchorIdx > focusIdx) {
+              anchorKey = clampKey;
+              anchorOffset = clampOffset;
+              anchorType = clampType;
+            } else {
+              focusKey = clampKey;
+              focusOffset = clampOffset;
+              focusType = clampType;
+            }
+          }
+        }
 
         if (code === "ArrowUp") {
-          const prev = block.getPreviousSibling();
+          const prev = firstBlock.getPreviousSibling();
           if (prev === null) {
             return false;
           }
-          prev.insertBefore(block, false);
+          lastBlock.insertAfter(prev, false);
         } else {
-          const next = block.getNextSibling();
+          const next = lastBlock.getNextSibling();
           if (next === null) {
             return false;
           }
-          next.insertAfter(block, false);
+          firstBlock.insertBefore(next, false);
         }
 
         if ($getNodeByKey(anchorKey) !== null) {
@@ -102,7 +172,7 @@ export function MoveLineWithAltArrowsPlugin(props: { mentionsOpen: Observable<bo
           restored.focus.set(focusKey, focusOffset, focusType);
           $setSelection(restored);
         } else {
-          block.selectEnd();
+          lastBlock.selectEnd();
         }
 
         event.preventDefault();

package/src/components/markdown-editor/select-line-boundary-plugin.tsx

@@ -0,0 +1,95 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import {
+  $createRangeSelection,
+  $getNearestNodeFromDOMNode,
+  $getSelection,
+  $isRangeSelection,
+  $isTextNode,
+  $setSelection,
+  COMMAND_PRIORITY_HIGH,
+  KEY_DOWN_COMMAND,
+} from "lexical";
+import { useEffect } from "react";
+
+/**
+ * Intercepts Cmd+Shift+ArrowLeft/Right (Mac line-boundary selection) and explicitly
+ * sets anchor/focus so that Lexical's reconciliation cannot flip the selection direction.
+ * Uses the browser's native `Selection.modify` with `'lineboundary'` granularity to
+ * find the correct **visual** line boundary (respecting text wrapping), then converts
+ * the result back to Lexical coordinates.
+ */
+export function SelectToLineBoundaryPlugin() {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return editor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event: KeyboardEvent) => {
+        if (!event.shiftKey || !event.metaKey || event.altKey || event.ctrlKey) {
+          return false;
+        }
+        const code = event.code;
+        if (code !== "ArrowLeft" && code !== "ArrowRight") {
+          return false;
+        }
+
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) {
+          return false;
+        }
+
+        const savedAnchorKey = selection.anchor.key;
+        const savedAnchorOffset = selection.anchor.offset;
+        const savedAnchorType = selection.anchor.type;
+
+        const focusElement = editor.getElementByKey(selection.focus.key);
+        if (!focusElement) {
+          return false;
+        }
+        const focusDomNode =
+          selection.focus.type === "text" ? focusElement.firstChild : focusElement;
+        if (!focusDomNode) {
+          return false;
+        }
+
+        const domSelection = window.getSelection();
+        if (!domSelection) {
+          return false;
+        }
+
+        domSelection.collapse(focusDomNode, selection.focus.offset);
+        domSelection.modify("move", code === "ArrowLeft" ? "left" : "right", "lineboundary");
+
+        const boundaryDomNode = domSelection.anchorNode;
+        const boundaryDomOffset = domSelection.anchorOffset;
+        if (!boundaryDomNode) {
+          return false;
+        }
+
+        const boundaryLexicalNode = $getNearestNodeFromDOMNode(boundaryDomNode);
+        if (!boundaryLexicalNode) {
+          return false;
+        }
+
+        const newFocusKey = boundaryLexicalNode.getKey();
+        const newFocusOffset = boundaryDomOffset;
+        const newFocusType: "text" | "element" = $isTextNode(boundaryLexicalNode)
+          ? "text"
+          : "element";
+
+        const restored = $createRangeSelection();
+        restored.format = selection.format;
+        restored.style = selection.style;
+        restored.anchor.set(savedAnchorKey, savedAnchorOffset, savedAnchorType);
+        restored.focus.set(newFocusKey, newFocusOffset, newFocusType);
+        $setSelection(restored);
+
+        event.preventDefault();
+        return true;
+      },
+      COMMAND_PRIORITY_HIGH,
+    );
+  }, [editor]);
+
+  return null;
+}