@uniformdev/canvas-react 18.38.2-alpha.6 → 19.1.1-alpha.1

package/dist/index.d.ts

@@ -69,137 +69,18 @@ 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 `<Slot />`, this component only provides the services needed to achieve that.
+ * Note that the actual rendering happens inside `<UniformSlot />`, 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.
@@ -324,128 +205,6 @@ 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 */
@@ -468,12 +227,6 @@ 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;
@@ -499,10 +252,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'>;
+/**
+ * Adds inline editing capability to text parameters
+ * @deprecated This component is unstable, and not ready for production usage.
+ **/
+declare const UniformText: ({ as: Tag, parameterId, isMultiline, render, ...props }: UniformTextProps) => JSX.Element | null;
 
 type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToCompositionOptions>, 'callback'> & {
     enabled: boolean;
@@ -527,4 +302,4 @@ declare const createComponentStoreResolver: (options: {
     defaultComponent?: React$1.ComponentType<ComponentProps<any>>;
 }) => RenderComponentResolver;
 
-export { ComponentProps, ComponentStore, Composition, CompositionProps, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, Slot, SlotProps, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformSlot, UniformSlotProps, UseCompositionEventEffectOptions, UseContextualEditingProps, UseUniformContextualEditingProps, componentStore, componentStoreResolver, createApiEnhancer, createComponentStore, createComponentStoreResolver, registerUniformComponent, useComposition, useCompositionEventEffect, useContextualEditing, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };
+export { ComponentProps, ComponentStore, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformSlot, UniformSlotProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.esm.js

@@ -98,7 +98,8 @@ import {
   CANVAS_PERSONALIZE_SLOT,
   CANVAS_PERSONALIZE_TYPE,
   CANVAS_TEST_SLOT,
-  CANVAS_TEST_TYPE
+  CANVAS_TEST_TYPE,
+  EMPTY_COMPOSITION as EMPTY_COMPOSITION2
 } from "@uniformdev/canvas";
 import React5 from "react";
 
@@ -162,10 +163,9 @@ 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,
@@ -191,8 +191,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);
@@ -244,7 +244,6 @@ function isInContextEditingMode() {
   );
   return isOpenedByInContextEditor && isAllowlistedReferrer;
 }
-var useContextualEditing = useUniformContextualEditing;
 
 // src/components/UniformComposition.tsx
 var UniformCompositionContext = createContext({
@@ -281,8 +280,6 @@ function UniformComposition({
     ))
   );
 }
-var useComposition = useUniformCurrentComposition;
-var Composition = UniformComposition;
 
 // src/components/ContextualEditingComponentWrapper.tsx
 function ContextualEditingComponentWrapper({
@@ -297,7 +294,7 @@ function ContextualEditingComponentWrapper({
   var _a, _b, _c, _d;
   const isPlaceholder = (component == null ? void 0 : component._id) === PLACEHOLDER_ID;
   const { isContextualEditing } = useUniformCurrentComposition();
-  return !isContextualEditing ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, children) : /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
+  return !isContextualEditing ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, children) : isPlaceholder && emptyPlaceholder === null ? null : /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
     "script",
     {
       "data-role": IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
@@ -329,7 +326,7 @@ function UniformSlot({
   }
   const slot = (_a = parentData.slots) == null ? void 0 : _a[name];
   if (!slot || !Array.isArray(slot)) {
-    if (process.env.NODE_ENV === "development") {
+    if (process.env.NODE_ENV === "development" && parentData.type !== EMPTY_COMPOSITION2.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
@@ -369,7 +366,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) => {
@@ -388,8 +385,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) => {
@@ -408,6 +417,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(
@@ -431,7 +452,6 @@ function renderComponent({
   }
   return null;
 }
-var Slot = UniformSlot;
 
 // src/components/UniformComponent.tsx
 var UniformComponentContext = createContext2({});
@@ -485,7 +505,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 '<Slot name={slotName} />' to reliably render the slots.`
+          `[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 }));
@@ -495,6 +515,63 @@ 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",
+      "data-uniform-is-multiline": isMultiline,
+      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,
@@ -535,23 +612,19 @@ 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,23 +30,19 @@ 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
@@ -198,7 +194,6 @@ 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,
@@ -224,8 +219,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);
@@ -277,7 +272,6 @@ function isInContextEditingMode() {
   );
   return isOpenedByInContextEditor && isAllowlistedReferrer;
 }
-var useContextualEditing = useUniformContextualEditing;
 
 // src/components/UniformComposition.tsx
 var UniformCompositionContext = (0, import_react3.createContext)({
@@ -314,8 +308,6 @@ function UniformComposition({
     ))
   );
 }
-var useComposition = useUniformCurrentComposition;
-var Composition = UniformComposition;
 
 // src/components/ContextualEditingComponentWrapper.tsx
 function ContextualEditingComponentWrapper({
@@ -330,7 +322,7 @@ function ContextualEditingComponentWrapper({
   var _a, _b, _c, _d;
   const isPlaceholder = (component == null ? void 0 : component._id) === import_canvas4.PLACEHOLDER_ID;
   const { isContextualEditing } = useUniformCurrentComposition();
-  return !isContextualEditing ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, children) : /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(
+  return !isContextualEditing ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, children) : isPlaceholder && emptyPlaceholder === null ? null : /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(
     "script",
     {
       "data-role": import_canvas4.IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
@@ -362,7 +354,7 @@ function UniformSlot({
   }
   const slot = (_a = parentData.slots) == null ? void 0 : _a[name];
   if (!slot || !Array.isArray(slot)) {
-    if (process.env.NODE_ENV === "development") {
+    if (process.env.NODE_ENV === "development" && parentData.type !== import_canvas5.EMPTY_COMPOSITION.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
@@ -402,7 +394,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) => {
@@ -421,8 +413,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) => {
@@ -441,6 +445,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(
@@ -464,7 +480,6 @@ function renderComponent({
   }
   return null;
 }
-var Slot = UniformSlot;
 
 // src/components/UniformComponent.tsx
 var UniformComponentContext = (0, import_react6.createContext)({});
@@ -518,7 +533,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 '<Slot name={slotName} />' to reliably render the slots.`
+          `[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__ */ import_react6.default.createElement(UniformSlot, { key: slotName, name: slotName }));
@@ -528,16 +543,73 @@ 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",
+      "data-uniform-is-multiline": isMultiline,
+      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;
     }
@@ -565,23 +637,19 @@ 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

@@ -98,7 +98,8 @@ import {
   CANVAS_PERSONALIZE_SLOT,
   CANVAS_PERSONALIZE_TYPE,
   CANVAS_TEST_SLOT,
-  CANVAS_TEST_TYPE
+  CANVAS_TEST_TYPE,
+  EMPTY_COMPOSITION as EMPTY_COMPOSITION2
 } from "@uniformdev/canvas";
 import React5 from "react";
 
@@ -162,10 +163,9 @@ 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,
@@ -191,8 +191,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);
@@ -244,7 +244,6 @@ function isInContextEditingMode() {
   );
   return isOpenedByInContextEditor && isAllowlistedReferrer;
 }
-var useContextualEditing = useUniformContextualEditing;
 
 // src/components/UniformComposition.tsx
 var UniformCompositionContext = createContext({
@@ -281,8 +280,6 @@ function UniformComposition({
     ))
   );
 }
-var useComposition = useUniformCurrentComposition;
-var Composition = UniformComposition;
 
 // src/components/ContextualEditingComponentWrapper.tsx
 function ContextualEditingComponentWrapper({
@@ -297,7 +294,7 @@ function ContextualEditingComponentWrapper({
   var _a, _b, _c, _d;
   const isPlaceholder = (component == null ? void 0 : component._id) === PLACEHOLDER_ID;
   const { isContextualEditing } = useUniformCurrentComposition();
-  return !isContextualEditing ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, children) : /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
+  return !isContextualEditing ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, children) : isPlaceholder && emptyPlaceholder === null ? null : /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
     "script",
     {
       "data-role": IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
@@ -329,7 +326,7 @@ function UniformSlot({
   }
   const slot = (_a = parentData.slots) == null ? void 0 : _a[name];
   if (!slot || !Array.isArray(slot)) {
-    if (process.env.NODE_ENV === "development") {
+    if (process.env.NODE_ENV === "development" && parentData.type !== EMPTY_COMPOSITION2.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
@@ -369,7 +366,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) => {
@@ -388,8 +385,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) => {
@@ -408,6 +417,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(
@@ -431,7 +452,6 @@ function renderComponent({
   }
   return null;
 }
-var Slot = UniformSlot;
 
 // src/components/UniformComponent.tsx
 var UniformComponentContext = createContext2({});
@@ -485,7 +505,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 '<Slot name={slotName} />' to reliably render the slots.`
+          `[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 }));
@@ -495,6 +515,63 @@ 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",
+      "data-uniform-is-multiline": isMultiline,
+      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,
@@ -535,23 +612,19 @@ 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.38.2-alpha.6+d4938f167",
+  "version": "19.1.1-alpha.1+3ec68fe9d",
   "description": "React SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,16 +24,16 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "18.38.2-alpha.6+d4938f167",
-    "@uniformdev/context": "18.38.2-alpha.6+d4938f167",
-    "@uniformdev/context-react": "18.38.2-alpha.6+d4938f167"
+    "@uniformdev/canvas": "19.1.1-alpha.1+3ec68fe9d",
+    "@uniformdev/context": "19.1.1-alpha.1+3ec68fe9d",
+    "@uniformdev/context-react": "19.1.1-alpha.1+3ec68fe9d"
   },
   "peerDependencies": {
     "react": ">= 16 || 17 || 18",
     "react-dom": ">=16"
   },
   "devDependencies": {
-    "@types/react": "18.0.35",
+    "@types/react": "18.0.37",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d4938f167d196bbd523e6cdd031f56fab4ceebf6"
+  "gitHead": "3ec68fe9d54c7128e57cc8a5c8116fe968f65865"
 }