@37signals/lexxy 0.9.6-beta.bc0 → 0.9.7-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;
 
@@ -5914,9 +5923,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;
@@ -7507,6 +7516,8 @@ class BaseSource {
   }
 }
 
+const MAX_RENDERED_SUGGESTIONS$1 = 100;
+
 class LocalFilterSource extends BaseSource {
   async buildListItems(filter = "") {
     const promptItems = await this.fetchPromptItems();
@@ -7525,7 +7536,10 @@ class LocalFilterSource extends BaseSource {
   #buildListItemsFromPromptItems(promptItems, filter) {
     const listItems = [];
     this.promptItemByListItem = new WeakMap();
-    promptItems.forEach((promptItem) => {
+
+    for (const promptItem of promptItems) {
+      if (listItems.length >= MAX_RENDERED_SUGGESTIONS$1) break
+
       const searchableText = promptItem.getAttribute("search");
 
       if (!filter || filterMatches(searchableText, filter)) {
@@ -7533,7 +7547,7 @@ class LocalFilterSource extends BaseSource {
         this.promptItemByListItem.set(listItem, promptItem);
         listItems.push(listItem);
       }
-    });
+    }
 
     return listItems
   }
@@ -7566,6 +7580,7 @@ class DeferredPromptSource extends LocalFilterSource {
 }
 
 const DEBOUNCE_INTERVAL = 200;
+const MAX_RENDERED_SUGGESTIONS = 100;
 
 class RemoteFilterSource extends BaseSource {
   constructor(url) {
@@ -7599,6 +7614,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 +7626,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 +7789,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.7-beta",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",