@livepreso/react-plugin-textfield 0.1.3 → 0.2.1

package/index.js

@@ -33,11 +33,19 @@ import {
 	DEFAULT_TOOLBAR_CONFIG,
 	DEFAULT_TABLE_TOOLBAR_CONFIG,
 	EDITABLE_OUTER_SELECTOR,
+	MODE_PREP,
+	MODE_CMS,
+	MODE_UNMANAGED,
 } from "./constants.js";
 import { TableCellMenu } from "./components/TableCellMenu.js";
 import style from "./index.module.scss";
 import { generateExtensionsFromTag } from "./utils/generateCustomExtensions.js";
 import debounce from "lodash.debounce";
+import {
+	convertTokensToTextNodes,
+	generateTokenInstance,
+} from "./components/tiptap/token/Token.js";
+import Fuse from "fuse.js";
 
 function EditableTextField({
 	value,
@@ -46,6 +54,7 @@ function EditableTextField({
 	isEditable,
 	textStyles,
 	colors,
+	tokens,
 	toolbarConfig = DEFAULT_TOOLBAR_CONFIG,
 	tableToolbarConfig = DEFAULT_TABLE_TOOLBAR_CONFIG,
 	maskSelector,
@@ -53,14 +62,20 @@ function EditableTextField({
 	tag,
 	autofocus = false,
 	disableSpellcheck = false,
+	mode,
+	tokenConfig = {},
 	// TODO implement an equivalent to the EditableText handler
 	// for editables inside tab handlers / accordion headers etc
 	// stopPropagation = false,
 	...other
 }) {
+	const { isPresomanager } = useModes();
+	const { isUserTemplateLibrary } = useSlide();
 	const [textColor, setTextColor] = useState(null);
 	const initialValue = useRef(value);
 
+	const isReallyPresoManager = isPresomanager && !isUserTemplateLibrary;
+
 	// a custom tag can result in a custom Document extension
 	// or you can pass custom extensions
 	const additionalExtensions = {
@@ -68,7 +83,30 @@ function EditableTextField({
 		...customExtensions,
 	};
 
-	const baseExtensions = [Text, Paragraph, HardBreak];
+	// include Token here, because we need it for rendering even if its toolbar button is disabled
+	// elsewhere, we can kill its suggestion engine to disable its UI
+
+	const fuseInstance = useMemo(() => {
+		return new Fuse(tokens, { keys: ["label"] });
+	}, [tokens]);
+
+	const tokenOptions = {
+		tokens,
+		mode,
+		isEditable,
+		usePlaceholder: isReallyPresoManager,
+		...tokenConfig,
+	};
+
+	const baseExtensions = [
+		Text,
+		Paragraph,
+		HardBreak,
+		generateTokenInstance({
+			...tokenOptions,
+			fuse: fuseInstance,
+		}),
+	].filter(Boolean);
 
 	// it is your responsibility not to double-specify any extensions you need here
 	// vs those derived from the toolbar config
@@ -89,8 +127,9 @@ function EditableTextField({
 				tableToolbarConfig,
 				textStyles,
 				colors,
+				tokens,
 			}),
-		[textStyles, colors, toolbarConfig, tableToolbarConfig],
+		[textStyles, colors, tokens, toolbarConfig, tableToolbarConfig],
 	);
 
 	const groupedOptions = [
@@ -109,9 +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" },
 	});
 
 	const { refs } = useFloating({
@@ -265,6 +311,7 @@ function PrepEditableField({ id, prepId = id, children, isCompany, ...props }) {
 			value={value ?? renderToString(children)}
 			onChange={setPrepValue}
 			isEditable={isEditable}
+			mode={MODE_PREP}
 		/>
 	);
 }
@@ -294,6 +341,7 @@ function CMSValField({ id, children, ...props }) {
 			value={value ?? renderToString(children)}
 			onChange={setCMSValue}
 			isEditable={isEditable}
+			mode={MODE_CMS}
 		/>
 	);
 }
@@ -306,6 +354,7 @@ export function TextField(props) {
 			value={value ?? renderToString(children)}
 			onChange={onChange}
 			isEditable={!isReadOnly}
+			mode={MODE_UNMANAGED}
 			{...other}
 		/>
 	);

package/index.module.scss

@@ -1,6 +1,4 @@
-$interactive-color: #3c80f6;
-$button-color: #f0f0f0;
-$button-hover-color: #e0e0e0;
+@import "./variables.scss";
 
 :global(.sp-presenter-overlay) {
 	* {
@@ -11,20 +9,23 @@ $button-hover-color: #e0e0e0;
 
 	--sp-toolbar-color-white: #ffffff;
 	--sp-toolbar-bg-color: var(--sp-toolbar-color-white);
-	--sp-toolbar-color: rgb(34, 47, 62);
+	--sp-toolbar-color: #{$toolbar-color};
 	--sp-toolbar-modal-bg-color: rgba(255, 255, 255, 0.75);
 	--sp-toolbar-separator-color: rgba(0, 0, 0, 0.12);
 	--sp-toolbar-highlight-color: rgba(0, 0, 0, 0.38);
-	--sp-toolbar-interactive-color: $interactive-color;
+	--sp-toolbar-interactive-color: #{$interactive-color};
 	--sp-toolbar-focus-color: #006ce7;
-	--sp-toolbar-active-color: #a6ccf7;
+	--sp-toolbar-active-color: #{$active-color};
 	--sp-toolbar-hover-color: #cce2fa;
 	--sp-toolbar-select-trigger: #f7f7f7;
 	// Buttons
-	--sp-toolbar-button: $button-color;
-	--sp-toolbar-button-hover: $button-hover-color;
+	--sp-toolbar-button: #{$button-color};
+	--sp-toolbar-button-hover: #{$button-hover-color};
 	--sp-toolbar-button-primary: var(--sp-toolbar-focus-color);
 	--sp-toolbar-button-primary-hover: #0060ce;
+	// tokens (for the dialog)
+	--sp-token-background-color: #{$active-color};
+	--sp-token-color: #{$toolbar-color};
 
 	a,
 	button,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepreso/react-plugin-textfield",
-  "version": "0.1.3",
+  "version": "0.2.1",
   "description": "",
   "main": "index.js",
   "publishConfig": {
@@ -25,37 +25,40 @@
     "react-dom": "18.x"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "~2.1.3",
+    "@floating-ui/react-dom": "~2.1.6",
     "use-sync-external-store": "~1.5.0",
     "classnames": "~2.5.1",
     "radix-ui": "~1.4.2",
     "@radix-ui/react-icons": "~1.3.2",
-    "@tiptap/core": "~3.0.6",
-    "@tiptap/react": "~3.0.6",
-    "@tiptap/pm": "~3.0.6",
-    "@tiptap/extension-document": "~3.0.6",
-    "@tiptap/extension-paragraph": "~3.0.6",
-    "@tiptap/extension-text": "~3.0.6",
-    "@tiptap/extension-hard-break": "~3.0.6",
-    "@tiptap/extension-heading": "~3.0.6",
-    "@tiptap/extension-bubble-menu": "~3.0.6",
-    "@tiptap/extension-table": "~3.0.6",
-    "@tiptap/extension-table-cell": "~3.0.6",
-    "@tiptap/extension-table-header": "~3.0.6",
-    "@tiptap/extension-table-row": "~3.0.6",
-    "@tiptap/extension-image": "~3.0.6",
-    "@tiptap/extension-text-align": "~3.0.6",
-    "@tiptap/extension-underline": "~3.0.6",
-    "@tiptap/extension-link": "~3.0.6",
-    "@tiptap/extension-bold": "~3.0.6",
-    "@tiptap/extension-italic": "~3.0.6",
-    "@tiptap/extension-list": "~3.0.6",
-    "@tiptap/extension-text-style": "~3.0.6",
-    "@tiptap/extensions": "~3.0.6",
-    "@tiptap/extension-subscript": "~3.0.6",
-    "@tiptap/extension-superscript": "~3.0.6",
+    "@tiptap/core": "~3.10.1",
+    "@tiptap/react": "~3.10.1",
+    "@tiptap/pm": "~3.10.1",
+    "@tiptap/extension-document": "~3.10.1",
+    "@tiptap/extension-paragraph": "~3.10.1",
+    "@tiptap/extension-text": "~3.10.1",
+    "@tiptap/extension-hard-break": "~3.10.1",
+    "@tiptap/extension-heading": "~3.10.1",
+    "@tiptap/extension-bubble-menu": "~3.10.1",
+    "@tiptap/extension-table": "~3.10.1",
+    "@tiptap/extension-table-cell": "~3.10.1",
+    "@tiptap/extension-table-header": "~3.10.1",
+    "@tiptap/extension-table-row": "~3.10.1",
+    "@tiptap/extension-image": "~3.10.1",
+    "@tiptap/extension-text-align": "~3.10.1",
+    "@tiptap/extension-underline": "~3.10.1",
+    "@tiptap/extension-link": "~3.10.1",
+    "@tiptap/extension-bold": "~3.10.1",
+    "@tiptap/extension-italic": "~3.10.1",
+    "@tiptap/extension-list": "~3.10.1",
+    "@tiptap/extension-text-style": "~3.10.1",
+    "@tiptap/extensions": "~3.10.1",
+    "@tiptap/extension-subscript": "~3.10.1",
+    "@tiptap/extension-superscript": "~3.10.1",
     "lodash.debounce": "~4.0.8",
-    "@livepreso/content-react": "2.0.1"
+    "@tiptap/extension-mention": "~3.10.1",
+    "@tiptap/suggestion": "~3.10.1",
+    "fuse.js": "~7.1.0",
+    "@livepreso/content-react": "2.0.2"
   },
   "scripts": {
     "build": ""

package/scripts/extract-svg.js

@@ -34,21 +34,23 @@ const SYMBOL_NAMES = [
 	"format_bold",
 	"format_clear",
 	"format_color_fill",
-	"format_color_text",
 	"format_italic",
 	"format_list_bulleted",
 	"format_list_numbered",
 	"format_strikethrough",
 	"format_underlined",
+	"help_center",
 	"horizontal_rule",
 	"link",
 	"link_off",
+	"more_vert",
 	"redo",
 	"undo",
 	"format_line_spacing",
 	"vertical_align_top",
 	"vertical_align_center",
 	"vertical_align_bottom",
+	"wand_stars",
 ];
 
 /**

package/variables.scss

@@ -0,0 +1,6 @@
+$interactive-color: #3c80f6;
+$button-color: #f0f0f0;
+$button-hover-color: #e0e0e0;
+
+$active-color: #a6ccf7;
+$toolbar-color: #222f3e;

package/icons/format_color_text.svg

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
-  <!-- Generator: Adobe Illustrator 29.3.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 151)  -->
-  <path d="M2.5,24v-3.7h19v3.7H2.5ZM5.9,17L11.1,3.5h1.7l5.3,13.5h-1.8l-1.3-3.6h-6l-1.4,3.6h-1.8ZM9.5,11.9h4.9l-2.4-6.3h-.1l-2.4,6.3Z"/>
-</svg>

package/icons/format_color_text_ungrouped.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
-  <!-- Generator: Adobe Illustrator 29.3.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 151)  -->
-  <rect x="2.5" y="20.3" width="19" height="3.7"/>
-  <path d="M12.9,3.5h-1.7l-5.3,13.5h1.8l1.4-3.6h6l1.3,3.6h1.8L12.9,3.5ZM9.5,11.9l2.4-6.3h.1l2.4,6.3h-4.9Z"/>
-</svg>