@37signals/lexxy 0.9.21 → 0.9.23

package/README.md

@@ -2,7 +2,7 @@
 
 A modern rich text editor for Rails.
 
-**[Try it out!](https://basecamp.github.io/lexxy/try-it)**
+[Documentation](https://basecamp.github.io/lexxy/docs/) | <mark>[Try it out!](https://basecamp.github.io/lexxy/sandbox/)</mark>
 
 ## Features
 
@@ -15,24 +15,7 @@ A modern rich text editor for Rails.
 - Preview attachments like PDFs and Videos in the editor.
 - Works seamlessly with Action Text, generating the same canonical HTML format it expects for attachments.
 
-![Lexxy editor screenshot](docs/images/home.screenshot.png)
-
-## Documentation
-
-Visit the **[documentation site](https://basecamp.github.io/lexxy)**.
-
-## Roadmap
-
-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:
-    - [x] Tables
-    - [x] Text highlighting
-- [x] Configuration hooks.
-- [x] Standalone JS package: to use in non-Rails environments.
-- [x] Image galleries: The only remaining feature for full Action Text compatibility
-- [ ] Install task that generates the necessary JS and adds stylesheets.
+![Lexxy editor screenshot](home/docs/images/home.screenshot.png)
 
 ## Contributing
 

package/dist/lexxy.esm.js

@@ -1,7 +1,9 @@
 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, $normalizeSelection__EXPERIMENTAL, $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, INSERT_LINE_BREAK_COMMAND, COMMAND_PRIORITY_HIGH, INSERT_PARAGRAPH_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, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, PASTE_COMMAND, $onUpdate, ParagraphNode, RootNode, DRAGSTART_COMMAND, DROP_COMMAND, mergeRegister as mergeRegister$1, $createRangeSelectionFromDom, CLEAR_HISTORY_COMMAND, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, INPUT_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, defineExtension, $getRoot, $caretFromPoint, $setSelectionFromCaretRange, $getCaretRange, $normalizeCaret, $getChildCaret, $getCaretInDirection, $isParagraphNode, $isLineBreakNode, $createParagraphNode, $isElementNode, $isRootOrShadowRoot, $isRootNode, $createNodeSelection, $isDecoratorNode, $isTextNode, $getSiblingCaret, $rewindSiblingCaret, $splitAtPointCaretNext, $normalizeSelection__EXPERIMENTAL, $isChildCaret, $isTextPointCaret, $isExtendableTextPointCaret, $isSiblingCaret, $getCommonAncestor, $findMatchingParent, TextNode, createCommand, 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, INSERT_LINE_BREAK_COMMAND, COMMAND_PRIORITY_HIGH, INSERT_PARAGRAPH_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, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, PASTE_COMMAND, $onUpdate, ParagraphNode, RootNode, DRAGSTART_COMMAND, DROP_COMMAND, mergeRegister as mergeRegister$1, $createRangeSelectionFromDom, CLEAR_HISTORY_COMMAND, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, INPUT_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
+import * as lexical from 'lexical';
+export { lexical as Lexical };
 import { LinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, $isLinkNode, AutoLinkNode } from '@lexical/link';
 import { buildEditorFromExtensions } from '@lexical/extension';
 import { ListNode, ListItemNode, $getListDepth, $isListNode, $isListItemNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $createListNode, $createListItemNode, registerList } from '@lexical/list';
@@ -10,7 +12,7 @@ import { registerPlainText } from '@lexical/plain-text';
 import { RichTextExtension, $isQuoteNode, QuoteNode, $isHeadingNode, $createHeadingNode, $createQuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 import { HistoryExtension } from '@lexical/history';
-import { $isCodeNode, CodeHighlightNode, CodeNode, $createCodeNode, $isCodeHighlightNode, $createCodeHighlightNode, normalizeCodeLang, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
+import { $isCodeNode, CodeHighlightNode, CodeNode, $createCodeNode, $isCodeHighlightNode, $createCodeHighlightNode, registerCodeHighlighting, normalizeCodeLang, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
 import { TRANSFORMERS, registerMarkdownShortcuts } from '@lexical/markdown';
 import { INSERT_TABLE_COMMAND, $getTableCellNodeFromLexicalNode, TableCellNode, TableNode, TableRowNode, setScrollableTablesActive, registerTablePlugin, registerTableSelectionObserver, TableCellHeaderStates, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $findCellNode, $getElementForTableNode } from '@lexical/table';
 import { marked } from 'marked';
@@ -1509,8 +1511,11 @@ class LexxyExtension {
     return []
   }
 
-  initializeToolbar(_lexxyToolbar) {
+  defineExtension(...args) {
+    return defineExtension(...args)
+  }
 
+  initializeToolbar(_lexxyToolbar) {
   }
 
   setEditorValidity(flags, message) {
@@ -5994,16 +5999,34 @@ class Contents {
     return result
   }
 
-  // The query runs from the trigger up to the next whitespace, even when the
+  // The query runs from the trigger up to the next boundary, even when the
   // cursor sits inside an existing word — inserting "@" before "Jack" must
   // filter by "Jack" rather than treating the prompt as empty.
   #endOffsetAt(fullText, cursorOffset) {
-    const whitespaceOffset = fullText.slice(cursorOffset).search(/\s/);
-    if (whitespaceOffset === -1) {
-      return fullText.length
-    } else {
-      return cursorOffset + whitespaceOffset
+    for (let offset = cursorOffset; offset < fullText.length; offset++) {
+      if (this.#isQueryBoundary(fullText, offset)) {
+        return offset
+      }
     }
+
+    return fullText.length
+  }
+
+  // Whitespace always ends the query. Punctuation ends it too: with "@" typed
+  // right before a period, extending across it would glue "." onto everything
+  // typed ("B" would query "B."), matching the wrong names or nothing at all.
+  // But punctuation joining two word characters is part of a name — "@" before
+  // "Anne-Marie" or "O'Connor" must keep the whole name as the query.
+  #isQueryBoundary(fullText, offset) {
+    const character = fullText[offset];
+    if (/\s/.test(character)) return true
+    if (!/\p{P}/u.test(character)) return false
+
+    return !(this.#isWordCharacter(fullText[offset - 1]) && this.#isWordCharacter(fullText[offset + 1]))
+  }
+
+  #isWordCharacter(character) {
+    return character != null && /[\p{L}\p{N}]/u.test(character)
   }
 
   containsTextBackUntil(string) {
@@ -7071,6 +7094,26 @@ function $getAllProvisionalParagraphs(rootNode = $getRoot()) {
   return $descendantsMatching(rootNode.getChildren(), $isProvisionalParagraphNode)
 }
 
+// Registers code highlighting through the extension system so its node
+// transforms exist before the initial editor state is applied. Registering
+// after editor creation misses code blocks loaded from the initial value:
+// their transform pass has already run, and Lexical's catch-up dirtying
+// only sees the committed (still empty) state.
+class CodeHighlightingExtension extends LexxyExtension {
+  get enabled() {
+    return this.editorElement.supportsRichText
+  }
+
+  get lexicalExtension() {
+    return defineExtension({
+      name: "lexxy/code-highlighting",
+      register(editor) {
+        return registerCodeHighlighting(editor)
+      }
+    })
+  }
+}
+
 const TRIX_LANGUAGE_ATTR = "language";
 
 class TrixContentExtension extends LexxyExtension {
@@ -7202,9 +7245,13 @@ class TablesExtension extends LexxyExtension {
             }
           }),
 
-          // Bug fix: Prevent hardcoded background color (Lexical #8089)
+          // A table in Lexxy is a Lexxy table: cell shading can't be set in the
+          // editor, so any cell background only ever comes from foreign content
+          // (pasted spreadsheets, loaded documents). Normalize every cell to no
+          // background so it adopts the current theme. This also clears
+          // Lexical's hardcoded default header background (Lexical #8089).
           editor.registerNodeTransform(TableCellNode, (node) => {
-            if (node.getBackgroundColor() === null) {
+            if (node.getBackgroundColor() !== "") {
               node.setBackgroundColor("");
             }
           }),
@@ -8591,6 +8638,7 @@ class LexicalEditorElement extends HTMLElement {
   get baseExtensions() {
     return [
       ProvisionalParagraphExtension,
+      CodeHighlightingExtension,
       HighlightExtension,
       TrixContentExtension,
       TablesExtension,
@@ -8998,7 +9046,7 @@ class LexicalEditorElement extends HTMLElement {
         registerList(this.editor)
       );
       this.#registerTableComponents();
-      this.#registerCodeHiglightingComponents();
+      this.#registerCodeLanguagePicker();
       if (this.supportsMarkdown) {
         const transformers = [ ...TRANSFORMERS, HORIZONTAL_DIVIDER ];
         registered.push(
@@ -9020,8 +9068,7 @@ class LexicalEditorElement extends HTMLElement {
     this.#disposables.push(tableTools);
   }
 
-  #registerCodeHiglightingComponents() {
-    registerCodeHighlighting(this.editor);
+  #registerCodeLanguagePicker() {
     let codeLanguagePicker = this.querySelector("lexxy-code-language-picker");
     codeLanguagePicker ??= createElement("lexxy-code-language-picker");
     this.append(codeLanguagePicker);
@@ -10652,6 +10699,7 @@ class TableTools extends HTMLElement {
   connectedCallback() {
     this.tableController = new TableController(this.#editorElement);
     this.classList.add("lexxy-floating-controls");
+    this.role = "toolbar";
 
     this.#setUpButtons();
     this.#hide();
@@ -10782,16 +10830,28 @@ class TableTools extends HTMLElement {
   }
 
   #registerKeyboardShortcuts() {
-    this.#listeners.track(this.#editor.registerCommand(KEY_DOWN_COMMAND, this.#handleAccessibilityShortcutKey, COMMAND_PRIORITY_HIGH));
+    this.#listeners.track(this.#editor.registerCommand(KEY_DOWN_COMMAND, this.#focusToolbarOnShortcut, COMMAND_PRIORITY_HIGH));
   }
 
-  #handleAccessibilityShortcutKey = (event) => {
-    if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "F10") {
-      const firstButton = this.querySelector("button, [tabindex]:not([tabindex='-1'])");
-      firstButton?.focus();
+  #focusToolbarOnShortcut = (event) => {
+    if (this.#hasSelectedTable && this.#isFocusToolbarShortcut(event)) {
+      event.preventDefault();
+      this.#tableToolsButtons[0]?.focus();
+      return true
+    } else {
+      return false
     }
   }
 
+  get #hasSelectedTable() {
+    return this.tableController?.currentTableNodeKey != null
+  }
+
+  #isFocusToolbarShortcut(event) {
+    if (event.key !== "F10") return false
+    return event.altKey || ((event.ctrlKey || event.metaKey) && event.shiftKey)
+  }
+
   #handleToolsKeydown = (event) => {
     if (event.key === "Escape") {
       this.#handleEscapeKey();

package/package.json

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