@37signals/lexxy 0.1.15-beta → 0.1.17-beta

package/dist/lexxy.esm.js

@@ -1,9 +1,9 @@
 import DOMPurify from 'dompurify';
-import { $getSelection, $isRangeSelection, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, $isNodeSelection, $getRoot, $isLineBreakNode, $isTextNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, SELECTION_CHANGE_COMMAND, $createNodeSelection, $setSelection, $createParagraphNode, $createTextNode, $insertNodes, $isParagraphNode, $createLineBreakNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, SKIP_DOM_SELECTION_TAG, createEditor, KEY_ENTER_COMMAND, COMMAND_PRIORITY_NORMAL, COMMAND_PRIORITY_HIGH, KEY_TAB_COMMAND, KEY_SPACE_COMMAND } from 'lexical';
-import { $isListNode, $isListItemNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, ListNode, ListItemNode, registerList } from '@lexical/list';
+import { $getSelection, $isRangeSelection, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, $isNodeSelection, $getRoot, $isLineBreakNode, $isTextNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, SELECTION_CHANGE_COMMAND, $createNodeSelection, $setSelection, $createParagraphNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, $insertNodes, $createLineBreakNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, SKIP_DOM_SELECTION_TAG, createEditor, COMMAND_PRIORITY_NORMAL, KEY_TAB_COMMAND, KEY_SPACE_COMMAND } from 'lexical';
+import { $isListNode, $isListItemNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $createListNode, ListNode, ListItemNode, registerList } from '@lexical/list';
 import { $isQuoteNode, $isHeadingNode, $createQuoteNode, $createHeadingNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $isCodeNode, CodeNode, CodeHighlightNode, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP, normalizeCodeLang } from '@lexical/code';
-import { $isLinkNode, $toggleLink, $createLinkNode, LinkNode, AutoLinkNode } from '@lexical/link';
+import { $isLinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, LinkNode, AutoLinkNode } from '@lexical/link';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 import { registerMarkdownShortcuts, TRANSFORMERS } from '@lexical/markdown';
 import { createEmptyHistoryState, registerHistory } from '@lexical/history';
@@ -1019,7 +1019,19 @@ class CommandDispatcher {
   }
 
   dispatchLink(url) {
-    this.#toggleLink(url);
+    this.editor.update(() => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection)) return
+
+      if (selection.isCollapsed()) {
+        const autoLinkNode = $createAutoLinkNode(url);
+        const textNode = $createTextNode(url);
+        autoLinkNode.append(textNode);
+        selection.insertNodes([ autoLinkNode ]);
+      } else {
+        $toggleLink(url);
+      }
+    });
   }
 
   dispatchUnlink() {
@@ -1053,7 +1065,7 @@ class CommandDispatcher {
   }
 
   dispatchInsertQuoteBlock() {
-    this.contents.toggleNodeWrappingAllSelectedLines((node) => $isQuoteNode(node), () => $createQuoteNode());
+    this.contents.toggleNodeWrappingAllSelectedNodes((node) => $isQuoteNode(node), () => $createQuoteNode());
   }
 
   dispatchInsertCodeBlock() {
@@ -1920,10 +1932,292 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
   }
 }
 
+class FormatEscaper {
+  constructor(editorElement) {
+    this.editorElement = editorElement;
+    this.editor = editorElement.editor;
+  }
+
+  monitor() {
+    this.editor.registerCommand(
+      KEY_ENTER_COMMAND,
+      (event) => this.#handleEnterKey(event),
+      COMMAND_PRIORITY_HIGH
+    );
+  }
+
+  #handleEnterKey(event) {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return false
+
+    const anchorNode = selection.anchor.getNode();
+
+    if (!this.#isInsideBlockquote(anchorNode)) return false
+
+    return this.#handleLists(event, anchorNode)
+      || this.#handleBlockquotes(event, anchorNode)
+  }
+
+  #handleLists(event, anchorNode) {
+    if (this.#shouldEscapeFromEmptyListItem(anchorNode) || this.#shouldEscapeFromEmptyParagraphInListItem(anchorNode)) {
+      event.preventDefault();
+      this.#escapeFromList(anchorNode);
+      return true
+    }
+
+    return false
+  }
+
+  #handleBlockquotes(event, anchorNode) {
+    if (this.#shouldEscapeFromEmptyParagraphInBlockquote(anchorNode)) {
+      event.preventDefault();
+      this.#escapeFromBlockquote(anchorNode);
+      return true
+    }
+
+    return false
+  }
+
+  #isInsideBlockquote(node) {
+    let currentNode = node;
+
+    while (currentNode) {
+      if ($isQuoteNode(currentNode)) {
+        return true
+      }
+      currentNode = currentNode.getParent();
+    }
+
+    return false
+  }
+
+  #shouldEscapeFromEmptyListItem(node) {
+    const listItem = this.#getListItemNode(node);
+    if (!listItem) return false
+
+    return this.#isNodeEmpty(listItem)
+  }
+
+  #shouldEscapeFromEmptyParagraphInListItem(node) {
+    const paragraph = this.#getParagraphNode(node);
+    if (!paragraph) return false
+
+    if (!this.#isNodeEmpty(paragraph)) return false
+
+    const parent = paragraph.getParent();
+    return parent && $isListItemNode(parent)
+  }
+
+  #isNodeEmpty(node) {
+    if (node.getTextContent().trim() !== "") return false
+
+    const children = node.getChildren();
+    if (children.length === 0) return true
+
+    return children.every(child => {
+      if ($isLineBreakNode(child)) return true
+      return this.#isNodeEmpty(child)
+    })
+  }
+
+  #getListItemNode(node) {
+    let currentNode = node;
+
+    while (currentNode) {
+      if ($isListItemNode(currentNode)) {
+        return currentNode
+      }
+      currentNode = currentNode.getParent();
+    }
+
+    return null
+  }
+
+  #escapeFromList(anchorNode) {
+    const listItem = this.#getListItemNode(anchorNode);
+    if (!listItem) return
+
+    const parentList = listItem.getParent();
+    if (!parentList || !$isListNode(parentList)) return
+
+    const blockquote = parentList.getParent();
+    const isInBlockquote = blockquote && $isQuoteNode(blockquote);
+
+    if (isInBlockquote) {
+      const listItemsAfter = this.#getListItemSiblingsAfter(listItem);
+      const nonEmptyListItems = listItemsAfter.filter(item => !this.#isNodeEmpty(item));
+
+      if (nonEmptyListItems.length > 0) {
+        this.#splitBlockquoteWithList(blockquote, parentList, listItem, nonEmptyListItems);
+        return
+      }
+    }
+
+    const paragraph = $createParagraphNode();
+    parentList.insertAfter(paragraph);
+
+    listItem.remove();
+    paragraph.selectStart();
+  }
+
+  #shouldEscapeFromEmptyParagraphInBlockquote(node) {
+    const paragraph = this.#getParagraphNode(node);
+    if (!paragraph) return false
+
+    if (!this.#isNodeEmpty(paragraph)) return false
+
+    const parent = paragraph.getParent();
+    return parent && $isQuoteNode(parent)
+  }
+
+  #getParagraphNode(node) {
+    let currentNode = node;
+
+    while (currentNode) {
+      if ($isParagraphNode(currentNode)) {
+        return currentNode
+      }
+      currentNode = currentNode.getParent();
+    }
+
+    return null
+  }
+
+  #escapeFromBlockquote(anchorNode) {
+    const paragraph = this.#getParagraphNode(anchorNode);
+    if (!paragraph) return
+
+    const blockquote = paragraph.getParent();
+    if (!blockquote || !$isQuoteNode(blockquote)) return
+
+    const siblingsAfter = this.#getSiblingsAfter(paragraph);
+    const nonEmptySiblings = siblingsAfter.filter(sibling => !this.#isNodeEmpty(sibling));
+
+    if (nonEmptySiblings.length > 0) {
+      this.#splitBlockquote(blockquote, paragraph, nonEmptySiblings);
+    } else {
+      const newParagraph = $createParagraphNode();
+      blockquote.insertAfter(newParagraph);
+      paragraph.remove();
+      newParagraph.selectStart();
+    }
+  }
+
+  #getSiblingsAfter(node) {
+    const siblings = [];
+    let sibling = node.getNextSibling();
+
+    while (sibling) {
+      siblings.push(sibling);
+      sibling = sibling.getNextSibling();
+    }
+
+    return siblings
+  }
+
+  #getListItemSiblingsAfter(listItem) {
+    const siblings = [];
+    let sibling = listItem.getNextSibling();
+
+    while (sibling) {
+      if ($isListItemNode(sibling)) {
+        siblings.push(sibling);
+      }
+      sibling = sibling.getNextSibling();
+    }
+
+    return siblings
+  }
+
+  #splitBlockquoteWithList(blockquote, parentList, emptyListItem, listItemsAfter) {
+    const blockquoteSiblingsAfterList = this.#getSiblingsAfter(parentList);
+    const nonEmptyBlockquoteSiblings = blockquoteSiblingsAfterList.filter(sibling => !this.#isNodeEmpty(sibling));
+
+    const middleParagraph = $createParagraphNode();
+    blockquote.insertAfter(middleParagraph);
+
+    const newList = $createListNode(parentList.getListType());
+
+    const newBlockquote = $createQuoteNode();
+    middleParagraph.insertAfter(newBlockquote);
+    newBlockquote.append(newList);
+
+    listItemsAfter.forEach(item => {
+      newList.append(item);
+    });
+
+    nonEmptyBlockquoteSiblings.forEach(sibling => {
+      newBlockquote.append(sibling);
+    });
+
+    emptyListItem.remove();
+
+    this.#removeTrailingEmptyListItems(parentList);
+    this.#removeTrailingEmptyNodes(newBlockquote);
+
+    if (parentList.getChildrenSize() === 0) {
+      parentList.remove();
+
+      if (blockquote.getChildrenSize() === 0) {
+        blockquote.remove();
+      }
+    } else {
+      this.#removeTrailingEmptyNodes(blockquote);
+    }
+
+    middleParagraph.selectStart();
+  }
+
+  #removeTrailingEmptyListItems(list) {
+    const items = list.getChildren();
+    for (let i = items.length - 1; i >= 0; i--) {
+      const item = items[i];
+      if ($isListItemNode(item) && this.#isNodeEmpty(item)) {
+        item.remove();
+      } else {
+        break
+      }
+    }
+  }
+
+  #removeTrailingEmptyNodes(blockquote) {
+    const children = blockquote.getChildren();
+    for (let i = children.length - 1; i >= 0; i--) {
+      const child = children[i];
+      if (this.#isNodeEmpty(child)) {
+        child.remove();
+      } else {
+        break
+      }
+    }
+  }
+
+  #splitBlockquote(blockquote, emptyParagraph, siblingsAfter) {
+    const newParagraph = $createParagraphNode();
+    blockquote.insertAfter(newParagraph);
+
+    const newBlockquote = $createQuoteNode();
+    newParagraph.insertAfter(newBlockquote);
+
+    siblingsAfter.forEach(sibling => {
+      newBlockquote.append(sibling);
+    });
+
+    emptyParagraph.remove();
+
+    this.#removeTrailingEmptyNodes(blockquote);
+    this.#removeTrailingEmptyNodes(newBlockquote);
+
+    newParagraph.selectStart();
+  }
+}
+
 class Contents {
   constructor(editorElement) {
     this.editorElement = editorElement;
     this.editor = editorElement.editor;
+
+    new FormatEscaper(editorElement).monitor();
   }
 
   insertHtml(html) {
@@ -1984,20 +2278,23 @@ class Contents {
       if (isFormatAppliedFn(topLevelElement)) {
         this.removeFormattingFromSelectedLines();
       } else {
-        this.insertNodeWrappingAllSelectedLines(newNodeFn);
+        this.#insertNodeWrappingAllSelectedLines(newNodeFn);
       }
     });
   }
 
-  insertNodeWrappingAllSelectedLines(newNodeFn) {
+  toggleNodeWrappingAllSelectedNodes(isFormatAppliedFn, newNodeFn) {
     this.editor.update(() => {
       const selection = $getSelection();
       if (!$isRangeSelection(selection)) return
 
-      if (selection.isCollapsed()) {
-        this.#wrapCurrentLine(selection, newNodeFn);
+      const topLevelElement = selection.anchor.getNode().getTopLevelElementOrThrow();
+
+      // Check if format is already applied
+      if (isFormatAppliedFn(topLevelElement)) {
+        this.#unwrap(topLevelElement);
       } else {
-        this.#wrapMultipleSelectedLines(selection, newNodeFn);
+        this.#insertNodeWrappingAllSelectedNodes(newNodeFn);
       }
     });
   }
@@ -2238,6 +2535,80 @@ class Contents {
     return this.editorElement.selection
   }
 
+  #unwrap(node) {
+    const children = node.getChildren();
+
+    children.forEach((child) => {
+      node.insertBefore(child);
+    });
+
+    node.remove();
+  }
+
+  #insertNodeWrappingAllSelectedNodes(newNodeFn) {
+    this.editor.update(() => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection)) return
+
+      const selectedNodes = selection.extract();
+      if (selectedNodes.length === 0) return
+
+      const topLevelElements = new Set();
+      selectedNodes.forEach((node) => {
+        const topLevel = node.getTopLevelElementOrThrow();
+        topLevelElements.add(topLevel);
+      });
+
+      const elements = this.#removeTrailingEmptyParagraphs(Array.from(topLevelElements));
+      if (elements.length === 0) return
+
+      const wrappingNode = newNodeFn();
+      elements[0].insertBefore(wrappingNode);
+      elements.forEach((element) => {
+        wrappingNode.append(element);
+      });
+
+      $setSelection(null);
+    });
+  }
+
+  #removeTrailingEmptyParagraphs(elements) {
+    let lastNonEmptyIndex = elements.length - 1;
+
+    // Find the last non-empty paragraph
+    while (lastNonEmptyIndex >= 0) {
+      const element = elements[lastNonEmptyIndex];
+      if (!$isParagraphNode(element) || !this.#isElementEmpty(element)) {
+        break
+      }
+      lastNonEmptyIndex--;
+    }
+
+    return elements.slice(0, lastNonEmptyIndex + 1)
+  }
+
+  #isElementEmpty(element) {
+    // Check text content first
+    if (element.getTextContent().trim() !== "") return false
+
+    // Check if it only contains line breaks
+    const children = element.getChildren();
+    return children.length === 0 || children.every(child => $isLineBreakNode(child))
+  }
+
+  #insertNodeWrappingAllSelectedLines(newNodeFn) {
+    this.editor.update(() => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection)) return
+
+      if (selection.isCollapsed()) {
+        this.#wrapCurrentLine(selection, newNodeFn);
+      } else {
+        this.#wrapMultipleSelectedLines(selection, newNodeFn);
+      }
+    });
+  }
+
   #wrapCurrentLine(selection, newNodeFn) {
     const anchorNode = selection.anchor.getNode();
     const topLevelElement = anchorNode.getTopLevelElementOrThrow();
@@ -2566,7 +2937,7 @@ class Clipboard {
 
     if (!clipboardData) return false
 
-    if (this.#isOnlyPlainTextPasted(clipboardData)) {
+    if (this.#isOnlyPlainTextPasted(clipboardData) && !this.#isPastingIntoCodeBlock()) {
       this.#pastePlainText(clipboardData);
       event.preventDefault();
       return true
@@ -2580,6 +2951,27 @@ class Clipboard {
     return types.length === 1 && types[0] === "text/plain"
   }
 
+  #isPastingIntoCodeBlock() {
+    let result = false;
+
+    this.editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection)) return
+
+      let currentNode = selection.anchor.getNode();
+
+      while (currentNode) {
+        if ($isCodeNode(currentNode)) {
+          result = true;
+          return
+        }
+        currentNode = currentNode.getParent();
+      }
+    });
+
+    return result
+  }
+
   #pastePlainText(clipboardData) {
     const item = clipboardData.items[0];
     item.getAsString((text) => {
@@ -3316,8 +3708,8 @@ class LexicalPromptElement extends HTMLElement {
 
   async #showPopover() {
     this.popoverElement ??= await this.#buildPopover();
+    this.#resetPopoverPosition();
     await this.#filterOptions();
-    this.#positionPopover();
     this.popoverElement.classList.toggle("lexxy-prompt-menu--visible", true);
     this.#selectFirstOption();
 
@@ -3372,19 +3764,29 @@ class LexicalPromptElement extends HTMLElement {
     const contentRect = this.#editorContentElement.getBoundingClientRect();
     const verticalOffset = contentRect.top - editorRect.top;
 
-    this.popoverElement.style.left = `${x}px`;
+    if (!this.popoverElement.hasAttribute("data-anchored")) {
+      this.popoverElement.style.left = `${x}px`;
+      this.popoverElement.toggleAttribute("data-anchored", true);
+    }
+
     this.popoverElement.style.top = `${y + verticalOffset}px`;
     this.popoverElement.style.bottom = "auto";
 
     const popoverRect = this.popoverElement.getBoundingClientRect();
     const isClippedAtBottom = popoverRect.bottom > window.innerHeight;
 
-    if (isClippedAtBottom) {
-      this.popoverElement.style.bottom = `${y - verticalOffset + fontSize}px`;
-      this.popoverElement.style.top = "auto";
+    if (isClippedAtBottom || this.popoverElement.hasAttribute("data-clipped-at-bottom")) {
+      this.popoverElement.style.top = `${y + verticalOffset - popoverRect.height - fontSize}px`;
+      this.popoverElement.style.bottom = "auto";
+      this.popoverElement.toggleAttribute("data-clipped-at-bottom", true);
     }
   }
 
+  #resetPopoverPosition() {
+    this.popoverElement.removeAttribute("data-clipped-at-bottom");
+    this.popoverElement.removeAttribute("data-anchored");
+  }
+
   async #hidePopover() {
     this.#clearSelection();
     this.popoverElement.classList.toggle("lexxy-prompt-menu--visible", false);
@@ -3410,6 +3812,7 @@ class LexicalPromptElement extends HTMLElement {
 
     if (this.#editorContents.containsTextBackUntil(this.trigger)) {
       await this.#showFilteredOptions();
+      this.#positionPopover();
     } else {
       this.#hidePopover();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.1.15-beta",
+  "version": "0.1.17-beta",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",