@livepreso/react-plugin-textfield 0.0.3 → 0.1.1

package/CHANGELOG.json

@@ -1,6 +1,30 @@
 {
   "name": "@livepreso/react-plugin-textfield",
   "entries": [
+    {
+      "version": "0.1.1",
+      "tag": "@livepreso/react-plugin-textfield_v0.1.1",
+      "date": "Wed, 01 Oct 2025 02:27:21 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Remove TextField component toolbar inset as it is no longer required."
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.1.0",
+      "tag": "@livepreso/react-plugin-textfield_v0.1.0",
+      "date": "Mon, 29 Sep 2025 23:56:57 GMT",
+      "comments": {
+        "minor": [
+          {
+            "comment": "size selector dropdown for insert table"
+          }
+        ]
+      }
+    },
     {
       "version": "0.0.3",
       "tag": "@livepreso/react-plugin-textfield_v0.0.3",

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Change Log - @livepreso/react-plugin-textfield
 
-This log was last generated on Thu, 18 Sep 2025 00:33:25 GMT and should not be manually modified.
+This log was last generated on Wed, 01 Oct 2025 02:27:21 GMT and should not be manually modified.
+
+## 0.1.1
+Wed, 01 Oct 2025 02:27:21 GMT
+
+### Patches
+
+- Remove TextField component toolbar inset as it is no longer required.
+
+## 0.1.0
+Mon, 29 Sep 2025 23:56:57 GMT
+
+### Minor changes
+
+- size selector dropdown for insert table
 
 ## 0.0.3
 Thu, 18 Sep 2025 00:33:25 GMT

package/components/BubbleMenu.js

@@ -8,7 +8,7 @@ import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { OverlayPortal, useTransitions } from "@livepreso/content-react";
 import style from "./BubbleMenu.module.scss";
 import { EDITABLE_OUTER_SELECTOR } from "../constants";
-import { getContentDimensions, getTestRect } from "./utils";
+import { getTestRect } from "./utils";
 
 class UnscaledBubbleMenuView extends BubbleMenuView {
 	show() {
@@ -27,12 +27,7 @@ class UnscaledBubbleMenuView extends BubbleMenuView {
 
 		const div = window.Bridge.UI.overlay;
 		const divRect = div.getBoundingClientRect();
-		// Allows long and tall toolbars/menus fit within the confines of the overlay
-		// Percentage applied to maxWidth keeps toolbars out of the way of left/right slide navigation
-		// Calculated based on the current current's raw dimensions, against our standard 120px left/right padding
-		const { width: rawWidth } = getContentDimensions();
-		const widthPerc = rawWidth ? (rawWidth - 240) / rawWidth : 1;
-		this.element.style.maxWidth = `${divRect.width * widthPerc}px`;
+		this.element.style.maxWidth = `${divRect.width}px`;
 		this.element.style.maxHeight = `${divRect.height}px`;
 
 		const getBoundingClientRect = () => {

package/components/Select/Select.module.scss

@@ -33,7 +33,7 @@
 	.content {
 		@extend %root;
 		position: relative;
-		z-index: 10000;
+		z-index: 3100;
 		max-height: var(--radix-select-content-available-height);
 
 		.group {

package/components/table-creator/TableCellThumb.js

@@ -0,0 +1,25 @@
+import React from "react";
+
+import classNames from "classnames";
+
+import style from "./TableCellThumb.module.scss";
+
+export function TableCellThumb({
+	className,
+	selected,
+	onClick,
+	onMouseOver,
+	row,
+	col,
+}) {
+	return (
+		<button
+			aria-label={`Insert ${col} by ${row} cell table`}
+			className={classNames(style.cell, className, {
+				[style.selected]: selected,
+			})}
+			onClick={onClick}
+			onMouseOver={onMouseOver}
+		/>
+	);
+}

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

@@ -0,0 +1,19 @@
+:global(.sp-presenter-overlay) {
+	.cell {
+		//top level styles
+		width: 20px;
+		height: 16px;
+		margin-bottom: 4px;
+		border: 1px solid var(--sp-toolbar-highlight-color);
+
+		&:not(:last-child) {
+			margin-right: 4px;
+		}
+	}
+
+	.selected {
+		border: 1px solid var(--sp-toolbar-focus-color);
+		background-color: var(--sp-toolbar-hover-color);
+		box-shadow: 0 0 1px 1px var(--sp-toolbar-hover-color);
+	}
+}

package/components/table-creator/TableCreator.js

@@ -0,0 +1,44 @@
+import React from "react";
+
+import style from "./TableCreatorCombo.module.scss";
+import { TableCellThumb } from "./TableCellThumb";
+
+export function TableCreator({ className, onChange = () => {} }) {
+	function handleChange(row, cols) {
+		onChange(row, cols);
+	}
+
+	const [selectedRow, setSelectedRow] = React.useState(0);
+	const [selectedCol, setSelectedCol] = React.useState(0);
+
+	const maxRows = 8;
+	const maxCols = 8;
+	const rows = Array.from({ length: maxRows }, (_, idx) => idx + 1);
+	const cols = Array.from({ length: maxCols }, (_, idx) => idx + 1);
+	function handleRollover(rowIndex, colIndex) {
+		setSelectedRow(rowIndex);
+		setSelectedCol(colIndex);
+	}
+
+	return (
+		<div className={style.options}>
+			{rows.map((rowIndex) => (
+				<div key={`row_${rowIndex}`} className={style.row}>
+					{cols.map((colIndex) => (
+						<TableCellThumb
+							key={`${rowIndex}_${colIndex}`}
+							row={rowIndex}
+							col={colIndex}
+							selected={rowIndex <= selectedRow && colIndex <= selectedCol}
+							onClick={() => handleChange(rowIndex, colIndex)}
+							onMouseOver={() => handleRollover(rowIndex, colIndex)}
+						/>
+					))}
+				</div>
+			))}
+			<div className={style.indicator}>
+				{!!selectedRow && !!selectedCol && `${selectedCol} x ${selectedRow}`}
+			</div>
+		</div>
+	);
+}

package/components/table-creator/TableCreatorCombo.js

@@ -0,0 +1,18 @@
+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";
+
+export function TableCreatorCombo({ disabled, onChange }) {
+	return (
+		<Popover
+			triggerClassName={toolbarStyle.item}
+			trigger={<ToolbarButton disabled={disabled} icon={<BorderAll />} />}
+		>
+			<TableCreator onChange={onChange} />
+		</Popover>
+	);
+}

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

@@ -0,0 +1,19 @@
+@import "../style.module.scss";
+
+:global(.sp-presenter-overlay) {
+	.indicator {
+		font-size: 14px;
+		line-height: 16px;
+		text-align: center;
+	}
+
+	.options {
+		display: flex;
+		flex-direction: column;
+		padding: 5px;
+	}
+
+	.row {
+		display: flex;
+	}
+}

package/configs/toolbar-configuration.js

@@ -22,6 +22,7 @@ import { PRIMARY_TOOLBAR_IDS, TOOLBAR_COMPONENT_TYPES } from "../constants";
 import LinkEditDialog from "../components/LinkEditDialog";
 import { Gapcursor } from "@tiptap/extensions";
 import { ColorPickerCombo } from "../components/color-picker/ColorPickerCombo";
+import { TableCreatorCombo } from "../components/table-creator/TableCreatorCombo";
 
 function generateTextStyleTest(textStyles) {
 	return (editor) => {
@@ -293,21 +294,28 @@ const clearFormattingButton = () => ({
 
 const insertTableButton = () => ({
 	id: PRIMARY_TOOLBAR_IDS.INSERT_TABLE,
-	label: "Insert Table",
-	type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+	label: "Insert table",
+	type: TOOLBAR_COMPONENT_TYPES.CUSTOM,
 	extensions: [TableExtended, TableCell, TableHeader, TableRow, Gapcursor],
-	command: (editor) =>
-		editor
-			.chain()
-			.focus()
-			.insertTable({
-				rows: 3,
-				cols: 3,
-				withHeaderRow: true,
-			})
-			.setFullWidth()
-			.run(),
-	icon: <icons.BorderAll />,
+	renderContent: ({ editor, isEnabled } = {}) => {
+		return (
+			<TableCreatorCombo
+				disabled={!isEnabled}
+				onChange={(rows, cols) => {
+					editor
+						.chain()
+						.focus()
+						.insertTable({
+							rows,
+							cols,
+							withHeaderRow: true,
+						})
+						.setFullWidth()
+						.run();
+				}}
+			/>
+		);
+	},
 });
 
 export const primaryItemGenerators = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepreso/react-plugin-textfield",
-  "version": "0.0.3",
+  "version": "0.1.1",
   "description": "",
   "main": "index.js",
   "publishConfig": {