@uniformdev/canvas-react 19.139.0 → 19.140.2-alpha.7

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import React$1, { Key, ReactNode, PropsWithChildren } from 'react';
-import { ComponentInstance, RootComponentInstance, UpdateCompositionMessage, getParameterAttributes as getParameterAttributes$1, SubscribeToCompositionOptions } from '@uniformdev/canvas';
+import { ComponentInstance, RootComponentInstance, UpdateCompositionMessage, getParameterAttributes as getParameterAttributes$1, SubscribeToCompositionOptions, UpdateContextualEditingStateInternalMessage } from '@uniformdev/canvas';
 export { GetParameterAttributesProps, createUniformApiEnhancer } from '@uniformdev/canvas';
 import { P as PureUniformTextProps } from './PureUniformText-B3GAm6Dc.mjs';
 import { RichTextNode } from '@uniformdev/richtext';
@@ -430,26 +430,31 @@ type UseUniformContextualEditingStateProps = {
      **/
     global?: boolean;
 };
+type UseUniformContextualEditingStateReturnType = {
+    /**
+     * Returns `true` when the app is rendered inside Canvas editor. Regardless of which preview mode is currently selected ("editor" or "preview").
+     */
+    isContextualEditing: boolean;
+    /**
+     * A reference to the currently selected component in Canvas editor.
+     * Returns `undefined` if the selected component is not part of the current React component.
+     * Set the `global` option to `true` to get a reference of the selected component anywhere in the composition tree.
+     */
+    selectedComponentReference: UpdateContextualEditingStateInternalMessage['state']['selectedComponentReference'];
+    /**
+     * Returns the current preview mode in Canvas editor ("editor" or "preview").
+     * Returns `undefined` when the app is not rendered inside Canvas editor.
+     * Learn more about the preview modes: https://docs.uniform.app/docs/guides/composition/visual-editing#editing-and-preview-mode
+     * @deprecated this is an experimental property, it might receive breaking changes in minor releases ⚠️
+     */
+    previewMode: UpdateContextualEditingStateInternalMessage['state']['previewMode'] | undefined;
+};
 /**
  * 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: {
-        id: string;
-        slotName?: string | undefined;
-        componentIndex?: number | undefined;
-        totalComponents?: number | undefined;
-        componentName?: string | undefined;
-        componentTitle?: string | undefined;
-        parentId?: string | undefined;
-        parentType?: string | undefined;
-        isLocalized?: boolean | undefined;
-        isReadOnly?: boolean | undefined;
-    } | undefined;
-};
+declare const useUniformContextualEditingState: ({ global, }?: UseUniformContextualEditingStateProps) => UseUniformContextualEditingStateReturnType;
 
 declare const componentStore: ComponentStore;
 declare const registerUniformComponent: ({ type, variantId, component, }: {
@@ -467,4 +472,4 @@ declare const createComponentStoreResolver: (options: {
     defaultComponent?: React$1.ComponentType<ComponentProps<any>>;
 }) => RenderComponentResolver;
 
-export { type ComponentProps, type ComponentStore, type CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, type RenderComponentResolver, type RenderRichTextComponentResolver, type RichTextComponentProps, type RichTextRendererComponent, type SystemRenderConfig, type SystemRenderFunction, UniformComponent, type UniformComponentContextValue, type UniformComponentProps, UniformComposition, UniformCompositionContext, type UniformCompositionProps, UniformPlayground, type UniformPlaygroundDecorator, type UniformPlaygroundProps, UniformRichText, UniformRichTextNode, type UniformRichTextNodeProps, type UniformRichTextProps, UniformSlot, type UniformSlotProps, type UniformSlotWrapperComponentProps, UniformText, type UniformTextProps, type UseCompositionEventEffectOptions, type UseUniformContextualEditingProps, type UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, convertComponentToProps, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };
+export { type ComponentProps, type ComponentStore, type CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, type RenderComponentResolver, type RenderRichTextComponentResolver, type RichTextComponentProps, type RichTextRendererComponent, type SystemRenderConfig, type SystemRenderFunction, UniformComponent, type UniformComponentContextValue, type UniformComponentProps, UniformComposition, UniformCompositionContext, type UniformCompositionProps, UniformPlayground, type UniformPlaygroundDecorator, type UniformPlaygroundProps, UniformRichText, UniformRichTextNode, type UniformRichTextNodeProps, type UniformRichTextProps, UniformSlot, type UniformSlotProps, type UniformSlotWrapperComponentProps, UniformText, type UniformTextProps, type UseCompositionEventEffectOptions, type UseUniformContextualEditingProps, type UseUniformContextualEditingStateProps, type UseUniformContextualEditingStateReturnType, componentStore, componentStoreResolver, convertComponentToProps, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import React$1, { Key, ReactNode, PropsWithChildren } from 'react';
-import { ComponentInstance, RootComponentInstance, UpdateCompositionMessage, getParameterAttributes as getParameterAttributes$1, SubscribeToCompositionOptions } from '@uniformdev/canvas';
+import { ComponentInstance, RootComponentInstance, UpdateCompositionMessage, getParameterAttributes as getParameterAttributes$1, SubscribeToCompositionOptions, UpdateContextualEditingStateInternalMessage } from '@uniformdev/canvas';
 export { GetParameterAttributesProps, createUniformApiEnhancer } from '@uniformdev/canvas';
 import { P as PureUniformTextProps } from './PureUniformText-B3GAm6Dc.js';
 import { RichTextNode } from '@uniformdev/richtext';
@@ -430,26 +430,31 @@ type UseUniformContextualEditingStateProps = {
      **/
     global?: boolean;
 };
+type UseUniformContextualEditingStateReturnType = {
+    /**
+     * Returns `true` when the app is rendered inside Canvas editor. Regardless of which preview mode is currently selected ("editor" or "preview").
+     */
+    isContextualEditing: boolean;
+    /**
+     * A reference to the currently selected component in Canvas editor.
+     * Returns `undefined` if the selected component is not part of the current React component.
+     * Set the `global` option to `true` to get a reference of the selected component anywhere in the composition tree.
+     */
+    selectedComponentReference: UpdateContextualEditingStateInternalMessage['state']['selectedComponentReference'];
+    /**
+     * Returns the current preview mode in Canvas editor ("editor" or "preview").
+     * Returns `undefined` when the app is not rendered inside Canvas editor.
+     * Learn more about the preview modes: https://docs.uniform.app/docs/guides/composition/visual-editing#editing-and-preview-mode
+     * @deprecated this is an experimental property, it might receive breaking changes in minor releases ⚠️
+     */
+    previewMode: UpdateContextualEditingStateInternalMessage['state']['previewMode'] | undefined;
+};
 /**
  * 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: {
-        id: string;
-        slotName?: string | undefined;
-        componentIndex?: number | undefined;
-        totalComponents?: number | undefined;
-        componentName?: string | undefined;
-        componentTitle?: string | undefined;
-        parentId?: string | undefined;
-        parentType?: string | undefined;
-        isLocalized?: boolean | undefined;
-        isReadOnly?: boolean | undefined;
-    } | undefined;
-};
+declare const useUniformContextualEditingState: ({ global, }?: UseUniformContextualEditingStateProps) => UseUniformContextualEditingStateReturnType;
 
 declare const componentStore: ComponentStore;
 declare const registerUniformComponent: ({ type, variantId, component, }: {
@@ -467,4 +472,4 @@ declare const createComponentStoreResolver: (options: {
     defaultComponent?: React$1.ComponentType<ComponentProps<any>>;
 }) => RenderComponentResolver;
 
-export { type ComponentProps, type ComponentStore, type CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, type RenderComponentResolver, type RenderRichTextComponentResolver, type RichTextComponentProps, type RichTextRendererComponent, type SystemRenderConfig, type SystemRenderFunction, UniformComponent, type UniformComponentContextValue, type UniformComponentProps, UniformComposition, UniformCompositionContext, type UniformCompositionProps, UniformPlayground, type UniformPlaygroundDecorator, type UniformPlaygroundProps, UniformRichText, UniformRichTextNode, type UniformRichTextNodeProps, type UniformRichTextProps, UniformSlot, type UniformSlotProps, type UniformSlotWrapperComponentProps, UniformText, type UniformTextProps, type UseCompositionEventEffectOptions, type UseUniformContextualEditingProps, type UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, convertComponentToProps, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };
+export { type ComponentProps, type ComponentStore, type CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, type RenderComponentResolver, type RenderRichTextComponentResolver, type RichTextComponentProps, type RichTextRendererComponent, type SystemRenderConfig, type SystemRenderFunction, UniformComponent, type UniformComponentContextValue, type UniformComponentProps, UniformComposition, UniformCompositionContext, type UniformCompositionProps, UniformPlayground, type UniformPlaygroundDecorator, type UniformPlaygroundProps, UniformRichText, UniformRichTextNode, type UniformRichTextNodeProps, type UniformRichTextProps, UniformSlot, type UniformSlotProps, type UniformSlotWrapperComponentProps, UniformText, type UniformTextProps, type UseCompositionEventEffectOptions, type UseUniformContextualEditingProps, type UseUniformContextualEditingStateProps, type UseUniformContextualEditingStateReturnType, componentStore, componentStoreResolver, convertComponentToProps, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.esm.js

@@ -940,6 +940,9 @@ var useUniformContextualEditingState = ({
   const { isContextualEditing } = useUniformCurrentComposition();
   const { data: componentData } = useUniformCurrentComponent();
   const [selectedComponentReference, setSelectedComponentReference] = useState3();
+  const [previewMode, setPreviewMode] = useState3(
+    isContextualEditing ? "editor" : void 0
+  );
   const channel = useMemo4(() => {
     if (!isContextualEditing) {
       return;
@@ -959,6 +962,7 @@ var useUniformContextualEditingState = ({
       if (!isUpdateContextualEditingStateInternalMessage(message)) {
         return;
       }
+      setPreviewMode(message.state.previewMode);
       if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
         setSelectedComponentReference(void 0);
         return;
@@ -968,13 +972,14 @@ var useUniformContextualEditingState = ({
     return () => {
       unsubscribe();
     };
-  }, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference]);
+  }, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference, setPreviewMode]);
   return useMemo4(
     () => ({
       isContextualEditing,
-      selectedComponentReference
+      selectedComponentReference,
+      previewMode
     }),
-    [isContextualEditing, selectedComponentReference]
+    [isContextualEditing, selectedComponentReference, previewMode]
   );
 };
 export {

package/dist/index.js

@@ -956,6 +956,9 @@ var useUniformContextualEditingState = ({
   const { isContextualEditing } = useUniformCurrentComposition();
   const { data: componentData } = useUniformCurrentComponent();
   const [selectedComponentReference, setSelectedComponentReference] = (0, import_react22.useState)();
+  const [previewMode, setPreviewMode] = (0, import_react22.useState)(
+    isContextualEditing ? "editor" : void 0
+  );
   const channel = (0, import_react22.useMemo)(() => {
     if (!isContextualEditing) {
       return;
@@ -975,6 +978,7 @@ var useUniformContextualEditingState = ({
       if (!(0, import_canvas12.isUpdateContextualEditingStateInternalMessage)(message)) {
         return;
       }
+      setPreviewMode(message.state.previewMode);
       if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
         setSelectedComponentReference(void 0);
         return;
@@ -984,13 +988,14 @@ var useUniformContextualEditingState = ({
     return () => {
       unsubscribe();
     };
-  }, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference]);
+  }, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference, setPreviewMode]);
   return (0, import_react22.useMemo)(
     () => ({
       isContextualEditing,
-      selectedComponentReference
+      selectedComponentReference,
+      previewMode
     }),
-    [isContextualEditing, selectedComponentReference]
+    [isContextualEditing, selectedComponentReference, previewMode]
   );
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -940,6 +940,9 @@ var useUniformContextualEditingState = ({
   const { isContextualEditing } = useUniformCurrentComposition();
   const { data: componentData } = useUniformCurrentComponent();
   const [selectedComponentReference, setSelectedComponentReference] = useState3();
+  const [previewMode, setPreviewMode] = useState3(
+    isContextualEditing ? "editor" : void 0
+  );
   const channel = useMemo4(() => {
     if (!isContextualEditing) {
       return;
@@ -959,6 +962,7 @@ var useUniformContextualEditingState = ({
       if (!isUpdateContextualEditingStateInternalMessage(message)) {
         return;
       }
+      setPreviewMode(message.state.previewMode);
       if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
         setSelectedComponentReference(void 0);
         return;
@@ -968,13 +972,14 @@ var useUniformContextualEditingState = ({
     return () => {
       unsubscribe();
     };
-  }, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference]);
+  }, [global, channel, componentData == null ? void 0 : componentData._id, setSelectedComponentReference, setPreviewMode]);
   return useMemo4(
     () => ({
       isContextualEditing,
-      selectedComponentReference
+      selectedComponentReference,
+      previewMode
     }),
-    [isContextualEditing, selectedComponentReference]
+    [isContextualEditing, selectedComponentReference, previewMode]
   );
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "19.139.0",
+  "version": "19.140.2-alpha.7+b328af635c",
   "description": "React SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -45,10 +45,10 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.139.0",
-    "@uniformdev/context": "19.139.0",
-    "@uniformdev/context-react": "19.139.0",
-    "@uniformdev/richtext": "19.139.0"
+    "@uniformdev/canvas": "19.140.2-alpha.7+b328af635c",
+    "@uniformdev/context": "19.140.2-alpha.7+b328af635c",
+    "@uniformdev/context-react": "19.140.2-alpha.7+b328af635c",
+    "@uniformdev/richtext": "19.140.2-alpha.7+b328af635c"
   },
   "peerDependencies": {
     "react": ">= 16 || 17 || 18",
@@ -65,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "86f2f88868e7f17acf970e1cbf7612650761e961"
+  "gitHead": "b328af635c3bf3547580cef498cb277a30912339"
 }