@uniformdev/canvas-react 19.35.2 → 19.35.3-alpha.82

package/dist/index.d.mts

@@ -0,0 +1,396 @@
+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 { RichTextNode } from '@uniformdev/richtext';
+
+/**
+ * Props passed to a Canvas component implementation.
+ * TProps is the Canvas component's parameters object after
+ * all enhancers have been applied.
+ */
+type ComponentProps<TProps = unknown> = TProps & {
+    component: ComponentInstance;
+};
+/**
+ * Function that maps a Canvas component instance to its React component to render it.
+ * The resolver would commonly inspect the `type` and possibly `variant` of the component to decide.
+ */
+type RenderComponentResolver = (component: ComponentInstance) => React.ComponentType<ComponentProps<any>> | null;
+/** Function that renders Canvas system internals */
+type SystemRenderFunction = (component: ComponentInstance, key: Key, renderChild: (component: ComponentInstance, key: Key) => JSX.Element | null) => JSX.Element | null;
+/** Configures rendering of system components (tests, pz) */
+type SystemRenderConfig = {
+    test: SystemRenderFunction;
+    personalization: SystemRenderFunction;
+};
+type ComponentStore = {
+    register: (options: {
+        type: string;
+        variantId?: string;
+        component: React.ComponentType<ComponentProps<any>>;
+    }) => void;
+    get: (type: string, variantId?: string) => React.ComponentType<ComponentProps<any>> | undefined;
+};
+
+/**
+ * A default implementation of a component-not-implemented component.
+ * Useful for model-first workflows where frontend dev comes later.
+ * To make this work, it needs to be the default returned from the
+ * resolveRenderer() function when the component is unknown.
+ **/
+declare function DefaultNotImplementedComponent(props: ComponentProps): React$1.JSX.Element | null;
+
+type ParameterTextValue = string | undefined;
+type UniformTextProps = {
+    /**
+     * The name of the  HTML tag to render.
+     * @default "span"
+     */
+    as?: React$1.ElementType;
+    /** The ID of the parameter. */
+    parameterId: string;
+    /**
+     * When set to true, it adds `whiteSpace: 'pre-wrap'` to the styles of the root element to allow the rendering of line breaks.
+     * @default false
+     */
+    isMultiline?: boolean;
+    /**
+     * Sets the value to show in Canvas editor when the parameter value is empty.
+     * Can be a static string, or a function to generate the placeholder out of parameter info.
+     * @default undefined
+     */
+    placeholder?: string | ((parameter: {
+        id: string;
+    }) => string | undefined);
+    /**
+     * A function to customize the rendering of the parameter value. Useful to format the value before rendering it.
+     * @default "(value) => value"
+     */
+    render?: (value: ParameterTextValue) => React$1.ReactNode;
+} & Omit<React$1.HTMLAttributes<HTMLSpanElement>, 'children' | 'placeholder'>;
+/**
+ * Adds inline editing capability to text parameters
+ * @deprecated This component is unstable, and not ready for production usage.
+ **/
+declare const UniformText: ({ as: Tag, parameterId, isMultiline, placeholder, render, ...props }: UniformTextProps) => React$1.JSX.Element | null;
+
+type UniformComponentProps<TRenderProps = unknown> = {
+    /** The data of the component instance */
+    data?: ComponentInstance | RootComponentInstance;
+    /** Resolves a React component to render a Canvas component, generally by inspecting type/variant */
+    resolveRenderer?: RenderComponentResolver;
+    /** Children to render. Can also be a function that takes ComponentProps as argument */
+    children?: ReactNode | ((props: ComponentProps<TRenderProps>) => JSX.Element);
+    /**
+     * When to track behavior from enrichment tags on the current composition
+     * onView: adds enrichment score when the visitor views the tagged component in the browser viewport.
+     * onLoad: adds enrichment score as soon as the component mounts, regardless of viewport.
+     *
+     * NOTE: onView renders a `<div>` tag around components that have enrichment tags, to support IntersectionObserver.
+     * onLoad does not need to do this, and renders no wrapping tag.
+     *
+     * Default: onView
+     */
+    behaviorTracking?: 'onLoad' | 'onView';
+    /**
+     * The default placeholder to pass to the parameter component that support inline editing (such as UniformText).
+     */
+    contextualEditingDefaultPlaceholder?: UniformTextProps['placeholder'];
+};
+type UniformComponentContextValue = {
+    data?: UniformComponentProps['data'];
+    resolveRenderer?: UniformComponentProps['resolveRenderer'];
+    behaviorTracking?: UniformComponentProps['behaviorTracking'];
+    contextualEditingDefaultPlaceholder?: UniformComponentProps['contextualEditingDefaultPlaceholder'];
+};
+/**
+ * Gets the data of the closest `<UniformComponent />` ancestor.
+ */
+declare function useUniformCurrentComponent(): UniformComponentContextValue;
+/**
+ * Allows the rendering of a Canvas component instance (root or not), and its children if it has any.
+ * Note that the actual rendering happens inside `<UniformSlot />`, this component only provides the services needed to achieve that.
+ * This component is used internally by `<UniformComposition />`, which you should use in most cases.
+ */
+declare function UniformComponent<TRenderProps = unknown>({ data, resolveRenderer, children, behaviorTracking, contextualEditingDefaultPlaceholder, }: UniformComponentProps<TRenderProps>): React$1.JSX.Element | null;
+
+type UseUniformContextualEditingProps = {
+    initialCompositionValue?: RootComponentInstance;
+    /**
+     * A function to enhance the composition after receiving it from Canvas editor.
+     * WARNING: This enhancer will run on the client side. Make sure you're not exposing any secrets. You can use `createApiEnhancer` to create an enhancer based on an API route.
+     */
+    enhance?: ({ composition, hash, }: Pick<UpdateCompositionMessage, 'composition' | 'hash'>) => RootComponentInstance | Promise<RootComponentInstance>;
+};
+/**
+ * Adds contextual editing capability to a Uniform app.
+ * This hook is already integrated in `<UniformComposition />`, you won't need to use it directly, unless you have a custom setup.
+ */
+declare const useUniformContextualEditing: ({ initialCompositionValue, enhance, }: UseUniformContextualEditingProps) => {
+    composition: {
+        type: string;
+        parameters?: {
+            [key: string]: {
+                value: unknown;
+                type: string;
+                connectedData?: {
+                    pointer: string;
+                    syntax: "jptr";
+                } | undefined;
+            };
+        } | undefined;
+        variant?: string | undefined;
+        projectMapNodes?: {
+            id: string;
+            path: string;
+            projectMapId: string;
+        }[] | undefined;
+        slots?: {
+            [key: string]: {
+                type: string;
+                parameters?: {
+                    [key: string]: {
+                        value: unknown;
+                        type: string;
+                        connectedData?: {
+                            pointer: string;
+                            syntax: "jptr";
+                        } | undefined;
+                    };
+                } | undefined;
+                variant?: string | undefined;
+                slots?: {
+                    [key: string]: any[];
+                } | undefined;
+                _id?: string | undefined;
+                _pattern?: string | undefined;
+                _dataResources?: {
+                    [key: string]: {
+                        type: string;
+                        isPatternParameter?: boolean | undefined;
+                        ignorePatternParameterDefault?: boolean | undefined;
+                        variables?: {
+                            [key: string]: string;
+                        } | undefined;
+                    };
+                } | undefined;
+                _patternDataResources?: {
+                    [key: string]: {
+                        type: string;
+                        isPatternParameter?: boolean | undefined;
+                        ignorePatternParameterDefault?: boolean | undefined;
+                        variables?: {
+                            [key: string]: string;
+                        } | undefined;
+                    };
+                } | undefined;
+                _patternError?: "NOTFOUND" | "CYCLIC" | undefined;
+                _overrides?: {
+                    [key: string]: {
+                        parameters?: {
+                            [key: string]: {
+                                value: unknown;
+                                type: string;
+                                connectedData?: {
+                                    pointer: string;
+                                    syntax: "jptr";
+                                } | undefined;
+                            };
+                        } | undefined;
+                        variant?: string | undefined;
+                    };
+                } | undefined;
+                _overridability?: {
+                    parameters?: {
+                        [key: string]: "yes" | "no";
+                    } | undefined;
+                    variants?: boolean | undefined;
+                } | undefined;
+            }[];
+        } | undefined;
+        _id: string;
+        _slug?: string | null | undefined;
+        _name: string;
+        _dataResources?: {
+            [key: string]: {
+                type: string;
+                isPatternParameter?: boolean | undefined;
+                ignorePatternParameterDefault?: boolean | undefined;
+                variables?: {
+                    [key: string]: string;
+                } | undefined;
+            };
+        } | undefined;
+        _overrides?: {
+            [key: string]: {
+                parameters?: {
+                    [key: string]: {
+                        value: unknown;
+                        type: string;
+                        connectedData?: {
+                            pointer: string;
+                            syntax: "jptr";
+                        } | undefined;
+                    };
+                } | undefined;
+                variant?: string | undefined;
+            };
+        } | undefined;
+        _overridability?: {
+            parameters?: {
+                [key: string]: "yes" | "no";
+            } | undefined;
+            variants?: boolean | undefined;
+        } | undefined;
+    } | undefined;
+    isContextualEditing: boolean;
+};
+
+type UniformCompositionProps<TRenderProps = unknown> = UniformComponentProps<TRenderProps> & {
+    /** The composition data */
+    data?: RootComponentInstance;
+    contextualEditingEnhancer?: UseUniformContextualEditingProps['enhance'];
+};
+type UniformCompositionContextValue = {
+    data: UniformCompositionProps['data'] | undefined;
+    resolveRenderer?: UniformCompositionProps['resolveRenderer'];
+    behaviorTracking?: UniformCompositionProps['behaviorTracking'];
+    isContextualEditing: boolean;
+};
+/**
+ * Gets the data of the closest `<UniformComposition />` ancestor.
+ */
+declare function useUniformCurrentComposition(): UniformCompositionContextValue;
+/**
+ * The main component to render a Canvas composition.
+ * It renders the full tree of components, and provides some services to the children, such as `useUniformCurrentComposition`.
+ * It also takes care of enabling [Contextual Editing](https://docs.uniform.app/capabilities/composition/contextual-editing).
+ */
+declare function UniformComposition<TRenderProps = unknown>({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, contextualEditingDefaultPlaceholder, }: UniformCompositionProps<TRenderProps>): React$1.JSX.Element;
+
+type RichTextComponentProps<TNode extends RichTextNode = RichTextNode> = {
+    node: TNode;
+};
+type RichTextRendererComponent<TNode extends RichTextNode = RichTextNode> = React$1.ComponentType<PropsWithChildren<RichTextComponentProps<TNode>>>;
+/**
+ * Function that maps a Rich Text node instance to its React component to render it.
+ * The resolver would commonly inspect the `type` of the component to decide.
+ */
+type RenderRichTextComponentResolver = (node: RichTextNode) => RichTextRendererComponent | null | undefined;
+
+type UniformRichTextProps = {
+    /**
+     * The name of the  HTML tag to render.
+     * @default "div"
+     */
+    as?: React$1.ElementType;
+    /** The ID of the parameter. */
+    parameterId: string;
+    /**
+     * A function which can provide a custom react component
+     * for rendering a rich text node
+     */
+    resolveRichTextRenderer?: RenderRichTextComponentResolver;
+} & Omit<React$1.HTMLAttributes<HTMLDivElement>, 'children'>;
+/**
+ * Adds rendering support for Uniform Rich Text parameters
+ */
+declare const UniformRichText: React$1.ForwardRefExoticComponent<{
+    /**
+     * The name of the  HTML tag to render.
+     * @default "div"
+     */
+    as?: React$1.ElementType<any> | undefined;
+    /** The ID of the parameter. */
+    parameterId: string;
+    /**
+     * A function which can provide a custom react component
+     * for rendering a rich text node
+     */
+    resolveRichTextRenderer?: RenderRichTextComponentResolver | undefined;
+} & Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & React$1.RefAttributes<unknown>>;
+
+type UniformRichTextNodeProps = {
+    node: RichTextNode;
+    resolveRichTextRenderer?: RenderRichTextComponentResolver;
+};
+/**
+ * Render a single RichText node
+ */
+declare function UniformRichTextNode({ node, ...props }: UniformRichTextNodeProps): React$1.JSX.Element | null;
+
+type CustomSlotChildRenderFunc = (options: {
+    child: ReactNode;
+    component: ComponentInstance;
+    key: Key;
+}) => JSX.Element;
+type UniformSlotProps<TSlotNames extends string> = {
+    /** Name of the slot to render */
+    name: TSlotNames;
+    /**
+     * Function to resolve the React component to render for a given Canvas component type.
+     * If not specified, the resolveRenderer function on the nearest Layout will be used, if any.
+     */
+    resolveRenderer?: RenderComponentResolver;
+    /** Optional render props enables wrapping all child components in the slot with some markup */
+    children?: CustomSlotChildRenderFunc;
+    /**
+     * Optional ReactNode to use as a placeholder in Canvas editor when the slot is empty.
+     * The node is used to render a placeholder with realistic dimensions and it's never shown to users.
+     * Pass `null` to disable the placeholder.
+     */
+    emptyPlaceholder?: React$1.ReactNode;
+};
+/** Renders a named Slot within a Composition. */
+declare function UniformSlot<TSlotNames extends string = string>({ name, resolveRenderer, children, emptyPlaceholder, }: UniformSlotProps<TSlotNames>): JSX.Element | null;
+
+/**
+ * Returns the attributes needed to annotate a Uniform parameter for inline editing.
+ * Supports only text parameters at the moment.
+ * @deprecated Unstable, and not ready for production usage.
+ **/
+declare const getParameterAttributes: typeof getParameterAttributes$1;
+
+type UseCompositionEventEffectOptions = Omit<Partial<SubscribeToCompositionOptions>, 'callback'> & {
+    enabled: boolean;
+    effect: () => void;
+};
+/** Hook to manage a subscription to a realtime event on a composition */
+declare function useCompositionEventEffect({ enabled, projectId, compositionId, effect, }: UseCompositionEventEffectOptions): void;
+
+type UseUniformContextualEditingStateProps = {
+    /**
+     * When set to true, the hook will return the global contextual state no matter where its used.
+     * When set to false, it will return only the state relevant to the current component (determined using `useUniformCurrentComponent`).
+     * @default false
+     **/
+    global?: boolean;
+};
+/**
+ * Returns the state of contextual editing, when the app is open inside Canvas Editor.
+ * This hook can be used to improve the editing experience of your team.
+ * For example: You can use `selectedComponentReference` to control which element to show inside a carousel or an accordion.
+ */
+declare const useUniformContextualEditingState: ({ global, }?: UseUniformContextualEditingStateProps) => {
+    isContextualEditing: boolean;
+    selectedComponentReference: Omit<_uniformdev_canvas.ContextualEditingComponentReference, "elements"> | undefined;
+};
+
+declare const componentStore: ComponentStore;
+declare const registerUniformComponent: ({ type, variantId, component, }: {
+    type: string;
+    variantId?: string | undefined;
+    component: React.ComponentType<ComponentProps<any>>;
+}) => void;
+declare const componentStoreResolver: RenderComponentResolver;
+
+/** Can be used to override default component Not Implemented fallback */
+declare const NOT_IMPLEMENTED_COMPONENT = "__not_implemented__";
+declare const createComponentStore: () => ComponentStore;
+declare const createComponentStoreResolver: (options: {
+    store: ComponentStore;
+    defaultComponent?: React$1.ComponentType<ComponentProps<any>>;
+}) => RenderComponentResolver;
+
+export { ComponentProps, ComponentStore, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, UseUniformContextualEditingStateProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.esm.js

@@ -557,11 +557,61 @@ function resolveChildren({
 }
 
 // src/components/UniformRichText/UniformRichText.tsx
+import {
+  getParameterAttributes
+} from "@uniformdev/canvas";
 import {
   isRichTextValue,
   isRichTextValueConsideredEmpty
 } from "@uniformdev/richtext";
-import React16, { useMemo as useMemo2 } from "react";
+import React16, { useMemo as useMemo3 } from "react";
+
+// src/hooks/useUniformContextualEditingState.ts
+import {
+  createCanvasChannel as createCanvasChannel2,
+  isUpdateContextualEditingStateInternalMessage
+} from "@uniformdev/canvas";
+import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+var useUniformContextualEditingState = ({
+  global = false
+} = {}) => {
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const { data: componentData } = useUniformCurrentComponent();
+  const [selectedComponentReference, setSelectedComponentReference] = useState2();
+  const channel = useMemo2(() => {
+    if (!isContextualEditing) {
+      return;
+    }
+    const channel2 = createCanvasChannel2({
+      broadcastTo: [window],
+      listenTo: [window]
+    });
+    return channel2;
+  }, [isContextualEditing]);
+  useEffect2(() => {
+    if (!channel) {
+      return;
+    }
+    const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
+      var _a;
+      if (!isUpdateContextualEditingStateInternalMessage(message)) {
+        return;
+      }
+      if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
+        setSelectedComponentReference(void 0);
+        return;
+      }
+      setSelectedComponentReference(message.state.selectedComponentReference);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [global, channel, componentData == null ? void 0 : componentData._id]);
+  return {
+    isContextualEditing,
+    selectedComponentReference
+  };
+};
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
 import { isRichTextNode } from "@uniformdev/richtext";
@@ -672,18 +722,32 @@ var resolveRichTextDefaultRenderer = (node) => {
 // src/components/UniformRichText/UniformRichText.tsx
 var UniformRichText = React16.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
   const { data: componentData } = useUniformCurrentComponent();
-  const parameter = useMemo2(() => {
+  const { selectedComponentReference } = useUniformContextualEditingState({ global: true });
+  const parameter = useMemo3(() => {
     var _a;
     return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
   }, [componentData, parameterId]);
-  const value = useMemo2(() => parameter == null ? void 0 : parameter.value, [parameter]);
+  const value = useMemo3(() => parameter == null ? void 0 : parameter.value, [parameter]);
   if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value))
     return null;
-  return Tag === null ? /* @__PURE__ */ React16.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React16.createElement(Tag, { ref, ...props }, /* @__PURE__ */ React16.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
+  return Tag === null ? /* @__PURE__ */ React16.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React16.createElement(
+    Tag,
+    {
+      ref,
+      ...props,
+      ...getParameterAttributes({
+        component: componentData,
+        id: parameterId
+      }),
+      tabIndex: 0,
+      "data-uniform-selected-parameter": (selectedComponentReference == null ? void 0 : selectedComponentReference.id) === parameterId && selectedComponentReference.parentId === (componentData == null ? void 0 : componentData._id)
+    },
+    /* @__PURE__ */ React16.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
+  );
 });
 
 // src/components/UniformText.tsx
-import React17, { useCallback, useMemo as useMemo3, useState as useState2 } from "react";
+import React17, { useCallback, useMemo as useMemo4, useState as useState3 } from "react";
 var UniformText = ({
   as: Tag = "span",
   parameterId,
@@ -695,8 +759,8 @@ var UniformText = ({
   var _a, _b;
   const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
   const { isContextualEditing } = useUniformCurrentComposition();
-  const [isFocused, setIsFocused] = useState2(false);
-  const parameter = useMemo3(() => {
+  const [isFocused, setIsFocused] = useState3(false);
+  const parameter = useMemo4(() => {
     var _a2;
     return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[parameterId];
   }, [componentData, parameterId]);
@@ -724,7 +788,7 @@ var UniformText = ({
     Tag,
     {
       ...props,
-      ...getParameterAttributes({
+      ...getParameterAttributes2({
         component: componentData,
         id: parameterId,
         isMultiline
@@ -743,7 +807,7 @@ var UniformText = ({
 import {
   getParameterAttributes as defaultGetParameterAttributes
 } from "@uniformdev/canvas";
-var getParameterAttributes = (options) => {
+var getParameterAttributes2 = (options) => {
   return {
     ...defaultGetParameterAttributes(options),
     suppressContentEditableWarning: true
@@ -756,14 +820,14 @@ import {
   createEventBus,
   subscribeToComposition
 } from "@uniformdev/canvas";
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect3 } from "react";
 function useCompositionEventEffect({
   enabled,
   projectId,
   compositionId,
   effect
 }) {
-  useEffect2(() => {
+  useEffect3(() => {
     if (!enabled || !compositionId || !projectId) {
       return;
     }
@@ -789,53 +853,6 @@ function useCompositionEventEffect({
     };
   }, [compositionId, enabled, projectId, effect]);
 }
-
-// src/hooks/useUniformContextualEditingState.ts
-import {
-  createCanvasChannel as createCanvasChannel2,
-  isUpdateContextualEditingStateInternalMessage
-} from "@uniformdev/canvas";
-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 = useMemo4(() => {
-    if (!isContextualEditing) {
-      return;
-    }
-    const channel2 = createCanvasChannel2({
-      broadcastTo: [window],
-      listenTo: [window]
-    });
-    return channel2;
-  }, [isContextualEditing]);
-  useEffect3(() => {
-    if (!channel) {
-      return;
-    }
-    const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
-      var _a;
-      if (!isUpdateContextualEditingStateInternalMessage(message)) {
-        return;
-      }
-      if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
-        setSelectedComponentReference(void 0);
-        return;
-      }
-      setSelectedComponentReference(message.state.selectedComponentReference);
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, [global, channel, componentData == null ? void 0 : componentData._id]);
-  return {
-    isContextualEditing,
-    selectedComponentReference
-  };
-};
 export {
   DefaultNotImplementedComponent,
   NOT_IMPLEMENTED_COMPONENT,
@@ -850,7 +867,7 @@ export {
   createComponentStore,
   createComponentStoreResolver,
   createUniformApiEnhancer,
-  getParameterAttributes,
+  getParameterAttributes2 as getParameterAttributes,
   registerUniformComponent,
   useCompositionEventEffect,
   useUniformContextualEditing,

package/dist/index.js

@@ -43,7 +43,7 @@ __export(src_exports, {
   createComponentStore: () => createComponentStore,
   createComponentStoreResolver: () => createComponentStoreResolver,
   createUniformApiEnhancer: () => import_canvas3.createUniformApiEnhancer,
-  getParameterAttributes: () => getParameterAttributes,
+  getParameterAttributes: () => getParameterAttributes2,
   registerUniformComponent: () => registerUniformComponent,
   useCompositionEventEffect: () => useCompositionEventEffect,
   useUniformContextualEditing: () => useUniformContextualEditing,
@@ -589,56 +589,101 @@ function resolveChildren({
 }
 
 // src/components/UniformRichText/UniformRichText.tsx
+var import_canvas8 = require("@uniformdev/canvas");
 var import_richtext5 = require("@uniformdev/richtext");
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
+
+// src/hooks/useUniformContextualEditingState.ts
+var import_canvas7 = require("@uniformdev/canvas");
+var import_react7 = require("react");
+var useUniformContextualEditingState = ({
+  global = false
+} = {}) => {
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const { data: componentData } = useUniformCurrentComponent();
+  const [selectedComponentReference, setSelectedComponentReference] = (0, import_react7.useState)();
+  const channel = (0, import_react7.useMemo)(() => {
+    if (!isContextualEditing) {
+      return;
+    }
+    const channel2 = (0, import_canvas7.createCanvasChannel)({
+      broadcastTo: [window],
+      listenTo: [window]
+    });
+    return channel2;
+  }, [isContextualEditing]);
+  (0, import_react7.useEffect)(() => {
+    if (!channel) {
+      return;
+    }
+    const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
+      var _a;
+      if (!(0, import_canvas7.isUpdateContextualEditingStateInternalMessage)(message)) {
+        return;
+      }
+      if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
+        setSelectedComponentReference(void 0);
+        return;
+      }
+      setSelectedComponentReference(message.state.selectedComponentReference);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [global, channel, componentData == null ? void 0 : componentData._id]);
+  return {
+    isContextualEditing,
+    selectedComponentReference
+  };
+};
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
 var import_richtext4 = require("@uniformdev/richtext");
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 
 // src/components/UniformRichText/nodes/HeadingRichTextNode.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var HeadingRichTextNode = ({ children, node }) => {
   const { tag } = node;
   const HTag = tag != null ? tag : "h1";
-  return /* @__PURE__ */ import_react7.default.createElement(HTag, null, children);
+  return /* @__PURE__ */ import_react8.default.createElement(HTag, null, children);
 };
 
 // src/components/UniformRichText/nodes/LinebreakRichTextNode.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var LinebreakRichTextNode = () => {
-  return /* @__PURE__ */ import_react8.default.createElement("br", null);
+  return /* @__PURE__ */ import_react9.default.createElement("br", null);
 };
 
 // src/components/UniformRichText/nodes/LinkRichTextNode.tsx
 var import_richtext = require("@uniformdev/richtext");
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var LinkRichTextNode = ({ children, node }) => {
   const { link } = node;
-  return /* @__PURE__ */ import_react9.default.createElement("a", { href: (0, import_richtext.linkParamValueToHref)(link) }, children);
+  return /* @__PURE__ */ import_react10.default.createElement("a", { href: (0, import_richtext.linkParamValueToHref)(link) }, children);
 };
 
 // src/components/UniformRichText/nodes/ListItemRichTextNode.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var ListItemRichTextNode = ({ children, node }) => {
   const { value } = node;
-  return /* @__PURE__ */ import_react10.default.createElement("li", { value: Number.isFinite(value) && value > 0 ? value : void 0 }, children);
+  return /* @__PURE__ */ import_react11.default.createElement("li", { value: Number.isFinite(value) && value > 0 ? value : void 0 }, children);
 };
 
 // src/components/UniformRichText/nodes/ListRichTextNode.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var ListRichTextNode = ({ children, node }) => {
   const { tag, start } = node;
   const ListTag = tag != null ? tag : "ul";
-  return /* @__PURE__ */ import_react11.default.createElement(ListTag, { start: Number.isFinite(start) && start > 0 ? start : void 0 }, children);
+  return /* @__PURE__ */ import_react12.default.createElement(ListTag, { start: Number.isFinite(start) && start > 0 ? start : void 0 }, children);
 };
 
 // src/components/UniformRichText/nodes/ParagraphRichTextNode.tsx
 var import_richtext2 = require("@uniformdev/richtext");
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var ParagraphRichTextNode = ({ children, node }) => {
   const { format, direction } = node;
-  return /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react13.default.createElement(
     "p",
     {
       dir: (0, import_richtext2.isPureDirection)(direction) ? direction : void 0,
@@ -649,18 +694,18 @@ var ParagraphRichTextNode = ({ children, node }) => {
 };
 
 // src/components/UniformRichText/nodes/TabRichTextNode.tsx
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var TabRichTextNode = () => {
-  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, "	");
+  return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, "	");
 };
 
 // src/components/UniformRichText/nodes/TextRichTextNode.tsx
 var import_richtext3 = require("@uniformdev/richtext");
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var TextRichTextNode = ({ node }) => {
   const { text, format } = node;
   const tags = (0, import_richtext3.getRichTextTagsFromTextFormat)(format);
-  return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ import_react14.default.createElement(Tag, null, children), text) : text);
+  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ import_react15.default.createElement(Tag, null, children), text) : text);
 };
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
@@ -675,8 +720,8 @@ function UniformRichTextNode({ node, ...props }) {
   if (!NodeRenderer) {
     return null;
   }
-  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ import_react15.default.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
-  return /* @__PURE__ */ import_react15.default.createElement(NodeRenderer, { node }, children);
+  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ import_react16.default.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
+  return /* @__PURE__ */ import_react16.default.createElement(NodeRenderer, { node }, children);
 }
 var rendererMap = /* @__PURE__ */ new Map([
   ["heading", HeadingRichTextNode],
@@ -685,12 +730,12 @@ var rendererMap = /* @__PURE__ */ new Map([
   ["list", ListRichTextNode],
   ["listitem", ListItemRichTextNode],
   ["paragraph", ParagraphRichTextNode],
-  ["quote", ({ children }) => /* @__PURE__ */ import_react15.default.createElement("blockquote", null, children)],
+  ["quote", ({ children }) => /* @__PURE__ */ import_react16.default.createElement("blockquote", null, children)],
   [
     "code",
-    ({ children }) => /* @__PURE__ */ import_react15.default.createElement("pre", null, /* @__PURE__ */ import_react15.default.createElement("code", null, children))
+    ({ children }) => /* @__PURE__ */ import_react16.default.createElement("pre", null, /* @__PURE__ */ import_react16.default.createElement("code", null, children))
   ],
-  ["root", ({ children }) => /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, children)],
+  ["root", ({ children }) => /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, children)],
   ["text", TextRichTextNode],
   ["tab", TabRichTextNode]
 ]);
@@ -699,20 +744,34 @@ var resolveRichTextDefaultRenderer = (node) => {
 };
 
 // src/components/UniformRichText/UniformRichText.tsx
-var UniformRichText = import_react16.default.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
+var UniformRichText = import_react17.default.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
   const { data: componentData } = useUniformCurrentComponent();
-  const parameter = (0, import_react16.useMemo)(() => {
+  const { selectedComponentReference } = useUniformContextualEditingState({ global: true });
+  const parameter = (0, import_react17.useMemo)(() => {
     var _a;
     return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
   }, [componentData, parameterId]);
-  const value = (0, import_react16.useMemo)(() => parameter == null ? void 0 : parameter.value, [parameter]);
+  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_react16.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ import_react16.default.createElement(Tag, { ref, ...props }, /* @__PURE__ */ import_react16.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,
+      ...(0, import_canvas8.getParameterAttributes)({
+        component: componentData,
+        id: parameterId
+      }),
+      tabIndex: 0,
+      "data-uniform-selected-parameter": (selectedComponentReference == null ? void 0 : selectedComponentReference.id) === parameterId && selectedComponentReference.parentId === (componentData == null ? void 0 : componentData._id)
+    },
+    /* @__PURE__ */ import_react17.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
+  );
 });
 
 // src/components/UniformText.tsx
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var UniformText = ({
   as: Tag = "span",
   parameterId,
@@ -724,18 +783,18 @@ var UniformText = ({
   var _a, _b;
   const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
   const { isContextualEditing } = useUniformCurrentComposition();
-  const [isFocused, setIsFocused] = (0, import_react17.useState)(false);
-  const parameter = (0, import_react17.useMemo)(() => {
+  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]);
   const value = parameter == null ? void 0 : parameter.value;
   const isEditable = (_b = (_a = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _a.isEditable) != null ? _b : false;
   const shouldSkipCustomRendering = isFocused && isEditable;
-  const handleOnFocus = (0, import_react17.useCallback)(() => {
+  const handleOnFocus = (0, import_react18.useCallback)(() => {
     setIsFocused(true);
   }, [setIsFocused]);
-  const handleOnBlur = (0, import_react17.useCallback)(() => {
+  const handleOnBlur = (0, import_react18.useCallback)(() => {
     setIsFocused(false);
   }, [setIsFocused]);
   if (!parameter) {
@@ -745,15 +804,15 @@ var UniformText = ({
     return null;
   }
   if (!isContextualEditing) {
-    return /* @__PURE__ */ import_react17.default.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
+    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;
-  return /* @__PURE__ */ import_react17.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement(
     Tag,
     {
       ...props,
-      ...getParameterAttributes({
+      ...getParameterAttributes2({
         component: componentData,
         id: parameterId,
         isMultiline
@@ -769,35 +828,35 @@ var UniformText = ({
 };
 
 // src/helpers/getParameterAttributes.ts
-var import_canvas7 = require("@uniformdev/canvas");
-var getParameterAttributes = (options) => {
+var import_canvas9 = require("@uniformdev/canvas");
+var getParameterAttributes2 = (options) => {
   return {
-    ...(0, import_canvas7.getParameterAttributes)(options),
+    ...(0, import_canvas9.getParameterAttributes)(options),
     suppressContentEditableWarning: true
   };
 };
 
 // src/hooks/useCompositionEventEffect.ts
-var import_canvas8 = require("@uniformdev/canvas");
-var import_react18 = require("react");
+var import_canvas10 = require("@uniformdev/canvas");
+var import_react19 = require("react");
 function useCompositionEventEffect({
   enabled,
   projectId,
   compositionId,
   effect
 }) {
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!enabled || !compositionId || !projectId) {
       return;
     }
     let goodbye = void 0;
     const loadEffect = async () => {
-      const eventBus = await (0, import_canvas8.createEventBus)();
+      const eventBus = await (0, import_canvas10.createEventBus)();
       if (eventBus) {
-        goodbye = (0, import_canvas8.subscribeToComposition)({
+        goodbye = (0, import_canvas10.subscribeToComposition)({
           eventBus,
           compositionId,
-          compositionState: import_canvas8.CANVAS_DRAFT_STATE,
+          compositionState: import_canvas10.CANVAS_DRAFT_STATE,
           projectId,
           callback: effect,
           event: "updated"
@@ -812,50 +871,6 @@ function useCompositionEventEffect({
     };
   }, [compositionId, enabled, projectId, effect]);
 }
-
-// src/hooks/useUniformContextualEditingState.ts
-var import_canvas9 = require("@uniformdev/canvas");
-var import_react19 = require("react");
-var useUniformContextualEditingState = ({
-  global = false
-} = {}) => {
-  const { isContextualEditing } = useUniformCurrentComposition();
-  const { data: componentData } = useUniformCurrentComponent();
-  const [selectedComponentReference, setSelectedComponentReference] = (0, import_react19.useState)();
-  const channel = (0, import_react19.useMemo)(() => {
-    if (!isContextualEditing) {
-      return;
-    }
-    const channel2 = (0, import_canvas9.createCanvasChannel)({
-      broadcastTo: [window],
-      listenTo: [window]
-    });
-    return channel2;
-  }, [isContextualEditing]);
-  (0, import_react19.useEffect)(() => {
-    if (!channel) {
-      return;
-    }
-    const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
-      var _a;
-      if (!(0, import_canvas9.isUpdateContextualEditingStateInternalMessage)(message)) {
-        return;
-      }
-      if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
-        setSelectedComponentReference(void 0);
-        return;
-      }
-      setSelectedComponentReference(message.state.selectedComponentReference);
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, [global, channel, componentData == null ? void 0 : componentData._id]);
-  return {
-    isContextualEditing,
-    selectedComponentReference
-  };
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DefaultNotImplementedComponent,

package/dist/index.mjs

@@ -557,11 +557,61 @@ function resolveChildren({
 }
 
 // src/components/UniformRichText/UniformRichText.tsx
+import {
+  getParameterAttributes
+} from "@uniformdev/canvas";
 import {
   isRichTextValue,
   isRichTextValueConsideredEmpty
 } from "@uniformdev/richtext";
-import React16, { useMemo as useMemo2 } from "react";
+import React16, { useMemo as useMemo3 } from "react";
+
+// src/hooks/useUniformContextualEditingState.ts
+import {
+  createCanvasChannel as createCanvasChannel2,
+  isUpdateContextualEditingStateInternalMessage
+} from "@uniformdev/canvas";
+import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+var useUniformContextualEditingState = ({
+  global = false
+} = {}) => {
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const { data: componentData } = useUniformCurrentComponent();
+  const [selectedComponentReference, setSelectedComponentReference] = useState2();
+  const channel = useMemo2(() => {
+    if (!isContextualEditing) {
+      return;
+    }
+    const channel2 = createCanvasChannel2({
+      broadcastTo: [window],
+      listenTo: [window]
+    });
+    return channel2;
+  }, [isContextualEditing]);
+  useEffect2(() => {
+    if (!channel) {
+      return;
+    }
+    const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
+      var _a;
+      if (!isUpdateContextualEditingStateInternalMessage(message)) {
+        return;
+      }
+      if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
+        setSelectedComponentReference(void 0);
+        return;
+      }
+      setSelectedComponentReference(message.state.selectedComponentReference);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [global, channel, componentData == null ? void 0 : componentData._id]);
+  return {
+    isContextualEditing,
+    selectedComponentReference
+  };
+};
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
 import { isRichTextNode } from "@uniformdev/richtext";
@@ -672,18 +722,32 @@ var resolveRichTextDefaultRenderer = (node) => {
 // src/components/UniformRichText/UniformRichText.tsx
 var UniformRichText = React16.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
   const { data: componentData } = useUniformCurrentComponent();
-  const parameter = useMemo2(() => {
+  const { selectedComponentReference } = useUniformContextualEditingState({ global: true });
+  const parameter = useMemo3(() => {
     var _a;
     return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
   }, [componentData, parameterId]);
-  const value = useMemo2(() => parameter == null ? void 0 : parameter.value, [parameter]);
+  const value = useMemo3(() => parameter == null ? void 0 : parameter.value, [parameter]);
   if (!value || !isRichTextValue(value) || isRichTextValueConsideredEmpty(value))
     return null;
-  return Tag === null ? /* @__PURE__ */ React16.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React16.createElement(Tag, { ref, ...props }, /* @__PURE__ */ React16.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
+  return Tag === null ? /* @__PURE__ */ React16.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React16.createElement(
+    Tag,
+    {
+      ref,
+      ...props,
+      ...getParameterAttributes({
+        component: componentData,
+        id: parameterId
+      }),
+      tabIndex: 0,
+      "data-uniform-selected-parameter": (selectedComponentReference == null ? void 0 : selectedComponentReference.id) === parameterId && selectedComponentReference.parentId === (componentData == null ? void 0 : componentData._id)
+    },
+    /* @__PURE__ */ React16.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer })
+  );
 });
 
 // src/components/UniformText.tsx
-import React17, { useCallback, useMemo as useMemo3, useState as useState2 } from "react";
+import React17, { useCallback, useMemo as useMemo4, useState as useState3 } from "react";
 var UniformText = ({
   as: Tag = "span",
   parameterId,
@@ -695,8 +759,8 @@ var UniformText = ({
   var _a, _b;
   const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
   const { isContextualEditing } = useUniformCurrentComposition();
-  const [isFocused, setIsFocused] = useState2(false);
-  const parameter = useMemo3(() => {
+  const [isFocused, setIsFocused] = useState3(false);
+  const parameter = useMemo4(() => {
     var _a2;
     return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[parameterId];
   }, [componentData, parameterId]);
@@ -724,7 +788,7 @@ var UniformText = ({
     Tag,
     {
       ...props,
-      ...getParameterAttributes({
+      ...getParameterAttributes2({
         component: componentData,
         id: parameterId,
         isMultiline
@@ -743,7 +807,7 @@ var UniformText = ({
 import {
   getParameterAttributes as defaultGetParameterAttributes
 } from "@uniformdev/canvas";
-var getParameterAttributes = (options) => {
+var getParameterAttributes2 = (options) => {
   return {
     ...defaultGetParameterAttributes(options),
     suppressContentEditableWarning: true
@@ -756,14 +820,14 @@ import {
   createEventBus,
   subscribeToComposition
 } from "@uniformdev/canvas";
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect3 } from "react";
 function useCompositionEventEffect({
   enabled,
   projectId,
   compositionId,
   effect
 }) {
-  useEffect2(() => {
+  useEffect3(() => {
     if (!enabled || !compositionId || !projectId) {
       return;
     }
@@ -789,53 +853,6 @@ function useCompositionEventEffect({
     };
   }, [compositionId, enabled, projectId, effect]);
 }
-
-// src/hooks/useUniformContextualEditingState.ts
-import {
-  createCanvasChannel as createCanvasChannel2,
-  isUpdateContextualEditingStateInternalMessage
-} from "@uniformdev/canvas";
-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 = useMemo4(() => {
-    if (!isContextualEditing) {
-      return;
-    }
-    const channel2 = createCanvasChannel2({
-      broadcastTo: [window],
-      listenTo: [window]
-    });
-    return channel2;
-  }, [isContextualEditing]);
-  useEffect3(() => {
-    if (!channel) {
-      return;
-    }
-    const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
-      var _a;
-      if (!isUpdateContextualEditingStateInternalMessage(message)) {
-        return;
-      }
-      if (!global && (componentData == null ? void 0 : componentData._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
-        setSelectedComponentReference(void 0);
-        return;
-      }
-      setSelectedComponentReference(message.state.selectedComponentReference);
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, [global, channel, componentData == null ? void 0 : componentData._id]);
-  return {
-    isContextualEditing,
-    selectedComponentReference
-  };
-};
 export {
   DefaultNotImplementedComponent,
   NOT_IMPLEMENTED_COMPONENT,
@@ -850,7 +867,7 @@ export {
   createComponentStore,
   createComponentStoreResolver,
   createUniformApiEnhancer,
-  getParameterAttributes,
+  getParameterAttributes2 as getParameterAttributes,
   registerUniformComponent,
   useCompositionEventEffect,
   useUniformContextualEditing,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "19.35.2",
+  "version": "19.35.3-alpha.82+4bc341093",
   "description": "React SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,10 +24,10 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.35.2",
-    "@uniformdev/context": "19.35.2",
-    "@uniformdev/context-react": "19.35.2",
-    "@uniformdev/richtext": "19.35.2"
+    "@uniformdev/canvas": "19.35.3-alpha.82+4bc341093",
+    "@uniformdev/context": "19.35.3-alpha.82+4bc341093",
+    "@uniformdev/context-react": "19.35.3-alpha.82+4bc341093",
+    "@uniformdev/richtext": "19.35.3-alpha.82+4bc341093"
   },
   "peerDependencies": {
     "react": ">= 16 || 17 || 18",
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "64d3270175087c87cfaa29a283aa4a7b0a98fd2c"
+  "gitHead": "4bc341093bc946900df2646fe53eca4bcddc693c"
 }