@livepreso/content-react 0.3.8 → 0.4.0

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

@@ -1,5 +1,5 @@
 {
-  "../../content/content-react": "../../content/content-react:NqGkXPM43/K6D7T3XLbV5Ej0Y3f363/umU3YZtBBCIw=:",
+  "../../content/content-react": "../../content/content-react:EzqiqRduP5X0d1LxP9lAJ1h2NzQwqXXZ5qngKBr1MMQ=:",
   "/@babel/helper-annotate-as-pure/7.16.7": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
   "/@babel/helper-module-imports/7.16.7": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
   "/@babel/helper-plugin-utils/7.16.7": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",

package/CHANGELOG.json

@@ -1,6 +1,30 @@
 {
   "name": "@livepreso/content-react",
   "entries": [
+    {
+      "version": "0.4.0",
+      "tag": "@livepreso/content-react_v0.4.0",
+      "date": "Tue, 24 Sep 2024 03:37:23 GMT",
+      "comments": {
+        "minor": [
+          {
+            "comment": "Allow overriding react errors"
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.3.9",
+      "tag": "@livepreso/content-react_v0.3.9",
+      "date": "Fri, 23 Aug 2024 05:02:46 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Company wide editables fixes"
+          }
+        ]
+      }
+    },
     {
       "version": "0.3.8",
       "tag": "@livepreso/content-react_v0.3.8",

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Change Log - @livepreso/content-react
 
-This log was last generated on Wed, 24 Jul 2024 06:53:26 GMT and should not be manually modified.
+This log was last generated on Tue, 24 Sep 2024 03:37:23 GMT and should not be manually modified.
+
+## 0.4.0
+Tue, 24 Sep 2024 03:37:23 GMT
+
+### Minor changes
+
+- Allow overriding react errors
+
+## 0.3.9
+Fri, 23 Aug 2024 05:02:46 GMT
+
+### Patches
+
+- Company wide editables fixes
 
 ## 0.3.8
 Wed, 24 Jul 2024 06:53:26 GMT

package/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useContext, useEffect, useRef } from "react";
 
 import { AppBase } from "@livepreso/content-base";
 import { CompanywideJSON } from "./lib/components/CompanywideJSON.js";
@@ -7,6 +7,18 @@ import { createRoot } from "react-dom/client";
 import errorFn from "@livepreso/content-base/error.js";
 import { useRootSlide } from "./lib/hooks/use-root-slide.js";
 
+function DefaultErrorComponent({ error }) {
+	const slideContext = useContext(SlideContext);
+	const ref = useRef();
+
+	useEffect(() => {
+		const errorRenderer = errorFn(error);
+		errorRenderer(ref.current, slideContext.slideKey);
+	}, []);
+
+	return <div ref={ref} />;
+}
+
 class ErrorBoundary extends React.Component {
 	static getDerivedStateFromError(error) {
 		return { error, hasError: true };
@@ -19,8 +31,8 @@ class ErrorBoundary extends React.Component {
 
 	render() {
 		if (this.state.hasError) {
-			errorFn(this.state.error)(this.props.el);
-			return null;
+			const ErrorComponent = this.props.errorComponent;
+			return <ErrorComponent error={this.state.error} />;
 		}
 		return this.props.children;
 	}
@@ -31,6 +43,8 @@ if (module.hot && typeof window.__deck_roots__ === "undefined") {
 }
 
 export class App extends AppBase {
+	// can be overridden in subclass
+	errorComponent = DefaultErrorComponent;
 	static run(rootApp = null) {
 		const base = new App();
 		if (rootApp) {
@@ -57,8 +71,7 @@ export class App extends AppBase {
 		}
 
 		const RootApp = this.rootApp(Slide);
-
-		function App() {
+		const AppComponent = () => {
 			// TODO: Refactor this to be a prop
 			const slideState = useRootSlide(article);
 
@@ -80,15 +93,16 @@ export class App extends AppBase {
 			return (
 				<SlideContext.Provider value={slideState}>
 					{!slideState.transitions.exited && (
-						<ErrorBoundary el={el}>
+						// eslint-disable-next-line react/no-this-in-sfc
+						<ErrorBoundary errorComponent={this.errorComponent}>
 							<CompanywideJSON>{RootApp}</CompanywideJSON>
 						</ErrorBoundary>
 					)}
 				</SlideContext.Provider>
 			);
-		}
+		};
 
-		root.render(<App />);
+		root.render(<AppComponent />);
 	}
 
 	unmountRoot(key) {

package/lib/components/CompanywideJSON.js

@@ -1,28 +1,25 @@
-import { CompanywideJSONContext } from "../contexts.js";
 import React, { useMemo, useRef, useState } from "react";
 
+import { CWE_JSON_KEY } from "../constants.js";
+import { CompanywideJSONContext } from "../contexts.js";
 import unescape from "lodash.unescape";
+import { useEditableInitialState } from "../hooks/use-editable-initial-state.js";
+import { useSlide } from "../hooks/use-slide.js";
 
 export function CompanywideJSON({ children }) {
-	const cweJsonKey = "cwe-json"
+	const { slideKey } = useSlide();
 	const editableRef = useRef();
-
-	const editableName = window.Bridge.Companywide?.getSlideKeysForArticle?.()?.find(
-		(s) => s.includes(cweJsonKey)
+	const [editableValue, editableName] = useEditableInitialState(
+		`${slideKey}-${CWE_JSON_KEY}`,
+		"{}"
 	);
 
 	let initialState = {};
 
 	try {
-		const result = window.Bridge.Companywide.getWithKeys([editableName]);
-		const data = result[0];
-
-		initialState = JSON.parse(
-			unescape(
-				data?.value || data?.accepted?.value || data?.saved?.value || "{}"
-			)
-		);
+		initialState = JSON.parse(unescape(editableValue));
 	} catch (e) {
+		/* eslint-disable-next-line no-console */
 		console.error(e);
 		// Failed to parse json
 	}
@@ -30,15 +27,10 @@ export function CompanywideJSON({ children }) {
 	const [state, setState] = useState(initialState);
 
 	function updateField(json) {
-		setState(json);
-
-		const currEl = document.activeElement;
-
+		window.$(editableRef.current).text(JSON.stringify(json));
+		window.$(editableRef.current).trigger("save");
 		setTimeout(() => {
-			editableRef.current.focus();
-			if (currEl) {
-				currEl.focus();
-			}
+			setState(json);
 		}, 0);
 	}
 
@@ -63,9 +55,7 @@ export function CompanywideJSON({ children }) {
 						top: -1000,
 						left: -1000,
 					}}
-				>
-					{JSON.stringify(state)}
-				</div>
+				/>
 			)}
 			{children}
 		</CompanywideJSONContext.Provider>

package/lib/constants.js

@@ -0,0 +1 @@
+export const CWE_JSON_KEY = "cwe-json";

package/lib/contexts.js

@@ -2,8 +2,11 @@ import React from "react";
 
 export const SlideContext = React.createContext({
 	transitions: null,
+	slideID: null,
 	slideKey: null,
 	isCurrentSlide: false,
+	isUserTemplate: false,
+	isPMTemplate: false,
 });
 
 export const SubslidesContext = React.createContext({

package/lib/hooks/index.js

@@ -9,3 +9,4 @@ export * from "./use-transitions.js";
 export * from "./use-subslides.js";
 export * from "./use-prep-editable.js";
 export * from "./use-slide-done.js";
+export * from "./use-editable-initial-state.js";

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

@@ -0,0 +1,113 @@
+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.
+ *
+ * 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.
+ * @returns {string} - The constructed field key for the user template.
+ */
+function getUserTemplateFieldKey(key) {
+	const { slideID } = useSlide();
+	const slideNumericID = getSlideNumericID();
+	const isUnsavedTemplate = slideID.indexOf("-tempkey") > -1;
+	const keyPrefix = `${slideID}--${key}`;
+
+	// unsaved user template adds all this on the end
+	if (isUnsavedTemplate) {
+		return `${keyPrefix}-tempkey-${slideNumericID}`;
+	}
+
+	return `${keyPrefix}-adjunct-${slideNumericID}`;
+}
+
+function getUserTemplateData(fieldKey) {
+	const userValues = Bridge.Context.getDict()._userTemplateCMSvals;
+	return 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) || {};
+}
+
+/**
+ * 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.
+ *
+ * @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;
+	let data;
+
+	if (isUserTemplate) {
+		fieldKey = getUserTemplateFieldKey(key);
+		data = getUserTemplateData(fieldKey);
+	} else if (isPMTemplate) {
+		fieldKey = getPMTemplateFieldKey(key);
+		data = getCWEData(fieldKey);
+	} else {
+		data = getCWEData(fieldKey);
+	}
+
+	const value =
+		data?.value || data?.accepted?.value || data?.saved?.value || defaultValue;
+
+	return [value, fieldKey];
+}

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

@@ -17,6 +17,8 @@ import { useSlide } from "../hooks/use-slide";
 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`;
 

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

@@ -22,13 +22,14 @@ const DEFAULT_TRANSITION_STATE = {
  */
 export function useRootSlide(article) {
 	const { isRemote, isClient, isMaster } = useModes();
+	const slideID = article.attr("id");
 	const key = article.data("slide-key");
 	const isCurrent = article.closest(".presoSlide").hasClass("current");
 	const [synced, setSynced] = useState(!isRemote);
 	const [internalSlideState, setInternalSlideState] = useAsyncReference({});
 	const [totalSubslides, setTotalSubslides] = useAsyncReference(0);
 	const [currentSubslide, setCurrentSubslide] = useAsyncReference(
-		totalSubslides ? 1 : null,
+		totalSubslides ? 1 : null
 	);
 	const [subslideAnimating, setSubslideAnimating] = useAsyncReference({
 		up: false,
@@ -139,10 +140,13 @@ export function useRootSlide(article) {
 	return {
 		isSlideReady: slideReady,
 		transitions,
+		slideID,
 		slideKey: key,
 		isCurrentSlide: isCurrent,
 		doneRegister,
 		rootElement: article.get(0),
+		isUserTemplate: slideID.startsWith("adjunct-template-slide"),
+		isPMTemplate: slideID.startsWith("template-slide"),
 
 		registerSubslide: () => setTotalSubslides(totalSubslides.current + 1),
 		unregisterSubslide: () => setTotalSubslides(totalSubslides.current - 1),

package/lib/hooks/use-slide.js

@@ -3,14 +3,28 @@ import { useContext } from "react";
 
 export function useSlide() {
 	const {
+		slideID,
 		slideKey,
 		isSlideReady,
 		doneRegister,
 		isCurrentSlide,
 		totalSubslides,
 		currentSubslide,
-		transitions
+		transitions,
+		isUserTemplate,
+		isPMTemplate,
 	} = useContext(SlideContext);
 
-	return { slideKey, isSlideReady, doneRegister, isCurrentSlide, currentSubslide, totalSubslides, transitions };
+	return {
+		slideID,
+		slideKey,
+		isSlideReady,
+		doneRegister,
+		isCurrentSlide,
+		currentSubslide,
+		totalSubslides,
+		transitions,
+		isUserTemplate,
+		isPMTemplate,
+	};
 }

package/package.json

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