@uniformdev/canvas-react 19.13.0 → 19.14.1-alpha.1

package/dist/index.d.ts

@@ -1,6 +1,7 @@
-import React$1, { Key, ReactNode } from 'react';
+import React$1, { Key, ReactNode, PropsWithChildren } from 'react';
 import { ComponentInstance, RootComponentInstance, UpdateCompositionMessage, SubscribeToCompositionOptions } from '@uniformdev/canvas';
 export { createUniformApiEnhancer } from '@uniformdev/canvas';
+import { RichTextNode } from '@uniformdev/richtext';
 
 /**
  * Props passed to a Canvas component implementation.
@@ -228,6 +229,41 @@ declare function useUniformCurrentComposition(): UniformCompositionContextValue;
  */
 declare function UniformComposition<TRenderProps = unknown>({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, }: 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 ID of the parameter. */
+    parameterId: string;
+    /**
+     * A function which can provide a custom react component
+     * for rendering a rich text node
+     */
+    resolveRichTextRenderer?: RenderRichTextComponentResolver;
+};
+/**
+ * Adds rendering support for Uniform Rich Text parameters
+ * @deprecated This component is unstable, and not ready for production usage.
+ */
+declare function UniformRichText({ parameterId, resolveRichTextRenderer }: UniformRichTextProps): React$1.JSX.Element | null;
+
+type UniformRichTextNodeProps = {
+    node: RichTextNode;
+    resolveRichTextRenderer?: RenderRichTextComponentResolver;
+};
+/**
+ * Render a single RichText node
+ * @deprecated This component is unstable, and not ready for production usage.
+ */
+declare function UniformRichTextNode({ node, ...props }: UniformRichTextNodeProps): React$1.JSX.Element | null;
+
 type CustomSlotChildRenderFunc = (options: {
     child: ReactNode;
     component: ComponentInstance;
@@ -333,4 +369,4 @@ declare const createComponentStoreResolver: (options: {
     defaultComponent?: React$1.ComponentType<ComponentProps<any>>;
 }) => RenderComponentResolver;
 
-export { ComponentProps, ComponentStore, DefaultNotImplementedComponent, GetParameterAttributesProps, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformSlot, UniformSlotProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };
+export { ComponentProps, ComponentStore, DefaultNotImplementedComponent, GetParameterAttributesProps, NOT_IMPLEMENTED_COMPONENT, RenderComponentResolver, RenderRichTextComponentResolver, RichTextComponentProps, RichTextRendererComponent, SystemRenderConfig, SystemRenderFunction, UniformComponent, UniformComponentContextValue, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, componentStore, componentStoreResolver, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useCompositionEventEffect, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.esm.js

@@ -552,8 +552,127 @@ function resolveChildren({
   return renderChildren;
 }
 
+// src/components/UniformRichText/UniformRichText.tsx
+import { isRichTextNode as isRichTextNode2 } from "@uniformdev/richtext";
+import React16, { useMemo as useMemo2 } from "react";
+
+// src/components/UniformRichText/UniformRichTextNode.tsx
+import { isRichTextNode } from "@uniformdev/richtext";
+import React15 from "react";
+
+// src/components/UniformRichText/nodes/HeadingRichTextNode.tsx
+import React7 from "react";
+var HeadingRichTextNode = ({ children, node }) => {
+  const { tag } = node;
+  const HTag = tag != null ? tag : "h1";
+  return /* @__PURE__ */ React7.createElement(HTag, null, children);
+};
+
+// src/components/UniformRichText/nodes/LinebreakRichTextNode.tsx
+import React8 from "react";
+var LinebreakRichTextNode = () => {
+  return /* @__PURE__ */ React8.createElement("br", null);
+};
+
+// src/components/UniformRichText/nodes/LinkRichTextNode.tsx
+import { linkParamValueToHref } from "@uniformdev/richtext";
+import React9 from "react";
+var LinkRichTextNode = ({ children, node }) => {
+  const { link } = node;
+  return /* @__PURE__ */ React9.createElement("a", { href: linkParamValueToHref(link) }, children);
+};
+
+// src/components/UniformRichText/nodes/ListItemRichTextNode.tsx
+import React10 from "react";
+var ListItemRichTextNode = ({ children, node }) => {
+  const { value } = node;
+  return /* @__PURE__ */ React10.createElement("li", { value: Number.isFinite(value) && value > 0 ? value + 1 : void 0 }, children);
+};
+
+// src/components/UniformRichText/nodes/ListRichTextNode.tsx
+import React11 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);
+};
+
+// src/components/UniformRichText/nodes/ParagraphRichTextNode.tsx
+import { isPureDirection, isPureTextAlign } from "@uniformdev/richtext";
+import React12 from "react";
+var ParagraphRichTextNode = ({ children, node }) => {
+  const { format, direction } = node;
+  return /* @__PURE__ */ React12.createElement(
+    "p",
+    {
+      dir: isPureDirection(direction) ? direction : void 0,
+      style: isPureTextAlign(format) ? { textAlign: format } : void 0
+    },
+    children
+  );
+};
+
+// src/components/UniformRichText/nodes/TabRichTextNode.tsx
+import React13 from "react";
+var TabRichTextNode = () => {
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, "	");
+};
+
+// src/components/UniformRichText/nodes/TextRichTextNode.tsx
+import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
+import React14 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);
+};
+
+// src/components/UniformRichText/UniformRichTextNode.tsx
+function UniformRichTextNode({ node, ...props }) {
+  var _a;
+  if (!isRichTextNode(node))
+    return null;
+  let NodeRenderer = (_a = props.resolveRichTextRenderer) == null ? void 0 : _a.call(props, node);
+  if (typeof NodeRenderer === "undefined") {
+    NodeRenderer = resolveRichTextDefaultRenderer(node);
+  }
+  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);
+}
+var rendererMap = /* @__PURE__ */ new Map([
+  ["heading", HeadingRichTextNode],
+  ["linebreak", LinebreakRichTextNode],
+  ["link", LinkRichTextNode],
+  ["list", ListRichTextNode],
+  ["listitem", ListItemRichTextNode],
+  ["paragraph", ParagraphRichTextNode],
+  ["quote", ({ children }) => /* @__PURE__ */ React15.createElement("blockquote", null, children)],
+  ["root", ({ children }) => /* @__PURE__ */ React15.createElement(React15.Fragment, null, children)],
+  ["text", TextRichTextNode],
+  ["tab", TabRichTextNode]
+]);
+var resolveRichTextDefaultRenderer = (node) => {
+  return rendererMap.get(node.type);
+};
+
+// src/components/UniformRichText/UniformRichText.tsx
+function UniformRichText({ parameterId, resolveRichTextRenderer }) {
+  const { data: componentData } = useUniformCurrentComponent();
+  const parameter = useMemo2(() => {
+    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]);
+  if (!value || !isRichTextNode2(value == null ? void 0 : value.root))
+    return null;
+  return /* @__PURE__ */ React16.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer });
+}
+
 // src/components/UniformText.tsx
-import React7, { useCallback, useMemo as useMemo2, useState as useState2 } from "react";
+import React17, { useCallback, useMemo as useMemo3, useState as useState2 } from "react";
 var UniformText = ({
   as: Tag = "span",
   parameterId,
@@ -565,12 +684,12 @@ var UniformText = ({
   const { data: componentData } = useUniformCurrentComponent();
   const { isContextualEditing } = useUniformCurrentComposition();
   const [isFocused, setIsFocused] = useState2(false);
-  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 isEditable = useMemo2(() => {
+  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]);
@@ -580,7 +699,7 @@ var UniformText = ({
   const handleOnBlur = useCallback(() => {
     setIsFocused(false);
   }, [setIsFocused]);
-  const shouldSkipCustomRendering = useMemo2(() => isFocused && isEditable, [isFocused, isEditable]);
+  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}"`
@@ -588,9 +707,9 @@ var UniformText = ({
     return null;
   }
   if (!isContextualEditing) {
-    return /* @__PURE__ */ React7.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
+    return /* @__PURE__ */ React17.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
   }
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React17.createElement(
     Tag,
     {
       ...props,
@@ -673,6 +792,8 @@ export {
   NOT_IMPLEMENTED_COMPONENT,
   UniformComponent,
   UniformComposition,
+  UniformRichText,
+  UniformRichTextNode,
   UniformSlot,
   UniformText,
   componentStore,

package/dist/index.js

@@ -34,6 +34,8 @@ __export(src_exports, {
   NOT_IMPLEMENTED_COMPONENT: () => NOT_IMPLEMENTED_COMPONENT,
   UniformComponent: () => UniformComponent,
   UniformComposition: () => UniformComposition,
+  UniformRichText: () => UniformRichText,
+  UniformRichTextNode: () => UniformRichTextNode,
   UniformSlot: () => UniformSlot,
   UniformText: () => UniformText,
   componentStore: () => componentStore,
@@ -581,8 +583,127 @@ function resolveChildren({
   return renderChildren;
 }
 
-// src/components/UniformText.tsx
+// src/components/UniformRichText/UniformRichText.tsx
+var import_richtext5 = require("@uniformdev/richtext");
+var import_react16 = __toESM(require("react"));
+
+// src/components/UniformRichText/UniformRichTextNode.tsx
+var import_richtext4 = require("@uniformdev/richtext");
+var import_react15 = __toESM(require("react"));
+
+// src/components/UniformRichText/nodes/HeadingRichTextNode.tsx
 var import_react7 = __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);
+};
+
+// src/components/UniformRichText/nodes/LinebreakRichTextNode.tsx
+var import_react8 = __toESM(require("react"));
+var LinebreakRichTextNode = () => {
+  return /* @__PURE__ */ import_react8.default.createElement("br", null);
+};
+
+// src/components/UniformRichText/nodes/LinkRichTextNode.tsx
+var import_richtext = require("@uniformdev/richtext");
+var import_react9 = __toESM(require("react"));
+var LinkRichTextNode = ({ children, node }) => {
+  const { link } = node;
+  return /* @__PURE__ */ import_react9.default.createElement("a", { href: (0, import_richtext.linkParamValueToHref)(link) }, children);
+};
+
+// src/components/UniformRichText/nodes/ListItemRichTextNode.tsx
+var import_react10 = __toESM(require("react"));
+var ListItemRichTextNode = ({ children, node }) => {
+  const { value } = node;
+  return /* @__PURE__ */ import_react10.default.createElement("li", { value: Number.isFinite(value) && value > 0 ? value + 1 : void 0 }, children);
+};
+
+// src/components/UniformRichText/nodes/ListRichTextNode.tsx
+var import_react11 = __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);
+};
+
+// src/components/UniformRichText/nodes/ParagraphRichTextNode.tsx
+var import_richtext2 = require("@uniformdev/richtext");
+var import_react12 = __toESM(require("react"));
+var ParagraphRichTextNode = ({ children, node }) => {
+  const { format, direction } = node;
+  return /* @__PURE__ */ import_react12.default.createElement(
+    "p",
+    {
+      dir: (0, import_richtext2.isPureDirection)(direction) ? direction : void 0,
+      style: (0, import_richtext2.isPureTextAlign)(format) ? { textAlign: format } : void 0
+    },
+    children
+  );
+};
+
+// src/components/UniformRichText/nodes/TabRichTextNode.tsx
+var import_react13 = __toESM(require("react"));
+var TabRichTextNode = () => {
+  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, "	");
+};
+
+// src/components/UniformRichText/nodes/TextRichTextNode.tsx
+var import_richtext3 = require("@uniformdev/richtext");
+var import_react14 = __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);
+};
+
+// src/components/UniformRichText/UniformRichTextNode.tsx
+function UniformRichTextNode({ node, ...props }) {
+  var _a;
+  if (!(0, import_richtext4.isRichTextNode)(node))
+    return null;
+  let NodeRenderer = (_a = props.resolveRichTextRenderer) == null ? void 0 : _a.call(props, node);
+  if (typeof NodeRenderer === "undefined") {
+    NodeRenderer = resolveRichTextDefaultRenderer(node);
+  }
+  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);
+}
+var rendererMap = /* @__PURE__ */ new Map([
+  ["heading", HeadingRichTextNode],
+  ["linebreak", LinebreakRichTextNode],
+  ["link", LinkRichTextNode],
+  ["list", ListRichTextNode],
+  ["listitem", ListItemRichTextNode],
+  ["paragraph", ParagraphRichTextNode],
+  ["quote", ({ children }) => /* @__PURE__ */ import_react15.default.createElement("blockquote", null, children)],
+  ["root", ({ children }) => /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, children)],
+  ["text", TextRichTextNode],
+  ["tab", TabRichTextNode]
+]);
+var resolveRichTextDefaultRenderer = (node) => {
+  return rendererMap.get(node.type);
+};
+
+// src/components/UniformRichText/UniformRichText.tsx
+function UniformRichText({ parameterId, resolveRichTextRenderer }) {
+  const { data: componentData } = useUniformCurrentComponent();
+  const parameter = (0, import_react16.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]);
+  if (!value || !(0, import_richtext5.isRichTextNode)(value == null ? void 0 : value.root))
+    return null;
+  return /* @__PURE__ */ import_react16.default.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer });
+}
+
+// src/components/UniformText.tsx
+var import_react17 = __toESM(require("react"));
 var UniformText = ({
   as: Tag = "span",
   parameterId,
@@ -593,23 +714,23 @@ var UniformText = ({
 }) => {
   const { data: componentData } = useUniformCurrentComponent();
   const { isContextualEditing } = useUniformCurrentComposition();
-  const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
-  const parameter = (0, import_react7.useMemo)(() => {
+  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];
   }, [componentData, parameterId]);
-  const value = (0, import_react7.useMemo)(() => parameter == null ? void 0 : parameter.value, [parameter]);
-  const isEditable = (0, import_react7.useMemo)(() => {
+  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_react7.useCallback)(() => {
+  const handleOnFocus = (0, import_react17.useCallback)(() => {
     setIsFocused(true);
   }, [setIsFocused]);
-  const handleOnBlur = (0, import_react7.useCallback)(() => {
+  const handleOnBlur = (0, import_react17.useCallback)(() => {
     setIsFocused(false);
   }, [setIsFocused]);
-  const shouldSkipCustomRendering = (0, import_react7.useMemo)(() => isFocused && isEditable, [isFocused, isEditable]);
+  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}"`
@@ -617,9 +738,9 @@ var UniformText = ({
     return null;
   }
   if (!isContextualEditing) {
-    return /* @__PURE__ */ import_react7.default.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
+    return /* @__PURE__ */ import_react17.default.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
   }
-  return /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react17.default.createElement(
     Tag,
     {
       ...props,
@@ -660,14 +781,14 @@ var getParameterAttributes = ({ id, component, placeholder }) => {
 
 // src/hooks/useCompositionEventEffect.ts
 var import_canvas7 = require("@uniformdev/canvas");
-var import_react8 = require("react");
+var import_react18 = require("react");
 function useCompositionEventEffect({
   enabled,
   projectId,
   compositionId,
   effect
 }) {
-  (0, import_react8.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!enabled || !compositionId || !projectId) {
       return;
     }
@@ -699,6 +820,8 @@ function useCompositionEventEffect({
   NOT_IMPLEMENTED_COMPONENT,
   UniformComponent,
   UniformComposition,
+  UniformRichText,
+  UniformRichTextNode,
   UniformSlot,
   UniformText,
   componentStore,

package/dist/index.mjs

@@ -552,8 +552,127 @@ function resolveChildren({
   return renderChildren;
 }
 
+// src/components/UniformRichText/UniformRichText.tsx
+import { isRichTextNode as isRichTextNode2 } from "@uniformdev/richtext";
+import React16, { useMemo as useMemo2 } from "react";
+
+// src/components/UniformRichText/UniformRichTextNode.tsx
+import { isRichTextNode } from "@uniformdev/richtext";
+import React15 from "react";
+
+// src/components/UniformRichText/nodes/HeadingRichTextNode.tsx
+import React7 from "react";
+var HeadingRichTextNode = ({ children, node }) => {
+  const { tag } = node;
+  const HTag = tag != null ? tag : "h1";
+  return /* @__PURE__ */ React7.createElement(HTag, null, children);
+};
+
+// src/components/UniformRichText/nodes/LinebreakRichTextNode.tsx
+import React8 from "react";
+var LinebreakRichTextNode = () => {
+  return /* @__PURE__ */ React8.createElement("br", null);
+};
+
+// src/components/UniformRichText/nodes/LinkRichTextNode.tsx
+import { linkParamValueToHref } from "@uniformdev/richtext";
+import React9 from "react";
+var LinkRichTextNode = ({ children, node }) => {
+  const { link } = node;
+  return /* @__PURE__ */ React9.createElement("a", { href: linkParamValueToHref(link) }, children);
+};
+
+// src/components/UniformRichText/nodes/ListItemRichTextNode.tsx
+import React10 from "react";
+var ListItemRichTextNode = ({ children, node }) => {
+  const { value } = node;
+  return /* @__PURE__ */ React10.createElement("li", { value: Number.isFinite(value) && value > 0 ? value + 1 : void 0 }, children);
+};
+
+// src/components/UniformRichText/nodes/ListRichTextNode.tsx
+import React11 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);
+};
+
+// src/components/UniformRichText/nodes/ParagraphRichTextNode.tsx
+import { isPureDirection, isPureTextAlign } from "@uniformdev/richtext";
+import React12 from "react";
+var ParagraphRichTextNode = ({ children, node }) => {
+  const { format, direction } = node;
+  return /* @__PURE__ */ React12.createElement(
+    "p",
+    {
+      dir: isPureDirection(direction) ? direction : void 0,
+      style: isPureTextAlign(format) ? { textAlign: format } : void 0
+    },
+    children
+  );
+};
+
+// src/components/UniformRichText/nodes/TabRichTextNode.tsx
+import React13 from "react";
+var TabRichTextNode = () => {
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, "	");
+};
+
+// src/components/UniformRichText/nodes/TextRichTextNode.tsx
+import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
+import React14 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);
+};
+
+// src/components/UniformRichText/UniformRichTextNode.tsx
+function UniformRichTextNode({ node, ...props }) {
+  var _a;
+  if (!isRichTextNode(node))
+    return null;
+  let NodeRenderer = (_a = props.resolveRichTextRenderer) == null ? void 0 : _a.call(props, node);
+  if (typeof NodeRenderer === "undefined") {
+    NodeRenderer = resolveRichTextDefaultRenderer(node);
+  }
+  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);
+}
+var rendererMap = /* @__PURE__ */ new Map([
+  ["heading", HeadingRichTextNode],
+  ["linebreak", LinebreakRichTextNode],
+  ["link", LinkRichTextNode],
+  ["list", ListRichTextNode],
+  ["listitem", ListItemRichTextNode],
+  ["paragraph", ParagraphRichTextNode],
+  ["quote", ({ children }) => /* @__PURE__ */ React15.createElement("blockquote", null, children)],
+  ["root", ({ children }) => /* @__PURE__ */ React15.createElement(React15.Fragment, null, children)],
+  ["text", TextRichTextNode],
+  ["tab", TabRichTextNode]
+]);
+var resolveRichTextDefaultRenderer = (node) => {
+  return rendererMap.get(node.type);
+};
+
+// src/components/UniformRichText/UniformRichText.tsx
+function UniformRichText({ parameterId, resolveRichTextRenderer }) {
+  const { data: componentData } = useUniformCurrentComponent();
+  const parameter = useMemo2(() => {
+    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]);
+  if (!value || !isRichTextNode2(value == null ? void 0 : value.root))
+    return null;
+  return /* @__PURE__ */ React16.createElement(UniformRichTextNode, { node: value.root, resolveRichTextRenderer });
+}
+
 // src/components/UniformText.tsx
-import React7, { useCallback, useMemo as useMemo2, useState as useState2 } from "react";
+import React17, { useCallback, useMemo as useMemo3, useState as useState2 } from "react";
 var UniformText = ({
   as: Tag = "span",
   parameterId,
@@ -565,12 +684,12 @@ var UniformText = ({
   const { data: componentData } = useUniformCurrentComponent();
   const { isContextualEditing } = useUniformCurrentComposition();
   const [isFocused, setIsFocused] = useState2(false);
-  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 isEditable = useMemo2(() => {
+  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]);
@@ -580,7 +699,7 @@ var UniformText = ({
   const handleOnBlur = useCallback(() => {
     setIsFocused(false);
   }, [setIsFocused]);
-  const shouldSkipCustomRendering = useMemo2(() => isFocused && isEditable, [isFocused, isEditable]);
+  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}"`
@@ -588,9 +707,9 @@ var UniformText = ({
     return null;
   }
   if (!isContextualEditing) {
-    return /* @__PURE__ */ React7.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
+    return /* @__PURE__ */ React17.createElement(Tag, { style: isMultiline ? { whiteSpace: "pre-wrap" } : {}, ...props }, render(value));
   }
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React17.createElement(
     Tag,
     {
       ...props,
@@ -673,6 +792,8 @@ export {
   NOT_IMPLEMENTED_COMPONENT,
   UniformComponent,
   UniformComposition,
+  UniformRichText,
+  UniformRichTextNode,
   UniformSlot,
   UniformText,
   componentStore,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-react",
-  "version": "19.13.0",
+  "version": "19.14.1-alpha.1+597b21eaa",
   "description": "React SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,16 +24,17 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.13.0",
-    "@uniformdev/context": "19.13.0",
-    "@uniformdev/context-react": "19.13.0"
+    "@uniformdev/canvas": "19.14.1-alpha.1+597b21eaa",
+    "@uniformdev/context": "19.14.1-alpha.1+597b21eaa",
+    "@uniformdev/context-react": "19.14.1-alpha.1+597b21eaa",
+    "@uniformdev/richtext": "19.14.1-alpha.1+597b21eaa"
   },
   "peerDependencies": {
     "react": ">= 16 || 17 || 18",
     "react-dom": ">=16"
   },
   "devDependencies": {
-    "@types/react": "18.2.6",
+    "@types/react": "18.2.7",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -43,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1670a0e2475a7a98745ea737cd3b2b09649fe1a1"
+  "gitHead": "597b21eaa0a61271b8951de1d443019868f7699c"
 }