@uniformdev/canvas-react 19.1.0 → 19.2.0

package/dist/index.d.ts

@@ -80,7 +80,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.
@@ -253,6 +253,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;
 
+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;
     effect: () => void;
@@ -276,4 +302,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, 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,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 registeredCompositionIds = /* @__PURE__ */ new Set();
@@ -190,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);
@@ -325,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
@@ -365,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) => {
@@ -384,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) => {
@@ -404,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(
@@ -490,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,6 +617,7 @@ export {
   UniformComponent,
   UniformComposition,
   UniformSlot,
+  UniformText,
   componentStore,
   componentStoreResolver,
   createComponentStore,

package/dist/index.js

@@ -35,6 +35,7 @@ __export(src_exports, {
   UniformComponent: () => UniformComponent,
   UniformComposition: () => UniformComposition,
   UniformSlot: () => UniformSlot,
+  UniformText: () => UniformText,
   componentStore: () => componentStore,
   componentStoreResolver: () => componentStoreResolver,
   createComponentStore: () => createComponentStore,
@@ -218,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);
@@ -353,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
@@ -393,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) => {
@@ -412,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) => {
@@ -432,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(
@@ -518,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;
     }
@@ -560,6 +642,7 @@ function useCompositionEventEffect({
   UniformComponent,
   UniformComposition,
   UniformSlot,
+  UniformText,
   componentStore,
   componentStoreResolver,
   createComponentStore,

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,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 registeredCompositionIds = /* @__PURE__ */ new Set();
@@ -190,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);
@@ -325,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
@@ -365,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) => {
@@ -384,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) => {
@@ -404,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(
@@ -490,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,6 +617,7 @@ export {
   UniformComponent,
   UniformComposition,
   UniformSlot,
+  UniformText,
   componentStore,
   componentStoreResolver,
   createComponentStore,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "19.1.0",
+  "version": "19.2.0",
   "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": "19.1.0",
-    "@uniformdev/context": "19.1.0",
-    "@uniformdev/context-react": "19.1.0"
+    "@uniformdev/canvas": "19.2.0",
+    "@uniformdev/context": "19.2.0",
+    "@uniformdev/context-react": "19.2.0"
   },
   "peerDependencies": {
     "react": ">= 16 || 17 || 18",
     "react-dom": ">=16"
   },
   "devDependencies": {
-    "@types/react": "18.0.37",
+    "@types/react": "18.0.38",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0a06bc3cbf5a3ef7eb72b7ba237e76df645a4a88"
+  "gitHead": "9eb2423cd12a5db527f9f3a9d46b47ac2a0e7eb3"
 }