Skip to content
This repository was archived by the owner on May 5, 2021. It is now read-only.

Commit 0efa875

Browse files
GorashGorash
committed
table + dom/html
1 parent 4c2e2b6 commit 0efa875

File tree

8 files changed

+115
-78
lines changed

8 files changed

+115
-78
lines changed

‎packages/plugin-code/src/Code.ts

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Renderer } from '../../plugin-renderer/src/Renderer';
44
import { Attributes } from '../../plugin-xml/src/Attributes';
55
import { ActionableNode } from '../../plugin-layout/src/ActionableNode';
66
import { Layout } from '../../plugin-layout/src/Layout';
7-
import { CodeButtonDomObjectRenderer } from './CodeButtonDomObjectRenderer';
87
import { CodeViewNode } from './CodeViewNode';
98
import { CodeViewDomObjectRenderer } from './CodeViewDomObjectRenderer';
109
import { VNode } from '../../core/src/VNodes/VNode';
@@ -15,14 +14,15 @@ import { isBlock } from '../../utils/src/isBlock';
1514
export class Code<T extends JWPluginConfig = JWPluginConfig> extends JWPlugin<T> {
1615
codeView = new CodeViewNode();
1716
readonly loadables: Loadables<Renderer & Layout> = {
18-
renderers: [CodeButtonDomObjectRenderer, CodeViewDomObjectRenderer],
17+
renderers: [CodeViewDomObjectRenderer],
1918
components: [
2019
{
2120
id: 'CodeButton',
2221
render: async (): Promise<ActionableNode[]> => {
2322
const button = new ActionableNode({
2423
name: 'code',
2524
label: 'Toggle Code view',
25+
commandId: 'toggleCodeView',
2626
selected: (): boolean => this.active,
2727
modifiers: [new Attributes({ class: 'fas fa-code fa-fw' })],
2828
});
@@ -38,6 +38,11 @@ export class Code<T extends JWPluginConfig = JWPluginConfig> extends JWPlugin<T>
3838
],
3939
componentZones: [['CodeButton', ['actionables']]],
4040
};
41+
commands = {
42+
toggleCodeView: {
43+
handler: this.toggle.bind(this),
44+
},
45+
};
4146
active = false;
4247
async start(): Promise<void> {
4348
await super.start();
@@ -49,9 +54,9 @@ export class Code<T extends JWPluginConfig = JWPluginConfig> extends JWPlugin<T>
4954

5055
async toggle(): Promise<void> {
5156
if (this.active) {
52-
this.deactivate();
57+
return this.deactivate();
5358
} else {
54-
this.activate();
59+
return this.activate();
5560
}
5661
}
5762
async activate(): Promise<void> {

‎packages/plugin-html/src/DefaultHtmlDomRenderer.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,17 @@ export class DefaultHtmlDomRenderer extends NodeRenderer<Node[]> {
6262
}
6363
}
6464
}
65+
element.addEventListener('destroy', () => {
66+
[...element.children].forEach(childElement => {
67+
childElement.dispatchEvent(new CustomEvent('destroy'));
68+
});
69+
if (domObject.detach) {
70+
domObject.detach(element);
71+
}
72+
});
73+
if (domObject.attach) {
74+
domObject.attach(element);
75+
}
6576
domNode = element;
6677
} else if ('text' in domObject) {
6778
domNode = document.createTextNode(domObject.text);

‎packages/plugin-table/src/Table.ts

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -101,10 +101,10 @@ export class Table<T extends TableConfig = TableConfig> extends JWPlugin<T> {
101101
id: 'TablePicker',
102102
async render(editor: JWEditor): Promise<VNode[]> {
103103
const tablePlugin = editor.plugins.get(Table);
104-
const table = new TablePickerNode(
105-
tablePlugin.minRowCount,
106-
tablePlugin.minColumnCount,
107-
);
104+
const table = new TablePickerNode({
105+
rowCount: tablePlugin.minRowCount,
106+
columnCount: tablePlugin.minColumnCount,
107+
});
108108
return [table];
109109
},
110110
},
@@ -173,17 +173,19 @@ export class Table<T extends TableConfig = TableConfig> extends JWPlugin<T> {
173173
* @param params
174174
*/
175175
async insertTable(params: InsertTableParams): Promise<void> {
176+
const layout = this.editor.plugins.get(Layout);
177+
if (this.isTablePickerOpen) {
178+
await layout.remove('TablePicker');
179+
}
176180
if (!params.rowCount || !params.columnCount) {
177-
const layout = this.editor.plugins.get(Layout);
178181
const isTablePickerOpen = !!this.isTablePickerOpen;
179-
await layout.remove('TablePicker');
180182
if (!isTablePickerOpen) {
181183
await layout.append('TablePicker', 'TableButton');
182184
}
183185
} else {
184186
const range = params.context.range;
185187
if (range.start.parent) {
186-
range.start.before(new TableNode(params.rowCount, params.columnCount));
188+
range.start.before(new TableNode(params));
187189
}
188190
}
189191
}

‎packages/plugin-table/src/TableNode.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import { TableCellNode } from './TableCellNode';
44

55
export class TableNode extends VElement {
66
breakable = false;
7-
constructor(rowCount?: number, columnCount?: number) {
7+
constructor(params?: { rowCount?: number; columnCount?: number }) {
88
super({ htmlTag: 'TABLE' });
9-
if (rowCount && columnCount) {
10-
this.reset(rowCount, columnCount);
9+
if (params && params.rowCount && params.columnCount) {
10+
this.reset(params.rowCount, params.columnCount);
1111
}
1212
}
1313

‎packages/plugin-table/src/TablePickerCellDomObjectRenderer.ts

Lines changed: 58 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ import {
66
} from '../../plugin-renderer-dom-object/src/DomObjectRenderingEngine';
77
import { TableCellNode } from './TableCellNode';
88
import { TableNode } from './TableNode';
9-
import { Layout } from '../../plugin-layout/src/Layout';
10-
import { DomLayoutEngine } from '../../plugin-dom-layout/src/DomLayoutEngine';
119
import { TableRowNode } from './TableRowNode';
1210
import { VNode } from '../../core/src/VNodes/VNode';
1311
import { Table } from './Table';
@@ -24,8 +22,6 @@ export class TablePickerCellDomObjectRenderer extends NodeRenderer<DomObject> {
2422
tablePickerCell: TableCellNode,
2523
worker: RenderingEngineWorker<DomObject>,
2624
): Promise<DomObjectElement> {
27-
const layout = this.engine.editor.plugins.get(Layout);
28-
const domLayoutEngine = layout.engines.dom as DomLayoutEngine;
2925
const domObject = (await this.super.render(tablePickerCell, worker)) as DomObjectElement;
3026
domObject.attributes = {
3127
...domObject.attributes,
@@ -38,7 +34,7 @@ export class TablePickerCellDomObjectRenderer extends NodeRenderer<DomObject> {
3834
const minRowCount = tablePlugin.minRowCount;
3935
const minColumnCount = tablePlugin.minColumnCount;
4036

41-
const onMouseOver = async (ev: Event): Promise<void> => {
37+
const onMouseOver = (ev: Event): void => {
4238
const table = (ev.target as HTMLTableCellElement).closest('table.table-picker');
4339
for (const cell of table.querySelectorAll('td')) {
4440
const rowIndex = +cell.getAttribute('data-rowCount') - 1;
@@ -53,58 +49,64 @@ export class TablePickerCellDomObjectRenderer extends NodeRenderer<DomObject> {
5349
}
5450
}
5551
const tablePicker = tablePickerCell.ancestor(TableNode);
56-
const toRedraw = new Set<VNode>();
57-
// Add/remove rows.
58-
if (tablePickerCell.rowIndex >= tablePicker.rowCount - 1) {
59-
// Add.
60-
const newRow = new TableRowNode();
61-
toRedraw.add(newRow);
62-
tablePicker.append(newRow);
63-
for (let cellIndex = 0; cellIndex < tablePicker.columnCount; cellIndex++) {
64-
const newCell = new TableCellNode();
65-
newRow.append(newCell);
66-
toRedraw.add(newCell);
67-
}
68-
} else if (tablePicker.rowCount > minRowCount) {
69-
// Remove.
70-
const rows = tablePicker.children(
71-
child =>
72-
child instanceof TableRowNode &&
73-
child.rowIndex >= minRowCount &&
74-
child.rowIndex > tablePickerCell.rowIndex + 1,
75-
);
76-
for (const row of rows) {
77-
for (const rowCell of row.children(TableCellNode)) {
78-
rowCell.remove();
52+
if (
53+
tablePickerCell.rowIndex >= tablePicker.rowCount - 1 ||
54+
tablePicker.rowCount > minRowCount ||
55+
tablePickerCell.columnIndex >= tablePicker.columnCount - 1 ||
56+
tablePicker.columnCount > minColumnCount
57+
) {
58+
this.engine.editor.execCommand(() => {
59+
const toRedraw = new Set<VNode>();
60+
// Add/remove rows.
61+
if (tablePickerCell.rowIndex >= tablePicker.rowCount - 1) {
62+
// Add.
63+
const newRow = new TableRowNode();
64+
toRedraw.add(newRow);
65+
tablePicker.append(newRow);
66+
for (let cellIndex = 0; cellIndex < tablePicker.columnCount; cellIndex++) {
67+
const newCell = new TableCellNode();
68+
newRow.append(newCell);
69+
toRedraw.add(newCell);
70+
}
71+
} else if (tablePicker.rowCount > minRowCount) {
72+
// Remove.
73+
const rows = tablePicker.children(
74+
child =>
75+
child instanceof TableRowNode &&
76+
child.rowIndex >= minRowCount &&
77+
child.rowIndex > tablePickerCell.rowIndex + 1,
78+
);
79+
for (const row of rows) {
80+
for (const rowCell of row.children(TableCellNode)) {
81+
rowCell.remove();
82+
}
83+
row.remove();
84+
}
85+
if (rows.length) toRedraw.add(tablePicker);
7986
}
80-
row.remove();
81-
}
82-
if (rows.length) toRedraw.add(tablePicker);
83-
}
84-
// Add/remove Columns.
85-
if (tablePickerCell.columnIndex >= tablePicker.columnCount - 1) {
86-
// Add.
87-
for (const row of tablePicker.children(TableRowNode)) {
88-
const newCell = new TableCellNode();
89-
row.append(newCell);
90-
toRedraw.add(newCell);
91-
}
92-
} else if (tablePicker.columnCount > minColumnCount) {
93-
// Remove.
94-
const cellsToRemove = tablePicker.descendants(
95-
descendant =>
96-
descendant instanceof TableCellNode &&
97-
descendant.columnIndex >= minColumnCount &&
98-
descendant.columnIndex > tablePickerCell.columnIndex + 1,
99-
);
100-
for (const cellToRemove of cellsToRemove) {
101-
toRedraw.add(cellToRemove.parent);
102-
cellToRemove.remove();
103-
}
104-
if (cellsToRemove.length) toRedraw.add(tablePicker);
105-
}
106-
if (toRedraw.size) {
107-
await domLayoutEngine.redraw(...toRedraw);
87+
// Add/remove Columns.
88+
if (tablePickerCell.columnIndex >= tablePicker.columnCount - 1) {
89+
// Add.
90+
for (const row of tablePicker.children(TableRowNode)) {
91+
const newCell = new TableCellNode();
92+
row.append(newCell);
93+
toRedraw.add(newCell);
94+
}
95+
} else if (tablePicker.columnCount > minColumnCount) {
96+
// Remove.
97+
const cellsToRemove = tablePicker.descendants(
98+
descendant =>
99+
descendant instanceof TableCellNode &&
100+
descendant.columnIndex >= minColumnCount &&
101+
descendant.columnIndex > tablePickerCell.columnIndex + 1,
102+
);
103+
for (const cellToRemove of cellsToRemove) {
104+
toRedraw.add(cellToRemove.parent);
105+
cellToRemove.remove();
106+
}
107+
if (cellsToRemove.length) toRedraw.add(tablePicker);
108+
}
109+
});
108110
}
109111
};
110112
const onClick = async (ev: Event): Promise<void> => {

‎packages/plugin-table/src/TablePickerDomObjectRenderer.ts

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,29 @@ import { Table } from './Table';
88
import { TableNode } from './TableNode';
99
import { Layout } from '../../plugin-layout/src/Layout';
1010
import { TablePickerNode } from './TablePickerNode';
11+
import { RenderingEngineWorker } from '../../plugin-renderer/src/RenderingEngineCache';
1112

1213
export class TablePickerDomObjectRenderer extends NodeRenderer<DomObject> {
1314
static id = DomObjectRenderingEngine.id;
1415
engine: DomObjectRenderingEngine;
1516
predicate = TablePickerNode;
1617

17-
async render(tablePicker: TableNode): Promise<DomObjectElement> {
18-
const domObject = (await this.super.render(tablePicker)) as DomObjectElement;
18+
async render(
19+
tablePicker: TableNode,
20+
worker: RenderingEngineWorker<DomObject>,
21+
): Promise<DomObjectElement> {
22+
const domObject = (await this.super.render(tablePicker, worker)) as DomObjectElement;
1923
const tablePlugin = this.engine.editor.plugins.get(Table);
2024
const layout = this.engine.editor.plugins.get(Layout);
2125

2226
const close = async (): Promise<void> => {
23-
await layout.remove('TablePicker');
27+
setTimeout(() => {
28+
if (tablePlugin.isTablePickerOpen) {
29+
this.engine.editor.execCommand(() => {
30+
return layout.remove('TablePicker');
31+
});
32+
}
33+
});
2434
};
2535

2636
domObject.attach = (): void => {

‎packages/plugin-table/src/TablePickerNode.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { TableNode } from './TableNode';
22
import { Attributes } from '../../plugin-xml/src/Attributes';
33

44
export class TablePickerNode extends TableNode {
5-
constructor(rowCount: number, columnCount: number) {
6-
super(rowCount, columnCount);
5+
constructor(params?: { rowCount?: number; columnCount?: number }) {
6+
super(params);
77
this.modifiers.get(Attributes).classList.add('table-picker');
88
}
99
}

‎packages/plugin-template/src/TemplateActionableDomObjectRenderer.ts

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
import { DomObjectRenderingEngine } from '../../plugin-renderer-dom-object/src/DomObjectRenderingEngine';
1+
import {
2+
DomObjectRenderingEngine,
3+
DomObject,
4+
} from '../../plugin-renderer-dom-object/src/DomObjectRenderingEngine';
25
import { VNode } from '../../core/src/VNodes/VNode';
36
import { Template } from './Template';
47
import { ActionableNode } from '../../plugin-layout/src/ActionableNode';
@@ -7,15 +10,19 @@ import {
710
DomObjectActionable,
811
} from '../../plugin-dom-layout/src/ActionableDomObjectRenderer';
912
import { TemplateThumbnailSelectorNode } from './TemplateThumbnailSelectorNode';
13+
import { RenderingEngineWorker } from '../../plugin-renderer/src/RenderingEngineCache';
1014

1115
export class TemplateActionableDomObjectRenderer extends ActionableDomObjectRenderer {
1216
static id = DomObjectRenderingEngine.id;
1317
engine: DomObjectRenderingEngine;
1418
predicate = (node: VNode): boolean =>
1519
node instanceof ActionableNode && !!node.ancestor(TemplateThumbnailSelectorNode);
1620

17-
async render(node: ActionableNode): Promise<DomObjectActionable> {
18-
const domObject = await super.render(node);
21+
async render(
22+
node: ActionableNode,
23+
worker: RenderingEngineWorker<DomObject>,
24+
): Promise<DomObjectActionable> {
25+
const domObject = await super.render(node, worker);
1926
const templatePlugin = this.engine.editor.plugins.get(Template);
2027
const name = node.actionName
2128
.split('-')

0 commit comments

Comments
 (0)