@livepreso/react-plugin-textfield 0.5.2 → 0.6.0

package/.rush/temp/shrinkwrap-deps.json

@@ -1,5 +1,5 @@
 {
-  "../../content/react-plugin-textfield": "../../content/react-plugin-textfield:PTuiaNrHYDSJw/Ha/cCGhwsG802uyQtRQiJefw08ufY=:",
+  "../../content/react-plugin-textfield": "../../content/react-plugin-textfield:WYj65vjFgDMTKI64ejk+PEiCQkGdzJw91G8OiyO6j9k=:",
   "@babel/code-frame@7.29.0": "@babel/code-frame@7.29.0:kW1E61/G1tPYp8ZHZtSkSne0DKMWSVn35WiB3NdzlCw=:",
   "@babel/compat-data@7.29.0": "@babel/compat-data@7.29.0:a57bU0z+Tu3qDgKTY6g83xpry+Ltpm2tGQHpJnQeNyU=:",
   "@babel/core@7.29.0": "@babel/core@7.29.0:q5im1Hft4sBHQef0WtCXclby5g4txy9LJX/q/yC0g5g=:",
@@ -173,7 +173,7 @@
   "eslint-scope@8.4.0": "eslint-scope@8.4.0:8sCuk/6sg3/iCXu4ikInhuUYyvcQoTXETHdBY6JCzr0=:",
   "eslint-visitor-keys@3.4.3": "eslint-visitor-keys@3.4.3:JgR2rf9Jpzva8lFrKE+5yhxLwgC8qNXtm9LsuSBeAT8=:",
   "eslint-visitor-keys@4.2.1": "eslint-visitor-keys@4.2.1:uyQNsuDcPZL1cJ29uclbt/ITeoMox36b0gbaWL8EB2E=:",
-  "eslint@9.15.0(jiti@1.21.7)": "eslint@9.15.0(jiti@1.21.7):BBMkLm2PafjLl1mwKS36oeb1WbB2SxRLnq5E+fRoC04=:",
+  "eslint@9.15.0(jiti@1.21.7)": "eslint@9.15.0(jiti@1.21.7):5s8tqOQH56eedeB7EmuDjwdx9JjZeyXi4IS97WDGhbA=:",
   "espree@10.4.0": "espree@10.4.0:NLXs2uyUi7cK0j1u0OxWFDO6zYcblsb73pCi4SupIOE=:",
   "esquery@1.7.0": "esquery@1.7.0:7lTtVBqirWgWzvUR2UO+6Vgzeyg40AnBbmtPEJHSYnI=:",
   "esrecurse@4.3.0": "esrecurse@4.3.0:Uyo8CNm+VUgeJSS5C3ZgOky7Jzoy9NqvDpoJmqgzC1s=:",

package/CHANGELOG.json

@@ -1,6 +1,26 @@
 {
   "name": "@livepreso/react-plugin-textfield",
   "entries": [
+    {
+      "version": "0.6.0",
+      "tag": "@livepreso/react-plugin-textfield_v0.6.0",
+      "date": "Thu, 17 Sep 2026 01:30:15 GMT",
+      "comments": {
+        "minor": [
+          {
+            "comment": "Refactor to use react-plugin-ui for base components. New table editing features: border selection, density (cell padding)."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@livepreso/content-react\" to `2.3.1`"
+          },
+          {
+            "comment": "Updating dependency \"@livepreso/react-plugin-ui\" to `1.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "0.5.2",
       "tag": "@livepreso/react-plugin-textfield_v0.5.2",

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Change Log - @livepreso/react-plugin-textfield
 
-This log was last generated on Tue, 08 Sep 2026 00:30:21 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Sep 2026 01:30:15 GMT and should not be manually modified.
+
+## 0.6.0
+Thu, 17 Sep 2026 01:30:15 GMT
+
+### Minor changes
+
+- Refactor to use react-plugin-ui for base components. New table editing features: border selection, density (cell padding).
 
 ## 0.5.2
 Tue, 08 Sep 2026 00:30:21 GMT

package/components/BorderEdgeToggle.js

@@ -0,0 +1,72 @@
+import React from "react";
+
+import icons from "@livepreso/react-plugin-ui/icons";
+import { Tooltip } from "radix-ui";
+import {
+	ToolbarRoot,
+	ToolbarToggleGroup,
+} from "@livepreso/react-plugin-ui/toolbar";
+
+/**
+ * A component that renders a toggle group for enabling/disabling individual
+ * border edges on a table cell.
+ *
+ * @param {Object} props - The component props
+ * @param {string} props.id - The unique identifier for the toggle group
+ * @param {string} props.className - CSS class name to apply to the toolbar
+ * @param {Function} props.onChange - Callback triggered with the full set of active edges when the selection changes
+ * @param {string[]} props.value - The currently active border edges
+ * @returns {React.Element} A toolbar component containing border edge toggle options
+ */
+export function BorderEdgeToggle({
+	id,
+	className,
+	onChange = () => {},
+	value,
+}) {
+	return (
+		<Tooltip.Provider delayDuration={800} skipDelayDuration={500}>
+			<ToolbarRoot className={className}>
+				<ToolbarToggleGroup
+					key={id}
+					label="Border"
+					type="multiple"
+					value={value}
+					options={[
+						{
+							id: "border-top",
+							tooltip: "Top border",
+							label: "Top",
+							value: "top",
+							icon: <icons.BorderTop />,
+						},
+						{
+							id: "border-right",
+							tooltip: "Right border",
+							label: "Right",
+							value: "right",
+							icon: <icons.BorderRight />,
+						},
+						{
+							id: "border-bottom",
+							tooltip: "Bottom border",
+							label: "Bottom",
+							value: "bottom",
+							icon: <icons.BorderBottom />,
+						},
+						{
+							id: "border-left",
+							tooltip: "Left border",
+							label: "Left",
+							value: "left",
+							icon: <icons.BorderLeft />,
+						},
+					]}
+					onValueChange={(value) => {
+						onChange(value);
+					}}
+				/>
+			</ToolbarRoot>
+		</Tooltip.Provider>
+	);
+}

package/components/BubbleMenu.js

@@ -6,19 +6,111 @@ import { computePosition } from "@floating-ui/react-dom";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 
 import { OverlayPortal, useTransitions } from "@livepreso/content-react";
+import { getTestRect } from "@livepreso/react-plugin-ui/floating-menu";
 import style from "./BubbleMenu.module.scss";
 import { EDITABLE_OUTER_SELECTOR } from "../constants";
-import { getTestRect } from "./utils";
+
+// Radix wraps Popover/Select content in this; dialogs and buttons get no wrapper.
+const POPPER_CONTENT_SELECTOR = "[data-radix-popper-content-wrapper]";
 
 class UnscaledBubbleMenuView extends BubbleMenuView {
+	constructor(options) {
+		super(options);
+
+		// The presenter rescales on container resize without a window resize event.
+		window.Bridge?.Event?.on("resize", this.resizeHandler, "deck");
+
+		// Upstream's blur guard checks `element.parentNode`, which for our portaled
+		// menu is the whole overlay — so app chrome counts as toolbar and it never
+		// hides. Re-register with a guard scoped to our own surfaces.
+		this.editor.off("blur", this.blurHandler);
+		this.blurHandler = (payload) => this.handleBlur(payload);
+		this.editor.on("blur", this.blurHandler);
+
+		// Accounts for focus moving to another editor field, by comparing the field
+		// the focus landed in against this one.
+		this.focusInHandler = ({ target }) => {
+			if (!this.isVisible) {
+				return;
+			}
+
+			const field = target?.closest?.(`.${EDITABLE_OUTER_SELECTOR}`);
+			const ownField = this.view.dom.closest(`.${EDITABLE_OUTER_SELECTOR}`);
+
+			if (field && field !== ownField) {
+				this.hide();
+			}
+		};
+
+		this.presenterEl = window.Bridge.UI.overlay.closest("#presenter");
+		this.presenterEl?.addEventListener("focusin", this.focusInHandler);
+
+		// Default scrollTarget is window, but `scroll` doesn't bubble.
+		const scroller = this.view.dom.closest(`.${EDITABLE_OUTER_SELECTOR}`);
+
+		if (scroller) {
+			this.scrollTarget?.removeEventListener("scroll", this.resizeHandler);
+			this.scrollTarget = scroller;
+			this.scrollTarget.addEventListener("scroll", this.resizeHandler);
+		}
+	}
+
+	handleBlur({ event }) {
+		if (this.editor.isDestroyed) {
+			this.destroy();
+			return;
+		}
+
+		if (this.preventHide) {
+			this.preventHide = false;
+			return;
+		}
+
+		const focused = event?.relatedTarget;
+
+		// Focus returned to the editor.
+		if (focused === this.view.dom) {
+			return;
+		}
+
+		// A toolbar of this editor, or a popover/select opened from one.
+		if (
+			focused instanceof Element &&
+			(focused.closest(`.${style.bubbleMenu}`) ||
+				focused.closest(POPPER_CONTENT_SELECTOR))
+		) {
+			return;
+		}
+
+		this.hide();
+	}
+
 	show() {
+		// Prevent element being re-appended when it's already here.
+		if (this.isVisible) {
+			return;
+		}
+
 		this.element.style.visibility = "visible";
 		this.element.style.opacity = "1";
+
+		// Re-attach so the toolbar is the overlay's last child while visible.
+		// Appending to the element's parent instead of `Bridge.UI.overlay` keeps
+		// this a move within one parent. OverlayPortal owns this node, so
+		// re-parenting it would break React's teardown.
+		this.element.parentNode?.appendChild(this.element);
+
+		this.isVisible = true;
 	}
 
 	hide() {
+		if (!this.isVisible) {
+			return;
+		}
+
 		this.element.style.visibility = "hidden";
 		this.element.style.opacity = "0";
+		this.isVisible = false;
 	}
 
 	updatePosition() {
@@ -42,31 +134,26 @@ class UnscaledBubbleMenuView extends BubbleMenuView {
 			const cell = (closestSelector && el.closest(closestSelector)) || dom;
 			const cellRect = cell.getBoundingClientRect();
 
-			// Content most likely appears in a scrollable area that can be masked.
-			// maskSelector gives the opportunity to supply what to use as the the
-			// backup hittest if content goes outside of the bounds.
-			if (maskSelector) {
-				const container = el.closest(maskSelector);
+			// The field is the scroll/clip area by default; maskSelector overrides it
+			// for decks that use a wrapper of their own.
+			const container = maskSelector
+				? el.closest(maskSelector)
+				: el.closest(`.${EDITABLE_OUTER_SELECTOR}`);
 
-				if (!container) {
+			if (!container) {
+				if (maskSelector) {
 					console.warn(
 						`BubbleMenu maskSelector '${maskSelector}' was not found in the DOM.`,
 					);
-					return cellRect;
 				}
 
-				const containerRect = container.getBoundingClientRect();
-				return getTestRect(cellRect, containerRect);
-			}
-
-			// cell has extended beyond visible bounds, use slide article as the reference
-			if (cellRect.top < 0 || cellRect.left < 0) {
-				console.warn(
-					"BubbleMenu content extends beyond visible bounds. Supply a maskSelector to TextField for a fallback hit-test rect.",
-				);
+				return cellRect;
 			}
 
-			return cellRect;
+			// `cellRect` is the cell's full geometry even where an ancestor clips it.
+			// An unclipped rect attaches floating-ui's flip/shift to an off-screen
+			// anchor.
+			return getTestRect(cellRect, container.getBoundingClientRect());
 		};
 
 		const virtualElement = {
@@ -87,7 +174,8 @@ class UnscaledBubbleMenuView extends BubbleMenuView {
 
 	destroy() {
 		super.destroy();
-		window.removeEventListener("resize", this.onResize);
+		window.Bridge?.Event?.off("resize", this.resizeHandler, "deck");
+		this.presenterEl?.removeEventListener("focusin", this.focusInHandler);
 	}
 }
 

package/components/BubbleMenu.module.scss

@@ -4,6 +4,5 @@
 		top: 0;
 		left: 0;
 		width: max-content;
-		// z-index: 9999;
 	}
 }

package/components/InsertTokenDialog.js

@@ -3,7 +3,7 @@ import { Dialog } from "radix-ui";
 import style from "./InsertTokenDialog.module.scss";
 import tokenStyle from "./tiptap/token/Token.module.scss";
 import classNames from "classnames";
-import icons, { Close } from "../icons";
+import icons, { Close } from "@livepreso/react-plugin-ui/icons";
 import { SimpleButton } from "./editor-toolbars/SimpleButton";
 import { TOKEN_TRIGGER_CHAR } from "./tiptap/token/utils";
 

package/components/InsertTokenDialog.module.scss

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

package/components/LinkEditDialog.js

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react";
 import { Dialog } from "radix-ui";
 import style from "./LinkEditDialog.module.scss";
 import classNames from "classnames";
-import { Close } from "../icons";
-import { ToolbarToggle } from "./editor-toolbars/ToolbarToggle";
+import { Close } from "@livepreso/react-plugin-ui/icons";
+import { ToolbarToggle } from "@livepreso/react-plugin-ui/toolbar";
 
 const LinkEditDialog = ({
 	icon,

package/components/LinkEditDialog.module.scss

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

package/components/TableDensityPicker.js

@@ -0,0 +1,48 @@
+import React from "react";
+
+import icons from "@livepreso/react-plugin-ui/icons";
+import { Select } from "@livepreso/react-plugin-ui/select";
+import {
+	TABLE_DENSITY_SPACIOUS,
+	TABLE_DENSITY_NORMAL,
+	TABLE_DENSITY_DENSE,
+} from "./tiptap/Table";
+
+import style from "./TableDensityPicker.module.scss";
+
+const densityIconMap = {
+	[TABLE_DENSITY_SPACIOUS]: icons.DensityLarge,
+	[TABLE_DENSITY_NORMAL]: icons.DensityMedium,
+	[TABLE_DENSITY_DENSE]: icons.DensitySmall,
+};
+
+const densityOptions = [
+	{ label: "Spacious", value: TABLE_DENSITY_SPACIOUS },
+	{ label: "Normal", value: TABLE_DENSITY_NORMAL },
+	{ label: "Dense", value: TABLE_DENSITY_DENSE },
+];
+
+/**
+ * A component that renders an icon reflecting the current table padding
+ * density, alongside a dropdown to change it.
+ *
+ * @param {Object} props - The component props
+ * @param {string} props.value - The currently active density
+ * @param {Function} props.onChange - Callback triggered with the newly selected density
+ * @returns {React.Element} An icon and dropdown for setting table density
+ */
+export function TableDensityPicker({ value, onChange = () => {} }) {
+	const Icon = densityIconMap[value];
+
+	return (
+		<div className={style.row}>
+			{Icon && <Icon />}
+			<Select
+				label="Table density"
+				options={densityOptions}
+				value={value}
+				onValueChange={onChange}
+			/>
+		</div>
+	);
+}

package/components/{color-picker/ColorPicker.module.scss → TableDensityPicker.module.scss}

@@ -1,8 +1,9 @@
 :global(.sp-presenter-overlay) {
-	.options {
+	.row {
 		display: flex;
 		flex-direction: row;
-		flex-wrap: wrap;
-		width: 180px;
+		justify-content: center;
+		align-items: center;
+		gap: 8px;
 	}
 }

package/components/TableToolbar.js

@@ -25,6 +25,10 @@ export function TableToolbar({
 				placement: "bottom-start",
 				closestSelector: "table",
 				maskSelector,
+				// Never flip above the field — that lands on the PrimaryToolbar. With
+				// no room below, shift nudges it up over the table's last rows.
+				flip: false,
+				shift: { crossAxis: true, padding: 8 },
 			}}
 			shouldShow={({ editor }) => {
 				return editor.isFocused && editor.isActive("table");

package/components/VerticalAlignToggle.js

@@ -1,10 +1,11 @@
 import React from "react";
 
-import icons from "../icons";
-import { Toolbar, Tooltip } from "radix-ui";
-import { ToolbarToggleGroup } from "./editor-toolbars/ToolbarToggleGroup";
-import toolbarBaseStyle from "./editor-toolbars/EditorToolbar.module.scss";
-import classNames from "classnames";
+import icons from "@livepreso/react-plugin-ui/icons";
+import { Tooltip } from "radix-ui";
+import {
+	ToolbarRoot,
+	ToolbarToggleGroup,
+} from "@livepreso/react-plugin-ui/toolbar";
 
 /**
  * A component that renders a toggle group for vertical alignment options.
@@ -16,7 +17,6 @@ import classNames from "classnames";
  * @param {string} props.value - The currently selected vertical alignment value
  * @returns {React.Element} A toolbar component containing vertical alignment toggle options
  */
-
 export function VerticalAlignToggle({
 	id,
 	className,
@@ -25,7 +25,7 @@ export function VerticalAlignToggle({
 }) {
 	return (
 		<Tooltip.Provider delayDuration={800} skipDelayDuration={500}>
-			<Toolbar.Root className={classNames(toolbarBaseStyle.root, className)}>
+			<ToolbarRoot className={className}>
 				<ToolbarToggleGroup
 					key={id}
 					label="Vertical alignment"
@@ -59,7 +59,7 @@ export function VerticalAlignToggle({
 					}}
 					defaultValue="top"
 				/>
-			</Toolbar.Root>
+			</ToolbarRoot>
 		</Tooltip.Provider>
 	);
 }

package/components/color-picker/ColorPickerCombo.js

@@ -1,12 +1,12 @@
 import React from "react";
 import classNames from "classnames";
 
-import { ColorPicker } from "./ColorPicker";
-import { Popover } from "../Popover";
+import { ColorPickerBasic } from "@livepreso/react-plugin-ui/color-picker";
+import { Popover } from "@livepreso/react-plugin-ui/popover";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
-import { ToolbarButton } from "../editor-toolbars/ToolbarButton";
+import { ToolbarButton } from "@livepreso/react-plugin-ui/toolbar";
+import toolbarStyle from "@livepreso/react-plugin-ui/toolbar/toolbar.module.scss";
 import { TextColorIcon } from "./TextColorIcon";
-import toolbarStyle from "../editor-toolbars/EditorToolbar.module.scss";
 import style from "./ColorPickerCombo.module.scss";
 
 export function ColorPickerCombo({
@@ -33,7 +33,7 @@ export function ColorPickerCombo({
 				trigger={<ChevronDownIcon disabled={disabled} />}
 				disabled={disabled}
 			>
-				<ColorPicker
+				<ColorPickerBasic
 					colors={colors}
 					// null and empty string may be valid for "no color"
 					value={typeof pickerValue === "undefined" ? value : pickerValue}

package/components/color-picker/ColorPickerCombo.module.scss

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

package/components/editor-toolbars/EditorMenu.js

@@ -60,7 +60,7 @@ export function EditorMenu({
 								}
 
 								if (type === TOOLBAR_COMPONENT_TYPES.SUB) {
-									const { items, renderItem } = itemsProps;
+									const { items, renderItem, keepOpenOnInteract } = itemsProps;
 									const { isEnabled, value } = getState(id, editorState);
 
 									return (
@@ -73,6 +73,7 @@ export function EditorMenu({
 											renderItem={(item) =>
 												renderItem(item, { editor, value, ...states })
 											}
+											keepOpenOnInteract={keepOpenOnInteract}
 										/>
 									);
 								}

package/components/editor-toolbars/EditorMenu.module.scss

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

package/components/editor-toolbars/EditorToolbar.js

@@ -1,13 +1,16 @@
 import React from "react";
 import { Toolbar, Tooltip as TooltipPrimitive } from "radix-ui";
 
-import { Tooltip } from "../Tooltip";
+import {
+	ToolbarButton,
+	ToolbarRoot,
+	ToolbarToggle,
+	ToolbarToggleGroup,
+} from "@livepreso/react-plugin-ui/toolbar";
+import { Tooltip } from "@livepreso/react-plugin-ui/tooltip";
+import { Popover } from "@livepreso/react-plugin-ui/popover";
 import { TOOLBAR_COMPONENT_TYPES } from "../../constants";
-import { Popover } from "../Popover";
 import { getState } from "./utils";
-import { ToolbarButton } from "./ToolbarButton";
-import { ToolbarToggle } from "./ToolbarToggle";
-import { ToolbarToggleGroup } from "./ToolbarToggleGroup";
 import style from "./EditorToolbar.module.scss";
 
 export function EditorToolbar({
@@ -20,7 +23,7 @@ export function EditorToolbar({
 
 	return (
 		<TooltipPrimitive.Provider delayDuration={800} skipDelayDuration={500}>
-			<Toolbar.Root className={style.root} aria-label="Formatting options">
+			<ToolbarRoot aria-label="Formatting options">
 				{configuration.flatMap(({ id: groupId, items = [] }, index) => [
 					index !== 0 && (
 						<Toolbar.Separator
@@ -140,7 +143,7 @@ export function EditorToolbar({
 						})}
 					</div>,
 				])}
-			</Toolbar.Root>
+			</ToolbarRoot>
 		</TooltipPrimitive.Provider>
 	);
 }

package/components/editor-toolbars/EditorToolbar.module.scss

@@ -1,75 +1,18 @@
-@import "../style.module.scss";
+@import "@livepreso/react-plugin-ui/styles/placeholders.module.scss";
 
+// .root, .item, and .toggle-group moved to
+// @livepreso/react-plugin-ui/toolbar (ToolbarRoot/ToolbarButton/
+// ToolbarToggle/ToolbarToggleGroup now own that styling). What's left here is
+// specific to this toolbar's own layout, not to an individual item's look.
 :global(.sp-presenter-overlay) {
-	.root {
-		@extend %root;
-		padding: 6px;
-		// min-width: 100%;
-		// min-width: 0;
-		// min-height: 0;
+	.item-group {
 		display: flex;
-		flex-wrap: wrap;
+		flex-direction: row;
 		align-items: center;
-		row-gap: 8px;
-
-		// Loz: gets rid of the forced height applied to spans
-		// I don't like it...
-		> span {
-			line-height: 0;
-		}
-
-		.item-group {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			height: $item-height;
-		}
-
-		.item {
-			@extend %item;
-			flex: 0 0 auto;
-			height: $item-height;
-			padding: 0 5px;
-			margin: 0 2px;
-			border-radius: 4px;
-			display: inline-flex;
-			align-items: center;
-			justify-content: center;
-
-			&:hover {
-				@extend %hover;
-			}
-
-			&:focus {
-				@extend %focus;
-			}
-
-			&.toggle {
-				&[data-state="on"] {
-					@extend %active;
-				}
-			}
-
-			&[data-disabled],
-			&[disabled] {
-				@extend %disabled;
-			}
-		}
-
-		.toggle-group {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-			// Loz: gets rid of the forced height applied to spans
-			// I don't like it...
-			> span {
-				line-height: 0;
-			}
-		}
+		height: $item-height;
+	}
 
-		.separator {
-			@extend %separator-vertical;
-		}
+	.separator {
+		@extend %separator-vertical;
 	}
 }

package/components/editor-toolbars/SimpleButton.module.scss

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