Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix apply Table Inside borders operation and Demo site #2184

Merged
merged 5 commits into from
Nov 1, 2023
Merged

Fix apply Table Inside borders operation and Demo site #2184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8af1504
fix cases
Andres-CT98 Oct 31, 2023
5a45a78
fix demo
Andres-CT98 Nov 1, 2023
6345dab
Merge branch 'master' of https://github.com/microsoft/roosterjs into …
Andres-CT98 Nov 1, 2023
276f890
Record
Andres-CT98 Nov 1, 2023
40f0b10
Merge branch 'master' of https://github.com/microsoft/roosterjs into …
Andres-CT98 Nov 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions demo/scripts/controls/ribbonButtons/contentModel/formatTableButton.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,12 @@ const PREDEFINED_STYLES: Record<
color /**topBorder */,
color /**bottomBorder */,
color /** verticalColors*/,
false /** bandedRows */,
true /** bandedRows */,
false /** bandedColumns */,
false /** headerRow */,
false /** firstColumn */,
TableBorderFormat.FIRST_COLUMN_HEADER_EXTERNAL /** tableBorderFormat */,
null /** bgColorEven */,
'#B0B0B0' /** bgColorEven */,
lightColor /** bgColorOdd */,
color /** headerRowColor */
),
Expand Down
24 changes: 14 additions & 10 deletions demo/scripts/controls/ribbonButtons/contentModel/tableBorderApplyButton.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
import MainPaneBase from '../../MainPaneBase';
import { applyTableBorderFormat, isContentModelEditor } from 'roosterjs-content-model-editor';
import { RibbonButton } from 'roosterjs-react';
import {
applyTableBorderFormat,
BorderOperations,
isContentModelEditor,
} from 'roosterjs-content-model-editor';

const TABLE_OPERATIONS = {
menuNameTableAllBorder: 'AllBorders',
menuNameTableNoBorder: 'NoBorders',
menuNameTableLeftBorder: 'LeftBorders',
menuNameTableRightBorder: 'RightBorders',
menuNameTableTopBorder: 'TopBorders',
menuNameTableBottomBorder: 'BottomBorders',
menuNameTableInsideBorder: 'InsideBorders',
menuNameTableOutsideBorder: 'OutsideBorders',
const TABLE_OPERATIONS: Record<string, BorderOperations> = {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JiuqingSong Following up on this comment, Changing from enum to string literals makes is so that if the values are modified it also needs to be changed everywhere it is used.

I made TABLE_OPERATIONS a Record to prevent the issue of all operations not working, but it is still the case that changing the value of a string literal makes it harder to modify everywhere than an enum.

Just an observation.

menuNameTableAllBorder: 'allBorders',
menuNameTableNoBorder: 'noBorders',
menuNameTableLeftBorder: 'leftBorders',
menuNameTableRightBorder: 'rightBorders',
menuNameTableTopBorder: 'topBorders',
menuNameTableBottomBorder: 'bottomBorders',
menuNameTableInsideBorder: 'insideBorders',
menuNameTableOutsideBorder: 'outsideBorders',
};

export const tableBorderApplyButton: RibbonButton<'ribbonButtonTableBorder'> = {
Expand Down
58 changes: 58 additions & 0 deletions ...ontent-model/roosterjs-content-model-editor/lib/publicApi/table/applyTableBorderFormat.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,64 @@ export default function applyTableBorderFormat(
break;
case 'insideBorders':
// Format cells - Inside borders
const singleCol = sel.lastCol == sel.firstCol;
const singleRow = sel.lastRow == sel.firstRow;
// Single cell selection
if (singleCol && singleRow) {
break;
}
// Single column selection
if (singleCol) {
applyBorderFormat(
tableModel.rows[sel.firstRow].cells[sel.firstCol],
borderFormat,
['borderBottom']
);
for (
let rowIndex = sel.firstRow + 1;
rowIndex <= sel.lastRow - 1;
rowIndex++
) {
const cell = tableModel.rows[rowIndex].cells[sel.firstCol];
applyBorderFormat(cell, borderFormat, [
'borderTop',
'borderBottom',
]);
}
applyBorderFormat(
tableModel.rows[sel.lastRow].cells[sel.firstCol],
borderFormat,
['borderTop']
);
break;
}
// Single row selection
if (singleRow) {
applyBorderFormat(
tableModel.rows[sel.firstRow].cells[sel.firstCol],
borderFormat,
['borderRight']
);
for (
let colIndex = sel.firstCol + 1;
colIndex <= sel.lastCol - 1;
colIndex++
) {
const cell = tableModel.rows[sel.firstRow].cells[colIndex];
applyBorderFormat(cell, borderFormat, [
'borderLeft',
'borderRight',
]);
}
applyBorderFormat(
tableModel.rows[sel.firstRow].cells[sel.lastCol],
borderFormat,
['borderLeft']
);
break;
}

// For multiple rows and columns selections
// Top left cell
applyBorderFormat(
tableModel.rows[sel.firstRow].cells[sel.firstCol],
Expand Down
Loading