@peers-app/peers-ui 0.15.4 → 0.16.0

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

@@ -0,0 +1,186 @@
+import { $isListItemNode, $isListNode } from "@lexical/list";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import type { Observable } from "@peers-app/peers-sdk";
+import {
+  $createRangeSelection,
+  $getNodeByKey,
+  $getSelection,
+  $isElementNode,
+  $isRangeSelection,
+  $isRootOrShadowRoot,
+  $setSelection,
+  COMMAND_PRIORITY_HIGH,
+  KEY_DOWN_COMMAND,
+  type LexicalNode,
+} from "lexical";
+import { useEffect } from "react";
+
+/**
+ * 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.
+ */
+export function $getMovableBlock(node: LexicalNode): LexicalNode | null {
+  let n: LexicalNode | null = node;
+  while (n !== null) {
+    const parent: LexicalNode | null = n.getParent();
+    if (parent === null) {
+      return null;
+    }
+    if ($isListNode(parent) && $isListItemNode(n)) {
+      return n;
+    }
+    if ($isRootOrShadowRoot(parent)) {
+      return n;
+    }
+    n = parent;
+  }
+  return null;
+}
+
+/**
+ * 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> }) {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return editor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event: KeyboardEvent) => {
+        if (props.mentionsOpen()) {
+          return false;
+        }
+        if (!event.altKey || event.metaKey || event.ctrlKey) {
+          return false;
+        }
+        const code = event.code;
+        if (code !== "ArrowUp" && code !== "ArrowDown") {
+          return false;
+        }
+
+        // KEY_DOWN_COMMAND runs inside Lexical's updateEditorSync; do not call
+        // editor.update() here — it would queue and run after this handler returns,
+        // so handled would stay false, preventDefault would never run, and the
+        // built-in arrow handler + browser would move the caret on top of our swap.
+
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) {
+          return false;
+        }
+
+        const anchorBlock = $getMovableBlock(selection.anchor.getNode());
+        const focusBlock = $getMovableBlock(selection.focus.getNode());
+        if (anchorBlock === null || focusBlock === null) {
+          return false;
+        }
+
+        // Both endpoints must share the same parent (same nesting level).
+        if (anchorBlock.getParent()?.getKey() !== focusBlock.getParent()?.getKey()) {
+          return false;
+        }
+
+        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 = firstBlock.getPreviousSibling();
+          if (prev === null) {
+            return false;
+          }
+          lastBlock.insertAfter(prev, false);
+        } else {
+          const next = lastBlock.getNextSibling();
+          if (next === null) {
+            return false;
+          }
+          firstBlock.insertBefore(next, false);
+        }
+
+        if ($getNodeByKey(anchorKey) !== null) {
+          const restored = $createRangeSelection();
+          restored.format = selection.format;
+          restored.style = selection.style;
+          restored.anchor.set(anchorKey, anchorOffset, anchorType);
+          restored.focus.set(focusKey, focusOffset, focusType);
+          $setSelection(restored);
+        } else {
+          lastBlock.selectEnd();
+        }
+
+        event.preventDefault();
+        return true;
+      },
+      COMMAND_PRIORITY_HIGH,
+    );
+  }, [editor]);
+
+  return null;
+}

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;
+}