@livepreso/react-plugin-textfield 0.5.1 → 0.6.0

package/components/editor-toolbars/SubMenu.js

@@ -1,4 +1,10 @@
-import React, { Fragment } from "react";
+import React, {
+	Fragment,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
 import classNames from "classnames";
 import { DropdownMenu } from "radix-ui";
 
@@ -6,18 +12,67 @@ import { ChevronRightIcon } from "@radix-ui/react-icons";
 import { MenuItem } from "./MenuItem";
 import style from "./EditorMenu.module.scss";
 
+// Delay to prevent the submenu closing just from the user
+// rolling between the trigger and the content.
+const POINTER_LEAVE_CLOSE_DELAY = 200;
+
 export function SubMenu({
 	label,
 	icon,
 	items = [],
 	disabled = false,
 	renderItem = null,
+	// For submenus whose contents run editor commands.
+	// Prevents focus jumping back to ProseMirror and closing
+	// a submenu that we want to keep open (eg. border cell selector).
+	// Submenu stays open until the user rolls off the trigger.
+	keepOpenOnInteract = false,
 }) {
 	const div = window.Bridge.UI.overlay;
 
+	const [open, setOpen] = useState(false);
+	const closeTimerRef = useRef(null);
+
+	const cancelClose = useCallback(() => {
+		if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);
+		closeTimerRef.current = null;
+	}, []);
+
+	const scheduleClose = useCallback(() => {
+		cancelClose();
+		closeTimerRef.current = window.setTimeout(() => {
+			closeTimerRef.current = null;
+			setOpen(false);
+		}, POINTER_LEAVE_CLOSE_DELAY);
+	}, [cancelClose]);
+
+	// Mirror every Radix-initiated change (hover-open, arrow keys, Escape,
+	// click-outside) so the controlled value never fights the primitive.
+	const handleOpenChange = useCallback(
+		(nextOpen) => {
+			cancelClose();
+			setOpen(nextOpen);
+		},
+		[cancelClose],
+	);
+
+	useEffect(() => cancelClose, [cancelClose]);
+
+	// Spread conditionally so submenus that don't opt in stay uncontrolled, ie.
+	// exactly as they behaved before.
+	const subProps = keepOpenOnInteract
+		? { open, onOpenChange: handleOpenChange }
+		: {};
+	const hoverProps = keepOpenOnInteract
+		? { onPointerEnter: cancelClose, onPointerLeave: scheduleClose }
+		: {};
+	const contentProps = keepOpenOnInteract
+		? { ...hoverProps, onFocusOutside: (event) => event.preventDefault() }
+		: {};
+
 	return (
-		<DropdownMenu.Sub>
-			<DropdownMenu.SubTrigger className={style.item}>
+		<DropdownMenu.Sub {...subProps}>
+			<DropdownMenu.SubTrigger className={style.item} {...hoverProps}>
 				<div className={style.itemIcon}>{icon}</div>
 				<div className={style.itemLabel}>{label}</div>
 				<div className={classNames(style.itemIcon, style.itemIconRight)}>
@@ -31,6 +86,7 @@ export function SubMenu({
 					sideOffset={-30}
 					alignOffset={-5}
 					collisionBoundary={div}
+					{...contentProps}
 				>
 					{items.map((item) => {
 						if (typeof renderItem === "function") {

package/components/table-creator/TableCreatorCombo.js

@@ -1,10 +1,10 @@
 import React from "react";
 
 import { TableCreator } from "./TableCreator";
-import { Popover } from "../Popover";
-import toolbarStyle from "../editor-toolbars/EditorToolbar.module.scss";
-import { BorderAll } from "../../icons";
-import { ToolbarButton } from "../editor-toolbars/ToolbarButton";
+import { Popover } from "@livepreso/react-plugin-ui/popover";
+import toolbarStyle from "@livepreso/react-plugin-ui/toolbar/toolbar.module.scss";
+import { BorderAll } from "@livepreso/react-plugin-ui/icons";
+import { ToolbarButton } from "@livepreso/react-plugin-ui/toolbar";
 
 export function TableCreatorCombo({ disabled, onChange }) {
 	return (

package/components/table-creator/TableCreatorCombo.module.scss

@@ -1,4 +1,4 @@
-@import "../style.module.scss";
+@import "@livepreso/react-plugin-ui/styles/placeholders.module.scss";
 
 :global(.sp-presenter-overlay) {
 	.indicator {

package/components/tiptap/Table.js

@@ -1,13 +1,21 @@
 import { CellSelection, TableMap } from "@tiptap/pm/tables";
-import { Table as TableBase } from "@tiptap/extension-table";
+import { Table as TableBase, TableView } from "@tiptap/extension-table";
+import {
+	getAttributesFromExtensions,
+	getRenderedAttributes,
+} from "@tiptap/core";
 import { getDomWidth } from "../utils";
-import { CELL_MIN_WIDTH } from "../../constants";
+import { CELL_MIN_WIDTH, BORDER_SIDES } from "../../constants";
 
 export const CELL_VALIGN_TOP = "top";
 export const CELL_VALIGN_MIDDLE = "middle";
 export const CELL_VALIGN_BOTTOM = "bottom";
 export const CELL_VALIGN_MIXED = "mixed";
 
+export const TABLE_DENSITY_SPACIOUS = "spacious";
+export const TABLE_DENSITY_NORMAL = "normal";
+export const TABLE_DENSITY_DENSE = "dense";
+
 /**
  * Finds the table node and its position if the current selection is inside a table
  * @param state The current editor state
@@ -48,7 +56,7 @@ export function findCellsInSelection(state) {
 
 		if (!table) return result;
 		const cells = [];
-		selection.forEachCell((node, pos) => {
+		selection.forEachCell((node) => {
 			cells.push(node);
 		});
 		return cells;
@@ -199,7 +207,7 @@ function setColumnWidths({
 	let rowPos = tablePos + 1; // Start at the first row
 
 	// Process each row in the table
-	tableNode.forEach((row, rowOffset) => {
+	tableNode.forEach((row) => {
 		if (row.type.name !== "tableRow") return;
 
 		let cellPos = rowPos + 1; // Start at the first cell in this row
@@ -255,6 +263,84 @@ export function getCellAlignment(editor) {
 	return CELL_VALIGN_MIXED;
 }
 
+/**
+ * Summarises which border sides are active across the currently selected cells.
+ * A side counts as active only if every selected cell has it active (intersection),
+ * so the toggle group reflects a side as "on" only when the whole selection agrees.
+ */
+export function getCellBorderSides(editor) {
+	const values = getCellAttributes(editor, "borderSides");
+	const mappedValues = values.map((v) => v || BORDER_SIDES);
+	if (mappedValues.length === 0) return BORDER_SIDES;
+
+	return BORDER_SIDES.filter((side) =>
+		mappedValues.every((sides) => sides.includes(side)),
+	);
+}
+
+/**
+ * Returns the density of the table the selection is currently in, defaulting
+ * to normal if there's no table in the selection or it predates this attribute.
+ */
+export function getTableDensity(editor) {
+	const table = findTable(editor.state);
+	return table?.node?.attrs?.density || TABLE_DENSITY_NORMAL;
+}
+
+/**
+ * Returns whether the table the selection is currently in is set to full width.
+ */
+export function getTableFullWidth(editor) {
+	const table = findTable(editor.state);
+	return Boolean(table?.node?.attrs?.fullWidth);
+}
+
+/**
+ * When resizable, the table extension's columnResizing plugin builds the
+ * <table> DOM element itself via a NodeView (TableView) rather than the node's
+ * renderHTML - and TableView#update only ever re-syncs colgroup/width, never
+ * any other attribute. Any table-level attribute change (eg. density) is
+ * saved correctly but never reaches the live DOM without this override
+ * re-applying it ourselves.
+ *
+ * getRenderedAttributes/getAttributesFromExtensions are the same helpers
+ * Tiptap uses internally to build the non-NodeView renderHTML output, so any
+ * attribute added via addAttributes() on the table node flows through here
+ * automatically.
+ */
+class TableViewWithAttrs extends TableView {
+	constructor(node, cellMinWidth, view) {
+		super(node, cellMinWidth);
+		// Cached once - the extension list doesn't change during the editor's lifetime.
+		this.extensionAttributes = getAttributesFromExtensions(
+			view?.dom?.editor?.extensionManager.extensions || [],
+		);
+		this.syncAttrs(node);
+	}
+
+	update(node) {
+		const updated = super.update(node);
+		if (updated) this.syncAttrs(node);
+		return updated;
+	}
+
+	syncAttrs(node) {
+		const attrs = getRenderedAttributes(node, this.extensionAttributes);
+
+		Object.entries(attrs).forEach(([key, value]) => {
+			// width/min-width is already recalculated more precisely by
+			// updateColumns() above, from live column widths - don't clobber it.
+			if (key === "style") return;
+
+			if (value === null || value === undefined) {
+				this.table.removeAttribute(key);
+			} else {
+				this.table.setAttribute(key, value);
+			}
+		});
+	}
+}
+
 /**
  * Extension that adds equal column width functionality to tables
  */
@@ -265,6 +351,37 @@ export const TableExtended = TableBase.extend({
 			cellMinWidth: CELL_MIN_WIDTH,
 			lastColumnResizable: true,
 			resizable: true,
+			View: TableViewWithAttrs,
+		};
+	},
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			// Rendered as a class rather than inline styles so a deck importing this
+			// component can override the padding values per density state via CSS.
+			density: {
+				default: TABLE_DENSITY_NORMAL,
+				parseHTML: (element) =>
+					element.getAttribute("data-density") || TABLE_DENSITY_NORMAL,
+				renderHTML: ({ density }) => ({
+					"data-density": density,
+					class: `tiptap-table-density-${density}`,
+				}),
+			},
+			// !FEATURE CURRENTLY NOT IN USE!
+			// Rendered as a class (rather than a `width: 100%` style) because the
+			// resizable table's own colgroup logic (updateColumns) reasserts an
+			// inline width/min-width on every update, based on `node.attrs.style`
+			// specifically - a style-based width here would be silently clobbered.
+			// See setFullWidthLegacy below for the previous, column-width-based approach.
+			fullWidth: {
+				default: false,
+				parseHTML: (element) => element.hasAttribute("data-full-width"),
+				renderHTML: ({ fullWidth }) =>
+					fullWidth
+						? { "data-full-width": "true", class: "tiptap-table-full-width" }
+						: {},
+			},
 		};
 	},
 	addCommands() {
@@ -296,7 +413,12 @@ export const TableExtended = TableBase.extend({
 
 					return true;
 				},
-			setFullWidth:
+			/**
+			 * Original full-width implementation - redistributes column widths to
+			 * fill the available space. Plan is to replace this with the simpler
+			 * `setFullWidth` (CSS-class-based) approach below, when it's ready.
+			 */
+			setFullWidthLegacy:
 				() =>
 				({ state, tr, dispatch, editor }) => {
 					const table = findTable(state);
@@ -317,6 +439,30 @@ export const TableExtended = TableBase.extend({
 						dispatch(newTr);
 					}
 
+					return true;
+				},
+			/**
+			 * !FEATURE CURRENTLY NOT IN USE!
+			 * Toggle full width for the current table.
+			 * Plan was to replace legacy in the future, but there
+			 * is some bugginess that needs ironing out first.
+			 */
+			setFullWidth:
+				(fullWidth) =>
+				({ state, tr, dispatch }) => {
+					const table = findTable(state);
+
+					if (!table) return false;
+
+					if (dispatch) {
+						dispatch(
+							tr.setNodeMarkup(table.pos, null, {
+								...table.node.attrs,
+								fullWidth,
+							}),
+						);
+					}
+
 					return true;
 				},
 			cleanWidth:
@@ -350,6 +496,27 @@ export const TableExtended = TableBase.extend({
 						dispatch(newTr);
 					}
 
+					return true;
+				},
+			/**
+			 * Set the padding density for the current table
+			 */
+			setTableDensity:
+				(density) =>
+				({ state, tr, dispatch }) => {
+					const table = findTable(state);
+
+					if (!table) return false;
+
+					if (dispatch) {
+						dispatch(
+							tr.setNodeMarkup(table.pos, null, {
+								...table.node.attrs,
+								density,
+							}),
+						);
+					}
+
 					return true;
 				},
 			applyStyleToCells:

package/components/tiptap/TableCells.js

@@ -1,6 +1,7 @@
 import { TableCell as TableCellBase } from "@tiptap/extension-table";
 import { TableHeader as TableHeaderBase } from "@tiptap/extension-table";
 import { hexIsDark } from "../../utils/color-utils";
+import { BORDER_SIDES, BORDER_SIDES_NONE } from "../../constants";
 
 const tableCellAttributes = {
 	colwidth: {
@@ -78,6 +79,38 @@ const tableCellAttributes = {
 			return attrs;
 		},
 	},
+	// Sides with a visible border. An absent attribute means "all sides" (default),
+	// `"none"` means no sides at all. Only sides missing from the list get an explicit
+	// `border-<side>: hidden`, remaining sides inherit default CSS border styling.
+	// Note: `hidden` is used instead of `none`, because the table is `border-collapse: collapse`,
+	// otherwise the neighbouring cell's border would keep painting the shared edge.
+	borderSides: {
+		default: null,
+		parseHTML: (element) => {
+			const value = element.getAttribute("data-border-sides");
+			if (value === null) return null;
+			// `""` is only produced by builds predating BORDER_SIDES_NONE.
+			if (value === BORDER_SIDES_NONE || value === "") return [];
+			return value.split(",").filter((side) => BORDER_SIDES.includes(side));
+		},
+		renderHTML: ({ borderSides }) => {
+			if (!borderSides) return { "data-border-sides": null };
+
+			const hiddenSides = BORDER_SIDES.filter(
+				(side) => !borderSides.includes(side),
+			);
+			const style = hiddenSides
+				.map((side) => `border-${side}: hidden;`)
+				.join(" ");
+
+			return {
+				"data-border-sides": borderSides.length
+					? borderSides.join(",")
+					: BORDER_SIDES_NONE,
+				style,
+			};
+		},
+	},
 };
 
 export const TableCell = TableCellBase.extend({

package/components/tiptap/token/Token.module.scss

@@ -1,4 +1,4 @@
-@import "../../../variables.scss";
+@import "@livepreso/react-plugin-ui/styles/variables.scss";
 
 .token,
 :global(.sp-presenter-overlay) .token {

package/components/tiptap/token/TokenList.module.scss

@@ -1,4 +1,4 @@
-@import "../../style.module.scss";
+@import "@livepreso/react-plugin-ui/styles/placeholders.module.scss";
 
 :global(.sp-presenter-overlay) {
 	.root {

package/components/utils.js

@@ -33,52 +33,3 @@ export function getDomWidth(dom) {
 	const bounds = dom?.getBoundingClientRect() || { width: 0 };
 	return bounds.width ? bounds.width / getContentRatio() : null;
 }
-
-/**
- * Tests if the element is contained within the bounds of a mask element
- * and returns appropriate rect combining the element and mask rects.
- *
- * If the test is outside of the vertical limits of the mask, the mask's
- * top, bottom and height will replace the testRect's, while textRect
- * maintains its width, left and right.
- *
- * @param {Object} element - return of getBoundingClientRect()
- * @param {Object} parent - return of getBoundingClientRect()
- * @returns {Object}
- */
-export const getTestRect = (testRect, maskRect) => {
-	const newRect = {
-		y: testRect.y,
-		x: testRect.x,
-		width: testRect.width,
-		height: testRect.height,
-		top: testRect.top,
-		bottom: testRect.bottom,
-		left: testRect.left,
-		right: testRect.right,
-	};
-
-	if (testRect.top < maskRect.top) {
-		newRect.y = maskRect.y;
-		newRect.top = maskRect.top;
-		newRect.height = testRect.height - (maskRect.top - testRect.top);
-	}
-
-	if (testRect.bottom > maskRect.bottom) {
-		newRect.bottom = maskRect.bottom;
-		newRect.height = testRect.height - (testRect.bottom - maskRect.bottom);
-	}
-
-	if (testRect.left < maskRect.left) {
-		newRect.x = maskRect.x;
-		newRect.left = maskRect.left;
-		newRect.width = testRect.width - (maskRect.left - testRect.left);
-	}
-
-	if (testRect.right > maskRect.right) {
-		newRect.right = maskRect.right;
-		newRect.width = testRect.width - (testRect.right - maskRect.right);
-	}
-
-	return newRect;
-};

package/configs/table-toolbar-configuration.js

@@ -1,21 +1,69 @@
 import React from "react";
-import icons from "../icons";
+import icons from "@livepreso/react-plugin-ui/icons";
 import {
 	TOOLBAR_COMPONENT_TYPES,
 	TABLE_TOOLBAR_IDS,
 	TOOLBAR_SCOPES,
+	BORDER_SIDES,
 } from "../constants";
-import { ColorPicker } from "../components/color-picker/ColorPicker";
+import { ColorPickerBasic } from "@livepreso/react-plugin-ui/color-picker";
 import { VerticalAlignToggle } from "../components/VerticalAlignToggle";
-import { findCellsInSelection } from "../components/tiptap/Table";
+import { BorderEdgeToggle } from "../components/BorderEdgeToggle";
+import { TableDensityPicker } from "../components/TableDensityPicker";
+import {
+	findCellsInSelection,
+	getCellBorderSides,
+	getTableDensity,
+	getTableFullWidth,
+} from "../components/tiptap/Table";
 import { generateVerticalAlignmentIcon } from "../utils/generate-vertical-alignment-icon";
+import { generateBorderIcon } from "../utils/generate-border-icon";
 
 // Table-wide options
-const fullWidthToggle = () => ({
+const tableDensityPicker = () => ({
+	id: TABLE_TOOLBAR_IDS.TABLE_DENSITY,
+	label: "Table density",
+	type: TOOLBAR_COMPONENT_TYPES.CUSTOM,
+	scope: TOOLBAR_SCOPES.TABLE,
+	value: (editor) => getTableDensity(editor),
+	renderContent: ({ editor, value }) => (
+		<TableDensityPicker
+			value={value}
+			onChange={(density) =>
+				editor.chain().focus().setTableDensity(density).run()
+			}
+		/>
+	),
+});
+
+/**
+ * Original "Fit width" control - a one-shot button that redistributes column
+ * widths to fill the available space. Plan is to replace with the `fullWidthToggle`
+ * below, but the new function needs more work and testing.
+ */
+const fullWidthToggleLegacy = () => ({
 	id: TABLE_TOOLBAR_IDS.FULL_WIDTH,
 	label: "Fit width",
 	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
-	command: (editor) => editor.chain().focus().setFullWidth().run(),
+	command: (editor) => editor.chain().focus().setFullWidthLegacy().run(),
+	icon: <icons.FitWidthArrows />,
+	scope: TOOLBAR_SCOPES.TABLE,
+});
+
+/**
+ * !FEATURE CURRENTLY NOT IN USE!
+ * Trialled full-width toggle, worked well in initial tests, but proved problematic
+ * in preview / present modes, and resizing of columns in certain situations.
+ * Will revisit in the future.
+ */
+/* eslint-disable-next-line no-unused-vars */
+const fullWidthToggle = () => ({
+	id: TABLE_TOOLBAR_IDS.FULL_WIDTH,
+	label: "Fit width",
+	type: TOOLBAR_COMPONENT_TYPES.TOGGLE,
+	active: (editor) => getTableFullWidth(editor),
+	command: (editor) =>
+		editor.chain().focus().setFullWidth(!getTableFullWidth(editor)).run(),
 	icon: <icons.FitWidthArrows />,
 	scope: TOOLBAR_SCOPES.TABLE,
 });
@@ -132,7 +180,7 @@ const cellBgColorPicker = ({ colors }) => ({
 	type: TOOLBAR_COMPONENT_TYPES.SUB,
 	items: [{ id: "color-picker" }],
 	renderItem: (item, { editor } = {}) => (
-		<ColorPicker
+		<ColorPickerBasic
 			colors={colors}
 			onChange={(color) =>
 				editor.chain().focus().setCellAttribute("backgroundColor", color).run()
@@ -153,7 +201,7 @@ const cellValignPicker = () => ({
 		if (!cells) return null;
 		return cells[0]?.attrs?.verticalAlign;
 	},
-	renderItem: (item, { editor, editorState, value } = {}) => (
+	renderItem: (item, { editor, value } = {}) => (
 		<VerticalAlignToggle
 			id={TABLE_TOOLBAR_IDS.CELL_VALIGN}
 			value={value}
@@ -167,9 +215,39 @@ const cellValignPicker = () => ({
 		/>
 	),
 });
+
+const cellBorderPicker = () => ({
+	id: TABLE_TOOLBAR_IDS.CELL_BORDER,
+	label: "Border",
+	renderIcon: generateBorderIcon,
+	scope: TOOLBAR_SCOPES.TABLE_CELL,
+	type: TOOLBAR_COMPONENT_TYPES.SUB,
+	items: [{ id: "border-sides" }],
+	// Four independent toggles - the submenu has to survive repeated clicks.
+	keepOpenOnInteract: true,
+	value: (editor) => getCellBorderSides(editor),
+	renderItem: (item, { editor, value } = {}) => (
+		<BorderEdgeToggle
+			id={TABLE_TOOLBAR_IDS.CELL_BORDER}
+			value={value}
+			onChange={(sides) =>
+				editor
+					.chain()
+					.focus()
+					.setCellAttribute(
+						"borderSides",
+						sides.length === BORDER_SIDES.length ? null : sides,
+					)
+					.run()
+			}
+		/>
+	),
+});
+
 export const tableItemGenerators = {
 	// Table-wide options
-	[TABLE_TOOLBAR_IDS.FULL_WIDTH]: fullWidthToggle,
+	[TABLE_TOOLBAR_IDS.TABLE_DENSITY]: tableDensityPicker,
+	[TABLE_TOOLBAR_IDS.FULL_WIDTH]: fullWidthToggleLegacy,
 	[TABLE_TOOLBAR_IDS.EQUAL_WIDTH_COLUMNS]: distributeColumnsButton,
 	[TABLE_TOOLBAR_IDS.DELETE_TABLE]: deleteTableButton,
 	// Internal table options
@@ -184,4 +262,5 @@ export const tableItemGenerators = {
 	[TABLE_TOOLBAR_IDS.SPLIT_CELLS]: splitCellsButton,
 	[TABLE_TOOLBAR_IDS.CELL_BG_COLOR]: cellBgColorPicker,
 	[TABLE_TOOLBAR_IDS.CELL_VALIGN]: cellValignPicker,
+	[TABLE_TOOLBAR_IDS.CELL_BORDER]: cellBorderPicker,
 };

package/configs/toolbar-configuration.js

@@ -12,12 +12,12 @@ import { Heading } from "@tiptap/extension-heading";
 import Underline from "@tiptap/extension-underline";
 import { UndoRedo } from "@tiptap/extensions";
 
-import icons from "../icons";
+import icons from "@livepreso/react-plugin-ui/icons";
 import { TableRow } from "@tiptap/extension-table";
 import { TextStyle, Color } from "@tiptap/extension-text-style";
 import { TableCell, TableHeader } from "../components/tiptap/TableCells";
 import { TableExtended } from "../components/tiptap/Table";
-import { Select } from "../components/Select/Select";
+import { Select } from "@livepreso/react-plugin-ui/select";
 import { PRIMARY_TOOLBAR_IDS, TOOLBAR_COMPONENT_TYPES } from "../constants";
 import LinkEditDialog from "../components/LinkEditDialog";
 import { Gapcursor } from "@tiptap/extensions";
@@ -343,7 +343,7 @@ const insertTableButton = () => ({
 							cols,
 							withHeaderRow: true,
 						})
-						.setFullWidth()
+						.setFullWidthLegacy()
 						.run();
 				}}
 			/>

package/constants.js

@@ -26,6 +26,14 @@ export const TOOLBAR_SCOPES = Object.freeze({
 	TABLE_CELL: "table_cell",
 });
 
+export const BORDER_SIDES = ["top", "right", "bottom", "left"];
+
+// An empty list can't be written as an empty `data-border-sides` attribute,
+// we needed null/empty to represent default cell border style (for backwards
+// compatibility) - as such, a specific "none" was needed to prevent "none"
+// looking like default (generally "all").
+export const BORDER_SIDES_NONE = "none";
+
 export const EDITABLE_OUTER_SELECTOR = "sp-textfield";
 
 // Primary groups
@@ -61,6 +69,7 @@ export const PRIMARY_TOOLBAR_IDS = Object.freeze({
 });
 
 // Table editing & formatting groups
+export const TABLE_DENSITY = "tableDensity";
 export const TABLE_SIZE = "tableSize";
 export const DELETE_TABLE = "deleteTable";
 export const COLUMN = "column";
@@ -68,6 +77,7 @@ export const ROW = "row";
 export const CELL = "cell";
 
 export const TABLE_TOOLBAR_IDS = Object.freeze({
+	TABLE_DENSITY: TABLE_DENSITY,
 	FULL_WIDTH: "fullWidthTable",
 	EQUAL_WIDTH_COLUMNS: "equalWidthColumns",
 	DELETE_TABLE: DELETE_TABLE,
@@ -82,6 +92,7 @@ export const TABLE_TOOLBAR_IDS = Object.freeze({
 	SPLIT_CELLS: "splitCells",
 	CELL_BG_COLOR: "cellBackgroundColor",
 	CELL_VALIGN: "cellVerticalAlignment",
+	CELL_BORDER: "cellBorderSides",
 });
 
 // Default group configurations
@@ -125,6 +136,9 @@ const PRIMARY_TOOLBAR_GROUPS = Object.freeze({
 });
 
 const TABLE_TOOLBAR_GROUPS = Object.freeze({
+	[TABLE_DENSITY]: {
+		items: [TABLE_TOOLBAR_IDS.TABLE_DENSITY],
+	},
 	[TABLE_SIZE]: {
 		items: [
 			TABLE_TOOLBAR_IDS.FULL_WIDTH,
@@ -158,6 +172,7 @@ const TABLE_MENU_GROUPS = Object.freeze({
 			TABLE_TOOLBAR_IDS.SPLIT_CELLS,
 			TABLE_TOOLBAR_IDS.CELL_BG_COLOR,
 			TABLE_TOOLBAR_IDS.CELL_VALIGN,
+			TABLE_TOOLBAR_IDS.CELL_BORDER,
 		],
 	},
 });
@@ -169,7 +184,7 @@ export const DEFAULT_TOOLBAR_GROUPS = {
 };
 
 // Default group order of table-wide and table-cell editors
-const TABLE_OPTIONS = [TABLE_SIZE, DELETE_TABLE];
+const TABLE_OPTIONS = [TABLE_DENSITY, TABLE_SIZE, DELETE_TABLE];
 const TABLE_CELL_OPTIONS = [COLUMN, ROW, CELL];
 
 // Complete set of toolbar configurations