@livepreso/react-plugin-textfield 0.6.4 → 1.0.0

package/CHANGELOG.json

@@ -1,6 +1,40 @@
 {
   "name": "@livepreso/react-plugin-textfield",
   "entries": [
+    {
+      "version": "1.0.0",
+      "tag": "@livepreso/react-plugin-textfield_v1.0.0",
+      "date": "Tue, 03 Nov 2026 22:02:25 GMT",
+      "comments": {
+        "minor": [
+          {
+            "comment": "Adds text actions, so the deck interface can read and change a text field."
+          },
+          {
+            "comment": "The toolbar a text field declares decides what the field permits, and the build reads it."
+          },
+          {
+            "comment": "A heading field permits the tag it is drawn as, so a person's edit to an <h4> field is no longer refused."
+          }
+        ],
+        "major": [
+          {
+            "comment": "ManagedTextField stores one value per placement of a slide by default. The scope prop set to \"deck\" shares one value instead."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@livepreso/content-react\" to `3.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@livepreso/webpack-deck\" to `4.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@livepreso/react-plugin-ui\" to `2.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "0.6.4",
       "tag": "@livepreso/react-plugin-textfield_v0.6.4",

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 # Change Log - @livepreso/react-plugin-textfield
 
-This log was last generated on Tue, 27 Oct 2026 00:36:52 GMT and should not be manually modified.
+This log was last generated on Tue, 03 Nov 2026 22:02:25 GMT and should not be manually modified.
+
+## 1.0.0
+Tue, 03 Nov 2026 22:02:25 GMT
+
+### Breaking changes
+
+- ManagedTextField stores one value per placement of a slide by default. The scope prop set to "deck" shares one value instead.
+
+### Minor changes
+
+- Adds text actions, so the deck interface can read and change a text field.
+- The toolbar a text field declares decides what the field permits, and the build reads it.
+- A heading field permits the tag it is drawn as, so a person's edit to an <h4> field is no longer refused.
 
 ## 0.6.4
 Tue, 27 Oct 2026 00:36:52 GMT

package/babel.config.js

@@ -0,0 +1,7 @@
+// Only the test run uses this. A deck's build reads the babel config at the deck root.
+module.exports = {
+	presets: [
+		["@babel/preset-env", { targets: { node: "current" } }],
+		["@babel/preset-react", { runtime: "automatic" }],
+	],
+};

package/components/BubbleMenu.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import { BubbleMenuView } from "@tiptap/extension-bubble-menu";
 import { useCurrentEditor } from "@tiptap/react";
@@ -17,6 +17,8 @@ class UnscaledBubbleMenuView extends BubbleMenuView {
 	constructor(options) {
 		super(options);
 
+		this.onVisibilityChange = options.onVisibilityChange;
+
 		// The presenter rescales on container resize without a window resize event.
 		window.Bridge?.Event?.on("resize", this.resizeHandler, "deck");
 
@@ -76,7 +78,8 @@ class UnscaledBubbleMenuView extends BubbleMenuView {
 		// A toolbar of this editor, or a popover/select opened from one.
 		if (
 			focused instanceof Element &&
-			(focused.closest(`.${style.bubbleMenu}`) ||
+			// A production class name can contain `=`, which is invalid unescaped.
+			(focused.closest(`.${CSS.escape(style.bubbleMenu)}`) ||
 				focused.closest(POPPER_CONTENT_SELECTOR))
 		) {
 			return;
@@ -101,6 +104,7 @@ class UnscaledBubbleMenuView extends BubbleMenuView {
 		this.element.parentNode?.appendChild(this.element);
 
 		this.isVisible = true;
+		this.onVisibilityChange?.(true);
 	}
 
 	hide() {
@@ -111,6 +115,7 @@ class UnscaledBubbleMenuView extends BubbleMenuView {
 		this.element.style.visibility = "hidden";
 		this.element.style.opacity = "0";
 		this.isVisible = false;
+		this.onVisibilityChange?.(false);
 	}
 
 	updatePosition() {
@@ -185,7 +190,13 @@ export const UnscaledBubbleMenuPlugin = (options) => {
 			typeof options.pluginKey === "string"
 				? new PluginKey(options.pluginKey)
 				: options.pluginKey,
-		view: (view) => new UnscaledBubbleMenuView({ view, ...options }),
+		view: (view) => {
+			const menu = new UnscaledBubbleMenuView({ view, ...options });
+
+			options.onMenuCreated?.(menu);
+
+			return menu;
+		},
 	});
 };
 
@@ -200,10 +211,23 @@ export const BubbleMenu = ({
 	...restProps
 }) => {
 	const menuEl = useRef();
+	const menu = useRef(null);
+
+	// Only the focused field shows a toolbar, so its few hundred nodes wait until then.
+	const [isShown, setIsShown] = useState(false);
 
 	const { entered } = useTransitions();
 	const { editor: currentEditor } = useCurrentEditor();
 
+	useEffect(() => {
+		if (!isShown) {
+			return;
+		}
+
+		// The toolbar had no size until now, so the placement taken on show was wrong.
+		menu.current?.updatePosition();
+	}, [isShown]);
+
 	useEffect(() => {
 		const bubbleMenuElement = menuEl.current;
 
@@ -236,12 +260,17 @@ export const BubbleMenu = ({
 			pluginKey,
 			shouldShow,
 			options,
+			onVisibilityChange: setIsShown,
+			onMenuCreated: (created) => {
+				menu.current = created;
+			},
 		});
 
 		attachToEditor.registerPlugin(plugin);
 
 		return () => {
 			attachToEditor.unregisterPlugin(pluginKey);
+			menu.current = null;
 		};
 	}, [entered, editor?.isDestroyed]);
 
@@ -257,7 +286,7 @@ export const BubbleMenu = ({
 				className={`${style.bubbleMenu} interactive`}
 				{...restProps}
 			>
-				{children}
+				{isShown ? children : null}
 			</div>
 		</OverlayPortal>
 	);

package/components/LinkEditDialog.js

@@ -73,7 +73,9 @@ const LinkEditDialog = ({
 							value={urlInput}
 							onChange={(e) => {
 								let value = e.target.value;
-								if (!value.startsWith("http")) value = `https://${value}`;
+								if (!value.startsWith("http")) {
+									value = `https://${value}`;
+								}
 								setUrlInput(value);
 							}}
 							onKeyDown={checkForEnter}

package/components/editor-toolbars/SubMenu.js

@@ -34,7 +34,9 @@ export function SubMenu({
 	const closeTimerRef = useRef(null);
 
 	const cancelClose = useCallback(() => {
-		if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);
+		if (closeTimerRef.current) {
+			window.clearTimeout(closeTimerRef.current);
+		}
 		closeTimerRef.current = null;
 	}, []);
 

package/components/tiptap/Table.js

@@ -54,7 +54,9 @@ export function findCellsInSelection(state) {
 	if (selection instanceof CellSelection) {
 		const table = findTable(state);
 
-		if (!table) return result;
+		if (!table) {
+			return result;
+		}
 		const cells = [];
 		selection.forEachCell((node) => {
 			cells.push(node);
@@ -88,7 +90,9 @@ function getColwidths({
 	let hasColwidth = false;
 	// Get the first row to determine the number of columns
 	const firstRow = tableNode.firstChild;
-	if (!firstRow) return [];
+	if (!firstRow) {
+		return [];
+	}
 
 	let colwidths = [];
 	// Iterate through cells in the first row to calculate total width
@@ -99,7 +103,9 @@ function getColwidths({
 			colwidths.push(
 				cell.attrs.colwidth.reduce((sum, width) => {
 					// colwidth 0, return min cell width
-					if (!width) return sum + cellMinWidth;
+					if (!width) {
+						return sum + cellMinWidth;
+					}
 					return sum + width;
 				}, 0),
 			);
@@ -133,7 +139,9 @@ function getTableWidth({ tableNode, cellMinWidth = CELL_MIN_WIDTH }) {
 	const tableMap = TableMap.get(tableNode);
 	const columnCount = tableMap.width;
 
-	if (columnCount === 0) return 0;
+	if (columnCount === 0) {
+		return 0;
+	}
 
 	// Calculate total width from existing column widths
 	const currColwidths = getColwidths({
@@ -172,7 +180,9 @@ function setColumnWidths({
 	const tableMap = TableMap.get(tableNode);
 	const columnCount = tableMap.width;
 
-	if (columnCount === 0) return tr;
+	if (columnCount === 0) {
+		return tr;
+	}
 
 	// Calculate total width from existing column widths
 	const currColwidths = getColwidths({
@@ -181,7 +191,9 @@ function setColumnWidths({
 		columnCount,
 	});
 
-	if (!currColwidths.length) return tr;
+	if (!currColwidths.length) {
+		return tr;
+	}
 
 	const currWidth = currColwidths.reduce((sum, width) => sum + width, 0);
 
@@ -208,7 +220,9 @@ function setColumnWidths({
 
 	// Process each row in the table
 	tableNode.forEach((row) => {
-		if (row.type.name !== "tableRow") return;
+		if (row.type.name !== "tableRow") {
+			return;
+		}
 
 		let cellPos = rowPos + 1; // Start at the first cell in this row
 		let colIndex = 0;
@@ -246,7 +260,9 @@ 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;
+		if (acc.indexOf(newVal) > -1) {
+			return acc;
+		}
 		return [...acc, newVal];
 	}, []);
 	return foundValues;
@@ -259,7 +275,9 @@ export function getCellAlignment(editor) {
 	const mappedAlignments = alignments
 		.map((v) => v || CELL_VALIGN_TOP)
 		.filter((v, index, all) => all.indexOf(v) === index);
-	if (mappedAlignments.length === 1) return mappedAlignments[0];
+	if (mappedAlignments.length === 1) {
+		return mappedAlignments[0];
+	}
 	return CELL_VALIGN_MIXED;
 }
 
@@ -271,7 +289,9 @@ export function getCellAlignment(editor) {
 export function getCellBorderSides(editor) {
 	const values = getCellAttributes(editor, "borderSides");
 	const mappedValues = values.map((v) => v || BORDER_SIDES);
-	if (mappedValues.length === 0) return BORDER_SIDES;
+	if (mappedValues.length === 0) {
+		return BORDER_SIDES;
+	}
 
 	return BORDER_SIDES.filter((side) =>
 		mappedValues.every((sides) => sides.includes(side)),
@@ -320,7 +340,9 @@ class TableViewWithAttrs extends TableView {
 
 	update(node) {
 		const updated = super.update(node);
-		if (updated) this.syncAttrs(node);
+		if (updated) {
+			this.syncAttrs(node);
+		}
 		return updated;
 	}
 
@@ -330,7 +352,9 @@ class TableViewWithAttrs extends TableView {
 		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 (key === "style") {
+				return;
+			}
 
 			if (value === null || value === undefined) {
 				this.table.removeAttribute(key);
@@ -395,7 +419,9 @@ export const TableExtended = TableBase.extend({
 				({ state, tr, dispatch, editor }) => {
 					const table = findTable(state);
 
-					if (!table) return false;
+					if (!table) {
+						return false;
+					}
 
 					const tableDom = editor.editorView.domAtPos(table.pos);
 
@@ -423,7 +449,9 @@ export const TableExtended = TableBase.extend({
 				({ state, tr, dispatch, editor }) => {
 					const table = findTable(state);
 
-					if (!table) return false;
+					if (!table) {
+						return false;
+					}
 
 					const tableDom = editor.editorView.domAtPos(table.pos);
 
@@ -452,7 +480,9 @@ export const TableExtended = TableBase.extend({
 				({ state, tr, dispatch }) => {
 					const table = findTable(state);
 
-					if (!table) return false;
+					if (!table) {
+						return false;
+					}
 
 					if (dispatch) {
 						dispatch(
@@ -470,7 +500,9 @@ export const TableExtended = TableBase.extend({
 				({ state, tr, dispatch, editor }) => {
 					const table = findTable(state);
 
-					if (!table) return false;
+					if (!table) {
+						return false;
+					}
 
 					const tableDom = editor.editorView.domAtPos(table.pos);
 					const tableWidth = getTableWidth({
@@ -506,7 +538,9 @@ export const TableExtended = TableBase.extend({
 				({ state, tr, dispatch }) => {
 					const table = findTable(state);
 
-					if (!table) return false;
+					if (!table) {
+						return false;
+					}
 
 					if (dispatch) {
 						dispatch(
@@ -524,7 +558,9 @@ export const TableExtended = TableBase.extend({
 				({ tr, state, dispatch }) => {
 					const cells = findCellsInSelection(state);
 
-					if (cells.length === 0) return false;
+					if (cells.length === 0) {
+						return false;
+					}
 
 					const newTr = tr.setNodes(
 						cells.map(({ node }) => ({

package/components/tiptap/TableCells.js

@@ -39,7 +39,9 @@ const tableCellAttributes = {
 			return element.getAttribute("width") || null;
 		},
 		renderHTML: ({ width, colwidth }) => {
-			if (colwidth) return { colwidth, width: null };
+			if (colwidth) {
+				return { colwidth, width: null };
+			}
 
 			return {
 				width,
@@ -88,13 +90,19 @@ const tableCellAttributes = {
 		default: null,
 		parseHTML: (element) => {
 			const value = element.getAttribute("data-border-sides");
-			if (value === null) return null;
+			if (value === null) {
+				return null;
+			}
 			// `""` is only produced by builds predating BORDER_SIDES_NONE.
-			if (value === BORDER_SIDES_NONE || value === "") return [];
+			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 };
+			if (!borderSides) {
+				return { "data-border-sides": null };
+			}
 
 			const hiddenSides = BORDER_SIDES.filter(
 				(side) => !borderSides.includes(side),

package/configs/table-toolbar-configuration.js

@@ -198,7 +198,9 @@ const cellValignPicker = () => ({
 	items: [{ id: "vertical-align" }],
 	value: (editor) => {
 		const cells = findCellsInSelection(editor.state);
-		if (!cells) return null;
+		if (!cells) {
+			return null;
+		}
 		return cells[0]?.attrs?.verticalAlign;
 	},
 	renderItem: (item, { editor, value } = {}) => (

package/configs/toolbar-configuration.js

@@ -33,7 +33,9 @@ function generateTextStyleTest(textStyles) {
 		);
 		const match = sortedTextStyles.find((ts) => {
 			const level = Number(ts.block);
-			if (level > 0) return editor.isActive("heading", { level });
+			if (level > 0) {
+				return editor.isActive("heading", { level });
+			}
 			return editor.isActive("paragraph");
 		});
 		return match?.block;
@@ -74,8 +76,9 @@ const textStyleSelect = ({ textStyles = [] } = {}) => ({
 
 		const onChange = (value) => {
 			const level = Number(value);
-			if (!value || level === 0)
+			if (!value || level === 0) {
 				return editor.chain().focus().setParagraph().run();
+			}
 
 			return editor
 				.chain()
@@ -301,7 +304,9 @@ const insertTokenButton = ({ tokens = [] }) =>
 
 					// Add a space before the token trigger if necessary.
 					// Without a leading space the token functionality won't run.
-					if (prevPos && editor.view.state.doc.nodeAt(prevPos)) {
+					// Selecting the whole field starts it at 0, and prosemirror
+					// throws on the position before that.
+					if (prevPos > 0 && editor.view.state.doc.nodeAt(prevPos)) {
 						const charBefore = editor.view.state.doc.textBetween(
 							prevPos,
 							$from.pos,

package/configs/toolbar-configuration.spec.js

@@ -0,0 +1,70 @@
+import { PRIMARY_TOOLBAR_IDS } from "../constants";
+import { primaryItemGenerators } from "./toolbar-configuration";
+
+function createEditor(
+	pos,
+	{ nodeAt = () => ({}), textBetween = () => "x" } = {},
+) {
+	const inserted = [];
+	const chain = {
+		focus: () => chain,
+		insertContent: (content) => {
+			inserted.push(content);
+			return chain;
+		},
+		run: () => true,
+	};
+
+	return {
+		inserted,
+		asked: [],
+		view: {
+			state: {
+				selection: { $from: { pos } },
+				doc: {
+					nodeAt(at) {
+						this.asked.push(at);
+						return nodeAt(at);
+					},
+					textBetween,
+					asked: [],
+				},
+			},
+		},
+		chain: () => chain,
+	};
+}
+
+function insertToken(editor) {
+	const button = primaryItemGenerators[PRIMARY_TOOLBAR_IDS.INSERT_TOKEN]({
+		tokens: [{ id: "date", label: "Date" }],
+	});
+
+	return button.command(editor);
+}
+
+describe("insertTokenButton", () => {
+	it("should insert the trigger alone after a space", () => {
+		const editor = createEditor(5, { textBetween: () => " " });
+
+		insertToken(editor);
+
+		expect(editor.inserted).toEqual(["@"]);
+	});
+
+	it("should lead with a space where another character precedes it", () => {
+		const editor = createEditor(5, { textBetween: () => "t" });
+
+		insertToken(editor);
+
+		expect(editor.inserted).toEqual([" @"]);
+	});
+
+	it("should insert the trigger with the whole field selected", () => {
+		const editor = createEditor(0);
+
+		expect(() => insertToken(editor)).not.toThrow();
+		expect(editor.view.state.doc.asked).toEqual([]);
+		expect(editor.inserted).toEqual(["@"]);
+	});
+});