@uniformdev/canvas-vue 19.198.3-alpha.3 → 19.199.0

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 // src/components/DefaultNotImplementedComponent.ts
-import { CANVAS_LOCALIZATION_TYPE } from "@uniformdev/canvas";
+import { CANVAS_LOCALIZATION_TYPE, EMPTY_COMPOSITION } from "@uniformdev/canvas";
 import { defineComponent, h } from "vue-demi";
 var wrapperStyles = {
   borderLeft: "4px solid #e42535",
@@ -21,8 +21,25 @@ var DefaultNotImplementedComponent = defineComponent({
   setup(props, { attrs }) {
     var _a;
     const componentType = (_a = props.component) == null ? void 0 : _a.type;
+    if (componentType === EMPTY_COMPOSITION.type) {
+      return () => h("div", {}, [
+        h("style", {
+          innerHTML: `@keyframes _uniformDelayedFadeIn { 0%,75% { opacity: 0; } to { opacity: 1; } }`
+        }),
+        h("p", { style: { animation: "_uniformDelayedFadeIn 3s" } }, [
+          h("span", {}, "This component only works inside Uniform Canvas editor."),
+          h("br"),
+          h("span", {}, "If you think this is an error, try "),
+          h(
+            "a",
+            { href: "", style: { fontWeight: "bolder", textDecoration: "underline" } },
+            "reloading the page"
+          )
+        ])
+      ]);
+    }
     if (componentType === CANVAS_LOCALIZATION_TYPE) {
-      h("div", { key: "content", style: wrapperStyles }, [
+      return () => h("div", { key: "content", style: wrapperStyles }, [
         h("p", [
           `Seems like localization is not enabled in your application. Please read our documentation on how to `,
           h(
@@ -149,9 +166,9 @@ var UniformComponent_default = UniformComponent;
 
 // src/components/UniformComposition.ts
 import {
-  computed as computed3,
-  defineComponent as defineComponent4,
-  h as h4,
+  computed as computed4,
+  defineComponent as defineComponent5,
+  h as h5,
   inject as inject2,
   provide as provide2,
   shallowRef
@@ -161,7 +178,7 @@ import {
 import {
   createCanvasChannel,
   createUniformApiEnhancer,
-  EMPTY_COMPOSITION,
+  EMPTY_COMPOSITION as EMPTY_COMPOSITION2,
   IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID,
   IN_CONTEXT_EDITOR_QUERY_STRING_PARAM,
   isAllowedReferrer,
@@ -197,8 +214,8 @@ var useUniformContextualEditing = ({
       return (_a = initialCompositionValue == null ? void 0 : initialCompositionValue.value) == null ? void 0 : _a._id;
     }],
     (_newValue, _oldValue, onCleanup) => {
-      var _a, _b, _c, _d, _e, _f;
-      if (((_a = contextualComposition.value) == null ? void 0 : _a._id) && ((_b = initialCompositionValue == null ? void 0 : initialCompositionValue.value) == null ? void 0 : _b._id) !== EMPTY_COMPOSITION._id && ((_c = initialCompositionValue == null ? void 0 : initialCompositionValue.value) == null ? void 0 : _c._id) !== ((_d = contextualComposition.value) == null ? void 0 : _d._id)) {
+      var _a, _b, _c, _d, _e, _f, _g;
+      if (((_a = contextualComposition.value) == null ? void 0 : _a._id) && ((_b = initialCompositionValue == null ? void 0 : initialCompositionValue.value) == null ? void 0 : _b._id) !== EMPTY_COMPOSITION2._id && ((_c = initialCompositionValue == null ? void 0 : initialCompositionValue.value) == null ? void 0 : _c._id) !== ((_d = contextualComposition.value) == null ? void 0 : _d._id)) {
         contextualComposition.value = void 0;
         return;
       }
@@ -214,8 +231,11 @@ var useUniformContextualEditing = ({
         }
         const enhancedComposition = await enhance(message);
         contextualComposition.value = enhancedComposition;
+        latestEventTimeStamp = message.eventTimestamp;
       });
-      registeredCompositionIds.add((_f = initialCompositionValue == null ? void 0 : initialCompositionValue.value) == null ? void 0 : _f._id);
+      if (((_f = initialCompositionValue == null ? void 0 : initialCompositionValue.value) == null ? void 0 : _f._id) !== EMPTY_COMPOSITION2._id) {
+        registeredCompositionIds.add((_g = initialCompositionValue == null ? void 0 : initialCompositionValue.value) == null ? void 0 : _g._id);
+      }
       onCleanup(() => {
         var _a2;
         unsubscribe();
@@ -326,12 +346,177 @@ var ContextualEditingComponentWrapper = defineComponent3({
   }
 });
 
+// src/components/UniformSlot.ts
+import {
+  CANVAS_PERSONALIZE_SLOT,
+  CANVAS_PERSONALIZE_TYPE,
+  CANVAS_TEST_SLOT,
+  CANVAS_TEST_TYPE,
+  mapSlotToPersonalizedVariations,
+  mapSlotToTestVariations
+} from "@uniformdev/canvas";
+import { Personalize, Test } from "@uniformdev/context-vue";
+import { computed as computed3, defineComponent as defineComponent4, h as h4 } from "vue-demi";
+
+// src/helpers/convertComponentToProps.ts
+function convertComponentToProps(component) {
+  var _a;
+  const parameters = (_a = component.parameters) != null ? _a : {};
+  const flatParams = Object.entries(parameters).reduce(
+    (props, [key, { value }]) => ({
+      ...props,
+      [normalizePropName(key)]: value
+    }),
+    {}
+  );
+  const renderComponentProps = {
+    ...flatParams,
+    ...component.data,
+    component
+  };
+  return renderComponentProps;
+}
+function normalizePropName(name) {
+  return name.replace("$", "");
+}
+
+// src/components/UniformSlot.ts
+var UniformSlot = defineComponent4({
+  name: "UniformSlot",
+  inheritAttrs: false,
+  props: {
+    name: {
+      type: String
+    },
+    resolveRenderer: {
+      type: Function
+    }
+  },
+  setup(props, context) {
+    var _a;
+    const { data: parentData, resolveRenderer: parentResolveRenderer } = useUniformCurrentComponent();
+    const resolveRenderer = (_a = props.resolveRenderer) != null ? _a : parentResolveRenderer;
+    const emptyPlaceholder = context.slots.emptyPlaceholder;
+    if (!parentData || !resolveRenderer) {
+      throw new Error("<UniformSlot /> can only be used inside a <UniformComposition />");
+    }
+    const slotItems = computed3(() => {
+      var _a2, _b, _c;
+      if (props.name) {
+        return (_b = (_a2 = parentData.slots) == null ? void 0 : _a2[props.name]) != null ? _b : [];
+      }
+      return Object.values((_c = parentData.slots) != null ? _c : {}).flat();
+    });
+    const childrenToRender = slotItems.value.map((component, index) => {
+      const child = renderComponent({
+        component,
+        resolveRenderer,
+        indexInSlot: index,
+        slotName: props.name,
+        parentComponent: parentData,
+        slotChildrenCount: slotItems.value.length,
+        emptyPlaceholder
+      });
+      return context.slots.default ? context.slots.default({ child, component }) : child;
+    });
+    return () => childrenToRender;
+  }
+});
+function renderPersonalizeComponent(component, resolveRenderer) {
+  var _a, _b, _c, _d, _e, _f;
+  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 h4(Personalize, {
+    name,
+    // TODO: Fix the `as unknown`
+    component: (variant) => resolveRenderer(variant),
+    variations: processedVariants,
+    count: Number((_f = (_e = parameters == null ? void 0 : parameters.count) == null ? void 0 : _e.value) != null ? _f : 1)
+  });
+}
+function renderTestComponent(component, resolveRenderer) {
+  var _a, _b, _c, _d, _e;
+  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 h4(Test, {
+    variations: finalVariants,
+    name: testName,
+    component: (variant) => resolveRenderer(variant)
+  });
+}
+function renderComponent({
+  component,
+  resolveRenderer,
+  indexInSlot,
+  slotName,
+  parentComponent,
+  slotChildrenCount,
+  emptyPlaceholder
+}) {
+  if (component.type === CANVAS_TEST_TYPE) {
+    return renderTestComponent(
+      component,
+      (variantComponent) => {
+        var _a, _b;
+        return renderComponent({
+          component: variantComponent,
+          resolveRenderer,
+          parentComponent: component,
+          slotName: CANVAS_TEST_SLOT,
+          slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[CANVAS_TEST_SLOT].length,
+          indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[CANVAS_TEST_SLOT].findIndex(
+            ({ _id }) => variantComponent._id === _id
+          )
+        });
+      }
+    );
+  }
+  if (component.type === CANVAS_PERSONALIZE_TYPE) {
+    return renderPersonalizeComponent(
+      component,
+      (variantComponent) => {
+        var _a, _b;
+        return renderComponent({
+          component: variantComponent,
+          resolveRenderer,
+          parentComponent: component,
+          slotName: CANVAS_PERSONALIZE_SLOT,
+          slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[CANVAS_PERSONALIZE_SLOT].length,
+          indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[CANVAS_PERSONALIZE_SLOT].findIndex(
+            ({ _id }) => variantComponent._id === _id
+          )
+        });
+      }
+    );
+  }
+  const resolvedComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
+  if (resolvedComponent) {
+    const props = convertComponentToProps(component);
+    return h4(
+      UniformComponent,
+      { data: component, resolveRenderer },
+      () => h4(
+        ContextualEditingComponentWrapper,
+        { component, parentComponent, slotName, indexInSlot, slotChildrenCount },
+        { default: () => h4(resolvedComponent, props), emptyPlaceholder }
+      )
+    );
+  }
+  console.warn(
+    `[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 h4("");
+}
+
 // src/components/UniformComposition.ts
 var uniformCurrentCompositionInjectionKey = "uniformCurrentComposition";
 var useUniformCurrentComposition = () => {
   return inject2(uniformCurrentCompositionInjectionKey, {});
 };
-var UniformComposition = defineComponent4({
+var UniformComposition = defineComponent5({
   name: "UniformComposition",
   inheritAttrs: false,
   props: {
@@ -350,7 +535,7 @@ var UniformComposition = defineComponent4({
     }
   },
   setup(props, context) {
-    var _a;
+    var _a, _b;
     const inheritedEnhancer = inject2(
       globalCompositionEnhancerInjectionKey,
       (composition2) => composition2
@@ -366,14 +551,28 @@ var UniformComposition = defineComponent4({
       resolveRenderer: props.resolveRenderer,
       isContextualEditing
     });
-    const compositionKey = computed3(() => {
+    const compositionKey = computed4(() => {
       return JSON.stringify(composition.value);
     });
-    return () => h4(
+    const canRenderComposition = composition.value && ((_b = props.resolveRenderer) == null ? void 0 : _b.call(props, composition.value));
+    const hasNoChildren = !context.slots.default;
+    if (canRenderComposition && hasNoChildren) {
+      return () => h5(
+        ContextualEditingComponentWrapper,
+        { component: composition.value, key: compositionKey.value },
+        {
+          default: () => renderComponent({
+            component: composition.value,
+            resolveRenderer: props.resolveRenderer
+          })
+        }
+      );
+    }
+    return () => h5(
       ContextualEditingComponentWrapper,
       { component: composition.value, key: compositionKey.value },
       {
-        default: () => h4(
+        default: () => h5(
           UniformComponent_default,
           {
             data: composition.value,
@@ -389,34 +588,34 @@ var UniformComposition = defineComponent4({
 var UniformComposition_default = UniformComposition;
 
 // src/components/UniformPlayground.ts
-import { EMPTY_COMPOSITION as EMPTY_COMPOSITION2 } from "@uniformdev/canvas";
-import { defineComponent as defineComponent5, h as h5 } from "vue-demi";
-var UniformPlayground = defineComponent5({
+import { EMPTY_COMPOSITION as EMPTY_COMPOSITION3 } from "@uniformdev/canvas";
+import { defineComponent as defineComponent6, h as h6 } from "vue-demi";
+var UniformPlayground = defineComponent6({
   name: "UniformPlayground",
   inheritAttrs: false,
   props: {
     resolveRenderer: {
-      type: Object
+      type: Function
     }
   },
   setup(props) {
-    return () => h5(UniformComposition_default, { data: EMPTY_COMPOSITION2, resolveRenderer: props.resolveRenderer });
+    return () => h6(UniformComposition_default, { data: EMPTY_COMPOSITION3, resolveRenderer: props.resolveRenderer });
   }
 });
 
 // src/components/UniformRichText/nodes/HeadingRichTextNode.ts
-import { h as h6 } from "vue-demi";
+import { h as h7 } from "vue-demi";
 var HeadingRichTextNode = (props, context) => {
   const { tag } = props.node;
-  return h6(tag != null ? tag : "h1", {}, context.slots);
+  return h7(tag != null ? tag : "h1", {}, context.slots);
 };
 
 // src/components/UniformRichText/nodes/LinkRichTextNode.ts
 import { linkParamValueToHref } from "@uniformdev/richtext";
-import { h as h7 } from "vue-demi";
+import { h as h8 } from "vue-demi";
 var LinkRichTextNode = (props, context) => {
   const { link } = props.node;
-  return h7(
+  return h8(
     "a",
     {
       href: linkParamValueToHref(link)
@@ -426,10 +625,10 @@ var LinkRichTextNode = (props, context) => {
 };
 
 // src/components/UniformRichText/nodes/ListItemRichTextNode.ts
-import { h as h8 } from "vue-demi";
+import { h as h9 } from "vue-demi";
 var ListItemRichTextNode = (props, context) => {
   const { value } = props.node;
-  return h8(
+  return h9(
     "li",
     {
       value: Number.isFinite(value) && value > 0 ? value : void 0
@@ -439,18 +638,18 @@ var ListItemRichTextNode = (props, context) => {
 };
 
 // src/components/UniformRichText/nodes/ListRichTextNode.ts
-import { h as h9 } from "vue-demi";
+import { h as h10 } from "vue-demi";
 var ListRichTextNode = (props, context) => {
   const { tag } = props.node;
-  return h9(tag != null ? tag : "h1", {}, context.slots);
+  return h10(tag != null ? tag : "h1", {}, context.slots);
 };
 
 // src/components/UniformRichText/nodes/ParagraphRichTextNode.ts
 import { isPureDirection, isPureTextAlign } from "@uniformdev/richtext";
-import { h as h10 } from "vue-demi";
+import { h as h11 } from "vue-demi";
 var ParagraphRichTextNode = (props, context) => {
   const { format, direction } = props.node;
-  return h10(
+  return h11(
     "p",
     {
       dir: isPureDirection(direction) ? direction : void 0,
@@ -461,82 +660,87 @@ var ParagraphRichTextNode = (props, context) => {
 };
 
 // src/components/UniformRichText/nodes/QuoteRichTextNode.ts
-import { h as h11 } from "vue-demi";
+import { h as h12 } from "vue-demi";
 var QuoteRichTextNode = (_, context) => {
-  return h11("blockquote", {}, context.slots);
+  return h12("blockquote", {}, context.slots);
 };
 
 // src/components/UniformRichText/nodes/RootRichTextNode.ts
-import { h as h12 } from "vue-demi";
+import { h as h13 } from "vue-demi";
 var RootRichTextNode = (props, c) => {
-  return h12(() => c.slots.default ? c.slots.default() : null);
+  return h13(() => c.slots.default ? c.slots.default() : null);
 };
 
 // src/components/UniformRichText/nodes/TableCellRichTextNode.ts
 import { getRichTextTagFromTableCellHeaderState } from "@uniformdev/richtext";
-import { h as h13 } from "vue-demi";
+import { h as h14 } from "vue-demi";
 var TableCellRichTextNode = (props, context) => {
   const { headerState } = props.node;
   const tag = getRichTextTagFromTableCellHeaderState(headerState);
-  return h13(tag, {}, context.slots);
+  return h14(tag, {}, context.slots);
 };
 
 // src/components/UniformRichText/nodes/TableRichTextNode.ts
-import { h as h14 } from "vue-demi";
+import { h as h15 } from "vue-demi";
 var TableRichTextNode = (_, context) => {
-  return h14("table", {}, h14("tbody", {}, context.slots));
+  return h15("table", {}, h15("tbody", {}, context.slots));
 };
 
 // src/components/UniformRichText/nodes/TableRowRichTextNode.ts
-import { h as h15 } from "vue-demi";
+import { h as h16 } from "vue-demi";
 var TableRowRichTextNode = (_, context) => {
-  return h15("tr", {}, context.slots);
+  return h16("tr", {}, context.slots);
 };
 
 // src/components/UniformRichText/nodes/TextRichTextNode.ts
 import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
-import { h as h16 } from "vue-demi";
+import { h as h17 } from "vue-demi";
 var TextRichTextNode = (props) => {
   const { format, text } = props.node;
   const tags = getRichTextTagsFromTextFormat(format);
   return tags.length > 0 ? tags.reduceRight(
     (children, tag) => {
-      return h16(tag, null, children);
+      return h17(tag, null, children);
     },
     {
       default: () => text
     }
-  ) : h16(() => text);
+  ) : h17(() => text);
 };
 
 // src/components/UniformRichText/UniformRichText.ts
+import {
+  ATTRIBUTE_COMPONENT_ID,
+  ATTRIBUTE_PARAMETER_ID,
+  ATTRIBUTE_PARAMETER_TYPE
+} from "@uniformdev/canvas";
 import { isRichTextNode as isRichTextNode2, isRichTextValueConsideredEmpty } from "@uniformdev/richtext";
-import { computed as computed4, defineComponent as defineComponent7, h as h21 } from "vue-demi";
+import { computed as computed5, defineComponent as defineComponent8, h as h22 } from "vue-demi";
 
 // src/components/UniformRichText/UniformRichTextNode.ts
 import { isRichTextNode } from "@uniformdev/richtext";
-import { defineComponent as defineComponent6, h as h20 } from "vue-demi";
+import { defineComponent as defineComponent7, h as h21 } from "vue-demi";
 
 // src/components/UniformRichText/nodes/CodeRichTextNode.ts
-import { h as h17 } from "vue-demi";
+import { h as h18 } from "vue-demi";
 var CodeRichTextNode = (_, context) => {
-  return h17("pre", {}, h17("code", {}, context.slots));
+  return h18("pre", {}, h18("code", {}, context.slots));
 };
 
 // src/components/UniformRichText/nodes/LinebreakRichTextNode.ts
-import { h as h18 } from "vue-demi";
+import { h as h19 } from "vue-demi";
 var LinebreakRichTextNode = () => {
-  return h18("br", {});
+  return h19("br", {});
 };
 
 // src/components/UniformRichText/nodes/TabRichTextNode.ts
-import { h as h19 } from "vue-demi";
+import { h as h20 } from "vue-demi";
 var TabRichTextNode = () => {
-  return h19("", {}, "	");
+  return h20("", {}, "	");
 };
 
 // src/components/UniformRichText/UniformRichTextNode.ts
-var UniformRichTextNode = defineComponent6({
+var UniformRichTextNode = defineComponent7({
   name: "UniformRichTextNode",
   props: {
     node: {
@@ -560,13 +764,13 @@ var UniformRichTextNode = defineComponent6({
       return () => null;
     }
     const children = node.children ? node.children.map(
-      (childNode) => h20(
+      (childNode) => h21(
         UniformRichTextNode,
         { node: childNode, resolveRichTextRenderer: props.resolveRichTextRenderer },
         context.slots
       )
     ) : [];
-    return () => h20(NodeRenderer, { node, children: h20(() => children) }, () => children);
+    return () => h21(NodeRenderer, { node, children: h21(() => children) }, () => children);
   }
 });
 var rendererMap = /* @__PURE__ */ new Map([
@@ -590,7 +794,7 @@ var resolveRichTextDefaultRenderer = (node) => {
 };
 
 // src/components/UniformRichText/UniformRichText.ts
-var UniformRichText = defineComponent7({
+var UniformRichText = defineComponent8({
   name: "UniformRichText",
   props: {
     parameterId: {
@@ -601,21 +805,26 @@ var UniformRichText = defineComponent7({
       type: Function,
       required: false
     },
+    as: {
+      type: String,
+      required: false
+    },
     placeholder: {
       type: String
     }
   },
   setup(props, context) {
     var _a, _b;
+    const tag = props.as;
     const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
     const { isContextualEditing } = useUniformCurrentComposition();
-    const parameter = computed4(
+    const parameter = computed5(
       () => {
         var _a2;
         return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[props.parameterId];
       }
     );
-    const value = computed4(() => {
+    const value = computed5(() => {
       var _a2;
       return (_a2 = parameter.value) == null ? void 0 : _a2.value;
     });
@@ -625,189 +834,63 @@ var UniformRichText = defineComponent7({
     }
     const placeholderProp = (_b = props.placeholder) != null ? _b : contextualEditingDefaultPlaceholder;
     const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: props.parameterId }) : placeholderProp;
-    if (isRichTextNode2(root)) {
-      return isContextualEditing && isRichTextValueConsideredEmpty(value.value) ? () => h21("p", {}, h21("i", {}, computedPlaceholder)) : () => h21(
+    if (!isRichTextNode2(root)) {
+      return () => null;
+    }
+    if ((isContextualEditing == null ? void 0 : isContextualEditing.value) && isRichTextValueConsideredEmpty(value.value)) {
+      return () => maybeWrapInTag(
+        tag,
+        { isContextualEditing, componentId: componentData == null ? void 0 : componentData._id, parameterId: props.parameterId },
+        h22(
+          "p",
+          // If we don't have a wrapper, then we need to annotate this `p` element
+          tag ? {} : getRichTextAnnotations({ componentId: componentData == null ? void 0 : componentData._id, parameterId: props.parameterId }),
+          h22("i", {}, computedPlaceholder)
+        )
+      );
+    }
+    return () => maybeWrapInTag(
+      tag,
+      { isContextualEditing, componentId: componentData == null ? void 0 : componentData._id, parameterId: props.parameterId },
+      h22(
         UniformRichTextNode,
         {
           node: root,
           resolveRichTextRenderer: props.resolveRichTextRenderer
         },
         context.slots
-      );
-    } else {
-      return () => null;
-    }
-  }
-});
-
-// src/components/UniformSlot.ts
-import {
-  CANVAS_PERSONALIZE_SLOT,
-  CANVAS_PERSONALIZE_TYPE,
-  CANVAS_TEST_SLOT,
-  CANVAS_TEST_TYPE,
-  mapSlotToPersonalizedVariations,
-  mapSlotToTestVariations
-} from "@uniformdev/canvas";
-import { Personalize, Test } from "@uniformdev/context-vue";
-import { computed as computed5, defineComponent as defineComponent8, h as h22 } from "vue-demi";
-
-// src/helpers/convertComponentToProps.ts
-function convertComponentToProps(component) {
-  var _a;
-  const parameters = (_a = component.parameters) != null ? _a : {};
-  const flatParams = Object.entries(parameters).reduce(
-    (props, [key, { value }]) => ({
-      ...props,
-      [normalizePropName(key)]: value
-    }),
-    {}
-  );
-  const renderComponentProps = {
-    ...flatParams,
-    ...component.data,
-    component
-  };
-  return renderComponentProps;
-}
-function normalizePropName(name) {
-  return name.replace("$", "");
-}
-
-// src/components/UniformSlot.ts
-var UniformSlot = defineComponent8({
-  name: "UniformSlot",
-  inheritAttrs: false,
-  props: {
-    name: {
-      type: String
-    },
-    resolveRenderer: {
-      type: Function
-    }
-  },
-  setup(props, context) {
-    var _a;
-    const { data: parentData, resolveRenderer: parentResolveRenderer } = useUniformCurrentComponent();
-    const resolveRenderer = (_a = props.resolveRenderer) != null ? _a : parentResolveRenderer;
-    const emptyPlaceholder = context.slots.emptyPlaceholder;
-    if (!parentData || !resolveRenderer) {
-      throw new Error("<UniformSlot /> can only be used inside a <UniformComposition />");
-    }
-    const slotItems = computed5(() => {
-      var _a2, _b, _c;
-      if (props.name) {
-        return (_b = (_a2 = parentData.slots) == null ? void 0 : _a2[props.name]) != null ? _b : [];
-      }
-      return Object.values((_c = parentData.slots) != null ? _c : {}).flat();
-    });
-    const childrenToRender = slotItems.value.map((component, index) => {
-      const child = renderComponent({
-        component,
-        resolveRenderer,
-        indexInSlot: index,
-        slotName: props.name,
-        parentComponent: parentData,
-        slotChildrenCount: slotItems.value.length,
-        emptyPlaceholder
-      });
-      return context.slots.default ? context.slots.default({ child, component }) : child;
-    });
-    return () => childrenToRender;
-  }
-});
-function renderPersonalizeComponent(component, resolveRenderer) {
-  var _a, _b, _c, _d, _e, _f;
-  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 h22(Personalize, {
-    name,
-    // TODO: Fix the `as unknown`
-    component: (variant) => resolveRenderer(variant),
-    variations: processedVariants,
-    count: Number((_f = (_e = parameters == null ? void 0 : parameters.count) == null ? void 0 : _e.value) != null ? _f : 1)
-  });
-}
-function renderTestComponent(component, resolveRenderer) {
-  var _a, _b, _c, _d, _e;
-  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 h22(Test, {
-    variations: finalVariants,
-    name: testName,
-    component: (variant) => resolveRenderer(variant)
-  });
-}
-function renderComponent({
-  component,
-  resolveRenderer,
-  indexInSlot,
-  slotName,
-  parentComponent,
-  slotChildrenCount,
-  emptyPlaceholder
-}) {
-  if (component.type === CANVAS_TEST_TYPE) {
-    return renderTestComponent(
-      component,
-      (variantComponent) => {
-        var _a, _b;
-        return renderComponent({
-          component: variantComponent,
-          resolveRenderer,
-          parentComponent: component,
-          slotName: CANVAS_TEST_SLOT,
-          slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[CANVAS_TEST_SLOT].length,
-          indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[CANVAS_TEST_SLOT].findIndex(
-            ({ _id }) => variantComponent._id === _id
-          )
-        });
-      }
-    );
-  }
-  if (component.type === CANVAS_PERSONALIZE_TYPE) {
-    return renderPersonalizeComponent(
-      component,
-      (variantComponent) => {
-        var _a, _b;
-        return renderComponent({
-          component: variantComponent,
-          resolveRenderer,
-          parentComponent: component,
-          slotName: CANVAS_PERSONALIZE_SLOT,
-          slotChildrenCount: (_a = component == null ? void 0 : component.slots) == null ? void 0 : _a[CANVAS_PERSONALIZE_SLOT].length,
-          indexInSlot: (_b = component == null ? void 0 : component.slots) == null ? void 0 : _b[CANVAS_PERSONALIZE_SLOT].findIndex(
-            ({ _id }) => variantComponent._id === _id
-          )
-        });
-      }
-    );
-  }
-  const resolvedComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
-  if (resolvedComponent) {
-    const props = convertComponentToProps(component);
-    return h22(
-      UniformComponent,
-      { data: component, resolveRenderer },
-      () => h22(
-        ContextualEditingComponentWrapper,
-        { component, parentComponent, slotName, indexInSlot, slotChildrenCount },
-        { default: () => h22(resolvedComponent, props), emptyPlaceholder }
       )
     );
   }
-  console.warn(
-    `[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
+});
+var maybeWrapInTag = (tag, {
+  isContextualEditing,
+  componentId,
+  parameterId
+}, children) => {
+  if (!tag) {
+    return children;
+  }
+  return h22(
+    tag,
+    !(isContextualEditing == null ? void 0 : isContextualEditing.value) ? {} : getRichTextAnnotations({ componentId, parameterId }),
+    children
   );
-  return h22("");
-}
+};
+var getRichTextAnnotations = ({
+  componentId,
+  parameterId
+}) => {
+  return {
+    [ATTRIBUTE_COMPONENT_ID]: componentId,
+    [ATTRIBUTE_PARAMETER_ID]: parameterId,
+    [ATTRIBUTE_PARAMETER_TYPE]: "richText"
+  };
+};
 
 // src/components/UniformText.ts
 import {
-  ATTRIBUTE_PARAMETER_TYPE,
+  ATTRIBUTE_PARAMETER_TYPE as ATTRIBUTE_PARAMETER_TYPE2,
   ATTRIBUTE_PARAMETER_VALUE,
   ATTRIBUTE_PLACEHOLDER
 } from "@uniformdev/canvas";
@@ -885,7 +968,7 @@ var UniformText = defineComponent9({
             isMultiline: props.isMultiline
           }),
           [ATTRIBUTE_PARAMETER_VALUE]: (_b = value.value) != null ? _b : "",
-          [ATTRIBUTE_PARAMETER_TYPE]: "text",
+          [ATTRIBUTE_PARAMETER_TYPE2]: "text",
           [ATTRIBUTE_PLACEHOLDER]: computedPlaceholder,
           style: props.isMultiline ? { whiteSpace: "pre-wrap" } : {},
           onFocus: handleOnFocus,
@@ -960,6 +1043,7 @@ export {
   createUniformApiEnhancer,
   getParameterAttributes,
   globalCompositionEnhancerInjectionKey,
+  renderComponent,
   useCompositionEventEffect,
   useUniformContextualEditing,
   useUniformCurrentComponent,