@livepreso/react-plugin-textfield 0.4.3 → 0.5.0

package/CHANGELOG.json

@@ -1,6 +1,30 @@
 {
   "name": "@livepreso/react-plugin-textfield",
   "entries": [
+    {
+      "version": "0.5.0",
+      "tag": "@livepreso/react-plugin-textfield_v0.5.0",
+      "date": "Mon, 27 Jul 2026 04:05:41 GMT",
+      "comments": {
+        "minor": [
+          {
+            "comment": "Add placeholder property"
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.4.4",
+      "tag": "@livepreso/react-plugin-textfield_v0.4.4",
+      "date": "Wed, 06 May 2026 23:36:35 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "De-dupe tokens before providing to the text editor"
+          }
+        ]
+      }
+    },
     {
       "version": "0.4.3",
       "tag": "@livepreso/react-plugin-textfield_v0.4.3",

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Change Log - @livepreso/react-plugin-textfield
 
-This log was last generated on Thu, 12 Mar 2026 02:50:05 GMT and should not be manually modified.
+This log was last generated on Mon, 27 Jul 2026 04:05:41 GMT and should not be manually modified.
+
+## 0.5.0
+Mon, 27 Jul 2026 04:05:41 GMT
+
+### Minor changes
+
+- Add placeholder property
+
+## 0.4.4
+Wed, 06 May 2026 23:36:35 GMT
+
+### Patches
+
+- De-dupe tokens before providing to the text editor
 
 ## 0.4.3
 Thu, 12 Mar 2026 02:50:05 GMT

package/index.js

@@ -19,6 +19,7 @@ import Document from "@tiptap/extension-document";
 import HardBreak from "@tiptap/extension-hard-break";
 import Paragraph from "@tiptap/extension-paragraph";
 import Text from "@tiptap/extension-text";
+import { Placeholder } from "@tiptap/extensions";
 import {
 	EditorContent,
 	EditorContext,
@@ -54,7 +55,7 @@ function EditableTextField({
 	isEditable,
 	textStyles,
 	colors,
-	tokens,
+	tokens: allTokens = [],
 	toolbarConfig = DEFAULT_TOOLBAR_CONFIG,
 	tableToolbarConfig = DEFAULT_TABLE_TOOLBAR_CONFIG,
 	maskSelector,
@@ -64,6 +65,9 @@ function EditableTextField({
 	disableSpellcheck = false,
 	mode,
 	tokenConfig = {},
+	// Faint prompt shown while the field is empty and editable. Destructured here
+	// so it drives the Placeholder extension rather than landing on the DOM node.
+	placeholder,
 	// TODO implement an equivalent to the EditableText handler
 	// for editables inside tab handlers / accordion headers etc
 	// stopPropagation = false,
@@ -73,6 +77,11 @@ function EditableTextField({
 	const { isUserTemplateLibrary } = useSlide();
 	const [textColor, setTextColor] = useState(null);
 	const initialValue = useRef(value);
+	const tokens = allTokens.reduce((acc, token) => {
+		const { id } = token;
+		if (acc.some((accToken) => accToken.id === id)) return acc;
+		return [...acc, token];
+	}, []);
 
 	const isReallyPresoManager = isPresomanager && !isUserTemplateLibrary;
 
@@ -145,6 +154,17 @@ function EditableTextField({
 			...baseExtensions,
 			...toolbarAddedExtensions,
 			...otherExtensions,
+			...(placeholder
+				? [
+						Placeholder.configure({
+							placeholder,
+							// only while editable (present/PDF stay blank); show on any
+							// empty field, not just the focused one
+							showOnlyWhenEditable: true,
+							showOnlyCurrent: false,
+						}),
+					]
+				: []),
 		],
 		editable: isEditable,
 		autofocus: false,

package/index.module.scss

@@ -68,6 +68,18 @@
 				cursor: ew-resize;
 				cursor: col-resize;
 			}
+
+			// Placeholder text (from the Placeholder extension, active only when a
+			// `placeholder` prop is set). Faint and derived from the field's own
+			// text colour so it reads correctly on any background.
+			.is-editor-empty:first-child::before {
+				content: attr(data-placeholder);
+				color: currentColor;
+				opacity: 0.4;
+				float: left;
+				height: 0;
+				pointer-events: none;
+			}
 		}
 
 		.tableWrapper {

package/package.json

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