diff --git a/resources/js/wysiwyg/todo.md b/resources/js/wysiwyg/todo.md index 2ca9b97dc..cf24ad677 100644 --- a/resources/js/wysiwyg/todo.md +++ b/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 diff --git a/resources/js/wysiwyg/ui/defaults/buttons/tables.ts b/resources/js/wysiwyg/ui/defaults/buttons/tables.ts index 88ea56186..50353961f 100644 --- a/resources/js/wysiwyg/ui/defaults/buttons/tables.ts +++ b/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 modalForm = context.manager.createModal('row_properties'); - modalForm.show({}); - // TODO + const row = $getParentOfType(cell, $isCustomTableRowNode); + if ($isCustomTableRowNode(row)) { + $showRowPropertiesForm(row, context); + } }); }, isActive: neverActive, diff --git a/resources/js/wysiwyg/ui/defaults/forms/tables.ts b/resources/js/wysiwyg/ui/defaults/forms/tables.ts index 1c577b72a..c4879efae 100644 --- a/resources/js/wysiwyg/ui/defaults/forms/tables.ts +++ b/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: [ diff --git a/resources/js/wysiwyg/utils/tables.ts b/resources/js/wysiwyg/utils/tables.ts index d92f56c82..e808fd595 100644 --- a/resources/js/wysiwyg/utils/tables.ts +++ b/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 = {}; + for (const cell of cells) { + const row = cell.getParent(); + if ($isCustomTableRowNode(row)) { + rowsByKey[row.getKey()] = row; + } + } + + return Object.values(rowsByKey); +} +