@37signals/lexxy 0.9.15-alpha.2 → 0.9.15-alpha.4

package/dist/lexxy.esm.js

@@ -1,11 +1,11 @@
-export { highlightCode } from './lexxy_helpers.esm.js';
+export { highlightCode, highlightElement } from './lexxy_helpers.esm.js';
 import DOMPurify from 'dompurify';
 import { getStyleObjectFromCSS, getCSSFromStyleObject, $getSelectionStyleValueForProperty, $ensureForwardRangeSelection, $isAtNodeEnd, $patchStyleText, $setBlocksType, $forEachSelectedTextNode } from '@lexical/selection';
 import { SKIP_DOM_SELECTION_TAG, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $getSelection, $isRangeSelection, DecoratorNode, $createTextNode, $getRoot, $caretFromPoint, $setSelectionFromCaretRange, $getCaretRange, $normalizeCaret, $getChildCaret, $getCaretInDirection, $isParagraphNode, $isLineBreakNode, $createParagraphNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $createNodeSelection, $isDecoratorNode, $isTextNode, $getSiblingCaret, $rewindSiblingCaret, $splitAtPointCaretNext, $isChildCaret, $isTextPointCaret, $isExtendableTextPointCaret, $isSiblingCaret, $getCommonAncestor, $findMatchingParent, TextNode, createCommand, defineExtension, COMMAND_PRIORITY_EDITOR, $getEditor, $getNodeByKey, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $cloneWithProperties, $getNearestRootOrShadowRoot, $createRangeSelection, $setSelection, createState, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $addUpdateTag, ElementNode, $splitNode, $getChildCaretAtIndex, $createLineBreakNode, PASTE_COMMAND, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, ParagraphNode, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, mergeRegister as mergeRegister$1, CLEAR_HISTORY_COMMAND, $onUpdate, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, INPUT_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
 import { LinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, $isLinkNode, AutoLinkNode } from '@lexical/link';
 import { buildEditorFromExtensions } from '@lexical/extension';
 import { ListNode, ListItemNode, $getListDepth, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $isListItemNode, $isListNode, registerList } from '@lexical/list';
-import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, $descendantsMatching, mergeRegister, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $getNearestBlockElementAncestorOrThrow, IS_APPLE } from '@lexical/utils';
+import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, $descendantsMatching, mergeRegister, $insertNodeToNearestRoot, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $getNearestBlockElementAncestorOrThrow, IS_APPLE } from '@lexical/utils';
 import { registerPlainText } from '@lexical/plain-text';
 import { RichTextExtension, $isQuoteNode, $isHeadingNode, $createHeadingNode, $createQuoteNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
@@ -2308,6 +2308,13 @@ class ActionTextAttachmentNode extends DecoratorNode {
       if (!this.editor.read(() => this.isAttached())) return
       this.#swapToPreviewDOM(figure, this.src);
     };
+    img.onerror = () => {
+      // Clear pendingPreview so undo/redo or any JSON round-trip doesn't
+      // re-enter the pending flow and issue another fetch. The file icon
+      // stays as the stable fallback.
+      if (!this.editor.read(() => this.isAttached())) return
+      this.patchAndRewriteHistory({ pendingPreview: false });
+    };
     img.src = this.src;
   }
 
@@ -3653,8 +3660,7 @@ class CommandDispatcher {
   }
 
   dispatchInsertHorizontalDivider() {
-    this.contents.insertAtCursorEnsuringLineBelow(new HorizontalDividerNode());
-    this.editor.focus();
+    $insertNodeToNearestRoot(new HorizontalDividerNode);
   }
 
   dispatchSetFormatHeadingLarge() {
@@ -8667,6 +8673,10 @@ class LexicalPromptElement extends HTMLElement {
     return this.getAttribute("only-at")
   }
 
+  get verticalDirection() {
+    return this.getAttribute("vertical-direction")
+  }
+
   get open() {
     return this.popoverElement?.classList?.contains("lexxy-prompt-menu--visible")
   }
@@ -8899,7 +8909,11 @@ class LexicalPromptElement extends HTMLElement {
       this.popoverElement.toggleAttribute("data-clipped-at-right", true);
     }
 
-    if (popoverRect.bottom > window.innerHeight) {
+    const forceTop = this.verticalDirection === "top";
+    const forceBottom = this.verticalDirection === "bottom";
+    const overflowsWindow = popoverRect.bottom > window.innerHeight;
+
+    if (!forceBottom && (forceTop || overflowsWindow)) {
       this.#setPopoverOffsetY(contentRect.height - y + fontSize);
       this.popoverElement.toggleAttribute("data-clipped-at-bottom", true);
     }

package/dist/lexxy_helpers.esm.js

@@ -28,8 +28,8 @@ import 'prismjs/components/prism-kotlin';
 window.Prism ||= {};
 window.Prism.manual = true;
 
-function highlightCode() {
-  const elements = document.querySelectorAll("pre[data-language]");
+function highlightCode(root = document) {
+  const elements = root.querySelectorAll("pre[data-language]:not([data-highlighted])");
 
   elements.forEach(preElement => {
     highlightElement(preElement);
@@ -37,6 +37,8 @@ function highlightCode() {
 }
 
 function highlightElement(preElement) {
+  if (preElement.dataset.highlighted === "true") return
+
   const language = preElement.getAttribute("data-language");
   let code = preElement.innerHTML.replace(/<br\s*\/?>/gi, "\n");
 
@@ -55,6 +57,8 @@ function highlightElement(preElement) {
   if (highlights.length > 0) {
     applyHighlightRanges(preElement, highlights);
   }
+
+  preElement.dataset.highlighted = "true";
 }
 
 // Walk the DOM tree inside a <pre> element and build a list of
@@ -160,4 +164,4 @@ function collectTextNodes(root) {
   return nodes
 }
 
-export { highlightCode };
+export { highlightCode, highlightElement };

package/package.json

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