webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-30 04:23:11 +03:00
Code Activity

Lexical: Added cell width fetching, Created custom row node

Browse Source
This commit is contained in:
Dan Brown
2024-08-09 11:24:25 +01:00
parent e8532ef4de
commit da54e1d87c
8 changed files with 172 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/wysiwyg/ui/defaults/buttons/tables.ts
View File

@ -19,8 +19,8 @@ import {
} from "@lexical/table";
import {$getNodeFromSelection, $selectionContainsNodeType} from "../../../utils/selection";
import {$getParentOfType} from "../../../utils/nodes";
import {$isCustomTableCellNode} from "../../../nodes/custom-table-cell-node";
import {showCellPropertiesForm} from "../forms/tables";
import {$isCustomTableCellNode} from "../../../nodes/custom-table-cell";
import {$showCellPropertiesForm} from "../forms/tables";
import {$mergeTableCellsInSelection} from "../../../utils/tables";
const neverActive = (): boolean => false;
@ -317,7 +317,7 @@ export const cellProperties: EditorButtonDefinition = {
context.editor.getEditorState().read(() => {
const cell = $getNodeFromSelection($getSelection(), $isCustomTableCellNode);
if ($isCustomTableCellNode(cell)) {
showCellPropertiesForm(cell, context);
$showCellPropertiesForm(cell, context);
}
});
},

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

@ -5,10 +5,10 @@ import {
EditorSelectFormFieldDefinition
} from "../../framework/forms";
import {EditorUiContext} from "../../framework/core";
import {CustomTableCellNode} from "../../../nodes/custom-table-cell-node";
import {CustomTableCellNode} from "../../../nodes/custom-table-cell";
import {EditorFormModal} from "../../framework/modals";
import {$getSelection, ElementFormatType} from "lexical";
import {$getTableCellsFromSelection, $setTableCellColumnWidth} from "../../../utils/tables";
import {$getTableCellColumnWidth, $getTableCellsFromSelection, $setTableCellColumnWidth} from "../../../utils/tables";
import {formatSizeValue} from "../../../utils/dom";
const borderStyleInput: EditorSelectFormFieldDefinition = {
@ -54,11 +54,11 @@ const alignmentInput: EditorSelectFormFieldDefinition = {
}
};
export function showCellPropertiesForm(cell: CustomTableCellNode, context: EditorUiContext): EditorFormModal {
export function $showCellPropertiesForm(cell: CustomTableCellNode, context: EditorUiContext): EditorFormModal {
const styles = cell.getStyles();
const modalForm = context.manager.createModal('cell_properties');
modalForm.show({
width: '', // TODO
width: $getTableCellColumnWidth(context.editor, cell),
height: styles.get('height') || '',
type: cell.getTag(),
h_align: cell.getFormatType(),
@ -171,45 +171,18 @@ export const rowProperties: EditorFormDefinition = {
return true;
},
fields: [
// Removed fields:
// Removed 'Row Type' as we don't currently support thead/tfoot elements
// TinyMCE would move rows up/down into these parents when set
// Removed 'Alignment' since this was broken in our editor (applied alignment class to whole parent table)
{
build() {
const generalFields: EditorFormFieldDefinition[] = [
{
label: 'Row type',
name: 'type',
type: 'select',
valuesByLabel: {
'Body': 'body',
'Header': 'header',
'Footer': 'footer',
}
} as EditorSelectFormFieldDefinition,
alignmentInput,
{
label: 'Height',
name: 'height',
type: 'text',
},
];
const advancedFields: EditorFormFieldDefinition[] = [
borderStyleInput,
borderColorInput,
backgroundColorInput,
];
return new EditorFormTabs([
{
label: 'General',
contents: generalFields,
},
{
label: 'Advanced',
contents: advancedFields,
}
])
}
label: 'Height', // style on tr: height
name: 'height',
type: 'text',
},
borderStyleInput, // style on tr: height
borderColorInput, // style on tr: height
backgroundColorInput, // style on tr: height
],
};
export const tableProperties: EditorFormDefinition = {