@uniformdev/canvas-react 18.35.1-alpha.12 → 18.35.1-alpha.17

package/dist/index.d.ts

@@ -69,18 +69,137 @@ type UniformComponentContextValue = {
 declare function useUniformCurrentComponent(): UniformComponentContextValue;
 /**
  * Allows the rendering of a Canvas component instance (root or not), and its children if it has any.
- * Note that the actual rendering happens inside `<UniformSlot />`, this component only provides the services needed to achieve that.
+ * Note that the actual rendering happens inside `<Slot />`, this component only provides the services needed to achieve that.
  * This component is used internally by `<UniformComposition />`, which you should use in most cases.
  */
 declare function UniformComponent<TRenderProps = unknown>({ data, resolveRenderer, children, behaviorTracking, }: UniformComponentProps<TRenderProps>): JSX.Element | null;
 
+/** @deprecated use `createUniformApiEnhancer` instead */
+declare const createApiEnhancer: ({ apiUrl }: {
+    apiUrl: string;
+}) => (message: UpdateCompositionMessage) => Promise<{
+    type: string;
+    parameters?: {
+        [key: string]: {
+            value: unknown;
+            type: string;
+            connectedData?: {
+                pointer: string;
+                syntax: "jptr";
+            } | undefined;
+        };
+    } | undefined;
+    variant?: string | undefined;
+    projectMapNodes?: {
+        id: string;
+        path: string;
+        projectMapId: string;
+    }[] | undefined;
+    slots?: {
+        [key: string]: {
+            type: string;
+            parameters?: {
+                [key: string]: {
+                    value: unknown;
+                    type: string;
+                    connectedData?: {
+                        pointer: string;
+                        syntax: "jptr";
+                    } | undefined;
+                };
+            } | undefined;
+            variant?: string | undefined;
+            slots?: {
+                [key: string]: any[];
+            } | undefined;
+            _id?: string | undefined;
+            _pattern?: string | undefined;
+            _dataResources?: {
+                [key: string]: {
+                    type: string;
+                    isPatternParameter?: boolean | undefined;
+                    ignorePatternParameterDefault?: boolean | undefined;
+                    variables?: {
+                        [key: string]: string;
+                    } | undefined;
+                };
+            } | undefined;
+            _patternDataResources?: {
+                [key: string]: {
+                    type: string;
+                    isPatternParameter?: boolean | undefined;
+                    ignorePatternParameterDefault?: boolean | undefined;
+                    variables?: {
+                        [key: string]: string;
+                    } | undefined;
+                };
+            } | undefined;
+            _patternError?: "NOTFOUND" | "CYCLIC" | undefined;
+            _overrides?: {
+                [key: string]: {
+                    parameters?: {
+                        [key: string]: {
+                            value: unknown;
+                            type: string;
+                            connectedData?: {
+                                pointer: string;
+                                syntax: "jptr";
+                            } | undefined;
+                        };
+                    } | undefined;
+                    variant?: string | undefined;
+                };
+            } | undefined;
+            _overridability?: {
+                parameters?: {
+                    [key: string]: "yes" | "no";
+                } | undefined;
+                variants?: boolean | undefined;
+            } | undefined;
+        }[];
+    } | undefined;
+    _id: string;
+    _slug?: string | null | undefined;
+    _name: string;
+    _dataResources?: {
+        [key: string]: {
+            type: string;
+            isPatternParameter?: boolean | undefined;
+            ignorePatternParameterDefault?: boolean | undefined;
+            variables?: {
+                [key: string]: string;
+            } | undefined;
+        };
+    } | undefined;
+    _overrides?: {
+        [key: string]: {
+            parameters?: {
+                [key: string]: {
+                    value: unknown;
+                    type: string;
+                    connectedData?: {
+                        pointer: string;
+                        syntax: "jptr";
+                    } | undefined;
+                };
+            } | undefined;
+            variant?: string | undefined;
+        };
+    } | undefined;
+    _overridability?: {
+        parameters?: {
+            [key: string]: "yes" | "no";
+        } | undefined;
+        variants?: boolean | undefined;
+    } | undefined;
+}>;
 type UseUniformContextualEditingProps = {
     initialCompositionValue?: RootComponentInstance;
     /**
      * A function to enhance the composition after receiving it from Canvas editor.
      * WARNING: This enhancer will run on the client side. Make sure you're not exposing any secrets. You can use `createApiEnhancer` to create an enhancer based on an API route.
      */
-    enhance?: (composition: UpdateCompositionMessage) => RootComponentInstance | Promise<RootComponentInstance>;
+    enhance?: ({ composition, hash, }: Pick<UpdateCompositionMessage, 'composition' | 'hash'>) => RootComponentInstance | Promise<RootComponentInstance>;
 };
 /**
  * Adds contextual editing capability to a Uniform app.
@@ -205,6 +324,128 @@ declare const useUniformContextualEditing: ({ initialCompositionValue, enhance,
     } | undefined;
     isContextualEditing: boolean;
 };
+/** @deprecated use useUniformContextualEditing instead */
+declare const useContextualEditing: ({ initialCompositionValue, enhance, }: UseUniformContextualEditingProps) => {
+    composition: {
+        type: string;
+        parameters?: {
+            [key: string]: {
+                value: unknown;
+                type: string;
+                connectedData?: {
+                    pointer: string;
+                    syntax: "jptr";
+                } | undefined;
+            };
+        } | undefined;
+        variant?: string | undefined;
+        projectMapNodes?: {
+            id: string;
+            path: string;
+            projectMapId: string;
+        }[] | undefined;
+        slots?: {
+            [key: string]: {
+                type: string;
+                parameters?: {
+                    [key: string]: {
+                        value: unknown;
+                        type: string;
+                        connectedData?: {
+                            pointer: string;
+                            syntax: "jptr";
+                        } | undefined;
+                    };
+                } | undefined;
+                variant?: string | undefined;
+                slots?: {
+                    [key: string]: any[];
+                } | undefined;
+                _id?: string | undefined;
+                _pattern?: string | undefined;
+                _dataResources?: {
+                    [key: string]: {
+                        type: string;
+                        isPatternParameter?: boolean | undefined;
+                        ignorePatternParameterDefault?: boolean | undefined;
+                        variables?: {
+                            [key: string]: string;
+                        } | undefined;
+                    };
+                } | undefined;
+                _patternDataResources?: {
+                    [key: string]: {
+                        type: string;
+                        isPatternParameter?: boolean | undefined;
+                        ignorePatternParameterDefault?: boolean | undefined;
+                        variables?: {
+                            [key: string]: string;
+                        } | undefined;
+                    };
+                } | undefined;
+                _patternError?: "NOTFOUND" | "CYCLIC" | undefined;
+                _overrides?: {
+                    [key: string]: {
+                        parameters?: {
+                            [key: string]: {
+                                value: unknown;
+                                type: string;
+                                connectedData?: {
+                                    pointer: string;
+                                    syntax: "jptr";
+                                } | undefined;
+                            };
+                        } | undefined;
+                        variant?: string | undefined;
+                    };
+                } | undefined;
+                _overridability?: {
+                    parameters?: {
+                        [key: string]: "yes" | "no";
+                    } | undefined;
+                    variants?: boolean | undefined;
+                } | undefined;
+            }[];
+        } | undefined;
+        _id: string;
+        _slug?: string | null | undefined;
+        _name: string;
+        _dataResources?: {
+            [key: string]: {
+                type: string;
+                isPatternParameter?: boolean | undefined;
+                ignorePatternParameterDefault?: boolean | undefined;
+                variables?: {
+                    [key: string]: string;
+                } | undefined;
+            };
+        } | undefined;
+        _overrides?: {
+            [key: string]: {
+                parameters?: {
+                    [key: string]: {
+                        value: unknown;
+                        type: string;
+                        connectedData?: {
+                            pointer: string;
+                            syntax: "jptr";
+                        } | undefined;
+                    };
+                } | undefined;
+                variant?: string | undefined;
+            };
+        } | undefined;
+        _overridability?: {
+            parameters?: {
+                [key: string]: "yes" | "no";
+            } | undefined;
+            variants?: boolean | undefined;
+        } | undefined;
+    } | undefined;
+    isContextualEditing: boolean;
+};
+/** @deprecated use UseUniformContextualEditingProps instead */
+type UseContextualEditingProps = UseUniformContextualEditingProps;
 
 type UniformCompositionProps<TRenderProps = unknown> = UniformComponentProps<TRenderProps> & {
     /** The composition data */
@@ -227,6 +468,12 @@ declare function useUniformCurrentComposition(): UniformCompositionContextValue;
  * It also takes care of enabling [Contextual Editing](https://docs.uniform.app/capabilities/composition/contextual-editing).
  */
 declare function UniformComposition<TRenderProps = unknown>({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, }: UniformCompositionProps<TRenderProps>): JSX.Element;
+/** @deprecated use `useUniformCurrentComposition` instead */
+declare const useComposition: typeof useUniformCurrentComposition;
+/** @deprecated use `UniformComposition` instead */
+declare const Composition: typeof UniformComposition;
+/** @deprecated use `UniformCompositionProps` instead */
+type CompositionProps<TRenderProps = unknown> = UniformCompositionProps<TRenderProps>;
 
 type CustomSlotChildRenderFunc = (options: {
     child: ReactNode;
@@ -252,6 +499,32 @@ type UniformSlotProps<TSlotNames extends string> = {
 };
 /** Renders a named Slot within a Composition. */
 declare function UniformSlot<TSlotNames extends string = string>({ name, resolveRenderer, children, emptyPlaceholder, }: UniformSlotProps<TSlotNames>): JSX.Element | null;
+/** @deprecated use `UniformSlotProps` instead */
+type SlotProps<TSlotNames extends string> = UniformSlotProps<TSlotNames>;
+/** @deprecated use `UniformSlot` instead */
+declare const Slot: typeof UniformSlot;
+
+type ParameterTextValue = string | undefined;
+type UniformTextProps = {
+    /**
+     * The name of the  HTML tag to render.
+     * @default "span"
+     */
+    as?: React$1.ElementType;
+    /** The ID of the parameter. */
+    parameterId: string;
+    /**
+     * When set to true, it adds `whiteSpace: 'pre-wrap'` to the styles of the root element to allow the rendering of line breaks.
+     * @default false
+     */
+    isMultiline?: boolean;
+    /**
+     * A function to customize the rendering of the parameter value. Useful to format the value before rendering it.
+     * @default "(value) => value"
+     */
+    render?: (value: ParameterTextValue) => React$1.ReactNode;
+} & Omit<React$1.HTMLAttributes<HTMLSpanElement>, 'children'>;
+declare const UniformText: ({ as: Tag, parameterId, isMultiline, render, ...props }: UniformTextProps) => JSX.Element | null;
 
 type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToCompositionOptions>, 'callback'> & {
     enabled: boolean;
@@ -276,4 +549,4 @@ declare const createComponentStoreResolver: (options: {
     defaultComponent?: React$1.ComponentType<ComponentProps<any>>;
 }) => RenderComponentResolver;
 
-export { ComponentProps, ComponentStore, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformSlot, UniformSlotProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };
+export { ComponentProps, ComponentStore, Composition, CompositionProps, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, Slot, SlotProps, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformSlot, UniformSlotProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseContextualEditingProps, UseUniformContextualEditingProps, componentStore, componentStoreResolver, createApiEnhancer, createComponentStore, createComponentStoreResolver, registerUniformComponent, useComposition, useCompositionEventEffect, useContextualEditing, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.esm.js

@@ -64,7 +64,8 @@ var createComponentStore = () => {
       components.set(getTypeWithVariant(type, variantId), component);
     },
     get: (type, variantId) => {
-      return components.get(getTypeWithVariant(type, variantId));
+      var _a;
+      return (_a = components.get(getTypeWithVariant(type, variantId))) != null ? _a : components.get(getTypeWithVariant(type));
     }
   };
 };
@@ -162,9 +163,10 @@ import {
   EMPTY_COMPOSITION,
   IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID,
   IN_CONTEXT_EDITOR_QUERY_STRING_PARAM,
-  isUpdateCompositionMessage
+  isUpdateCompositionInternalMessage
 } from "@uniformdev/canvas";
 import { useEffect, useMemo, useState } from "react";
+var createApiEnhancer = createUniformApiEnhancer;
 var registeredCompositionIds = /* @__PURE__ */ new Set();
 var useUniformContextualEditing = ({
   initialCompositionValue,
@@ -190,8 +192,8 @@ var useUniformContextualEditing = ({
     if (!channel || registeredCompositionIds.has(initialCompositionValue == null ? void 0 : initialCompositionValue._id)) {
       return;
     }
-    const unsubscribeFromCompositionUpdates = channel.on("update-composition", async (message) => {
-      if (!isUpdateCompositionMessage(message)) {
+    const unsubscribeFromCompositionUpdates = channel.on("update-composition-internal", async (message) => {
+      if (!isUpdateCompositionInternalMessage(message)) {
         return;
       }
       const enhancedComposition = await enhance(message);
@@ -243,6 +245,7 @@ function isInContextEditingMode() {
   );
   return isOpenedByInContextEditor && isAllowlistedReferrer;
 }
+var useContextualEditing = useUniformContextualEditing;
 
 // src/components/UniformComposition.tsx
 var UniformCompositionContext = createContext({
@@ -279,6 +282,8 @@ function UniformComposition({
     ))
   );
 }
+var useComposition = useUniformCurrentComposition;
+var Composition = UniformComposition;
 
 // src/components/ContextualEditingComponentWrapper.tsx
 function ContextualEditingComponentWrapper({
@@ -365,7 +370,7 @@ function renderComponent({
 }) {
   const RenderComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
   if (component.type === CANVAS_TEST_TYPE) {
-    return resolveSystem.test(
+    const testComponent = resolveSystem.test(
       component,
       key,
       (variantComponent, key2) => {
@@ -384,8 +389,20 @@ function renderComponent({
         });
       }
     );
+    return /* @__PURE__ */ React5.createElement(
+      ContextualEditingComponentWrapper,
+      {
+        component,
+        parentComponent,
+        slotName,
+        indexInSlot,
+        slotChildrenCount,
+        emptyPlaceholder
+      },
+      testComponent
+    );
   } else if (component.type === CANVAS_PERSONALIZE_TYPE) {
-    return resolveSystem.personalization(
+    const personalizationComponent = resolveSystem.personalization(
       component,
       key,
       (variantComponent, key2) => {
@@ -404,6 +421,18 @@ function renderComponent({
         });
       }
     );
+    return /* @__PURE__ */ React5.createElement(
+      ContextualEditingComponentWrapper,
+      {
+        component,
+        parentComponent,
+        slotName,
+        indexInSlot,
+        slotChildrenCount,
+        emptyPlaceholder
+      },
+      personalizationComponent
+    );
   } else if (RenderComponent) {
     const props = convertComponentToProps(component);
     return /* @__PURE__ */ React5.createElement(UniformComponent, { key, data: component, resolveRenderer }, /* @__PURE__ */ React5.createElement(
@@ -427,6 +456,7 @@ function renderComponent({
   }
   return null;
 }
+var Slot = UniformSlot;
 
 // src/components/UniformComponent.tsx
 var UniformComponentContext = createContext2({});
@@ -480,7 +510,7 @@ function resolveChildren({
     } 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.`
+          `[canvas-dev] All the slots in component '${data.type}' are rendered in no particular order. Use '<Slot name={slotName} />' to reliably render the slots.`
         );
       }
       children = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ React6.createElement(UniformSlot, { key: slotName, name: slotName }));
@@ -490,6 +520,62 @@ function resolveChildren({
   return renderChildren;
 }
 
+// src/components/UniformText.tsx
+import React7, { useCallback, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+var UniformText = ({
+  as: Tag = "span",
+  parameterId,
+  isMultiline = false,
+  render = (value) => value,
+  ...props
+}) => {
+  const { data: componentData } = useUniformCurrentComponent();
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const elementRef = useRef(null);
+  const [isFocused, setIsFocused] = useState2(false);
+  const parameter = useMemo2(() => {
+    var _a;
+    return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
+  }, [componentData, parameterId]);
+  const value = useMemo2(() => parameter == null ? void 0 : parameter.value, [parameter]);
+  const isEditable = useMemo2(() => {
+    var _a, _b;
+    return (_b = (_a = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _a.isEditable) != null ? _b : false;
+  }, [parameter]);
+  const handleOnFocus = useCallback(() => {
+    setIsFocused(true);
+  }, [setIsFocused]);
+  const handleOnBlur = useCallback(() => {
+    setIsFocused(false);
+  }, [setIsFocused]);
+  const shouldSkipCustomRendering = useMemo2(() => isFocused && isEditable, [isFocused, isEditable]);
+  if (!parameter) {
+    console.warn(
+      `UniformText: The parameterId "${parameterId}" was not found in the component of type "${componentData == null ? void 0 : componentData.type}"`
+    );
+    return null;
+  }
+  if (!isContextualEditing) {
+    return /* @__PURE__ */ React7.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
+  }
+  return /* @__PURE__ */ React7.createElement(
+    Tag,
+    {
+      ...props,
+      ref: elementRef,
+      "data-uniform-component-id": componentData == null ? void 0 : componentData._id,
+      "data-uniform-parameter-id": parameterId,
+      "data-uniform-parameter-type": "text",
+      style: isMultiline ? { whiteSpace: "pre-wrap" } : {},
+      contentEditable: isEditable,
+      suppressContentEditableWarning: true,
+      onFocus: handleOnFocus,
+      onBlur: handleOnBlur
+    },
+    shouldSkipCustomRendering ? value : render(value)
+  );
+};
+
 // src/hooks/useCompositionEventEffect.ts
 import {
   CANVAS_DRAFT_STATE,
@@ -530,18 +616,24 @@ function useCompositionEventEffect({
   }, [compositionId, enabled, projectId, effect]);
 }
 export {
+  Composition,
   DefaultNotImplementedComponent,
   NOT_IMPLEMENTED_COMPONENT,
+  Slot,
   UniformComponent,
   UniformComposition,
   UniformSlot,
+  UniformText,
   componentStore,
   componentStoreResolver,
+  createApiEnhancer,
   createComponentStore,
   createComponentStoreResolver,
   createUniformApiEnhancer,
   registerUniformComponent,
+  useComposition,
   useCompositionEventEffect,
+  useContextualEditing,
   useUniformContextualEditing,
   useUniformCurrentComponent,
   useUniformCurrentComposition

package/dist/index.js

@@ -30,18 +30,24 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Composition: () => Composition,
   DefaultNotImplementedComponent: () => DefaultNotImplementedComponent,
   NOT_IMPLEMENTED_COMPONENT: () => NOT_IMPLEMENTED_COMPONENT,
+  Slot: () => Slot,
   UniformComponent: () => UniformComponent,
   UniformComposition: () => UniformComposition,
   UniformSlot: () => UniformSlot,
+  UniformText: () => UniformText,
   componentStore: () => componentStore,
   componentStoreResolver: () => componentStoreResolver,
+  createApiEnhancer: () => createApiEnhancer,
   createComponentStore: () => createComponentStore,
   createComponentStoreResolver: () => createComponentStoreResolver,
   createUniformApiEnhancer: () => import_canvas3.createUniformApiEnhancer,
   registerUniformComponent: () => registerUniformComponent,
+  useComposition: () => useComposition,
   useCompositionEventEffect: () => useCompositionEventEffect,
+  useContextualEditing: () => useContextualEditing,
   useUniformContextualEditing: () => useUniformContextualEditing,
   useUniformCurrentComponent: () => useUniformCurrentComponent,
   useUniformCurrentComposition: () => useUniformCurrentComposition
@@ -112,7 +118,8 @@ var createComponentStore = () => {
       components.set(getTypeWithVariant(type, variantId), component);
     },
     get: (type, variantId) => {
-      return components.get(getTypeWithVariant(type, variantId));
+      var _a;
+      return (_a = components.get(getTypeWithVariant(type, variantId))) != null ? _a : components.get(getTypeWithVariant(type));
     }
   };
 };
@@ -193,6 +200,7 @@ var import_react3 = __toESM(require("react"));
 // src/hooks/useUniformContextualEditing.ts
 var import_canvas3 = require("@uniformdev/canvas");
 var import_react2 = require("react");
+var createApiEnhancer = import_canvas3.createUniformApiEnhancer;
 var registeredCompositionIds = /* @__PURE__ */ new Set();
 var useUniformContextualEditing = ({
   initialCompositionValue,
@@ -218,8 +226,8 @@ var useUniformContextualEditing = ({
     if (!channel || registeredCompositionIds.has(initialCompositionValue == null ? void 0 : initialCompositionValue._id)) {
       return;
     }
-    const unsubscribeFromCompositionUpdates = channel.on("update-composition", async (message) => {
-      if (!(0, import_canvas3.isUpdateCompositionMessage)(message)) {
+    const unsubscribeFromCompositionUpdates = channel.on("update-composition-internal", async (message) => {
+      if (!(0, import_canvas3.isUpdateCompositionInternalMessage)(message)) {
         return;
       }
       const enhancedComposition = await enhance(message);
@@ -271,6 +279,7 @@ function isInContextEditingMode() {
   );
   return isOpenedByInContextEditor && isAllowlistedReferrer;
 }
+var useContextualEditing = useUniformContextualEditing;
 
 // src/components/UniformComposition.tsx
 var UniformCompositionContext = (0, import_react3.createContext)({
@@ -307,6 +316,8 @@ function UniformComposition({
     ))
   );
 }
+var useComposition = useUniformCurrentComposition;
+var Composition = UniformComposition;
 
 // src/components/ContextualEditingComponentWrapper.tsx
 function ContextualEditingComponentWrapper({
@@ -393,7 +404,7 @@ function renderComponent({
 }) {
   const RenderComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
   if (component.type === import_canvas5.CANVAS_TEST_TYPE) {
-    return resolveSystem.test(
+    const testComponent = resolveSystem.test(
       component,
       key,
       (variantComponent, key2) => {
@@ -412,8 +423,20 @@ function renderComponent({
         });
       }
     );
+    return /* @__PURE__ */ import_react5.default.createElement(
+      ContextualEditingComponentWrapper,
+      {
+        component,
+        parentComponent,
+        slotName,
+        indexInSlot,
+        slotChildrenCount,
+        emptyPlaceholder
+      },
+      testComponent
+    );
   } else if (component.type === import_canvas5.CANVAS_PERSONALIZE_TYPE) {
-    return resolveSystem.personalization(
+    const personalizationComponent = resolveSystem.personalization(
       component,
       key,
       (variantComponent, key2) => {
@@ -432,6 +455,18 @@ function renderComponent({
         });
       }
     );
+    return /* @__PURE__ */ import_react5.default.createElement(
+      ContextualEditingComponentWrapper,
+      {
+        component,
+        parentComponent,
+        slotName,
+        indexInSlot,
+        slotChildrenCount,
+        emptyPlaceholder
+      },
+      personalizationComponent
+    );
   } else if (RenderComponent) {
     const props = convertComponentToProps(component);
     return /* @__PURE__ */ import_react5.default.createElement(UniformComponent, { key, data: component, resolveRenderer }, /* @__PURE__ */ import_react5.default.createElement(
@@ -455,6 +490,7 @@ function renderComponent({
   }
   return null;
 }
+var Slot = UniformSlot;
 
 // src/components/UniformComponent.tsx
 var UniformComponentContext = (0, import_react6.createContext)({});
@@ -508,7 +544,7 @@ function resolveChildren({
     } 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.`
+          `[canvas-dev] All the slots in component '${data.type}' are rendered in no particular order. Use '<Slot name={slotName} />' to reliably render the slots.`
         );
       }
       children = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ import_react6.default.createElement(UniformSlot, { key: slotName, name: slotName }));
@@ -518,16 +554,72 @@ function resolveChildren({
   return renderChildren;
 }
 
+// src/components/UniformText.tsx
+var import_react7 = __toESM(require("react"));
+var UniformText = ({
+  as: Tag = "span",
+  parameterId,
+  isMultiline = false,
+  render = (value) => value,
+  ...props
+}) => {
+  const { data: componentData } = useUniformCurrentComponent();
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const elementRef = (0, import_react7.useRef)(null);
+  const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
+  const parameter = (0, import_react7.useMemo)(() => {
+    var _a;
+    return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
+  }, [componentData, parameterId]);
+  const value = (0, import_react7.useMemo)(() => parameter == null ? void 0 : parameter.value, [parameter]);
+  const isEditable = (0, import_react7.useMemo)(() => {
+    var _a, _b;
+    return (_b = (_a = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _a.isEditable) != null ? _b : false;
+  }, [parameter]);
+  const handleOnFocus = (0, import_react7.useCallback)(() => {
+    setIsFocused(true);
+  }, [setIsFocused]);
+  const handleOnBlur = (0, import_react7.useCallback)(() => {
+    setIsFocused(false);
+  }, [setIsFocused]);
+  const shouldSkipCustomRendering = (0, import_react7.useMemo)(() => isFocused && isEditable, [isFocused, isEditable]);
+  if (!parameter) {
+    console.warn(
+      `UniformText: The parameterId "${parameterId}" was not found in the component of type "${componentData == null ? void 0 : componentData.type}"`
+    );
+    return null;
+  }
+  if (!isContextualEditing) {
+    return /* @__PURE__ */ import_react7.default.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
+  }
+  return /* @__PURE__ */ import_react7.default.createElement(
+    Tag,
+    {
+      ...props,
+      ref: elementRef,
+      "data-uniform-component-id": componentData == null ? void 0 : componentData._id,
+      "data-uniform-parameter-id": parameterId,
+      "data-uniform-parameter-type": "text",
+      style: isMultiline ? { whiteSpace: "pre-wrap" } : {},
+      contentEditable: isEditable,
+      suppressContentEditableWarning: true,
+      onFocus: handleOnFocus,
+      onBlur: handleOnBlur
+    },
+    shouldSkipCustomRendering ? value : render(value)
+  );
+};
+
 // src/hooks/useCompositionEventEffect.ts
 var import_canvas7 = require("@uniformdev/canvas");
-var import_react7 = require("react");
+var import_react8 = require("react");
 function useCompositionEventEffect({
   enabled,
   projectId,
   compositionId,
   effect
 }) {
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!enabled || !compositionId || !projectId) {
       return;
     }
@@ -555,18 +647,24 @@ function useCompositionEventEffect({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Composition,
   DefaultNotImplementedComponent,
   NOT_IMPLEMENTED_COMPONENT,
+  Slot,
   UniformComponent,
   UniformComposition,
   UniformSlot,
+  UniformText,
   componentStore,
   componentStoreResolver,
+  createApiEnhancer,
   createComponentStore,
   createComponentStoreResolver,
   createUniformApiEnhancer,
   registerUniformComponent,
+  useComposition,
   useCompositionEventEffect,
+  useContextualEditing,
   useUniformContextualEditing,
   useUniformCurrentComponent,
   useUniformCurrentComposition

package/dist/index.mjs

@@ -64,7 +64,8 @@ var createComponentStore = () => {
       components.set(getTypeWithVariant(type, variantId), component);
     },
     get: (type, variantId) => {
-      return components.get(getTypeWithVariant(type, variantId));
+      var _a;
+      return (_a = components.get(getTypeWithVariant(type, variantId))) != null ? _a : components.get(getTypeWithVariant(type));
     }
   };
 };
@@ -162,9 +163,10 @@ import {
   EMPTY_COMPOSITION,
   IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID,
   IN_CONTEXT_EDITOR_QUERY_STRING_PARAM,
-  isUpdateCompositionMessage
+  isUpdateCompositionInternalMessage
 } from "@uniformdev/canvas";
 import { useEffect, useMemo, useState } from "react";
+var createApiEnhancer = createUniformApiEnhancer;
 var registeredCompositionIds = /* @__PURE__ */ new Set();
 var useUniformContextualEditing = ({
   initialCompositionValue,
@@ -190,8 +192,8 @@ var useUniformContextualEditing = ({
     if (!channel || registeredCompositionIds.has(initialCompositionValue == null ? void 0 : initialCompositionValue._id)) {
       return;
     }
-    const unsubscribeFromCompositionUpdates = channel.on("update-composition", async (message) => {
-      if (!isUpdateCompositionMessage(message)) {
+    const unsubscribeFromCompositionUpdates = channel.on("update-composition-internal", async (message) => {
+      if (!isUpdateCompositionInternalMessage(message)) {
         return;
       }
       const enhancedComposition = await enhance(message);
@@ -243,6 +245,7 @@ function isInContextEditingMode() {
   );
   return isOpenedByInContextEditor && isAllowlistedReferrer;
 }
+var useContextualEditing = useUniformContextualEditing;
 
 // src/components/UniformComposition.tsx
 var UniformCompositionContext = createContext({
@@ -279,6 +282,8 @@ function UniformComposition({
     ))
   );
 }
+var useComposition = useUniformCurrentComposition;
+var Composition = UniformComposition;
 
 // src/components/ContextualEditingComponentWrapper.tsx
 function ContextualEditingComponentWrapper({
@@ -365,7 +370,7 @@ function renderComponent({
 }) {
   const RenderComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
   if (component.type === CANVAS_TEST_TYPE) {
-    return resolveSystem.test(
+    const testComponent = resolveSystem.test(
       component,
       key,
       (variantComponent, key2) => {
@@ -384,8 +389,20 @@ function renderComponent({
         });
       }
     );
+    return /* @__PURE__ */ React5.createElement(
+      ContextualEditingComponentWrapper,
+      {
+        component,
+        parentComponent,
+        slotName,
+        indexInSlot,
+        slotChildrenCount,
+        emptyPlaceholder
+      },
+      testComponent
+    );
   } else if (component.type === CANVAS_PERSONALIZE_TYPE) {
-    return resolveSystem.personalization(
+    const personalizationComponent = resolveSystem.personalization(
       component,
       key,
       (variantComponent, key2) => {
@@ -404,6 +421,18 @@ function renderComponent({
         });
       }
     );
+    return /* @__PURE__ */ React5.createElement(
+      ContextualEditingComponentWrapper,
+      {
+        component,
+        parentComponent,
+        slotName,
+        indexInSlot,
+        slotChildrenCount,
+        emptyPlaceholder
+      },
+      personalizationComponent
+    );
   } else if (RenderComponent) {
     const props = convertComponentToProps(component);
     return /* @__PURE__ */ React5.createElement(UniformComponent, { key, data: component, resolveRenderer }, /* @__PURE__ */ React5.createElement(
@@ -427,6 +456,7 @@ function renderComponent({
   }
   return null;
 }
+var Slot = UniformSlot;
 
 // src/components/UniformComponent.tsx
 var UniformComponentContext = createContext2({});
@@ -480,7 +510,7 @@ function resolveChildren({
     } 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.`
+          `[canvas-dev] All the slots in component '${data.type}' are rendered in no particular order. Use '<Slot name={slotName} />' to reliably render the slots.`
         );
       }
       children = Object.keys(data.slots || {}).map((slotName) => /* @__PURE__ */ React6.createElement(UniformSlot, { key: slotName, name: slotName }));
@@ -490,6 +520,62 @@ function resolveChildren({
   return renderChildren;
 }
 
+// src/components/UniformText.tsx
+import React7, { useCallback, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+var UniformText = ({
+  as: Tag = "span",
+  parameterId,
+  isMultiline = false,
+  render = (value) => value,
+  ...props
+}) => {
+  const { data: componentData } = useUniformCurrentComponent();
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const elementRef = useRef(null);
+  const [isFocused, setIsFocused] = useState2(false);
+  const parameter = useMemo2(() => {
+    var _a;
+    return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
+  }, [componentData, parameterId]);
+  const value = useMemo2(() => parameter == null ? void 0 : parameter.value, [parameter]);
+  const isEditable = useMemo2(() => {
+    var _a, _b;
+    return (_b = (_a = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _a.isEditable) != null ? _b : false;
+  }, [parameter]);
+  const handleOnFocus = useCallback(() => {
+    setIsFocused(true);
+  }, [setIsFocused]);
+  const handleOnBlur = useCallback(() => {
+    setIsFocused(false);
+  }, [setIsFocused]);
+  const shouldSkipCustomRendering = useMemo2(() => isFocused && isEditable, [isFocused, isEditable]);
+  if (!parameter) {
+    console.warn(
+      `UniformText: The parameterId "${parameterId}" was not found in the component of type "${componentData == null ? void 0 : componentData.type}"`
+    );
+    return null;
+  }
+  if (!isContextualEditing) {
+    return /* @__PURE__ */ React7.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
+  }
+  return /* @__PURE__ */ React7.createElement(
+    Tag,
+    {
+      ...props,
+      ref: elementRef,
+      "data-uniform-component-id": componentData == null ? void 0 : componentData._id,
+      "data-uniform-parameter-id": parameterId,
+      "data-uniform-parameter-type": "text",
+      style: isMultiline ? { whiteSpace: "pre-wrap" } : {},
+      contentEditable: isEditable,
+      suppressContentEditableWarning: true,
+      onFocus: handleOnFocus,
+      onBlur: handleOnBlur
+    },
+    shouldSkipCustomRendering ? value : render(value)
+  );
+};
+
 // src/hooks/useCompositionEventEffect.ts
 import {
   CANVAS_DRAFT_STATE,
@@ -530,18 +616,24 @@ function useCompositionEventEffect({
   }, [compositionId, enabled, projectId, effect]);
 }
 export {
+  Composition,
   DefaultNotImplementedComponent,
   NOT_IMPLEMENTED_COMPONENT,
+  Slot,
   UniformComponent,
   UniformComposition,
   UniformSlot,
+  UniformText,
   componentStore,
   componentStoreResolver,
+  createApiEnhancer,
   createComponentStore,
   createComponentStoreResolver,
   createUniformApiEnhancer,
   registerUniformComponent,
+  useComposition,
   useCompositionEventEffect,
+  useContextualEditing,
   useUniformContextualEditing,
   useUniformCurrentComponent,
   useUniformCurrentComposition

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "18.35.1-alpha.12+d5e86f567",
+  "version": "18.35.1-alpha.17+c528ec3cb",
   "description": "React SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,9 +24,9 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "18.35.1-alpha.12+d5e86f567",
-    "@uniformdev/context": "18.35.1-alpha.12+d5e86f567",
-    "@uniformdev/context-react": "18.35.1-alpha.12+d5e86f567"
+    "@uniformdev/canvas": "18.35.1-alpha.17+c528ec3cb",
+    "@uniformdev/context": "18.35.1-alpha.17+c528ec3cb",
+    "@uniformdev/context-react": "18.35.1-alpha.17+c528ec3cb"
   },
   "peerDependencies": {
     "react": ">= 16 || 17 || 18",
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d5e86f5673575aecfcf517e684922871315f279b"
+  "gitHead": "c528ec3cbb765bfd058357968a9be5ae0926362c"
 }