@37signals/lexxy 0.9.9-beta.preview6 → 0.9.11-beta

package/dist/lexxy.esm.js

@@ -1,8 +1,7 @@
-import { isActiveAndVisible, extractPlainTextFromHtml, createElement, createAttachmentFigure, isPreviewableImage, dispatch, parseHtml, addBlockSpacing, generateDomId } from './lexxy_helpers.esm.js';
 export { highlightCode } from './lexxy_helpers.esm.js';
 import DOMPurify from 'dompurify';
 import { getStyleObjectFromCSS, getCSSFromStyleObject, $ensureForwardRangeSelection, $isAtNodeEnd, $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType, $forEachSelectedTextNode } from '@lexical/selection';
-import { SKIP_DOM_SELECTION_TAG, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $getSelection, $isRangeSelection, DecoratorNode, $createTextNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $createNodeSelection, $isDecoratorNode, $isLineBreakNode, $isTextNode, $isParagraphNode, $splitNode, $getSiblingCaret, LineBreakNode, $createParagraphNode, 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, PASTE_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, $getRoot, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $addUpdateTag, ElementNode, $getChildCaretAtIndex, $createLineBreakNode, ParagraphNode, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, mergeRegister as mergeRegister$1, $findMatchingParent, CLEAR_HISTORY_COMMAND, $onUpdate, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
+import { SKIP_DOM_SELECTION_TAG, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $getSelection, $isRangeSelection, DecoratorNode, $createTextNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $createNodeSelection, $isDecoratorNode, $isLineBreakNode, $isTextNode, $isParagraphNode, $splitNode, $getSiblingCaret, LineBreakNode, $createParagraphNode, $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, $getRoot, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $addUpdateTag, ElementNode, $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, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
 import { buildEditorFromExtensions } from '@lexical/extension';
 import { ListNode, ListItemNode, $getListDepth, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $isListItemNode, $isListNode, registerList } from '@lexical/list';
 import { LinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, $isLinkNode, AutoLinkNode } from '@lexical/link';
@@ -126,6 +125,64 @@ class ListenerBin {
   }
 }
 
+function createElement(name, properties, content = "") {
+  const element = document.createElement(name);
+  for (const [ key, value ] of Object.entries(properties || {})) {
+    if (key in element) {
+      element[key] = value;
+    } else if (value !== null && value !== undefined) {
+      element.setAttribute(key, value);
+    }
+  }
+  if (content) {
+    element.innerHTML = content;
+  }
+  return element
+}
+
+function parseHtml(html) {
+  const parser = new DOMParser();
+  return parser.parseFromString(html, "text/html")
+}
+
+function createAttachmentFigure(contentType, isPreviewable, fileName) {
+  const extension = fileName ? fileName.split(".").pop().toLowerCase() : "unknown";
+  return createElement("figure", {
+    className: `attachment attachment--${isPreviewable ? "preview" : "file"} attachment--${extension}`,
+    "data-content-type": contentType
+  })
+}
+
+function isPreviewableImage(contentType) {
+  return contentType.startsWith("image/") && !contentType.includes("svg")
+}
+
+function dispatch(element, eventName, detail = null, cancelable = false) {
+  return element.dispatchEvent(new CustomEvent(eventName, { bubbles: true, detail, cancelable }))
+}
+
+function addBlockSpacing(doc) {
+  const blocks = doc.querySelectorAll("body > :not(h1, h2, h3, h4, h5, h6) + *");
+  for (const block of blocks) {
+    const spacer = doc.createElement("p");
+    spacer.appendChild(doc.createElement("br"));
+    block.before(spacer);
+  }
+}
+
+function generateDomId(prefix) {
+  const randomPart = Math.random().toString(36).slice(2, 10);
+  return `${prefix}-${randomPart}`
+}
+
+function extractPlainTextFromHtml(innerHtml = "") {
+  return parseHtml(innerHtml).body.textContent.trim()
+}
+
+function isActiveAndVisible(element) {
+  return element && !element.disabled && element.checkVisibility()
+}
+
 function handleRollingTabIndex(elements, event) {
   const previousActiveElement = document.activeElement;
 
@@ -553,15 +610,23 @@ class LexicalToolbarElement extends HTMLElement {
   #setButtonPressed(name, isPressed) {
     const button = this.querySelector(`[name="${name}"]`);
     if (button) {
-      button.setAttribute("aria-pressed", isPressed.toString());
+      const next = isPressed.toString();
+      if (button.getAttribute("aria-pressed") !== next) {
+        button.setAttribute("aria-pressed", next);
+      }
     }
   }
 
   #setButtonDisabled(name, isDisabled) {
     const button = this.querySelector(`[name="${name}"]`);
     if (button) {
-      button.disabled = isDisabled;
-      button.setAttribute("aria-disabled", isDisabled.toString());
+      if (button.disabled !== isDisabled) {
+        button.disabled = isDisabled;
+      }
+      const next = isDisabled.toString();
+      if (button.getAttribute("aria-disabled") !== next) {
+        button.setAttribute("aria-disabled", next);
+      }
     }
   }
 
@@ -1078,6 +1143,18 @@ class LexxyExtension {
   initializeToolbar(_lexxyToolbar) {
 
   }
+
+  dispose() {
+  }
+}
+
+function $containsRangeSelection(node, selection = $getSelection()) {
+  if ($isRangeSelection(selection)) {
+    const { commonAncestor } = $getCommonAncestor(selection.focus.getNode(), selection.anchor.getNode());
+    return $findMatchingParent(commonAncestor, parent => parent.is(node))
+  } else {
+    return false
+  }
 }
 
 function $createNodeSelectionWith(...nodes) {
@@ -2813,17 +2890,12 @@ class CommandDispatcher {
     this.editor = editorElement.editor;
     this.selection = editorElement.selection;
     this.contents = editorElement.contents;
-    this.clipboard = editorElement.clipboard;
 
     this.#registerCommands();
     this.#registerKeyboardCommands();
     this.#registerDragAndDropHandlers();
   }
 
-  dispatchPaste(event) {
-    return this.clipboard.paste(event)
-  }
-
   dispatchBold() {
     this.editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
   }
@@ -3050,8 +3122,6 @@ class CommandDispatcher {
       const methodName = `dispatch${capitalize(command)}`;
       this.#registerCommandHandler(command, 0, this[methodName].bind(this));
     }
-
-    this.#registerCommandHandler(PASTE_COMMAND, COMMAND_PRIORITY_LOW, this.dispatchPaste.bind(this));
   }
 
   #registerCommandHandler(command, priority, handler) {
@@ -3412,6 +3482,11 @@ class Selection {
     return $isActionTextAttachmentNode(firstNode) && firstNode.isPreviewableImage
   }
 
+  get isAtNodeStart() {
+    const { anchorNode, offset } = this.#getCollapsedSelectionData();
+    return anchorNode && offset === 0
+  }
+
   get nodeAfterCursor() {
     const { anchorNode, offset } = this.#getCollapsedSelectionData();
     if (!anchorNode) return null
@@ -4586,8 +4661,9 @@ class Uploader {
     return new UploaderKlass(editorElement, files)
   }
 
-  constructor(editorElement, files) {
+  constructor(editorElement, files, options = {}) {
     this.#files = files;
+    this.options = options;
 
     this.editorElement = editorElement;
     this.contents = editorElement.contents;
@@ -4629,10 +4705,10 @@ class GalleryUploader extends Uploader {
   #gallery
 
   static handle(editorElement, files) {
-    return this.#isMultipleImageUpload(files) || this.#gallerySelection(editorElement.selection)
+    return this.isMultipleImageUpload(files) || this.gallerySelection(editorElement.selection)
   }
 
-  static #isMultipleImageUpload(files) {
+  static isMultipleImageUpload(files) {
     let imageFileCount = 0;
     for (const file of files) {
       if (isPreviewableImage(file.type)) imageFileCount++;
@@ -4641,11 +4717,12 @@ class GalleryUploader extends Uploader {
     return false
   }
 
-  static #gallerySelection(selection) {
-    if (selection.isOnPreviewableImage) return true
+  static gallerySelection(selection) {
+    return selection.isOnPreviewableImage || this.selectionIsAfterGalleryEdge(selection)
+  }
 
-    const { node: selectedNode } = selection.selectedNodeWithOffset();
-    return $getNearestNodeOfType(selectedNode, ImageGalleryNode) !== null
+  static selectionIsAfterGalleryEdge(selection) {
+    return selection.isAtNodeStart && ImageGalleryNode.canCollapseWith(selection.nodeBeforeCursor)
   }
 
   $insertUploadNodes() {
@@ -4657,18 +4734,26 @@ class GalleryUploader extends Uploader {
   #findOrCreateGallery() {
     if (this.selection.isOnPreviewableImage) {
       this.#gallery = $findOrCreateGalleryForImage(this.#selectedNode);
+    } else if (this.#selectionIsAfterGalleryEdge) {
+      this.#gallery = $findOrCreateGalleryForImage(this.selection.nodeBeforeCursor);
     } else {
       this.#gallery = $createImageGalleryNode();
       this.contents.insertAtCursor(this.#gallery);
     }
   }
 
+  get #selectionIsAfterGalleryEdge() {
+    return this.constructor.selectionIsAfterGalleryEdge(this.selection)
+  }
+
   get #selectedNode() {
     const { node } = this.selection.selectedNodeWithOffset();
     return node
   }
 
   get #galleryInsertPosition() {
+    if (this.#selectionIsAfterGalleryEdge) return this.#gallery.getChildrenSize()
+
     const anchor = $getSelection()?.anchor;
     const galleryHasElementSelection = anchor?.getNode().is(this.#gallery);
     if (galleryHasElementSelection) return anchor.offset
@@ -5396,10 +5481,22 @@ class Contents {
 }
 
 class Clipboard {
+  #listeners = new ListenerBin()
+
   constructor(editorElement) {
     this.editorElement = editorElement;
     this.editor = editorElement.editor;
     this.contents = editorElement.contents;
+
+    this.#registerPasteCommands();
+  }
+
+  dispose() {
+    this.editorElement = null;
+    this.editor = null;
+    this.contents = null;
+
+    this.#listeners.dispose();
   }
 
   paste(event) {
@@ -5424,6 +5521,25 @@ class Clipboard {
     return handled
   }
 
+  #registerPasteCommands() {
+    this.#listeners.track(
+      this.editor.registerCommand(PASTE_COMMAND, this.paste.bind(this), COMMAND_PRIORITY_NORMAL),
+      this.editor.registerCommand(
+        SELECTION_INSERT_CLIPBOARD_NODES_COMMAND,
+        (payload) => this.#handleParsedClipboardNodes(payload),
+        COMMAND_PRIORITY_NORMAL
+      )
+    );
+  }
+
+  #handleParsedClipboardNodes({ nodes, selection }) {
+    const url = $bareUrlFromSingleLink(nodes);
+    if (!url) return false
+
+    this.#insertSingleLinkAt(selection, url);
+    return true
+  }
+
   #isPlainTextOrURLPasted(clipboardData) {
     return this.#isOnlyPlainTextPasted(clipboardData) || this.#isOnlyURLPasted(clipboardData)
   }
@@ -5486,6 +5602,24 @@ class Clipboard {
     });
   }
 
+  #insertSingleLinkAt(selection, url) {
+    if (!$isRangeSelection(selection)) return
+
+    if (!selection.isCollapsed()) {
+      $toggleLink(null);
+      $toggleLink(url);
+      return
+    }
+
+    const linkNode = $createLinkNode(url).append($createTextNode(url));
+    selection.insertNodes([ linkNode ]);
+
+    // Defer the lexxy:insert-link event until after the active update commits;
+    // listeners may run editor mutations of their own.
+    const nodeKey = linkNode.getKey();
+    Promise.resolve().then(() => this.#dispatchLinkInsertEvent(nodeKey, { url }));
+  }
+
   #dispatchLinkInsertEvent(nodeKey, payload) {
     const linkManipulationMethods = {
       replaceLinkWith: (html, options) => this.contents.replaceNodeWithHTML(nodeKey, html, options),
@@ -5577,6 +5711,28 @@ class Clipboard {
   }
 }
 
+function $bareUrlFromSingleLink(nodes) {
+  if (nodes.length !== 1) return null
+
+  const node = nodes[0];
+  if ($isLinkNode(node)) return $bareUrlFromLink(node)
+
+  if ($isParagraphNode(node)) {
+    const children = node.getChildren();
+    if (children.length === 1 && $isLinkNode(children[0])) {
+      return $bareUrlFromLink(children[0])
+    }
+  }
+
+  return null
+}
+
+function $bareUrlFromLink(linkNode) {
+  const url = linkNode.getURL();
+  if (!url) return null
+  return linkNode.getTextContent() === url ? url : null
+}
+
 class Extensions {
 
   constructor(lexxyElement) {
@@ -5597,6 +5753,12 @@ class Extensions {
     this.#addExtensionToolbarButtons(toolbar);
   }
 
+  dispose() {
+    while (this.enabledExtensions.length) {
+      this.enabledExtensions.pop().dispose();
+    }
+  }
+
   #clearPreviousExtensionToolbarButtons(toolbar) {
     toolbar.querySelectorAll("[data-lexxy-extension]").forEach(el => el.remove());
   }
@@ -6002,9 +6164,15 @@ class TablesExtension extends LexxyExtension {
         setScrollableTablesActive(editor, true);
 
         return mergeRegister(
-          // Register Lexical table plugins
           registerTablePlugin(editor),
-          registerTableSelectionObserver(editor, true),
+
+          // Lexxy registers extensions before setRootElement(), but table
+          // drag-selection needs a root before wiring its pointer handlers.
+          editor.registerRootListener((rootElement) => {
+            if (rootElement) {
+              return registerTableSelectionObserver(editor, true)
+            }
+          }),
 
           // Bug fix: Prevent hardcoded background color (Lexical #8089)
           editor.registerNodeTransform(TableCellNode, (node) => {
@@ -6712,7 +6880,8 @@ class FormatEscapeExtension extends LexxyExtension {
             KEY_ARROW_DOWN_COMMAND,
             (event) => $handleArrowDownInCodeBlock(event),
             COMMAND_PRIORITY_NORMAL
-          )
+          ),
+          editor.registerNodeTransform(QuoteNode, $ensureQuoteHasParagraphChild)
         )
       }
     })
@@ -6765,6 +6934,13 @@ function $handleArrowDownInCodeBlock(event) {
   return false
 }
 
+function $ensureQuoteHasParagraphChild(quoteNode) {
+  if (!quoteNode.isEmpty()) return
+
+  quoteNode.append($createParagraphNode());
+  if ($containsRangeSelection(quoteNode)) quoteNode.getFirstChild().select();
+}
+
 class LinkOpenerExtension extends LexxyExtension {
   get enabled() {
     return this.editorElement.supportsRichText
@@ -6852,6 +7028,7 @@ class LexicalEditorElement extends HTMLElement {
     this.id ||= generateDomId("lexxy-editor");
     this.config = new EditorConfiguration(this);
     this.extensions = new Extensions(this);
+    this.#disposables.push(this.extensions);
 
     this.editor = this.#createEditor();
     this.#disposables.push(this.editor);
@@ -6864,6 +7041,8 @@ class LexicalEditorElement extends HTMLElement {
     this.#disposables.push(this.selection);
 
     this.clipboard = new Clipboard(this);
+    this.#disposables.push(this.clipboard);
+
     this.adapter = new BrowserAdapter();
 
     const commandDispatcher = CommandDispatcher.configureFor(this);
@@ -7828,7 +8007,10 @@ class HighlightDropdown extends ToolbarDropdown {
 
     this.#colorButtons.forEach(button => {
       const matchesSelection = button.dataset.value === textColor || button.dataset.value === backgroundColor;
-      button.setAttribute("aria-pressed", matchesSelection);
+      const next = matchesSelection.toString();
+      if (button.getAttribute("aria-pressed") !== next) {
+        button.setAttribute("aria-pressed", next);
+      }
     });
 
     const hasHighlight = textColor !== NO_STYLE || backgroundColor !== NO_STYLE;
@@ -8236,7 +8418,7 @@ class LexicalPromptElement extends HTMLElement {
   }
 
   #selectOption(listItem) {
-    this.#clearSelection();
+    this.#clearListItemSelection();
     listItem.toggleAttribute("aria-selected", true);
     listItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
     listItem.focus();
@@ -8246,18 +8428,28 @@ class LexicalPromptElement extends HTMLElement {
       this.#editorElement.focus();
     });
 
-    this.#editorContentElement.setAttribute("aria-controls", this.popoverElement.id);
-    this.#editorContentElement.setAttribute("aria-activedescendant", listItem.id);
-    this.#editorContentElement.setAttribute("aria-haspopup", "listbox");
+    this.#setEditorAssociationAttribute("aria-controls", this.popoverElement.id);
+    this.#setEditorAssociationAttribute("aria-activedescendant", listItem.id);
+    this.#setEditorAssociationAttribute("aria-haspopup", "listbox");
   }
 
-  #clearSelection() {
+  #clearListItemSelection() {
     this.#listItemElements.forEach((item) => { item.toggleAttribute("aria-selected", false); });
+  }
+
+  #clearSelection() {
+    this.#clearListItemSelection();
     this.#editorContentElement.removeAttribute("aria-controls");
     this.#editorContentElement.removeAttribute("aria-activedescendant");
     this.#editorContentElement.removeAttribute("aria-haspopup");
   }
 
+  #setEditorAssociationAttribute(name, value) {
+    if (this.#editorContentElement.getAttribute(name) !== value) {
+      this.#editorContentElement.setAttribute(name, value);
+    }
+  }
+
   #positionPopover() {
     const { x, y, fontSize } = this.#selection.cursorPosition;
     const editorRect = this.#editorElement.getBoundingClientRect();

package/dist/lexxy_helpers.esm.js

@@ -28,64 +28,6 @@ import 'prismjs/components/prism-kotlin';
 window.Prism ||= {};
 window.Prism.manual = true;
 
-function createElement(name, properties, content = "") {
-  const element = document.createElement(name);
-  for (const [ key, value ] of Object.entries(properties || {})) {
-    if (key in element) {
-      element[key] = value;
-    } else if (value !== null && value !== undefined) {
-      element.setAttribute(key, value);
-    }
-  }
-  if (content) {
-    element.innerHTML = content;
-  }
-  return element
-}
-
-function parseHtml(html) {
-  const parser = new DOMParser();
-  return parser.parseFromString(html, "text/html")
-}
-
-function createAttachmentFigure(contentType, isPreviewable, fileName) {
-  const extension = fileName ? fileName.split(".").pop().toLowerCase() : "unknown";
-  return createElement("figure", {
-    className: `attachment attachment--${isPreviewable ? "preview" : "file"} attachment--${extension}`,
-    "data-content-type": contentType
-  })
-}
-
-function isPreviewableImage(contentType) {
-  return contentType.startsWith("image/") && !contentType.includes("svg")
-}
-
-function dispatch(element, eventName, detail = null, cancelable = false) {
-  return element.dispatchEvent(new CustomEvent(eventName, { bubbles: true, detail, cancelable }))
-}
-
-function addBlockSpacing(doc) {
-  const blocks = doc.querySelectorAll("body > :not(h1, h2, h3, h4, h5, h6) + *");
-  for (const block of blocks) {
-    const spacer = doc.createElement("p");
-    spacer.appendChild(doc.createElement("br"));
-    block.before(spacer);
-  }
-}
-
-function generateDomId(prefix) {
-  const randomPart = Math.random().toString(36).slice(2, 10);
-  return `${prefix}-${randomPart}`
-}
-
-function extractPlainTextFromHtml(innerHtml = "") {
-  return parseHtml(innerHtml).body.textContent.trim()
-}
-
-function isActiveAndVisible(element) {
-  return element && !element.disabled && element.checkVisibility()
-}
-
 function highlightCode() {
   const elements = document.querySelectorAll("pre[data-language]");
 
@@ -108,13 +50,11 @@ function highlightElement(preElement) {
   code = new DOMParser().parseFromString(code, "text/html").body.textContent || "";
 
   const highlightedHtml = Prism.highlight(code, grammar, language);
-  const codeElement = createElement("code", { "data-language": language, innerHTML: highlightedHtml });
+  preElement.innerHTML = highlightedHtml;
 
   if (highlights.length > 0) {
-    applyHighlightRanges(codeElement, highlights);
+    applyHighlightRanges(preElement, highlights);
   }
-
-  preElement.replaceChildren(codeElement);
 }
 
 // Walk the DOM tree inside a <pre> element and build a list of
@@ -220,4 +160,4 @@ function collectTextNodes(root) {
   return nodes
 }
 
-export { addBlockSpacing, createAttachmentFigure, createElement, dispatch, extractPlainTextFromHtml, generateDomId, highlightCode, isActiveAndVisible, isPreviewableImage, parseHtml };
+export { highlightCode };

package/package.json

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