webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-27 06:01:54 +03:00
Code Activity

Lexical: Table cell bg and format setting fixes

Browse Source 
- 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.
This commit is contained in:
Dan Brown
2025-07-24 16:51:11 +01:00
parent 5fc19b0edf
commit ae4d1d804a
5 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
resources/js/wysiwyg/lexical/table/LexicalTableCellNode.ts
View File

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

16
resources/js/wysiwyg/services/shortcuts.ts
View File

@ -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),

1
resources/js/wysiwyg/ui/defaults/buttons/inline-formats.ts
View File

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

4
resources/js/wysiwyg/ui/defaults/forms/tables.ts
View File

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

1
resources/js/wysiwyg/utils/tables.ts
View File

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