@livepreso/react-plugin-textfield 0.2.1 → 0.3.0

package/CHANGELOG.json

@@ -1,6 +1,40 @@
 {
   "name": "@livepreso/react-plugin-textfield",
   "entries": [
+    {
+      "version": "0.3.0",
+      "tag": "@livepreso/react-plugin-textfield_v0.3.0",
+      "date": "Tue, 25 Nov 2025 06:55:05 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "When Token content renders an empty string, remove the node insted of replacing (text nodes cannot be empty)"
+          }
+        ],
+        "minor": [
+          {
+            "comment": "Support react 19 as well"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@livepreso/content-react\" to `2.1.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.2.2",
+      "tag": "@livepreso/react-plugin-textfield_v0.2.2",
+      "date": "Tue, 25 Nov 2025 00:07:07 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Change reserveWhitespace to \"true\" to keep token's trailing whitespace, but trim whitespace between paragraphs in Strategy Recs. Add contenteditable: false to Token when not burst. Add leading space to @ when using the token button (when required)."
+          }
+        ]
+      }
+    },
     {
       "version": "0.2.1",
       "tag": "@livepreso/react-plugin-textfield_v0.2.1",

package/CHANGELOG.md

@@ -1,6 +1,24 @@
 # Change Log - @livepreso/react-plugin-textfield
 
-This log was last generated on Sun, 23 Nov 2025 23:46:44 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Nov 2025 06:55:05 GMT and should not be manually modified.
+
+## 0.3.0
+Tue, 25 Nov 2025 06:55:05 GMT
+
+### Minor changes
+
+- Support react 19 as well
+
+### Patches
+
+- When Token content renders an empty string, remove the node insted of replacing (text nodes cannot be empty)
+
+## 0.2.2
+Tue, 25 Nov 2025 00:07:07 GMT
+
+### Patches
+
+- Change reserveWhitespace to "true" to keep token's trailing whitespace, but trim whitespace between paragraphs in Strategy Recs. Add contenteditable: false to Token when not burst. Add leading space to @ when using the token button (when required).
 
 ## 0.2.1
 Sun, 23 Nov 2025 23:46:44 GMT

package/components/tiptap/token/Token.js

@@ -37,9 +37,13 @@ export const convertTokensToTextNodes = (editor, options) => {
 				: tokenRender();
 
 		const endPos = pos + editor.state.doc.nodeAt(pos).nodeSize;
-		const textNode = editor.state.schema.text(content);
 
-		tr.replaceWith(pos, endPos, textNode);
+		if (content) {
+			const textNode = editor.state.schema.text(content);
+			tr.replaceWith(pos, endPos, textNode);
+		} else {
+			tr.delete(pos, endPos);
+		}
 	});
 
 	editor.view.dispatch(tr);
@@ -98,10 +102,11 @@ const TokenBase = Mention.extend({
 			const content =
 				options.fieldIsEditable && options.usePlaceholder
 					? tokenSummary
-					: render();
+					: render() || "";
 
 			const editableNode = document.createElement("span");
 			editableNode.setAttribute("contenteditable", options.fieldIsEditable);
+			tokenDOM.setAttribute("contenteditable", false);
 
 			const dom = options.burstOnCreate ? editableNode : tokenDOM;
 			const contentDOM = dom.appendChild(document.createTextNode(content));
@@ -109,17 +114,25 @@ const TokenBase = Mention.extend({
 			const convertToTextNode = () => {
 				// To reference this specific node in a command, get its position.
 				const pos = getPos();
-				const endPos = pos + node.nodeSize;
-
-				// convert the node to a text node and insert the content
-				// replacing the token in the process
-				editor
-					.chain()
-					.focus()
-					.setNodeSelection(pos)
-					.insertContentAt({ from: pos, to: endPos }, content)
-					.toggleNode(NODE_TYPES.TOKEN, "text")
-					.run();
+
+				if (pos && editor.state.doc.nodeAt(pos)) {
+					const endPos = pos + node.nodeSize;
+
+					if (content) {
+						// convert the node to a text node and insert the content
+						// replacing the token in the process
+						editor
+							.chain()
+							.focus()
+							.setNodeSelection(pos)
+							.insertContentAt({ from: pos, to: endPos }, content)
+							.toggleNode(NODE_TYPES.TOKEN, "text")
+							.run();
+					} else {
+						// delete node if no renderable content
+						editor.chain().focus().setNodeSelection(pos).deleteNode().run();
+					}
+				}
 			};
 
 			// Attach the double-click event listener in all modes where content is available.
@@ -133,10 +146,7 @@ const TokenBase = Mention.extend({
 			if (options.burstOnCreate) {
 				// this will be run, once, after the node is created
 				// after which, the Token will no longer exist.
-				// Only run if currently editing and adding tokens (ie. not on editor load)
-				if (editor.isFocused) {
-					setTimeout(() => convertToTextNode(), 50);
-				}
+				setTimeout(() => convertToTextNode(), 50);
 			}
 			return {
 				dom,

package/configs/toolbar-configuration.js

@@ -293,8 +293,27 @@ const insertTokenButton = ({ tokens = [] }) =>
 				icon: <icons.WandStars />,
 				// Token extension is always enabled, so nothing to load here
 				extensions: [],
-				command: (editor) =>
-					editor.chain().focus().insertContent(TOKEN_TRIGGER_CHAR).run(),
+				command: (editor) => {
+					const { $from } = editor.view.state.selection;
+					const prevPos = $from.pos - 1;
+
+					let tokenTriggerStr = TOKEN_TRIGGER_CHAR;
+
+					// 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)) {
+						const charBefore = editor.view.state.doc.textBetween(
+							prevPos,
+							$from.pos,
+						);
+
+						if (charBefore !== " ") {
+							tokenTriggerStr = ` ${TOKEN_TRIGGER_CHAR}`;
+						}
+					}
+
+					return editor.chain().focus().insertContent(tokenTriggerStr).run();
+				},
 			}
 		: null;
 

package/index.js

@@ -157,7 +157,7 @@ function EditableTextField({
 		onUpdate: debounce(({ editor }) => {
 			onChange?.(editor.getHTML());
 		}, 100),
-		parseOptions: { preserveWhitespace: "full" },
+		parseOptions: { preserveWhitespace: true },
 	});
 
 	const { refs } = useFloating({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepreso/react-plugin-textfield",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "",
   "main": "index.js",
   "publishConfig": {
@@ -12,8 +12,8 @@
   "devDependencies": {
     "eslint": "~9.15.0",
     "@babel/preset-react": "~7.25.9",
-    "react": "18.x",
-    "react-dom": "18.x",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
     "@babel/parser": "^7.26.10",
     "@babel/traverse": "^7.26.10",
     "@svgr/core": "^8.1.0",
@@ -21,8 +21,8 @@
     "@livepreso/eslint-config": "1.0.0"
   },
   "peerDependencies": {
-    "react": "18.x",
-    "react-dom": "18.x"
+    "react": ">= 18.0.0 <= 19",
+    "react-dom": ">= 19.0.0 <= 19"
   },
   "dependencies": {
     "@floating-ui/react-dom": "~2.1.6",
@@ -58,7 +58,7 @@
     "@tiptap/extension-mention": "~3.10.1",
     "@tiptap/suggestion": "~3.10.1",
     "fuse.js": "~7.1.0",
-    "@livepreso/content-react": "2.0.2"
+    "@livepreso/content-react": "2.1.0"
   },
   "scripts": {
     "build": ""