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

package/dist/index.esm.js

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