@uniformdev/canvas-react 18.34.1-alpha.57 → 18.35.1-alpha.16

package/dist/index.d.ts

@@ -199,7 +199,7 @@ type UseUniformContextualEditingProps = {
      * 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.
@@ -504,6 +504,28 @@ 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;
+
 type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToCompositionOptions>, 'callback'> & {
     enabled: boolean;
     effect: () => void;
@@ -527,4 +549,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, 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,7 +163,7 @@ 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;
@@ -191,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);
@@ -369,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) => {
@@ -388,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) => {
@@ -408,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(
@@ -495,6 +520,55 @@ 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 value = useMemo2(() => {
+    var _a;
+    return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId].value;
+  }, [componentData, parameterId]);
+  const isEditable = useMemo2(() => {
+    var _a, _b, _c;
+    return (_c = (_b = ((_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId])._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
+  }, [componentData, parameterId]);
+  const handleOnFocus = useCallback(() => {
+    setIsFocused(true);
+  }, [setIsFocused]);
+  const handleOnBlur = useCallback(() => {
+    setIsFocused(false);
+  }, [setIsFocused]);
+  const shouldSkipCustomRendering = useMemo2(() => isFocused && isEditable, [isFocused, isEditable]);
+  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,
@@ -542,6 +616,7 @@ export {
   UniformComponent,
   UniformComposition,
   UniformSlot,
+  UniformText,
   componentStore,
   componentStoreResolver,
   createApiEnhancer,

package/dist/index.js

@@ -37,6 +37,7 @@ __export(src_exports, {
   UniformComponent: () => UniformComponent,
   UniformComposition: () => UniformComposition,
   UniformSlot: () => UniformSlot,
+  UniformText: () => UniformText,
   componentStore: () => componentStore,
   componentStoreResolver: () => componentStoreResolver,
   createApiEnhancer: () => createApiEnhancer,
@@ -117,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));
     }
   };
 };
@@ -224,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);
@@ -402,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) => {
@@ -421,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) => {
@@ -441,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(
@@ -528,16 +554,65 @@ 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 value = (0, import_react7.useMemo)(() => {
+    var _a;
+    return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId].value;
+  }, [componentData, parameterId]);
+  const isEditable = (0, import_react7.useMemo)(() => {
+    var _a, _b, _c;
+    return (_c = (_b = ((_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId])._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
+  }, [componentData, parameterId]);
+  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 (!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;
     }
@@ -572,6 +647,7 @@ function useCompositionEventEffect({
   UniformComponent,
   UniformComposition,
   UniformSlot,
+  UniformText,
   componentStore,
   componentStoreResolver,
   createApiEnhancer,

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,7 +163,7 @@ 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;
@@ -191,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);
@@ -369,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) => {
@@ -388,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) => {
@@ -408,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(
@@ -495,6 +520,55 @@ 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 value = useMemo2(() => {
+    var _a;
+    return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId].value;
+  }, [componentData, parameterId]);
+  const isEditable = useMemo2(() => {
+    var _a, _b, _c;
+    return (_c = (_b = ((_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId])._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
+  }, [componentData, parameterId]);
+  const handleOnFocus = useCallback(() => {
+    setIsFocused(true);
+  }, [setIsFocused]);
+  const handleOnBlur = useCallback(() => {
+    setIsFocused(false);
+  }, [setIsFocused]);
+  const shouldSkipCustomRendering = useMemo2(() => isFocused && isEditable, [isFocused, isEditable]);
+  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,
@@ -542,6 +616,7 @@ export {
   UniformComponent,
   UniformComposition,
   UniformSlot,
+  UniformText,
   componentStore,
   componentStoreResolver,
   createApiEnhancer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "18.34.1-alpha.57+d06712d70",
+  "version": "18.35.1-alpha.16+3d99d8fd6",
   "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.34.1-alpha.57+d06712d70",
-    "@uniformdev/context": "18.34.1-alpha.57+d06712d70",
-    "@uniformdev/context-react": "18.34.1-alpha.57+d06712d70"
+    "@uniformdev/canvas": "18.35.1-alpha.16+3d99d8fd6",
+    "@uniformdev/context": "18.35.1-alpha.16+3d99d8fd6",
+    "@uniformdev/context-react": "18.35.1-alpha.16+3d99d8fd6"
   },
   "peerDependencies": {
     "react": ">= 16 || 17 || 18",
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d06712d70880e665966897d71c92444ea1dea80e"
+  "gitHead": "3d99d8fd68048310f8f6dc56a1d18e61c35c9765"
 }