@livepreso/content-react 0.7.2 → 1.0.0

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,30 +1,30 @@
 {
-	"name": "@livepreso/content-react",
-	"version": "0.7.2",
-	"description": "",
-	"main": "index.js",
-	"scripts": {
-		"build": ""
-	},
-	"publishConfig": {
-		"access": "public"
-	},
-	"keywords": [],
-	"author": "",
-	"license": "ISC",
-	"devDependencies": {
-		"@livepreso/eslint-config": "workspace:*",
-		"eslint": "~9.15.0",
-		"@babel/preset-react": "~7.25.9"
-	},
-	"dependencies": {
-		"react": "~18.2.0",
-		"react-dom": "~18.2.0",
-		"@livepreso/content-base": "workspace:~1.1.8",
-		"ulog": "~2.0.0-beta.18",
-		"lodash.get": "~4.4.2",
-		"lodash.isplainobject": "~4.0.6",
-		"lodash.set": "~4.3.2",
-		"lodash.unescape": "~4.0.1"
-	}
-}
+  "name": "@livepreso/content-react",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "eslint": "~9.15.0",
+    "@babel/preset-react": "~7.25.9",
+    "@livepreso/eslint-config": "1.0.0"
+  },
+  "dependencies": {
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@livepreso/content-base": "~1.1.8",
+    "ulog": "~2.0.0-beta.18",
+    "lodash.get": "~4.4.2",
+    "lodash.isplainobject": "~4.0.6",
+    "lodash.set": "~4.3.2",
+    "lodash.unescape": "~4.0.1"
+  },
+  "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 };
-}