@peers-app/peers-ui 0.27.3 → 0.27.4

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

@@ -1,186 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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;
-}

package/src/components/markdown-editor/theme.ts

@@ -1,46 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-export default {
-  code: "editor-code",
-  heading: {
-    h1: "editor-heading-h1",
-    h2: "editor-heading-h2",
-    h3: "editor-heading-h3",
-    h4: "editor-heading-h4",
-    h5: "editor-heading-h5",
-  },
-  image: "editor-image",
-  link: "editor-link",
-  list: {
-    listitem: "editor-listitem",
-    nested: {
-      // listitem: 'editor-nested-listitem',
-      listitem: "PlaygroundEditorTheme__nestedListItem",
-    },
-    ol: "editor-list-ol",
-    ul: "editor-list-ul",
-    checklist: "PlaygroundEditorTheme__checklist",
-    listitemChecked: "PlaygroundEditorTheme__listItemChecked",
-    listitemUnchecked: "PlaygroundEditorTheme__listItemUnchecked",
-  },
-  ltr: "ltr",
-  paragraph: "editor-paragraph",
-  placeholder: "editor-placeholder",
-  quote: "editor-quote",
-  rtl: "rtl",
-  text: {
-    bold: "editor-text-bold",
-    code: "editor-text-code",
-    hashtag: "editor-text-hashtag",
-    italic: "editor-text-italic",
-    overflowed: "editor-text-overflowed",
-    strikethrough: "editor-text-strikethrough",
-    underline: "editor-text-underline",
-    underlineStrikethrough: "editor-text-underlineStrikethrough",
-  },
-};

package/src/components/markdown-editor/toolbar.tsx

@@ -1,269 +0,0 @@
-import {
-  INSERT_CHECK_LIST_COMMAND,
-  INSERT_ORDERED_LIST_COMMAND,
-  INSERT_UNORDERED_LIST_COMMAND,
-  REMOVE_LIST_COMMAND,
-} from "@lexical/list";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { mergeRegister } from "@lexical/utils";
-import {
-  $getSelection,
-  $isRangeSelection,
-  CAN_REDO_COMMAND,
-  CAN_UNDO_COMMAND,
-  FORMAT_TEXT_COMMAND,
-  SELECTION_CHANGE_COMMAND,
-} from "lexical";
-import { useCallback, useEffect, useRef, useState } from "react";
-
-const LowPriority = 1;
-
-function Divider() {
-  return <span className="tool-bar-divider"></span>;
-}
-
-export interface IToolbarControl {
-  iconClass: string;
-  onClick: () => void;
-  title?: string;
-}
-
-export interface IToolbarProps {
-  topRightControls?: IToolbarControl[];
-}
-
-export function ToolbarPlugin(props: IToolbarProps) {
-  const [editor] = useLexicalComposerContext();
-  const toolbarRef = useRef(null);
-  const [_canUndo, setCanUndo] = useState(false);
-  const [_canRedo, setCanRedo] = useState(false);
-  const [isBold, setIsBold] = useState(false);
-  const [isItalic, setIsItalic] = useState(false);
-  const [_isUnderline, setIsUnderline] = useState(false);
-  const [isStrikethrough, setIsStrikethrough] = useState(false);
-  // New state for list types
-  const [isUnorderedList, setIsUnorderedList] = useState(false);
-  const [isOrderedList, setIsOrderedList] = useState(false);
-  const [isCheckList, setIsCheckList] = useState(false);
-
-  const $updateToolbar = useCallback(() => {
-    const selection = $getSelection();
-    if ($isRangeSelection(selection)) {
-      // Update text format
-      setIsBold(selection.hasFormat("bold"));
-      setIsItalic(selection.hasFormat("italic"));
-      setIsUnderline(selection.hasFormat("underline"));
-      setIsStrikethrough(selection.hasFormat("strikethrough"));
-
-      // Update list format
-      const anchorNode = selection.anchor.getNode();
-      const element =
-        anchorNode.getKey() === "root" ? anchorNode : anchorNode.getTopLevelElementOrThrow();
-      const elementKey = element.getKey();
-      const elementDOM = editor.getElementByKey(elementKey);
-      if (elementDOM !== null) {
-        setIsUnorderedList(elementDOM.tagName === "UL");
-        setIsOrderedList(elementDOM.tagName === "OL");
-        setIsCheckList(
-          elementDOM.tagName === "UL" &&
-            elementDOM.classList.contains("PlaygroundEditorTheme__checklist"),
-        );
-      }
-    }
-  }, [editor]);
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerUpdateListener(({ editorState }) => {
-        editorState.read(() => {
-          $updateToolbar();
-        });
-      }),
-      editor.registerCommand(
-        SELECTION_CHANGE_COMMAND,
-        (_payload, _newEditor) => {
-          $updateToolbar();
-          return false;
-        },
-        LowPriority,
-      ),
-      editor.registerCommand(
-        CAN_UNDO_COMMAND,
-        (payload) => {
-          setCanUndo(payload);
-          return false;
-        },
-        LowPriority,
-      ),
-      editor.registerCommand(
-        CAN_REDO_COMMAND,
-        (payload) => {
-          setCanRedo(payload);
-          return false;
-        },
-        LowPriority,
-      ),
-    );
-  }, [editor, $updateToolbar]);
-
-  const insertUnorderedList = () => {
-    if (isUnorderedList) {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
-    } else {
-      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
-    }
-  };
-
-  const insertOrderedList = () => {
-    if (isOrderedList) {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
-    } else {
-      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
-    }
-  };
-
-  const insertCheckList = () => {
-    if (isCheckList) {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
-    } else {
-      editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined);
-    }
-  };
-
-  return (
-    <div className="toolbar" ref={toolbarRef}>
-      {/* <button
-        disabled={!canUndo}
-        onClick={() => {
-          editor.dispatchCommand(UNDO_COMMAND, undefined);
-        }}
-        className="toolbar-item spaced"
-        aria-label="Undo">
-        <i className="bi bi-arrow-counterclockwise" />
-      </button>
-      <button
-        disabled={!canRedo}
-        onClick={() => {
-          editor.dispatchCommand(REDO_COMMAND, undefined);
-        }}
-        className="toolbar-item"
-        aria-label="Redo">
-        <i className="bi bi-arrow-clockwise" />
-      </button>
-      <Divider /> */}
-      <button
-        onClick={() => {
-          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
-        }}
-        tabIndex={-1}
-        className={`toolbar-item spaced ${isBold ? "active" : ""}`}
-        aria-label="Format Bold"
-      >
-        <i className="bi bi-type-bold" />
-      </button>
-      <button
-        tabIndex={-1}
-        onClick={() => {
-          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
-        }}
-        className={`toolbar-item spaced ${isItalic ? "active" : ""}`}
-        aria-label="Format Italics"
-      >
-        <i className="bi bi-type-italic" />
-      </button>
-      {/* <button
-        onClick={() => {
-          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
-        }}
-        className={'toolbar-item spaced ' + (isUnderline ? 'active' : '')}
-        aria-label="Format Underline">
-        <i className="bi bi-type-underline" />
-      </button> */}
-      <button
-        tabIndex={-1}
-        onClick={() => {
-          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
-        }}
-        className={`toolbar-item spaced ${isStrikethrough ? "active" : ""}`}
-        aria-label="Format Strikethrough"
-      >
-        <i className="bi bi-type-strikethrough" />
-      </button>
-      <Divider />
-      {/* <button
-        onClick={() => {
-          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left');
-        }}
-        className="toolbar-item spaced"
-        aria-label="Left Align">
-        <i className="bi bi-text-left" />
-      </button>
-      <button
-        onClick={() => {
-          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center');
-        }}
-        className="toolbar-item spaced"
-        aria-label="Center Align">
-        <i className="bi bi-text-center" />
-      </button>
-      <button
-        onClick={() => {
-          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right');
-        }}
-        className="toolbar-item spaced"
-        aria-label="Right Align">
-        <i className="bi bi-text-right" />
-      </button>
-      <button
-        onClick={() => {
-          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify');
-        }}
-        className="toolbar-item"
-        aria-label="Justify Align">
-        <i className="bi bi-justify" />
-      </button>{' '} */}
-      {/* <Divider /> */}
-      <button
-        tabIndex={-1}
-        onClick={insertUnorderedList}
-        className={`toolbar-item spaced ${isUnorderedList ? "active" : ""}`}
-        aria-label="Insert Unordered List"
-      >
-        <i className="bi bi-list-ul" />
-      </button>
-      <button
-        tabIndex={-1}
-        onClick={insertOrderedList}
-        className={`toolbar-item spaced ${isOrderedList ? "active" : ""}`}
-        aria-label="Insert Ordered List"
-      >
-        <i className="bi bi-list-ol" />
-      </button>
-      <button
-        tabIndex={-1}
-        onClick={insertCheckList}
-        className={`toolbar-item spaced ${isCheckList ? "active" : ""}`}
-        aria-label="Insert Check List"
-      >
-        <i className="bi bi-list-check" />
-      </button>
-
-      {(props.topRightControls?.length ?? 0) > 0 && (
-        <div className="float-end">
-          {props.topRightControls?.map((control) => (
-            <button
-              key={control.title}
-              tabIndex={-1}
-              onClick={control.onClick}
-              className={"toolbar-item spaced active"}
-              aria-label="Insert Check List"
-              title={control.title}
-            >
-              <i className={control.iconClass} />
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}