@uniformdev/canvas-react 19.21.0 → 19.22.1-alpha.8

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import React$1, { Key, ReactNode, PropsWithChildren } from 'react';
+import * as _uniformdev_canvas from '@uniformdev/canvas';
 import { ComponentInstance, RootComponentInstance, UpdateCompositionMessage, SubscribeToCompositionOptions } from '@uniformdev/canvas';
 export { createUniformApiEnhancer } from '@uniformdev/canvas';
 import { RichTextNode } from '@uniformdev/richtext';
@@ -353,6 +354,24 @@ type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToCompositionOptio
 /** Hook to manage a subscription to a realtime event on a composition */
 declare function useCompositionEventEffect({ enabled, projectId, compositionId, effect, }: UseCompositionEventEffectOptions): void;
 
+type UseUniformContextualEditingStateProps = {
+    /**
+     * When set to true, the hook will return the global contextual state no matter where its used.
+     * When set to false, it will return only the state relevant to the current component (determined using `useUniformCurrentComponent`).
+     * @default false
+     **/
+    global?: boolean;
+};
+/**
+ * Returns the state of contextual editing, when the app is open inside Canvas Editor.
+ * This hook can be used to improve the editing experience of your team.
+ * For example: You can use `selectedComponentReference` to control which element to show inside a carousel or an accordion.
+ */
+declare const useUniformContextualEditingState: ({ global, }?: UseUniformContextualEditingStateProps) => {
+    isContextualEditing: boolean;
+    selectedComponentReference: Omit<_uniformdev_canvas.ContextualEditingComponentReference, "elements"> | undefined;
+};
+
 declare const componentStore: ComponentStore;
 declare const registerUniformComponent: ({ type, variantId, component, }: {
     type: string;
@@ -369,4 +388,4 @@ declare const createComponentStoreResolver: (options: {
     defaultComponent?: React$1.ComponentType<ComponentProps<any>>;
 }) => RenderComponentResolver;
 
-export { ComponentProps, ComponentStore, DefaultNotImplementedComponent, GetParameterAttributesProps, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };
+export { ComponentProps, ComponentStore, DefaultNotImplementedComponent, GetParameterAttributesProps, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.esm.js

@@ -791,6 +791,53 @@ function useCompositionEventEffect({
     };
   }, [compositionId, enabled, projectId, effect]);
 }
+
+// src/hooks/useUniformContextualEditingState.ts
+import {
+  createCanvasChannel as createCanvasChannel2,
+  isUpdateContextualEditingStateInternalMessage
+} from "@uniformdev/canvas";
+import { useEffect as useEffect3, useMemo as useMemo4, useState as useState3 } from "react";
+var useUniformContextualEditingState = ({
+  global = false
+} = {}) => {
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const { data: componentData } = useUniformCurrentComponent();
+  const [selectedComponentReference, setSelectedComponentReference] = useState3();
+  const channel = useMemo4(() => {
+    if (!isContextualEditing) {
+      return;
+    }
+    const channel2 = createCanvasChannel2({
+      broadcastTo: [window],
+      listenTo: [window]
+    });
+    return channel2;
+  }, [isContextualEditing]);
+  useEffect3(() => {
+    if (!channel) {
+      return;
+    }
+    const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
+      var _a;
+      if (!isUpdateContextualEditingStateInternalMessage(message)) {
+        return;
+      }
+      if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
+        setSelectedComponentReference(void 0);
+        return;
+      }
+      setSelectedComponentReference(message.state.selectedComponentReference);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [global, channel, componentData == null ? void 0 : componentData._id]);
+  return {
+    isContextualEditing,
+    selectedComponentReference
+  };
+};
 export {
   DefaultNotImplementedComponent,
   NOT_IMPLEMENTED_COMPONENT,
@@ -809,6 +856,7 @@ export {
   registerUniformComponent,
   useCompositionEventEffect,
   useUniformContextualEditing,
+  useUniformContextualEditingState,
   useUniformCurrentComponent,
   useUniformCurrentComposition
 };

package/dist/index.js

@@ -47,6 +47,7 @@ __export(src_exports, {
   registerUniformComponent: () => registerUniformComponent,
   useCompositionEventEffect: () => useCompositionEventEffect,
   useUniformContextualEditing: () => useUniformContextualEditing,
+  useUniformContextualEditingState: () => useUniformContextualEditingState,
   useUniformCurrentComponent: () => useUniformCurrentComponent,
   useUniformCurrentComposition: () => useUniformCurrentComposition
 });
@@ -818,6 +819,50 @@ function useCompositionEventEffect({
     };
   }, [compositionId, enabled, projectId, effect]);
 }
+
+// src/hooks/useUniformContextualEditingState.ts
+var import_canvas8 = require("@uniformdev/canvas");
+var import_react19 = require("react");
+var useUniformContextualEditingState = ({
+  global = false
+} = {}) => {
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const { data: componentData } = useUniformCurrentComponent();
+  const [selectedComponentReference, setSelectedComponentReference] = (0, import_react19.useState)();
+  const channel = (0, import_react19.useMemo)(() => {
+    if (!isContextualEditing) {
+      return;
+    }
+    const channel2 = (0, import_canvas8.createCanvasChannel)({
+      broadcastTo: [window],
+      listenTo: [window]
+    });
+    return channel2;
+  }, [isContextualEditing]);
+  (0, import_react19.useEffect)(() => {
+    if (!channel) {
+      return;
+    }
+    const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
+      var _a;
+      if (!(0, import_canvas8.isUpdateContextualEditingStateInternalMessage)(message)) {
+        return;
+      }
+      if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
+        setSelectedComponentReference(void 0);
+        return;
+      }
+      setSelectedComponentReference(message.state.selectedComponentReference);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [global, channel, componentData == null ? void 0 : componentData._id]);
+  return {
+    isContextualEditing,
+    selectedComponentReference
+  };
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DefaultNotImplementedComponent,
@@ -837,6 +882,7 @@ function useCompositionEventEffect({
   registerUniformComponent,
   useCompositionEventEffect,
   useUniformContextualEditing,
+  useUniformContextualEditingState,
   useUniformCurrentComponent,
   useUniformCurrentComposition
 });

package/dist/index.mjs

@@ -791,6 +791,53 @@ function useCompositionEventEffect({
     };
   }, [compositionId, enabled, projectId, effect]);
 }
+
+// src/hooks/useUniformContextualEditingState.ts
+import {
+  createCanvasChannel as createCanvasChannel2,
+  isUpdateContextualEditingStateInternalMessage
+} from "@uniformdev/canvas";
+import { useEffect as useEffect3, useMemo as useMemo4, useState as useState3 } from "react";
+var useUniformContextualEditingState = ({
+  global = false
+} = {}) => {
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const { data: componentData } = useUniformCurrentComponent();
+  const [selectedComponentReference, setSelectedComponentReference] = useState3();
+  const channel = useMemo4(() => {
+    if (!isContextualEditing) {
+      return;
+    }
+    const channel2 = createCanvasChannel2({
+      broadcastTo: [window],
+      listenTo: [window]
+    });
+    return channel2;
+  }, [isContextualEditing]);
+  useEffect3(() => {
+    if (!channel) {
+      return;
+    }
+    const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
+      var _a;
+      if (!isUpdateContextualEditingStateInternalMessage(message)) {
+        return;
+      }
+      if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
+        setSelectedComponentReference(void 0);
+        return;
+      }
+      setSelectedComponentReference(message.state.selectedComponentReference);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [global, channel, componentData == null ? void 0 : componentData._id]);
+  return {
+    isContextualEditing,
+    selectedComponentReference
+  };
+};
 export {
   DefaultNotImplementedComponent,
   NOT_IMPLEMENTED_COMPONENT,
@@ -809,6 +856,7 @@ export {
   registerUniformComponent,
   useCompositionEventEffect,
   useUniformContextualEditing,
+  useUniformContextualEditingState,
   useUniformCurrentComponent,
   useUniformCurrentComposition
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "19.21.0",
+  "version": "19.22.1-alpha.8+a8f730b12",
   "description": "React SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,10 +24,10 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.21.0",
-    "@uniformdev/context": "19.21.0",
-    "@uniformdev/context-react": "19.21.0",
-    "@uniformdev/richtext": "19.21.0"
+    "@uniformdev/canvas": "19.22.1-alpha.8+a8f730b12",
+    "@uniformdev/context": "19.22.1-alpha.8+a8f730b12",
+    "@uniformdev/context-react": "19.22.1-alpha.8+a8f730b12",
+    "@uniformdev/richtext": "19.22.1-alpha.8+a8f730b12"
   },
   "peerDependencies": {
     "react": ">= 16 || 17 || 18",
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3db4c0f1c775a5cf9677c6df294322cfbf79611e"
+  "gitHead": "a8f730b12035a4d7c2e6a704d3777ff12df52ffc"
 }