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

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,
@@ -327,7 +327,8 @@ function UniformComposition({
   behaviorTracking = "onView",
   children,
   resolveRenderer,
-  contextualEditingEnhancer
+  contextualEditingEnhancer,
+  contextualEditingDefaultPlaceholder
 }) {
   const { composition, isContextualEditing } = useUniformContextualEditing({
     initialCompositionValue: data,
@@ -343,7 +344,8 @@ function UniformComposition({
       {
         data: composition,
         behaviorTracking,
-        resolveRenderer
+        resolveRenderer,
+        contextualEditingDefaultPlaceholder
       },
       children
     ))
@@ -531,7 +533,8 @@ function UniformComponent({
   data,
   resolveRenderer,
   children,
-  behaviorTracking
+  behaviorTracking,
+  contextualEditingDefaultPlaceholder
 }) {
   var _a, _b, _c;
   const parentData = useUniformCurrentComponent();
@@ -545,7 +548,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[import_canvas6.CANVAS_ENRICHMENT_TAG_PARAM]) == null ? void 0 : _c.value;
   const TrackComponent = contextValue.behaviorTracking === "onLoad" ? import_context_react2.TrackFragment : import_context_react2.Track;
@@ -585,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,
@@ -645,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
@@ -671,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],
@@ -681,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]
 ]);
@@ -695,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,
@@ -717,25 +780,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] = (0, import_react17.useState)(false);
-  const parameter = (0, import_react17.useMemo)(() => {
-    var _a;
-    return (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
+  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 = (0, import_react17.useMemo)(() => parameter == null ? void 0 : parameter.value, [parameter]);
-  const isEditable = (0, import_react17.useMemo)(() => {
-    var _a, _b;
-    return (_b = (_a = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _a.isEditable) != null ? _b : false;
-  }, [parameter]);
-  const handleOnFocus = (0, import_react17.useCallback)(() => {
+  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_react17.useCallback)(() => {
+  const handleOnBlur = (0, import_react18.useCallback)(() => {
     setIsFocused(false);
   }, [setIsFocused]);
-  const shouldSkipCustomRendering = (0, import_react17.useMemo)(() => 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}"`
@@ -743,21 +804,22 @@ 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));
   }
-  return /* @__PURE__ */ import_react17.default.createElement(
+  const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
+  const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
+  return /* @__PURE__ */ import_react18.default.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
     },
@@ -766,45 +828,35 @@ 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;
+var import_canvas9 = require("@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,
+    ...(0, import_canvas9.getParameterAttributes)(options),
     suppressContentEditableWarning: true
   };
 };
 
 // src/hooks/useCompositionEventEffect.ts
-var import_canvas7 = 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_canvas7.createEventBus)();
+      const eventBus = await (0, import_canvas10.createEventBus)();
       if (eventBus) {
-        goodbye = (0, import_canvas7.subscribeToComposition)({
+        goodbye = (0, import_canvas10.subscribeToComposition)({
           eventBus,
           compositionId,
-          compositionState: import_canvas7.CANVAS_DRAFT_STATE,
+          compositionState: import_canvas10.CANVAS_DRAFT_STATE,
           projectId,
           callback: effect,
           event: "updated"
@@ -819,50 +871,6 @@ function useCompositionEventEffect({
     };
   }, [compositionId, enabled, projectId, effect]);
 }
-
-// src/hooks/useUniformContextualEditingState.ts
-var import_canvas8 = 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_canvas8.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_canvas8.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,