From ae4d1d804a8dbe3e95511afb2470e36a0d4a38fa Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Thu, 24 Jul 2025 16:51:11 +0100 Subject: [PATCH] Lexical: Table cell bg and format setting fixes - Updated table cell background color setting to be stable by specifically using the background property over the general styles. - Updated format shorcuts to be correct header levels as per old editor and format menu. - Updated format changes to properly update UI afterwards. --- .../lexical/table/LexicalTableCellNode.ts | 9 ++++++++- resources/js/wysiwyg/services/shortcuts.ts | 16 +++++++++------- .../ui/defaults/buttons/inline-formats.ts | 1 - resources/js/wysiwyg/ui/defaults/forms/tables.ts | 4 ++-- resources/js/wysiwyg/utils/tables.ts | 1 + 5 files changed, 20 insertions(+), 11 deletions(-) diff --git a/resources/js/wysiwyg/lexical/table/LexicalTableCellNode.ts b/resources/js/wysiwyg/lexical/table/LexicalTableCellNode.ts index 1fc6b42bb..1c9d7ecf6 100644 --- a/resources/js/wysiwyg/lexical/table/LexicalTableCellNode.ts +++ b/resources/js/wysiwyg/lexical/table/LexicalTableCellNode.ts @@ -353,10 +353,17 @@ export function $convertTableCellNodeElement( const hasUnderlineTextDecoration = textDecoration.includes('underline'); if (domNode instanceof HTMLElement) { - tableCellNode.setStyles(extractStyleMapFromElement(domNode)); + const styleMap = extractStyleMapFromElement(domNode); + styleMap.delete('background-color'); + tableCellNode.setStyles(styleMap); tableCellNode.setAlignment(extractAlignmentFromElement(domNode)); } + const background = style.backgroundColor || null; + if (background) { + tableCellNode.setBackgroundColor(background); + } + return { after: (childLexicalNodes) => { if (childLexicalNodes.length === 0) { diff --git a/resources/js/wysiwyg/services/shortcuts.ts b/resources/js/wysiwyg/services/shortcuts.ts index 0384a3bf1..ead4c38d4 100644 --- a/resources/js/wysiwyg/services/shortcuts.ts +++ b/resources/js/wysiwyg/services/shortcuts.ts @@ -13,14 +13,16 @@ import {$showLinkForm} from "../ui/defaults/forms/objects"; import {showLinkSelector} from "../utils/links"; import {HeadingTagType} from "@lexical/rich-text/LexicalHeadingNode"; -function headerHandler(editor: LexicalEditor, tag: HeadingTagType): boolean { - toggleSelectionAsHeading(editor, tag); +function headerHandler(context: EditorUiContext, tag: HeadingTagType): boolean { + toggleSelectionAsHeading(context.editor, tag); + context.manager.triggerFutureStateRefresh(); return true; } function wrapFormatAction(formatAction: (editor: LexicalEditor) => any): ShortcutAction { - return (editor: LexicalEditor) => { + return (editor: LexicalEditor, context: EditorUiContext) => { formatAction(editor); + context.manager.triggerFutureStateRefresh(); return true; }; } @@ -45,10 +47,10 @@ const actionsByKeys: Record = { window.$events.emit('editor-save-page'); return true; }, - 'meta+1': (editor) => headerHandler(editor, 'h1'), - 'meta+2': (editor) => headerHandler(editor, 'h2'), - 'meta+3': (editor) => headerHandler(editor, 'h3'), - 'meta+4': (editor) => headerHandler(editor, 'h4'), + 'meta+1': (editor, context) => headerHandler(context, 'h2'), + 'meta+2': (editor, context) => headerHandler(context, 'h3'), + 'meta+3': (editor, context) => headerHandler(context, 'h4'), + 'meta+4': (editor, context) => headerHandler(context, 'h5'), 'meta+5': wrapFormatAction(toggleSelectionAsParagraph), 'meta+d': wrapFormatAction(toggleSelectionAsParagraph), 'meta+6': wrapFormatAction(toggleSelectionAsBlockquote), diff --git a/resources/js/wysiwyg/ui/defaults/buttons/inline-formats.ts b/resources/js/wysiwyg/ui/defaults/buttons/inline-formats.ts index 11411e140..dea78d24f 100644 --- a/resources/js/wysiwyg/ui/defaults/buttons/inline-formats.ts +++ b/resources/js/wysiwyg/ui/defaults/buttons/inline-formats.ts @@ -13,7 +13,6 @@ import codeIcon from "@icons/editor/code.svg"; import formatClearIcon from "@icons/editor/format-clear.svg"; import {$selectionContainsTextFormat} from "../../../utils/selection"; import {$patchStyleText} from "@lexical/selection"; -import {context} from "esbuild"; function buildFormatButton(label: string, format: TextFormatType, icon: string): EditorButtonDefinition { return { diff --git a/resources/js/wysiwyg/ui/defaults/forms/tables.ts b/resources/js/wysiwyg/ui/defaults/forms/tables.ts index 5b484310d..031e00983 100644 --- a/resources/js/wysiwyg/ui/defaults/forms/tables.ts +++ b/resources/js/wysiwyg/ui/defaults/forms/tables.ts @@ -75,7 +75,7 @@ export function $showCellPropertiesForm(cell: TableCellNode, context: EditorUiCo border_width: styles.get('border-width') || '', border_style: styles.get('border-style') || '', border_color: styles.get('border-color') || '', - background_color: styles.get('background-color') || '', + background_color: cell.getBackgroundColor() || styles.get('background-color') || '', }); return modalForm; } @@ -91,6 +91,7 @@ export const cellProperties: EditorFormDefinition = { $setTableCellColumnWidth(cell, width); cell.updateTag(formData.get('type')?.toString() || ''); cell.setAlignment((formData.get('h_align')?.toString() || '') as CommonBlockAlignment); + cell.setBackgroundColor(formData.get('background_color')?.toString() || ''); const styles = cell.getStyles(); styles.set('height', formatSizeValue(formData.get('height')?.toString() || '')); @@ -98,7 +99,6 @@ export const cellProperties: EditorFormDefinition = { styles.set('border-width', formatSizeValue(formData.get('border_width')?.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() || ''); cell.setStyles(styles); } diff --git a/resources/js/wysiwyg/utils/tables.ts b/resources/js/wysiwyg/utils/tables.ts index 8f4a6599f..15cc3cbbe 100644 --- a/resources/js/wysiwyg/utils/tables.ts +++ b/resources/js/wysiwyg/utils/tables.ts @@ -282,6 +282,7 @@ export function $clearTableFormatting(table: TableNode): void { const cells = row.getChildren().filter(c => $isTableCellNode(c)); for (const cell of cells) { cell.setStyles(new Map); + cell.setBackgroundColor(null); cell.clearWidth(); } }