@livepreso/content-react 1.0.1 → 1.1.0

package/.rush/temp/package-deps_build.json

@@ -19,8 +19,8 @@
     "content/content-react/lib/hooks/use-shared-state.js": "0d160ddf3e5dec37849f72f4ec2a1d7aac680159",
     "content/content-react/lib/hooks/use-subslides.js": "508ac21b01a4ece811ebc2db9c6a41ef6071e326",
     "content/content-react/lib/hooks/use-transitions.js": "c9cdf3e8af82b8f8a51e99ee670334cc5c7c42c1",
-    "content/content-react/package.json": "1bed2af8c66bfa4ad2540e0e001cea26109435eb",
-    "content/content-react/.rush/temp/shrinkwrap-deps.json": "b1ad1f22903e0092d2fa7647b96a86692d3accaf"
+    "content/content-react/package.json": "829ec6db57241917d8f143d522ff22d62d4dbcc0",
+    "content/content-react/.rush/temp/shrinkwrap-deps.json": "597fd3e1925904d69b27c3bc319a49733033c2b1"
   },
   "arguments": ""
 }

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

@@ -61,7 +61,7 @@
   "/concat-map@0.0.1": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
   "/convert-source-map@2.0.0": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
   "/cross-spawn@7.0.6": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-  "/debug@4.3.7(supports-color@5.5.0)": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+  "/debug@4.3.7(supports-color@8.1.1)": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
   "/deep-is@0.1.4": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
   "/electron-to-chromium@1.5.65": "sha512-PWVzBjghx7/wop6n22vS2MLU8tKGd4Q91aCEGhG/TYmW6PP5OcSXcdnxTe1NNt0T66N8D6jxh4kC8UsdzOGaIw==",
   "/escalade@3.2.0": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
@@ -86,7 +86,6 @@
   "/glob-parent@6.0.2": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
   "/globals@11.12.0": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
   "/globals@14.0.0": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
-  "/has-flag@3.0.0": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
   "/has-flag@4.0.0": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
   "/ignore@5.3.2": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
   "/import-fresh@3.3.0": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
@@ -134,8 +133,8 @@
   "/shebang-command@2.0.0": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
   "/shebang-regex@3.0.0": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
   "/strip-json-comments@3.1.1": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-  "/supports-color@5.5.0": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
   "/supports-color@7.2.0": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+  "/supports-color@8.1.1": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
   "/type-check@0.4.0": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
   "/ulog@2.0.0-beta.19": "sha512-27YIp4dUwaJQTh7ovk60wWjBMVV/AXMZhSVftkU7HMjaPc1t8wO5u6hVVUyBTyGKrLxYmR0v34Iihq8mE26LUg==",
   "/update-browserslist-db@1.1.1(browserslist@4.24.2)": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==",

package/CHANGELOG.json

@@ -1,6 +1,38 @@
 {
   "name": "@livepreso/content-react",
   "entries": [
+    {
+      "version": "1.1.0",
+      "tag": "@livepreso/content-react_v1.1.0",
+      "date": "Tue, 08 Jul 2025 01:48:30 GMT",
+      "comments": {
+        "minor": [
+          {
+            "comment": "Add support for getting/setting cmsvals (and user templates)"
+          }
+        ],
+        "patch": [
+          {
+            "comment": "User templates temp key correctly regexed"
+          },
+          {
+            "comment": "useSlideContext always updates state on context change"
+          }
+        ]
+      }
+    },
+    {
+      "version": "1.0.2",
+      "tag": "@livepreso/content-react_v1.0.2",
+      "date": "Wed, 25 Jun 2025 23:57:00 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Deal with alphanumeric ids for temp keys"
+          }
+        ]
+      }
+    },
     {
       "version": "1.0.1",
       "tag": "@livepreso/content-react_v1.0.1",

package/CHANGELOG.md

@@ -1,6 +1,25 @@
 # Change Log - @livepreso/content-react
 
-This log was last generated on Thu, 12 Jun 2025 03:07:46 GMT and should not be manually modified.
+This log was last generated on Tue, 08 Jul 2025 01:48:30 GMT and should not be manually modified.
+
+## 1.1.0
+Tue, 08 Jul 2025 01:48:30 GMT
+
+### Minor changes
+
+- Add support for getting/setting cmsvals (and user templates)
+
+### Patches
+
+- User templates temp key correctly regexed
+- useSlideContext always updates state on context change
+
+## 1.0.2
+Wed, 25 Jun 2025 23:57:00 GMT
+
+### Patches
+
+- Deal with alphanumeric ids for temp keys
 
 ## 1.0.1
 Thu, 12 Jun 2025 03:07:46 GMT

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/eslint.config.mjs

@@ -8,5 +8,8 @@ export default [
 				Bridge: true,
 			},
 		},
+		rules: {
+			"no-console": "off",
+		},
 	},
 ];

package/index.js

@@ -57,30 +57,29 @@ export class App extends AppBase {
 
 	defaultRenderer(Slide, article) {
 		const el = article.get(0);
+		const id = el.id;
 
-		if (window.__deck_roots__[el.id]) {
-			this.unmountRoot(el.id);
+		if (window.__deck_roots__[id]) {
+			this.unmountRoot(id);
 		}
 
 		const root = createRoot(el);
 
-		window.__deck_roots__[el.id] = root;
+		window.__deck_roots__[id] = root;
+
+		function slideClosed() {
+			root.unmount();
+			delete window.__deck_roots__[id];
+			article.off("slide:closed", slideClosed);
+		}
+
+		article.on("slide:closed", slideClosed);
 
 		const RootApp = this.rootApp(Slide);
 		const AppComponent = () => {
 			// TODO: Refactor this to be a prop
 			const slideState = useRootSlide(article);
 
-			useEffect(() => {
-				function slideClosed() {
-					root.unmount();
-					delete window.__deck_roots__[el.id];
-					article.off("slide:closed", slideClosed);
-				}
-
-				article.on("slide:closed", slideClosed);
-			}, []);
-
 			return (
 				<SlideContext.Provider value={slideState}>
 					{!slideState.transitions.exited && (

package/lib/components/CompanywideJSON.js

@@ -4,7 +4,7 @@ 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 { useSlide } from "../hooks/slide.js";
 import { getCWEJSONKey, testCWEJSONExists } from "../utils.js";
 
 /**

package/lib/components/OverlayPortal.js

@@ -0,0 +1,10 @@
+import { useTransitions } from "../hooks";
+import { createPortal } from "react-dom";
+
+export function OverlayPortal({ children }) {
+	const { entered, exiting, exited } = useTransitions();
+	if ((!entered && !exiting) || exited) {
+		return;
+	}
+	return createPortal(children, window.Bridge.UI.overlay);
+}

package/lib/components/index.js

@@ -2,3 +2,4 @@ export * from "./Subslide.js";
 export * from "./Subslides.js";
 export * from "./ScrollableArea.js";
 export * from "./CompanywideJSON.js";
+export * from "./OverlayPortal.js";

package/lib/contexts.js

@@ -6,6 +6,7 @@ export const SlideContext = React.createContext({
 	slideKey: null,
 	isCurrentSlide: false,
 	isUserTemplate: false,
+	isUserTemplateLibrary: false,
 	isPMTemplate: false,
 });
 

package/lib/hooks/cmsvals.js

@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useState } from "react";
+import { useTransitions } from "./use-transitions";
+import { useSlideContext } from "./use-slide-context.js";
+import { useSlide, useSlideModel } from "./slide.js";
+import { useModes } from "./use-modes.js";
+
+function useUserTemplateCMS(name) {
+	const { slideID, presentationKey, isUserTemplate, isUserTemplateLibrary } =
+		useSlide();
+
+	let contextKey;
+
+	if (isUserTemplate) {
+		contextKey = `_userTemplateCMSvals.${slideID}--${name}-${presentationKey}`;
+	} else if (isUserTemplateLibrary) {
+		contextKey = `_userTemplateCMSvals.${presentationKey}--${name}`;
+	}
+
+	const [obj, setValue] = useSlideContext(
+		contextKey,
+		{ mime: "text/plain", value: null },
+		{ enabled: !!contextKey },
+	);
+
+	return [
+		obj?.value ?? null,
+		contextKey
+			? (value) => setValue({ value, mime: "text/plain" })
+			: () => {
+					console.warn("Not a user template, can't set value");
+				},
+	];
+}
+
+function useDefaultCMSValueFromPresomanager(name, { slidePath = null } = {}) {
+	const { isPresomanager } = useModes();
+	const model = useSlideModel({ slidePath });
+
+	let key;
+	if (model.autoAdjunctID) {
+		key = `${name}-autoadjunct-${model.autoAdjunctID}`;
+	} else {
+		key = name;
+	}
+
+	const [cmsVals] = useSlideContext(
+		"_cmsVals",
+		{ mime: "text/plain", value: null },
+		// TODO: Presets? Previews?
+		{ enabled: !isPresomanager },
+	);
+
+	return cmsVals?.find?.((c) => c.key === key)?.value ?? null;
+}
+
+export function useCMSVal(name, { enabled = true, slidePath = null } = {}) {
+	const { entered, entering } = useTransitions();
+	const { isPresomanager } = useModes();
+	const { isUserTemplate, isUserTemplateLibrary } = useSlide();
+	const [userTemplateValue, setUserTemplateValue] = useUserTemplateCMS(name);
+	const defaultFromPM = useDefaultCMSValueFromPresomanager(name, { slidePath });
+
+	// We need to make sure we aren't trying to call this bridge command
+	// (which can be specific to this slide) while it's being removed,
+	// otherwise we might throw warnings about missing cmsval keys.
+	const isActiveSlide = entered || entering;
+
+	const getCmsVal = useCallback(() => {
+		if (!enabled || !name || !isActiveSlide) {
+			return undefined;
+		}
+
+		if (isUserTemplate || isUserTemplateLibrary) {
+			return userTemplateValue;
+		}
+
+		if (!isPresomanager) {
+			return defaultFromPM;
+		}
+
+		return Bridge.CMSVals.get(name, { slidePath });
+	}, [
+		enabled,
+		name,
+		defaultFromPM,
+		isUserTemplate,
+		isUserTemplateLibrary,
+		isActiveSlide,
+		isPresomanager,
+	]);
+
+	const [value, setCMSValue] = useState(getCmsVal());
+
+	function updateCMSVal(value) {
+		if (isUserTemplate) {
+			setUserTemplateValue(value);
+		} else {
+			Bridge.CMSVals.set(name, value, { slidePath });
+		}
+		setCMSValue(value);
+	}
+
+	useEffect(() => {
+		if (!enabled || !isActiveSlide) {
+			return;
+		}
+
+		function onCMSValChanged(key, newValue) {
+			const fullKey = Bridge.CMSVals.getFullKey(name, { slidePath });
+
+			if (key !== fullKey) {
+				return;
+			}
+
+			setCMSValue(newValue);
+		}
+
+		Bridge.presenter.getPresentation().on("cmsValChanged", onCMSValChanged);
+
+		return () => {
+			Bridge.presenter.getPresentation().off("cmsValChanged", onCMSValChanged);
+		};
+	}, [enabled, name, getCmsVal]);
+
+	return [value, updateCMSVal];
+}

package/lib/hooks/cwe-editable.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 
 import { useModes } from "./use-modes";
-import { useSlide } from "./use-slide";
+import { useSlide } from "./slide";
 import { useEditableFieldKey } from "./use-editable-field-key";
 import { getCWEData, getUserTemplateData } from "../utils";
 
@@ -41,11 +41,6 @@ export function useCWEEditableInfo(id) {
 
 	function updateValue() {
 		const newValue = getValue();
-
-		if (value === newValue) {
-			return;
-		}
-
 		setValue(newValue);
 	}
 

package/lib/hooks/index.js

@@ -4,11 +4,16 @@ export { useAsyncReference } from "./use-async-reference.js";
 export { useModes } from "./use-modes.js";
 export { useSlideContext } from "./use-slide-context.js";
 export { useCompanywide } from "./use-companywide.js";
-export { useSlide } from "./use-slide.js";
+export { useSlideModel, useSlide } from "./slide.js";
 export { useTransitions } from "./use-transitions.js";
 export { useSubslides } from "./use-subslides.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 {
+	usePrepEditable,
+	usePrepEditableInfo,
+	usePrepEditableValue,
+} from "./prep-editable.js";
 export { useCWEEditableInfo, useCWEEditableValue } from "./cwe-editable.js";
+export { useCMSVal } from "./cmsvals.js";

package/lib/hooks/prep-editable.js

@@ -1,9 +1,37 @@
-import { useCallback, useEffect, useState } from "react";
-
 import { useModes } from "./use-modes";
-import { useSlide } from "./use-slide";
+import { useSlide } from "./slide";
+import { useSlideContext } from "./use-slide-context";
 import { useEditableFieldKey } from "./use-editable-field-key";
 
+/**
+ * Get and set values for use by templates, in a way that it will magically
+ * work with user templates especially. Values get placed in a special part
+ * of the context to allow the user template magic to work, and this is the
+ * function to use to make that seamless.
+ */
+export function usePrepEditable(editableKey) {
+	const { isPresomanager } = useModes();
+	const { slideID, isUserTemplateLibrary } = useSlide();
+
+	const key = useEditableFieldKey(editableKey, { isPrep: true });
+
+	const prepKey = `${slideID}--${key}`;
+	const keyPath = `_editableContent.${prepKey}`;
+
+	const [obj, setObj] = useSlideContext(
+		keyPath,
+		{
+			mime: "text/plain",
+			value: null,
+		},
+		{
+			enabled: !isPresomanager || isUserTemplateLibrary,
+		},
+	);
+
+	return [obj?.value ?? null, (value) => setObj({ mime: "text/plain", value })];
+}
+
 /**
  * Returns information about a prep editable on the current slide.
  *
@@ -12,7 +40,7 @@ import { useEditableFieldKey } from "./use-editable-field-key";
  *
  * Example:
  *
- *  usePrepEditable("test");
+ *  usePrepEditableInfo("test");
  *  => {
  *     key: "test",
  *     value: "User edited text",
@@ -20,49 +48,13 @@ import { useEditableFieldKey } from "./use-editable-field-key";
  *  }
  */
 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]);
+	const [value] = usePrepEditable(id);
 
 	return {
 		key,
 		value: value,
 		hasValue: value !== null,
-		updateValue,
 	};
 }
 
@@ -70,5 +62,6 @@ export function usePrepEditableInfo(id) {
  * Returns the current value of a prep editable on the current slide.
  */
 export function usePrepEditableValue(id, defaultValue = null) {
-	return usePrepEditableInfo(id).value ?? defaultValue;
+	const [value] = usePrepEditable(id);
+	return value ?? defaultValue;
 }

package/lib/hooks/{use-slide.js → slide.js}

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { SlideContext } from "../contexts.js";
 import { useContext } from "react";
 
@@ -13,6 +14,7 @@ export function useSlide() {
 		currentSubslide,
 		transitions,
 		isUserTemplate,
+		isUserTemplateLibrary,
 		isPMTemplate,
 	} = useContext(SlideContext);
 
@@ -27,6 +29,19 @@ export function useSlide() {
 		totalSubslides,
 		transitions,
 		isUserTemplate,
+		isUserTemplateLibrary,
 		isPMTemplate,
 	};
 }
+
+export function useSlideModel({ slidePath = null } = {}) {
+	const { slideID } = useSlide();
+
+	return useMemo(() => {
+		const presentation = Bridge.presenter.getPresentation();
+		if (slidePath) {
+			return presentation.search(slidePath);
+		}
+		return presentation.current;
+	}, [slidePath, slideID]);
+}

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

@@ -1,4 +1,4 @@
-import { useSlide } from "./use-slide.js";
+import { useSlide } from "./slide.js";
 import { getPMTemplateFieldKey, getUserTemplateFieldKey } from "../utils.js";
 
 /**

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

@@ -1,4 +1,4 @@
-import { useSlide } from "./use-slide.js";
+import { useSlide } from "./slide.js";
 import { useEditableFieldKey } from "./use-editable-field-key.js";
 import { getCWEData, getUserTemplateData } from "../utils.js";
 

package/lib/hooks/use-modes.js

@@ -12,10 +12,11 @@ export function useModes() {
 	const isPreview = bodyClasses.includes("preview");
 	const isPresent = bodyClasses.includes("present");
 	const isReview = bodyClasses.includes("review");
-	// 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 isPresomanager =
+		// 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.
+		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-root-slide.js

@@ -115,26 +115,32 @@ export function useRootSlide(article) {
 		const slideEntered = updateState("entered");
 		const slideExiting = updateState("exiting");
 		const slideExited = updateState("exited");
-
-		article.off();
-		article.on("slide:entering", slideEntering);
-		article.on("slide:entered", slideEntered);
-		article.on("slide:exiting", slideExiting);
-		article.on("slide:exited", slideExited);
-		article.on("slide:closed", () => {
+		const slideClosed = () => {
 			doneRegister.current.promises = [];
-		});
-		article.on("slideready", (e, done) => {
+		};
+		const slideReady = (e, done) => {
 			Promise.all(doneRegister.current.promises).then(() => {
 				done();
 			});
 
 			setSlideReady(true);
 			slideEntered(e);
-		});
+		};
+
+		article.on("slide:entering", slideEntering);
+		article.on("slide:entered", slideEntered);
+		article.on("slide:exiting", slideExiting);
+		article.on("slide:exited", slideExited);
+		article.on("slide:closed", slideClosed);
+		article.on("slideready", slideReady);
 
 		return () => {
-			article.off();
+			article.off("slide:entering", slideEntering);
+			article.off("slide:entered", slideEntered);
+			article.off("slide:exiting", slideExiting);
+			article.off("slide:exited", slideExited);
+			article.off("slide:closed", slideClosed);
+			article.off("slideready", slideReady);
 		};
 	}, [slideReady]);
 
@@ -161,6 +167,8 @@ export function useRootSlide(article) {
 		doneRegister,
 		rootElement: article.get(0),
 		isUserTemplate: slideID.startsWith("adjunct-template-slide"),
+		isUserTemplateLibrary:
+			slideID.startsWith("template-") && !slideID.startsWith("template-slide"),
 		isPMTemplate: slideID.startsWith("template-slide"),
 
 		registerSubslide: () => setTotalSubslides(totalSubslides.current + 1),

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

@@ -3,28 +3,24 @@ 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) {
-		return Bridge.Context.get(path, defaultValue);
-	}
-
-	return context;
-}
-
-export function useSlideContext(contextPath = null, defaultValue = null) {
+export function useSlideContext(
+	contextPath = null,
+	defaultValue = null,
+	{ enabled = true } = {},
+) {
 	let persist = false;
 	let path = contextPath;
 
 	const { isPresomanager } = useModes();
 
+	// useCallback to prevent useEffect from re-rendering
 	const getValue = useCallback(() => {
-		return getValueFromContext(
-			window.Bridge.Context.getDict(),
-			path,
-			defaultValue,
-		);
+		if (path) {
+			return window.Bridge.Context.get(path, defaultValue);
+		}
+
+		return window.Bridge.Context.getDict();
 	}, [path, defaultValue]);
 
 	const [context, setContextState] = useState(getValue);
@@ -37,6 +33,10 @@ export function useSlideContext(contextPath = null, defaultValue = null) {
 	}
 
 	function setContext(key, data) {
+		if (!enabled) {
+			return;
+		}
+
 		let setPath = key;
 		let setData = data;
 
@@ -53,11 +53,10 @@ export function useSlideContext(contextPath = null, defaultValue = null) {
 	}
 
 	useEffect(() => {
-		if (isPresomanager) return;
+		if (isPresomanager || !enabled) return;
 
 		function onContextChange() {
 			const newValue = getValue();
-			if (isEqual(context, newValue)) return;
 			setContextState(newValue);
 		}
 
@@ -66,7 +65,7 @@ export function useSlideContext(contextPath = null, defaultValue = null) {
 		return () => {
 			Bridge.presenter.getPresentation().off("change:context", onContextChange);
 		};
-	}, [isPresomanager, context, getValue]);
+	}, [enabled, isPresomanager, context, getValue]);
 
 	return [context, setContext];
 }

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

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useCallback } from "react";
-import { useSlide } from "./use-slide";
+import { useSlide } from "./slide";
 
 export function useSlideDone() {
 	const { doneRegister } = useSlide();

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

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useSlide } from "./use-slide";
+import { useSlide } from "./slide";
 
 export function useSlideReady(fn) {
 	const { isSlideReady } = useSlide();

package/lib/hooks/use-subslides.js

@@ -1,7 +1,7 @@
 import { SlideContext, SubslideContext } from "../contexts.js";
 
 import { useContext } from "react";
-import { useSlide } from "./use-slide";
+import { useSlide } from "./slide.js";
 
 export function useSubslides() {
 	const context = useContext(SubslideContext);

package/lib/hooks/use-transitions.js

@@ -3,12 +3,14 @@ import { useContext } from "react";
 import { useModes } from "./index.js";
 
 export function useTransitions() {
-  const { isScreenshot } = useModes();
-  const { entering, exiting, entered } = useContext(SlideContext).transitions;
+	const { isScreenshot } = useModes();
+	const { entering, exiting, exited, entered } =
+		useContext(SlideContext).transitions;
 
-  return {
-    entering: isScreenshot ? false : entering,
-    exiting: isScreenshot ? false : exiting,
-    entered: isScreenshot ? true : entered,
-  };
+	return {
+		entering: isScreenshot ? false : entering,
+		exiting: isScreenshot ? false : exiting,
+		entered: isScreenshot ? true : entered,
+		exited,
+	};
 }

package/lib/utils.js

@@ -52,8 +52,8 @@ export function testCWEJSONExists({
  * Results are used when composing field keys for PM templates
  * and user templates, eg. getPMTemplateFieldKey() and getUserTemplateFieldKey().
  */
-function getSlideNumericID(slideID) {
-	const numericRegex = /-(\d+)(?:-temp)*$/;
+function getSlideID(slideID) {
+	const numericRegex = /-(\d\w+)(?:-temp)*$/;
 	return slideID.match(numericRegex)?.[1];
 }
 
@@ -72,7 +72,7 @@ function getSlideNumericID(slideID) {
  * @returns {string} - The constructed field key for the PM template.
  */
 export function getPMTemplateFieldKey(key, slideID) {
-	const slideNumericID = getSlideNumericID(slideID);
+	const slideNumericID = getSlideID(slideID);
 	// example: image_plus_text_columns-options-autoadjunct-767-temp
 	const isUnsavedTemplate = slideID.indexOf("-temp") > -1;
 	const templateFieldKey = `${key}-autoadjunct-${slideNumericID}`;
@@ -99,11 +99,15 @@ export function getPMTemplateFieldKey(key, slideID) {
  * @returns {string} - The constructed field key for the user template.
  */
 export function getUserTemplateFieldKey(key, slideID) {
-	const slideNumericID = getSlideNumericID(slideID);
+	const numericRegex = /-(\d+)(?:-temp)*$/;
+	const slideNumericID = slideID.match(numericRegex)?.[1];
+
 	const isUnsavedTemplate = slideID.indexOf("-tempkey") > -1;
 
 	if (isUnsavedTemplate) {
-		return `${key}-tempkey-${slideNumericID}`;
+		const numericRegex = /tempkey-((?:[\d\w])+)/;
+		const tempID = slideID.match(numericRegex)?.[1];
+		return `${key}-tempkey-${tempID}`;
 	}
 
 	return `${key}-adjunct-${slideNumericID}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepreso/content-react",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "",
   "main": "index.js",
   "publishConfig": {

package/.rush/temp/package-deps_test.json

@@ -1,26 +0,0 @@
-{
-  "files": {
-    "content/content-react/.rush/temp/shrinkwrap-deps.json": "4645c4e5204fbf6e4b13573ceeacb3c093ff7a90",
-    "content/content-react/.eslintrc.js": "6245fc28bbe1102d1b4c2a1db96a508e6221f6bd",
-    "content/content-react/.stylelintrc": "5c129c044fdf8b0dfd92da7860ea25f60bcde085",
-    "content/content-react/CHANGELOG.json": "001e63a228a710a99d8534c5bc38ddf662946eed",
-    "content/content-react/CHANGELOG.md": "b5932d45a8c6fcebf4267435c93a9d98a153242e",
-    "content/content-react/index.js": "826cec91ed8d4b018b33a847b4df6a3e8631d220",
-    "content/content-react/lib/components/ScrollableArea.js": "ee97a6ce605c2071f879382d1f347fe4fed83ee4",
-    "content/content-react/lib/components/ScrollableArea.module.scss": "74543f283eb2db0b67d70ffe0d068e03a1131573",
-    "content/content-react/lib/components/Subslide.js": "ddec8751b9a86d0cc5f587ec31d7d426f42648c5",
-    "content/content-react/lib/components/Subslides.js": "764d5901525bab61b8f72dc4fe399a356b185e12",
-    "content/content-react/lib/components/index.js": "f233f0e270fc648dc9c8ae2abfa93bd9e8ccdc01",
-    "content/content-react/lib/contexts.js": "59a0173397a32c788c0d61ee317741fe0a9c9bee",
-    "content/content-react/lib/hooks/index.js": "6fcf567354b94f0ab3fb0e2c4bf502cd5a81429e",
-    "content/content-react/lib/hooks/use-async-reference.js": "23e3eeff2b87b530d40129a049996a5fe76e34c6",
-    "content/content-react/lib/hooks/use-context.js": "3f697379e6ee9790ba6b4ae96ad6d6c2ba20a669",
-    "content/content-react/lib/hooks/use-modes.js": "ad8e27b3659b0fcf6fbe79333ccec86d690ed983",
-    "content/content-react/lib/hooks/use-root-slide.js": "98ce55032605df9507467b32f7969355318330f4",
-    "content/content-react/lib/hooks/use-shared-state.js": "0d160ddf3e5dec37849f72f4ec2a1d7aac680159",
-    "content/content-react/lib/hooks/use-subslides.js": "508ac21b01a4ece811ebc2db9c6a41ef6071e326",
-    "content/content-react/lib/hooks/use-transitions.js": "c9cdf3e8af82b8f8a51e99ee670334cc5c7c42c1",
-    "content/content-react/package.json": "1bed2af8c66bfa4ad2540e0e001cea26109435eb"
-  },
-  "arguments": ""
-}