Skip to content

Commit c60fc30

Browse files
samuelreichertsamuelreichert
committed
fix(table-better): replace SVG icons with CSS classes for table menus and properties
1 parent e019500 commit c60fc30

3 files changed

Lines changed: 52 additions & 58 deletions

File tree

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

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
import alignBottomIcon from "../assets/icon/align-bottom.svg";
2-
import alignCenterIcon from "../assets/icon/align-center.svg";
3-
import alignJustifyIcon from "../assets/icon/align-justify.svg";
4-
import alignLeftIcon from "../assets/icon/align-left.svg";
5-
import alignMiddleIcon from "../assets/icon/align-middle.svg";
6-
import alignRightIcon from "../assets/icon/align-right.svg";
7-
import alignTopIcon from "../assets/icon/align-top.svg";
81
import type { Props, UseLanguageHandler } from "../types";
92
import { convertUnitToInteger, isValidColor, isValidDimensions } from "../utils";
103

@@ -306,20 +299,36 @@ function getCellProperties(attribute: Props, useLanguage: UseLanguageHandler) {
306299
propertyName: "text-align",
307300
value: attribute["text-align"],
308301
menus: [
309-
{ icon: alignLeftIcon, describe: useLanguage("alCellTxtL"), align: "left" },
310-
{ icon: alignCenterIcon, describe: useLanguage("alCellTxtC"), align: "center" },
311-
{ icon: alignRightIcon, describe: useLanguage("alCellTxtR"), align: "right" },
312-
{ icon: alignJustifyIcon, describe: useLanguage("jusfCellTxt"), align: "justify" }
302+
{
303+
icon: "icons icon-Text-align-left",
304+
describe: useLanguage("alCellTxtL"),
305+
align: "left"
306+
},
307+
{
308+
icon: "icons icon-Text-align-center",
309+
describe: useLanguage("alCellTxtC"),
310+
align: "center"
311+
},
312+
{
313+
icon: "icons icon-Text-align-right",
314+
describe: useLanguage("alCellTxtR"),
315+
align: "right"
316+
},
317+
{
318+
icon: "icons icon-Text-align-justify",
319+
describe: useLanguage("jusfCellTxt"),
320+
align: "justify"
321+
}
313322
]
314323
},
315324
{
316325
category: "menus",
317326
propertyName: "vertical-align",
318327
value: attribute["vertical-align"],
319328
menus: [
320-
{ icon: alignTopIcon, describe: useLanguage("alCellTxtT"), align: "top" },
321-
{ icon: alignMiddleIcon, describe: useLanguage("alCellTxtM"), align: "middle" },
322-
{ icon: alignBottomIcon, describe: useLanguage("alCellTxtB"), align: "bottom" }
329+
{ icon: "icons icon-Align-top", describe: useLanguage("alCellTxtT"), align: "top" },
330+
{ icon: "icons icon-Align-middle", describe: useLanguage("alCellTxtM"), align: "middle" },
331+
{ icon: "icons icon-Align-bottom", describe: useLanguage("alCellTxtB"), align: "bottom" }
323332
]
324333
}
325334
]
@@ -411,9 +420,9 @@ function getTableProperties(attribute: Props, useLanguage: UseLanguageHandler) {
411420
propertyName: "align",
412421
value: attribute["align"],
413422
menus: [
414-
{ icon: alignLeftIcon, describe: useLanguage("alTblL"), align: "left" },
415-
{ icon: alignCenterIcon, describe: useLanguage("tblC"), align: "center" },
416-
{ icon: alignRightIcon, describe: useLanguage("alTblR"), align: "right" }
423+
{ icon: "icons icon-Text-align-left", describe: useLanguage("alTblL"), align: "left" },
424+
{ icon: "icons icon-Text-align-center", describe: useLanguage("tblC"), align: "center" },
425+
{ icon: "icons icon-Text-align-right", describe: useLanguage("alTblR"), align: "right" }
417426
]
418427
}
419428
]

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

Lines changed: 19 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,6 @@
22
import type { LinkedList } from "parchment";
33
import Quill from "quill";
44
import Delta from "quill-delta";
5-
import cellIcon from "../assets/icon/cell.svg";
6-
import columnIcon from "../assets/icon/column.svg";
7-
import copyIcon from "../assets/icon/copy.svg";
8-
import deleteIcon from "../assets/icon/delete.svg";
9-
import downIcon from "../assets/icon/down.svg";
10-
import mergeIcon from "../assets/icon/merge.svg";
11-
import rowIcon from "../assets/icon/row.svg";
12-
import tableIcon from "../assets/icon/table.svg";
13-
import wrapIcon from "../assets/icon/wrap.svg";
145
import { CELL_DEFAULT_VALUES, CELL_DEFAULT_WIDTH, CELL_PROPERTIES, DEVIATION, TABLE_PROPERTIES } from "../config";
156
import { TableCell, tableId } from "../formats/table";
167
import type {
@@ -62,7 +53,7 @@ function getMenusConfig(useLanguage: UseLanguageHandler, menus?: string[]): Menu
6253
const DEFAULT: MenusDefaults = {
6354
column: {
6455
content: useLanguage("col"),
65-
icon: columnIcon,
56+
icon: "icons icon-Column",
6657
handler(list: HTMLUListElement, tooltip: HTMLDivElement) {
6758
this.toggleAttribute(list, tooltip);
6859
},
@@ -97,7 +88,7 @@ function getMenusConfig(useLanguage: UseLanguageHandler, menus?: string[]): Menu
9788
},
9889
row: {
9990
content: useLanguage("row"),
100-
icon: rowIcon,
91+
icon: "icons icon-Row",
10192
handler(list: HTMLUListElement, tooltip: HTMLDivElement) {
10293
this.toggleAttribute(list, tooltip);
10394
},
@@ -128,7 +119,7 @@ function getMenusConfig(useLanguage: UseLanguageHandler, menus?: string[]): Menu
128119
},
129120
merge: {
130121
content: useLanguage("mCells"),
131-
icon: mergeIcon,
122+
icon: "icons icon-Merge",
132123
handler(list: HTMLUListElement, tooltip: HTMLDivElement) {
133124
this.toggleAttribute(list, tooltip);
134125
},
@@ -151,7 +142,7 @@ function getMenusConfig(useLanguage: UseLanguageHandler, menus?: string[]): Menu
151142
},
152143
table: {
153144
content: useLanguage("tblProps"),
154-
icon: tableIcon,
145+
icon: "icons icon-Table",
155146
handler(list: HTMLUListElement, tooltip: HTMLDivElement) {
156147
const attribute = {
157148
...getElementStyle(this.table, TABLE_PROPERTIES),
@@ -164,7 +155,7 @@ function getMenusConfig(useLanguage: UseLanguageHandler, menus?: string[]): Menu
164155
},
165156
cell: {
166157
content: useLanguage("cellProps"),
167-
icon: cellIcon,
158+
icon: "icons icon-Cell",
168159
handler(list: HTMLUListElement, tooltip: HTMLDivElement) {
169160
const { selectedTds } = this.tableBetter.cellSelection;
170161
const attribute =
@@ -178,7 +169,7 @@ function getMenusConfig(useLanguage: UseLanguageHandler, menus?: string[]): Menu
178169
},
179170
wrap: {
180171
content: useLanguage("insParaOTbl"),
181-
icon: wrapIcon,
172+
icon: "icons icon-Wrap",
182173
handler(list: HTMLUListElement, tooltip: HTMLDivElement) {
183174
this.toggleAttribute(list, tooltip);
184175
},
@@ -199,7 +190,7 @@ function getMenusConfig(useLanguage: UseLanguageHandler, menus?: string[]): Menu
199190
},
200191
delete: {
201192
content: useLanguage("delTable"),
202-
icon: deleteIcon,
193+
icon: "icons icon-Delete",
203194
handler() {
204195
this.deleteTable();
205196
}
@@ -208,7 +199,7 @@ function getMenusConfig(useLanguage: UseLanguageHandler, menus?: string[]): Menu
208199
const EXTRA: MenusDefaults = {
209200
copy: {
210201
content: useLanguage("copyTable"),
211-
icon: copyIcon,
202+
icon: "icons icon-Copy",
212203
handler() {
213204
this.copyTable();
214205
}
@@ -282,17 +273,19 @@ class TableMenus {
282273

283274
createMenu(left: string, right: string, isDropDown: boolean) {
284275
const container = this.quill.root.ownerDocument.createElement("div");
276+
container.classList.add("ql-table-dropdown");
285277
const dropDown = this.quill.root.ownerDocument.createElement("span");
286-
const leftIcon = this.quill.root.ownerDocument.createElement("img");
287-
leftIcon.setAttribute("src", left);
288-
dropDown.appendChild(leftIcon);
278+
dropDown.classList.add("ql-table-tooltip-hover");
279+
const classes = left.split(" ");
280+
const icon = this.quill.root.ownerDocument.createElement("span");
281+
icon.classList.add(...classes);
282+
dropDown.appendChild(icon);
289283
if (isDropDown) {
290-
const rightIcon = this.quill.root.ownerDocument.createElement("img");
291-
rightIcon.setAttribute("src", right);
292-
dropDown.appendChild(rightIcon);
284+
const classes = right.split(" ");
285+
const dropDownIcon = this.quill.root.ownerDocument.createElement("span");
286+
dropDownIcon.classList.add(...classes);
287+
dropDown.appendChild(dropDownIcon);
293288
}
294-
container.classList.add("ql-table-dropdown");
295-
dropDown.classList.add("ql-table-tooltip-hover");
296289
container.appendChild(dropDown);
297290
return container;
298291
}
@@ -307,7 +300,7 @@ class TableMenus {
307300
const { content, icon, children, handler } = val;
308301
const list = this.createList(children);
309302
const tooltip = createTooltip(content);
310-
const menu = this.createMenu(icon, downIcon, !!children);
303+
const menu = this.createMenu(icon, "icons icon-Arrow-down", !!children);
311304
menu.appendChild(tooltip);
312305
list && menu.appendChild(list);
313306
container.appendChild(menu);

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

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@ import { computePosition, flip, offset, shift } from "@floating-ui/react";
22
import Coloris from "@melloware/coloris";
33
import "@melloware/coloris/dist/coloris.css";
44
import Quill from "quill";
5-
import closeIcon from "../assets/icon/close.svg";
6-
import downIcon from "../assets/icon/down.svg";
7-
import saveIcon from "../assets/icon/save.svg";
85
import { getProperties } from "../config";
96
import { ListContainer } from "../formats/list";
107
import type { Props, TableCell, TableCellBlock, TableContainer, TableHeader, TableList, TableMenus } from "../types";
@@ -52,8 +49,8 @@ interface ColorList {
5249
}
5350

5451
const ACTION_LIST = [
55-
{ icon: saveIcon, label: "save" },
56-
{ icon: closeIcon, label: "cancel" }
52+
{ icon: "icons icon-Save", label: "save" },
53+
{ icon: "icons icon-Close", label: "cancel" }
5754
];
5855

5956
const COLOR_LIST: ColorList[] = [
@@ -108,9 +105,8 @@ class TablePropertiesForm {
108105
for (const { icon, label } of ACTION_LIST) {
109106
const button = ownerDocument.createElement("button");
110107
const iconContainer = ownerDocument.createElement("span");
111-
const iconImg = ownerDocument.createElement("img");
112-
iconImg.setAttribute("src", icon);
113-
iconContainer.appendChild(iconImg);
108+
const iconClasses = icon.split(" ");
109+
iconContainer.classList.add(...iconClasses);
114110
button.appendChild(iconContainer);
115111
setElementAttribute(button, { label });
116112
if (showLabel) {
@@ -132,9 +128,8 @@ class TablePropertiesForm {
132128
const fragment = ownerDocument.createDocumentFragment();
133129
for (const { icon, describe, align } of menus ?? []) {
134130
const container = ownerDocument.createElement("span");
135-
const iconImg = ownerDocument.createElement("img");
136-
iconImg.setAttribute("src", icon);
137-
container.appendChild(iconImg);
131+
const iconClasses = icon.split(" ");
132+
container.classList.add(...iconClasses);
138133
container.setAttribute("data-align", align);
139134
container.classList.add("ql-table-tooltip-hover");
140135
if (this.options.attribute[propertyName] === align) {
@@ -204,11 +199,9 @@ class TablePropertiesForm {
204199
const ownerDocument = this.tableMenus.quill.root.ownerDocument;
205200
const container = ownerDocument.createElement("div");
206201
const dropText = ownerDocument.createElement("span");
207-
const dropDown = ownerDocument.createElement("img");
208202
switch (category) {
209203
case "dropdown":
210-
dropDown.setAttribute("src", downIcon);
211-
dropDown.classList.add("ql-table-dropdown-icon");
204+
dropText.classList.add("icons", "icon-Arrow-down", "ql-table-dropdown-icon");
212205
break;
213206
case "color":
214207
break;
@@ -219,7 +212,6 @@ class TablePropertiesForm {
219212
container.classList.add("ql-table-dropdown-properties");
220213
dropText.classList.add("ql-table-dropdown-text");
221214
container.appendChild(dropText);
222-
if (category === "dropdown") container.appendChild(dropDown);
223215
return { dropdown: container, dropText };
224216
}
225217

0 commit comments

Comments
 (0)