@livepreso/react-plugin-textfield 0.0.2

package/components/tiptap/Table.js

@@ -0,0 +1,397 @@
+import { CellSelection, TableMap } from "@tiptap/pm/tables";
+import { Table as TableBase } from "@tiptap/extension-table";
+import { getDomWidth } from "../utils";
+import { CELL_MIN_WIDTH } 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";
+
+/**
+ * Finds the table node and its position if the current selection is inside a table
+ * @param state The current editor state
+ * @returns An object containing the table node and its position, or null if not in a table
+ */
+export function findTable(state) {
+	const { doc, selection } = state;
+	const { from } = selection;
+
+	// Find the node before the cursor/selection
+	let $pos = doc.resolve(from);
+
+	// Walk up the document tree to find a table node
+	for (let depth = $pos.depth; depth > 0; depth--) {
+		const node = $pos.node(depth);
+
+		if (node.type.spec.tableRole === "table") {
+			const pos = $pos.before(depth);
+			return { node, pos };
+		}
+	}
+
+	return null;
+}
+
+/**
+ * Finds all cells in the current selection
+ * @param state The current editor state
+ * @returns An array of objects containing cell nodes and their positions, or empty array if not in a table
+ */
+export function findCellsInSelection(state) {
+	const { selection, doc } = state;
+	const result = [];
+
+	// Check if we have a cell selection (multiple cells selected)
+	if (selection instanceof CellSelection) {
+		const table = findTable(state);
+
+		if (!table) return result;
+		const cells = [];
+		selection.forEachCell((node, pos) => {
+			cells.push(node);
+		});
+		return cells;
+	} else {
+		// Regular selection - find the cell we're in
+		let $pos = doc.resolve(selection.from);
+
+		for (let depth = $pos.depth; depth > 0; depth--) {
+			const node = $pos.node(depth);
+
+			if (
+				node.type.spec.tableRole === "cell" ||
+				node.type.spec.tableRole === "header_cell"
+			) {
+				result.push(node);
+				break;
+			}
+		}
+	}
+
+	return result;
+}
+
+function getColwidths({
+	tableNode,
+	cellMinWidth = CELL_MIN_WIDTH,
+	columnCount,
+}) {
+	let hasColwidth = false;
+	// Get the first row to determine the number of columns
+	const firstRow = tableNode.firstChild;
+	if (!firstRow) return [];
+
+	let colwidths = [];
+	// Iterate through cells in the first row to calculate total width
+	firstRow.forEach((cell) => {
+		if (cell.attrs.colwidth && Array.isArray(cell.attrs.colwidth)) {
+			// Sum up the column widths for this cell
+			hasColwidth = true;
+			colwidths.push(
+				cell.attrs.colwidth.reduce((sum, width) => {
+					// colwidth 0, return min cell width
+					if (!width) return sum + cellMinWidth;
+					return sum + width;
+				}, 0),
+			);
+		} else {
+			// If no colwidth, add default width for each column this cell spans
+			const colspan = cell.attrs.colspan || 1;
+			colwidths.push(cellMinWidth * colspan);
+		}
+	});
+
+	const totalWidth = colwidths.reduce((sum, width) => sum + width, 0);
+
+	// If no colwidth attributes found or total is too small, use a default total
+	if (!hasColwidth || totalWidth < columnCount * cellMinWidth) {
+		const maxWidth = Math.max(totalWidth, columnCount * cellMinWidth);
+		return Array(columnCount).fill(maxWidth);
+	}
+
+	return colwidths;
+}
+
+/**
+ * Calculates total width of currently selected table
+ *
+ * @param tableNode The table node
+ * @param cellMinWidth The minimum width for each cell (default: 25)
+ * @returns Number (pixels) width of currently selected table
+ */
+function getTableWidth({ tableNode, cellMinWidth = CELL_MIN_WIDTH }) {
+	// Create a table map to understand the table structure
+	const tableMap = TableMap.get(tableNode);
+	const columnCount = tableMap.width;
+
+	if (columnCount === 0) return 0;
+
+	// Calculate total width from existing column widths
+	const currColwidths = getColwidths({
+		tableNode,
+		cellMinWidth,
+		columnCount,
+	});
+
+	return currColwidths.reduce((sum, width) => sum + width, 0);
+}
+
+/**
+ * Updates widths for all columns in a table based on a supplied max width, or the current total width
+ *
+ * @param tr The current transaction
+ * @param tableNode The table node
+ * @param tablePos The position of the table in the document
+ * @param cellMinWidth The minimum width for each cell
+ * @param setEqualColumns If true, all columns will have the same width (default: false)
+ * @param maxWidth The maximum width for all columns, calculates current total width if maxWidth is not provided
+ * @returns The updated transaction
+ */
+function setColumnWidths({
+	tr,
+	table,
+	cellMinWidth = CELL_MIN_WIDTH,
+	setEqualColumns = false,
+	useFullWidth = false,
+	maxWidth,
+}) {
+	const tableNode = table.node;
+	const tablePos = table.pos;
+	// this avoids a no-param-reassign warning
+	let transaction = tr;
+	// Create a table map to understand the table structure
+	const tableMap = TableMap.get(tableNode);
+	const columnCount = tableMap.width;
+
+	if (columnCount === 0) return tr;
+
+	// Calculate total width from existing column widths
+	const currColwidths = getColwidths({
+		tableNode,
+		cellMinWidth,
+		columnCount,
+	});
+
+	if (!currColwidths.length) return tr;
+
+	const currWidth = currColwidths.reduce((sum, width) => sum + width, 0);
+
+	let totalWidth = currWidth;
+	if (useFullWidth || currWidth > maxWidth) {
+		totalWidth = maxWidth;
+	}
+
+	let colwidths = Array(columnCount).fill(0);
+
+	if (setEqualColumns) {
+		// Calculate equal width for each column
+		const equalColumnWidth = totalWidth / columnCount;
+		// Create an array of equal column widths
+		colwidths = colwidths.map(() => equalColumnWidth);
+	} else {
+		// Adjust column widths based on the new total width
+		colwidths = currColwidths.map((width) => (width / currWidth) * totalWidth);
+	}
+
+	// Now update all cells in the table to use the appropriate colwidth
+	// We need to traverse the entire table structure
+	let rowPos = tablePos + 1; // Start at the first row
+
+	// Process each row in the table
+	tableNode.forEach((row, rowOffset) => {
+		if (row.type.name !== "tableRow") return;
+
+		let cellPos = rowPos + 1; // Start at the first cell in this row
+		let colIndex = 0;
+
+		// Process each cell in the row
+		row.forEach((cell) => {
+			const colspan = cell.attrs.colspan || 1;
+
+			// For cells that span multiple columns, we need to sum the widths
+			const cellColwidths = colwidths.slice(colIndex, colIndex + colspan);
+
+			transaction = transaction.setNodeMarkup(cellPos, null, {
+				...cell.attrs,
+				colwidth: cellColwidths,
+			});
+
+			// Move column index forward by the colspan
+			colIndex += colspan;
+
+			// Move to the next cell position
+			cellPos += cell.nodeSize;
+		});
+
+		// Move to the next row position
+		rowPos += row.nodeSize;
+	});
+
+	return transaction;
+}
+
+// helper that returns all found values of a given cell attribute
+// this includes undefined values (these can be mapped to their defaults, ie vertical align: top)
+
+function getCellAttributes(editor, attributeName) {
+	const selectedCells = findCellsInSelection(editor.state);
+	const foundValues = selectedCells.reduce((acc, cell) => {
+		const newVal = cell.attrs[attributeName];
+		if (acc.indexOf(newVal) > -1) return acc;
+		return [...acc, newVal];
+	}, []);
+	return foundValues;
+}
+
+/* summarises the alignments in the currently selected cells, accounts for unstyled cells */
+export function getCellAlignment(editor) {
+	const alignments = getCellAttributes(editor, "verticalAlign");
+	// return value may contain falsey values, which equate to 'top'- map them, and rmeove any duplicates
+	const mappedAlignments = alignments
+		.map((v) => v || CELL_VALIGN_TOP)
+		.filter((v, index, all) => all.indexOf(v) === index);
+	if (mappedAlignments.length === 1) return mappedAlignments[0];
+	return CELL_VALIGN_MIXED;
+}
+
+/**
+ * Extension that adds equal column width functionality to tables
+ */
+export const TableExtended = TableBase.extend({
+	addOptions() {
+		return {
+			...this.parent?.(),
+			cellMinWidth: CELL_MIN_WIDTH,
+			lastColumnResizable: true,
+			resizable: true,
+		};
+	},
+	addCommands() {
+		return {
+			...this.parent?.(),
+			/**
+			 * Set equal widths for all columns in the current table based on the current total width
+			 */
+			setTableEqualColumnWidths:
+				() =>
+				({ state, tr, dispatch, editor }) => {
+					const table = findTable(state);
+
+					if (!table) return false;
+
+					const tableDom = editor.editorView.domAtPos(table.pos);
+
+					const newTr = setColumnWidths({
+						tr,
+						table,
+						setEqualColumns: true,
+						maxWidth: getDomWidth(tableDom.node),
+						cellMinWidth: this.options.cellMinWidth,
+					});
+
+					if (dispatch) {
+						dispatch(newTr);
+					}
+
+					return true;
+				},
+			setFullWidth:
+				() =>
+				({ state, tr, dispatch, editor }) => {
+					const table = findTable(state);
+
+					if (!table) return false;
+
+					const tableDom = editor.editorView.domAtPos(table.pos);
+
+					const newTr = setColumnWidths({
+						tr,
+						table,
+						useFullWidth: true,
+						maxWidth: getDomWidth(tableDom.node),
+						cellMinWidth: this.options.cellMinWidth,
+					});
+
+					if (dispatch) {
+						dispatch(newTr);
+					}
+
+					return true;
+				},
+			cleanWidth:
+				() =>
+				({ state, tr, dispatch, editor }) => {
+					const table = findTable(state);
+
+					if (!table) return false;
+
+					const tableDom = editor.editorView.domAtPos(table.pos);
+					const tableWidth = getTableWidth({
+						tableNode: table.node,
+						cellMinWidth: this.options.cellMinWidth,
+					});
+
+					const availableWidth = getDomWidth(tableDom.node);
+
+					if (tableWidth <= availableWidth) {
+						dispatch(tr);
+						return true;
+					}
+
+					const newTr = setColumnWidths({
+						tr,
+						table,
+						maxWidth: availableWidth,
+						cellMinWidth: this.options.cellMinWidth,
+					});
+
+					if (dispatch) {
+						dispatch(newTr);
+					}
+
+					return true;
+				},
+			applyStyleToCells:
+				(style) =>
+				({ tr, state, dispatch }) => {
+					const cells = findCellsInSelection(state);
+
+					if (cells.length === 0) return false;
+
+					const newTr = tr.setNodes(
+						cells.map(({ node }) => ({
+							node,
+							attrs: {
+								...node.attrs,
+								style: style,
+							},
+						})),
+					);
+
+					if (dispatch) {
+						dispatch(newTr);
+					}
+
+					return true;
+				},
+			/**
+			 * Find the current table if the selection is inside one
+			 */
+			findTable:
+				() =>
+				({ state }) => {
+					return findTable(state);
+				},
+
+			/**
+			 * Find all cells in the current selection
+			 */
+			findCellsInSelection:
+				() =>
+				({ state }) => {
+					return findCellsInSelection(state);
+				},
+		};
+	},
+});

package/components/tiptap/TableCells.js

@@ -0,0 +1,99 @@
+import { TableCell as TableCellBase } from "@tiptap/extension-table";
+import { TableHeader as TableHeaderBase } from "@tiptap/extension-table";
+import { hexIsDark } from "../../utils/color-utils";
+
+const tableCellAttributes = {
+	colwidth: {
+		default: null,
+		parseHTML: (element) => {
+			const colwidth = element.getAttribute("colwidth");
+			const width = element.getAttribute("width");
+
+			if (!colwidth && width) {
+				return null;
+			}
+
+			const value = colwidth
+				? colwidth.split(",").map((width) => parseInt(width, 10))
+				: null;
+
+			return value;
+		},
+		renderHTML: ({ width, colwidth }) => {
+			if (!colwidth && width) {
+				return { width, colwidth: null };
+			}
+
+			return {
+				colwidth: colwidth ? colwidth.join(",") : null,
+				width: null,
+			};
+		},
+	},
+	// Strategy Recs can receive tables, but the width might be percentages, and will
+	// be saved to width instead of colwidth. This allows it to be passed straight through.
+	width: {
+		default: null,
+		parseHTML: (element) => {
+			return element.getAttribute("width") || null;
+		},
+		renderHTML: ({ width, colwidth }) => {
+			if (colwidth) return { colwidth, width: null };
+
+			return {
+				width,
+			};
+		},
+	},
+	backgroundColor: {
+		default: null,
+		parseHTML: (element) => element.getAttribute("data-background-color"),
+		renderHTML: ({ backgroundColor }) => {
+			const attrs = {
+				"data-background-color": backgroundColor,
+			};
+
+			if (backgroundColor) {
+				attrs.style = `background-color: ${backgroundColor};`;
+				attrs.class = hexIsDark(backgroundColor)
+					? "tiptap-table-cell-dark"
+					: "tiptap-table-cell-light";
+			}
+
+			return attrs;
+		},
+	},
+	verticalAlign: {
+		default: null,
+		parseHTML: (element) => element.getAttribute("data-vertical-align"),
+		renderHTML: ({ verticalAlign }) => {
+			const attrs = {
+				"data-vertical-align": verticalAlign,
+			};
+
+			if (verticalAlign) {
+				attrs.style = `vertical-align: ${verticalAlign};`;
+			}
+
+			return attrs;
+		},
+	},
+};
+
+export const TableCell = TableCellBase.extend({
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			...tableCellAttributes,
+		};
+	},
+});
+
+export const TableHeader = TableHeaderBase.extend({
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			...tableCellAttributes,
+		};
+	},
+});

package/components/utils.js

@@ -0,0 +1,84 @@
+export function getContentActualDimensions() {
+	const slideshow = document.getElementById("slideshow");
+	const slideshowBounds = slideshow.getBoundingClientRect();
+	return { width: slideshowBounds.width, height: slideshowBounds.height };
+}
+
+export function getContentDimensions() {
+	const slideshow = document.getElementById("slideshow");
+	const slideshowStyle = slideshow.style;
+
+	const slideshowWidth = slideshowStyle
+		.getPropertyValue("width")
+		?.replace("px", "");
+
+	const slideshowHeight = slideshowStyle
+		.getPropertyValue("height")
+		?.replace("px", "");
+
+	return {
+		width: slideshowWidth ? parseInt(slideshowWidth, 10) : null,
+		height: slideshowHeight ? parseInt(slideshowHeight, 10) : null,
+	};
+}
+
+export function getContentRatio() {
+	const { width: actualWidth } = getContentActualDimensions();
+	const { width: rawWidth } = getContentDimensions();
+
+	return rawWidth && actualWidth ? actualWidth / rawWidth : 1;
+}
+
+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/generate-toolbar-configuration.js

@@ -0,0 +1,130 @@
+import {
+	DEFAULT_TOOLBAR_GROUPS,
+	PRIMARY_TOOLBAR_IDS,
+	TABLE_TOOLBAR_IDS,
+} from "../constants";
+
+const generateGroup = (id, { label = null, items = [], options = {} } = {}) => {
+	if (items.length === 0) return null;
+
+	return {
+		id,
+		label,
+		items: items.map((generator) => generator(options)),
+	};
+};
+
+/**
+ * List of baked-in toolbar ids,
+ * these cannot be used when creating custom options.
+ */
+const reservedIds = [
+	...Object.values(PRIMARY_TOOLBAR_IDS),
+	...Object.values(TABLE_TOOLBAR_IDS),
+];
+
+/**
+ * Custom options (aka. items) can either be a function that returns an item object,
+ * of the final object. Supplying a function allows for options like 'textStyles' and 'colors'
+ * to be passed to the user when generating the option.
+ *
+ * This function tests the validity of the supplied item, and returns a function
+ * that can be used by the "generateGroup" function to create its items.
+ *
+ * @param {Object|Function} item
+ * @returns {Function} - function that returns an item object.
+ */
+const getCustomGenerator = (item, options = {}) => {
+	if (typeof item !== "function" && !(item.constructor === Object)) {
+		throw new Error(
+			"An custom toolbar option must be a function or an object.",
+		);
+	}
+
+	let testItem = item;
+
+	if (typeof item === "function") {
+		testItem = item(options);
+	}
+
+	const { id, command, renderItem } = testItem;
+
+	if (!id) {
+		throw new Error("An id is required when creating a custom toolbar option.");
+	}
+
+	if (reservedIds.includes(id)) {
+		throw new Error(
+			`Custom id '${id}' is not allowed as it is used by the default toolbar.\nReserved ids: ${reservedIds.join(
+				", ",
+			)}.`,
+		);
+	}
+
+	if (typeof command !== "function" && typeof renderItem !== "function") {
+		throw new Error(
+			"When creating a custom toolbar option, a command or renderItem function must be provided.",
+		);
+	}
+
+	return typeof item === "function" ? item : () => item;
+};
+
+export const generateToolbarConfiguration = ({
+	toolbar = [],
+	itemGenerators = {},
+	textStyles = [],
+	colors = [],
+} = {}) => {
+	const options = {
+		textStyles,
+		colors,
+	};
+
+	const generateItem = (item) => {
+		if (typeof item === "string" && itemGenerators[item]) {
+			return itemGenerators[item];
+		}
+
+		// Assumes custom item has been supplied
+		return getCustomGenerator(item, options);
+	};
+
+	return toolbar
+		.map((group) => {
+			if (typeof group === "string") {
+				if (!DEFAULT_TOOLBAR_GROUPS[group]) {
+					throw new Error(
+						`Requested default group '${group}' is not found. Available groups: ${Object.keys(
+							DEFAULT_TOOLBAR_GROUPS,
+						).join(", ")}`,
+					);
+				}
+
+				const { label, items = [] } = DEFAULT_TOOLBAR_GROUPS[group];
+				return generateGroup(group, {
+					label,
+					items: items.map(generateItem).filter(Boolean),
+					options,
+				});
+			}
+
+			// Is a list of items instead of a pre-defined group
+			if (Array.isArray(group)) {
+				const id = group.join("_");
+				return generateGroup(id, {
+					items: group.map(generateItem).filter(Boolean),
+					options,
+				});
+			}
+
+			throw new Error(
+				"Toolbar options must be either an existing id (supplied as string) or an array of items. Received: " +
+					JSON.stringify(group) +
+					" of type " +
+					typeof group +
+					".",
+			);
+		})
+		.filter(Boolean);
+};