@livepreso/content-react 2.3.1 → 3.0.0

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

@@ -13,7 +13,12 @@ export function useEditableFieldKey(key) {
 	const presomanagerTemplateKey = getPMTemplateFieldKey(key, slideID);
 	const userTemplateKey = getUserTemplateFieldKey(key, slideID);
 
-	if (isUserTemplate) return userTemplateKey;
-	if (isPMTemplate) return presomanagerTemplateKey;
+	if (isUserTemplate) {
+		return userTemplateKey;
+	}
+
+	if (isPMTemplate) {
+		return presomanagerTemplateKey;
+	}
 	return key;
 }

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

@@ -164,8 +164,8 @@ export function useRootSlide(article) {
 		// If for whatever reason this isn't in the dom, we fall back to the ID.
 		presentationKey,
 
-		// This is the data-slide-path on the article. Slide path represented as
-		// "deck/section/slide". Useful for Bridge commands that require a path.
+		// Reads data-slide-path from the article, in the form
+		// "deck/section/slide", which is the form Bridge commands expect.
 		slidePath,
 
 		isCurrentSlide: isCurrent,

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

@@ -54,18 +54,22 @@ export function useSlideContext(
 	}
 
 	useEffect(() => {
-		if (isPresomanager || !enabled) return;
+		if (isPresomanager || !enabled) {
+			return;
+		}
 
 		function onContextChange() {
 			const newValue = getValue();
-			if (isEqual(newValue, context)) return;
+			if (isEqual(newValue, context)) {
+				return;
+			}
 			setContextState(newValue);
 		}
 
-		Bridge.presenter.getPresentation().on("change:context", onContextChange);
+		Bridge.Context.on("changed", onContextChange);
 
 		return () => {
-			Bridge.presenter.getPresentation().off("change:context", onContextChange);
+			Bridge.Context.off("changed", onContextChange);
 		};
 	}, [enabled, isPresomanager, context, getValue]);
 

package/lib/hooks/use-target-key.js

@@ -0,0 +1,25 @@
+import { useSlide } from "./slide.js";
+
+const TEMPLATE_PREFIX = /^template-/;
+
+/**
+ * The key of the slide, section or template being rendered, spelled the way
+ * `project.yaml` spells it.
+ *
+ * This is what a declared editable's `{targetKey}` resolves to, so a component
+ * using one hands it to `resolveEditable`:
+ *
+ *   const { attrs } = resolveEditable(editable, props, {
+ *       targetKey: useTargetKey(),
+ *   });
+ *
+ * It exists rather than each component reaching into `useSlide` itself because
+ * a slide carries an id as well as a key. Keying a field off the wrong one
+ * stores it somewhere nothing reads, and nothing about the resulting key looks
+ * wrong enough to notice.
+ */
+export function useTargetKey() {
+	const { slideKey } = useSlide();
+
+	return slideKey.replace(TEMPLATE_PREFIX, "");
+}

package/lib/hooks/use-target-key.spec.js

@@ -0,0 +1,23 @@
+import { useSlide } from "./slide.js";
+import { useTargetKey } from "./use-target-key.js";
+
+jest.mock("./slide.js", () => ({ useSlide: jest.fn() }));
+
+describe("useTargetKey", () => {
+	// A slide carries an id as well as a key, and they are different things. A
+	// field keyed by the wrong one stores somewhere nothing reads, which is the
+	// mistake this hook exists to stop each content library making for itself.
+	it("answers with the slide's key rather than anything else it carries", () => {
+		useSlide.mockReturnValue({ slideKey: "a-target", slideID: "an-id" });
+
+		expect(useTargetKey()).toBe("a-target");
+	});
+
+	// The prefix belongs to the runtime, not to the deck's own vocabulary, and a
+	// key composed with it in would not match what project.yaml registers.
+	it("drops the prefix a template's key arrives with", () => {
+		useSlide.mockReturnValue({ slideKey: "template-a-target" });
+
+		expect(useTargetKey()).toBe("a-target");
+	});
+});

package/lib/utils.js

@@ -39,9 +39,14 @@ export function testCWEJSONExists({
 
 	const presomanagerTemplateKey = getPMTemplateFieldKey(key, slideID);
 	const userTemplateKey = getUserTemplateFieldKey(key, slideID);
+	if (isUserTemplate) {
+		return cweKeys.includes(userTemplateKey);
+	}
+
+	if (isPMTemplate) {
+		return cweKeys.includes(presomanagerTemplateKey);
+	}
 
-	if (isUserTemplate) return cweKeys.includes(userTemplateKey);
-	if (isPMTemplate) return cweKeys.includes(presomanagerTemplateKey);
 	return cweKeys.includes(key);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepreso/content-react",
-  "version": "2.3.1",
+  "version": "3.0.0",
   "description": "",
   "main": "index.js",
   "publishConfig": {
@@ -11,7 +11,11 @@
   "license": "ISC",
   "devDependencies": {
     "eslint": "~9.15.0",
+    "@babel/core": "~7.26.0",
+    "@babel/preset-env": "^7.14.9",
     "@babel/preset-react": "~7.25.9",
+    "babel-jest": "~29.7.0",
+    "jest": "~29.7.0",
     "@livepreso/eslint-config": "1.0.0"
   },
   "peerDependencies": {
@@ -19,15 +23,17 @@
     "react-dom": ">= 18.0.0 <= 19.x"
   },
   "dependencies": {
-    "@livepreso/content-base": "~1.1.8",
+    "@livepreso/content-base": "~2.0.0",
     "ulog": "~2.0.0-beta.19",
     "lodash.get": "~4.4.2",
     "lodash.isplainobject": "~4.0.6",
     "lodash.set": "~4.3.2",
     "lodash.unescape": "~4.0.1",
-    "lodash.isequal": "~4.5.0"
+    "lodash.isequal": "~4.5.0",
+    "@livepreso/webpack-deck": "4.0.0"
   },
   "scripts": {
-    "build": ""
+    "build": "",
+    "test": "jest --maxWorkers=2 --workerIdleMemoryLimit=512MB"
   }
 }

package/test/project.json

@@ -0,0 +1,3 @@
+{
+	"key": "a-deck"
+}