webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-11-03 02:13:16 +03:00
Code Activity

Lexical: Linked row properties form up

Browse Source
This commit is contained in:
Dan Brown
2024-08-09 12:42:04 +01:00
parent da54e1d87c
commit db4208a7eb
4 changed files with 50 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
resources/js/wysiwyg/todo.md
View File

@@ -3,7 +3,6 @@
## In progress ## In progress
- Table features - Table features
- Row properties form logic
- Table properties form logic - Table properties form logic
- Caption text support - Caption text support
- Resize to contents button - Resize to contents button

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

@@ -20,8 +20,9 @@ import {
import {$getNodeFromSelection, $selectionContainsNodeType} from "../../../utils/selection"; import {$getNodeFromSelection, $selectionContainsNodeType} from "../../../utils/selection";
import {$getParentOfType} from "../../../utils/nodes"; import {$getParentOfType} from "../../../utils/nodes";
import {$isCustomTableCellNode} from "../../../nodes/custom-table-cell"; import {$isCustomTableCellNode} from "../../../nodes/custom-table-cell";
import {$showCellPropertiesForm} from "../forms/tables"; import {$showCellPropertiesForm, $showRowPropertiesForm} from "../forms/tables";
import {$mergeTableCellsInSelection} from "../../../utils/tables"; import {$mergeTableCellsInSelection} from "../../../utils/tables";
import {$isCustomTableRowNode} from "../../../nodes/custom-table-row";
const neverActive = (): boolean => false; const neverActive = (): boolean => false;
const cellNotSelected = (selection: BaseSelection|null) => !$selectionContainsNodeType(selection, $isCustomTableCellNode); const cellNotSelected = (selection: BaseSelection|null) => !$selectionContainsNodeType(selection, $isCustomTableCellNode);
@@ -166,10 +167,10 @@ export const rowProperties: EditorButtonDefinition = {
return; return;
} }
const row = $getParentOfType(cell, $isTableRowNode); const row = $getParentOfType(cell, $isCustomTableRowNode);
const modalForm = context.manager.createModal('row_properties'); if ($isCustomTableRowNode(row)) {
modalForm.show({}); $showRowPropertiesForm(row, context);
// TODO }
}); });
}, },
isActive: neverActive, isActive: neverActive,

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

@@ -8,8 +8,14 @@ import {EditorUiContext} from "../../framework/core";
import {CustomTableCellNode} from "../../../nodes/custom-table-cell"; import {CustomTableCellNode} from "../../../nodes/custom-table-cell";
import {EditorFormModal} from "../../framework/modals"; import {EditorFormModal} from "../../framework/modals";
import {$getSelection, ElementFormatType} from "lexical"; 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 {formatSizeValue} from "../../../utils/dom";
import {CustomTableRowNode} from "../../../nodes/custom-table-row";
const borderStyleInput: EditorSelectFormFieldDefinition = { const borderStyleInput: EditorSelectFormFieldDefinition = {
label: 'Border style', 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 = { export const rowProperties: EditorFormDefinition = {
submitText: 'Save', submitText: 'Save',
async action(formData, context: EditorUiContext) { 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; return true;
}, },
fields: [ fields: [

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

@@ -6,6 +6,7 @@ import {$getParentOfType} from "./nodes";
import {$getNodeFromSelection} from "./selection"; import {$getNodeFromSelection} from "./selection";
import {formatSizeValue} from "./dom"; import {formatSizeValue} from "./dom";
import {TableMap} from "./table-map"; import {TableMap} from "./table-map";
import {$isCustomTableRowNode, CustomTableRowNode} from "../nodes/custom-table-row";
function $getTableFromCell(cell: CustomTableCellNode): CustomTableNode|null { function $getTableFromCell(cell: CustomTableCellNode): CustomTableNode|null {
return $getParentOfType(cell, $isCustomTableNode) as CustomTableNode|null; return $getParentOfType(cell, $isCustomTableNode) as CustomTableNode|null;
@@ -192,6 +193,19 @@ export function $mergeTableCellsInSelection(selection: TableSelection): void {
firstCell.setRowSpan(newHeight); firstCell.setRowSpan(newHeight);
} }
export function $getTableRowsFromSelection(selection: BaseSelection|null): CustomTableRowNode[] {
const cells = $getTableCellsFromSelection(selection);
const rowsByKey: Record<string, CustomTableRowNode> = {};
for (const cell of cells) {
const row = cell.getParent();
if ($isCustomTableRowNode(row)) {
rowsByKey[row.getKey()] = row;
}
}
return Object.values(rowsByKey);
}