@lexical/table 0.44.1-nightly.20260519.0 → 0.45.0

package/{LexicalTable.dev.js → dist/LexicalTable.dev.js}

@@ -12,6 +12,7 @@ var utils = require('@lexical/utils');
 var lexical = require('lexical');
 var extension = require('@lexical/extension');
 var clipboard = require('@lexical/clipboard');
+var html = require('@lexical/html');
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -111,7 +112,7 @@ class TableCellNode extends lexical.ElementNode {
     if (this.__backgroundColor !== null) {
       element.style.backgroundColor = this.__backgroundColor;
     }
-    if (isValidVerticalAlign(this.__verticalAlign)) {
+    if (isValidVerticalAlign$1(this.__verticalAlign)) {
       element.style.verticalAlign = this.__verticalAlign;
     }
     utils.addClassNamesToElement(element, config.theme.tableCell, this.hasHeader() && config.theme.tableCellHeader);
@@ -141,7 +142,7 @@ class TableCellNode extends lexical.ElementNode {
   exportJSON() {
     return {
       ...super.exportJSON(),
-      ...(isValidVerticalAlign(this.__verticalAlign) && {
+      ...(isValidVerticalAlign$1(this.__verticalAlign) && {
         verticalAlign: this.__verticalAlign
       }),
       backgroundColor: this.getBackgroundColor(),
@@ -233,7 +234,7 @@ class TableCellNode extends lexical.ElementNode {
     return false;
   }
 }
-function isValidVerticalAlign(verticalAlign) {
+function isValidVerticalAlign$1(verticalAlign) {
   return verticalAlign === 'middle' || verticalAlign === 'bottom';
 }
 function $convertTableCellNodeElement(domNode) {
@@ -274,7 +275,7 @@ function $convertTableCellNodeElement(domNode) {
     tableCellNode.__backgroundColor = backgroundColor;
   }
   const verticalAlign = domNode_.style.verticalAlign;
-  if (isValidVerticalAlign(verticalAlign)) {
+  if (isValidVerticalAlign$1(verticalAlign)) {
     tableCellNode.__verticalAlign = verticalAlign;
   }
   const style = domNode_.style;
@@ -469,28 +470,6 @@ function $isTableRowNode(node) {
   return node instanceof TableRowNode;
 }
 
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
-
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const documentMode = CAN_USE_DOM && 'documentMode' in document ? document.documentMode : null;
-const IS_FIREFOX = CAN_USE_DOM && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
-CAN_USE_DOM && 'InputEvent' in window && !documentMode ? 'getTargetRanges' in new window.InputEvent('input') : false;
-
 function $createTableNodeWithDimensions(rowCount, columnCount, includeHeaders = true) {
   const tableNode = $createTableNode();
   for (let iRow = 0; iRow < rowCount; iRow++) {
@@ -1823,7 +1802,7 @@ function $isTableSelection(x) {
 function $createTableSelection() {
   // TODO this is a suboptimal design, it doesn't make sense to have
   // a table selection that isn't associated with a table. This
-  // constructor should have required arguments and in true we
+  // constructor should have required arguments and in __DEV__ we
   // should check that they point to a table and are element points to
   // cell nodes of that table.
   const anchor = lexical.$createPoint('root', 0, 'element');
@@ -2390,7 +2369,7 @@ function $handleTableClick(editor, event, selectedDOMCell, tableElement, tableOb
       let focusCell = null;
       // In firefox the moveEvent.target may be captured so we must always
       // consult the coordinates #7245
-      const override = !(IS_FIREFOX || tableElement.contains(moveEvent.target));
+      const override = !(lexical.IS_FIREFOX || tableElement.contains(moveEvent.target));
       if (override) {
         focusCell = getDOMCellInTableFromTarget(tableElement, moveEvent.target);
       } else {
@@ -2428,7 +2407,7 @@ function $handleTableClick(editor, event, selectedDOMCell, tableElement, tableOb
   // We can't trust Firefox to do the right thing with the selection and
   // we don't have a proper state machine to do this "correctly" but
   // if we go ahead and make the table selection now it will work
-  if (IS_FIREFOX && event.shiftKey && $isSelectionInTable(prevSelection, tableNode) && (lexical.$isRangeSelection(prevSelection) || $isTableSelection(prevSelection))) {
+  if (lexical.IS_FIREFOX && event.shiftKey && $isSelectionInTable(prevSelection, tableNode) && (lexical.$isRangeSelection(prevSelection) || $isTableSelection(prevSelection))) {
     const prevAnchorNode = prevSelection.anchor.getNode();
     const prevAnchorCell = $findParentTableCellNodeInTable(tableNode, prevSelection.anchor.getNode());
     if (prevAnchorCell) {
@@ -3677,6 +3656,7 @@ function $getNearestTableCellInTableFromDOMNode(tableNode, startingDOM, editorSt
   return $findParentTableCellNodeInTable(tableNode, lexical.$getNearestNodeFromDOMNode(startingDOM, editorState));
 }
 
+const __DEV__ = "development" !== 'production';
 function isHTMLDivElement(element) {
   return utils.isHTMLElement(element) && element.nodeName === 'DIV';
 }
@@ -3771,7 +3751,7 @@ class TableNode extends lexical.ElementNode {
   setColWidths(colWidths) {
     const self = this.getWritable();
     // NOTE: Node properties should be immutable. Freeze to prevent accidental mutation.
-    self.__colWidths = colWidths !== undefined && true ? Object.freeze(colWidths) : colWidths;
+    self.__colWidths = colWidths !== undefined && __DEV__ ? Object.freeze(colWidths) : colWidths;
     return self;
   }
   static clone(node) {
@@ -4601,9 +4581,11 @@ const TableExtension = lexical.defineExtension({
       const hadHorizontalScroll = $isScrollableTablesActive(editor);
       if (hadHorizontalScroll !== hasHorizontalScroll) {
         setScrollableTablesActive(editor, hasHorizontalScroll);
-        // Registering the transform has the side-effect of marking all existing
-        // TableNodes as dirty. The handler is immediately unregistered.
-        editor.registerNodeTransform(TableNode, () => {})();
+        // Re-render existing tables through the new scroll-wrapper config
+        // without cloning every TableNode the way marking them dirty would. A
+        // full reconcile marks no nodes dirty, so it's deferred (no
+        // synchronous render from this effect) and produces no history entry.
+        editor.update(lexical.$fullReconcile);
       }
     }), registerTablePlugin(editor, stores), extension.effect(() => registerTableSelectionObserver(editor, stores.hasTabHandler.value)), extension.effect(() => stores.hasCellMerge.value ? undefined : registerTableCellUnmergeTransform(editor)), extension.effect(() => stores.hasCellBackgroundColor.value ? undefined : editor.registerNodeTransform(TableCellNode, node => {
       if (node.getBackgroundColor() !== null) {
@@ -4613,6 +4595,230 @@ const TableExtension = lexical.defineExtension({
   }
 });
 
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+function isValidVerticalAlign(verticalAlign) {
+  return verticalAlign === 'middle' || verticalAlign === 'bottom';
+}
+
+/**
+ * Bitmask of TextNode format bits implied by a `<th>` / `<td>`'s
+ * inline styles (`font-weight: bold`, `font-style: italic`, and
+ * `underline` / `line-through` in `text-decoration`).
+ */
+function cellTextFormatMask(style) {
+  let mask = 0;
+  const fontWeight = style.fontWeight;
+  if (fontWeight === '700' || fontWeight === 'bold') {
+    mask |= lexical.IS_BOLD;
+  }
+  if (style.fontStyle === 'italic') {
+    mask |= lexical.IS_ITALIC;
+  }
+  const decoration = (style.textDecoration || '').split(' ');
+  if (decoration.includes('underline')) {
+    mask |= lexical.IS_UNDERLINE;
+  }
+  if (decoration.includes('line-through')) {
+    mask |= lexical.IS_STRIKETHROUGH;
+  }
+  return mask;
+}
+
+/**
+ * Coalesce inline + line-break runs in a cell into paragraphs. Mirrors
+ * the legacy `removeSingleLineBreakNode` cleanup so a sole `<br>` doesn't
+ * survive as a paragraph's only child.
+ */
+function $packageCellChildren(children) {
+  const result = [];
+  let paragraph = null;
+  const flushSingleLineBreak = () => {
+    if (paragraph !== null) {
+      const first = paragraph.getFirstChild();
+      if (lexical.$isLineBreakNode(first) && paragraph.getChildrenSize() === 1) {
+        first.remove();
+      }
+    }
+  };
+  for (const child of children) {
+    if (lexical.$isInlineElementOrDecoratorNode(child) || lexical.$isTextNode(child) || lexical.$isLineBreakNode(child)) {
+      if (paragraph !== null) {
+        paragraph.append(child);
+      } else {
+        paragraph = lexical.$createParagraphNode().append(child);
+        result.push(paragraph);
+      }
+    } else {
+      flushSingleLineBreak();
+      result.push(child);
+      paragraph = null;
+    }
+  }
+  flushSingleLineBreak();
+  if (result.length === 0) {
+    result.push(lexical.$createParagraphNode());
+  }
+  return result;
+}
+const TableRule = html.defineImportRule({
+  $import: (ctx, el) => {
+    const node = $createTableNode();
+    if (el.hasAttribute('data-lexical-row-striping')) {
+      node.setRowStriping(true);
+    }
+    if (el.hasAttribute('data-lexical-frozen-column')) {
+      node.setFrozenColumns(1);
+    }
+    if (el.hasAttribute('data-lexical-frozen-row')) {
+      node.setFrozenRows(1);
+    }
+    const colGroup = el.querySelector(':scope > colgroup');
+    if (colGroup) {
+      let columns = [];
+      for (const col of colGroup.querySelectorAll(':scope > col')) {
+        let width = col.style.width || '';
+        if (!PIXEL_VALUE_REG_EXP.test(width)) {
+          width = col.getAttribute('width') || '';
+          if (!/^\d+$/.test(width)) {
+            columns = undefined;
+            break;
+          }
+        }
+        columns.push(parseFloat(width));
+      }
+      if (columns) {
+        node.setColWidths(columns);
+      }
+    }
+    return [node.splice(0, 0, utils.$descendantsMatching(ctx.$importChildren(el), $isTableRowNode))];
+  },
+  match: html.sel.tag('table'),
+  name: '@lexical/table/table'
+});
+const TableRowRule = html.defineImportRule({
+  $import: (ctx, el) => {
+    const height = PIXEL_VALUE_REG_EXP.test(el.style.height) ? parseFloat(el.style.height) : undefined;
+    return [$createTableRowNode(height).splice(0, 0, utils.$descendantsMatching(ctx.$importChildren(el), $isTableCellNode))];
+  },
+  match: html.sel.tag('tr'),
+  name: '@lexical/table/tr'
+});
+const TableCellRule = html.defineImportRule({
+  $import: (ctx, el) => {
+    const isHeader = el.nodeName === 'TH';
+    const width = PIXEL_VALUE_REG_EXP.test(el.style.width) ? parseFloat(el.style.width) : undefined;
+    let headerState = TableCellHeaderStates.NO_STATUS;
+    if (isHeader) {
+      const scope = el.getAttribute('scope');
+      if (scope === 'col') {
+        headerState = TableCellHeaderStates.COLUMN;
+      } else if (scope === 'row') {
+        headerState = TableCellHeaderStates.ROW;
+      } else {
+        const parentRow = el.parentElement;
+        const isInHeaderRow = lexical.isHTMLTableRowElement(parentRow) && (parentRow.parentElement && parentRow.parentElement.nodeName === 'THEAD' || parentRow.rowIndex === 0);
+        const isFirstColumn = el.cellIndex === 0;
+        if (isInHeaderRow) {
+          headerState |= TableCellHeaderStates.ROW;
+        }
+        if (isFirstColumn) {
+          headerState |= TableCellHeaderStates.COLUMN;
+        }
+        if (headerState === TableCellHeaderStates.NO_STATUS) {
+          headerState = TableCellHeaderStates.ROW;
+        }
+      }
+    }
+    const cell = $createTableCellNode(headerState, el.colSpan, width);
+    cell.__rowSpan = el.rowSpan;
+    const backgroundColor = el.style.backgroundColor;
+    if (backgroundColor !== '') {
+      cell.__backgroundColor = backgroundColor;
+    }
+    const verticalAlign = el.style.verticalAlign;
+    if (isValidVerticalAlign(verticalAlign)) {
+      cell.__verticalAlign = verticalAlign;
+    }
+    // Propagate the cell's bold/italic/underline/strikethrough as
+    // format bits, and the cell's `color` as a parsed-style record.
+    // The core `#text` rule reads both at construction time and
+    // applies them to each TextNode — no post-walk needed.
+    const inheritedFormat = ctx.get(html.ImportTextFormat);
+    const cellFormat = inheritedFormat | cellTextFormatMask(el.style);
+    const inheritedStyle = ctx.get(html.ImportTextStyle);
+    const color = el.style.color;
+    const cellStyle = color ? {
+      ...inheritedStyle,
+      color
+    } : inheritedStyle;
+    const branchContext = [];
+    if (cellFormat !== inheritedFormat) {
+      branchContext.push(html.contextValue(html.ImportTextFormat, cellFormat));
+    }
+    if (cellStyle !== inheritedStyle) {
+      branchContext.push(html.contextValue(html.ImportTextStyle, cellStyle));
+    }
+    return [cell.splice(0, 0, $packageCellChildren(ctx.$importChildren(el, {
+      context: branchContext
+    })))];
+  },
+  match: html.sel.tag('td', 'th'),
+  name: '@lexical/table/cell'
+});
+
+/**
+ * A {@link ChildSchema} that enforces TableNode invariants: only
+ * `TableRowNode` children are accepted; orphan `TableCellNode` runs are
+ * wrapped in a synthesized row.
+ *
+ * @experimental
+ */
+const TableSchema = {
+  $accepts: $isTableRowNode,
+  $packageRun: run => run.every($isTableCellNode) ? [$createTableRowNode().splice(0, 0, run)] : [],
+  name: 'TableSchema'
+};
+
+/**
+ * A {@link ChildSchema} that enforces TableRowNode invariants: only
+ * `TableCellNode` children are accepted; non-cell children are dropped
+ * (the legacy converter does the same via `$descendantsMatching`).
+ *
+ * @experimental
+ */
+const TableRowSchema = {
+  $accepts: $isTableCellNode,
+  name: 'TableRowSchema'
+};
+
+/**
+ * Import rules for {@link TableNode}, {@link TableRowNode}, and
+ * {@link TableCellNode}.
+ *
+ * @experimental
+ */
+const TableImportRules = [TableRule, TableRowRule, TableCellRule];
+
+/**
+ * Bundles {@link TableImportRules} (plus {@link CoreImportExtension})
+ * into a single dependency.
+ *
+ * @experimental
+ */
+const TableImportExtension = lexical.defineExtension({
+  dependencies: [html.CoreImportExtension, TableExtension, lexical.configExtension(html.DOMImportExtension, {
+    rules: TableImportRules
+  })],
+  name: '@lexical/table/Import'
+});
+
 exports.$computeTableMap = $computeTableMap;
 exports.$computeTableMapSkipCellCheck = $computeTableMapSkipCellCheck;
 exports.$createTableCellNode = $createTableCellNode;
@@ -4657,9 +4863,13 @@ exports.INSERT_TABLE_COMMAND = INSERT_TABLE_COMMAND;
 exports.TableCellHeaderStates = TableCellHeaderStates;
 exports.TableCellNode = TableCellNode;
 exports.TableExtension = TableExtension;
+exports.TableImportExtension = TableImportExtension;
+exports.TableImportRules = TableImportRules;
 exports.TableNode = TableNode;
 exports.TableObserver = TableObserver;
 exports.TableRowNode = TableRowNode;
+exports.TableRowSchema = TableRowSchema;
+exports.TableSchema = TableSchema;
 exports.applyTableHandlers = applyTableHandlers;
 exports.getDOMCellFromTarget = getDOMCellFromTarget;
 exports.getTableElement = getTableElement;