@uniformdev/canvas-react 19.55.1-alpha.8 → 19.55.2-alpha.14

package/dist/PureUniformText-37defdc5.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 { PureUniformTextProps as P, PureUniformText as a };

package/dist/core.d.mts

@@ -1,41 +1,15 @@
-import { ComponentInstance } from '@uniformdev/canvas';
+import { ComponentInstance, RootComponentInstance } from '@uniformdev/canvas';
 import React from 'react';
+export { a as PureUniformText, P as PureUniformTextProps } from './PureUniformText-37defdc5.js';
 
-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;
+declare const PureContextualEditingComponentWrapper: ({ children, isPlaceholder, parentComponent, component, slotName, indexInSlot, slotChildrenCount, isReadOnly, }: React.PropsWithChildren<{
+    isPlaceholder: boolean | undefined;
+    parentComponent: ComponentInstance | undefined;
+    component: ComponentInstance | RootComponentInstance;
+    slotName: string | undefined;
+    indexInSlot: number | undefined;
+    slotChildrenCount: number | undefined;
+    isReadOnly: string | undefined;
+}>) => React.JSX.Element;
 
-export { PureUniformText, PureUniformTextProps };
+export { PureContextualEditingComponentWrapper };

package/dist/core.d.ts

@@ -1,41 +1,15 @@
-import { ComponentInstance } from '@uniformdev/canvas';
+import { ComponentInstance, RootComponentInstance } from '@uniformdev/canvas';
 import React from 'react';
+export { a as PureUniformText, P as PureUniformTextProps } from './PureUniformText-37defdc5.js';
 
-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;
+declare const PureContextualEditingComponentWrapper: ({ children, isPlaceholder, parentComponent, component, slotName, indexInSlot, slotChildrenCount, isReadOnly, }: React.PropsWithChildren<{
+    isPlaceholder: boolean | undefined;
+    parentComponent: ComponentInstance | undefined;
+    component: ComponentInstance | RootComponentInstance;
+    slotName: string | undefined;
+    indexInSlot: number | undefined;
+    slotChildrenCount: number | undefined;
+    isReadOnly: string | undefined;
+}>) => React.JSX.Element;
 
-export { PureUniformText, PureUniformTextProps };
+export { PureContextualEditingComponentWrapper };

package/dist/core.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -30,18 +31,52 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/core.ts
 var core_exports = {};
 __export(core_exports, {
+  PureContextualEditingComponentWrapper: () => PureContextualEditingComponentWrapper,
   PureUniformText: () => PureUniformText
 });
 module.exports = __toCommonJS(core_exports);
 
-// src/components/PureUniformText.tsx
+// src/components/PureContextualEditingComponentWrapper.tsx
+var import_canvas = require("@uniformdev/canvas");
 var import_react = __toESM(require("react"));
+var PureContextualEditingComponentWrapper = ({
+  children,
+  isPlaceholder,
+  parentComponent,
+  component,
+  slotName,
+  indexInSlot,
+  slotChildrenCount,
+  isReadOnly
+}) => {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    "script",
+    {
+      "data-role": import_canvas.IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
+      "data-parent-id": parentComponent == null ? void 0 : parentComponent._id,
+      "data-parent-type": parentComponent == null ? void 0 : parentComponent.type,
+      "data-component-id": component == null ? void 0 : component._id,
+      "data-slot-name": slotName != null ? slotName : "",
+      "data-component-index": indexInSlot != null ? indexInSlot : "",
+      "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
+      "data-component-name": component == null ? void 0 : component.type,
+      "data-is-placeholder": isPlaceholder ? "true" : void 0,
+      "data-is-localized": ((_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[import_canvas.CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
+      "data-component-title": (_d = (_c = (_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : "",
+      "data-is-readonly": isReadOnly
+    }
+  ), children, /* @__PURE__ */ import_react.default.createElement("script", { "data-role": import_canvas.IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
+};
+
+// src/components/PureUniformText.tsx
+var import_react2 = __toESM(require("react"));
 
 // src/helpers/getParameterAttributes.ts
-var import_canvas = require("@uniformdev/canvas");
+var import_canvas2 = require("@uniformdev/canvas");
 var getParameterAttributes = (options) => {
   return {
-    ...(0, import_canvas.getParameterAttributes)(options),
+    ...(0, import_canvas2.getParameterAttributes)(options),
     suppressContentEditableWarning: true
   };
 };
@@ -65,10 +100,10 @@ var PureUniformText = ({
     return null;
   }
   if (!isContextualEditing) {
-    return /* @__PURE__ */ import_react.default.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
+    return /* @__PURE__ */ import_react2.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(
+  return /* @__PURE__ */ import_react2.default.createElement(
     Tag,
     {
       ...props,
@@ -86,5 +121,6 @@ var PureUniformText = ({
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  PureContextualEditingComponentWrapper,
   PureUniformText
 });

package/dist/core.mjs

@@ -1,5 +1,44 @@
-// src/components/PureUniformText.tsx
+'use client';
+
+// src/components/PureContextualEditingComponentWrapper.tsx
+import {
+  CANVAS_LOCALE_TAG_PARAM,
+  IN_CONTEXT_EDITOR_COMPONENT_END_ROLE,
+  IN_CONTEXT_EDITOR_COMPONENT_START_ROLE
+} from "@uniformdev/canvas";
 import React from "react";
+var PureContextualEditingComponentWrapper = ({
+  children,
+  isPlaceholder,
+  parentComponent,
+  component,
+  slotName,
+  indexInSlot,
+  slotChildrenCount,
+  isReadOnly
+}) => {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "script",
+    {
+      "data-role": IN_CONTEXT_EDITOR_COMPONENT_START_ROLE,
+      "data-parent-id": parentComponent == null ? void 0 : parentComponent._id,
+      "data-parent-type": parentComponent == null ? void 0 : parentComponent.type,
+      "data-component-id": component == null ? void 0 : component._id,
+      "data-slot-name": slotName != null ? slotName : "",
+      "data-component-index": indexInSlot != null ? indexInSlot : "",
+      "data-total-components": slotChildrenCount != null ? slotChildrenCount : "",
+      "data-component-name": component == null ? void 0 : component.type,
+      "data-is-placeholder": isPlaceholder ? "true" : void 0,
+      "data-is-localized": ((_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[CANVAS_LOCALE_TAG_PARAM]) ? "true" : void 0,
+      "data-component-title": (_d = (_c = (_b = component == null ? void 0 : component.parameters) == null ? void 0 : _b.title) == null ? void 0 : _c.value) != null ? _d : "",
+      "data-is-readonly": isReadOnly
+    }
+  ), children, /* @__PURE__ */ React.createElement("script", { "data-role": IN_CONTEXT_EDITOR_COMPONENT_END_ROLE }));
+};
+
+// src/components/PureUniformText.tsx
+import React2 from "react";
 
 // src/helpers/getParameterAttributes.ts
 import {
@@ -31,10 +70,10 @@ var PureUniformText = ({
     return null;
   }
   if (!isContextualEditing) {
-    return /* @__PURE__ */ React.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
+    return /* @__PURE__ */ React2.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
   }
   const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React2.createElement(
     Tag,
     {
       ...props,
@@ -51,5 +90,6 @@ var PureUniformText = ({
   );
 };
 export {
+  PureContextualEditingComponentWrapper,
   PureUniformText
 };

package/dist/index.d.mts

@@ -1,8 +1,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 { P as PureUniformTextProps } from './PureUniformText-37defdc5.js';
 import { RichTextNode } from '@uniformdev/richtext';
 
 /**
@@ -352,6 +351,14 @@ type UniformSlotProps<TSlotNames extends string> = {
 /** Renders a named Slot within a Composition. */
 declare function UniformSlot<TSlotNames extends string = string>({ name, resolveRenderer, children, emptyPlaceholder, wrapperComponent, }: UniformSlotProps<TSlotNames>): JSX.Element | null;
 
+/**
+ * Converts a raw Canvas component instance to React component props format.
+ * This merges each parameter moved to the root object and removes the 'value' node,
+ * hugely simplifying rendering code. For example if the raw object has parameters.foo.value,
+ * then the final props have props.foo === raw.parameters.foo.value.
+ */
+declare function convertComponentToProps<T = unknown>(component: ComponentInstance): ComponentProps<T>;
+
 /**
  * Returns the attributes needed to annotate a Uniform parameter for inline editing.
  * Supports only text parameters at the moment.
@@ -380,7 +387,18 @@ type UseUniformContextualEditingStateProps = {
  */
 declare const useUniformContextualEditingState: ({ global, }?: UseUniformContextualEditingStateProps) => {
     isContextualEditing: boolean;
-    selectedComponentReference: Omit<_uniformdev_canvas.ContextualEditingComponentReference, "elements"> | undefined;
+    selectedComponentReference: {
+        id: string;
+        slotName?: string | undefined;
+        componentIndex?: number | undefined;
+        totalComponents?: number | undefined;
+        componentName?: string | undefined;
+        componentTitle?: string | undefined;
+        parentId?: string | undefined;
+        parentType?: string | undefined;
+        isLocalized?: boolean | undefined;
+        isReadOnly?: boolean | undefined;
+    } | undefined;
 };
 
 declare const componentStore: ComponentStore;
@@ -399,4 +417,4 @@ declare const createComponentStoreResolver: (options: {
     defaultComponent?: React$1.ComponentType<ComponentProps<any>>;
 }) => RenderComponentResolver;
 
-export { ComponentProps, ComponentStore, CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionContext, UniformCompositionProps, UniformPlayground, UniformPlaygroundDecorator, UniformPlaygroundProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformSlotWrapperComponentProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };
+export { ComponentProps, ComponentStore, CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionContext, UniformCompositionProps, UniformPlayground, UniformPlaygroundDecorator, UniformPlaygroundProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformSlotWrapperComponentProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, convertComponentToProps, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.d.ts

@@ -1,8 +1,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 { P as PureUniformTextProps } from './PureUniformText-37defdc5.js';
 import { RichTextNode } from '@uniformdev/richtext';
 
 /**
@@ -352,6 +351,14 @@ type UniformSlotProps<TSlotNames extends string> = {
 /** Renders a named Slot within a Composition. */
 declare function UniformSlot<TSlotNames extends string = string>({ name, resolveRenderer, children, emptyPlaceholder, wrapperComponent, }: UniformSlotProps<TSlotNames>): JSX.Element | null;
 
+/**
+ * Converts a raw Canvas component instance to React component props format.
+ * This merges each parameter moved to the root object and removes the 'value' node,
+ * hugely simplifying rendering code. For example if the raw object has parameters.foo.value,
+ * then the final props have props.foo === raw.parameters.foo.value.
+ */
+declare function convertComponentToProps<T = unknown>(component: ComponentInstance): ComponentProps<T>;
+
 /**
  * Returns the attributes needed to annotate a Uniform parameter for inline editing.
  * Supports only text parameters at the moment.
@@ -380,7 +387,18 @@ type UseUniformContextualEditingStateProps = {
  */
 declare const useUniformContextualEditingState: ({ global, }?: UseUniformContextualEditingStateProps) => {
     isContextualEditing: boolean;
-    selectedComponentReference: Omit<_uniformdev_canvas.ContextualEditingComponentReference, "elements"> | undefined;
+    selectedComponentReference: {
+        id: string;
+        slotName?: string | undefined;
+        componentIndex?: number | undefined;
+        totalComponents?: number | undefined;
+        componentName?: string | undefined;
+        componentTitle?: string | undefined;
+        parentId?: string | undefined;
+        parentType?: string | undefined;
+        isLocalized?: boolean | undefined;
+        isReadOnly?: boolean | undefined;
+    } | undefined;
 };
 
 declare const componentStore: ComponentStore;
@@ -399,4 +417,4 @@ declare const createComponentStoreResolver: (options: {
     defaultComponent?: React$1.ComponentType<ComponentProps<any>>;
 }) => RenderComponentResolver;
 
-export { ComponentProps, ComponentStore, CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionContext, UniformCompositionProps, UniformPlayground, UniformPlaygroundDecorator, UniformPlaygroundProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformSlotWrapperComponentProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };
+export { ComponentProps, ComponentStore, CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionContext, UniformCompositionProps, UniformPlayground, UniformPlaygroundDecorator, UniformPlaygroundProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformSlotWrapperComponentProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, convertComponentToProps, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };