Lexical: Linked row properties form up

resources/js/wysiwyg/todo.md

@@ -3,7 +3,6 @@
 ## In progress
 
 - Table features
-  - Row properties form logic
   - Table properties form logic
     - Caption text support 
   - Resize to contents button

resources/js/wysiwyg/ui/defaults/buttons/tables.ts

@@ -20,8 +20,9 @@ import {
 import {$getNodeFromSelection, $selectionContainsNodeType} from "../../../utils/selection";
 import {$getParentOfType} from "../../../utils/nodes";
 import {$isCustomTableCellNode} from "../../../nodes/custom-table-cell";
-import {$showCellPropertiesForm} from "../forms/tables";
+import {$showCellPropertiesForm, $showRowPropertiesForm} from "../forms/tables";
 import {$mergeTableCellsInSelection} from "../../../utils/tables";
+import {$isCustomTableRowNode} from "../../../nodes/custom-table-row";
 
 const neverActive = (): boolean => false;
 const cellNotSelected = (selection: BaseSelection|null) => !$selectionContainsNodeType(selection, $isCustomTableCellNode);
@@ -166,10 +167,10 @@ export const rowProperties: EditorButtonDefinition = {
                 return;
             }
 
-            const row = $getParentOfType(cell, $isTableRowNode);
+            const row = $getParentOfType(cell, $isCustomTableRowNode);
-            const modalForm = context.manager.createModal('row_properties');
+            if ($isCustomTableRowNode(row)) {
-            modalForm.show({});
+                $showRowPropertiesForm(row, context);
-            // TODO
+            }
         });
     },
     isActive: neverActive,

resources/js/wysiwyg/ui/defaults/forms/tables.ts

@@ -8,8 +8,14 @@ import {EditorUiContext} from "../../framework/core";
 import {CustomTableCellNode} from "../../../nodes/custom-table-cell";
 import {EditorFormModal} from "../../framework/modals";
 import {$getSelection, ElementFormatType} from "lexical";
-import {$getTableCellColumnWidth, $getTableCellsFromSelection, $setTableCellColumnWidth} from "../../../utils/tables";
+import {
+    $getTableCellColumnWidth,
+    $getTableCellsFromSelection,
+    $getTableRowsFromSelection,
+    $setTableCellColumnWidth
+} from "../../../utils/tables";
 import {formatSizeValue} from "../../../utils/dom";
+import {CustomTableRowNode} from "../../../nodes/custom-table-row";
 
 const borderStyleInput: EditorSelectFormFieldDefinition = {
     label: 'Border style',
@@ -164,10 +170,32 @@ export const cellProperties: EditorFormDefinition = {
     ],
 };
 
+export function $showRowPropertiesForm(row: CustomTableRowNode, context: EditorUiContext): EditorFormModal {
+    const styles = row.getStyles();
+    const modalForm = context.manager.createModal('row_properties');
+    modalForm.show({
+        height: styles.get('height') || '',
+        border_style: styles.get('border-style') || '',
+        border_color: styles.get('border-color') || '',
+        background_color: styles.get('background-color') || '',
+    });
+    return modalForm;
+}
+
 export const rowProperties: EditorFormDefinition = {
     submitText: 'Save',
     async action(formData, context: EditorUiContext) {
-        // TODO
+        context.editor.update(() => {
+            const rows = $getTableRowsFromSelection($getSelection());
+            for (const row of rows) {
+                const styles = row.getStyles();
+                styles.set('height', formatSizeValue(formData.get('height')?.toString() || ''));
+                styles.set('border-style', formData.get('border_style')?.toString() || '');
+                styles.set('border-color', formData.get('border_color')?.toString() || '');
+                styles.set('background-color', formData.get('background_color')?.toString() || '');
+                row.setStyles(styles);
+            }
+        });
         return true;
     },
     fields: [

resources/js/wysiwyg/utils/tables.ts

@@ -6,6 +6,7 @@ import {$getParentOfType} from "./nodes";
 import {$getNodeFromSelection} from "./selection";
 import {formatSizeValue} from "./dom";
 import {TableMap} from "./table-map";
+import {$isCustomTableRowNode, CustomTableRowNode} from "../nodes/custom-table-row";
 
 function $getTableFromCell(cell: CustomTableCellNode): CustomTableNode|null {
     return $getParentOfType(cell, $isCustomTableNode) as CustomTableNode|null;
@@ -192,6 +193,19 @@ export function $mergeTableCellsInSelection(selection: TableSelection): void {
     firstCell.setRowSpan(newHeight);
 }
 
+export function $getTableRowsFromSelection(selection: BaseSelection|null): CustomTableRowNode[] {
+    const cells = $getTableCellsFromSelection(selection);
+    const rowsByKey: Record<string, CustomTableRowNode> = {};
+    for (const cell of cells) {
+        const row = cell.getParent();
+        if ($isCustomTableRowNode(row)) {
+            rowsByKey[row.getKey()] = row;
+        }
+    }
+
+    return Object.values(rowsByKey);
+}
+