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

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { PropType, ConcreteComponent, Ref, ComputedRef } from 'vue-demi';
 import * as _uniformdev_canvas from '@uniformdev/canvas';
 import { ComponentInstance, ComponentParameter, RootComponentInstance, UpdateCompositionMessage, SubscribeToCompositionOptions } from '@uniformdev/canvas';
 export { createUniformApiEnhancer } from '@uniformdev/canvas';
+import { RichTextNode } from '@uniformdev/richtext';
 
 type DefaultNotImplementedComponentProps = {
     component: ComponentInstance;
@@ -1446,6 +1447,84 @@ declare const UniformComposition: vue_demi.DefineComponent<{
     behaviorTracking: "onLoad" | "onView" | undefined;
 }>;
 
+type RichTextComponentProps<TNode extends RichTextNode = RichTextNode> = {
+    node: TNode;
+};
+type RichTextRendererComponent<TNode extends RichTextNode = RichTextNode> = ConcreteComponent<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) => ConcreteComponent<RichTextComponentProps<RichTextNode>> | null | undefined;
+
+declare const HeadingRichTextNode: RichTextRendererComponent;
+
+declare const LinkRichTextNode: RichTextRendererComponent;
+
+declare const ListItemRichTextNode: RichTextRendererComponent;
+
+declare const ListRichTextNode: RichTextRendererComponent;
+
+declare const ParagraphRichTextNode: RichTextRendererComponent;
+
+declare const QuoteRichTextNode: RichTextRendererComponent;
+
+declare const RootRichTextNode: RichTextRendererComponent;
+
+declare const TextRichTextNode: RichTextRendererComponent;
+
+type UniformRichTextProps = {
+    parameterId: string;
+    resolveRichTextRenderer?: RenderRichTextComponentResolver;
+};
+declare const UniformRichText: vue_demi.DefineComponent<{
+    parameterId: {
+        type: StringConstructor;
+        required: true;
+    };
+    resolveRichTextRenderer: {
+        type: PropType<RenderRichTextComponentResolver | undefined>;
+        required: false;
+    };
+}, (() => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+    [key: string]: any;
+}>) | (() => null), unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+    parameterId: {
+        type: StringConstructor;
+        required: true;
+    };
+    resolveRichTextRenderer: {
+        type: PropType<RenderRichTextComponentResolver | undefined>;
+        required: false;
+    };
+}>>, {}>;
+
+type UniformRichTextNodeProps = {
+    node: RichTextNode;
+    resolveRichTextRenderer?: RenderRichTextComponentResolver;
+};
+declare const UniformRichTextNode: vue_demi.DefineComponent<{
+    node: {
+        type: PropType<RichTextNode>;
+        required: true;
+    };
+    resolveRichTextRenderer: {
+        type: PropType<RenderRichTextComponentResolver | undefined>;
+        required: false;
+    };
+}, (() => null) | (() => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+    [key: string]: any;
+}>), unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+    node: {
+        type: PropType<RichTextNode>;
+        required: true;
+    };
+    resolveRichTextRenderer: {
+        type: PropType<RenderRichTextComponentResolver | undefined>;
+        required: false;
+    };
+}>>, {}>;
+
 type UniformSlotProps = {
     /** Name of the slot to render */
     name?: string;
@@ -1494,4 +1573,4 @@ declare const globalCompositionEnhancerInjectionKey = "uniformGlobalCompositionE
  */
 declare function convertComponentToProps<T = unknown>(component: ComponentInstance): ComponentProps<T>;
 
-export { ComponentProps, DefaultNotImplementedComponent, DefaultNotImplementedComponentProps, PersonalizeComponent, ResolveRenderer, TestComponent, UniformComponent, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformSlot, UniformSlotProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, convertComponentToProps, globalCompositionEnhancerInjectionKey, useCompositionEventEffect, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };
+export { ComponentProps, DefaultNotImplementedComponent, DefaultNotImplementedComponentProps, HeadingRichTextNode, LinkRichTextNode, ListItemRichTextNode, ListRichTextNode, ParagraphRichTextNode, PersonalizeComponent, QuoteRichTextNode, RenderRichTextComponentResolver, ResolveRenderer, RichTextComponentProps, RichTextRendererComponent, RootRichTextNode, TestComponent, TextRichTextNode, UniformComponent, UniformComponentProps, UniformComposition, UniformCompositionProps, UniformRichText, UniformRichTextNode, UniformRichTextNodeProps, UniformRichTextProps, UniformSlot, UniformSlotProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, convertComponentToProps, globalCompositionEnhancerInjectionKey, useCompositionEventEffect, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.esm.js

@@ -381,6 +381,198 @@ var UniformComposition = defineComponent4({
   }
 });
 
+// src/components/UniformRichText/nodes/HeadingRichTextNode.ts
+import { h as h5 } from "vue-demi";
+var HeadingRichTextNode = (props, context) => {
+  const { tag } = props.node;
+  return h5(tag != null ? tag : "h1", {}, context.slots);
+};
+
+// src/components/UniformRichText/nodes/LinkRichTextNode.ts
+import { linkParamValueToHref } from "@uniformdev/richtext";
+import { h as h6 } from "vue-demi";
+var LinkRichTextNode = (props, context) => {
+  const { link } = props.node;
+  return h6(
+    "a",
+    {
+      href: linkParamValueToHref(link)
+    },
+    context.slots
+  );
+};
+
+// src/components/UniformRichText/nodes/ListItemRichTextNode.ts
+import { h as h7 } from "vue-demi";
+var ListItemRichTextNode = (props, context) => {
+  const { value } = props.node;
+  return h7(
+    "li",
+    {
+      value: Number.isFinite(value) && value > 0 ? value + 1 : void 0
+    },
+    context.slots
+  );
+};
+
+// src/components/UniformRichText/nodes/ListRichTextNode.ts
+import { h as h8 } from "vue-demi";
+var ListRichTextNode = (props, context) => {
+  const { tag } = props.node;
+  return h8(tag != null ? tag : "h1", {}, context.slots);
+};
+
+// src/components/UniformRichText/nodes/ParagraphRichTextNode.ts
+import { isPureDirection, isPureTextAlign } from "@uniformdev/richtext";
+import { h as h9 } from "vue-demi";
+var ParagraphRichTextNode = (props, context) => {
+  const { format, direction } = props.node;
+  return h9(
+    "p",
+    {
+      dir: isPureDirection(direction) ? direction : void 0,
+      style: isPureTextAlign(format) ? { textAlign: format } : void 0
+    },
+    context.slots
+  );
+};
+
+// src/components/UniformRichText/nodes/QuoteRichTextNode.ts
+import { h as h10 } from "vue-demi";
+var QuoteRichTextNode = (props, context) => {
+  return h10("blockquote", {}, context.slots);
+};
+
+// src/components/UniformRichText/nodes/RootRichTextNode.ts
+import { h as h11 } from "vue-demi";
+var RootRichTextNode = (props, c) => {
+  return h11(() => c.slots.default ? c.slots.default() : null);
+};
+
+// src/components/UniformRichText/nodes/TextRichTextNode.ts
+import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
+import { h as h12 } from "vue-demi";
+var TextRichTextNode = (props) => {
+  const { format, text } = props.node;
+  const tags = getRichTextTagsFromTextFormat(format);
+  return tags.length > 0 ? tags.reduceRight(
+    (children, tag) => {
+      return h12(tag, null, children);
+    },
+    {
+      default: () => text
+    }
+  ) : h12(() => text);
+};
+
+// src/components/UniformRichText/UniformRichText.ts
+import { isRichTextNode as isRichTextNode2 } from "@uniformdev/richtext";
+import { computed as computed4, defineComponent as defineComponent6, h as h16 } from "vue-demi";
+
+// src/components/UniformRichText/UniformRichTextNode.ts
+import { isRichTextNode } from "@uniformdev/richtext";
+import { defineComponent as defineComponent5, h as h15 } from "vue-demi";
+
+// src/components/UniformRichText/nodes/LinebreakRichTextNode.ts
+import { h as h13 } from "vue-demi";
+var LinebreakRichTextNode = () => {
+  return h13("br", {});
+};
+
+// src/components/UniformRichText/nodes/TabRichTextNode.ts
+import { h as h14 } from "vue-demi";
+var TabRichTextNode = () => {
+  return h14("", {}, "	");
+};
+
+// src/components/UniformRichText/UniformRichTextNode.ts
+var UniformRichTextNode = defineComponent5({
+  name: "UniformRichTextNode",
+  props: {
+    node: {
+      type: Object,
+      required: true
+    },
+    resolveRichTextRenderer: {
+      type: Function,
+      required: false
+    }
+  },
+  setup(props, context) {
+    var _a;
+    const node = props.node;
+    if (!isRichTextNode(node))
+      return () => null;
+    let NodeRenderer = node.type in context.slots ? context.slots[node.type] : (_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) => h15(
+        UniformRichTextNode,
+        { node: childNode, resolveRichTextRenderer: props.resolveRichTextRenderer },
+        context.slots
+      )
+    ) : [];
+    return () => h15(NodeRenderer, { node, children: h15(() => children) }, () => children);
+  }
+});
+var rendererMap = /* @__PURE__ */ new Map([
+  ["heading", HeadingRichTextNode],
+  ["linebreak", LinebreakRichTextNode],
+  ["link", LinkRichTextNode],
+  ["list", ListRichTextNode],
+  ["listitem", ListItemRichTextNode],
+  ["paragraph", ParagraphRichTextNode],
+  ["quote", QuoteRichTextNode],
+  ["root", RootRichTextNode],
+  ["text", TextRichTextNode],
+  ["tab", TabRichTextNode]
+]);
+var resolveRichTextDefaultRenderer = (node) => {
+  return rendererMap.get(node.type);
+};
+
+// src/components/UniformRichText/UniformRichText.ts
+var UniformRichText = defineComponent6({
+  name: "UniformRichText",
+  props: {
+    parameterId: {
+      type: String,
+      required: true
+    },
+    resolveRichTextRenderer: {
+      type: Function,
+      required: false
+    }
+  },
+  setup(props, context) {
+    var _a;
+    const { data: componentData } = useUniformCurrentComponent();
+    const value = computed4(() => {
+      var _a2;
+      const parameter = (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[props.parameterId];
+      return parameter == null ? void 0 : parameter.value;
+    });
+    const root = (_a = value.value) == null ? void 0 : _a.root;
+    if (isRichTextNode2(root)) {
+      return () => h16(
+        UniformRichTextNode,
+        {
+          node: root,
+          resolveRichTextRenderer: props.resolveRichTextRenderer
+        },
+        context.slots
+      );
+    } else {
+      return () => null;
+    }
+  }
+});
+
 // src/components/UniformSlot.ts
 import {
   CANVAS_PERSONALIZE_SLOT,
@@ -391,7 +583,7 @@ import {
   mapSlotToTestVariations
 } from "@uniformdev/canvas";
 import { Personalize, Test } from "@uniformdev/context-vue";
-import { computed as computed4, defineComponent as defineComponent5, h as h5 } from "vue-demi";
+import { computed as computed5, defineComponent as defineComponent7, h as h17 } from "vue-demi";
 
 // src/utils/convertComponentToProps.ts
 function convertComponentToProps(component) {
@@ -416,7 +608,7 @@ function normalizePropName(name) {
 }
 
 // src/components/UniformSlot.ts
-var UniformSlot = defineComponent5({
+var UniformSlot = defineComponent7({
   name: "UniformSlot",
   inheritAttrs: false,
   props: {
@@ -435,7 +627,7 @@ var UniformSlot = defineComponent5({
     if (!parentData || !resolveRenderer) {
       throw new Error("<UniformSlot /> can only be used inside a <UniformComposition />");
     }
-    const slotItems = computed4(() => {
+    const slotItems = computed5(() => {
       var _a2, _b, _c;
       if (props.name) {
         return (_b = (_a2 = parentData.slots) == null ? void 0 : _a2[props.name]) != null ? _b : [];
@@ -462,7 +654,7 @@ function renderPersonalizeComponent(component, resolveRenderer) {
   const parameters = component == null ? void 0 : component.parameters;
   const processedVariants = mapSlotToPersonalizedVariations((_a = component.slots) == null ? void 0 : _a.pz);
   const name = (_d = (_c = (_b = component.parameters) == null ? void 0 : _b.trackingEventName) == null ? void 0 : _c.value) != null ? _d : "Untitled Personalization";
-  return h5(Personalize, {
+  return h17(Personalize, {
     name,
     // TODO: Fix the `as unknown`
     component: (variant) => resolveRenderer(variant),
@@ -475,7 +667,7 @@ function renderTestComponent(component, resolveRenderer) {
   const variants = (_b = (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a.test) != null ? _b : [];
   const testName = (_e = (_d = (_c = component == null ? void 0 : component.parameters) == null ? void 0 : _c.test) == null ? void 0 : _d.value) != null ? _e : "Untitled Test";
   const finalVariants = mapSlotToTestVariations(variants);
-  return h5(Test, {
+  return h17(Test, {
     variations: finalVariants,
     name: testName,
     component: (variant) => resolveRenderer(variant)
@@ -529,13 +721,13 @@ function renderComponent({
   const resolvedComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
   if (resolvedComponent) {
     const props = convertComponentToProps(component);
-    return h5(
+    return h17(
       UniformComponent,
       { data: component, resolveRenderer },
-      () => h5(
+      () => h17(
         ContextualEditingComponentWrapper,
         { component, parentComponent, slotName, indexInSlot, slotChildrenCount },
-        { default: () => h5(resolvedComponent, props), emptyPlaceholder }
+        { default: () => h17(resolvedComponent, props), emptyPlaceholder }
       )
     );
   }
@@ -543,7 +735,7 @@ function renderComponent({
     `[canvas] found component of type '${component.type}' which the 'resolveRenderer' prop returned no component for. Nothing will be rendered. The resolveRenderer function may need to be extended to handle the new type.`,
     component
   );
-  return h5("");
+  return h17("");
 }
 
 // src/composables/useCompositionEventEffect.ts
@@ -584,8 +776,18 @@ async function useCompositionEventEffect({
 }
 export {
   DefaultNotImplementedComponent,
+  HeadingRichTextNode,
+  LinkRichTextNode,
+  ListItemRichTextNode,
+  ListRichTextNode,
+  ParagraphRichTextNode,
+  QuoteRichTextNode,
+  RootRichTextNode,
+  TextRichTextNode,
   UniformComponent,
   UniformComposition,
+  UniformRichText,
+  UniformRichTextNode,
   UniformSlot,
   convertComponentToProps,
   createUniformApiEnhancer,

package/dist/index.js

@@ -21,8 +21,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   DefaultNotImplementedComponent: () => DefaultNotImplementedComponent,
+  HeadingRichTextNode: () => HeadingRichTextNode,
+  LinkRichTextNode: () => LinkRichTextNode,
+  ListItemRichTextNode: () => ListItemRichTextNode,
+  ListRichTextNode: () => ListRichTextNode,
+  ParagraphRichTextNode: () => ParagraphRichTextNode,
+  QuoteRichTextNode: () => QuoteRichTextNode,
+  RootRichTextNode: () => RootRichTextNode,
+  TextRichTextNode: () => TextRichTextNode,
   UniformComponent: () => UniformComponent,
   UniformComposition: () => UniformComposition,
+  UniformRichText: () => UniformRichText,
+  UniformRichTextNode: () => UniformRichTextNode,
   UniformSlot: () => UniformSlot,
   convertComponentToProps: () => convertComponentToProps,
   createUniformApiEnhancer: () => import_canvas3.createUniformApiEnhancer,
@@ -389,10 +399,202 @@ var UniformComposition = (0, import_vue_demi5.defineComponent)({
   }
 });
 
+// src/components/UniformRichText/nodes/HeadingRichTextNode.ts
+var import_vue_demi6 = require("vue-demi");
+var HeadingRichTextNode = (props, context) => {
+  const { tag } = props.node;
+  return (0, import_vue_demi6.h)(tag != null ? tag : "h1", {}, context.slots);
+};
+
+// src/components/UniformRichText/nodes/LinkRichTextNode.ts
+var import_richtext = require("@uniformdev/richtext");
+var import_vue_demi7 = require("vue-demi");
+var LinkRichTextNode = (props, context) => {
+  const { link } = props.node;
+  return (0, import_vue_demi7.h)(
+    "a",
+    {
+      href: (0, import_richtext.linkParamValueToHref)(link)
+    },
+    context.slots
+  );
+};
+
+// src/components/UniformRichText/nodes/ListItemRichTextNode.ts
+var import_vue_demi8 = require("vue-demi");
+var ListItemRichTextNode = (props, context) => {
+  const { value } = props.node;
+  return (0, import_vue_demi8.h)(
+    "li",
+    {
+      value: Number.isFinite(value) && value > 0 ? value + 1 : void 0
+    },
+    context.slots
+  );
+};
+
+// src/components/UniformRichText/nodes/ListRichTextNode.ts
+var import_vue_demi9 = require("vue-demi");
+var ListRichTextNode = (props, context) => {
+  const { tag } = props.node;
+  return (0, import_vue_demi9.h)(tag != null ? tag : "h1", {}, context.slots);
+};
+
+// src/components/UniformRichText/nodes/ParagraphRichTextNode.ts
+var import_richtext2 = require("@uniformdev/richtext");
+var import_vue_demi10 = require("vue-demi");
+var ParagraphRichTextNode = (props, context) => {
+  const { format, direction } = props.node;
+  return (0, import_vue_demi10.h)(
+    "p",
+    {
+      dir: (0, import_richtext2.isPureDirection)(direction) ? direction : void 0,
+      style: (0, import_richtext2.isPureTextAlign)(format) ? { textAlign: format } : void 0
+    },
+    context.slots
+  );
+};
+
+// src/components/UniformRichText/nodes/QuoteRichTextNode.ts
+var import_vue_demi11 = require("vue-demi");
+var QuoteRichTextNode = (props, context) => {
+  return (0, import_vue_demi11.h)("blockquote", {}, context.slots);
+};
+
+// src/components/UniformRichText/nodes/RootRichTextNode.ts
+var import_vue_demi12 = require("vue-demi");
+var RootRichTextNode = (props, c) => {
+  return (0, import_vue_demi12.h)(() => c.slots.default ? c.slots.default() : null);
+};
+
+// src/components/UniformRichText/nodes/TextRichTextNode.ts
+var import_richtext3 = require("@uniformdev/richtext");
+var import_vue_demi13 = require("vue-demi");
+var TextRichTextNode = (props) => {
+  const { format, text } = props.node;
+  const tags = (0, import_richtext3.getRichTextTagsFromTextFormat)(format);
+  return tags.length > 0 ? tags.reduceRight(
+    (children, tag) => {
+      return (0, import_vue_demi13.h)(tag, null, children);
+    },
+    {
+      default: () => text
+    }
+  ) : (0, import_vue_demi13.h)(() => text);
+};
+
+// src/components/UniformRichText/UniformRichText.ts
+var import_richtext5 = require("@uniformdev/richtext");
+var import_vue_demi17 = require("vue-demi");
+
+// src/components/UniformRichText/UniformRichTextNode.ts
+var import_richtext4 = require("@uniformdev/richtext");
+var import_vue_demi16 = require("vue-demi");
+
+// src/components/UniformRichText/nodes/LinebreakRichTextNode.ts
+var import_vue_demi14 = require("vue-demi");
+var LinebreakRichTextNode = () => {
+  return (0, import_vue_demi14.h)("br", {});
+};
+
+// src/components/UniformRichText/nodes/TabRichTextNode.ts
+var import_vue_demi15 = require("vue-demi");
+var TabRichTextNode = () => {
+  return (0, import_vue_demi15.h)("", {}, "	");
+};
+
+// src/components/UniformRichText/UniformRichTextNode.ts
+var UniformRichTextNode = (0, import_vue_demi16.defineComponent)({
+  name: "UniformRichTextNode",
+  props: {
+    node: {
+      type: Object,
+      required: true
+    },
+    resolveRichTextRenderer: {
+      type: Function,
+      required: false
+    }
+  },
+  setup(props, context) {
+    var _a;
+    const node = props.node;
+    if (!(0, import_richtext4.isRichTextNode)(node))
+      return () => null;
+    let NodeRenderer = node.type in context.slots ? context.slots[node.type] : (_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) => (0, import_vue_demi16.h)(
+        UniformRichTextNode,
+        { node: childNode, resolveRichTextRenderer: props.resolveRichTextRenderer },
+        context.slots
+      )
+    ) : [];
+    return () => (0, import_vue_demi16.h)(NodeRenderer, { node, children: (0, import_vue_demi16.h)(() => children) }, () => children);
+  }
+});
+var rendererMap = /* @__PURE__ */ new Map([
+  ["heading", HeadingRichTextNode],
+  ["linebreak", LinebreakRichTextNode],
+  ["link", LinkRichTextNode],
+  ["list", ListRichTextNode],
+  ["listitem", ListItemRichTextNode],
+  ["paragraph", ParagraphRichTextNode],
+  ["quote", QuoteRichTextNode],
+  ["root", RootRichTextNode],
+  ["text", TextRichTextNode],
+  ["tab", TabRichTextNode]
+]);
+var resolveRichTextDefaultRenderer = (node) => {
+  return rendererMap.get(node.type);
+};
+
+// src/components/UniformRichText/UniformRichText.ts
+var UniformRichText = (0, import_vue_demi17.defineComponent)({
+  name: "UniformRichText",
+  props: {
+    parameterId: {
+      type: String,
+      required: true
+    },
+    resolveRichTextRenderer: {
+      type: Function,
+      required: false
+    }
+  },
+  setup(props, context) {
+    var _a;
+    const { data: componentData } = useUniformCurrentComponent();
+    const value = (0, import_vue_demi17.computed)(() => {
+      var _a2;
+      const parameter = (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[props.parameterId];
+      return parameter == null ? void 0 : parameter.value;
+    });
+    const root = (_a = value.value) == null ? void 0 : _a.root;
+    if ((0, import_richtext5.isRichTextNode)(root)) {
+      return () => (0, import_vue_demi17.h)(
+        UniformRichTextNode,
+        {
+          node: root,
+          resolveRichTextRenderer: props.resolveRichTextRenderer
+        },
+        context.slots
+      );
+    } else {
+      return () => null;
+    }
+  }
+});
+
 // src/components/UniformSlot.ts
 var import_canvas5 = require("@uniformdev/canvas");
 var import_context_vue2 = require("@uniformdev/context-vue");
-var import_vue_demi6 = require("vue-demi");
+var import_vue_demi18 = require("vue-demi");
 
 // src/utils/convertComponentToProps.ts
 function convertComponentToProps(component) {
@@ -417,7 +619,7 @@ function normalizePropName(name) {
 }
 
 // src/components/UniformSlot.ts
-var UniformSlot = (0, import_vue_demi6.defineComponent)({
+var UniformSlot = (0, import_vue_demi18.defineComponent)({
   name: "UniformSlot",
   inheritAttrs: false,
   props: {
@@ -436,7 +638,7 @@ var UniformSlot = (0, import_vue_demi6.defineComponent)({
     if (!parentData || !resolveRenderer) {
       throw new Error("<UniformSlot /> can only be used inside a <UniformComposition />");
     }
-    const slotItems = (0, import_vue_demi6.computed)(() => {
+    const slotItems = (0, import_vue_demi18.computed)(() => {
       var _a2, _b, _c;
       if (props.name) {
         return (_b = (_a2 = parentData.slots) == null ? void 0 : _a2[props.name]) != null ? _b : [];
@@ -463,7 +665,7 @@ function renderPersonalizeComponent(component, resolveRenderer) {
   const parameters = component == null ? void 0 : component.parameters;
   const processedVariants = (0, import_canvas5.mapSlotToPersonalizedVariations)((_a = component.slots) == null ? void 0 : _a.pz);
   const name = (_d = (_c = (_b = component.parameters) == null ? void 0 : _b.trackingEventName) == null ? void 0 : _c.value) != null ? _d : "Untitled Personalization";
-  return (0, import_vue_demi6.h)(import_context_vue2.Personalize, {
+  return (0, import_vue_demi18.h)(import_context_vue2.Personalize, {
     name,
     // TODO: Fix the `as unknown`
     component: (variant) => resolveRenderer(variant),
@@ -476,7 +678,7 @@ function renderTestComponent(component, resolveRenderer) {
   const variants = (_b = (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a.test) != null ? _b : [];
   const testName = (_e = (_d = (_c = component == null ? void 0 : component.parameters) == null ? void 0 : _c.test) == null ? void 0 : _d.value) != null ? _e : "Untitled Test";
   const finalVariants = (0, import_canvas5.mapSlotToTestVariations)(variants);
-  return (0, import_vue_demi6.h)(import_context_vue2.Test, {
+  return (0, import_vue_demi18.h)(import_context_vue2.Test, {
     variations: finalVariants,
     name: testName,
     component: (variant) => resolveRenderer(variant)
@@ -530,13 +732,13 @@ function renderComponent({
   const resolvedComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
   if (resolvedComponent) {
     const props = convertComponentToProps(component);
-    return (0, import_vue_demi6.h)(
+    return (0, import_vue_demi18.h)(
       UniformComponent,
       { data: component, resolveRenderer },
-      () => (0, import_vue_demi6.h)(
+      () => (0, import_vue_demi18.h)(
         ContextualEditingComponentWrapper,
         { component, parentComponent, slotName, indexInSlot, slotChildrenCount },
-        { default: () => (0, import_vue_demi6.h)(resolvedComponent, props), emptyPlaceholder }
+        { default: () => (0, import_vue_demi18.h)(resolvedComponent, props), emptyPlaceholder }
       )
     );
   }
@@ -544,12 +746,12 @@ function renderComponent({
     `[canvas] found component of type '${component.type}' which the 'resolveRenderer' prop returned no component for. Nothing will be rendered. The resolveRenderer function may need to be extended to handle the new type.`,
     component
   );
-  return (0, import_vue_demi6.h)("");
+  return (0, import_vue_demi18.h)("");
 }
 
 // src/composables/useCompositionEventEffect.ts
 var import_canvas6 = require("@uniformdev/canvas");
-var import_vue_demi7 = require("vue-demi");
+var import_vue_demi19 = require("vue-demi");
 async function useCompositionEventEffect({
   enabled,
   projectId,
@@ -557,7 +759,7 @@ async function useCompositionEventEffect({
   effect
 }) {
   let unsubscribe;
-  (0, import_vue_demi7.watch)(
+  (0, import_vue_demi19.watch)(
     [() => enabled, () => compositionIdRef.value, () => projectId],
     async () => {
       unsubscribe == null ? void 0 : unsubscribe();
@@ -582,8 +784,18 @@ async function useCompositionEventEffect({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DefaultNotImplementedComponent,
+  HeadingRichTextNode,
+  LinkRichTextNode,
+  ListItemRichTextNode,
+  ListRichTextNode,
+  ParagraphRichTextNode,
+  QuoteRichTextNode,
+  RootRichTextNode,
+  TextRichTextNode,
   UniformComponent,
   UniformComposition,
+  UniformRichText,
+  UniformRichTextNode,
   UniformSlot,
   convertComponentToProps,
   createUniformApiEnhancer,

package/dist/index.mjs

@@ -381,6 +381,198 @@ var UniformComposition = defineComponent4({
   }
 });
 
+// src/components/UniformRichText/nodes/HeadingRichTextNode.ts
+import { h as h5 } from "vue-demi";
+var HeadingRichTextNode = (props, context) => {
+  const { tag } = props.node;
+  return h5(tag != null ? tag : "h1", {}, context.slots);
+};
+
+// src/components/UniformRichText/nodes/LinkRichTextNode.ts
+import { linkParamValueToHref } from "@uniformdev/richtext";
+import { h as h6 } from "vue-demi";
+var LinkRichTextNode = (props, context) => {
+  const { link } = props.node;
+  return h6(
+    "a",
+    {
+      href: linkParamValueToHref(link)
+    },
+    context.slots
+  );
+};
+
+// src/components/UniformRichText/nodes/ListItemRichTextNode.ts
+import { h as h7 } from "vue-demi";
+var ListItemRichTextNode = (props, context) => {
+  const { value } = props.node;
+  return h7(
+    "li",
+    {
+      value: Number.isFinite(value) && value > 0 ? value + 1 : void 0
+    },
+    context.slots
+  );
+};
+
+// src/components/UniformRichText/nodes/ListRichTextNode.ts
+import { h as h8 } from "vue-demi";
+var ListRichTextNode = (props, context) => {
+  const { tag } = props.node;
+  return h8(tag != null ? tag : "h1", {}, context.slots);
+};
+
+// src/components/UniformRichText/nodes/ParagraphRichTextNode.ts
+import { isPureDirection, isPureTextAlign } from "@uniformdev/richtext";
+import { h as h9 } from "vue-demi";
+var ParagraphRichTextNode = (props, context) => {
+  const { format, direction } = props.node;
+  return h9(
+    "p",
+    {
+      dir: isPureDirection(direction) ? direction : void 0,
+      style: isPureTextAlign(format) ? { textAlign: format } : void 0
+    },
+    context.slots
+  );
+};
+
+// src/components/UniformRichText/nodes/QuoteRichTextNode.ts
+import { h as h10 } from "vue-demi";
+var QuoteRichTextNode = (props, context) => {
+  return h10("blockquote", {}, context.slots);
+};
+
+// src/components/UniformRichText/nodes/RootRichTextNode.ts
+import { h as h11 } from "vue-demi";
+var RootRichTextNode = (props, c) => {
+  return h11(() => c.slots.default ? c.slots.default() : null);
+};
+
+// src/components/UniformRichText/nodes/TextRichTextNode.ts
+import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
+import { h as h12 } from "vue-demi";
+var TextRichTextNode = (props) => {
+  const { format, text } = props.node;
+  const tags = getRichTextTagsFromTextFormat(format);
+  return tags.length > 0 ? tags.reduceRight(
+    (children, tag) => {
+      return h12(tag, null, children);
+    },
+    {
+      default: () => text
+    }
+  ) : h12(() => text);
+};
+
+// src/components/UniformRichText/UniformRichText.ts
+import { isRichTextNode as isRichTextNode2 } from "@uniformdev/richtext";
+import { computed as computed4, defineComponent as defineComponent6, h as h16 } from "vue-demi";
+
+// src/components/UniformRichText/UniformRichTextNode.ts
+import { isRichTextNode } from "@uniformdev/richtext";
+import { defineComponent as defineComponent5, h as h15 } from "vue-demi";
+
+// src/components/UniformRichText/nodes/LinebreakRichTextNode.ts
+import { h as h13 } from "vue-demi";
+var LinebreakRichTextNode = () => {
+  return h13("br", {});
+};
+
+// src/components/UniformRichText/nodes/TabRichTextNode.ts
+import { h as h14 } from "vue-demi";
+var TabRichTextNode = () => {
+  return h14("", {}, "	");
+};
+
+// src/components/UniformRichText/UniformRichTextNode.ts
+var UniformRichTextNode = defineComponent5({
+  name: "UniformRichTextNode",
+  props: {
+    node: {
+      type: Object,
+      required: true
+    },
+    resolveRichTextRenderer: {
+      type: Function,
+      required: false
+    }
+  },
+  setup(props, context) {
+    var _a;
+    const node = props.node;
+    if (!isRichTextNode(node))
+      return () => null;
+    let NodeRenderer = node.type in context.slots ? context.slots[node.type] : (_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) => h15(
+        UniformRichTextNode,
+        { node: childNode, resolveRichTextRenderer: props.resolveRichTextRenderer },
+        context.slots
+      )
+    ) : [];
+    return () => h15(NodeRenderer, { node, children: h15(() => children) }, () => children);
+  }
+});
+var rendererMap = /* @__PURE__ */ new Map([
+  ["heading", HeadingRichTextNode],
+  ["linebreak", LinebreakRichTextNode],
+  ["link", LinkRichTextNode],
+  ["list", ListRichTextNode],
+  ["listitem", ListItemRichTextNode],
+  ["paragraph", ParagraphRichTextNode],
+  ["quote", QuoteRichTextNode],
+  ["root", RootRichTextNode],
+  ["text", TextRichTextNode],
+  ["tab", TabRichTextNode]
+]);
+var resolveRichTextDefaultRenderer = (node) => {
+  return rendererMap.get(node.type);
+};
+
+// src/components/UniformRichText/UniformRichText.ts
+var UniformRichText = defineComponent6({
+  name: "UniformRichText",
+  props: {
+    parameterId: {
+      type: String,
+      required: true
+    },
+    resolveRichTextRenderer: {
+      type: Function,
+      required: false
+    }
+  },
+  setup(props, context) {
+    var _a;
+    const { data: componentData } = useUniformCurrentComponent();
+    const value = computed4(() => {
+      var _a2;
+      const parameter = (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[props.parameterId];
+      return parameter == null ? void 0 : parameter.value;
+    });
+    const root = (_a = value.value) == null ? void 0 : _a.root;
+    if (isRichTextNode2(root)) {
+      return () => h16(
+        UniformRichTextNode,
+        {
+          node: root,
+          resolveRichTextRenderer: props.resolveRichTextRenderer
+        },
+        context.slots
+      );
+    } else {
+      return () => null;
+    }
+  }
+});
+
 // src/components/UniformSlot.ts
 import {
   CANVAS_PERSONALIZE_SLOT,
@@ -391,7 +583,7 @@ import {
   mapSlotToTestVariations
 } from "@uniformdev/canvas";
 import { Personalize, Test } from "@uniformdev/context-vue";
-import { computed as computed4, defineComponent as defineComponent5, h as h5 } from "vue-demi";
+import { computed as computed5, defineComponent as defineComponent7, h as h17 } from "vue-demi";
 
 // src/utils/convertComponentToProps.ts
 function convertComponentToProps(component) {
@@ -416,7 +608,7 @@ function normalizePropName(name) {
 }
 
 // src/components/UniformSlot.ts
-var UniformSlot = defineComponent5({
+var UniformSlot = defineComponent7({
   name: "UniformSlot",
   inheritAttrs: false,
   props: {
@@ -435,7 +627,7 @@ var UniformSlot = defineComponent5({
     if (!parentData || !resolveRenderer) {
       throw new Error("<UniformSlot /> can only be used inside a <UniformComposition />");
     }
-    const slotItems = computed4(() => {
+    const slotItems = computed5(() => {
       var _a2, _b, _c;
       if (props.name) {
         return (_b = (_a2 = parentData.slots) == null ? void 0 : _a2[props.name]) != null ? _b : [];
@@ -462,7 +654,7 @@ function renderPersonalizeComponent(component, resolveRenderer) {
   const parameters = component == null ? void 0 : component.parameters;
   const processedVariants = mapSlotToPersonalizedVariations((_a = component.slots) == null ? void 0 : _a.pz);
   const name = (_d = (_c = (_b = component.parameters) == null ? void 0 : _b.trackingEventName) == null ? void 0 : _c.value) != null ? _d : "Untitled Personalization";
-  return h5(Personalize, {
+  return h17(Personalize, {
     name,
     // TODO: Fix the `as unknown`
     component: (variant) => resolveRenderer(variant),
@@ -475,7 +667,7 @@ function renderTestComponent(component, resolveRenderer) {
   const variants = (_b = (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a.test) != null ? _b : [];
   const testName = (_e = (_d = (_c = component == null ? void 0 : component.parameters) == null ? void 0 : _c.test) == null ? void 0 : _d.value) != null ? _e : "Untitled Test";
   const finalVariants = mapSlotToTestVariations(variants);
-  return h5(Test, {
+  return h17(Test, {
     variations: finalVariants,
     name: testName,
     component: (variant) => resolveRenderer(variant)
@@ -529,13 +721,13 @@ function renderComponent({
   const resolvedComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
   if (resolvedComponent) {
     const props = convertComponentToProps(component);
-    return h5(
+    return h17(
       UniformComponent,
       { data: component, resolveRenderer },
-      () => h5(
+      () => h17(
         ContextualEditingComponentWrapper,
         { component, parentComponent, slotName, indexInSlot, slotChildrenCount },
-        { default: () => h5(resolvedComponent, props), emptyPlaceholder }
+        { default: () => h17(resolvedComponent, props), emptyPlaceholder }
       )
     );
   }
@@ -543,7 +735,7 @@ function renderComponent({
     `[canvas] found component of type '${component.type}' which the 'resolveRenderer' prop returned no component for. Nothing will be rendered. The resolveRenderer function may need to be extended to handle the new type.`,
     component
   );
-  return h5("");
+  return h17("");
 }
 
 // src/composables/useCompositionEventEffect.ts
@@ -584,8 +776,18 @@ async function useCompositionEventEffect({
 }
 export {
   DefaultNotImplementedComponent,
+  HeadingRichTextNode,
+  LinkRichTextNode,
+  ListItemRichTextNode,
+  ListRichTextNode,
+  ParagraphRichTextNode,
+  QuoteRichTextNode,
+  RootRichTextNode,
+  TextRichTextNode,
   UniformComponent,
   UniformComposition,
+  UniformRichText,
+  UniformRichTextNode,
   UniformSlot,
   convertComponentToProps,
   createUniformApiEnhancer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-vue",
-  "version": "19.13.0",
+  "version": "19.14.1-alpha.1+597b21eaa",
   "description": "Vue SDK for Uniform Canvas",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -23,9 +23,9 @@
     "document": "api-extractor run --local"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.13.0",
-    "@uniformdev/context-vue": "19.13.0",
-    "@vue/test-utils": "2.3.2",
+    "@uniformdev/canvas": "19.14.1-alpha.1+597b21eaa",
+    "@uniformdev/context-vue": "19.14.1-alpha.1+597b21eaa",
+    "@uniformdev/richtext": "19.14.1-alpha.1+597b21eaa",
     "vue-demi": "^0.14.0"
   },
   "peerDependencies": {
@@ -41,6 +41,8 @@
     "@testing-library/vue": "7.0.0",
     "@types/uuid": "9.0.1",
     "@vue/server-test-utils": "1.3.0",
+    "@vue/test-utils": "2.3.2",
+    "@vue/vue3-jest": "^29.2.4",
     "vue": "3.2.45",
     "vue-server-renderer": "2.7.14",
     "vue-template-compiler": "2.7.14"
@@ -62,5 +64,5 @@
     "last 2 versions",
     "not dead"
   ],
-  "gitHead": "1670a0e2475a7a98745ea737cd3b2b09649fe1a1"
+  "gitHead": "597b21eaa0a61271b8951de1d443019868f7699c"
 }