@uniformdev/canvas-vue 19.35.1-alpha.8 → 19.35.2

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as vue_demi from 'vue-demi';
 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';
+export { GetParameterAttributesProps, createUniformApiEnhancer, getParameterAttributes } from '@uniformdev/canvas';
 import { RichTextNode } from '@uniformdev/richtext';
 
 type DefaultNotImplementedComponentProps = {
@@ -49,15 +49,75 @@ type ComponentProps<TProps = unknown> = TProps & {
 };
 type ResolveRenderer = (componentInstance: ComponentInstance) => ConcreteComponent<any>;
 
-type UniformCurrentComponent = {
-    data?: UniformComponentProps['data'];
-    resolveRenderer?: UniformComponentProps['resolveRenderer'];
-    behaviorTracking?: UniformComponentProps['behaviorTracking'];
+type UniformTextProps = {
+    /**
+     * The name of the  HTML tag to render.
+     * @default "span"
+     */
+    as?: string;
+    /** The ID of the parameter. */
+    parameterId: string;
+    /**
+     * When set to true, it adds `whiteSpace: 'pre-wrap'` to the styles of the root element to allow the rendering of line breaks.
+     * @default false
+     */
+    isMultiline?: boolean;
+    /**
+     * 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);
 };
 /**
- * Gets the data of the closest `<UniformComponent />` ancestor.
- */
-declare const useUniformCurrentComponent: () => UniformCurrentComponent;
+ * Adds inline editing capability to text parameters
+ * @deprecated This component is unstable, and not ready for production usage.
+ **/
+declare const UniformText: vue_demi.DefineComponent<{
+    as: {
+        type: PropType<string | undefined>;
+        default: string;
+    };
+    parameterId: {
+        type: PropType<string>;
+        required: true;
+    };
+    isMultiline: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+    placeholder: {
+        type: PropType<string | ((parameter: {
+            id: string;
+        }) => string | undefined) | undefined>;
+    };
+}, (() => 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<{
+    as: {
+        type: PropType<string | undefined>;
+        default: string;
+    };
+    parameterId: {
+        type: PropType<string>;
+        required: true;
+    };
+    isMultiline: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+    placeholder: {
+        type: PropType<string | ((parameter: {
+            id: string;
+        }) => string | undefined) | undefined>;
+    };
+}>>, {
+    as: string | undefined;
+    isMultiline: boolean | undefined;
+}>;
+
 type UniformComponentProps = {
     /** A dynamic vue component that provides data to the Uniform Canvas SlotContent component via provide/inject */
     data?: ComponentInstance | RootComponentInstance;
@@ -74,7 +134,21 @@ type UniformComponentProps = {
      * Default: onView
      */
     behaviorTracking?: 'onLoad' | 'onView';
+    /**
+     * The default placeholder to pass to the parameter component that support inline editing (such as UniformText).
+     */
+    contextualEditingDefaultPlaceholder?: UniformTextProps['placeholder'];
+};
+type UniformCurrentComponent = {
+    data?: UniformComponentProps['data'];
+    resolveRenderer?: UniformComponentProps['resolveRenderer'];
+    behaviorTracking?: UniformComponentProps['behaviorTracking'];
+    contextualEditingDefaultPlaceholder?: UniformComponentProps['contextualEditingDefaultPlaceholder'];
 };
+/**
+ * Gets the data of the closest `<UniformComponent />` ancestor.
+ */
+declare const useUniformCurrentComponent: () => UniformCurrentComponent;
 /**
  * Allows the rendering of a Canvas component instance (root or not), and its children if it has any.
  * Note that the actual rendering happens inside `<UniformSlot />`, this component only provides the services needed to achieve that.
@@ -1573,4 +1647,4 @@ declare const globalCompositionEnhancerInjectionKey = "uniformGlobalCompositionE
  */
 declare function convertComponentToProps<T = unknown>(component: ComponentInstance): ComponentProps<T>;
 
-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 };
+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, UniformText, UniformTextProps, UseCompositionEventEffectOptions, UseUniformContextualEditingProps, convertComponentToProps, globalCompositionEnhancerInjectionKey, useCompositionEventEffect, useUniformContextualEditing, useUniformCurrentComponent, useUniformCurrentComposition };

package/dist/index.esm.js

@@ -164,7 +164,7 @@ import {
   EMPTY_COMPOSITION,
   IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID,
   IN_CONTEXT_EDITOR_QUERY_STRING_PARAM,
-  isUpdateCompositionMessage
+  isUpdateCompositionInternalMessage
 } from "@uniformdev/canvas";
 import { computed as computed2, onMounted, ref, watch } from "vue-demi";
 var registeredCompositionIds = /* @__PURE__ */ new Set();
@@ -203,8 +203,8 @@ var useUniformContextualEditing = ({
       if (!channel.value || registeredCompositionIds.has((_e = initialCompositionValue == null ? void 0 : initialCompositionValue.value) == null ? void 0 : _e._id)) {
         return;
       }
-      const unsubscribe = channel.value.on("update-composition", async (message) => {
-        if (!isUpdateCompositionMessage(message)) {
+      const unsubscribe = channel.value.on("update-composition-internal", async (message) => {
+        if (!isUpdateCompositionInternalMessage(message)) {
           return;
         }
         const enhancedComposition = await enhance(message);
@@ -260,7 +260,7 @@ function isInContextEditingMode() {
   return isOpenedByInContextEditor && isAllowlistedReferrer;
 }
 
-// src/utils/constants.ts
+// src/helpers/constants.ts
 var globalCompositionEnhancerInjectionKey = "uniformGlobalCompositionEnhancer";
 
 // src/components/ContextualEditingComponentWrapper.ts
@@ -592,7 +592,7 @@ import {
 import { Personalize, Test } from "@uniformdev/context-vue";
 import { computed as computed5, defineComponent as defineComponent7, h as h18 } from "vue-demi";
 
-// src/utils/convertComponentToProps.ts
+// src/helpers/convertComponentToProps.ts
 function convertComponentToProps(component) {
   var _a;
   const parameters = (_a = component.parameters) != null ? _a : {};
@@ -745,6 +745,101 @@ function renderComponent({
   return h18("");
 }
 
+// src/components/UniformText.ts
+import {
+  ATTRIBUTE_PARAMETER_TYPE,
+  ATTRIBUTE_PARAMETER_VALUE,
+  ATTRIBUTE_PLACEHOLDER
+} from "@uniformdev/canvas";
+import { computed as computed6, defineComponent as defineComponent8, h as h19, ref as ref2 } from "vue-demi";
+var DEFAULT_ELEMENT_TYPE = "span";
+var UniformText = defineComponent8({
+  name: "UniformText",
+  inheritAttrs: true,
+  props: {
+    as: {
+      type: String,
+      default: "span"
+    },
+    parameterId: {
+      type: String,
+      required: true
+    },
+    isMultiline: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String
+    }
+  },
+  setup(props, context) {
+    var _a;
+    const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
+    const { isContextualEditing } = useUniformCurrentComposition();
+    const isFocused = ref2(false);
+    const parameter = computed6(
+      () => {
+        var _a2;
+        return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[props.parameterId];
+      }
+    );
+    const value = computed6(() => {
+      var _a2;
+      return (_a2 = parameter.value) == null ? void 0 : _a2.value;
+    });
+    const isEditable = computed6(() => {
+      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 = computed6(() => isFocused.value && isEditable.value);
+    const handleOnFocus = () => {
+      isFocused.value = true;
+    };
+    const handleOnBlur = () => {
+      isFocused.value = false;
+    };
+    if (!parameter) {
+      console.warn(
+        `UniformText: The parameterId "${props.parameterId}" was not found in the component of type "${componentData == null ? void 0 : componentData.type}"`
+      );
+      return null;
+    }
+    if (!isContextualEditing) {
+      return () => {
+        var _a2, _b, _c, _d;
+        return h19(
+          (_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
+        );
+      };
+    }
+    const placeholderProp = (_a = props.placeholder) != null ? _a : contextualEditingDefaultPlaceholder;
+    const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: props.parameterId }) : placeholderProp;
+    return () => {
+      var _a2, _b, _c, _d, _e;
+      return h19(
+        (_a2 = props.as) != null ? _a2 : DEFAULT_ELEMENT_TYPE,
+        {
+          ...getParameterAttributes({
+            component: componentData,
+            id: props.parameterId,
+            isMultiline: props.isMultiline
+          }),
+          [ATTRIBUTE_PARAMETER_VALUE]: (_b = value.value) != null ? _b : "",
+          [ATTRIBUTE_PARAMETER_TYPE]: "text",
+          [ATTRIBUTE_PLACEHOLDER]: computedPlaceholder,
+          style: props.isMultiline ? { whiteSpace: "pre-wrap" } : {},
+          onFocus: handleOnFocus,
+          onBlur: handleOnBlur
+        },
+        shouldSkipCustomRendering.value ? value.value : (_e = (_d = (_c = context.slots).default) == null ? void 0 : _d.call(_c, value.value)) != null ? _e : value.value
+      );
+    };
+  }
+});
+
 // src/composables/useCompositionEventEffect.ts
 import {
   CANVAS_DRAFT_STATE,
@@ -781,6 +876,9 @@ async function useCompositionEventEffect({
     { immediate: true }
   );
 }
+
+// src/helpers/getParameterAttributes.ts
+import { getParameterAttributes } from "@uniformdev/canvas";
 export {
   DefaultNotImplementedComponent,
   HeadingRichTextNode,
@@ -796,8 +894,10 @@ export {
   UniformRichText,
   UniformRichTextNode,
   UniformSlot,
+  UniformText,
   convertComponentToProps,
   createUniformApiEnhancer,
+  getParameterAttributes,
   globalCompositionEnhancerInjectionKey,
   useCompositionEventEffect,
   useUniformContextualEditing,

package/dist/index.js

@@ -34,8 +34,10 @@ __export(src_exports, {
   UniformRichText: () => UniformRichText,
   UniformRichTextNode: () => UniformRichTextNode,
   UniformSlot: () => UniformSlot,
+  UniformText: () => UniformText,
   convertComponentToProps: () => convertComponentToProps,
   createUniformApiEnhancer: () => import_canvas3.createUniformApiEnhancer,
+  getParameterAttributes: () => import_canvas8.getParameterAttributes,
   globalCompositionEnhancerInjectionKey: () => globalCompositionEnhancerInjectionKey,
   useCompositionEventEffect: () => useCompositionEventEffect,
   useUniformContextualEditing: () => useUniformContextualEditing,
@@ -226,8 +228,8 @@ var useUniformContextualEditing = ({
       if (!channel.value || registeredCompositionIds.has((_e = initialCompositionValue == null ? void 0 : initialCompositionValue.value) == null ? void 0 : _e._id)) {
         return;
       }
-      const unsubscribe = channel.value.on("update-composition", async (message) => {
-        if (!(0, import_canvas3.isUpdateCompositionMessage)(message)) {
+      const unsubscribe = channel.value.on("update-composition-internal", async (message) => {
+        if (!(0, import_canvas3.isUpdateCompositionInternalMessage)(message)) {
           return;
         }
         const enhancedComposition = await enhance(message);
@@ -283,7 +285,7 @@ function isInContextEditingMode() {
   return isOpenedByInContextEditor && isAllowlistedReferrer;
 }
 
-// src/utils/constants.ts
+// src/helpers/constants.ts
 var globalCompositionEnhancerInjectionKey = "uniformGlobalCompositionEnhancer";
 
 // src/components/ContextualEditingComponentWrapper.ts
@@ -603,7 +605,7 @@ var import_canvas5 = require("@uniformdev/canvas");
 var import_context_vue2 = require("@uniformdev/context-vue");
 var import_vue_demi19 = require("vue-demi");
 
-// src/utils/convertComponentToProps.ts
+// src/helpers/convertComponentToProps.ts
 function convertComponentToProps(component) {
   var _a;
   const parameters = (_a = component.parameters) != null ? _a : {};
@@ -756,9 +758,100 @@ function renderComponent({
   return (0, import_vue_demi19.h)("");
 }
 
-// src/composables/useCompositionEventEffect.ts
+// src/components/UniformText.ts
 var import_canvas6 = require("@uniformdev/canvas");
 var import_vue_demi20 = require("vue-demi");
+var DEFAULT_ELEMENT_TYPE = "span";
+var UniformText = (0, import_vue_demi20.defineComponent)({
+  name: "UniformText",
+  inheritAttrs: true,
+  props: {
+    as: {
+      type: String,
+      default: "span"
+    },
+    parameterId: {
+      type: String,
+      required: true
+    },
+    isMultiline: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String
+    }
+  },
+  setup(props, context) {
+    var _a;
+    const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
+    const { isContextualEditing } = useUniformCurrentComposition();
+    const isFocused = (0, import_vue_demi20.ref)(false);
+    const parameter = (0, import_vue_demi20.computed)(
+      () => {
+        var _a2;
+        return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[props.parameterId];
+      }
+    );
+    const value = (0, import_vue_demi20.computed)(() => {
+      var _a2;
+      return (_a2 = parameter.value) == null ? void 0 : _a2.value;
+    });
+    const isEditable = (0, import_vue_demi20.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_demi20.computed)(() => isFocused.value && isEditable.value);
+    const handleOnFocus = () => {
+      isFocused.value = true;
+    };
+    const handleOnBlur = () => {
+      isFocused.value = false;
+    };
+    if (!parameter) {
+      console.warn(
+        `UniformText: The parameterId "${props.parameterId}" was not found in the component of type "${componentData == null ? void 0 : componentData.type}"`
+      );
+      return null;
+    }
+    if (!isContextualEditing) {
+      return () => {
+        var _a2, _b, _c, _d;
+        return (0, import_vue_demi20.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
+        );
+      };
+    }
+    const placeholderProp = (_a = props.placeholder) != null ? _a : contextualEditingDefaultPlaceholder;
+    const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: props.parameterId }) : placeholderProp;
+    return () => {
+      var _a2, _b, _c, _d, _e;
+      return (0, import_vue_demi20.h)(
+        (_a2 = props.as) != null ? _a2 : DEFAULT_ELEMENT_TYPE,
+        {
+          ...(0, import_canvas8.getParameterAttributes)({
+            component: componentData,
+            id: props.parameterId,
+            isMultiline: props.isMultiline
+          }),
+          [import_canvas6.ATTRIBUTE_PARAMETER_VALUE]: (_b = value.value) != null ? _b : "",
+          [import_canvas6.ATTRIBUTE_PARAMETER_TYPE]: "text",
+          [import_canvas6.ATTRIBUTE_PLACEHOLDER]: computedPlaceholder,
+          style: props.isMultiline ? { whiteSpace: "pre-wrap" } : {},
+          onFocus: handleOnFocus,
+          onBlur: handleOnBlur
+        },
+        shouldSkipCustomRendering.value ? value.value : (_e = (_d = (_c = context.slots).default) == null ? void 0 : _d.call(_c, value.value)) != null ? _e : value.value
+      );
+    };
+  }
+});
+
+// src/composables/useCompositionEventEffect.ts
+var import_canvas7 = require("@uniformdev/canvas");
+var import_vue_demi21 = require("vue-demi");
 async function useCompositionEventEffect({
   enabled,
   projectId,
@@ -766,19 +859,19 @@ async function useCompositionEventEffect({
   effect
 }) {
   let unsubscribe;
-  (0, import_vue_demi20.watch)(
+  (0, import_vue_demi21.watch)(
     [() => enabled, () => compositionIdRef.value, () => projectId],
     async () => {
       unsubscribe == null ? void 0 : unsubscribe();
       if (!enabled || !compositionIdRef.value || !projectId) {
         return;
       }
-      const eventBus = await (0, import_canvas6.createEventBus)();
+      const eventBus = await (0, import_canvas7.createEventBus)();
       if (eventBus) {
-        unsubscribe = (0, import_canvas6.subscribeToComposition)({
+        unsubscribe = (0, import_canvas7.subscribeToComposition)({
           eventBus,
           compositionId: compositionIdRef.value,
-          compositionState: import_canvas6.CANVAS_DRAFT_STATE,
+          compositionState: import_canvas7.CANVAS_DRAFT_STATE,
           projectId,
           callback: effect,
           event: "updated"
@@ -788,6 +881,9 @@ async function useCompositionEventEffect({
     { immediate: true }
   );
 }
+
+// src/helpers/getParameterAttributes.ts
+var import_canvas8 = require("@uniformdev/canvas");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DefaultNotImplementedComponent,
@@ -804,8 +900,10 @@ async function useCompositionEventEffect({
   UniformRichText,
   UniformRichTextNode,
   UniformSlot,
+  UniformText,
   convertComponentToProps,
   createUniformApiEnhancer,
+  getParameterAttributes,
   globalCompositionEnhancerInjectionKey,
   useCompositionEventEffect,
   useUniformContextualEditing,

package/dist/index.mjs

@@ -164,7 +164,7 @@ import {
   EMPTY_COMPOSITION,
   IN_CONTEXT_EDITOR_EMBED_SCRIPT_ID,
   IN_CONTEXT_EDITOR_QUERY_STRING_PARAM,
-  isUpdateCompositionMessage
+  isUpdateCompositionInternalMessage
 } from "@uniformdev/canvas";
 import { computed as computed2, onMounted, ref, watch } from "vue-demi";
 var registeredCompositionIds = /* @__PURE__ */ new Set();
@@ -203,8 +203,8 @@ var useUniformContextualEditing = ({
       if (!channel.value || registeredCompositionIds.has((_e = initialCompositionValue == null ? void 0 : initialCompositionValue.value) == null ? void 0 : _e._id)) {
         return;
       }
-      const unsubscribe = channel.value.on("update-composition", async (message) => {
-        if (!isUpdateCompositionMessage(message)) {
+      const unsubscribe = channel.value.on("update-composition-internal", async (message) => {
+        if (!isUpdateCompositionInternalMessage(message)) {
           return;
         }
         const enhancedComposition = await enhance(message);
@@ -260,7 +260,7 @@ function isInContextEditingMode() {
   return isOpenedByInContextEditor && isAllowlistedReferrer;
 }
 
-// src/utils/constants.ts
+// src/helpers/constants.ts
 var globalCompositionEnhancerInjectionKey = "uniformGlobalCompositionEnhancer";
 
 // src/components/ContextualEditingComponentWrapper.ts
@@ -592,7 +592,7 @@ import {
 import { Personalize, Test } from "@uniformdev/context-vue";
 import { computed as computed5, defineComponent as defineComponent7, h as h18 } from "vue-demi";
 
-// src/utils/convertComponentToProps.ts
+// src/helpers/convertComponentToProps.ts
 function convertComponentToProps(component) {
   var _a;
   const parameters = (_a = component.parameters) != null ? _a : {};
@@ -745,6 +745,101 @@ function renderComponent({
   return h18("");
 }
 
+// src/components/UniformText.ts
+import {
+  ATTRIBUTE_PARAMETER_TYPE,
+  ATTRIBUTE_PARAMETER_VALUE,
+  ATTRIBUTE_PLACEHOLDER
+} from "@uniformdev/canvas";
+import { computed as computed6, defineComponent as defineComponent8, h as h19, ref as ref2 } from "vue-demi";
+var DEFAULT_ELEMENT_TYPE = "span";
+var UniformText = defineComponent8({
+  name: "UniformText",
+  inheritAttrs: true,
+  props: {
+    as: {
+      type: String,
+      default: "span"
+    },
+    parameterId: {
+      type: String,
+      required: true
+    },
+    isMultiline: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String
+    }
+  },
+  setup(props, context) {
+    var _a;
+    const { data: componentData, contextualEditingDefaultPlaceholder } = useUniformCurrentComponent();
+    const { isContextualEditing } = useUniformCurrentComposition();
+    const isFocused = ref2(false);
+    const parameter = computed6(
+      () => {
+        var _a2;
+        return (_a2 = componentData == null ? void 0 : componentData.parameters) == null ? void 0 : _a2[props.parameterId];
+      }
+    );
+    const value = computed6(() => {
+      var _a2;
+      return (_a2 = parameter.value) == null ? void 0 : _a2.value;
+    });
+    const isEditable = computed6(() => {
+      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 = computed6(() => isFocused.value && isEditable.value);
+    const handleOnFocus = () => {
+      isFocused.value = true;
+    };
+    const handleOnBlur = () => {
+      isFocused.value = false;
+    };
+    if (!parameter) {
+      console.warn(
+        `UniformText: The parameterId "${props.parameterId}" was not found in the component of type "${componentData == null ? void 0 : componentData.type}"`
+      );
+      return null;
+    }
+    if (!isContextualEditing) {
+      return () => {
+        var _a2, _b, _c, _d;
+        return h19(
+          (_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
+        );
+      };
+    }
+    const placeholderProp = (_a = props.placeholder) != null ? _a : contextualEditingDefaultPlaceholder;
+    const computedPlaceholder = typeof placeholderProp === "function" ? placeholderProp({ id: props.parameterId }) : placeholderProp;
+    return () => {
+      var _a2, _b, _c, _d, _e;
+      return h19(
+        (_a2 = props.as) != null ? _a2 : DEFAULT_ELEMENT_TYPE,
+        {
+          ...getParameterAttributes({
+            component: componentData,
+            id: props.parameterId,
+            isMultiline: props.isMultiline
+          }),
+          [ATTRIBUTE_PARAMETER_VALUE]: (_b = value.value) != null ? _b : "",
+          [ATTRIBUTE_PARAMETER_TYPE]: "text",
+          [ATTRIBUTE_PLACEHOLDER]: computedPlaceholder,
+          style: props.isMultiline ? { whiteSpace: "pre-wrap" } : {},
+          onFocus: handleOnFocus,
+          onBlur: handleOnBlur
+        },
+        shouldSkipCustomRendering.value ? value.value : (_e = (_d = (_c = context.slots).default) == null ? void 0 : _d.call(_c, value.value)) != null ? _e : value.value
+      );
+    };
+  }
+});
+
 // src/composables/useCompositionEventEffect.ts
 import {
   CANVAS_DRAFT_STATE,
@@ -781,6 +876,9 @@ async function useCompositionEventEffect({
     { immediate: true }
   );
 }
+
+// src/helpers/getParameterAttributes.ts
+import { getParameterAttributes } from "@uniformdev/canvas";
 export {
   DefaultNotImplementedComponent,
   HeadingRichTextNode,
@@ -796,8 +894,10 @@ export {
   UniformRichText,
   UniformRichTextNode,
   UniformSlot,
+  UniformText,
   convertComponentToProps,
   createUniformApiEnhancer,
+  getParameterAttributes,
   globalCompositionEnhancerInjectionKey,
   useCompositionEventEffect,
   useUniformContextualEditing,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-vue",
-  "version": "19.35.1-alpha.8+a708c0c03",
+  "version": "19.35.2",
   "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.35.1-alpha.8+a708c0c03",
-    "@uniformdev/context-vue": "19.35.1-alpha.8+a708c0c03",
-    "@uniformdev/richtext": "19.35.1-alpha.8+a708c0c03",
+    "@uniformdev/canvas": "19.35.2",
+    "@uniformdev/context-vue": "19.35.2",
+    "@uniformdev/richtext": "19.35.2",
     "vue-demi": "^0.14.0"
   },
   "peerDependencies": {
@@ -59,5 +59,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a708c0c034aa8375d0bd74e9f619319955b63a19"
+  "gitHead": "64d3270175087c87cfaa29a283aa4a7b0a98fd2c"
 }