@uniformdev/canvas-react 19.62.0 → 19.62.1-alpha.127

package/dist/index.mjs

@@ -1,5 +1,7 @@
+'use client';
+
 // src/components/DefaultNotImplementedComponent.tsx
-import { CANVAS_LOCALIZATION_TYPE } from "@uniformdev/canvas";
+import { CANVAS_LOCALIZATION_TYPE, EMPTY_COMPOSITION } from "@uniformdev/canvas";
 import React from "react";
 var wrapperStyles = {
   display: "flex",
@@ -19,6 +21,9 @@ function DefaultNotImplementedComponent(props) {
   if (!componentType) {
     return null;
   }
+  if (componentType === EMPTY_COMPOSITION.type) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("style", null, `@keyframes _uniformDelayedFadeIn { 0%,75% { opacity: 0; } to { opacity: 1; } }`), /* @__PURE__ */ React.createElement("p", { style: { animation: "_uniformDelayedFadeIn 3s" } }, "This component only works inside Uniform Canvas editor.", /* @__PURE__ */ React.createElement("br", null), "If you think this is an error, try", " ", /* @__PURE__ */ React.createElement("a", { href: "", style: { fontWeight: "bolder", textDecoration: "underline" } }, "reloading the page"), "."));
+  }
   if (componentType === CANVAS_LOCALIZATION_TYPE) {
     return /* @__PURE__ */ React.createElement("div", { style: wrapperStyles }, /* @__PURE__ */ React.createElement("p", null, "Seems like localization is not enabled in your application. Please read our documentation on how to", " ", /* @__PURE__ */ React.createElement(
       "a",
@@ -73,7 +78,7 @@ import {
   CANVAS_ENRICHMENT_TAG_PARAM
 } from "@uniformdev/canvas";
 import { Track, TrackFragment, useUniformContext } from "@uniformdev/context-react";
-import React6, { createContext as createContext2, useContext as useContext2 } from "react";
+import React7, { createContext as createContext2, useContext as useContext2 } from "react";
 
 // src/helpers/convertComponentToProps.ts
 function convertComponentToProps(component) {
@@ -102,7 +107,8 @@ var createComponentStore = () => {
     },
     get: (type, variantId) => {
       return components.get(getTypeWithVariant(type, variantId));
-    }
+    },
+    getComponentsMap: () => new Map(components)
   };
 };
 var createComponentStoreResolver = ({ store, defaultComponent = DefaultNotImplementedComponent }) => {
@@ -136,9 +142,9 @@ import {
   CANVAS_PERSONALIZE_TYPE,
   CANVAS_TEST_SLOT,
   CANVAS_TEST_TYPE,
-  EMPTY_COMPOSITION as EMPTY_COMPOSITION2
+  EMPTY_COMPOSITION as EMPTY_COMPOSITION3
 } from "@uniformdev/canvas";
-import React5 from "react";
+import React6 from "react";
 
 // src/defaultSystemComponentResolver.tsx
 import {
@@ -182,22 +188,56 @@ var defaultSystemComponentResolver = {
 };
 
 // src/components/ContextualEditingComponentWrapper.tsx
+import {
+  isComponentPlaceholderId
+} from "@uniformdev/canvas";
+import React5 from "react";
+
+// src/components/PureContextualEditingComponentWrapper.tsx
 import {
   CANVAS_LOCALE_TAG_PARAM,
   IN_CONTEXT_EDITOR_COMPONENT_END_ROLE,
-  IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
-  isComponentPlaceholderId
+  IN_CONTEXT_EDITOR_COMPONENT_START_ROLE
 } from "@uniformdev/canvas";
-import React4 from "react";
+import React3 from "react";
+var PureContextualEditingComponentWrapper = ({
+  children,
+  isPlaceholder,
+  parentComponent,
+  component,
+  slotName,
+  indexInSlot,
+  slotChildrenCount,
+  isReadOnly
+}) => {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+    "script",
+    {
+      "data-role": IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
+      "data-parent-id": parentComponent == null ? void 0 : parentComponent._id,
+      "data-parent-type": parentComponent == null ? void 0 : parentComponent.type,
+      "data-component-id": component == null ? void 0 : component._id,
+      "data-slot-name": slotName != null ? slotName : "",
+      "data-component-index": indexInSlot != null ? indexInSlot : "",
+      "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
+      "data-component-name": component == null ? void 0 : component.type,
+      "data-is-placeholder": isPlaceholder ? "true" : void 0,
+      "data-is-localized": ((_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
+      "data-component-title": (_d = (_c = (_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : "",
+      "data-is-readonly": isReadOnly
+    }
+  ), children, /* @__PURE__ */ React3.createElement("script", { "data-role": IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
+};
 
 // src/components/UniformComposition.tsx
-import React3, { createContext, useContext } from "react";
+import React4, { createContext, useContext } from "react";
 
 // src/hooks/useUniformContextualEditing.ts
 import {
   createCanvasChannel,
   createUniformApiEnhancer,
-  EMPTY_COMPOSITION,
+  EMPTY_COMPOSITION as EMPTY_COMPOSITION2,
   IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID,
   IN_CONTEXT_EDITOR_QUERY_STRING_PARAM,
   isAllowedReferrer,
@@ -222,7 +262,7 @@ var useUniformContextualEditing = ({
     return channel2;
   }, []);
   useEffect(() => {
-    if ((contextualComposition == null ? void 0 : contextualComposition._id) && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== EMPTY_COMPOSITION._id && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== (contextualComposition == null ? void 0 : contextualComposition._id)) {
+    if ((contextualComposition == null ? void 0 : contextualComposition._id) && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== EMPTY_COMPOSITION2._id && (initialCompositionValue == null ? void 0 : initialCompositionValue._id) !== (contextualComposition == null ? void 0 : contextualComposition._id)) {
       setContextualComposition(void 0);
       return;
     }
@@ -262,7 +302,7 @@ var useUniformContextualEditing = ({
     document.head.appendChild(script);
   }, [initialCompositionValue == null ? void 0 : initialCompositionValue._id]);
   return {
-    composition: contextualComposition != null ? contextualComposition : initialCompositionValue,
+    composition: contextualComposition ? contextualComposition : initialCompositionValue,
     isContextualEditing: Boolean(contextualComposition)
   };
 };
@@ -300,12 +340,12 @@ function UniformComposition({
     initialCompositionValue: data,
     enhance: contextualEditingEnhancer
   });
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     UniformCompositionContext.Provider,
     {
       value: { data: composition, behaviorTracking, resolveRenderer, isContextualEditing }
     },
-    /* @__PURE__ */ React3.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ React4.createElement(
       UniformComponent,
       {
         data: composition,
@@ -328,27 +368,29 @@ function ContextualEditingComponentWrapper({
   emptyPlaceholder,
   children
 }) {
-  var _a, _b, _c, _d, _e;
+  var _a;
   const isPlaceholder = isComponentPlaceholderId(component == null ? void 0 : component._id);
   const { isContextualEditing } = useUniformCurrentComposition();
   const isReadOnly = ((_a = component == null ? void 0 : component._contextualEditing) == null ? void 0 : _a.isEditable) ? void 0 : "true";
-  return !isContextualEditing ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, children) : isPlaceholder && emptyPlaceholder === null ? null : /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
-    "script",
+  if (!isContextualEditing) {
+    return /* @__PURE__ */ React5.createElement(React5.Fragment, null, children);
+  }
+  if (isPlaceholder && emptyPlaceholder === null) {
+    return null;
+  }
+  return /* @__PURE__ */ React5.createElement(
+    PureContextualEditingComponentWrapper,
     {
-      "data-role": IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
-      "data-parent-id": parentComponent == null ? void 0 : parentComponent._id,
-      "data-parent-type": parentComponent == null ? void 0 : parentComponent.type,
-      "data-component-id": component == null ? void 0 : component._id,
-      "data-slot-name": slotName != null ? slotName : "",
-      "data-component-index": indexInSlot != null ? indexInSlot : "",
-      "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
-      "data-component-name": component == null ? void 0 : component.type,
-      "data-is-placeholder": isPlaceholder ? "true" : void 0,
-      "data-is-localized": ((_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b[CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
-      "data-component-title": (_e = (_d = (_c = component == null ? void 0 : component.parameters) == null ? void 0 : _c.title) == null ? void 0 : _d.value) != null ? _e : "",
-      "data-is-readonly": isReadOnly
-    }
-  ), isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : children, /* @__PURE__ */ React4.createElement("script", { "data-role": IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
+      isPlaceholder,
+      parentComponent,
+      component,
+      slotName,
+      indexInSlot,
+      slotChildrenCount,
+      isReadOnly
+    },
+    isPlaceholder && emptyPlaceholder !== void 0 ? emptyPlaceholder : children
+  );
 }
 
 // src/components/UniformSlot.tsx
@@ -366,7 +408,7 @@ function UniformSlot({
   }
   const slot = (_a = parentData.slots) == null ? void 0 : _a[name];
   if (!slot || !Array.isArray(slot)) {
-    if (process.env.NODE_ENV === "development" && parentData.type !== EMPTY_COMPOSITION2.type) {
+    if (process.env.NODE_ENV === "development" && parentData.type !== EMPTY_COMPOSITION3.type) {
       console.warn(
         `[canvas-dev] slot '${name}' was rendered, but it was not defined on its component. This is expected if the slot is optional, otherwise it may indicate a typo. Component:`,
         parentData
@@ -387,13 +429,13 @@ function UniformSlot({
       emptyPlaceholder
     });
     const elements = children ? children({ child, component, key: `wrapped-inner-${index}` }) : child;
-    return React5.createElement(React5.Fragment, { key: index }, elements);
+    return React6.createElement(React6.Fragment, { key: index }, elements);
   });
   if (!wrapperComponent) {
-    return React5.createElement(React5.Fragment, void 0, finalChildren);
+    return React6.createElement(React6.Fragment, void 0, finalChildren);
   }
   const Wrapper = wrapperComponent;
-  return /* @__PURE__ */ React5.createElement(Wrapper, { items: finalChildren, slotName: name });
+  return /* @__PURE__ */ React6.createElement(Wrapper, { items: finalChildren, slotName: name });
 }
 function renderComponent({
   component,
@@ -425,7 +467,7 @@ function renderComponent({
         });
       }
     );
-    return /* @__PURE__ */ React5.createElement(
+    return /* @__PURE__ */ React6.createElement(
       ContextualEditingComponentWrapper,
       {
         component,
@@ -456,7 +498,7 @@ function renderComponent({
         });
       }
     );
-    return /* @__PURE__ */ React5.createElement(
+    return /* @__PURE__ */ React6.createElement(
       ContextualEditingComponentWrapper,
       {
         component,
@@ -470,7 +512,7 @@ function renderComponent({
     );
   } else if (RenderComponent) {
     const props = convertComponentToProps(component);
-    return /* @__PURE__ */ React5.createElement(UniformComponent, { key, data: component, resolveRenderer }, /* @__PURE__ */ React5.createElement(
+    return /* @__PURE__ */ React6.createElement(UniformComponent, { key, data: component, resolveRenderer }, /* @__PURE__ */ React6.createElement(
       ContextualEditingComponentWrapper,
       {
         component,
@@ -480,7 +522,7 @@ function renderComponent({
         slotChildrenCount,
         emptyPlaceholder
       },
-      /* @__PURE__ */ React5.createElement(RenderComponent, { ...props })
+      /* @__PURE__ */ React6.createElement(RenderComponent, { ...props })
     ));
   } else if (process.env.NODE_ENV !== "production") {
     console.warn(
@@ -527,9 +569,9 @@ function UniformComponent({
     hasParentLayout: Boolean(parentData.data),
     resolveRenderer: contextValue.resolveRenderer
   });
-  return /* @__PURE__ */ React6.createElement(UniformComponentContext.Provider, { value: contextValue }, contextContextProviderPresent ? (
+  return /* @__PURE__ */ React7.createElement(UniformComponentContext.Provider, { value: contextValue }, contextContextProviderPresent ? (
     /* auto-track behavior signals when in a Canvas context */
-    /* @__PURE__ */ React6.createElement(TrackComponent, { behavior: enrichmentTags }, resolvedChildren)
+    /* @__PURE__ */ React7.createElement(TrackComponent, { behavior: enrichmentTags }, resolvedChildren)
   ) : resolvedChildren);
 }
 function resolveChildren({
@@ -542,14 +584,14 @@ function resolveChildren({
   if (!children && !hasParentLayout) {
     const topLevelComponent = resolveRenderer({ type: data.type });
     if (topLevelComponent) {
-      children = React6.createElement(topLevelComponent, convertComponentToProps(data));
+      children = React7.createElement(topLevelComponent, convertComponentToProps(data));
     } else {
       if (Object.keys((_a = data.slots) != null ? _a : {}).length > 1 && process.env.NODE_ENV === "development") {
         console.warn(
           `[canvas-dev] All the slots in component '${data.type}' are rendered in no particular order. Use '<UniformSlot name={slotName} />' to reliably render the slots.`
         );
       }
-      children = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ React6.createElement(UniformSlot, { key: slotName, name: slotName }));
+      children = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ React7.createElement(UniformSlot, { key: slotName, name: slotName }));
     }
   }
   const renderChildren = typeof children === "function" ? children(convertComponentToProps(data)) : children;
@@ -557,8 +599,8 @@ function resolveChildren({
 }
 
 // src/components/UniformPlayground.tsx
-import { EMPTY_COMPOSITION as EMPTY_COMPOSITION3 } from "@uniformdev/canvas";
-import React7, { useMemo as useMemo2 } from "react";
+import { EMPTY_COMPOSITION as EMPTY_COMPOSITION4 } from "@uniformdev/canvas";
+import React8, { useMemo as useMemo2 } from "react";
 var UniformPlayground = ({
   resolveRenderer,
   decorators = [],
@@ -568,14 +610,14 @@ var UniformPlayground = ({
   children
 }) => {
   const { composition, isContextualEditing } = useUniformContextualEditing({
-    initialCompositionValue: EMPTY_COMPOSITION3,
+    initialCompositionValue: EMPTY_COMPOSITION4,
     enhance: contextualEditingEnhancer
   });
   const renderedComponent = useMemo2(() => {
     if (!composition) {
       return null;
     }
-    let component = /* @__PURE__ */ React7.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ React7.createElement(
+    let component = /* @__PURE__ */ React8.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ React8.createElement(
       UniformComponent,
       {
         data: composition,
@@ -586,7 +628,7 @@ var UniformPlayground = ({
       children
     ));
     decorators.forEach((Decorator) => {
-      component = /* @__PURE__ */ React7.createElement(Decorator, { data: composition }, component);
+      component = /* @__PURE__ */ React8.createElement(Decorator, { data: composition }, component);
     });
     return component;
   }, [
@@ -597,7 +639,7 @@ var UniformPlayground = ({
     behaviorTracking,
     contextualEditingDefaultPlaceholder
   ]);
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     UniformCompositionContext.Provider,
     {
       value: { data: composition, behaviorTracking, resolveRenderer, isContextualEditing }
@@ -616,55 +658,55 @@ import {
   isRichTextValue,
   isRichTextValueConsideredEmpty
 } from "@uniformdev/richtext";
-import React17, { useMemo as useMemo3 } from "react";
+import React18, { useMemo as useMemo3 } from "react";
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
 import { isRichTextNode } from "@uniformdev/richtext";
-import React16 from "react";
+import React17 from "react";
 
 // src/components/UniformRichText/nodes/HeadingRichTextNode.tsx
-import React8 from "react";
+import React9 from "react";
 var HeadingRichTextNode = ({ children, node }) => {
   const { tag } = node;
   const HTag = tag != null ? tag : "h1";
-  return /* @__PURE__ */ React8.createElement(HTag, null, children);
+  return /* @__PURE__ */ React9.createElement(HTag, null, children);
 };
 
 // src/components/UniformRichText/nodes/LinebreakRichTextNode.tsx
-import React9 from "react";
+import React10 from "react";
 var LinebreakRichTextNode = () => {
-  return /* @__PURE__ */ React9.createElement("br", null);
+  return /* @__PURE__ */ React10.createElement("br", null);
 };
 
 // src/components/UniformRichText/nodes/LinkRichTextNode.tsx
 import { linkParamValueToHref } from "@uniformdev/richtext";
-import React10 from "react";
+import React11 from "react";
 var LinkRichTextNode = ({ children, node }) => {
   const { link } = node;
-  return /* @__PURE__ */ React10.createElement("a", { href: linkParamValueToHref(link) }, children);
+  return /* @__PURE__ */ React11.createElement("a", { href: linkParamValueToHref(link) }, children);
 };
 
 // src/components/UniformRichText/nodes/ListItemRichTextNode.tsx
-import React11 from "react";
+import React12 from "react";
 var ListItemRichTextNode = ({ children, node }) => {
   const { value } = node;
-  return /* @__PURE__ */ React11.createElement("li", { value: Number.isFinite(value) && value > 0 ? value : void 0 }, children);
+  return /* @__PURE__ */ React12.createElement("li", { value: Number.isFinite(value) && value > 0 ? value : void 0 }, children);
 };
 
 // src/components/UniformRichText/nodes/ListRichTextNode.tsx
-import React12 from "react";
+import React13 from "react";
 var ListRichTextNode = ({ children, node }) => {
   const { tag, start } = node;
   const ListTag = tag != null ? tag : "ul";
-  return /* @__PURE__ */ React12.createElement(ListTag, { start: Number.isFinite(start) && start > 0 ? start : void 0 }, children);
+  return /* @__PURE__ */ React13.createElement(ListTag, { start: Number.isFinite(start) && start > 0 ? start : void 0 }, children);
 };
 
 // src/components/UniformRichText/nodes/ParagraphRichTextNode.tsx
 import { isPureDirection, isPureTextAlign } from "@uniformdev/richtext";
-import React13 from "react";
+import React14 from "react";
 var ParagraphRichTextNode = ({ children, node }) => {
   const { format, direction } = node;
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     "p",
     {
       dir: isPureDirection(direction) ? direction : void 0,
@@ -675,18 +717,18 @@ var ParagraphRichTextNode = ({ children, node }) => {
 };
 
 // src/components/UniformRichText/nodes/TabRichTextNode.tsx
-import React14 from "react";
+import React15 from "react";
 var TabRichTextNode = () => {
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, "	");
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, "	");
 };
 
 // src/components/UniformRichText/nodes/TextRichTextNode.tsx
 import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
-import React15 from "react";
+import React16 from "react";
 var TextRichTextNode = ({ node }) => {
   const { text, format } = node;
   const tags = getRichTextTagsFromTextFormat(format);
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ React15.createElement(Tag, null, children), text) : text);
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ React16.createElement(Tag, null, children), text) : text);
 };
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
@@ -701,8 +743,8 @@ function UniformRichTextNode({ node, ...props }) {
   if (!NodeRenderer) {
     return null;
   }
-  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ React16.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
-  return /* @__PURE__ */ React16.createElement(NodeRenderer, { node }, children);
+  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ React17.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
+  return /* @__PURE__ */ React17.createElement(NodeRenderer, { node }, children);
 }
 var rendererMap = /* @__PURE__ */ new Map([
   ["heading", HeadingRichTextNode],
@@ -711,12 +753,12 @@ var rendererMap = /* @__PURE__ */ new Map([
   ["list", ListRichTextNode],
   ["listitem", ListItemRichTextNode],
   ["paragraph", ParagraphRichTextNode],
-  ["quote", ({ children }) => /* @__PURE__ */ React16.createElement("blockquote", null, children)],
+  ["quote", ({ children }) => /* @__PURE__ */ React17.createElement("blockquote", null, children)],
   [
     "code",
-    ({ children }) => /* @__PURE__ */ React16.createElement("pre", null, /* @__PURE__ */ React16.createElement("code", null, children))
+    ({ children }) => /* @__PURE__ */ React17.createElement("pre", null, /* @__PURE__ */ React17.createElement("code", null, children))
   ],
-  ["root", ({ children }) => /* @__PURE__ */ React16.createElement(React16.Fragment, null, children)],
+  ["root", ({ children }) => /* @__PURE__ */ React17.createElement(React17.Fragment, null, children)],
   ["text", TextRichTextNode],
   ["tab", TabRichTextNode]
 ]);
@@ -725,7 +767,7 @@ var resolveRichTextDefaultRenderer = (node) => {
 };
 
 // src/components/UniformRichText/UniformRichText.tsx
-var UniformRichText = React17.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
+var UniformRichText = React18.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
   const { data: componentData } = useUniformCurrentComponent();
   const parameter = useMemo3(() => {
     var _a;
@@ -734,7 +776,7 @@ var UniformRichText = React17.forwardRef(function UniformRichText2({ parameterId
   const value = useMemo3(() => parameter == null ? void 0 : parameter.value, [parameter]);
   if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value))
     return null;
-  return Tag === null ? /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React17.createElement(
+  return Tag === null ? /* @__PURE__ */ React18.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React18.createElement(
     Tag,
     {
       ref,
@@ -745,15 +787,15 @@ var UniformRichText = React17.forwardRef(function UniformRichText2({ parameterId
         [ATTRIBUTE_PARAMETER_TYPE]: "richText"
       }
     },
-    /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
+    /* @__PURE__ */ React18.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
   );
 });
 
 // src/components/UniformText.tsx
-import React19, { useState as useState2 } from "react";
+import React20, { useState as useState2 } from "react";
 
 // src/components/PureUniformText.tsx
-import React18 from "react";
+import React19 from "react";
 var PureUniformText = ({
   as: Tag = "span",
   parameterId,
@@ -772,10 +814,10 @@ var PureUniformText = ({
     return null;
   }
   if (!isContextualEditing) {
-    return /* @__PURE__ */ React18.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
+    return /* @__PURE__ */ React19.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
   }
   const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     Tag,
     {
       ...props,
@@ -813,7 +855,7 @@ var UniformText = ({
   }
   const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
   const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     PureUniformText,
     {
       ...props,
@@ -898,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;
@@ -909,15 +954,20 @@ var useUniformContextualEditingState = ({
     return channel2;
   }, [isContextualEditing]);
   useEffect3(() => {
+    var _a, _b;
     if (!channel) {
       return;
     }
+    if (typeof window !== "undefined") {
+      setPreviewMode((_b = (_a = window.__UNIFORM_CONTEXTUAL_EDITING__) == null ? void 0 : _a.state) == null ? void 0 : _b.previewMode);
+    }
     const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
-      var _a;
+      var _a2;
       if (!isUpdateContextualEditingStateInternalMessage(message)) {
         return;
       }
-      if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
+      setPreviewMode(message.state.previewMode);
+      if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a2 = message.state.selectedComponentReference) == null ? void 0 : _a2.parentId)) {
         setSelectedComponentReference(void 0);
         return;
       }
@@ -926,13 +976,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.62.0",
+  "version": "19.62.1-alpha.127+d49e5a0782",
   "description": "React SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -45,17 +45,17 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.62.0",
-    "@uniformdev/context": "19.62.0",
-    "@uniformdev/context-react": "19.62.0",
-    "@uniformdev/richtext": "19.62.0"
+    "@uniformdev/canvas": "19.62.1-alpha.127+d49e5a0782",
+    "@uniformdev/context": "19.62.1-alpha.127+d49e5a0782",
+    "@uniformdev/context-react": "19.62.1-alpha.127+d49e5a0782",
+    "@uniformdev/richtext": "19.62.1-alpha.127+d49e5a0782"
   },
   "peerDependencies": {
     "react": ">= 16 || 17 || 18",
     "react-dom": ">=16"
   },
   "devDependencies": {
-    "@types/react": "18.2.21",
+    "@types/react": "18.2.40",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -65,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dcaa272276caccfec3318d2a028cf4efa8a569a8"
+  "gitHead": "d49e5a07824d69e5df3a92ff10bc9acd88d0bc22"
 }