@uniformdev/canvas-react 19.46.1-alpha.8 → 19.47.1-alpha.11

package/dist/index.esm.js

@@ -558,60 +558,110 @@ function resolveChildren({
   return renderChildren;
 }
 
+// src/components/UniformPlayground.tsx
+import { EMPTY_COMPOSITION as EMPTY_COMPOSITION3 } from "@uniformdev/canvas";
+import React7, { useMemo as useMemo2 } from "react";
+var UniformPlayground = ({
+  resolveRenderer,
+  decorators = [],
+  contextualEditingEnhancer,
+  behaviorTracking,
+  contextualEditingDefaultPlaceholder,
+  children
+}) => {
+  const { composition, isContextualEditing } = useUniformContextualEditing({
+    initialCompositionValue: EMPTY_COMPOSITION3,
+    enhance: contextualEditingEnhancer
+  });
+  const renderedComponent = useMemo2(() => {
+    if (!composition) {
+      return null;
+    }
+    let component = /* @__PURE__ */ React7.createElement(
+      UniformComponent,
+      {
+        data: composition,
+        behaviorTracking,
+        resolveRenderer,
+        contextualEditingDefaultPlaceholder
+      },
+      children
+    );
+    decorators.forEach((Decorator) => {
+      component = /* @__PURE__ */ React7.createElement(Decorator, { data: composition }, component);
+    });
+    return component;
+  }, [
+    children,
+    resolveRenderer,
+    decorators,
+    composition,
+    behaviorTracking,
+    contextualEditingDefaultPlaceholder
+  ]);
+  return /* @__PURE__ */ React7.createElement(
+    UniformCompositionContext.Provider,
+    {
+      value: { data: composition, behaviorTracking, resolveRenderer, isContextualEditing }
+    },
+    /* @__PURE__ */ React7.createElement(ContextualEditingComponentWrapper, { component: composition }, renderedComponent)
+  );
+};
+
 // src/components/UniformRichText/UniformRichText.tsx
 import {
   isRichTextValue,
   isRichTextValueConsideredEmpty
 } from "@uniformdev/richtext";
-import React16, { useMemo as useMemo2 } from "react";
+import React17, { useMemo as useMemo3 } from "react";
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
 import { isRichTextNode } from "@uniformdev/richtext";
-import React15 from "react";
+import React16 from "react";
 
 // src/components/UniformRichText/nodes/HeadingRichTextNode.tsx
-import React7 from "react";
+import React8 from "react";
 var HeadingRichTextNode = ({ children, node }) => {
   const { tag } = node;
   const HTag = tag != null ? tag : "h1";
-  return /* @__PURE__ */ React7.createElement(HTag, null, children);
+  return /* @__PURE__ */ React8.createElement(HTag, null, children);
 };
 
 // src/components/UniformRichText/nodes/LinebreakRichTextNode.tsx
-import React8 from "react";
+import React9 from "react";
 var LinebreakRichTextNode = () => {
-  return /* @__PURE__ */ React8.createElement("br", null);
+  return /* @__PURE__ */ React9.createElement("br", null);
 };
 
 // src/components/UniformRichText/nodes/LinkRichTextNode.tsx
 import { linkParamValueToHref } from "@uniformdev/richtext";
-import React9 from "react";
+import React10 from "react";
 var LinkRichTextNode = ({ children, node }) => {
   const { link } = node;
-  return /* @__PURE__ */ React9.createElement("a", { href: linkParamValueToHref(link) }, children);
+  return /* @__PURE__ */ React10.createElement("a", { href: linkParamValueToHref(link) }, children);
 };
 
 // src/components/UniformRichText/nodes/ListItemRichTextNode.tsx
-import React10 from "react";
+import React11 from "react";
 var ListItemRichTextNode = ({ children, node }) => {
   const { value } = node;
-  return /* @__PURE__ */ React10.createElement("li", { value: Number.isFinite(value) && value > 0 ? value : void 0 }, children);
+  return /* @__PURE__ */ React11.createElement("li", { value: Number.isFinite(value) && value > 0 ? value : void 0 }, children);
 };
 
 // src/components/UniformRichText/nodes/ListRichTextNode.tsx
-import React11 from "react";
+import React12 from "react";
 var ListRichTextNode = ({ children, node }) => {
   const { tag, start } = node;
   const ListTag = tag != null ? tag : "ul";
-  return /* @__PURE__ */ React11.createElement(ListTag, { start: Number.isFinite(start) && start > 0 ? start : void 0 }, children);
+  return /* @__PURE__ */ React12.createElement(ListTag, { start: Number.isFinite(start) && start > 0 ? start : void 0 }, children);
 };
 
 // src/components/UniformRichText/nodes/ParagraphRichTextNode.tsx
 import { isPureDirection, isPureTextAlign } from "@uniformdev/richtext";
-import React12 from "react";
+import React13 from "react";
 var ParagraphRichTextNode = ({ children, node }) => {
   const { format, direction } = node;
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(
     "p",
     {
       dir: isPureDirection(direction) ? direction : void 0,
@@ -622,18 +672,18 @@ var ParagraphRichTextNode = ({ children, node }) => {
 };
 
 // src/components/UniformRichText/nodes/TabRichTextNode.tsx
-import React13 from "react";
+import React14 from "react";
 var TabRichTextNode = () => {
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, "	");
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, "	");
 };
 
 // src/components/UniformRichText/nodes/TextRichTextNode.tsx
 import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
-import React14 from "react";
+import React15 from "react";
 var TextRichTextNode = ({ node }) => {
   const { text, format } = node;
   const tags = getRichTextTagsFromTextFormat(format);
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ React14.createElement(Tag, null, children), text) : text);
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, tags.length > 0 ? tags.reduceRight((children, Tag) => /* @__PURE__ */ React15.createElement(Tag, null, children), text) : text);
 };
 
 // src/components/UniformRichText/UniformRichTextNode.tsx
@@ -648,8 +698,8 @@ function UniformRichTextNode({ node, ...props }) {
   if (!NodeRenderer) {
     return null;
   }
-  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ React15.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
-  return /* @__PURE__ */ React15.createElement(NodeRenderer, { node }, children);
+  const children = node.children ? node.children.map((childNode, i) => /* @__PURE__ */ React16.createElement(UniformRichTextNode, { ...props, key: i, node: childNode })) : null;
+  return /* @__PURE__ */ React16.createElement(NodeRenderer, { node }, children);
 }
 var rendererMap = /* @__PURE__ */ new Map([
   ["heading", HeadingRichTextNode],
@@ -658,12 +708,12 @@ var rendererMap = /* @__PURE__ */ new Map([
   ["list", ListRichTextNode],
   ["listitem", ListItemRichTextNode],
   ["paragraph", ParagraphRichTextNode],
-  ["quote", ({ children }) => /* @__PURE__ */ React15.createElement("blockquote", null, children)],
+  ["quote", ({ children }) => /* @__PURE__ */ React16.createElement("blockquote", null, children)],
   [
     "code",
-    ({ children }) => /* @__PURE__ */ React15.createElement("pre", null, /* @__PURE__ */ React15.createElement("code", null, children))
+    ({ children }) => /* @__PURE__ */ React16.createElement("pre", null, /* @__PURE__ */ React16.createElement("code", null, children))
   ],
-  ["root", ({ children }) => /* @__PURE__ */ React15.createElement(React15.Fragment, null, children)],
+  ["root", ({ children }) => /* @__PURE__ */ React16.createElement(React16.Fragment, null, children)],
   ["text", TextRichTextNode],
   ["tab", TabRichTextNode]
 ]);
@@ -672,69 +722,101 @@ var resolveRichTextDefaultRenderer = (node) => {
 };
 
 // src/components/UniformRichText/UniformRichText.tsx
-var UniformRichText = React16.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
+var UniformRichText = React17.forwardRef(function UniformRichText2({ parameterId, resolveRichTextRenderer, as: Tag = "div", ...props }, ref) {
   const { data: componentData } = useUniformCurrentComponent();
-  const parameter = useMemo2(() => {
+  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__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }) : /* @__PURE__ */ React17.createElement(Tag, { ref, ...props }, /* @__PURE__ */ React17.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer }));
 });
 
 // src/components/UniformText.tsx
-import React17, { useCallback, useMemo as useMemo3, useState as useState2 } from "react";
-var UniformText = ({
+import React19, { useState as useState2 } from "react";
+
+// src/components/PureUniformText.tsx
+import React18 from "react";
+var PureUniformText = ({
   as: Tag = "span",
   parameterId,
+  component,
+  skipCustomRendering,
+  isContextualEditing,
   isMultiline = false,
   placeholder,
   render = (value) => value,
   ...props
 }) => {
-  var _a, _b;
-  const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
-  const { isContextualEditing } = useUniformCurrentComposition();
-  const [isFocused, setIsFocused] = useState2(false);
-  const parameter = useMemo3(() => {
-    var _a2;
-    return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[parameterId];
-  }, [componentData, parameterId]);
+  var _a;
+  const parameter = (_a = component == null ? void 0 : component.parameters) == null ? void 0 : _a[parameterId];
   const value = parameter == null ? void 0 : parameter.value;
-  const isEditable = (_b = (_a = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _a.isEditable) != null ? _b : false;
-  const shouldSkipCustomRendering = isFocused && isEditable;
-  const handleOnFocus = useCallback(() => {
-    setIsFocused(true);
-  }, [setIsFocused]);
-  const handleOnBlur = useCallback(() => {
-    setIsFocused(false);
-  }, [setIsFocused]);
   if (!parameter) {
     return null;
   }
   if (!isContextualEditing) {
-    return /* @__PURE__ */ React17.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
+    return /* @__PURE__ */ React18.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
   }
-  const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
-  const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
-  return /* @__PURE__ */ React17.createElement(
+  const computedPlaceholder = typeof placeholder === "function" ? placeholder({ id: parameterId }) : placeholder;
+  return /* @__PURE__ */ React18.createElement(
     Tag,
     {
       ...props,
       ...getParameterAttributes({
-        component: componentData,
+        component,
         id: parameterId,
         isMultiline
       }),
       "data-uniform-parameter-type": "text",
       "data-uniform-placeholder": computedPlaceholder,
-      style: isMultiline ? { whiteSpace: "pre-wrap" } : {},
-      onFocus: handleOnFocus,
-      onBlur: handleOnBlur
+      style: isMultiline ? { whiteSpace: "pre-wrap" } : {}
     },
-    shouldSkipCustomRendering ? value : render(value)
+    skipCustomRendering ? value : render(value)
+  );
+};
+
+// src/components/UniformText.tsx
+var UniformText = ({
+  as: tag = "span",
+  parameterId,
+  isMultiline = false,
+  placeholder,
+  render = (value) => value,
+  ...props
+}) => {
+  var _a, _b, _c;
+  const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
+  const { isContextualEditing } = useUniformCurrentComposition();
+  const [isFocused, setIsFocused] = useState2(false);
+  const parameter = (_a = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a[parameterId];
+  const isEditable = (_c = (_b = parameter == null ? void 0 : parameter._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
+  const shouldSkipCustomRendering = isFocused && isEditable;
+  if (!parameter) {
+    return null;
+  }
+  const placeholderProp = placeholder != null ? placeholder : contextualEditingDefaultPlaceholder;
+  const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: parameterId }) : placeholderProp;
+  return /* @__PURE__ */ React19.createElement(
+    PureUniformText,
+    {
+      ...props,
+      as: tag,
+      parameterId,
+      component: componentData,
+      skipCustomRendering: shouldSkipCustomRendering,
+      isContextualEditing,
+      placeholder: computedPlaceholder,
+      render,
+      isMultiline,
+      onFocus: () => {
+        setIsFocused(true);
+      },
+      onBlur: () => {
+        setIsFocused(false);
+      }
+    }
   );
 };
 
@@ -840,6 +922,8 @@ export {
   NOT_IMPLEMENTED_COMPONENT,
   UniformComponent,
   UniformComposition,
+  UniformCompositionContext,
+  UniformPlayground,
   UniformRichText,
   UniformRichTextNode,
   UniformSlot,