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.

Author: ssddanbrown

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) {

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<string, ShortcutAction> = {
         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),

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 {

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,14 +91,14 @@ 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() || ''));
                 styles.set('vertical-align', formData.get('v_align')?.toString() || '');
                 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);
             }

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();
         }
     }