@uniformdev/canvas-react 19.33.1-alpha.10 → 19.33.1-alpha.15

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import React$1, { Key, ReactNode, PropsWithChildren } from 'react';
 import * as _uniformdev_canvas from '@uniformdev/canvas';
-import { ComponentInstance, RootComponentInstance, UpdateCompositionMessage, SubscribeToCompositionOptions } from '@uniformdev/canvas';
-export { createUniformApiEnhancer } from '@uniformdev/canvas';
+import { ComponentInstance, RootComponentInstance, UpdateCompositionMessage, getParameterAttributes as getParameterAttributes$1, SubscribeToCompositionOptions } from '@uniformdev/canvas';
+export { GetParameterAttributesProps, createUniformApiEnhancer } from '@uniformdev/canvas';
 import { RichTextNode } from '@uniformdev/richtext';
 
 /**
@@ -41,6 +41,40 @@ type ComponentStore = {
  **/
 declare function DefaultNotImplementedComponent(props: ComponentProps): React$1.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;
+    /**
+     * Sets the value to show in Canvas editor when the parameter value is empty.
+     * Can be a static string, or a function to generate the placeholder out of parameter info.
+     * @default undefined
+     */
+    placeholder?: string | ((parameter: {
+        id: string;
+    }) => string | undefined);
+    /**
+     * 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' | 'placeholder'>;
+/**
+ * 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, placeholder, render, ...props }: UniformTextProps) => React$1.JSX.Element | null;
+
 type UniformComponentProps<TRenderProps = unknown> = {
     /** The data of the component instance */
     data?: ComponentInstance | RootComponentInstance;
@@ -59,11 +93,16 @@ type UniformComponentProps<TRenderProps = unknown> = {
      * Default: onView
      */
     behaviorTracking?: 'onLoad' | 'onView';
+    /**
+     * The default placeholder to pass to the parameter component that support inline editing (such as UniformText).
+     */
+    contextualEditingDefaultPlaceholder?: UniformTextProps['placeholder'];
 };
 type UniformComponentContextValue = {
     data?: UniformComponentProps['data'];
     resolveRenderer?: UniformComponentProps['resolveRenderer'];
     behaviorTracking?: UniformComponentProps['behaviorTracking'];
+    contextualEditingDefaultPlaceholder?: UniformComponentProps['contextualEditingDefaultPlaceholder'];
 };
 /**
  * Gets the data of the closest `<UniformComponent />` ancestor.
@@ -74,7 +113,7 @@ declare function useUniformCurrentComponent(): UniformComponentContextValue;
  * 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>): React$1.JSX.Element | null;
+declare function UniformComponent<TRenderProps = unknown>({ data, resolveRenderer, children, behaviorTracking, contextualEditingDefaultPlaceholder, }: UniformComponentProps<TRenderProps>): React$1.JSX.Element | null;
 
 type UseUniformContextualEditingProps = {
     initialCompositionValue?: RootComponentInstance;
@@ -228,7 +267,7 @@ declare function useUniformCurrentComposition(): UniformCompositionContextValue;
  * It renders the full tree of components, and provides some services to the children, such as `useUniformCurrentComposition`.
  * 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>): React$1.JSX.Element;
+declare function UniformComposition<TRenderProps = unknown>({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, contextualEditingDefaultPlaceholder, }: UniformCompositionProps<TRenderProps>): React$1.JSX.Element;
 
 type RichTextComponentProps<TNode extends RichTextNode = RichTextNode> = {
     node: TNode;
@@ -306,62 +345,12 @@ 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;
-    /**
-     * Sets the value to show in Canvas editor when the parameter value is empty.
-     * @default undefined
-     */
-    placeholder?: string;
-    /**
-     * 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, placeholder, render, ...props }: UniformTextProps) => React$1.JSX.Element | null;
-
-type GetParameterAttributesProps = {
-    /** The public Id of the parameter */
-    id: string;
-    /** The component object where this parameter is used */
-    component: ComponentInstance;
-    /**
-     * Sets the value to show in Canvas editor when the parameter value is empty.
-     * @default undefined
-     */
-    placeholder?: string;
-};
 /**
  * Returns the attributes needed to annotate a Uniform parameter for inline editing.
  * Supports only text parameters at the moment.
  * @deprecated Unstable, and not ready for production usage.
  **/
-declare const getParameterAttributes: ({ id, component, placeholder }: GetParameterAttributesProps) => {
-    'data-uniform-component-id': string | undefined;
-    'data-uniform-parameter-id': string;
-    'data-uniform-parameter-value': {};
-    'data-uniform-parameter-type': string | undefined;
-    'data-uniform-placeholder': string | undefined;
-    contentEditable: boolean;
-    suppressContentEditableWarning: boolean;
-};
+declare const getParameterAttributes: typeof getParameterAttributes$1;
 
 type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToCompositionOptions>, 'callback'> & {
     enabled: boolean;
@@ -404,4 +393,4 @@ declare const createComponentStoreResolver: (options: {
     defaultComponent?: React$1.ComponentType<ComponentProps<any>>;
 }) => RenderComponentResolver;
 
-export { ComponentProps, ComponentStore, DefaultNotImplementedComponent, GetParameterAttributesProps, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };
+export { ComponentProps, ComponentStore, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.esm.js

@@ -295,7 +295,8 @@ function UniformComposition({
   behaviorTracking = "onView",
   children,
   resolveRenderer,
-  contextualEditingEnhancer
+  contextualEditingEnhancer,
+  contextualEditingDefaultPlaceholder
 }) {
   const { composition, isContextualEditing } = useUniformContextualEditing({
     initialCompositionValue: data,
@@ -311,7 +312,8 @@ function UniformComposition({
       {
         data: composition,
         behaviorTracking,
-        resolveRenderer
+        resolveRenderer,
+        contextualEditingDefaultPlaceholder
       },
       children
     ))
@@ -499,7 +501,8 @@ function UniformComponent({
   data,
   resolveRenderer,
   children,
-  behaviorTracking
+  behaviorTracking,
+  contextualEditingDefaultPlaceholder
 }) {
   var _a, _b, _c;
   const parentData = useUniformCurrentComponent();
@@ -513,7 +516,8 @@ function UniformComponent({
   const contextValue = {
     data,
     resolveRenderer: resolveRenderer || parentData.resolveRenderer || componentStoreResolver,
-    behaviorTracking: (_a = behaviorTracking != null ? behaviorTracking : parentData == null ? void 0 : parentData.behaviorTracking) != null ? _a : "onView"
+    behaviorTracking: (_a = behaviorTracking != null ? behaviorTracking : parentData == null ? void 0 : parentData.behaviorTracking) != null ? _a : "onView",
+    contextualEditingDefaultPlaceholder: contextualEditingDefaultPlaceholder != null ? contextualEditingDefaultPlaceholder : parentData.contextualEditingDefaultPlaceholder
   };
   const enrichmentTags = (_c = (_b = data.parameters) == null ? void 0 : _b[CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _c.value;
   const TrackComponent = contextValue.behaviorTracking === "onLoad" ? TrackFragment : Track;
@@ -688,25 +692,23 @@ var UniformText = ({
   render = (value) => value,
   ...props
 }) => {
-  const { data: componentData } = useUniformCurrentComponent();
+  var _a, _b;
+  const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
   const { isContextualEditing } = useUniformCurrentComposition();
   const [isFocused, setIsFocused] = useState2(false);
   const parameter = useMemo3(() => {
-    var _a;
-    return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
+    var _a2;
+    return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[parameterId];
   }, [componentData, parameterId]);
-  const value = useMemo3(() => parameter == null ? void 0 : parameter.value, [parameter]);
-  const isEditable = useMemo3(() => {
-    var _a, _b;
-    return (_b = (_a = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _a.isEditable) != null ? _b : false;
-  }, [parameter]);
+  const value = parameter == null ? void 0 : parameter.value;
+  const isEditable = (_b = (_a = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _a.isEditable) != null ? _b : false;
+  const shouldSkipCustomRendering = isFocused && isEditable;
   const handleOnFocus = useCallback(() => {
     setIsFocused(true);
   }, [setIsFocused]);
   const handleOnBlur = useCallback(() => {
     setIsFocused(false);
   }, [setIsFocused]);
-  const shouldSkipCustomRendering = useMemo3(() => 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}"`
@@ -716,19 +718,20 @@ var UniformText = ({
   if (!isContextualEditing) {
     return /* @__PURE__ */ React17.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
   }
+  const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
+  const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
   return /* @__PURE__ */ React17.createElement(
     Tag,
     {
       ...props,
-      "data-uniform-component-id": componentData == null ? void 0 : componentData._id,
-      "data-uniform-parameter-id": parameterId,
-      "data-uniform-parameter-value": value != null ? value : "",
+      ...getParameterAttributes({
+        component: componentData,
+        id: parameterId,
+        isMultiline
+      }),
       "data-uniform-parameter-type": "text",
-      "data-uniform-is-multiline": isMultiline,
-      "data-uniform-placeholder": placeholder,
+      "data-uniform-placeholder": computedPlaceholder,
       style: isMultiline ? { whiteSpace: "pre-wrap" } : {},
-      contentEditable: isEditable,
-      suppressContentEditableWarning: true,
       onFocus: handleOnFocus,
       onBlur: handleOnBlur
     },
@@ -737,20 +740,12 @@ var UniformText = ({
 };
 
 // src/helpers/getParameterAttributes.ts
-var getParameterAttributes = ({ id, component, placeholder }) => {
-  var _a, _b, _c;
-  const componentId = component == null ? void 0 : component._id;
-  const parameter = (_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[id];
-  const value = parameter == null ? void 0 : parameter.value;
-  const type = parameter == null ? void 0 : parameter.type;
-  const isEditable = (_c = (_b = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
+import {
+  getParameterAttributes as defaultGetParameterAttributes
+} from "@uniformdev/canvas";
+var getParameterAttributes = (options) => {
   return {
-    "data-uniform-component-id": componentId,
-    "data-uniform-parameter-id": id,
-    "data-uniform-parameter-value": value != null ? value : "",
-    "data-uniform-parameter-type": type,
-    "data-uniform-placeholder": placeholder,
-    contentEditable: isEditable,
+    ...defaultGetParameterAttributes(options),
     suppressContentEditableWarning: true
   };
 };

package/dist/index.js

@@ -327,7 +327,8 @@ function UniformComposition({
   behaviorTracking = "onView",
   children,
   resolveRenderer,
-  contextualEditingEnhancer
+  contextualEditingEnhancer,
+  contextualEditingDefaultPlaceholder
 }) {
   const { composition, isContextualEditing } = useUniformContextualEditing({
     initialCompositionValue: data,
@@ -343,7 +344,8 @@ function UniformComposition({
       {
         data: composition,
         behaviorTracking,
-        resolveRenderer
+        resolveRenderer,
+        contextualEditingDefaultPlaceholder
       },
       children
     ))
@@ -531,7 +533,8 @@ function UniformComponent({
   data,
   resolveRenderer,
   children,
-  behaviorTracking
+  behaviorTracking,
+  contextualEditingDefaultPlaceholder
 }) {
   var _a, _b, _c;
   const parentData = useUniformCurrentComponent();
@@ -545,7 +548,8 @@ function UniformComponent({
   const contextValue = {
     data,
     resolveRenderer: resolveRenderer || parentData.resolveRenderer || componentStoreResolver,
-    behaviorTracking: (_a = behaviorTracking != null ? behaviorTracking : parentData == null ? void 0 : parentData.behaviorTracking) != null ? _a : "onView"
+    behaviorTracking: (_a = behaviorTracking != null ? behaviorTracking : parentData == null ? void 0 : parentData.behaviorTracking) != null ? _a : "onView",
+    contextualEditingDefaultPlaceholder: contextualEditingDefaultPlaceholder != null ? contextualEditingDefaultPlaceholder : parentData.contextualEditingDefaultPlaceholder
   };
   const enrichmentTags = (_c = (_b = data.parameters) == null ? void 0 : _b[import_canvas6.CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _c.value;
   const TrackComponent = contextValue.behaviorTracking === "onLoad" ? import_context_react2.TrackFragment : import_context_react2.Track;
@@ -717,25 +721,23 @@ var UniformText = ({
   render = (value) => value,
   ...props
 }) => {
-  const { data: componentData } = useUniformCurrentComponent();
+  var _a, _b;
+  const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
   const { isContextualEditing } = useUniformCurrentComposition();
   const [isFocused, setIsFocused] = (0, import_react17.useState)(false);
   const parameter = (0, import_react17.useMemo)(() => {
-    var _a;
-    return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
+    var _a2;
+    return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[parameterId];
   }, [componentData, parameterId]);
-  const value = (0, import_react17.useMemo)(() => parameter == null ? void 0 : parameter.value, [parameter]);
-  const isEditable = (0, import_react17.useMemo)(() => {
-    var _a, _b;
-    return (_b = (_a = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _a.isEditable) != null ? _b : false;
-  }, [parameter]);
+  const value = parameter == null ? void 0 : parameter.value;
+  const isEditable = (_b = (_a = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _a.isEditable) != null ? _b : false;
+  const shouldSkipCustomRendering = isFocused && isEditable;
   const handleOnFocus = (0, import_react17.useCallback)(() => {
     setIsFocused(true);
   }, [setIsFocused]);
   const handleOnBlur = (0, import_react17.useCallback)(() => {
     setIsFocused(false);
   }, [setIsFocused]);
-  const shouldSkipCustomRendering = (0, import_react17.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}"`
@@ -745,19 +747,20 @@ var UniformText = ({
   if (!isContextualEditing) {
     return /* @__PURE__ */ import_react17.default.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
   }
+  const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
+  const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
   return /* @__PURE__ */ import_react17.default.createElement(
     Tag,
     {
       ...props,
-      "data-uniform-component-id": componentData == null ? void 0 : componentData._id,
-      "data-uniform-parameter-id": parameterId,
-      "data-uniform-parameter-value": value != null ? value : "",
+      ...getParameterAttributes({
+        component: componentData,
+        id: parameterId,
+        isMultiline
+      }),
       "data-uniform-parameter-type": "text",
-      "data-uniform-is-multiline": isMultiline,
-      "data-uniform-placeholder": placeholder,
+      "data-uniform-placeholder": computedPlaceholder,
       style: isMultiline ? { whiteSpace: "pre-wrap" } : {},
-      contentEditable: isEditable,
-      suppressContentEditableWarning: true,
       onFocus: handleOnFocus,
       onBlur: handleOnBlur
     },
@@ -766,26 +769,16 @@ var UniformText = ({
 };
 
 // src/helpers/getParameterAttributes.ts
-var getParameterAttributes = ({ id, component, placeholder }) => {
-  var _a, _b, _c;
-  const componentId = component == null ? void 0 : component._id;
-  const parameter = (_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[id];
-  const value = parameter == null ? void 0 : parameter.value;
-  const type = parameter == null ? void 0 : parameter.type;
-  const isEditable = (_c = (_b = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
+var import_canvas7 = require("@uniformdev/canvas");
+var getParameterAttributes = (options) => {
   return {
-    "data-uniform-component-id": componentId,
-    "data-uniform-parameter-id": id,
-    "data-uniform-parameter-value": value != null ? value : "",
-    "data-uniform-parameter-type": type,
-    "data-uniform-placeholder": placeholder,
-    contentEditable: isEditable,
+    ...(0, import_canvas7.getParameterAttributes)(options),
     suppressContentEditableWarning: true
   };
 };
 
 // src/hooks/useCompositionEventEffect.ts
-var import_canvas7 = require("@uniformdev/canvas");
+var import_canvas8 = require("@uniformdev/canvas");
 var import_react18 = require("react");
 function useCompositionEventEffect({
   enabled,
@@ -799,12 +792,12 @@ function useCompositionEventEffect({
     }
     let goodbye = void 0;
     const loadEffect = async () => {
-      const eventBus = await (0, import_canvas7.createEventBus)();
+      const eventBus = await (0, import_canvas8.createEventBus)();
       if (eventBus) {
-        goodbye = (0, import_canvas7.subscribeToComposition)({
+        goodbye = (0, import_canvas8.subscribeToComposition)({
           eventBus,
           compositionId,
-          compositionState: import_canvas7.CANVAS_DRAFT_STATE,
+          compositionState: import_canvas8.CANVAS_DRAFT_STATE,
           projectId,
           callback: effect,
           event: "updated"
@@ -821,7 +814,7 @@ function useCompositionEventEffect({
 }
 
 // src/hooks/useUniformContextualEditingState.ts
-var import_canvas8 = require("@uniformdev/canvas");
+var import_canvas9 = require("@uniformdev/canvas");
 var import_react19 = require("react");
 var useUniformContextualEditingState = ({
   global = false
@@ -833,7 +826,7 @@ var useUniformContextualEditingState = ({
     if (!isContextualEditing) {
       return;
     }
-    const channel2 = (0, import_canvas8.createCanvasChannel)({
+    const channel2 = (0, import_canvas9.createCanvasChannel)({
       broadcastTo: [window],
       listenTo: [window]
     });
@@ -845,7 +838,7 @@ var useUniformContextualEditingState = ({
     }
     const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
       var _a;
-      if (!(0, import_canvas8.isUpdateContextualEditingStateInternalMessage)(message)) {
+      if (!(0, import_canvas9.isUpdateContextualEditingStateInternalMessage)(message)) {
         return;
       }
       if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {

package/dist/index.mjs

@@ -295,7 +295,8 @@ function UniformComposition({
   behaviorTracking = "onView",
   children,
   resolveRenderer,
-  contextualEditingEnhancer
+  contextualEditingEnhancer,
+  contextualEditingDefaultPlaceholder
 }) {
   const { composition, isContextualEditing } = useUniformContextualEditing({
     initialCompositionValue: data,
@@ -311,7 +312,8 @@ function UniformComposition({
       {
         data: composition,
         behaviorTracking,
-        resolveRenderer
+        resolveRenderer,
+        contextualEditingDefaultPlaceholder
       },
       children
     ))
@@ -499,7 +501,8 @@ function UniformComponent({
   data,
   resolveRenderer,
   children,
-  behaviorTracking
+  behaviorTracking,
+  contextualEditingDefaultPlaceholder
 }) {
   var _a, _b, _c;
   const parentData = useUniformCurrentComponent();
@@ -513,7 +516,8 @@ function UniformComponent({
   const contextValue = {
     data,
     resolveRenderer: resolveRenderer || parentData.resolveRenderer || componentStoreResolver,
-    behaviorTracking: (_a = behaviorTracking != null ? behaviorTracking : parentData == null ? void 0 : parentData.behaviorTracking) != null ? _a : "onView"
+    behaviorTracking: (_a = behaviorTracking != null ? behaviorTracking : parentData == null ? void 0 : parentData.behaviorTracking) != null ? _a : "onView",
+    contextualEditingDefaultPlaceholder: contextualEditingDefaultPlaceholder != null ? contextualEditingDefaultPlaceholder : parentData.contextualEditingDefaultPlaceholder
   };
   const enrichmentTags = (_c = (_b = data.parameters) == null ? void 0 : _b[CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _c.value;
   const TrackComponent = contextValue.behaviorTracking === "onLoad" ? TrackFragment : Track;
@@ -688,25 +692,23 @@ var UniformText = ({
   render = (value) => value,
   ...props
 }) => {
-  const { data: componentData } = useUniformCurrentComponent();
+  var _a, _b;
+  const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
   const { isContextualEditing } = useUniformCurrentComposition();
   const [isFocused, setIsFocused] = useState2(false);
   const parameter = useMemo3(() => {
-    var _a;
-    return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
+    var _a2;
+    return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[parameterId];
   }, [componentData, parameterId]);
-  const value = useMemo3(() => parameter == null ? void 0 : parameter.value, [parameter]);
-  const isEditable = useMemo3(() => {
-    var _a, _b;
-    return (_b = (_a = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _a.isEditable) != null ? _b : false;
-  }, [parameter]);
+  const value = parameter == null ? void 0 : parameter.value;
+  const isEditable = (_b = (_a = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _a.isEditable) != null ? _b : false;
+  const shouldSkipCustomRendering = isFocused && isEditable;
   const handleOnFocus = useCallback(() => {
     setIsFocused(true);
   }, [setIsFocused]);
   const handleOnBlur = useCallback(() => {
     setIsFocused(false);
   }, [setIsFocused]);
-  const shouldSkipCustomRendering = useMemo3(() => 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}"`
@@ -716,19 +718,20 @@ var UniformText = ({
   if (!isContextualEditing) {
     return /* @__PURE__ */ React17.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
   }
+  const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
+  const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
   return /* @__PURE__ */ React17.createElement(
     Tag,
     {
       ...props,
-      "data-uniform-component-id": componentData == null ? void 0 : componentData._id,
-      "data-uniform-parameter-id": parameterId,
-      "data-uniform-parameter-value": value != null ? value : "",
+      ...getParameterAttributes({
+        component: componentData,
+        id: parameterId,
+        isMultiline
+      }),
       "data-uniform-parameter-type": "text",
-      "data-uniform-is-multiline": isMultiline,
-      "data-uniform-placeholder": placeholder,
+      "data-uniform-placeholder": computedPlaceholder,
       style: isMultiline ? { whiteSpace: "pre-wrap" } : {},
-      contentEditable: isEditable,
-      suppressContentEditableWarning: true,
       onFocus: handleOnFocus,
       onBlur: handleOnBlur
     },
@@ -737,20 +740,12 @@ var UniformText = ({
 };
 
 // src/helpers/getParameterAttributes.ts
-var getParameterAttributes = ({ id, component, placeholder }) => {
-  var _a, _b, _c;
-  const componentId = component == null ? void 0 : component._id;
-  const parameter = (_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[id];
-  const value = parameter == null ? void 0 : parameter.value;
-  const type = parameter == null ? void 0 : parameter.type;
-  const isEditable = (_c = (_b = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
+import {
+  getParameterAttributes as defaultGetParameterAttributes
+} from "@uniformdev/canvas";
+var getParameterAttributes = (options) => {
   return {
-    "data-uniform-component-id": componentId,
-    "data-uniform-parameter-id": id,
-    "data-uniform-parameter-value": value != null ? value : "",
-    "data-uniform-parameter-type": type,
-    "data-uniform-placeholder": placeholder,
-    contentEditable: isEditable,
+    ...defaultGetParameterAttributes(options),
     suppressContentEditableWarning: true
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "19.33.1-alpha.10+468c89c72",
+  "version": "19.33.1-alpha.15+31348a1dd",
   "description": "React SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,10 +24,10 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.33.1-alpha.10+468c89c72",
-    "@uniformdev/context": "19.33.1-alpha.10+468c89c72",
-    "@uniformdev/context-react": "19.33.1-alpha.10+468c89c72",
-    "@uniformdev/richtext": "19.33.1-alpha.10+468c89c72"
+    "@uniformdev/canvas": "19.33.1-alpha.15+31348a1dd",
+    "@uniformdev/context": "19.33.1-alpha.15+31348a1dd",
+    "@uniformdev/context-react": "19.33.1-alpha.15+31348a1dd",
+    "@uniformdev/richtext": "19.33.1-alpha.15+31348a1dd"
   },
   "peerDependencies": {
     "react": ">= 16 || 17 || 18",
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "468c89c7236b39c598fc7fcce5b318d23a1fbd55"
+  "gitHead": "31348a1dd87271a9316b89ce924f634a5307f9ce"
 }