@uniformdev/canvas-vue 19.180.0 → 19.181.1

package/dist/index.d.mts

@@ -586,11 +586,25 @@ declare const QuoteRichTextNode: RichTextRendererComponent;
 
 declare const RootRichTextNode: RichTextRendererComponent;
 
+declare const TableCellRichTextNode: RichTextRendererComponent;
+
+declare const TableRichTextNode: RichTextRendererComponent;
+
+declare const TableRowRichTextNode: RichTextRendererComponent;
+
 declare const TextRichTextNode: RichTextRendererComponent;
 
 type UniformRichTextProps = {
     parameterId: string;
     resolveRichTextRenderer?: RenderRichTextComponentResolver;
+    /**
+     * Sets the value to show in Canvas editor when the parameter value is empty.
+     * Can be a static string, or a function to generate the placeholder out of parameter info.
+     * @default undefined
+     */
+    placeholder?: string | ((parameter: {
+        id: string;
+    }) => string | undefined);
 };
 declare const UniformRichText: vue_demi.DefineComponent<{
     parameterId: {
@@ -601,9 +615,12 @@ declare const UniformRichText: vue_demi.DefineComponent<{
         type: PropType<UniformRichTextProps["resolveRichTextRenderer"]>;
         required: false;
     };
+    placeholder: {
+        type: PropType<UniformRichTextProps["placeholder"]>;
+    };
 }, (() => 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<{
+}>) | (() => null) | 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;
@@ -612,6 +629,9 @@ declare const UniformRichText: vue_demi.DefineComponent<{
         type: PropType<UniformRichTextProps["resolveRichTextRenderer"]>;
         required: false;
     };
+    placeholder: {
+        type: PropType<UniformRichTextProps["placeholder"]>;
+    };
 }>>, {}, {}>;
 
 type UniformRichTextNodeProps = {
@@ -688,4 +708,4 @@ declare const globalCompositionEnhancerInjectionKey = "uniformGlobalCompositionE
  */
 declare function convertComponentToProps<T = unknown>(component: ComponentInstance): ComponentProps<T>;
 
-export { type ComponentProps, DefaultNotImplementedComponent, type DefaultNotImplementedComponentProps, HeadingRichTextNode, LinkRichTextNode, ListItemRichTextNode, ListRichTextNode, ParagraphRichTextNode, type PersonalizeComponent, QuoteRichTextNode, type RenderRichTextComponentResolver, type ResolveRenderer, type RichTextComponentProps, type RichTextRendererComponent, RootRichTextNode, type TestComponent, TextRichTextNode, UniformComponent, type UniformComponentProps, UniformComposition, type UniformCompositionProps, UniformPlayground, type UniformPlaygroundProps, UniformRichText, UniformRichTextNode, type UniformRichTextNodeProps, type UniformRichTextProps, UniformSlot, type UniformSlotProps, UniformText, type UniformTextProps, type UseCompositionEventEffectOptions, type UseUniformContextualEditingProps, convertComponentToProps, globalCompositionEnhancerInjectionKey, useCompositionEventEffect, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };
+export { type ComponentProps, DefaultNotImplementedComponent, type DefaultNotImplementedComponentProps, HeadingRichTextNode, LinkRichTextNode, ListItemRichTextNode, ListRichTextNode, ParagraphRichTextNode, type PersonalizeComponent, QuoteRichTextNode, type RenderRichTextComponentResolver, type ResolveRenderer, type RichTextComponentProps, type RichTextRendererComponent, RootRichTextNode, TableCellRichTextNode, TableRichTextNode, TableRowRichTextNode, type TestComponent, TextRichTextNode, UniformComponent, type UniformComponentProps, UniformComposition, type UniformCompositionProps, UniformPlayground, type UniformPlaygroundProps, UniformRichText, UniformRichTextNode, type UniformRichTextNodeProps, type UniformRichTextProps, UniformSlot, type UniformSlotProps, UniformText, type UniformTextProps, type UseCompositionEventEffectOptions, type UseUniformContextualEditingProps, convertComponentToProps, globalCompositionEnhancerInjectionKey, useCompositionEventEffect, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.d.ts

@@ -586,11 +586,25 @@ declare const QuoteRichTextNode: RichTextRendererComponent;
 
 declare const RootRichTextNode: RichTextRendererComponent;
 
+declare const TableCellRichTextNode: RichTextRendererComponent;
+
+declare const TableRichTextNode: RichTextRendererComponent;
+
+declare const TableRowRichTextNode: RichTextRendererComponent;
+
 declare const TextRichTextNode: RichTextRendererComponent;
 
 type UniformRichTextProps = {
     parameterId: string;
     resolveRichTextRenderer?: RenderRichTextComponentResolver;
+    /**
+     * Sets the value to show in Canvas editor when the parameter value is empty.
+     * Can be a static string, or a function to generate the placeholder out of parameter info.
+     * @default undefined
+     */
+    placeholder?: string | ((parameter: {
+        id: string;
+    }) => string | undefined);
 };
 declare const UniformRichText: vue_demi.DefineComponent<{
     parameterId: {
@@ -601,9 +615,12 @@ declare const UniformRichText: vue_demi.DefineComponent<{
         type: PropType<UniformRichTextProps["resolveRichTextRenderer"]>;
         required: false;
     };
+    placeholder: {
+        type: PropType<UniformRichTextProps["placeholder"]>;
+    };
 }, (() => 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<{
+}>) | (() => null) | 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;
@@ -612,6 +629,9 @@ declare const UniformRichText: vue_demi.DefineComponent<{
         type: PropType<UniformRichTextProps["resolveRichTextRenderer"]>;
         required: false;
     };
+    placeholder: {
+        type: PropType<UniformRichTextProps["placeholder"]>;
+    };
 }>>, {}, {}>;
 
 type UniformRichTextNodeProps = {
@@ -688,4 +708,4 @@ declare const globalCompositionEnhancerInjectionKey = "uniformGlobalCompositionE
  */
 declare function convertComponentToProps<T = unknown>(component: ComponentInstance): ComponentProps<T>;
 
-export { type ComponentProps, DefaultNotImplementedComponent, type DefaultNotImplementedComponentProps, HeadingRichTextNode, LinkRichTextNode, ListItemRichTextNode, ListRichTextNode, ParagraphRichTextNode, type PersonalizeComponent, QuoteRichTextNode, type RenderRichTextComponentResolver, type ResolveRenderer, type RichTextComponentProps, type RichTextRendererComponent, RootRichTextNode, type TestComponent, TextRichTextNode, UniformComponent, type UniformComponentProps, UniformComposition, type UniformCompositionProps, UniformPlayground, type UniformPlaygroundProps, UniformRichText, UniformRichTextNode, type UniformRichTextNodeProps, type UniformRichTextProps, UniformSlot, type UniformSlotProps, UniformText, type UniformTextProps, type UseCompositionEventEffectOptions, type UseUniformContextualEditingProps, convertComponentToProps, globalCompositionEnhancerInjectionKey, useCompositionEventEffect, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };
+export { type ComponentProps, DefaultNotImplementedComponent, type DefaultNotImplementedComponentProps, HeadingRichTextNode, LinkRichTextNode, ListItemRichTextNode, ListRichTextNode, ParagraphRichTextNode, type PersonalizeComponent, QuoteRichTextNode, type RenderRichTextComponentResolver, type ResolveRenderer, type RichTextComponentProps, type RichTextRendererComponent, RootRichTextNode, TableCellRichTextNode, TableRichTextNode, TableRowRichTextNode, type TestComponent, TextRichTextNode, UniformComponent, type UniformComponentProps, UniformComposition, type UniformCompositionProps, UniformPlayground, type UniformPlaygroundProps, UniformRichText, UniformRichTextNode, type UniformRichTextNodeProps, type UniformRichTextProps, UniformSlot, type UniformSlotProps, UniformText, type UniformTextProps, type UseCompositionEventEffectOptions, type UseUniformContextualEditingProps, convertComponentToProps, globalCompositionEnhancerInjectionKey, useCompositionEventEffect, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.esm.js

@@ -472,46 +472,67 @@ var RootRichTextNode = (props, c) => {
   return h12(() => 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";
+var TableCellRichTextNode = (props, context) => {
+  const { headerState } = props.node;
+  const tag = getRichTextTagFromTableCellHeaderState(headerState);
+  return h13(tag, {}, context.slots);
+};
+
+// src/components/UniformRichText/nodes/TableRichTextNode.ts
+import { h as h14 } from "vue-demi";
+var TableRichTextNode = (_, context) => {
+  return h14("table", {}, h14("tbody", {}, context.slots));
+};
+
+// src/components/UniformRichText/nodes/TableRowRichTextNode.ts
+import { h as h15 } from "vue-demi";
+var TableRowRichTextNode = (_, context) => {
+  return h15("tr", {}, context.slots);
+};
+
 // src/components/UniformRichText/nodes/TextRichTextNode.ts
 import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
-import { h as h13 } from "vue-demi";
+import { h as h16 } from "vue-demi";
 var TextRichTextNode = (props) => {
   const { format, text } = props.node;
   const tags = getRichTextTagsFromTextFormat(format);
   return tags.length > 0 ? tags.reduceRight(
     (children, tag) => {
-      return h13(tag, null, children);
+      return h16(tag, null, children);
     },
     {
       default: () => text
     }
-  ) : h13(() => text);
+  ) : h16(() => text);
 };
 
 // src/components/UniformRichText/UniformRichText.ts
-import { isRichTextNode as isRichTextNode2 } from "@uniformdev/richtext";
-import { computed as computed4, defineComponent as defineComponent7, h as h18 } from "vue-demi";
+import { isRichTextNode as isRichTextNode2, isRichTextValueConsideredEmpty } from "@uniformdev/richtext";
+import { computed as computed4, defineComponent as defineComponent7, h as h21 } from "vue-demi";
 
 // src/components/UniformRichText/UniformRichTextNode.ts
 import { isRichTextNode } from "@uniformdev/richtext";
-import { defineComponent as defineComponent6, h as h17 } from "vue-demi";
+import { defineComponent as defineComponent6, h as h20 } from "vue-demi";
 
 // src/components/UniformRichText/nodes/CodeRichTextNode.ts
-import { h as h14 } from "vue-demi";
+import { h as h17 } from "vue-demi";
 var CodeRichTextNode = (_, context) => {
-  return h14("pre", {}, h14("code", {}, context.slots));
+  return h17("pre", {}, h17("code", {}, context.slots));
 };
 
 // src/components/UniformRichText/nodes/LinebreakRichTextNode.ts
-import { h as h15 } from "vue-demi";
+import { h as h18 } from "vue-demi";
 var LinebreakRichTextNode = () => {
-  return h15("br", {});
+  return h18("br", {});
 };
 
 // src/components/UniformRichText/nodes/TabRichTextNode.ts
-import { h as h16 } from "vue-demi";
+import { h as h19 } from "vue-demi";
 var TabRichTextNode = () => {
-  return h16("", {}, "	");
+  return h19("", {}, "	");
 };
 
 // src/components/UniformRichText/UniformRichTextNode.ts
@@ -539,13 +560,13 @@ var UniformRichTextNode = defineComponent6({
       return () => null;
     }
     const children = node.children ? node.children.map(
-      (childNode) => h17(
+      (childNode) => h20(
         UniformRichTextNode,
         { node: childNode, resolveRichTextRenderer: props.resolveRichTextRenderer },
         context.slots
       )
     ) : [];
-    return () => h17(NodeRenderer, { node, children: h17(() => children) }, () => children);
+    return () => h20(NodeRenderer, { node, children: h20(() => children) }, () => children);
   }
 });
 var rendererMap = /* @__PURE__ */ new Map([
@@ -559,7 +580,10 @@ var rendererMap = /* @__PURE__ */ new Map([
   ["code", CodeRichTextNode],
   ["root", RootRichTextNode],
   ["text", TextRichTextNode],
-  ["tab", TabRichTextNode]
+  ["tab", TabRichTextNode],
+  ["table", TableRichTextNode],
+  ["tablerow", TableRowRichTextNode],
+  ["tablecell", TableCellRichTextNode]
 ]);
 var resolveRichTextDefaultRenderer = (node) => {
   return rendererMap.get(node.type);
@@ -576,19 +600,33 @@ var UniformRichText = defineComponent7({
     resolveRichTextRenderer: {
       type: Function,
       required: false
+    },
+    placeholder: {
+      type: String
     }
   },
   setup(props, context) {
-    var _a;
-    const { data: componentData } = useUniformCurrentComponent();
+    var _a, _b;
+    const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
+    const { isContextualEditing } = useUniformCurrentComposition();
+    const parameter = computed4(
+      () => {
+        var _a2;
+        return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[props.parameterId];
+      }
+    );
     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;
+      return (_a2 = parameter.value) == null ? void 0 : _a2.value;
     });
     const root = (_a = value.value) == null ? void 0 : _a.root;
+    if (!parameter) {
+      return null;
+    }
+    const placeholderProp = (_b = props.placeholder) != null ? _b : contextualEditingDefaultPlaceholder;
+    const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: props.parameterId }) : placeholderProp;
     if (isRichTextNode2(root)) {
-      return () => h18(
+      return isContextualEditing && isRichTextValueConsideredEmpty(value.value) ? () => h21("p", {}, h21("i", {}, computedPlaceholder)) : () => h21(
         UniformRichTextNode,
         {
           node: root,
@@ -612,7 +650,7 @@ import {
   mapSlotToTestVariations
 } from "@uniformdev/canvas";
 import { Personalize, Test } from "@uniformdev/context-vue";
-import { computed as computed5, defineComponent as defineComponent8, h as h19 } from "vue-demi";
+import { computed as computed5, defineComponent as defineComponent8, h as h22 } from "vue-demi";
 
 // src/helpers/convertComponentToProps.ts
 function convertComponentToProps(component) {
@@ -683,7 +721,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 h19(Personalize, {
+  return h22(Personalize, {
     name,
     // TODO: Fix the `as unknown`
     component: (variant) => resolveRenderer(variant),
@@ -696,7 +734,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 h19(Test, {
+  return h22(Test, {
     variations: finalVariants,
     name: testName,
     component: (variant) => resolveRenderer(variant)
@@ -750,13 +788,13 @@ function renderComponent({
   const resolvedComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
   if (resolvedComponent) {
     const props = convertComponentToProps(component);
-    return h19(
+    return h22(
       UniformComponent,
       { data: component, resolveRenderer },
-      () => h19(
+      () => h22(
         ContextualEditingComponentWrapper,
         { component, parentComponent, slotName, indexInSlot, slotChildrenCount },
-        { default: () => h19(resolvedComponent, props), emptyPlaceholder }
+        { default: () => h22(resolvedComponent, props), emptyPlaceholder }
       )
     );
   }
@@ -764,7 +802,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 h19("");
+  return h22("");
 }
 
 // src/components/UniformText.ts
@@ -773,7 +811,7 @@ import {
   ATTRIBUTE_PARAMETER_VALUE,
   ATTRIBUTE_PLACEHOLDER
 } from "@uniformdev/canvas";
-import { computed as computed6, defineComponent as defineComponent9, h as h20, ref as ref2 } from "vue-demi";
+import { computed as computed6, defineComponent as defineComponent9, h as h23, ref as ref2 } from "vue-demi";
 var DEFAULT_ELEMENT_TYPE = "span";
 var UniformText = defineComponent9({
   name: "UniformText",
@@ -827,7 +865,7 @@ var UniformText = defineComponent9({
     if (!isContextualEditing) {
       return () => {
         var _a2, _b, _c, _d;
-        return h20(
+        return h23(
           (_a2 = props.as) != null ? _a2 : DEFAULT_ELEMENT_TYPE,
           { style: props.isMultiline ? { whiteSpace: "pre-wrap" } : {} },
           (_d = (_c = (_b = context.slots).default) == null ? void 0 : _c.call(_b, value.value)) != null ? _d : value.value
@@ -838,7 +876,7 @@ var UniformText = defineComponent9({
     const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: props.parameterId }) : placeholderProp;
     return () => {
       var _a2, _b, _c, _d, _e;
-      return h20(
+      return h23(
         (_a2 = props.as) != null ? _a2 : DEFAULT_ELEMENT_TYPE,
         {
           ...getParameterAttributes({
@@ -907,6 +945,9 @@ export {
   ParagraphRichTextNode,
   QuoteRichTextNode,
   RootRichTextNode,
+  TableCellRichTextNode,
+  TableRichTextNode,
+  TableRowRichTextNode,
   TextRichTextNode,
   UniformComponent,
   UniformComposition,

package/dist/index.js

@@ -28,6 +28,9 @@ __export(src_exports, {
   ParagraphRichTextNode: () => ParagraphRichTextNode,
   QuoteRichTextNode: () => QuoteRichTextNode,
   RootRichTextNode: () => RootRichTextNode,
+  TableCellRichTextNode: () => TableCellRichTextNode,
+  TableRichTextNode: () => TableRichTextNode,
+  TableRowRichTextNode: () => TableRowRichTextNode,
   TextRichTextNode: () => TextRichTextNode,
   UniformComponent: () => UniformComponent,
   UniformComposition: () => UniformComposition,
@@ -492,50 +495,71 @@ var RootRichTextNode = (props, c) => {
   return (0, import_vue_demi13.h)(() => c.slots.default ? c.slots.default() : null);
 };
 
-// src/components/UniformRichText/nodes/TextRichTextNode.ts
+// src/components/UniformRichText/nodes/TableCellRichTextNode.ts
 var import_richtext3 = require("@uniformdev/richtext");
 var import_vue_demi14 = require("vue-demi");
+var TableCellRichTextNode = (props, context) => {
+  const { headerState } = props.node;
+  const tag = (0, import_richtext3.getRichTextTagFromTableCellHeaderState)(headerState);
+  return (0, import_vue_demi14.h)(tag, {}, context.slots);
+};
+
+// src/components/UniformRichText/nodes/TableRichTextNode.ts
+var import_vue_demi15 = require("vue-demi");
+var TableRichTextNode = (_, context) => {
+  return (0, import_vue_demi15.h)("table", {}, (0, import_vue_demi15.h)("tbody", {}, context.slots));
+};
+
+// src/components/UniformRichText/nodes/TableRowRichTextNode.ts
+var import_vue_demi16 = require("vue-demi");
+var TableRowRichTextNode = (_, context) => {
+  return (0, import_vue_demi16.h)("tr", {}, context.slots);
+};
+
+// src/components/UniformRichText/nodes/TextRichTextNode.ts
+var import_richtext4 = require("@uniformdev/richtext");
+var import_vue_demi17 = require("vue-demi");
 var TextRichTextNode = (props) => {
   const { format, text } = props.node;
-  const tags = (0, import_richtext3.getRichTextTagsFromTextFormat)(format);
+  const tags = (0, import_richtext4.getRichTextTagsFromTextFormat)(format);
   return tags.length > 0 ? tags.reduceRight(
     (children, tag) => {
-      return (0, import_vue_demi14.h)(tag, null, children);
+      return (0, import_vue_demi17.h)(tag, null, children);
     },
     {
       default: () => text
     }
-  ) : (0, import_vue_demi14.h)(() => text);
+  ) : (0, import_vue_demi17.h)(() => text);
 };
 
 // src/components/UniformRichText/UniformRichText.ts
-var import_richtext5 = require("@uniformdev/richtext");
-var import_vue_demi19 = require("vue-demi");
+var import_richtext6 = require("@uniformdev/richtext");
+var import_vue_demi22 = require("vue-demi");
 
 // src/components/UniformRichText/UniformRichTextNode.ts
-var import_richtext4 = require("@uniformdev/richtext");
-var import_vue_demi18 = require("vue-demi");
+var import_richtext5 = require("@uniformdev/richtext");
+var import_vue_demi21 = require("vue-demi");
 
 // src/components/UniformRichText/nodes/CodeRichTextNode.ts
-var import_vue_demi15 = require("vue-demi");
+var import_vue_demi18 = require("vue-demi");
 var CodeRichTextNode = (_, context) => {
-  return (0, import_vue_demi15.h)("pre", {}, (0, import_vue_demi15.h)("code", {}, context.slots));
+  return (0, import_vue_demi18.h)("pre", {}, (0, import_vue_demi18.h)("code", {}, context.slots));
 };
 
 // src/components/UniformRichText/nodes/LinebreakRichTextNode.ts
-var import_vue_demi16 = require("vue-demi");
+var import_vue_demi19 = require("vue-demi");
 var LinebreakRichTextNode = () => {
-  return (0, import_vue_demi16.h)("br", {});
+  return (0, import_vue_demi19.h)("br", {});
 };
 
 // src/components/UniformRichText/nodes/TabRichTextNode.ts
-var import_vue_demi17 = require("vue-demi");
+var import_vue_demi20 = require("vue-demi");
 var TabRichTextNode = () => {
-  return (0, import_vue_demi17.h)("", {}, "	");
+  return (0, import_vue_demi20.h)("", {}, "	");
 };
 
 // src/components/UniformRichText/UniformRichTextNode.ts
-var UniformRichTextNode = (0, import_vue_demi18.defineComponent)({
+var UniformRichTextNode = (0, import_vue_demi21.defineComponent)({
   name: "UniformRichTextNode",
   props: {
     node: {
@@ -550,7 +574,7 @@ var UniformRichTextNode = (0, import_vue_demi18.defineComponent)({
   setup(props, context) {
     var _a;
     const node = props.node;
-    if (!(0, import_richtext4.isRichTextNode)(node)) return () => null;
+    if (!(0, import_richtext5.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);
@@ -559,13 +583,13 @@ var UniformRichTextNode = (0, import_vue_demi18.defineComponent)({
       return () => null;
     }
     const children = node.children ? node.children.map(
-      (childNode) => (0, import_vue_demi18.h)(
+      (childNode) => (0, import_vue_demi21.h)(
         UniformRichTextNode,
         { node: childNode, resolveRichTextRenderer: props.resolveRichTextRenderer },
         context.slots
       )
     ) : [];
-    return () => (0, import_vue_demi18.h)(NodeRenderer, { node, children: (0, import_vue_demi18.h)(() => children) }, () => children);
+    return () => (0, import_vue_demi21.h)(NodeRenderer, { node, children: (0, import_vue_demi21.h)(() => children) }, () => children);
   }
 });
 var rendererMap = /* @__PURE__ */ new Map([
@@ -579,14 +603,17 @@ var rendererMap = /* @__PURE__ */ new Map([
   ["code", CodeRichTextNode],
   ["root", RootRichTextNode],
   ["text", TextRichTextNode],
-  ["tab", TabRichTextNode]
+  ["tab", TabRichTextNode],
+  ["table", TableRichTextNode],
+  ["tablerow", TableRowRichTextNode],
+  ["tablecell", TableCellRichTextNode]
 ]);
 var resolveRichTextDefaultRenderer = (node) => {
   return rendererMap.get(node.type);
 };
 
 // src/components/UniformRichText/UniformRichText.ts
-var UniformRichText = (0, import_vue_demi19.defineComponent)({
+var UniformRichText = (0, import_vue_demi22.defineComponent)({
   name: "UniformRichText",
   props: {
     parameterId: {
@@ -596,19 +623,33 @@ var UniformRichText = (0, import_vue_demi19.defineComponent)({
     resolveRichTextRenderer: {
       type: Function,
       required: false
+    },
+    placeholder: {
+      type: String
     }
   },
   setup(props, context) {
-    var _a;
-    const { data: componentData } = useUniformCurrentComponent();
-    const value = (0, import_vue_demi19.computed)(() => {
+    var _a, _b;
+    const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
+    const { isContextualEditing } = useUniformCurrentComposition();
+    const parameter = (0, import_vue_demi22.computed)(
+      () => {
+        var _a2;
+        return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[props.parameterId];
+      }
+    );
+    const value = (0, import_vue_demi22.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;
+      return (_a2 = parameter.value) == null ? void 0 : _a2.value;
     });
     const root = (_a = value.value) == null ? void 0 : _a.root;
-    if ((0, import_richtext5.isRichTextNode)(root)) {
-      return () => (0, import_vue_demi19.h)(
+    if (!parameter) {
+      return null;
+    }
+    const placeholderProp = (_b = props.placeholder) != null ? _b : contextualEditingDefaultPlaceholder;
+    const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: props.parameterId }) : placeholderProp;
+    if ((0, import_richtext6.isRichTextNode)(root)) {
+      return isContextualEditing && (0, import_richtext6.isRichTextValueConsideredEmpty)(value.value) ? () => (0, import_vue_demi22.h)("p", {}, (0, import_vue_demi22.h)("i", {}, computedPlaceholder)) : () => (0, import_vue_demi22.h)(
         UniformRichTextNode,
         {
           node: root,
@@ -625,7 +666,7 @@ var UniformRichText = (0, import_vue_demi19.defineComponent)({
 // src/components/UniformSlot.ts
 var import_canvas6 = require("@uniformdev/canvas");
 var import_context_vue2 = require("@uniformdev/context-vue");
-var import_vue_demi20 = require("vue-demi");
+var import_vue_demi23 = require("vue-demi");
 
 // src/helpers/convertComponentToProps.ts
 function convertComponentToProps(component) {
@@ -650,7 +691,7 @@ function normalizePropName(name) {
 }
 
 // src/components/UniformSlot.ts
-var UniformSlot = (0, import_vue_demi20.defineComponent)({
+var UniformSlot = (0, import_vue_demi23.defineComponent)({
   name: "UniformSlot",
   inheritAttrs: false,
   props: {
@@ -669,7 +710,7 @@ var UniformSlot = (0, import_vue_demi20.defineComponent)({
     if (!parentData || !resolveRenderer) {
       throw new Error("<UniformSlot /> can only be used inside a <UniformComposition />");
     }
-    const slotItems = (0, import_vue_demi20.computed)(() => {
+    const slotItems = (0, import_vue_demi23.computed)(() => {
       var _a2, _b, _c;
       if (props.name) {
         return (_b = (_a2 = parentData.slots) == null ? void 0 : _a2[props.name]) != null ? _b : [];
@@ -696,7 +737,7 @@ function renderPersonalizeComponent(component, resolveRenderer) {
   const parameters = component == null ? void 0 : component.parameters;
   const processedVariants = (0, import_canvas6.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_demi20.h)(import_context_vue2.Personalize, {
+  return (0, import_vue_demi23.h)(import_context_vue2.Personalize, {
     name,
     // TODO: Fix the `as unknown`
     component: (variant) => resolveRenderer(variant),
@@ -709,7 +750,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_canvas6.mapSlotToTestVariations)(variants);
-  return (0, import_vue_demi20.h)(import_context_vue2.Test, {
+  return (0, import_vue_demi23.h)(import_context_vue2.Test, {
     variations: finalVariants,
     name: testName,
     component: (variant) => resolveRenderer(variant)
@@ -763,13 +804,13 @@ function renderComponent({
   const resolvedComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
   if (resolvedComponent) {
     const props = convertComponentToProps(component);
-    return (0, import_vue_demi20.h)(
+    return (0, import_vue_demi23.h)(
       UniformComponent,
       { data: component, resolveRenderer },
-      () => (0, import_vue_demi20.h)(
+      () => (0, import_vue_demi23.h)(
         ContextualEditingComponentWrapper,
         { component, parentComponent, slotName, indexInSlot, slotChildrenCount },
-        { default: () => (0, import_vue_demi20.h)(resolvedComponent, props), emptyPlaceholder }
+        { default: () => (0, import_vue_demi23.h)(resolvedComponent, props), emptyPlaceholder }
       )
     );
   }
@@ -777,14 +818,14 @@ 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_demi20.h)("");
+  return (0, import_vue_demi23.h)("");
 }
 
 // src/components/UniformText.ts
 var import_canvas7 = require("@uniformdev/canvas");
-var import_vue_demi21 = require("vue-demi");
+var import_vue_demi24 = require("vue-demi");
 var DEFAULT_ELEMENT_TYPE = "span";
-var UniformText = (0, import_vue_demi21.defineComponent)({
+var UniformText = (0, import_vue_demi24.defineComponent)({
   name: "UniformText",
   inheritAttrs: true,
   props: {
@@ -808,22 +849,22 @@ var UniformText = (0, import_vue_demi21.defineComponent)({
     var _a;
     const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
     const { isContextualEditing } = useUniformCurrentComposition();
-    const isFocused = (0, import_vue_demi21.ref)(false);
-    const parameter = (0, import_vue_demi21.computed)(
+    const isFocused = (0, import_vue_demi24.ref)(false);
+    const parameter = (0, import_vue_demi24.computed)(
       () => {
         var _a2;
         return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[props.parameterId];
       }
     );
-    const value = (0, import_vue_demi21.computed)(() => {
+    const value = (0, import_vue_demi24.computed)(() => {
       var _a2;
       return (_a2 = parameter.value) == null ? void 0 : _a2.value;
     });
-    const isEditable = (0, import_vue_demi21.computed)(() => {
+    const isEditable = (0, import_vue_demi24.computed)(() => {
       var _a2, _b, _c;
       return (_c = (_b = (_a2 = parameter.value) == null ? void 0 : _a2._contextualEditing) == null ? void 0 : _b.isEditable) != null ? _c : false;
     });
-    const shouldSkipCustomRendering = (0, import_vue_demi21.computed)(() => isFocused.value && isEditable.value);
+    const shouldSkipCustomRendering = (0, import_vue_demi24.computed)(() => isFocused.value && isEditable.value);
     const handleOnFocus = () => {
       isFocused.value = true;
     };
@@ -836,7 +877,7 @@ var UniformText = (0, import_vue_demi21.defineComponent)({
     if (!isContextualEditing) {
       return () => {
         var _a2, _b, _c, _d;
-        return (0, import_vue_demi21.h)(
+        return (0, import_vue_demi24.h)(
           (_a2 = props.as) != null ? _a2 : DEFAULT_ELEMENT_TYPE,
           { style: props.isMultiline ? { whiteSpace: "pre-wrap" } : {} },
           (_d = (_c = (_b = context.slots).default) == null ? void 0 : _c.call(_b, value.value)) != null ? _d : value.value
@@ -847,7 +888,7 @@ var UniformText = (0, import_vue_demi21.defineComponent)({
     const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: props.parameterId }) : placeholderProp;
     return () => {
       var _a2, _b, _c, _d, _e;
-      return (0, import_vue_demi21.h)(
+      return (0, import_vue_demi24.h)(
         (_a2 = props.as) != null ? _a2 : DEFAULT_ELEMENT_TYPE,
         {
           ...(0, import_canvas9.getParameterAttributes)({
@@ -870,7 +911,7 @@ var UniformText = (0, import_vue_demi21.defineComponent)({
 
 // src/composables/useCompositionEventEffect.ts
 var import_canvas8 = require("@uniformdev/canvas");
-var import_vue_demi22 = require("vue-demi");
+var import_vue_demi25 = require("vue-demi");
 async function useCompositionEventEffect({
   enabled,
   projectId,
@@ -878,7 +919,7 @@ async function useCompositionEventEffect({
   effect
 }) {
   let unsubscribe;
-  (0, import_vue_demi22.watch)(
+  (0, import_vue_demi25.watch)(
     [() => enabled, () => compositionIdRef.value, () => projectId],
     async () => {
       unsubscribe == null ? void 0 : unsubscribe();
@@ -913,6 +954,9 @@ var import_canvas9 = require("@uniformdev/canvas");
   ParagraphRichTextNode,
   QuoteRichTextNode,
   RootRichTextNode,
+  TableCellRichTextNode,
+  TableRichTextNode,
+  TableRowRichTextNode,
   TextRichTextNode,
   UniformComponent,
   UniformComposition,

package/dist/index.mjs

@@ -472,46 +472,67 @@ var RootRichTextNode = (props, c) => {
   return h12(() => 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";
+var TableCellRichTextNode = (props, context) => {
+  const { headerState } = props.node;
+  const tag = getRichTextTagFromTableCellHeaderState(headerState);
+  return h13(tag, {}, context.slots);
+};
+
+// src/components/UniformRichText/nodes/TableRichTextNode.ts
+import { h as h14 } from "vue-demi";
+var TableRichTextNode = (_, context) => {
+  return h14("table", {}, h14("tbody", {}, context.slots));
+};
+
+// src/components/UniformRichText/nodes/TableRowRichTextNode.ts
+import { h as h15 } from "vue-demi";
+var TableRowRichTextNode = (_, context) => {
+  return h15("tr", {}, context.slots);
+};
+
 // src/components/UniformRichText/nodes/TextRichTextNode.ts
 import { getRichTextTagsFromTextFormat } from "@uniformdev/richtext";
-import { h as h13 } from "vue-demi";
+import { h as h16 } from "vue-demi";
 var TextRichTextNode = (props) => {
   const { format, text } = props.node;
   const tags = getRichTextTagsFromTextFormat(format);
   return tags.length > 0 ? tags.reduceRight(
     (children, tag) => {
-      return h13(tag, null, children);
+      return h16(tag, null, children);
     },
     {
       default: () => text
     }
-  ) : h13(() => text);
+  ) : h16(() => text);
 };
 
 // src/components/UniformRichText/UniformRichText.ts
-import { isRichTextNode as isRichTextNode2 } from "@uniformdev/richtext";
-import { computed as computed4, defineComponent as defineComponent7, h as h18 } from "vue-demi";
+import { isRichTextNode as isRichTextNode2, isRichTextValueConsideredEmpty } from "@uniformdev/richtext";
+import { computed as computed4, defineComponent as defineComponent7, h as h21 } from "vue-demi";
 
 // src/components/UniformRichText/UniformRichTextNode.ts
 import { isRichTextNode } from "@uniformdev/richtext";
-import { defineComponent as defineComponent6, h as h17 } from "vue-demi";
+import { defineComponent as defineComponent6, h as h20 } from "vue-demi";
 
 // src/components/UniformRichText/nodes/CodeRichTextNode.ts
-import { h as h14 } from "vue-demi";
+import { h as h17 } from "vue-demi";
 var CodeRichTextNode = (_, context) => {
-  return h14("pre", {}, h14("code", {}, context.slots));
+  return h17("pre", {}, h17("code", {}, context.slots));
 };
 
 // src/components/UniformRichText/nodes/LinebreakRichTextNode.ts
-import { h as h15 } from "vue-demi";
+import { h as h18 } from "vue-demi";
 var LinebreakRichTextNode = () => {
-  return h15("br", {});
+  return h18("br", {});
 };
 
 // src/components/UniformRichText/nodes/TabRichTextNode.ts
-import { h as h16 } from "vue-demi";
+import { h as h19 } from "vue-demi";
 var TabRichTextNode = () => {
-  return h16("", {}, "	");
+  return h19("", {}, "	");
 };
 
 // src/components/UniformRichText/UniformRichTextNode.ts
@@ -539,13 +560,13 @@ var UniformRichTextNode = defineComponent6({
       return () => null;
     }
     const children = node.children ? node.children.map(
-      (childNode) => h17(
+      (childNode) => h20(
         UniformRichTextNode,
         { node: childNode, resolveRichTextRenderer: props.resolveRichTextRenderer },
         context.slots
       )
     ) : [];
-    return () => h17(NodeRenderer, { node, children: h17(() => children) }, () => children);
+    return () => h20(NodeRenderer, { node, children: h20(() => children) }, () => children);
   }
 });
 var rendererMap = /* @__PURE__ */ new Map([
@@ -559,7 +580,10 @@ var rendererMap = /* @__PURE__ */ new Map([
   ["code", CodeRichTextNode],
   ["root", RootRichTextNode],
   ["text", TextRichTextNode],
-  ["tab", TabRichTextNode]
+  ["tab", TabRichTextNode],
+  ["table", TableRichTextNode],
+  ["tablerow", TableRowRichTextNode],
+  ["tablecell", TableCellRichTextNode]
 ]);
 var resolveRichTextDefaultRenderer = (node) => {
   return rendererMap.get(node.type);
@@ -576,19 +600,33 @@ var UniformRichText = defineComponent7({
     resolveRichTextRenderer: {
       type: Function,
       required: false
+    },
+    placeholder: {
+      type: String
     }
   },
   setup(props, context) {
-    var _a;
-    const { data: componentData } = useUniformCurrentComponent();
+    var _a, _b;
+    const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
+    const { isContextualEditing } = useUniformCurrentComposition();
+    const parameter = computed4(
+      () => {
+        var _a2;
+        return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[props.parameterId];
+      }
+    );
     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;
+      return (_a2 = parameter.value) == null ? void 0 : _a2.value;
     });
     const root = (_a = value.value) == null ? void 0 : _a.root;
+    if (!parameter) {
+      return null;
+    }
+    const placeholderProp = (_b = props.placeholder) != null ? _b : contextualEditingDefaultPlaceholder;
+    const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: props.parameterId }) : placeholderProp;
     if (isRichTextNode2(root)) {
-      return () => h18(
+      return isContextualEditing && isRichTextValueConsideredEmpty(value.value) ? () => h21("p", {}, h21("i", {}, computedPlaceholder)) : () => h21(
         UniformRichTextNode,
         {
           node: root,
@@ -612,7 +650,7 @@ import {
   mapSlotToTestVariations
 } from "@uniformdev/canvas";
 import { Personalize, Test } from "@uniformdev/context-vue";
-import { computed as computed5, defineComponent as defineComponent8, h as h19 } from "vue-demi";
+import { computed as computed5, defineComponent as defineComponent8, h as h22 } from "vue-demi";
 
 // src/helpers/convertComponentToProps.ts
 function convertComponentToProps(component) {
@@ -683,7 +721,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 h19(Personalize, {
+  return h22(Personalize, {
     name,
     // TODO: Fix the `as unknown`
     component: (variant) => resolveRenderer(variant),
@@ -696,7 +734,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 h19(Test, {
+  return h22(Test, {
     variations: finalVariants,
     name: testName,
     component: (variant) => resolveRenderer(variant)
@@ -750,13 +788,13 @@ function renderComponent({
   const resolvedComponent = resolveRenderer == null ? void 0 : resolveRenderer(component);
   if (resolvedComponent) {
     const props = convertComponentToProps(component);
-    return h19(
+    return h22(
       UniformComponent,
       { data: component, resolveRenderer },
-      () => h19(
+      () => h22(
         ContextualEditingComponentWrapper,
         { component, parentComponent, slotName, indexInSlot, slotChildrenCount },
-        { default: () => h19(resolvedComponent, props), emptyPlaceholder }
+        { default: () => h22(resolvedComponent, props), emptyPlaceholder }
       )
     );
   }
@@ -764,7 +802,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 h19("");
+  return h22("");
 }
 
 // src/components/UniformText.ts
@@ -773,7 +811,7 @@ import {
   ATTRIBUTE_PARAMETER_VALUE,
   ATTRIBUTE_PLACEHOLDER
 } from "@uniformdev/canvas";
-import { computed as computed6, defineComponent as defineComponent9, h as h20, ref as ref2 } from "vue-demi";
+import { computed as computed6, defineComponent as defineComponent9, h as h23, ref as ref2 } from "vue-demi";
 var DEFAULT_ELEMENT_TYPE = "span";
 var UniformText = defineComponent9({
   name: "UniformText",
@@ -827,7 +865,7 @@ var UniformText = defineComponent9({
     if (!isContextualEditing) {
       return () => {
         var _a2, _b, _c, _d;
-        return h20(
+        return h23(
           (_a2 = props.as) != null ? _a2 : DEFAULT_ELEMENT_TYPE,
           { style: props.isMultiline ? { whiteSpace: "pre-wrap" } : {} },
           (_d = (_c = (_b = context.slots).default) == null ? void 0 : _c.call(_b, value.value)) != null ? _d : value.value
@@ -838,7 +876,7 @@ var UniformText = defineComponent9({
     const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: props.parameterId }) : placeholderProp;
     return () => {
       var _a2, _b, _c, _d, _e;
-      return h20(
+      return h23(
         (_a2 = props.as) != null ? _a2 : DEFAULT_ELEMENT_TYPE,
         {
           ...getParameterAttributes({
@@ -907,6 +945,9 @@ export {
   ParagraphRichTextNode,
   QuoteRichTextNode,
   RootRichTextNode,
+  TableCellRichTextNode,
+  TableRichTextNode,
+  TableRowRichTextNode,
   TextRichTextNode,
   UniformComponent,
   UniformComposition,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-vue",
-  "version": "19.180.0",
+  "version": "19.181.1",
   "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.180.0",
-    "@uniformdev/context-vue": "19.180.0",
-    "@uniformdev/richtext": "19.180.0",
+    "@uniformdev/canvas": "19.181.1",
+    "@uniformdev/context-vue": "19.181.1",
+    "@uniformdev/richtext": "19.181.1",
     "vue-demi": "^0.14.0"
   },
   "peerDependencies": {
@@ -59,5 +59,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "309600b88571d0ffb2b80d7d2c27b7aa3e5ae72b"
+  "gitHead": "b9bb017045427d3387878b65a7bddb8ae4ef1140"
 }