@37signals/lexxy 0.1.26-beta → 0.1.27-beta

package/README.md

@@ -23,7 +23,7 @@ A modern rich text editor for Rails.
 Add this line to your application's Gemfile:
 
 ```ruby
-gem 'lexxy', '~> 0.1.23.beta' # Need to specify the version since it's a pre-release
+gem 'lexxy', '~> 0.1.26.beta' # Need to specify the version since it's a pre-release
 ```
 
 And then execute:

package/dist/lexxy.esm.js

@@ -15,7 +15,7 @@ import { $isListNode, $isListItemNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORD
 import { $isQuoteNode, $isHeadingNode, $createQuoteNode, $createHeadingNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $isCodeNode, CodeNode, normalizeCodeLang, CodeHighlightNode, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
 import { $isLinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, LinkNode, AutoLinkNode } from '@lexical/link';
-import { $getTableCellNodeFromLexicalNode, INSERT_TABLE_COMMAND, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, TableNode, TableCellNode, TableRowNode, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $getElementForTableNode, $isTableCellNode, TableCellHeaderStates } from '@lexical/table';
+import { $getTableCellNodeFromLexicalNode, INSERT_TABLE_COMMAND, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, TableCellNode, TableNode, TableRowNode, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $getElementForTableNode, $isTableCellNode, TableCellHeaderStates } from '@lexical/table';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 import { registerMarkdownShortcuts, TRANSFORMERS } from '@lexical/markdown';
 import { createEmptyHistoryState, registerHistory } from '@lexical/history';
@@ -1645,26 +1645,19 @@ class Selection {
     this.#containEditorFocus();
   }
 
-  clear() {
-    this.current = null;
-  }
-
   set current(selection) {
-    if ($isNodeSelection(selection)) {
-      this.editor.getEditorState().read(() => {
-        this._current = $getSelection();
-        this.#syncSelectedClasses();
-      });
-    } else {
-      this.editor.update(() => {
-        this.#syncSelectedClasses();
-        this._current = null;
-      });
-    }
+    this.editor.update(() => {
+      this.#syncSelectedClasses();
+    });
   }
 
-  get current() {
-    return this._current
+  get hasNodeSelection() {
+    let result = false;
+    this.editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      result = selection !== null && $isNodeSelection(selection);
+    });
+    return result
   }
 
   get cursorPosition() {
@@ -1857,18 +1850,18 @@ class Selection {
   }
 
   get #currentlySelectedKeys() {
-    if (this._currentlySelectedKeys) { return this._currentlySelectedKeys }
+    if (this.currentlySelectedKeys) { return this.currentlySelectedKeys }
 
-    this._currentlySelectedKeys = new Set();
+    this.currentlySelectedKeys = new Set();
 
     const selection = $getSelection();
     if (selection && $isNodeSelection(selection)) {
       for (const node of selection.getNodes()) {
-        this._currentlySelectedKeys.add(node.getKey());
+        this.currentlySelectedKeys.add(node.getKey());
       }
     }
 
-    return this._currentlySelectedKeys
+    return this.currentlySelectedKeys
   }
 
   #processSelectionChangeCommands() {
@@ -1998,7 +1991,7 @@ class Selection {
     this.#highlightNewItems();
 
     this.previouslySelectedKeys = this.#currentlySelectedKeys;
-    this._currentlySelectedKeys = null;
+    this.currentlySelectedKeys = null;
   }
 
   #clearPreviouslyHighlightedItems() {
@@ -2020,7 +2013,7 @@ class Selection {
   }
 
   async #selectPreviousNode() {
-    if (this.current) {
+    if (this.hasNodeSelection) {
       await this.#withCurrentNode((currentNode) => currentNode.selectPrevious());
     } else {
       this.#selectInLexical(this.nodeBeforeCursor);
@@ -2028,7 +2021,7 @@ class Selection {
   }
 
   async #selectNextNode() {
-    if (this.current) {
+    if (this.hasNodeSelection) {
       await this.#withCurrentNode((currentNode) => currentNode.selectNext(0, 0));
     } else {
       this.#selectInLexical(this.nodeAfterCursor);
@@ -2036,7 +2029,7 @@ class Selection {
   }
 
   async #selectPreviousTopLevelNode() {
-    if (this.current) {
+    if (this.hasNodeSelection) {
       await this.#withCurrentNode((currentNode) => currentNode.selectPrevious());
     } else {
       this.#selectInLexical(this.topLevelNodeBeforeCursor);
@@ -2044,7 +2037,7 @@ class Selection {
   }
 
   async #selectNextTopLevelNode() {
-    if (this.current) {
+    if (this.hasNodeSelection) {
       await this.#withCurrentNode((currentNode) => currentNode.selectNext(0, 0));
     } else {
       this.#selectInLexical(this.topLevelNodeAfterCursor);
@@ -2053,10 +2046,9 @@ class Selection {
 
   async #withCurrentNode(fn) {
     await nextFrame();
-    if (this.current) {
+    if (this.hasNodeSelection) {
       this.editor.update(() => {
-        this.clear();
-        fn(this.current.getNodes()[0]);
+        fn($getSelection().getNodes()[0]);
         this.editor.focus();
       });
     }
@@ -2301,6 +2293,17 @@ class Selection {
   }
 }
 
+// Prevent the hardcoded background color
+// A background color value is set by Lexical if background is null:
+// https://github.com/facebook/lexical/blob/5bbbe849bd229e1db0e7b536e6a919520ada7bb2/packages/lexical-table/src/LexicalTableCellNode.ts#L187
+function registerHeaderBackgroundTransform(editor) {
+  return editor.registerNodeTransform(TableCellNode, (node) => {
+    if (node.getBackgroundColor() === null) {
+      node.setBackgroundColor("");
+    }
+  })
+}
+
 class CustomActionTextAttachmentNode extends DecoratorNode {
   static getType() {
     return "custom_action_text_attachment"
@@ -2949,8 +2952,8 @@ class Contents {
     let focusNode = null;
 
     this.editor.update(() => {
-      if ($isNodeSelection(this.#selection.current)) {
-        const nodesToRemove = this.#selection.current.getNodes();
+      if (this.#selection.hasNodeSelection) {
+        const nodesToRemove = $getSelection().getNodes();
         if (nodesToRemove.length === 0) return
 
         focusNode = this.#findAdjacentNodeTo(nodesToRemove);
@@ -2962,7 +2965,6 @@ class Contents {
 
     this.editor.update(() => {
       this.#selectAfterDeletion(focusNode);
-      this.#selection.clear();
       this.editor.focus();
     });
   }
@@ -3988,6 +3990,8 @@ class LexicalEditorElement extends HTMLElement {
     registerTablePlugin(this.editor);
     this.tableHandler = createElement("lexxy-table-handler");
     this.append(this.tableHandler);
+
+    this.#addUnregisterHandler(registerHeaderBackgroundTransform(this.editor));
   }
 
   #registerCodeHiglightingComponents() {
@@ -4556,6 +4560,7 @@ class TableHandler extends HTMLElement {
     const container = createElement("details", {
       className: "lexxy-table-control lexxy-table-control__more-menu"
     });
+    container.setAttribute("name", "lexxy-dropdown");
 
     container.tabIndex = -1;
 

package/dist/stylesheets/lexxy-editor.css

@@ -54,15 +54,17 @@
   }
 
   table {
-    .table-cell--selected {
-      background-color: var(--lexxy-color-table-cell-selected-bg) !important;
-    }
+    th, td {
+      &.table-cell--selected {
+        background-color: var(--lexxy-color-table-cell-selected-bg);
+      }
 
-    .lexxy-content__table-cell--selected {
-      background-color: var(--lexxy-color-table-cell-selected-bg) !important;
-      border-color: var(--lexxy-color-table-cell-selected-border) !important;
+      &.lexxy-content__table-cell--selected {
+        background-color: var(--lexxy-color-table-cell-selected-bg);
+        border-color: var(--lexxy-color-table-cell-selected-border);
+      }
     }
-  
+ 
     &.lexxy-content__table--selection {
       ::selection {
         background: transparent;
@@ -376,69 +378,6 @@
   }
 }
 
-/* Table dropdown
-/* -------------------------------------------------------------------------- */
-
-:where(lexxy-table-dropdown) {
-  display: flex;
-  flex-direction: column;
-  gap: 1ch;
-  
-  .lexxy-editor__table-create {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    gap: 0;
-
-    .lexxy-editor__table-buttons {
-      background-color: var(--lexxy-color-ink-lighter);
-      display: flex;
-      flex-direction: column;
-      gap: 1px;
-      padding: 1px;
-
-      div {
-        display: flex;
-        flex-direction: row;
-        gap: 1px;
-      }
-
-      button {
-        aspect-ratio: 1.5 / 1;
-        border: 0;
-        border-radius: 0;
-        color: var(--lexxy-color-ink);
-        font-family: var(--lexxy-font-base);
-        font-size: var(--lexxy-text-small);
-        font-weight: normal;
-        inline-size: 4ch;
-        margin: 0;
-
-        &.active {
-          background-color: var(--lexxy-color-ink-lightest);
-        }
-      }
-    }
-
-    label {
-      align-items: center;
-      display: flex;
-      gap: 0.5ch;
-      padding: 0.5ch 0;
-      margin-block-start: 1ch;
-    }
-
-    &:has(input[type="checkbox"]:checked) {
-      .lexxy-editor__table-buttons {
-        div:first-child button,
-        button:first-child {
-          filter: brightness(0.95);
-        }
-      }
-    }
-  }
-}
-
 /* Table handle buttons
 /* -------------------------------------------------------------------------- */
 
@@ -453,7 +392,7 @@
   line-height: 1;
   position: absolute;
   transform: translate(-50%, -120%);
-  z-index: 10;
+  z-index: 2;
 
   .lexxy-table-control {
     align-items: center;
@@ -465,7 +404,8 @@
     padding: 2px;
     white-space: nowrap;
 
-    button {
+    button,
+    summary {
       aspect-ratio: 1 / 1;
       align-items: center;
       background-color: transparent;
@@ -477,14 +417,24 @@
       font-weight: bold;
       justify-content: center;
       line-height: 1;
+      list-style: none;
       min-block-size: var(--button-size);
       min-inline-size: var(--button-size);
       padding: 0;
+      user-select: none;
+      -webkit-user-select: none;
 
       &:hover {
         background-color: var(--lexxy-color-ink-medium);
       }
 
+      &:focus,
+      &:focus-visible {
+        background-color: var(--lexxy-color-ink-medium);
+        outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
+        outline-offset: var(--lexxy-focus-ring-offset);
+      }
+
       svg {
         block-size: 1em;
         inline-size: 1em;
@@ -495,47 +445,17 @@
         display: none;
       }
     }
-
-    button,
-    summary {
-      &:focus,
-      &:focus-visible {
-        background-color: var(--lexxy-color-ink-medium);
-        outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
-        outline-offset: var(--lexxy-focus-ring-offset);
-      }
-    }
   }
 
   .lexxy-table-control__more-menu {
     gap: 0;
-    padding: 2px;
+    padding: 0.25ch;
     position: relative;
     
     summary {
-      aspect-ratio: 1 / 1;
-      align-items: center;
-      background: transparent;
-      border-radius: var(--lexxy-radius);
-      border: 0;
-      box-sizing: border-box;
-      display: flex;
-      font-size: inherit;
-      justify-content: center;
-      list-style: none;
-      min-block-size: var(--button-size);
-      min-inline-size: var(--button-size);
-      padding: 0;
-      user-select: none;
-      -webkit-user-select: none;
-
       &::-webkit-details-marker {
         display: none;
       }
-
-      &:hover {
-        background: var(--lexxy-color-ink-medium);
-      }
     }
 
     .lexxy-table-control__more-menu-details {
@@ -552,7 +472,7 @@
         border-radius: 0.75ch;
         display: flex;
         flex-direction: column;
-        padding: 2px;
+        padding: 0.25ch;
       }
 
       button {

package/package.json

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