Skip to content

Commit a7a4921

Browse files
samuelreichertsamuelreichert
committed
feat(table-better): small improvements on table-better
1 parent c57baf3 commit a7a4921

11 files changed

Lines changed: 55 additions & 165 deletions

File tree

‎packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -131,38 +131,6 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
131131
const quill = new MxQuill(editorContainer, options);
132132
ref.current = quill;
133133

134-
const html = `
135-
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; width:456pt">
136-
<tbody>
137-
<tr>
138-
<td colspan="3" style="background-color:#f9e11e; height:19.25pt">&nbsp;</td>
139-
</tr>
140-
<tr>
141-
<td style="background-color:#f9e11e; height:12.55pt; width:236.1pt">&nbsp;</td>
142-
<td style="background-color:#123552; height:12.55pt; width:35.15pt">&nbsp;</td>
143-
<td style="background-color:#f9e11e; height:12.55pt; width:236.1pt">&nbsp;</td>
144-
</tr>
145-
</tbody>
146-
</table>
147-
<p></p>
148-
<table border="0" cellpadding="0" cellspacing="0" style="background-color:#efefef; border-collapse:collapse; width:456pt">
149-
<tbody>
150-
<tr>
151-
<td>
152-
<div style="margin-bottom:6pt; margin-left:0px; margin-right:0px; margin-top:0px"><span style="font-size:9px"><span style="font-family:verdana,geneva,sans-serif">Dit bericht kan informatie bevatten die niet voor u is bestemd. Indien u niet de geadresseerde bent of dit bericht abusievelijk aan u is toegezonden, wordt u verzocht dat aan de afzender te melden en het bericht te verwijderen. De Staat aanvaardt geen aansprakelijkheid voor schade, van welke aard ook, die verband houdt met risico&#39;s verbonden aan het elektronisch verzenden van berichten.</span></span></div>
153-
154-
<div style="margin-bottom:6pt; margin-left:0px; margin-right:0px; margin-top:0px"><span style="font-size:9px"><span style="font-family:verdana,geneva,sans-serif">This message may contain information that is not intended for you. If you are not the addressee or if this message was sent to you by mistake, you are requested to inform the sender and delete the message. The State accepts no liability for damage of any kind resulting from the risks inherent in the electronic transmission of messages.</span></span></div>
155-
156-
<div style="margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:6pt"><span style="font-size:9px"><span style="font-family:verdana,geneva,sans-serif">Ministerie van Infrastructuur en Waterstaat</span></span></div>
157-
</td>
158-
</tr>
159-
</tbody>
160-
</table>
161-
`;
162-
163-
const delta = quill.clipboard.convert({ html });
164-
quill.updateContents(delta, Quill.sources.USER);
165-
166134
quill.on(Quill.events.TEXT_CHANGE, (...arg) => {
167135
onTextChangeRef.current?.(...arg);
168136
});

‎packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/assets/css/quill-table-better.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -487,10 +487,6 @@ $focused-border: 1px solid $focused-border-color;
487487
height: 100%;
488488
display: flex;
489489
flex-direction: column;
490-
.iro-container {
491-
flex: 1;
492-
@extend .ql-table-center;
493-
}
494490
}
495491
}
496492
}

‎packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/formats/header.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ class TableHeader extends Header {
1212
static blotName = "table-header";
1313
static className = "ql-table-header";
1414

15+
// @ts-ignore
16+
next: this | null;
1517
// @ts-ignore
1618
parent: TableCell;
1719

@@ -22,7 +24,7 @@ class TableHeader extends Header {
2224
return node;
2325
}
2426

25-
format(name: string, value: string, isReplace?: boolean) {
27+
format(name: string, value: string | Props, isReplace?: boolean) {
2628
if (name === "header") {
2729
const _value = this.statics.formats(this.domNode).value;
2830
const cellId = this.domNode.getAttribute("data-cell");

‎packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/formats/table.ts‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import { ListContainer } from "./list";
1212
const Block = QuillBlock as typeof BlockBlot;
1313
const Container = QuillContainer as typeof ContainerBlot;
1414
const TABLE_ATTRIBUTE = ["border", "cellspacing", "style", "data-class"];
15-
// const STYLE_RULES = ["color", "border", "width", "height"];
1615
const COL_ATTRIBUTE = ["width"];
1716

1817
class TableCellBlock extends Block {
@@ -88,11 +87,11 @@ class TableCell extends Container {
8887
prev: this | null;
8988

9089
checkMerge() {
91-
if (super.checkMerge() && this.next?.children.head != null && this.next.children.head.formats) {
92-
const thisHead = this.children.head?.formats()[this.children.head.statics.blotName];
93-
const thisTail = this.children.tail?.formats()[this.children.tail.statics.blotName];
90+
if (super.checkMerge() && this.next.children.head != null && this.next.children.head.formats) {
91+
const thisHead = this.children.head.formats()[this.children.head.statics.blotName];
92+
const thisTail = this.children.tail.formats()[this.children.tail.statics.blotName];
9493
const nextHead = this.next.children.head.formats()[this.next.children.head.statics.blotName];
95-
const nextTail = this.next.children.tail?.formats()[this.next.children.tail.statics.blotName];
94+
const nextTail = this.next.children.tail.formats()[this.next.children.tail.statics.blotName];
9695
const _thisHead = getCellId(thisHead);
9796
const _thisTail = getCellId(thisTail);
9897
const _nextHead = getCellId(nextHead);
@@ -118,7 +117,7 @@ class TableCell extends Container {
118117
if (attr === "rowspan" && rowspan) {
119118
formats[attr] = `${~~domNode.getAttribute(attr) - rowspan}`;
120119
} else {
121-
formats[attr] = filterWordStyle(domNode.getAttribute(attr) ?? "");
120+
formats[attr] = filterWordStyle(domNode.getAttribute(attr));
122121
}
123122
}
124123
return formats;
@@ -132,13 +131,14 @@ class TableCell extends Container {
132131
return formats;
133132
}
134133

135-
formats() {
136-
const formats = this.statics.formats(this.domNode, this.scroll);
137-
return { [this.statics.blotName]: formats };
134+
formats(): { [key: string]: Props } {
135+
const formats: Props = this.statics.formats(this.domNode, this.scroll);
136+
const blotName: string = this.statics.blotName;
137+
return { [blotName]: formats };
138138
}
139139

140140
static getEmptyRowspan(domNode: Element) {
141-
let nextNode = domNode.parentElement?.nextElementSibling;
141+
let nextNode = domNode.parentElement.nextElementSibling;
142142
let rowspan = 0;
143143
while (nextNode && nextNode.tagName === "TR" && !nextNode.innerHTML.replace(/\s/g, "")) {
144144
rowspan++;
@@ -149,13 +149,13 @@ class TableCell extends Container {
149149

150150
static hasColgroup(domNode: Element) {
151151
while (domNode && domNode.tagName !== "TBODY") {
152-
domNode = domNode.parentElement!;
152+
domNode = domNode.parentElement;
153153
}
154154
while (domNode) {
155155
if (domNode.tagName === "COLGROUP") {
156156
return true;
157157
}
158-
domNode = domNode.previousElementSibling!;
158+
domNode = domNode.previousElementSibling;
159159
}
160160
return false;
161161
}
@@ -283,9 +283,10 @@ class TableTemporary extends Block {
283283
}, {});
284284
}
285285

286-
formats() {
287-
const formats = this.statics.formats(this.domNode, this.scroll);
288-
return { [this.statics.blotName]: formats };
286+
formats(): { [key: string]: Props } {
287+
const formats: Props = this.statics.formats(this.domNode, this.scroll);
288+
const blotName: string = this.statics.blotName;
289+
return { [blotName]: formats };
289290
}
290291

291292
optimize(...args: unknown[]) {

‎packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/language/index.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
// @ts-nocheck
2-
import { Props } from "../types";
2+
import type { Props } from "../types";
3+
import de_DE from "./de_DE";
34
import en_US from "./en_US";
4-
import zh_CN from "./zh_CN";
55
import fr_FR from "./fr_FR";
66
import pl_PL from "./pl_PL";
7-
import de_DE from "./de_DE";
87
import ru_RU from "./ru_RU";
98
import tr_TR from "./tr_TR";
9+
import zh_CN from "./zh_CN";
1010

1111
interface Config {
1212
[propName: string]: Props;

‎packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/quill-table-better.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11
// @ts-nocheck
2-
import type { EmitterSource, Range } from "quill";
32
import Quill from "quill";
43
import Delta from "quill-delta";
54
import Module from "quill/core/module";
6-
import { CELL_DEFAULT_WIDTH } from "./config";
7-
import TableHeader from "./formats/header";
8-
import { ListContainer } from "./formats/list";
5+
import type { EmitterSource, Range } from "quill";
6+
import type { BindingObject, Context, Props } from "./types";
97
import {
108
cellId,
11-
TableBody,
12-
TableCell,
139
TableCellBlock,
14-
TableCol,
15-
TableColgroup,
10+
TableCell,
11+
TableRow,
12+
TableBody,
13+
TableTemporary,
1614
TableContainer,
1715
tableId,
18-
TableRow,
19-
TableTemporary
16+
TableCol,
17+
TableColgroup
2018
} from "./formats/table";
19+
import TableHeader from "./formats/header";
20+
import { ListContainer } from "./formats/list";
21+
import { matchTable, matchTableCell, matchTableCol, matchTableTemporary } from "./utils/clipboard-matchers";
2122
import Language from "./language";
22-
import TableClipboard from "./modules/clipboard";
23-
import TableToolbar from "./modules/toolbar";
24-
import type { BindingObject, Context, Props } from "./types";
2523
import CellSelection from "./ui/cell-selection";
2624
import OperateLine from "./ui/operate-line";
2725
import TableMenus from "./ui/table-menus";
26+
import { CELL_DEFAULT_WIDTH } from "./config";
2827
import ToolbarTable, { TableSelect } from "./ui/toolbar-table";
2928
import { getCellId, getCorrectCellBlot } from "./utils";
30-
import { matchTable, matchTableCell, matchTableCol, matchTableTemporary } from "./utils/clipboard-matchers";
29+
import TableToolbar from "./modules/toolbar";
30+
import TableClipboard from "./modules/clipboard";
3131

3232
interface Options {
3333
language?:

‎packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/operate-line.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// @ts-nocheck
22
import Quill from "quill";
33
import type { QuillTableBetter, TableCell, TableColgroup } from "../types";
4-
import { setElementProperty, setElementAttribute, updateTableWidth } from "../utils";
4+
import { setElementAttribute, setElementProperty, updateTableWidth } from "../utils";
55

66
interface Options {
77
tableNode: HTMLElement;
@@ -408,9 +408,13 @@ class OperateLine {
408408
updateDragLine(clientX: number, clientY: number) {
409409
const containerRect = this.quill.container.getBoundingClientRect();
410410
if (this.direction === "level") {
411-
setElementProperty(this.line, { left: `${~~(clientX - containerRect.left - LINE_CONTAINER_WIDTH / 2)}px` });
411+
setElementProperty(this.line, {
412+
left: `${~~(clientX - containerRect.left - LINE_CONTAINER_WIDTH / 2)}px`
413+
});
412414
} else if (this.direction === "vertical") {
413-
setElementProperty(this.line, { top: `${~~clientY - containerRect.top - LINE_CONTAINER_HEIGHT / 2}px` });
415+
setElementProperty(this.line, {
416+
top: `${~~clientY - containerRect.top - LINE_CONTAINER_HEIGHT / 2}px`
417+
});
414418
}
415419
}
416420

‎packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/table-properties-form.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { computePosition, flip, offset, shift } from "@floating-ui/react";
2-
import "@melloware/coloris/dist/coloris.css";
32
import Coloris from "@melloware/coloris";
3+
import "@melloware/coloris/dist/coloris.css";
44
import Quill from "quill";
55
import closeIcon from "../assets/icon/close.svg";
66
import downIcon from "../assets/icon/down.svg";
@@ -162,7 +162,7 @@ class TablePropertiesForm {
162162
return container;
163163
}
164164

165-
createColorInput(child: Child): HTMLDivElement {
165+
createColorInput(child: Child) {
166166
const { attribute, value } = child;
167167
const placeholder = attribute?.placeholder ?? "";
168168
const container = document.createElement("div");
@@ -219,7 +219,7 @@ class TablePropertiesForm {
219219
return { dropdown: container, dropText };
220220
}
221221

222-
createInput(child: Child): HTMLDivElement {
222+
createInput(child: Child) {
223223
const { attribute, message, propertyName, valid, value } = child;
224224
const placeholder = attribute?.placeholder ?? "";
225225
const container = document.createElement("div");

‎packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/ui/toolbar-table.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ class TableSelect {
3737
fragment.appendChild(child);
3838
}
3939
}
40-
label.innerHTML = "0 x 0";
40+
label.innerHTML = "0 × 0";
4141
container.classList.add("ql-table-select-container", "ql-hidden");
4242
list.classList.add("ql-table-select-list");
4343
label.classList.add("ql-table-select-label");
@@ -102,10 +102,10 @@ class TableSelect {
102102

103103
setLabelContent(label: Element, child: Element) {
104104
if (!child) {
105-
label.innerHTML = "0 x 0";
105+
label.innerHTML = "0 × 0";
106106
} else {
107107
const [row, column] = this.getSelectAttrs(child);
108-
label.innerHTML = `${row} x ${column}`;
108+
label.innerHTML = `${row} × ${column}`;
109109
}
110110
}
111111

‎packages/pluggableWidgets/rich-text-web/src/utils/formats/quill-table-better/utils/index.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
// @ts-nocheck
22
import Quill from "quill";
3-
import type { CorrectBound, Props, TableCellChildren, TableContainer } from "../types";
4-
import { TableCell, TableCellBlock, TableCol } from "../formats/table";
5-
import TableList, { ListContainer } from "../formats/list";
6-
import TableHeader from "../formats/header";
73
import { COLORS, DEVIATION } from "../config";
4+
import TableHeader from "../formats/header";
5+
import TableList, { ListContainer } from "../formats/list";
6+
import { TableCell, TableCellBlock, TableCol } from "../formats/table";
7+
import type { CorrectBound, Props, TableCellChildren, TableContainer } from "../types";
88

99
function addDimensionsUnit(value: string) {
1010
if (!value) return value;
@@ -31,7 +31,7 @@ function createTooltip(content: string) {
3131
}
3232

3333
function debounce(cb: Function, delay: number) {
34-
let timer: NodeJS.Timeout | null = null;
34+
let timer: NodeJS.Timeout = null;
3535
return function () {
3636
let context = this;
3737
let args = arguments;
@@ -373,8 +373,8 @@ export {
373373
isValidColor,
374374
isValidDimensions,
375375
removeElementProperty,
376-
rgbToHex,
377376
rgbaToHex,
377+
rgbToHex,
378378
setElementAttribute,
379379
setElementProperty,
380380
throttle,

0 commit comments

Comments
 (0)