@livepreso/react-plugin-textfield 0.0.2

package/index.js

@@ -0,0 +1,334 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+import { renderToString } from "react-dom/server";
+
+import {
+	autoUpdate,
+	flip,
+	inline,
+	offset,
+	useFloating,
+} from "@floating-ui/react-dom";
+import {
+	useCMSVal,
+	useModes,
+	usePrepEditable,
+	useSlide,
+} from "@livepreso/content-react";
+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 {
+	EditorContent,
+	EditorContext,
+	useEditor,
+	useEditorState,
+} from "@tiptap/react";
+
+import { PrimaryToolbar } from "./components/PrimaryToolbar.js";
+import { TableToolbar } from "./components/TableToolbar.js";
+import { generateToolbarOptions } from "./configs/generate-toolbar-options.js";
+import {
+	DEFAULT_TOOLBAR_CONFIG,
+	DEFAULT_TABLE_TOOLBAR_CONFIG,
+	EDITABLE_OUTER_SELECTOR,
+} 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";
+
+function EditableTextField({
+	value,
+	onChange,
+	className,
+	isEditable,
+	textStyles,
+	colors,
+	toolbarConfig = DEFAULT_TOOLBAR_CONFIG,
+	tableToolbarConfig = DEFAULT_TABLE_TOOLBAR_CONFIG,
+	maskSelector,
+	extensions: customExtensions = {},
+	tag,
+	autofocus = false,
+	disableSpellcheck = false,
+	// TODO implement an equivalent to the EditableText handler
+	// for editables inside tab handlers / accordion headers etc
+	// stopPropagation = false,
+	...other
+}) {
+	const [textColor, setTextColor] = useState(null);
+	const initialValue = useRef(value);
+
+	// a custom tag can result in a custom Document extension
+	// or you can pass custom extensions
+	const additionalExtensions = {
+		...generateExtensionsFromTag(tag),
+		...customExtensions,
+	};
+
+	const baseExtensions = [Text, Paragraph, HardBreak];
+
+	// it is your responsibility not to double-specify any extensions you need here
+	// vs those derived from the toolbar config
+
+	const { document: documentExtension = Document, ...restExtensions } =
+		additionalExtensions;
+	const otherExtensions = Object.values(restExtensions);
+
+	const {
+		primaryOptions = [],
+		tableOptions = [],
+		tableCellOptions = [],
+		extensions: toolbarAddedExtensions = [],
+	} = useMemo(
+		() =>
+			generateToolbarOptions({
+				toolbarConfig,
+				tableToolbarConfig,
+				textStyles,
+				colors,
+			}),
+		[textStyles, colors, toolbarConfig, tableToolbarConfig],
+	);
+
+	const groupedOptions = [
+		...primaryOptions,
+		...tableOptions,
+		...tableCellOptions,
+	];
+
+	const editor = useEditor({
+		content: initialValue.current,
+		extensions: [
+			documentExtension,
+			...baseExtensions,
+			...toolbarAddedExtensions,
+			...otherExtensions,
+		],
+		editable: isEditable,
+		autofocus: false,
+		onUpdate: debounce(({ editor }) => {
+			onChange?.(editor.getHTML());
+		}, 100),
+	});
+
+	const { refs } = useFloating({
+		whileElementsMounted: autoUpdate,
+		placement: "top-start",
+		middleware: [inline(), offset(2), flip()],
+	});
+
+	const preventPropagation = (event) => {
+		event.stopPropagation();
+	};
+
+	useEffect(() => {
+		if (refs?.reference?.current) {
+			if (disableSpellcheck) {
+				refs.reference.current.removeEventListener(
+					"contextmenu",
+					preventPropagation,
+				);
+			} else {
+				refs.reference.current.addEventListener(
+					"contextmenu",
+					preventPropagation,
+				);
+			}
+		}
+		return () => {
+			if (refs?.reference?.current)
+				refs.reference.current.removeEventListener(
+					"contextmenu",
+					preventPropagation,
+				);
+		};
+	}, [refs, disableSpellcheck]);
+
+	const providerArgs = useMemo(() => ({ editor }), [editor]);
+
+	// // doing this way, rather than a filter, lets us set an arbitrary order for the button groups
+	// const selectedControlGroups = toolbarConfig.map((groupId) =>
+	// 	components.find((configGroup) => configGroup.id === groupId)
+	// );
+
+	const items = groupedOptions.flatMap((group) => group.items || []);
+
+	// thought about adding the focus to the state,
+	// to do away with the useState()
+	//  but probably fine as is
+	// items.push({id: 'editor', active: (editor) => editor.isFocused})
+
+	useEffect(() => {
+		if (autofocus && editor) {
+			// timeout required as toolbar position is wrong otherwise
+			// similar delay with TinyMCE based editor
+			setTimeout(() => {
+				editor.chain().focus().run();
+			}, 300);
+		}
+	}, [autofocus]);
+
+	const selector = ({ editor }) => {
+		return items.reduce(
+			(
+				acc,
+				{ id, active = () => false, enabled = () => true, value = () => null },
+			) => {
+				return {
+					...acc,
+					[id]: {
+						active: active(editor),
+						enabled: enabled(editor),
+						value: value(editor),
+					},
+				};
+			},
+			{},
+		);
+	};
+
+	const editorState = useEditorState({
+		editor,
+		selector,
+	});
+
+	const classes = [
+		"interactive",
+		EDITABLE_OUTER_SELECTOR,
+		className,
+		isEditable && style.editable,
+		style.textField,
+	].filter(Boolean);
+
+	const toolbarOptions = {
+		editor,
+		editorState,
+		maskSelector,
+		// For storing user selections outside of the current selected state of the editor
+		// eg. Previous selected color, for easy re-use in the same session.
+		userSelections: {
+			textColor: { value: textColor, setValue: setTextColor },
+		},
+	};
+
+	return (
+		<EditorContext.Provider value={providerArgs}>
+			{isEditable && (
+				<>
+					<PrimaryToolbar configuration={primaryOptions} {...toolbarOptions} />
+					<TableCellMenu configuration={tableCellOptions} {...toolbarOptions} />
+					<TableToolbar configuration={tableOptions} {...toolbarOptions} />
+				</>
+			)}
+			<div
+				data-companywide-interactive={isEditable}
+				className={classes.join(" ")}
+				ref={refs.setReference}
+				{...other}
+			>
+				<EditorContent editor={editor} />
+			</div>
+		</EditorContext.Provider>
+	);
+}
+
+function PrepEditableField({ id, prepId = id, children, isCompany, ...props }) {
+	const { isPresomanager } = useModes();
+	const { isUserTemplateLibrary, isUserTemplate } = useSlide();
+
+	const [defaultCmsValue] = useCMSVal(id, {
+		enabled: isCompany && !isPresomanager,
+	});
+
+	const [prepValue, setPrepValue] = usePrepEditable(prepId);
+
+	let value = isCompany && prepValue === null ? defaultCmsValue : prepValue;
+
+	const isEditable =
+		props.isEditable &&
+		(!isPresomanager || isUserTemplateLibrary || isUserTemplate);
+
+	return (
+		<EditableTextField
+			{...props}
+			value={value ?? renderToString(children)}
+			onChange={setPrepValue}
+			isEditable={isEditable}
+		/>
+	);
+}
+
+function CMSValField({ id, children, ...props }) {
+	const { isPresomanager, isThumbnailScreenshot } = useModes();
+	const { isUserTemplateLibrary, isUserTemplate } = useSlide();
+
+	const [cmsValue, setCMSValue] = useCMSVal(id);
+	const value = !isThumbnailScreenshot && cmsValue;
+
+	const isEditable =
+		props.isEditable &&
+		(isPresomanager || isUserTemplateLibrary || isUserTemplate);
+	return (
+		<EditableTextField
+			{...props}
+			value={value ?? renderToString(children)}
+			onChange={setCMSValue}
+			isEditable={isEditable}
+		/>
+	);
+}
+
+export function TextField(props) {
+	const { value, children, onChange, isReadOnly, ...other } = props;
+
+	return (
+		<EditableTextField
+			value={value ?? renderToString(children)}
+			onChange={onChange}
+			isEditable={!isReadOnly}
+			{...other}
+		/>
+	);
+}
+
+export function ManagedTextField(props) {
+	const { isPresomanager, isPreview, isEmptyPreview } = useModes();
+	const { isUserTemplateLibrary } = useSlide();
+	const {
+		isReadOnly = false,
+		isPrep = false,
+		isCompany = false,
+		// we only want to pass this to the PrepEditableField, not the CMSValField
+		prepId,
+		...other
+	} = props;
+
+	const isEditable = !isReadOnly && (isPresomanager || isPreview);
+	const sharedProps = { ...other, isEditable };
+
+	// occasionally, we want to lock the field and pass a value
+	// without it ever being configured to allow updates
+	if (!isReadOnly && !isPrep && !isCompany) {
+		throw new Error("Must set isPrep or isCompany or both");
+	}
+
+	const isReallyPresoManager = isPresomanager && !isUserTemplateLibrary;
+
+	if (
+		(isPrep && !isReallyPresoManager && !isEmptyPreview) ||
+		(isPrep && isReallyPresoManager && !isCompany)
+	) {
+		return (
+			<PrepEditableField
+				isCompany={isCompany}
+				prepId={prepId}
+				{...sharedProps}
+			/>
+		);
+	}
+
+	return <CMSValField {...sharedProps} />;
+}

package/index.module.scss

@@ -0,0 +1,106 @@
+$interactive-color: #3c80f6;
+$button-color: #f0f0f0;
+$button-hover-color: #e0e0e0;
+
+:global(.sp-presenter-overlay) {
+	* {
+		box-sizing: border-box;
+	}
+
+	overflow: hidden;
+
+	--sp-toolbar-color-white: #ffffff;
+	--sp-toolbar-bg-color: var(--sp-toolbar-color-white);
+	--sp-toolbar-color: rgb(34, 47, 62);
+	--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-focus-color: #006ce7;
+	--sp-toolbar-active-color: #a6ccf7;
+	--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-primary: var(--sp-toolbar-focus-color);
+	--sp-toolbar-button-primary-hover: #0060ce;
+
+	a,
+	button,
+	fieldset,
+	input {
+		all: unset;
+	}
+
+	.toolbar-container {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+	}
+}
+
+.text-field {
+	overflow: hidden;
+
+	table {
+		border-collapse: collapse;
+	}
+}
+
+.editable {
+	outline: 1px solid $interactive-color;
+
+	> div {
+		height: 100%;
+	}
+
+	:global {
+		.tiptap {
+			height: 100%;
+			white-space: pre-wrap;
+			outline: none;
+
+			&.resize-cursor {
+				cursor: ew-resize;
+				cursor: col-resize;
+			}
+		}
+
+		.tableWrapper {
+			th,
+			td {
+				position: relative;
+
+				&.selectedCell::after {
+					content: "";
+					position: absolute;
+					left: 0;
+					right: 0;
+					top: 0;
+					bottom: 0;
+					background-color: rgba(0, 0, 0, 0.15);
+					pointer-events: none;
+					z-index: 2;
+				}
+
+				&.tiptap-table-cell-dark.selectedCell::after {
+					background-color: rgba(255, 255, 255, 0.4);
+				}
+			}
+
+			// Loz: I think I broke this...
+			.column-resize-handle {
+				background-color: $interactive-color;
+				bottom: -2px;
+				pointer-events: none;
+				position: relative;
+				right: -2px;
+				top: 0;
+				width: 4px;
+			}
+		}
+	}
+}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@livepreso/react-plugin-textfield",
+  "version": "0.0.2",
+  "description": "",
+  "main": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "eslint": "~9.15.0",
+    "@babel/preset-react": "~7.25.9",
+    "react": "18.x",
+    "react-dom": "18.x",
+    "@babel/parser": "^7.26.10",
+    "@babel/traverse": "^7.26.10",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
+    "@livepreso/eslint-config": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": "18.x",
+    "react-dom": "18.x"
+  },
+  "dependencies": {
+    "@floating-ui/react-dom": "~2.1.3",
+    "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",
+    "lodash.debounce": "~4.0.8",
+    "@livepreso/content-react": "2.0.0"
+  },
+  "scripts": {
+    "build": ""
+  }
+}