@livepreso/content-react 0.7.2 → 1.0.0

package/CHANGELOG.md

@@ -1,9 +1,26 @@
 # Change Log - @livepreso/content-react
 
-This log was last generated on Wed, 23 Apr 2025 06:25:28 GMT and should not be manually modified.
+This log was last generated on Thu, 08 May 2025 06:12:34 GMT and should not be manually modified.
 
-## 0.7.2
+## 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
+
+### Patches
+
+- Previous deploy failed, forcing a new one
+
+## 0.7.2
 Wed, 23 Apr 2025 06:25:28 GMT
 
 ### Patches
@@ -11,7 +28,6 @@ Wed, 23 Apr 2025 06:25:28 GMT
 - When using useEditableInitialState for user templates, only prefix returned key with slideID-- when it's going to be used to traverse userCMSVals context data. If slideID-- prefix is already included in the provided key, do not add it again.
 
 ## 0.7.1
-
 Thu, 03 Apr 2025 22:38:00 GMT
 
 ### Patches
@@ -19,7 +35,6 @@ Thu, 03 Apr 2025 22:38:00 GMT
 - fix useEditableInitialState user template value retrieval
 
 ## 0.7.0
-
 Thu, 06 Mar 2025 00:08:07 GMT
 
 ### Minor changes
@@ -27,7 +42,6 @@ Thu, 06 Mar 2025 00:08:07 GMT
 - Add isEmptyPreview to useModes hook, move CWE JSON field to underneath slide
 
 ## 0.6.2
-
 Tue, 25 Feb 2025 03:34:02 GMT
 
 ### Patches
@@ -35,7 +49,6 @@ Tue, 25 Feb 2025 03:34:02 GMT
 - setContext(key, value) allows setting of falsy values
 
 ## 0.6.1
-
 Thu, 20 Feb 2025 01:26:11 GMT
 
 ### Patches
@@ -43,7 +56,6 @@ Thu, 20 Feb 2025 01:26:11 GMT
 - Update dependencies
 
 ## 0.6.0
-
 Sun, 09 Feb 2025 23:36:42 GMT
 
 ### Minor changes
@@ -51,7 +63,6 @@ Sun, 09 Feb 2025 23:36:42 GMT
 - added explicit exports to improve IDE hinting
 
 ## 0.5.2
-
 Fri, 17 Jan 2025 04:54:14 GMT
 
 ### Patches
@@ -59,7 +70,6 @@ Fri, 17 Jan 2025 04:54:14 GMT
 - resolved race condition in useCompanywide setter
 
 ## 0.5.1
-
 Fri, 17 Jan 2025 03:37:56 GMT
 
 ### Patches
@@ -67,7 +77,6 @@ Fri, 17 Jan 2025 03:37:56 GMT
 - Properly call slideready on hot module reload
 
 ## 0.5.0
-
 Tue, 26 Nov 2024 03:54:55 GMT
 
 ### Minor changes
@@ -75,7 +84,6 @@ Tue, 26 Nov 2024 03:54:55 GMT
 - Add internal presentation slide key to useSlide()
 
 ## 0.4.3
-
 Thu, 21 Nov 2024 01:14:47 GMT
 
 ### Patches
@@ -83,7 +91,6 @@ Thu, 21 Nov 2024 01:14:47 GMT
 - Move CWE Editables far below content
 
 ## 0.4.2
-
 Thu, 21 Nov 2024 00:05:45 GMT
 
 ### Patches
@@ -91,7 +98,6 @@ Thu, 21 Nov 2024 00:05:45 GMT
 - Always add global
 
 ## 0.4.1
-
 Wed, 20 Nov 2024 23:28:52 GMT
 
 ### Patches
@@ -99,7 +105,6 @@ Wed, 20 Nov 2024 23:28:52 GMT
 - Components were not correctly unmounting
 
 ## 0.4.0
-
 Tue, 24 Sep 2024 03:37:23 GMT
 
 ### Minor changes
@@ -107,7 +112,6 @@ Tue, 24 Sep 2024 03:37:23 GMT
 - Allow overriding react errors
 
 ## 0.3.9
-
 Fri, 23 Aug 2024 05:02:46 GMT
 
 ### Patches
@@ -115,7 +119,6 @@ Fri, 23 Aug 2024 05:02:46 GMT
 - Company wide editables fixes
 
 ## 0.3.8
-
 Wed, 24 Jul 2024 06:53:26 GMT
 
 ### Patches
@@ -123,7 +126,6 @@ Wed, 24 Jul 2024 06:53:26 GMT
 - Update latest
 
 ## 0.3.7
-
 Fri, 03 May 2024 00:56:03 GMT
 
 ### Patches
@@ -131,7 +133,6 @@ Fri, 03 May 2024 00:56:03 GMT
 - New version of content-base
 
 ## 0.3.6
-
 Wed, 20 Mar 2024 01:31:57 GMT
 
 ### Patches
@@ -139,7 +140,6 @@ Wed, 20 Mar 2024 01:31:57 GMT
 - Subslide functionaly accessible throughout slides
 
 ## 0.3.5
-
 Sun, 03 Mar 2024 23:59:09 GMT
 
 ### Patches
@@ -147,7 +147,6 @@ Sun, 03 Mar 2024 23:59:09 GMT
 - Hot reload improvements
 
 ## 0.3.4
-
 Sun, 14 Jan 2024 21:06:16 GMT
 
 ### Patches
@@ -155,7 +154,6 @@ Sun, 14 Jan 2024 21:06:16 GMT
 - Remove observer in use-modes due to render loops
 
 ## 0.3.3
-
 Thu, 21 Dec 2023 00:50:30 GMT
 
 ### Patches
@@ -163,7 +161,6 @@ Thu, 21 Dec 2023 00:50:30 GMT
 - Use useState over useSharedState for now
 
 ## 0.3.2
-
 Sun, 17 Dec 2023 21:02:31 GMT
 
 ### Patches
@@ -171,7 +168,6 @@ Sun, 17 Dec 2023 21:02:31 GMT
 - Add isShareOnline to useMode
 
 ## 0.3.1
-
 Fri, 15 Dec 2023 00:19:06 GMT
 
 ### Patches
@@ -179,7 +175,6 @@ Fri, 15 Dec 2023 00:19:06 GMT
 - Add modes and fix use-prep-editables import
 
 ## 0.3.0
-
 Thu, 14 Dec 2023 03:11:26 GMT
 
 ### Minor changes
@@ -187,7 +182,6 @@ Thu, 14 Dec 2023 03:11:26 GMT
 - Add use-prep-editable hook and new pdf modes
 
 ## 0.2.2
-
 Tue, 14 Nov 2023 01:02:01 GMT
 
 ### Patches
@@ -195,7 +189,6 @@ Tue, 14 Nov 2023 01:02:01 GMT
 - Always use correct article element
 
 ## 0.2.1
-
 Wed, 18 Oct 2023 05:58:34 GMT
 
 ### Patches
@@ -203,7 +196,6 @@ Wed, 18 Oct 2023 05:58:34 GMT
 - Update content base
 
 ## 0.2.0
-
 Tue, 03 Oct 2023 23:32:09 GMT
 
 ### Minor changes
@@ -211,7 +203,6 @@ Tue, 03 Oct 2023 23:32:09 GMT
 - Allow error page to be overriden
 
 ## 0.1.2
-
 Mon, 04 Sep 2023 04:10:06 GMT
 
 ### Patches
@@ -219,13 +210,11 @@ Mon, 04 Sep 2023 04:10:06 GMT
 - Don't attempt to render image slides
 
 ## 0.1.1
-
 Tue, 11 Jul 2023 22:54:01 GMT
 
 _Version update only_
 
 ## 0.1.0
-
 Tue, 28 Jun 2022 23:37:28 GMT
 
 ### Minor changes
@@ -233,7 +222,6 @@ Tue, 28 Jun 2022 23:37:28 GMT
 - Add support for companywide json
 
 ## 0.0.2
-
 Wed, 01 Jun 2022 00:55:51 GMT
 
 ### Patches
@@ -241,7 +229,7 @@ Wed, 01 Jun 2022 00:55:51 GMT
 - General fixes
 
 ## 0.0.1
-
 Thu, 05 Aug 2021 06:38:32 GMT
 
 _Initial release_
+

package/content-react.build.log

@@ -0,0 +1,4 @@
+Config file "/Users/laurenrui/Development/livepreso/content/content-react/config/rush-project.json" does not exist. Attempting to load via rig.
+
+No rig found for "/Users/laurenrui/Development/livepreso/content/content-react"
+

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";