@livepreso/react-plugin-textfield 0.2.0 → 0.2.2

package/CHANGELOG.json

@@ -1,6 +1,33 @@
 {
   "name": "@livepreso/react-plugin-textfield",
   "entries": [
+    {
+      "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",
+      "date": "Sun, 23 Nov 2025 23:46:44 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Burst all tokens when opening saved token state into a burst editable state."
+          },
+          {
+            "comment": "Render token option before clear_formatting in simple toolbar config spec"
+          }
+        ]
+      }
+    },
     {
       "version": "0.2.0",
       "tag": "@livepreso/react-plugin-textfield_v0.2.0",

package/CHANGELOG.md

@@ -1,6 +1,21 @@
 # Change Log - @livepreso/react-plugin-textfield
 
-This log was last generated on Wed, 19 Nov 2025 03:51:23 GMT and should not be manually modified.
+This log was last generated on Tue, 25 Nov 2025 00:07:07 GMT and should not be manually modified.
+
+## 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
+
+### Patches
+
+- Burst all tokens when opening saved token state into a burst editable state.
+- Render token option before clear_formatting in simple toolbar config spec
 
 ## 0.2.0
 Wed, 19 Nov 2025 03:51:23 GMT

package/components/tiptap/token/Token.js

@@ -3,8 +3,47 @@ import style from "./Token.module.scss";
 import classNames from "classnames";
 import { generateSuggestionConfiguration, TOKEN_TRIGGER_CHAR } from "./utils";
 import { mergeAttributes } from "@tiptap/core";
+import { NODE_TYPES } from "../../../constants";
 
-const TYPE_TOKEN = "token";
+export const convertTokensToTextNodes = (editor, options) => {
+	const nodesToReplace = [];
+
+	// Using transaction instead of run() so all changes
+	// are made before application. When I did everything one
+	// run() after the other, replacements got jumbled as the
+	// positions changed after each replacement.
+	let tr = editor.state.tr;
+
+	editor.state.doc.descendants((node, pos) => {
+		if (node.type.name === NODE_TYPES.TOKEN) {
+			nodesToReplace.push({ node, pos });
+		}
+	});
+
+	// Sort by position to avoid position shifts
+	nodesToReplace.sort((a, b) => b.pos - a.pos);
+
+	nodesToReplace.forEach(({ node, pos }) => {
+		const { render: tokenRender = () => "" } =
+			options.tokens.find((token) => token.id === node.attrs.id) || {};
+
+		const tokenSummary = `${TOKEN_TRIGGER_CHAR}${
+			node.attrs.label ?? node.attrs.id
+		}`;
+
+		const content =
+			options.isEditable && options.usePlaceholder
+				? tokenSummary
+				: tokenRender();
+
+		const endPos = pos + editor.state.doc.nodeAt(pos).nodeSize;
+		const textNode = editor.state.schema.text(content);
+
+		tr.replaceWith(pos, endPos, textNode);
+	});
+
+	editor.view.dispatch(tr);
+};
 
 const TokenBase = Mention.extend({
 	name: "token",
@@ -62,7 +101,8 @@ const TokenBase = Mention.extend({
 					: render();
 
 			const editableNode = document.createElement("span");
-			editableNode.setAttribute("contenteditable", true);
+			editableNode.setAttribute("contenteditable", options.fieldIsEditable);
+			tokenDOM.setAttribute("contenteditable", false);
 
 			const dom = options.burstOnCreate ? editableNode : tokenDOM;
 			const contentDOM = dom.appendChild(document.createTextNode(content));
@@ -79,7 +119,7 @@ const TokenBase = Mention.extend({
 					.focus()
 					.setNodeSelection(pos)
 					.insertContentAt({ from: pos, to: endPos }, content)
-					.toggleNode(TYPE_TOKEN, "text")
+					.toggleNode(NODE_TYPES.TOKEN, "text")
 					.run();
 			};
 
@@ -93,8 +133,11 @@ 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
-				setTimeout(() => convertToTextNode(), 50);
+				// 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);
+				}
 			}
 			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/constants.js

@@ -9,6 +9,10 @@ export const TOOLBAR_COMPONENT_TYPES = Object.freeze({
 	CUSTOM: "custom",
 });
 
+export const NODE_TYPES = Object.freeze({
+	TOKEN: "token",
+});
+
 /**
  * What a toolbar option can affect, and where they will appear in the editor.
  *
@@ -195,8 +199,8 @@ export const MINIMAL_TOOLBAR_CONFIG = [UNDO_REDO];
 export const SIMPLE_TOOLBAR_CONFIG = [
 	UNDO_REDO,
 	TEXT_STYLE,
-	CLEAR_FORMATTING,
 	TOKEN,
+	CLEAR_FORMATTING,
 ];
 
 export const SIMPLE_TABLE_TOOLBAR_CONFIG = [

package/index.js

@@ -41,7 +41,10 @@ import { TableCellMenu } from "./components/TableCellMenu.js";
 import style from "./index.module.scss";
 import { generateExtensionsFromTag } from "./utils/generateCustomExtensions.js";
 import debounce from "lodash.debounce";
-import { generateTokenInstance } from "./components/tiptap/token/Token.js";
+import {
+	convertTokensToTextNodes,
+	generateTokenInstance,
+} from "./components/tiptap/token/Token.js";
 import Fuse from "fuse.js";
 
 function EditableTextField({
@@ -87,17 +90,21 @@ function EditableTextField({
 		return new Fuse(tokens, { keys: ["label"] });
 	}, [tokens]);
 
+	const tokenOptions = {
+		tokens,
+		mode,
+		isEditable,
+		usePlaceholder: isReallyPresoManager,
+		...tokenConfig,
+	};
+
 	const baseExtensions = [
 		Text,
 		Paragraph,
 		HardBreak,
 		generateTokenInstance({
-			tokens,
-			mode,
-			isEditable,
-			usePlaceholder: isReallyPresoManager,
+			...tokenOptions,
 			fuse: fuseInstance,
-			...tokenConfig,
 		}),
 	].filter(Boolean);
 
@@ -141,10 +148,16 @@ function EditableTextField({
 		],
 		editable: isEditable,
 		autofocus: false,
+		onCreate: ({ editor }) => {
+			// Burst any saved tokens (eg. added in PresoManager, editable in present)
+			if (tokenOptions.burstOnCreate) {
+				convertTokensToTextNodes(editor, tokenOptions);
+			}
+		},
 		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.0",
+  "version": "0.2.2",
   "description": "",
   "main": "index.js",
   "publishConfig": {