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

Jump to bottom

feat: Table cell/column widths in API #856

Closed
wants to merge 4 commits into from
Closed

feat: Table cell/column widths in API #856

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
92214ab
feat: persist table resize
halimt92 Jun 16, 2024
6926875
Simplified code
matthewlipski Jun 20, 2024
f7cddea
Updated unit test + example
matthewlipski Jun 20, 2024
c6a0229
Updated docs
matthewlipski Jun 20, 2024
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
2 changes: 1 addition & 1 deletion docs/pages/docs/editor-basics/default-schema.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ type TableBlock = {
id: string;
type: "table";
props: DefaultProps;
content: TableContent[];
content: TableContent;
children: Block[];
};
```
Expand Down
7 changes: 5 additions & 2 deletions docs/pages/docs/editor-basics/document-structure.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,16 @@ The `styles` property is explained below.

While most blocks use an array of `InlineContent` objects to describe their content (e.g.: paragraphs, headings, list items). Some blocks, like [images](/docs/editor-basics/default-schema#image), don't contain any rich text content, so their `content` fields will be `undefined`.

[Tables](/docs/editor-basics/default-schema#table) are also different, as they contain `TableContent`. Here, each table cell is represented as an array of `InlineContent` objects:
[Tables](/docs/editor-basics/default-schema#table) are also different, as they contain `TableContent`. Here, each table cell is represented as an array of `InlineContent` objects with a width:

```typescript
type TableContent = {
type: "tableContent";
rows: {
cells: InlineContent[][];
cells: {
content: InlineContent,
width?: number
}[][];
}[];
};
```
Expand Down
18 changes: 15 additions & 3 deletions examples/01-basic/03-all-blocks/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,13 +50,25 @@ export default function App() {
type: "tableContent",
rows: [
{
cells: ["Table Cell", "Table Cell", "Table Cell"],
cells: [
{ content: "Table Cell" },
{ content: "Table Cell" },
{ content: "Table Cell" },
],
},
{
cells: ["Table Cell", "Table Cell", "Table Cell"],
cells: [
{ content: "Table Cell" },
{ content: "Table Cell" },
{ content: "Table Cell" },
],
},
{
cells: ["Table Cell", "Table Cell", "Table Cell"],
cells: [
{ content: "Table Cell" },
{ content: "Table Cell" },
{ content: "Table Cell" },
],
},
],
},
Expand Down
25 changes: 18 additions & 7 deletions packages/core/src/api/nodeConversions/nodeConversions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,16 +172,23 @@ export function tableContentToNodes<
const columnNodes: Node[] = [];
for (const cell of row.cells) {
let pNode: Node;
if (!cell) {
if (!cell.content || cell.content.length === 0) {
pNode = schema.nodes["tableParagraph"].create({});
} else if (typeof cell === "string") {
pNode = schema.nodes["tableParagraph"].create({}, schema.text(cell));
} else {
const textNodes = inlineContentToNodes(cell, schema, styleSchema);
const textNodes = inlineContentToNodes(
cell.content,
schema,
styleSchema
);
pNode = schema.nodes["tableParagraph"].create({}, textNodes);
}

const cellNode = schema.nodes["tableCell"].create({}, pNode);
const cellNode = schema.nodes["tableCell"].create(
{ colwidth: [cell.width] || null },
pNode
);
columnNodes.push(cellNode);
}
const rowNode = schema.nodes["tableRow"].create({}, columnNodes);
Expand Down Expand Up @@ -282,13 +289,17 @@ function contentNodeToTableContent<
};

rowNode.content.forEach((cellNode) => {
row.cells.push(
contentNodeToInlineContent(
row.cells.push({
content: contentNodeToInlineContent(
cellNode.firstChild!,
inlineContentSchema,
styleSchema
)
);
),
width:
cellNode.attrs.colwidth !== null
? cellNode.attrs.colwidth[0]
: undefined,
});
});

ret.rows.push(row);
Expand Down
144 changes: 81 additions & 63 deletions packages/core/src/api/parsers/html/__snapshots__/paste/parse-notion-html.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,77 +373,95 @@
"rows": [
{
"cells": [
[
{
"type": "text",
"text": "Cell 1",
"styles": {}
}
],
[
{
"type": "text",
"text": "Cell 2",
"styles": {}
}
],
[
{
"type": "text",
"text": "Cell 3",
"styles": {}
}
]
{
"content": [
{
"type": "text",
"text": "Cell 1",
"styles": {}
}
]
},
{
"content": [
{
"type": "text",
"text": "Cell 2",
"styles": {}
}
]
},
{
"content": [
{
"type": "text",
"text": "Cell 3",
"styles": {}
}
]
}
]
},
{
"cells": [
[
{
"type": "text",
"text": "Cell 4",
"styles": {}
}
],
[
{
"type": "text",
"text": "Cell 5",
"styles": {}
}
],
[
{
"type": "text",
"text": "Cell 6",
"styles": {}
}
]
{
"content": [
{
"type": "text",
"text": "Cell 4",
"styles": {}
}
]
},
{
"content": [
{
"type": "text",
"text": "Cell 5",
"styles": {}
}
]
},
{
"content": [
{
"type": "text",
"text": "Cell 6",
"styles": {}
}
]
}
]
},
{
"cells": [
[
{
"type": "text",
"text": "Cell 7",
"styles": {}
}
],
[
{
"type": "text",
"text": "Cell 8",
"styles": {}
}
],
[
{
"type": "text",
"text": "Cell 9",
"styles": {}
}
]
{
"content": [
{
"type": "text",
"text": "Cell 7",
"styles": {}
}
]
},
{
"content": [
{
"type": "text",
"text": "Cell 8",
"styles": {}
}
]
},
{
"content": [
{
"type": "text",
"text": "Cell 9",
"styles": {}
}
]
}
]
}
]
Expand Down
1 change: 0 additions & 1 deletion packages/core/src/blocks/TableBlockContent/TableBlockContent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ const TableParagraph = Node.create({

parseHTML() {
return [
{ tag: "td" },
{
tag: "p",
getAttrs: (element) => {
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,10 +179,10 @@ export function getDefaultSlashMenuItems<
type: "tableContent",
rows: [
{
cells: ["", "", ""],
cells: [{ content: "" }, { content: "" }, { content: "" }],
},
{
cells: ["", "", ""],
cells: [{ content: "" }, { content: "" }, { content: "" }],
},
],
},
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export class TableHandlesView<
> implements PluginView
{
public state?: TableHandlesState<I, S>;
public resizingTable?: HTMLElement;
public emitUpdate: () => void;

public tableId: string | undefined;
Expand Down
20 changes: 18 additions & 2 deletions packages/core/src/schema/blocks/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,10 +148,18 @@ export type TableContent<
> = {
type: "tableContent";
rows: {
cells: InlineContent<I, S>[][];
cells: CellContent<I, S>[];
}[];
};

export type CellContent<
I extends InlineContentSchema,
T extends StyleSchema
> = {
content: InlineContent<I, T>[];
width?: number;
};

// A BlockConfig has all the information to get the type of a Block (which is a specific instance of the BlockConfig.
// i.e.: paragraphConfig: BlockConfig defines what a "paragraph" is / supports, and BlockFromConfigNoChildren<paragraphConfig> is the shape of a specific paragraph block.
// (for internal use)
Expand Down Expand Up @@ -223,10 +231,18 @@ export type PartialTableContent<
> = {
type: "tableContent";
rows: {
cells: PartialInlineContent<I, S>[];
cells: PartialCellContent<I, S>[];
}[];
};

export type PartialCellContent<
I extends InlineContentSchema,
T extends StyleSchema
> = {
content: PartialInlineContent<I, T>;
width?: number;
};

type PartialBlockFromConfigNoChildren<
B extends BlockConfig,
I extends InlineContentSchema,
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/schema/inlineContent/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export type InlineContent<
T extends StyleSchema
> = InlineContentFromConfig<I[keyof I], T>;

type PartialInlineContentElement<
export type PartialInlineContentElement<
I extends InlineContentSchema,
T extends StyleSchema
> = PartialInlineContentFromConfig<I[keyof I], T>;
Expand Down
8 changes: 6 additions & 2 deletions packages/react/src/components/TableHandles/TableHandleMenu/DefaultButtons/AddButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,9 @@ export const AddRowButton = <
<Components.Generic.Menu.Item
onClick={() => {
const emptyCol = props.block.content.rows[props.index].cells.map(
() => []
() => ({
content: [],
})
);
const rows = [...props.block.content.rows];
rows.splice(props.index + (props.side === "below" ? 1 : 0), 0, {
Expand Down Expand Up @@ -73,7 +75,9 @@ export const AddColumnButton = <
type: "tableContent",
rows: props.block.content.rows.map((row) => {
const cells = [...row.cells];
cells.splice(props.index + (props.side === "right" ? 1 : 0), 0, []);
cells.splice(props.index + (props.side === "right" ? 1 : 0), 0, {
content: [],
});
return { cells };
}),
};
Expand Down
Loading