@livepreso/content-react 0.7.3 → 1.0.1

package/.rush/temp/shrinkwrap-deps.json

@@ -1,5 +1,5 @@
 {
-  "../../content/content-react": "../../content/content-react:sVKowAAy4A1Ch2RDVit/Vz9vWyB4NwGiVz9KXkm7taw=:",
+  "../../content/content-react": "../../content/content-react:LI4QvLCR+A7lRqOhNBgyXxl132hAY0Q+y0icexYILvQ=:",
   "/@ampproject/remapping@2.3.0": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
   "/@babel/code-frame@7.26.2": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
   "/@babel/compat-data@7.26.2": "sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==",
@@ -106,6 +106,7 @@
   "/levn@0.4.1": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
   "/locate-path@6.0.0": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
   "/lodash.get@4.4.2": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
+  "/lodash.isequal@4.5.0": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
   "/lodash.isplainobject@4.0.6": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
   "/lodash.merge@4.6.2": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
   "/lodash.set@4.3.2": "sha512-4hNPN5jlm/N/HLMCO43v8BXKq9Z7QdAGc/VGrRD61w8gN9g/6jF9A4L1pbUgBLCffi0w9VsXfTOij5x8iTyFvg==",

package/CHANGELOG.json

@@ -1,6 +1,38 @@
 {
   "name": "@livepreso/content-react",
   "entries": [
+    {
+      "version": "1.0.1",
+      "tag": "@livepreso/content-react_v1.0.1",
+      "date": "Thu, 12 Jun 2025 03:07:46 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Update content-react useCWEEditableInfo hook to allow saved value to be an empty string."
+          },
+          {
+            "comment": "Add event listener for context changes to useSlideContext."
+          }
+        ]
+      }
+    },
+    {
+      "version": "1.0.0",
+      "tag": "@livepreso/content-react_v1.0.0",
+      "date": "Thu, 08 May 2025 06:12:34 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Add warning to companywide editable docs about repeated keys"
+          }
+        ],
+        "major": [
+          {
+            "comment": "Replace usePrepEditable() hook with usePrepEditableInfo(), add useCWEEditableInfo(), improve editables interactions with new utils."
+          }
+        ]
+      }
+    },
     {
       "version": "0.7.3",
       "tag": "@livepreso/content-react_v0.7.3",

package/CHANGELOG.md

@@ -1,6 +1,25 @@
 # Change Log - @livepreso/content-react
 
-This log was last generated on Wed, 23 Apr 2025 22:55:14 GMT and should not be manually modified.
+This log was last generated on Thu, 12 Jun 2025 03:07:46 GMT and should not be manually modified.
+
+## 1.0.1
+Thu, 12 Jun 2025 03:07:46 GMT
+
+### Patches
+
+- Update content-react useCWEEditableInfo hook to allow saved value to be an empty string.
+- Add event listener for context changes to useSlideContext.
+
+## 1.0.0
+Thu, 08 May 2025 06:12:34 GMT
+
+### Breaking changes
+
+- Replace usePrepEditable() hook with usePrepEditableInfo(), add useCWEEditableInfo(), improve editables interactions with new utils.
+
+### Patches
+
+- Add warning to companywide editable docs about repeated keys
 
 ## 0.7.3
 Wed, 23 Apr 2025 22:55:14 GMT

package/lib/components/CompanywideJSON.js

@@ -1,20 +1,30 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 
-import { CWE_JSON_KEY } from "../constants.js";
 import { CompanywideJSONContext } from "../contexts.js";
 import set from "lodash.set";
 import unescape from "lodash.unescape";
 import { useEditableInitialState } from "../hooks/use-editable-initial-state.js";
 import { useSlide } from "../hooks/use-slide.js";
+import { getCWEJSONKey, testCWEJSONExists } from "../utils.js";
 
+/**
+ * IMPORTANT: This component must always wrap RootApp in index.js.
+ * We attempted to limit its use to the on-stage / active slide,
+ * but that resulted in off-stage slides (ie. previous and next)
+ * getting default values instead of latest, resulting in janky animations
+ * (and probably more problems too...)
+ */
 export function CompanywideJSON({ children }) {
-	const { slideKey } = useSlide();
+	const slideState = useSlide();
+	const { slideKey } = slideState;
 	const editableRef = useRef();
 	const [editableValue, editableKey] = useEditableInitialState(
-		`${slideKey}-${CWE_JSON_KEY}`,
+		getCWEJSONKey(slideKey),
 		"{}",
 	);
 
+	const cweJsonExists = testCWEJSONExists(slideState);
+
 	let initialState = {};
 
 	try {
@@ -43,15 +53,15 @@ export function CompanywideJSON({ children }) {
 	const providerValues = useMemo(
 		() => ({
 			companyWide: state,
-			// If not editable, we just pass a no-op function
-			updateCompanywide: editableKey ? updateField : () => {},
+			// Returns no-op if CWE JSON is not in use on the current slide
+			updateCompanywide: cweJsonExists ? updateField : () => {},
 		}),
-		[state],
+		[cweJsonExists, state],
 	);
 
 	return (
 		<CompanywideJSONContext.Provider value={providerValues}>
-			{editableKey && (
+			{cweJsonExists && (
 				<div
 					data-companywide-editable={editableKey}
 					ref={editableRef}

package/lib/hooks/cwe-editable.js

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useState } from "react";
+
+import { useModes } from "./use-modes";
+import { useSlide } from "./use-slide";
+import { useEditableFieldKey } from "./use-editable-field-key";
+import { getCWEData, getUserTemplateData } from "../utils";
+
+/**
+ * Returns information about a CWE, PresoManager template or user template editable
+ * on the current slide. Returns a modified key when the requested editable is found
+ * on a user or PM template.
+ *
+ * Example:
+ *
+ *  useCWEEditable("test");
+ *  => {
+ *     key: "test-adjunct-1168",
+ *     value: "User edited text",
+ *     hasValue: true
+ *  }
+ */
+export function useCWEEditableInfo(id) {
+	const { isPresomanager } = useModes();
+	const { slideID, isUserTemplate } = useSlide();
+
+	const key = useEditableFieldKey(id);
+
+	const getValue = useCallback(() => {
+		let data;
+
+		if (isUserTemplate) {
+			data = getUserTemplateData(key, slideID);
+		} else {
+			data = getCWEData(key);
+		}
+
+		return data?.value ?? data?.accepted?.value ?? data?.saved?.value ?? null;
+	}, [key, slideID, isUserTemplate]);
+
+	const [value, setValue] = useState(getValue);
+
+	function updateValue() {
+		const newValue = getValue();
+
+		if (value === newValue) {
+			return;
+		}
+
+		setValue(newValue);
+	}
+
+	useEffect(() => {
+		if (isPresomanager) return;
+
+		function onContextChange() {
+			updateValue();
+		}
+
+		Bridge.presenter.getPresentation().on("change:context", onContextChange);
+
+		return () => {
+			Bridge.presenter.getPresentation().off("change:context", onContextChange);
+		};
+	}, [isPresomanager, value, getValue]);
+
+	// When in Presomanager we cannot use a state (nothing we can watch - yet),
+	// in this mode, the latest saved value can be fetched on re-render.
+	return {
+		key,
+		value: isPresomanager ? getValue() : value,
+		hasValue: (isPresomanager ? getValue() : value) !== null,
+		updateValue,
+	};
+}
+
+/**
+ * Returns the current value of a CWE editable on the current slide.
+ * (standard slide, PresoManager template or user template)
+ */
+export function useCWEEditableValue(id, defaultValue = null) {
+	return useCWEEditableInfo(id).value ?? defaultValue;
+}

package/lib/hooks/index.js

@@ -7,6 +7,8 @@ export { useCompanywide } from "./use-companywide.js";
 export { useSlide } from "./use-slide.js";
 export { useTransitions } from "./use-transitions.js";
 export { useSubslides } from "./use-subslides.js";
-export { usePrepEditable } from "./use-prep-editable.js";
 export { useSlideDone } from "./use-slide-done.js";
+export { useEditableFieldKey } from "./use-editable-field-key.js";
 export { useEditableInitialState } from "./use-editable-initial-state.js";
+export { usePrepEditableInfo, usePrepEditableValue } from "./prep-editable.js";
+export { useCWEEditableInfo, useCWEEditableValue } from "./cwe-editable.js";

package/lib/hooks/prep-editable.js

@@ -0,0 +1,74 @@
+import { useCallback, useEffect, useState } from "react";
+
+import { useModes } from "./use-modes";
+import { useSlide } from "./use-slide";
+import { useEditableFieldKey } from "./use-editable-field-key";
+
+/**
+ * Returns information about a prep editable on the current slide.
+ *
+ * If the prep editable field is found on a user or PM template, the key
+ * will be adjusted to match the required format.
+ *
+ * Example:
+ *
+ *  usePrepEditable("test");
+ *  => {
+ *     key: "test",
+ *     value: "User edited text",
+ *     hasValue: true
+ *  }
+ */
+export function usePrepEditableInfo(id) {
+	const { isPresomanager } = useModes();
+	const { slideID } = useSlide();
+
+	const key = useEditableFieldKey(id, { isPrep: true });
+
+	const prepKey = `${slideID}--${key}`;
+	const keyPath = `_editableContent.${prepKey}.value`;
+
+	const getValue = useCallback(() => {
+		return Bridge.Context.get(keyPath, null);
+	}, [keyPath]);
+
+	const [value, setValue] = useState(getValue());
+
+	function updateValue() {
+		const newValue = getValue();
+
+		if (value === newValue) {
+			return;
+		}
+
+		setValue(newValue);
+	}
+
+	useEffect(() => {
+		if (isPresomanager) return;
+
+		function onContextChange() {
+			updateValue();
+		}
+
+		Bridge.presenter.getPresentation().on("change:context", onContextChange);
+
+		return () => {
+			Bridge.presenter.getPresentation().off("change:context", onContextChange);
+		};
+	}, [isPresomanager, value, getValue]);
+
+	return {
+		key,
+		value: value,
+		hasValue: value !== null,
+		updateValue,
+	};
+}
+
+/**
+ * Returns the current value of a prep editable on the current slide.
+ */
+export function usePrepEditableValue(id, defaultValue = null) {
+	return usePrepEditableInfo(id).value ?? defaultValue;
+}

package/lib/hooks/use-editable-field-key.js

@@ -0,0 +1,19 @@
+import { useSlide } from "./use-slide.js";
+import { getPMTemplateFieldKey, getUserTemplateFieldKey } from "../utils.js";
+
+/**
+ * Takes a base field key, and returns a modified field key depending on the slide type
+ * (ie. standard, user template or presomanager template).
+ *
+ * @param {string} key - The base key of the target field.
+ * @returns {string} - The field key modified depending on the slide type.
+ */
+export function useEditableFieldKey(key) {
+	const { slideID, isPMTemplate, isUserTemplate } = useSlide();
+	const presomanagerTemplateKey = getPMTemplateFieldKey(key, slideID);
+	const userTemplateKey = getUserTemplateFieldKey(key, slideID);
+
+	if (isUserTemplate) return userTemplateKey;
+	if (isPMTemplate) return presomanagerTemplateKey;
+	return key;
+}

package/lib/hooks/use-editable-initial-state.js

@@ -1,128 +1,33 @@
-import { CWE_JSON_KEY } from "../constants.js";
 import { useSlide } from "./use-slide.js";
-
-// captures all the digits within the slide name, prefaced by a hyphen and optional trailed by -temp
-function getSlideNumericID() {
-	const { slideID } = useSlide();
-	const numericRegex = /-(\d+)(?:-temp)*$/;
-	return slideID.match(numericRegex)?.[1];
-}
-
-/**
- * Constructs a user template field key based on the provided key and slide details.
- *
- * Note: field keys are prefixed with the slide ID when saved to the Context (_userTemplateCMSvals)
- * however they are not prefixed when used for the data-companywide-editable attribute.
- *
- * Slide ID variations:
- *   saved user template: adjunct-template-slide-415
- * unsaved user template: adjunct-template-slide-tempkey-1168
- *
- * Constructed field keys:
- *   saved user template: slideID--key-tempkey-415
- * unsaved user template: slideID--key-adjunct-1168
- *
- * @param {string} key - The base key of the target field.
- * @param {boolean} options.isUserCMSVals - If true, prefix the returned key with the slide ID.
- * @returns {string} - The constructed field key for the user template.
- */
-function getUserTemplateFieldKey(key, { isUserCMSVals = false } = {}) {
-	const { slideID } = useSlide();
-	const slideNumericID = getSlideNumericID();
-	const isUnsavedTemplate = slideID.indexOf("-tempkey") > -1;
-	let fieldKey = key;
-
-	// Add slideID prefix if requested and not included in key
-	if (isUserCMSVals && !key.startsWith(`${slideID}--`)) {
-		fieldKey = `${slideID}--${key}`;
-	}
-
-	// unsaved user template adds all this on the end
-	if (isUnsavedTemplate) {
-		return `${fieldKey}-tempkey-${slideNumericID}`;
-	}
-
-	return `${fieldKey}-adjunct-${slideNumericID}`;
-}
-
-function getUserTemplateData(fieldKey) {
-	const userValues = Bridge.Context.getDict()._userTemplateCMSvals;
-	return (
-		Object.values(userValues || {})?.find?.((vals) => vals.key === fieldKey) ||
-		{}
-	);
-}
-
-/**
- * Constructs a PM template field key based on the provided key and slide details.
- *
- * Slide ID variations:
- *     saved PM template: template-slide-11
- *   unsaved PM template: template-slide-1120-temp
- *
- * Constructed field keys:
- *     saved PM template: key-autoadjunct-11
- *   unsaved PM template: key-autoadjunct-1120-temp
- *
- * @param {string} key - The base key of the target field.
- * @returns {string} - The constructed field key for the PM template.
- */
-function getPMTemplateFieldKey(key) {
-	const { slideID, slideKey } = useSlide();
-	const isCWEJSON = key.endsWith(CWE_JSON_KEY);
-	const slideNumericID = getSlideNumericID();
-	// example: image_plus_text_columns-options-autoadjunct-767-temp
-	const isUnsavedTemplate = slideID.indexOf("-temp") > -1;
-	// "template-" is added to the start of the slideKey of PM templates
-	// this is not included in CWE field keys and needs to be removed if
-	// slideKey was used to generate the field key request.
-	// NOTE: CWE JSON field keys require the "template-" prefix
-	const fieldKey =
-		!isCWEJSON && key.startsWith(slideKey) && key.startsWith("template-")
-			? key.replace("template-", "")
-			: key;
-
-	if (isUnsavedTemplate) {
-		return `${fieldKey}-autoadjunct-${slideNumericID}-temp`;
-	}
-
-	return `${fieldKey}-autoadjunct-${slideNumericID}`;
-}
-
-function getCWEData(fieldKey) {
-	// PM template or standard slide companywide editable field
-	const cweVals = Bridge.Companywide.getWithKeys([fieldKey]);
-	return cweVals.find((vals) => vals.key === fieldKey) || {};
-}
+import { useEditableFieldKey } from "./use-editable-field-key.js";
+import { getCWEData, getUserTemplateData } from "../utils.js";
 
 /**
  * Retrieves the key and value of a requested slide CWE, PM template or user template field.
  * Adjusts the field key as required for user and PM templates.
  *
+ * Note: This hook is not tied to a state, as such it will not update when changes are made
+ * to the requested editable field. This hook will only return a new value when re-run.
+ *
  * @param {string} key - The base key of the field to retrieve.
  * @param {string} [defaultValue=''] - The default value to use if the field is not found.
  * @returns {Array} - An array containing the value of the field and the adjusted field key.
  */
-export function useEditableInitialState(key, defaultValue = "") {
-	const { isUserTemplate, isPMTemplate } = useSlide();
-	let fieldKey = key;
+export function useEditableInitialState(id, defaultValue = "") {
+	const { slideID, isUserTemplate } = useSlide();
+
+	const key = useEditableFieldKey(id);
+
 	let data;
 
 	if (isUserTemplate) {
-		fieldKey = getUserTemplateFieldKey(key);
-		const dataKey = getUserTemplateFieldKey(key, {
-			isUserCMSVals: true,
-		});
-		data = getUserTemplateData(dataKey);
-	} else if (isPMTemplate) {
-		fieldKey = getPMTemplateFieldKey(key);
-		data = getCWEData(fieldKey);
+		data = getUserTemplateData(key, slideID);
 	} else {
-		data = getCWEData(fieldKey);
+		data = getCWEData(key);
 	}
 
 	const value =
 		data?.value || data?.accepted?.value || data?.saved?.value || defaultValue;
 
-	return [value, fieldKey];
+	return [value, key];
 }

package/lib/hooks/use-modes.js

@@ -12,7 +12,10 @@ export function useModes() {
 	const isPreview = bodyClasses.includes("preview");
 	const isPresent = bodyClasses.includes("present");
 	const isReview = bodyClasses.includes("review");
-	const isPresomanager = bodyClasses.includes("edit-mode");
+	// Editing user templates in prep results in both the 'preview' and 'edit-mode'
+	// classes being added to the body. In order to detect if we are truly on the
+	// PresoManager page in the app, we need to ignore the 'preview' class.
+	const isPresomanager = bodyClasses.includes("edit-mode") && !isPreview;
 	const isEmptyPreview = bodyClasses.includes("empty-preview");
 	const isRemote = isOnline && isClient && !isShareOnline;
 	const isCdk = typeof window.__cdk_version__ !== "undefined";

package/lib/hooks/use-slide-context.js

@@ -1,6 +1,9 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
+
+import { useModes } from "./use-modes";
 
 import isPlainObject from "lodash.isplainobject";
+import isEqual from "lodash.isequal";
 
 function getValueFromContext(context, path, defaultValue) {
 	if (path) {
@@ -14,12 +17,17 @@ export function useSlideContext(contextPath = null, defaultValue = null) {
 	let persist = false;
 	let path = contextPath;
 
-	const value = getValueFromContext(
-		window.Bridge.Context.getDict(),
-		path,
-		defaultValue,
-	);
-	const [context, setContextState] = useState(value);
+	const { isPresomanager } = useModes();
+
+	const getValue = useCallback(() => {
+		return getValueFromContext(
+			window.Bridge.Context.getDict(),
+			path,
+			defaultValue,
+		);
+	}, [path, defaultValue]);
+
+	const [context, setContextState] = useState(getValue);
 
 	// You could pass in an object, so that you can set whether
 	// the saves are persistent or not.
@@ -42,20 +50,23 @@ export function useSlideContext(contextPath = null, defaultValue = null) {
 		}
 
 		Bridge.Context.set(setPath, setData, persist);
-
-		const value = getValueFromContext(
-			Bridge.Context.getDict(),
-			path,
-			defaultValue,
-		);
-		setContextState(value);
 	}
 
 	useEffect(() => {
-		if (context !== value) {
-			Bridge.Context.set(path, context, persist);
+		if (isPresomanager) return;
+
+		function onContextChange() {
+			const newValue = getValue();
+			if (isEqual(context, newValue)) return;
+			setContextState(newValue);
 		}
-	}, [context]);
+
+		Bridge.presenter.getPresentation().on("change:context", onContextChange);
+
+		return () => {
+			Bridge.presenter.getPresentation().off("change:context", onContextChange);
+		};
+	}, [isPresomanager, context, getValue]);
 
 	return [context, setContext];
 }

package/lib/utils.js

@@ -0,0 +1,152 @@
+import { CWE_JSON_KEY } from "./constants";
+
+/**
+ * Creates the base key for a CWE JSON field.
+ * Note: This does not apply any modifications required by the PM template
+ * and user template uses of CWE JSON. For those, you will need to run the
+ * return value of this key through `getPMTemplateFieldKey` or `getUserTemplateFieldKey`.
+ *
+ * @param {String} slideKey
+ * @returns {String} - Composed base key used for CWE JSON (aka. Companywide JSON)
+ */
+export function getCWEJSONKey(slideKey) {
+	if (!slideKey) {
+		throw new Error("'slideKey' is required");
+	}
+
+	return `${slideKey}-${CWE_JSON_KEY}`;
+}
+
+/**
+ * Checks CWE keys for the current slide for the relevant CWE key.
+ * CWE JSON key is modified as required for PM template and user template.
+ *
+ * @param {Object} slideState - slide details returned by `useSlide()` hook.
+ * @param {String} slideState.slideID
+ * @param {String} slideState.slideKey
+ * @param {Boolean} slideState.isPMTemplate
+ * @param {Boolean} slideState.isUserTemplate
+ * @returns
+ */
+export function testCWEJSONExists({
+	slideID,
+	slideKey,
+	isPMTemplate,
+	isUserTemplate,
+} = {}) {
+	const key = getCWEJSONKey(slideKey);
+	const cweKeys = window.Bridge.Companywide?.getSlideKeys?.() || [];
+
+	const presomanagerTemplateKey = getPMTemplateFieldKey(key, slideID);
+	const userTemplateKey = getUserTemplateFieldKey(key, slideID);
+
+	if (isUserTemplate) return cweKeys.includes(userTemplateKey);
+	if (isPMTemplate) return cweKeys.includes(presomanagerTemplateKey);
+	return cweKeys.includes(key);
+}
+
+/**
+ * Captures all the digits within the slide name,
+ * prefaced by a hyphen and optional trailed by -temp.
+ *
+ * Results are used when composing field keys for PM templates
+ * and user templates, eg. getPMTemplateFieldKey() and getUserTemplateFieldKey().
+ */
+function getSlideNumericID(slideID) {
+	const numericRegex = /-(\d+)(?:-temp)*$/;
+	return slideID.match(numericRegex)?.[1];
+}
+
+/**
+ * Constructs a PM template field key based on the provided key and slide details.
+ *
+ * Slide ID variations:
+ *     saved PM template: template-slide-11
+ *   unsaved PM template: template-slide-1120-temp
+ *
+ * Constructed field keys:
+ *     saved PM template: key-autoadjunct-11
+ *   unsaved PM template: key-autoadjunct-1120-temp
+ *
+ * @param {string} key - The base key of the target field.
+ * @returns {string} - The constructed field key for the PM template.
+ */
+export function getPMTemplateFieldKey(key, slideID) {
+	const slideNumericID = getSlideNumericID(slideID);
+	// example: image_plus_text_columns-options-autoadjunct-767-temp
+	const isUnsavedTemplate = slideID.indexOf("-temp") > -1;
+	const templateFieldKey = `${key}-autoadjunct-${slideNumericID}`;
+
+	if (isUnsavedTemplate) {
+		return `${templateFieldKey}-temp`;
+	}
+
+	return templateFieldKey;
+}
+
+/**
+ * Constructs a user template field key based on the provided key and slide details.
+ *
+ * Slide ID variations:
+ *   saved user template: adjunct-template-slide-415
+ * unsaved user template: adjunct-template-slide-tempkey-1168
+ *
+ * Constructed field keys:
+ *     saved user template: key-tempkey-11
+ *   unsaved user template: key-adjunct-1120
+ *
+ * @param {string} key - The base key of the target field.
+ * @returns {string} - The constructed field key for the user template.
+ */
+export function getUserTemplateFieldKey(key, slideID) {
+	const slideNumericID = getSlideNumericID(slideID);
+	const isUnsavedTemplate = slideID.indexOf("-tempkey") > -1;
+
+	if (isUnsavedTemplate) {
+		return `${key}-tempkey-${slideNumericID}`;
+	}
+
+	return `${key}-adjunct-${slideNumericID}`;
+}
+
+/**
+ * Returns PM template or standard slide companywide editable data.
+ *
+ * @param {string} fieldKey
+ * @returns {object} - Saved PM editable field data
+ */
+export function getCWEData(fieldKey) {
+	const cweVals = window.Bridge.Companywide?.getWithKeys([fieldKey]) || [];
+	return cweVals.find((vals) => vals.key === fieldKey) || {};
+}
+
+/**
+ * Finds value saved to requested user template field. This function expects the supplied
+ * key to have been generated by the useEditableFieldKey() hook, this is to ensure the correct
+ * parent slide information has been included in the key.
+ *
+ * Note: field keys are prefixed with the slide ID when saved to the Context (_userTemplateCMSvals)
+ * however they are not prefixed when used for the data-companywide-editable attribute.
+ *
+ * Constructed field keys:
+ *   saved user template: slideID--key-tempkey-415
+ * unsaved user template: slideID--key-adjunct-1168
+ *
+ * @param {string} key - The base key of the target field.
+ * @returns {object} - information saved to the requested user template field.
+ */
+export function getUserTemplateData(key, slideID) {
+	let fieldKey = key;
+
+	// Add slideID prefix if not included in key
+	if (!fieldKey.startsWith(`${slideID}--`)) {
+		fieldKey = `${slideID}--${key}`;
+	}
+
+	const userValues =
+		window.Bridge.Context?.getDict()._userTemplateCMSvals || {};
+
+	return (
+		Object.values(userValues)?.find?.((vals) => vals.key === fieldKey) || {}
+	);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepreso/content-react",
-  "version": "0.7.3",
+  "version": "1.0.1",
   "description": "",
   "main": "index.js",
   "publishConfig": {
@@ -22,7 +22,8 @@
     "lodash.get": "~4.4.2",
     "lodash.isplainobject": "~4.0.6",
     "lodash.set": "~4.3.2",
-    "lodash.unescape": "~4.0.1"
+    "lodash.unescape": "~4.0.1",
+    "lodash.isequal": "~4.5.0"
   },
   "scripts": {
     "build": ""

package/lib/hooks/use-prep-editable.js

@@ -1,50 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-
-import { useSlide } from "../hooks/use-slide";
-
-/**
- * Returns information about a prep editable on the current slide.
- *
- * Example:
- *
- *  usePrepEditable("test");
- *  => {
- *     key: "myslide--myslide-test,
- *     value: "User edited text,
- *     hasValue: true
- *  }
- */
-export function usePrepEditable(id) {
-	const { slideKey } = useSlide();
-
-	// TODO: This won't work with user templates, and might
-	// have problems with PM templates too. Fix this.
-	const prepKey = `${slideKey}--${slideKey}-${id}`;
-	const keyPath = `_editableContent.${prepKey}.value`;
-
-	const getValue = useCallback(() => {
-		return Bridge.Context.get(keyPath, null);
-	}, [keyPath]);
-
-	const [value, setValue] = useState(getValue());
-
-	useEffect(() => {
-		function onContextChange() {
-			const newValue = getValue();
-
-			if (value === newValue) {
-				return;
-			}
-
-			setValue(newValue);
-		}
-
-		Bridge.presenter.getPresentation().on("change:context", onContextChange);
-
-		return () => {
-			Bridge.presenter.getPresentation().off("change:context", onContextChange);
-		};
-	}, [value, getValue]);
-
-	return { key: prepKey, value, hasValue: value !== null };
-}