@livepreso/react-plugin-textfield 0.0.2 → 0.1.0

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

@@ -133,7 +133,7 @@
   "/@tiptap/extension-bold@3.0.9(@tiptap/core@3.0.9)": "sha512-rVULIFt9ZO+fO5ty9zuC3HwY3knxUw7q9JBztpKPfQQCuIJ+iQnOfB8NtI3L8hxVSxhIR1pqr8B3S/8vlpXbVg==",
   "/@tiptap/extension-bubble-menu@3.0.9(@tiptap/core@3.0.9)(@tiptap/pm@3.0.9)": "sha512-fZQfdSbKJl3J+Yi+s8NrcLBgXHOaGVD4g+vn+orTPUlZdG9FWvEoon8DexOdK9OvYnW6QMM7kS8whOgpogVyUQ==",
   "/@tiptap/extension-document@3.0.9(@tiptap/core@3.0.9)": "sha512-DB/R5e6QvuGhY8EhCkfNjR2xQfz/TOWoxfQGhDuy5U+oK3WBwCcHq9t5+nbSCMHtKfi/i49aHKDvv7TQCpuP0w==",
-  "/@tiptap/extension-floating-menu@3.4.2(@tiptap/core@3.0.9)(@tiptap/pm@3.0.9)": "sha512-2jDugvR7e506fDfmO22cHU0XnRyBsvig8XNSBPEcXyP3xy53kxiaCF4CzRC8DyzuC7u1NilII27TnwV5iM+9Pg==",
+  "/@tiptap/extension-floating-menu@3.4.6(@tiptap/core@3.0.9)(@tiptap/pm@3.0.9)": "sha512-4Y0GbnPd2ET4Z/Co7mcX8Dx2t+ox+6bolIAil378r20mTPTVL09vHWK9OhbGxlxkhbJ158CeKBqsZh4cO824qg==",
   "/@tiptap/extension-hard-break@3.0.9(@tiptap/core@3.0.9)": "sha512-PWNYsUwVsMWt/R5/OWjfGb+7DQT0DvH+1owBimRq0pWZepg8qkz1jdPGgsRmUFyERRsXeEpgj3VaQfrgbyUfrA==",
   "/@tiptap/extension-heading@3.0.9(@tiptap/core@3.0.9)": "sha512-LRLCIt87fvDZ5CdkinzhkCwRz5ax6FlsjJzG32MJ3wXyvVslqeLXBvH28JFUZEyzgcd/SnYmYxnef5+yvAX61g==",
   "/@tiptap/extension-image@3.0.9(@tiptap/core@3.0.9)": "sha512-/2igN/oIF58zqX5fcg00bf6qGLcQyXHysl5I8GiurkvO95d+SQTlYbJneSRUpt6CgrUKbhRnMBPVubmapgg+Zw==",

package/CHANGELOG.json

@@ -1,6 +1,30 @@
 {
   "name": "@livepreso/react-plugin-textfield",
   "entries": [
+    {
+      "version": "0.1.0",
+      "tag": "@livepreso/react-plugin-textfield_v0.1.0",
+      "date": "Tue, 30 Sep 2025 00:36:15 GMT",
+      "comments": {
+        "minor": [
+          {
+            "comment": "size selector dropdown for insert table"
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.0.3",
+      "tag": "@livepreso/react-plugin-textfield_v0.0.3",
+      "date": "Thu, 18 Sep 2025 00:33:25 GMT",
+      "comments": {
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@livepreso/content-react\" to `2.0.1`"
+          }
+        ]
+      }
+    },
     {
       "version": "0.0.2",
       "tag": "@livepreso/react-plugin-textfield_v0.0.2",

package/CHANGELOG.md

@@ -1,6 +1,18 @@
 # Change Log - @livepreso/react-plugin-textfield
 
-This log was last generated on Fri, 12 Sep 2025 02:07:08 GMT and should not be manually modified.
+This log was last generated on Tue, 30 Sep 2025 00:36:15 GMT and should not be manually modified.
+
+## 0.1.0
+Tue, 30 Sep 2025 00:36:15 GMT
+
+### Minor changes
+
+- size selector dropdown for insert table
+
+## 0.0.3
+Thu, 18 Sep 2025 00:33:25 GMT
+
+_Version update only_
 
 ## 0.0.2
 Fri, 12 Sep 2025 02:07:08 GMT

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.2",
+  "version": "0.1.0",
   "description": "",
   "main": "index.js",
   "publishConfig": {
@@ -55,7 +55,7 @@
     "@tiptap/extension-subscript": "~3.0.6",
     "@tiptap/extension-superscript": "~3.0.6",
     "lodash.debounce": "~4.0.8",
-    "@livepreso/content-react": "2.0.0"
+    "@livepreso/content-react": "2.0.1"
   },
   "scripts": {
     "build": ""

package/.vscode/settings.json

@@ -1,22 +0,0 @@
-{
-	"workbench.colorCustomizations": {
-		"activityBar.activeBackground": "#1f6fd0",
-		"activityBar.background": "#1f6fd0",
-		"activityBar.foreground": "#e7e7e7",
-		"activityBar.inactiveForeground": "#e7e7e799",
-		"activityBarBadge.background": "#ee90bb",
-		"activityBarBadge.foreground": "#15202b",
-		"commandCenter.border": "#e7e7e799",
-		"sash.hoverBorder": "#1f6fd0",
-		"statusBar.background": "#1857a4",
-		"statusBar.foreground": "#e7e7e7",
-		"statusBarItem.hoverBackground": "#1f6fd0",
-		"statusBarItem.remoteBackground": "#1857a4",
-		"statusBarItem.remoteForeground": "#e7e7e7",
-		"titleBar.activeBackground": "#1857a4",
-		"titleBar.activeForeground": "#e7e7e7",
-		"titleBar.inactiveBackground": "#1857a499",
-		"titleBar.inactiveForeground": "#e7e7e799"
-	},
-	"peacock.remoteColor": "#1857a4"
-}