@37signals/lexxy 0.9.6-beta.bc0 → 0.9.8-beta

package/README.md

@@ -3,7 +3,7 @@
 A modern rich text editor for Rails.
 
 > [!IMPORTANT]
-> This is an early beta. It hasn't been battle-tested yet. Please try it out and report any issues you find.
+> This is a beta. It hasn't been battle-tested yet. Please try it out and report any issues you find.
 
 **[Try it out!](https://basecamp.github.io/lexxy/try-it)**
 
@@ -26,7 +26,7 @@ Visit the **[documentation site](https://basecamp.github.io/lexxy)**.
 
 ## Roadmap
 
-This is an early beta. Here's what's coming next:
+This is a beta. Here's what's coming next:
 
 - [x] Configurable editors in Action Text: Choose your editor like you choose your database.
 - [x] More editing features:

package/dist/lexxy.esm.js

@@ -2186,7 +2186,7 @@ class CommandDispatcher {
 
   dispatchInsertUnorderedList() {
     const selection = $getSelection();
-    if (!selection) return
+    if (!$isRangeSelection(selection)) return
 
     const anchorNode = selection.anchor.getNode();
 
@@ -2199,7 +2199,7 @@ class CommandDispatcher {
 
   dispatchInsertOrderedList() {
     const selection = $getSelection();
-    if (!selection) return
+    if (!$isRangeSelection(selection)) return
 
     const anchorNode = selection.anchor.getNode();
 
@@ -2491,6 +2491,15 @@ function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1)
 }
 
+function debounce(fn, wait) {
+  let timeout;
+
+  return (...args) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => fn(...args), wait);
+  }
+}
+
 function debounceAsync(fn, wait) {
   let timeout;
 
@@ -2533,14 +2542,24 @@ function normalizeFilteredText(string) {
     .normalize("NFD").replace(/[\u0300-\u036f]/g, "") // Remove diacritics
 }
 
-function filterMatches(text, potentialMatch) {
-  return normalizeFilteredText(text).includes(normalizeFilteredText(potentialMatch))
+function filterMatchPosition(text, potentialMatch) {
+  const normalizedText = normalizeFilteredText(text);
+  const normalizedMatch = normalizeFilteredText(potentialMatch);
+
+  if (!normalizedMatch) return 0
+
+  const match = normalizedText.match(new RegExp(`(?:^|\\b)${escapeForRegExp(normalizedMatch)}`));
+  return match ? match.index : -1
 }
 
 function upcaseFirst(string) {
   return string.charAt(0).toUpperCase() + string.slice(1)
 }
 
+function escapeForRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+}
+
 // Parses a value that may arrive as a boolean or as a string (e.g. from DOM
 // getAttribute) into a proper boolean. Ensures "false" doesn't evaluate as truthy.
 function parseBoolean(value) {
@@ -5914,9 +5933,9 @@ class AttachmentDragAndDrop {
   // -- Event handlers --------------------------------------------------------
 
   #handleDragStart(event) {
-    if (event.target.closest("textarea")) return false
+    if (event.target.closest?.("textarea")) return false
 
-    const figure = event.target.closest("figure.attachment[data-lexical-node-key]");
+    const figure = event.target.closest?.("figure.attachment[data-lexical-node-key]");
     if (!figure) return false
 
     this.#draggedNodeKey = figure.dataset.lexicalNodeKey;
@@ -7361,7 +7380,7 @@ class LinkDropdown extends ToolbarDropdown {
   get #selectedLinkUrl() {
     return this.editor.getEditorState().read(() => {
       const linkNode = this.editorElement.selection.nearestNodeOfType(LinkNode);
-      return linkNode?.getUrl() ?? null
+      return linkNode?.getURL() ?? ""
     })
   }
 }
@@ -7507,6 +7526,8 @@ class BaseSource {
   }
 }
 
+const MAX_RENDERED_SUGGESTIONS$1 = 100;
+
 class LocalFilterSource extends BaseSource {
   async buildListItems(filter = "") {
     const promptItems = await this.fetchPromptItems();
@@ -7523,18 +7544,41 @@ class LocalFilterSource extends BaseSource {
   }
 
   #buildListItemsFromPromptItems(promptItems, filter) {
-    const listItems = [];
     this.promptItemByListItem = new WeakMap();
-    promptItems.forEach((promptItem) => {
-      const searchableText = promptItem.getAttribute("search");
 
-      if (!filter || filterMatches(searchableText, filter)) {
-        const listItem = this.buildListItemElementFor(promptItem);
-        this.promptItemByListItem.set(listItem, promptItem);
-        listItems.push(listItem);
+    if (!filter) {
+      return this.#buildAllListItems(promptItems)
+    }
+
+    const matches = [];
+    for (const promptItem of promptItems) {
+      const searchableText = promptItem.getAttribute("search");
+      const position = filterMatchPosition(searchableText, filter);
+      if (position >= 0) {
+        matches.push({ promptItem, position });
       }
-    });
+    }
 
+    matches.sort((a, b) => a.position - b.position);
+
+    const listItems = [];
+    for (const { promptItem } of matches) {
+      if (listItems.length >= MAX_RENDERED_SUGGESTIONS$1) break
+      const listItem = this.buildListItemElementFor(promptItem);
+      this.promptItemByListItem.set(listItem, promptItem);
+      listItems.push(listItem);
+    }
+    return listItems
+  }
+
+  #buildAllListItems(promptItems) {
+    const listItems = [];
+    for (const promptItem of promptItems) {
+      if (listItems.length >= MAX_RENDERED_SUGGESTIONS$1) break
+      const listItem = this.buildListItemElementFor(promptItem);
+      this.promptItemByListItem.set(listItem, promptItem);
+      listItems.push(listItem);
+    }
     return listItems
   }
 }
@@ -7566,6 +7610,7 @@ class DeferredPromptSource extends LocalFilterSource {
 }
 
 const DEBOUNCE_INTERVAL = 200;
+const MAX_RENDERED_SUGGESTIONS = 100;
 
 class RemoteFilterSource extends BaseSource {
   constructor(url) {
@@ -7599,6 +7644,8 @@ class RemoteFilterSource extends BaseSource {
     this.promptItemByListItem = new WeakMap();
 
     for (const promptItem of promptItems) {
+      if (listItems.length >= MAX_RENDERED_SUGGESTIONS) break
+
       const listItem = this.buildListItemElementFor(promptItem);
       this.promptItemByListItem.set(listItem, promptItem);
       listItems.push(listItem);
@@ -7609,10 +7656,12 @@ class RemoteFilterSource extends BaseSource {
 }
 
 const NOTHING_FOUND_DEFAULT_MESSAGE = "Nothing found";
+const FILTER_DEBOUNCE_INTERVAL = 50;
 
 class LexicalPromptElement extends HTMLElement {
   #globalListeners = new ListenerBin()
   #popoverListeners = new ListenerBin()
+  #debouncedFilterOptions = debounce(() => this.#filterOptions(), FILTER_DEBOUNCE_INTERVAL)
 
   constructor() {
     super();
@@ -7770,7 +7819,7 @@ class LexicalPromptElement extends HTMLElement {
 
     this.#popoverListeners.track(
       registerEventListener(this.#editorElement, "keydown", this.#handleKeydownOnPopover),
-      registerEventListener(this.#editorElement, "lexxy:change", this.#filterOptions)
+      registerEventListener(this.#editorElement, "lexxy:change", this.#debouncedFilterOptions)
     );
 
     this.#registerKeyListeners();

package/package.json

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