@uniformdev/canvas-react 19.50.0 → 19.50.2-alpha.11

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'>;
 /**
  * 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 */

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'>;
 /**
  * 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 */

package/dist/index.esm.js

@@ -735,56 +735,88 @@ var UniformRichText = React17.forwardRef(function UniformRichText2({ parameterId
 });
 
 // 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 +876,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

@@ -766,56 +766,88 @@ var UniformRichText = import_react17.default.forwardRef(function UniformRichText
 });
 
 // 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);
+      }
+    }
   );
 };
 
@@ -830,14 +862,14 @@ var getParameterAttributes = (options) => {
 
 // src/hooks/useCompositionEventEffect.ts
 var import_canvas9 = require("@uniformdev/canvas");
-var import_react19 = require("react");
+var import_react20 = require("react");
 function useCompositionEventEffect({
   enabled,
   projectId,
   compositionId,
   effect
 }) {
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!enabled || !compositionId || !projectId) {
       return;
     }
@@ -866,14 +898,14 @@ function useCompositionEventEffect({
 
 // src/hooks/useUniformContextualEditingState.ts
 var import_canvas10 = require("@uniformdev/canvas");
-var import_react20 = require("react");
+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;
     }
@@ -883,7 +915,7 @@ var useUniformContextualEditingState = ({
     });
     return channel2;
   }, [isContextualEditing]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!channel) {
       return;
     }

package/dist/index.mjs

@@ -735,56 +735,88 @@ var UniformRichText = React17.forwardRef(function UniformRichText2({ parameterId
 });
 
 // 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 +876,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.50.0",
+  "version": "19.50.2-alpha.11+3ffe35383",
   "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.50.0",
-    "@uniformdev/context": "19.50.0",
-    "@uniformdev/context-react": "19.50.0",
-    "@uniformdev/richtext": "19.50.0"
+    "@uniformdev/canvas": "19.50.2-alpha.11+3ffe35383",
+    "@uniformdev/context": "19.50.2-alpha.11+3ffe35383",
+    "@uniformdev/context-react": "19.50.2-alpha.11+3ffe35383",
+    "@uniformdev/richtext": "19.50.2-alpha.11+3ffe35383"
   },
   "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": "b5591b7986196c3917e9cababafaeeef1871cd47"
+  "gitHead": "3ffe35383d936fe485db7afd0506f4ea40386926"
 }