@uniformdev/canvas-react 19.49.1 → 19.49.4-alpha.67

package/dist/core.d.mts

@@ -0,0 +1,41 @@
+import { ComponentInstance } from '@uniformdev/canvas';
+import React from 'react';
+
+type ParameterTextValue = string | undefined;
+type PureUniformTextProps = {
+    /**
+     * The name of the  HTML tag to render.
+     * @default "span"
+     */
+    as?: React.ElementType;
+    /** The ID of the parameter. */
+    parameterId: string;
+    /** The component that contains the parameter. */
+    component: ComponentInstance;
+    skipCustomRendering: boolean;
+    isContextualEditing: boolean;
+    /**
+     * 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.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, 'children' | 'placeholder'>;
+/**
+ * Renders text parameters. Offers inline editing capability out of the box.
+ */
+declare const PureUniformText: ({ as: Tag, parameterId, component, skipCustomRendering, isContextualEditing, isMultiline, placeholder, render, ...props }: PureUniformTextProps) => React.JSX.Element | null;
+
+export { PureUniformText, PureUniformTextProps };

package/dist/core.d.ts

@@ -0,0 +1,41 @@
+import { ComponentInstance } from '@uniformdev/canvas';
+import React from 'react';
+
+type ParameterTextValue = string | undefined;
+type PureUniformTextProps = {
+    /**
+     * The name of the  HTML tag to render.
+     * @default "span"
+     */
+    as?: React.ElementType;
+    /** The ID of the parameter. */
+    parameterId: string;
+    /** The component that contains the parameter. */
+    component: ComponentInstance;
+    skipCustomRendering: boolean;
+    isContextualEditing: boolean;
+    /**
+     * 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.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, 'children' | 'placeholder'>;
+/**
+ * Renders text parameters. Offers inline editing capability out of the box.
+ */
+declare const PureUniformText: ({ as: Tag, parameterId, component, skipCustomRendering, isContextualEditing, isMultiline, placeholder, render, ...props }: PureUniformTextProps) => React.JSX.Element | null;
+
+export { PureUniformText, PureUniformTextProps };

package/dist/core.js

@@ -0,0 +1,90 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/core.ts
+var core_exports = {};
+__export(core_exports, {
+  PureUniformText: () => PureUniformText
+});
+module.exports = __toCommonJS(core_exports);
+
+// src/components/PureUniformText.tsx
+var import_react = __toESM(require("react"));
+
+// src/helpers/getParameterAttributes.ts
+var import_canvas = require("@uniformdev/canvas");
+var getParameterAttributes = (options) => {
+  return {
+    ...(0, import_canvas.getParameterAttributes)(options),
+    suppressContentEditableWarning: true
+  };
+};
+
+// src/components/PureUniformText.tsx
+var PureUniformText = ({
+  as: Tag = "span",
+  parameterId,
+  component,
+  skipCustomRendering,
+  isContextualEditing,
+  isMultiline = false,
+  placeholder,
+  render = (value) => value,
+  ...props
+}) => {
+  var _a;
+  const parameter = (_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[parameterId];
+  const value = parameter == null ? void 0 : parameter.value;
+  if (!parameter) {
+    return null;
+  }
+  if (!isContextualEditing) {
+    return /* @__PURE__ */ import_react.default.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
+  }
+  const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
+  return /* @__PURE__ */ import_react.default.createElement(
+    Tag,
+    {
+      ...props,
+      ...getParameterAttributes({
+        component,
+        id: parameterId,
+        isMultiline
+      }),
+      "data-uniform-parameter-type": "text",
+      "data-uniform-placeholder": computedPlaceholder,
+      style: isMultiline ? { whiteSpace: "pre-wrap" } : {}
+    },
+    skipCustomRendering ? value : render(value)
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PureUniformText
+});

package/dist/core.mjs

@@ -0,0 +1,55 @@
+// src/components/PureUniformText.tsx
+import React from "react";
+
+// src/helpers/getParameterAttributes.ts
+import {
+  getParameterAttributes as defaultGetParameterAttributes
+} from "@uniformdev/canvas";
+var getParameterAttributes = (options) => {
+  return {
+    ...defaultGetParameterAttributes(options),
+    suppressContentEditableWarning: true
+  };
+};
+
+// src/components/PureUniformText.tsx
+var PureUniformText = ({
+  as: Tag = "span",
+  parameterId,
+  component,
+  skipCustomRendering,
+  isContextualEditing,
+  isMultiline = false,
+  placeholder,
+  render = (value) => value,
+  ...props
+}) => {
+  var _a;
+  const parameter = (_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[parameterId];
+  const value = parameter == null ? void 0 : parameter.value;
+  if (!parameter) {
+    return null;
+  }
+  if (!isContextualEditing) {
+    return /* @__PURE__ */ React.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
+  }
+  const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
+  return /* @__PURE__ */ React.createElement(
+    Tag,
+    {
+      ...props,
+      ...getParameterAttributes({
+        component,
+        id: parameterId,
+        isMultiline
+      }),
+      "data-uniform-parameter-type": "text",
+      "data-uniform-placeholder": computedPlaceholder,
+      style: isMultiline ? { whiteSpace: "pre-wrap" } : {}
+    },
+    skipCustomRendering ? value : render(value)
+  );
+};
+export {
+  PureUniformText
+};

package/dist/index.d.mts

@@ -2,6 +2,7 @@ import React$1, { Key, ReactNode, PropsWithChildren } from 'react';
 import * as _uniformdev_canvas from '@uniformdev/canvas';
 import { ComponentInstance, RootComponentInstance, UpdateCompositionMessage, getParameterAttributes as getParameterAttributes$1, SubscribeToCompositionOptions } from '@uniformdev/canvas';
 export { GetParameterAttributesProps, createUniformApiEnhancer } from '@uniformdev/canvas';
+import { PureUniformTextProps } from './core.mjs';
 import { RichTextNode } from '@uniformdev/richtext';
 
 /**
@@ -41,38 +42,11 @@ 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'>;
+type UniformTextProps = Omit<PureUniformTextProps, 'skipCustomRendering' | 'isContextualEditing' | 'component'>;
 /**
  * Renders text parameters. Offers inline editing capability out of the box.
  */
-declare const UniformText: ({ as: Tag, parameterId, isMultiline, placeholder, render, ...props }: UniformTextProps) => React$1.JSX.Element | null;
+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 */
@@ -269,8 +243,10 @@ declare function useUniformCurrentComposition(): UniformCompositionContextValue;
  */
 declare function UniformComposition<TRenderProps = unknown>({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, contextualEditingDefaultPlaceholder, }: UniformCompositionProps<TRenderProps>): React$1.JSX.Element;
 
-type UniformPlaygroundDecorator = (options: {
+type UniformPlaygroundDecorator = (props: {
+    /** The rendered component instance, needs to wrapped and rendered by the decorator */
     children: React$1.ReactNode;
+    /** The component instance data */
     data: ComponentInstance | RootComponentInstance;
 }) => React$1.ReactElement;
 type UniformPlaygroundProps = {

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import React$1, { Key, ReactNode, PropsWithChildren } from 'react';
 import * as _uniformdev_canvas from '@uniformdev/canvas';
 import { ComponentInstance, RootComponentInstance, UpdateCompositionMessage, getParameterAttributes as getParameterAttributes$1, SubscribeToCompositionOptions } from '@uniformdev/canvas';
 export { GetParameterAttributesProps, createUniformApiEnhancer } from '@uniformdev/canvas';
+import { PureUniformTextProps } from './core.js';
 import { RichTextNode } from '@uniformdev/richtext';
 
 /**
@@ -41,38 +42,11 @@ 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'>;
+type UniformTextProps = Omit<PureUniformTextProps, 'skipCustomRendering' | 'isContextualEditing' | 'component'>;
 /**
  * Renders text parameters. Offers inline editing capability out of the box.
  */
-declare const UniformText: ({ as: Tag, parameterId, isMultiline, placeholder, render, ...props }: UniformTextProps) => React$1.JSX.Element | null;
+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 */
@@ -269,8 +243,10 @@ declare function useUniformCurrentComposition(): UniformCompositionContextValue;
  */
 declare function UniformComposition<TRenderProps = unknown>({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, contextualEditingDefaultPlaceholder, }: UniformCompositionProps<TRenderProps>): React$1.JSX.Element;
 
-type UniformPlaygroundDecorator = (options: {
+type UniformPlaygroundDecorator = (props: {
+    /** The rendered component instance, needs to wrapped and rendered by the decorator */
     children: React$1.ReactNode;
+    /** The component instance data */
     data: ComponentInstance | RootComponentInstance;
 }) => React$1.ReactElement;
 type UniformPlaygroundProps = {

package/dist/index.esm.js

@@ -186,7 +186,7 @@ import {
   CANVAS_LOCALE_TAG_PARAM,
   IN_CONTEXT_EDITOR_COMPONENT_END_ROLE,
   IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
-  PLACEHOLDER_ID
+  isComponentPlaceholderId
 } from "@uniformdev/canvas";
 import React4 from "react";
 
@@ -331,7 +331,7 @@ function ContextualEditingComponentWrapper({
   children
 }) {
   var _a, _b, _c, _d, _e;
-  const isPlaceholder = (component == null ? void 0 : component._id) === PLACEHOLDER_ID;
+  const isPlaceholder = isComponentPlaceholderId(component == null ? void 0 : component._id);
   const { isContextualEditing } = useUniformCurrentComposition();
   const isReadOnly = ((_a = component == null ? void 0 : component._contextualEditing) == null ? void 0 : _a.isEditable) ? void 0 : "true";
   return !isContextualEditing ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, children) : isPlaceholder && emptyPlaceholder === null ? null : /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
@@ -577,7 +577,7 @@ var UniformPlayground = ({
     if (!composition) {
       return null;
     }
-    let component = /* @__PURE__ */ React7.createElement(
+    let component = /* @__PURE__ */ React7.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ React7.createElement(
       UniformComponent,
       {
         data: composition,
@@ -586,7 +586,7 @@ var UniformPlayground = ({
         contextualEditingDefaultPlaceholder
       },
       children
-    );
+    ));
     decorators.forEach((Decorator) => {
       component = /* @__PURE__ */ React7.createElement(Decorator, { data: composition }, component);
     });
@@ -604,11 +604,16 @@ var UniformPlayground = ({
     {
       value: { data: composition, behaviorTracking, resolveRenderer, isContextualEditing }
     },
-    /* @__PURE__ */ React7.createElement(ContextualEditingComponentWrapper, { component: composition }, renderedComponent)
+    renderedComponent
   );
 };
 
 // src/components/UniformRichText/UniformRichText.tsx
+import {
+  ATTRIBUTE_COMPONENT_ID,
+  ATTRIBUTE_PARAMETER_ID,
+  ATTRIBUTE_PARAMETER_TYPE
+} from "@uniformdev/canvas";
 import {
   isRichTextValue,
   isRichTextValueConsideredEmpty
@@ -731,60 +736,104 @@ var UniformRichText = React17.forwardRef(function UniformRichText2({ parameterId
   const value = useMemo3(() => parameter == null ? void 0 : parameter.value, [parameter]);
   if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value))
     return null;
-  return Tag === null ? /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React17.createElement(Tag, { ref, ...props }, /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
+  return Tag === null ? /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React17.createElement(
+    Tag,
+    {
+      ref,
+      ...props,
+      ...{
+        [ATTRIBUTE_COMPONENT_ID]: componentData == null ? void 0 : componentData._id,
+        [ATTRIBUTE_PARAMETER_ID]: parameterId,
+        [ATTRIBUTE_PARAMETER_TYPE]: "richText"
+      }
+    },
+    /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
+  );
 });
 
 // src/components/UniformText.tsx
-import React18, { useCallback, useMemo as useMemo4, useState as useState2 } from "react";
-var UniformText = ({
+import React19, { useState as useState2 } from "react";
+
+// src/components/PureUniformText.tsx
+import React18 from "react";
+var PureUniformText = ({
   as: Tag = "span",
   parameterId,
+  component,
+  skipCustomRendering,
+  isContextualEditing,
   isMultiline = false,
   placeholder,
   render = (value) => value,
   ...props
 }) => {
-  var _a, _b;
-  const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
-  const { isContextualEditing } = useUniformCurrentComposition();
-  const [isFocused, setIsFocused] = useState2(false);
-  const parameter = useMemo4(() => {
-    var _a2;
-    return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[parameterId];
-  }, [componentData, parameterId]);
+  var _a;
+  const parameter = (_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[parameterId];
   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]);
   if (!parameter) {
     return null;
   }
   if (!isContextualEditing) {
     return /* @__PURE__ */ React18.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;
+  const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
   return /* @__PURE__ */ React18.createElement(
     Tag,
     {
       ...props,
       ...getParameterAttributes({
-        component: componentData,
+        component,
         id: parameterId,
         isMultiline
       }),
       "data-uniform-parameter-type": "text",
       "data-uniform-placeholder": computedPlaceholder,
-      style: isMultiline ? { whiteSpace: "pre-wrap" } : {},
-      onFocus: handleOnFocus,
-      onBlur: handleOnBlur
+      style: isMultiline ? { whiteSpace: "pre-wrap" } : {}
     },
-    shouldSkipCustomRendering ? value : render(value)
+    skipCustomRendering ? value : render(value)
+  );
+};
+
+// src/components/UniformText.tsx
+var UniformText = ({
+  as: tag = "span",
+  parameterId,
+  isMultiline = false,
+  placeholder,
+  render = (value) => value,
+  ...props
+}) => {
+  var _a, _b, _c;
+  const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const [isFocused, setIsFocused] = useState2(false);
+  const parameter = (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
+  const isEditable = (_c = (_b = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
+  const shouldSkipCustomRendering = isFocused && isEditable;
+  if (!parameter) {
+    return null;
+  }
+  const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
+  const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
+  return /* @__PURE__ */ React19.createElement(
+    PureUniformText,
+    {
+      ...props,
+      as: tag,
+      parameterId,
+      component: componentData,
+      skipCustomRendering: shouldSkipCustomRendering,
+      isContextualEditing,
+      placeholder: computedPlaceholder,
+      render,
+      isMultiline,
+      onFocus: () => {
+        setIsFocused(true);
+      },
+      onBlur: () => {
+        setIsFocused(false);
+      }
+    }
   );
 };
 
@@ -844,14 +893,14 @@ import {
   createCanvasChannel as createCanvasChannel2,
   isUpdateContextualEditingStateInternalMessage
 } from "@uniformdev/canvas";
-import { useEffect as useEffect3, useMemo as useMemo5, useState as useState3 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo4, useState as useState3 } from "react";
 var useUniformContextualEditingState = ({
   global = false
 } = {}) => {
   const { isContextualEditing } = useUniformCurrentComposition();
   const { data: componentData } = useUniformCurrentComponent();
   const [selectedComponentReference, setSelectedComponentReference] = useState3();
-  const channel = useMemo5(() => {
+  const channel = useMemo4(() => {
     if (!isContextualEditing) {
       return;
     }

package/dist/index.js

@@ -365,7 +365,7 @@ function ContextualEditingComponentWrapper({
   children
 }) {
   var _a, _b, _c, _d, _e;
-  const isPlaceholder = (component == null ? void 0 : component._id) === import_canvas4.PLACEHOLDER_ID;
+  const isPlaceholder = (0, import_canvas4.isComponentPlaceholderId)(component == null ? void 0 : component._id);
   const { isContextualEditing } = useUniformCurrentComposition();
   const isReadOnly = ((_a = component == null ? void 0 : component._contextualEditing) == null ? void 0 : _a.isEditable) ? void 0 : "true";
   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(
@@ -611,7 +611,7 @@ var UniformPlayground = ({
     if (!composition) {
       return null;
     }
-    let component = /* @__PURE__ */ import_react7.default.createElement(
+    let component = /* @__PURE__ */ import_react7.default.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ import_react7.default.createElement(
       UniformComponent,
       {
         data: composition,
@@ -620,7 +620,7 @@ var UniformPlayground = ({
         contextualEditingDefaultPlaceholder
       },
       children
-    );
+    ));
     decorators.forEach((Decorator) => {
       component = /* @__PURE__ */ import_react7.default.createElement(Decorator, { data: composition }, component);
     });
@@ -638,11 +638,12 @@ var UniformPlayground = ({
     {
       value: { data: composition, behaviorTracking, resolveRenderer, isContextualEditing }
     },
-    /* @__PURE__ */ import_react7.default.createElement(ContextualEditingComponentWrapper, { component: composition }, renderedComponent)
+    renderedComponent
   );
 };
 
 // src/components/UniformRichText/UniformRichText.tsx
+var import_canvas8 = require("@uniformdev/canvas");
 var import_richtext5 = require("@uniformdev/richtext");
 var import_react17 = __toESM(require("react"));
 
@@ -762,93 +763,137 @@ var UniformRichText = import_react17.default.forwardRef(function UniformRichText
   const value = (0, import_react17.useMemo)(() => parameter == null ? void 0 : parameter.value, [parameter]);
   if (!value || !(0, import_richtext5.isRichTextValue)(value) || (0, import_richtext5.isRichTextValueConsideredEmpty)(value))
     return null;
-  return Tag === null ? /* @__PURE__ */ import_react17.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ import_react17.default.createElement(Tag, { ref, ...props }, /* @__PURE__ */ import_react17.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
+  return Tag === null ? /* @__PURE__ */ import_react17.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ import_react17.default.createElement(
+    Tag,
+    {
+      ref,
+      ...props,
+      ...{
+        [import_canvas8.ATTRIBUTE_COMPONENT_ID]: componentData == null ? void 0 : componentData._id,
+        [import_canvas8.ATTRIBUTE_PARAMETER_ID]: parameterId,
+        [import_canvas8.ATTRIBUTE_PARAMETER_TYPE]: "richText"
+      }
+    },
+    /* @__PURE__ */ import_react17.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
+  );
 });
 
 // src/components/UniformText.tsx
+var import_react19 = __toESM(require("react"));
+
+// src/components/PureUniformText.tsx
 var import_react18 = __toESM(require("react"));
-var UniformText = ({
+var PureUniformText = ({
   as: Tag = "span",
   parameterId,
+  component,
+  skipCustomRendering,
+  isContextualEditing,
   isMultiline = false,
   placeholder,
   render = (value) => value,
   ...props
 }) => {
-  var _a, _b;
-  const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
-  const { isContextualEditing } = useUniformCurrentComposition();
-  const [isFocused, setIsFocused] = (0, import_react18.useState)(false);
-  const parameter = (0, import_react18.useMemo)(() => {
-    var _a2;
-    return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[parameterId];
-  }, [componentData, parameterId]);
+  var _a;
+  const parameter = (_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[parameterId];
   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_react18.useCallback)(() => {
-    setIsFocused(true);
-  }, [setIsFocused]);
-  const handleOnBlur = (0, import_react18.useCallback)(() => {
-    setIsFocused(false);
-  }, [setIsFocused]);
   if (!parameter) {
     return null;
   }
   if (!isContextualEditing) {
     return /* @__PURE__ */ import_react18.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;
+  const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
   return /* @__PURE__ */ import_react18.default.createElement(
     Tag,
     {
       ...props,
       ...getParameterAttributes({
-        component: componentData,
+        component,
         id: parameterId,
         isMultiline
       }),
       "data-uniform-parameter-type": "text",
       "data-uniform-placeholder": computedPlaceholder,
-      style: isMultiline ? { whiteSpace: "pre-wrap" } : {},
-      onFocus: handleOnFocus,
-      onBlur: handleOnBlur
+      style: isMultiline ? { whiteSpace: "pre-wrap" } : {}
     },
-    shouldSkipCustomRendering ? value : render(value)
+    skipCustomRendering ? value : render(value)
+  );
+};
+
+// src/components/UniformText.tsx
+var UniformText = ({
+  as: tag = "span",
+  parameterId,
+  isMultiline = false,
+  placeholder,
+  render = (value) => value,
+  ...props
+}) => {
+  var _a, _b, _c;
+  const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const [isFocused, setIsFocused] = (0, import_react19.useState)(false);
+  const parameter = (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
+  const isEditable = (_c = (_b = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
+  const shouldSkipCustomRendering = isFocused && isEditable;
+  if (!parameter) {
+    return null;
+  }
+  const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
+  const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
+  return /* @__PURE__ */ import_react19.default.createElement(
+    PureUniformText,
+    {
+      ...props,
+      as: tag,
+      parameterId,
+      component: componentData,
+      skipCustomRendering: shouldSkipCustomRendering,
+      isContextualEditing,
+      placeholder: computedPlaceholder,
+      render,
+      isMultiline,
+      onFocus: () => {
+        setIsFocused(true);
+      },
+      onBlur: () => {
+        setIsFocused(false);
+      }
+    }
   );
 };
 
 // src/helpers/getParameterAttributes.ts
-var import_canvas8 = require("@uniformdev/canvas");
+var import_canvas9 = require("@uniformdev/canvas");
 var getParameterAttributes = (options) => {
   return {
-    ...(0, import_canvas8.getParameterAttributes)(options),
+    ...(0, import_canvas9.getParameterAttributes)(options),
     suppressContentEditableWarning: true
   };
 };
 
 // src/hooks/useCompositionEventEffect.ts
-var import_canvas9 = require("@uniformdev/canvas");
-var import_react19 = require("react");
+var import_canvas10 = require("@uniformdev/canvas");
+var import_react20 = require("react");
 function useCompositionEventEffect({
   enabled,
   projectId,
   compositionId,
   effect
 }) {
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!enabled || !compositionId || !projectId) {
       return;
     }
     let goodbye = void 0;
     const loadEffect = async () => {
-      const eventBus = await (0, import_canvas9.createEventBus)();
+      const eventBus = await (0, import_canvas10.createEventBus)();
       if (eventBus) {
-        goodbye = (0, import_canvas9.subscribeToComposition)({
+        goodbye = (0, import_canvas10.subscribeToComposition)({
           eventBus,
           compositionId,
-          compositionState: import_canvas9.CANVAS_DRAFT_STATE,
+          compositionState: import_canvas10.CANVAS_DRAFT_STATE,
           projectId,
           callback: effect,
           event: "updated"
@@ -865,31 +910,31 @@ function useCompositionEventEffect({
 }
 
 // src/hooks/useUniformContextualEditingState.ts
-var import_canvas10 = require("@uniformdev/canvas");
-var import_react20 = require("react");
+var import_canvas11 = require("@uniformdev/canvas");
+var import_react21 = require("react");
 var useUniformContextualEditingState = ({
   global = false
 } = {}) => {
   const { isContextualEditing } = useUniformCurrentComposition();
   const { data: componentData } = useUniformCurrentComponent();
-  const [selectedComponentReference, setSelectedComponentReference] = (0, import_react20.useState)();
-  const channel = (0, import_react20.useMemo)(() => {
+  const [selectedComponentReference, setSelectedComponentReference] = (0, import_react21.useState)();
+  const channel = (0, import_react21.useMemo)(() => {
     if (!isContextualEditing) {
       return;
     }
-    const channel2 = (0, import_canvas10.createCanvasChannel)({
+    const channel2 = (0, import_canvas11.createCanvasChannel)({
       broadcastTo: [window],
       listenTo: [window]
     });
     return channel2;
   }, [isContextualEditing]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!channel) {
       return;
     }
     const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
       var _a;
-      if (!(0, import_canvas10.isUpdateContextualEditingStateInternalMessage)(message)) {
+      if (!(0, import_canvas11.isUpdateContextualEditingStateInternalMessage)(message)) {
         return;
       }
       if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {

package/dist/index.mjs

@@ -186,7 +186,7 @@ import {
   CANVAS_LOCALE_TAG_PARAM,
   IN_CONTEXT_EDITOR_COMPONENT_END_ROLE,
   IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
-  PLACEHOLDER_ID
+  isComponentPlaceholderId
 } from "@uniformdev/canvas";
 import React4 from "react";
 
@@ -331,7 +331,7 @@ function ContextualEditingComponentWrapper({
   children
 }) {
   var _a, _b, _c, _d, _e;
-  const isPlaceholder = (component == null ? void 0 : component._id) === PLACEHOLDER_ID;
+  const isPlaceholder = isComponentPlaceholderId(component == null ? void 0 : component._id);
   const { isContextualEditing } = useUniformCurrentComposition();
   const isReadOnly = ((_a = component == null ? void 0 : component._contextualEditing) == null ? void 0 : _a.isEditable) ? void 0 : "true";
   return !isContextualEditing ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, children) : isPlaceholder && emptyPlaceholder === null ? null : /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
@@ -577,7 +577,7 @@ var UniformPlayground = ({
     if (!composition) {
       return null;
     }
-    let component = /* @__PURE__ */ React7.createElement(
+    let component = /* @__PURE__ */ React7.createElement(ContextualEditingComponentWrapper, { component: composition }, /* @__PURE__ */ React7.createElement(
       UniformComponent,
       {
         data: composition,
@@ -586,7 +586,7 @@ var UniformPlayground = ({
         contextualEditingDefaultPlaceholder
       },
       children
-    );
+    ));
     decorators.forEach((Decorator) => {
       component = /* @__PURE__ */ React7.createElement(Decorator, { data: composition }, component);
     });
@@ -604,11 +604,16 @@ var UniformPlayground = ({
     {
       value: { data: composition, behaviorTracking, resolveRenderer, isContextualEditing }
     },
-    /* @__PURE__ */ React7.createElement(ContextualEditingComponentWrapper, { component: composition }, renderedComponent)
+    renderedComponent
   );
 };
 
 // src/components/UniformRichText/UniformRichText.tsx
+import {
+  ATTRIBUTE_COMPONENT_ID,
+  ATTRIBUTE_PARAMETER_ID,
+  ATTRIBUTE_PARAMETER_TYPE
+} from "@uniformdev/canvas";
 import {
   isRichTextValue,
   isRichTextValueConsideredEmpty
@@ -731,60 +736,104 @@ var UniformRichText = React17.forwardRef(function UniformRichText2({ parameterId
   const value = useMemo3(() => parameter == null ? void 0 : parameter.value, [parameter]);
   if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value))
     return null;
-  return Tag === null ? /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React17.createElement(Tag, { ref, ...props }, /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
+  return Tag === null ? /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React17.createElement(
+    Tag,
+    {
+      ref,
+      ...props,
+      ...{
+        [ATTRIBUTE_COMPONENT_ID]: componentData == null ? void 0 : componentData._id,
+        [ATTRIBUTE_PARAMETER_ID]: parameterId,
+        [ATTRIBUTE_PARAMETER_TYPE]: "richText"
+      }
+    },
+    /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
+  );
 });
 
 // src/components/UniformText.tsx
-import React18, { useCallback, useMemo as useMemo4, useState as useState2 } from "react";
-var UniformText = ({
+import React19, { useState as useState2 } from "react";
+
+// src/components/PureUniformText.tsx
+import React18 from "react";
+var PureUniformText = ({
   as: Tag = "span",
   parameterId,
+  component,
+  skipCustomRendering,
+  isContextualEditing,
   isMultiline = false,
   placeholder,
   render = (value) => value,
   ...props
 }) => {
-  var _a, _b;
-  const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
-  const { isContextualEditing } = useUniformCurrentComposition();
-  const [isFocused, setIsFocused] = useState2(false);
-  const parameter = useMemo4(() => {
-    var _a2;
-    return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[parameterId];
-  }, [componentData, parameterId]);
+  var _a;
+  const parameter = (_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[parameterId];
   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]);
   if (!parameter) {
     return null;
   }
   if (!isContextualEditing) {
     return /* @__PURE__ */ React18.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;
+  const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
   return /* @__PURE__ */ React18.createElement(
     Tag,
     {
       ...props,
       ...getParameterAttributes({
-        component: componentData,
+        component,
         id: parameterId,
         isMultiline
       }),
       "data-uniform-parameter-type": "text",
       "data-uniform-placeholder": computedPlaceholder,
-      style: isMultiline ? { whiteSpace: "pre-wrap" } : {},
-      onFocus: handleOnFocus,
-      onBlur: handleOnBlur
+      style: isMultiline ? { whiteSpace: "pre-wrap" } : {}
     },
-    shouldSkipCustomRendering ? value : render(value)
+    skipCustomRendering ? value : render(value)
+  );
+};
+
+// src/components/UniformText.tsx
+var UniformText = ({
+  as: tag = "span",
+  parameterId,
+  isMultiline = false,
+  placeholder,
+  render = (value) => value,
+  ...props
+}) => {
+  var _a, _b, _c;
+  const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const [isFocused, setIsFocused] = useState2(false);
+  const parameter = (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
+  const isEditable = (_c = (_b = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
+  const shouldSkipCustomRendering = isFocused && isEditable;
+  if (!parameter) {
+    return null;
+  }
+  const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
+  const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
+  return /* @__PURE__ */ React19.createElement(
+    PureUniformText,
+    {
+      ...props,
+      as: tag,
+      parameterId,
+      component: componentData,
+      skipCustomRendering: shouldSkipCustomRendering,
+      isContextualEditing,
+      placeholder: computedPlaceholder,
+      render,
+      isMultiline,
+      onFocus: () => {
+        setIsFocused(true);
+      },
+      onBlur: () => {
+        setIsFocused(false);
+      }
+    }
   );
 };
 
@@ -844,14 +893,14 @@ import {
   createCanvasChannel as createCanvasChannel2,
   isUpdateContextualEditingStateInternalMessage
 } from "@uniformdev/canvas";
-import { useEffect as useEffect3, useMemo as useMemo5, useState as useState3 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo4, useState as useState3 } from "react";
 var useUniformContextualEditingState = ({
   global = false
 } = {}) => {
   const { isContextualEditing } = useUniformCurrentComposition();
   const { data: componentData } = useUniformCurrentComponent();
   const [selectedComponentReference, setSelectedComponentReference] = useState3();
-  const channel = useMemo5(() => {
+  const channel = useMemo4(() => {
     if (!isContextualEditing) {
       return;
     }

package/package.json

@@ -1,19 +1,39 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "19.49.1",
+  "version": "19.49.4-alpha.67+9773e3b65",
   "description": "React SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
   "exports": {
-    "import": {
-      "types": "./dist/index.d.mts",
-      "node": "./dist/index.mjs",
-      "default": "./dist/index.esm.js"
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "node": "./dist/index.mjs",
+        "default": "./dist/index.esm.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
     },
-    "require": "./dist/index.js"
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.mjs",
+      "require": "./dist/core.js"
+    }
   },
   "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/index.d.ts"
+      ],
+      "core": [
+        "./dist/core.d.ts"
+      ]
+    }
+  },
   "sideEffects": false,
   "scripts": {
     "build": "tsup",
@@ -25,17 +45,17 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.49.1",
-    "@uniformdev/context": "19.49.1",
-    "@uniformdev/context-react": "19.49.1",
-    "@uniformdev/richtext": "19.49.1"
+    "@uniformdev/canvas": "19.49.4-alpha.67+9773e3b65",
+    "@uniformdev/context": "19.49.4-alpha.67+9773e3b65",
+    "@uniformdev/context-react": "19.49.4-alpha.67+9773e3b65",
+    "@uniformdev/richtext": "19.49.4-alpha.67+9773e3b65"
   },
   "peerDependencies": {
     "react": ">= 16 || 17 || 18",
     "react-dom": ">=16"
   },
   "devDependencies": {
-    "@types/react": "18.2.20",
+    "@types/react": "18.2.21",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -45,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a14b97601fb78b44be7f0849841b9828dec0ea96"
+  "gitHead": "9773e3b65168255768f5cbecf2536988fa0e03af"
 }