@dotcms/vue 26.7.21-1 → 26.7.27-1

package/index.js

@@ -1,12 +1,12 @@
-import { inject as ee, isRef as le, isReactive as ie, toRaw as j, shallowRef as ue, toValue as L, watch as V, onMounted as b, onBeforeUnmount as K, ref as N, computed as c, defineComponent as v, unref as E, renderSlot as S, createCommentVNode as T, provide as de, openBlock as r, createElementBlock as i, createElementVNode as y, createTextVNode as C, normalizeStyle as w, toDisplayString as O, mergeProps as $, Fragment as k, createBlock as f, resolveDynamicComponent as D, normalizeProps as R, getCurrentInstance as me, renderList as M, normalizeClass as W, markRaw as te, useSlots as pe, createVNode as h, withCtx as B, resolveComponent as ne } from "vue";
+import { inject as ee, isRef as le, isReactive as ie, toRaw as j, shallowRef as ue, toValue as L, watch as V, onMounted as b, onBeforeUnmount as K, ref as N, computed as c, defineComponent as p, unref as E, renderSlot as S, createCommentVNode as T, provide as de, openBlock as r, createElementBlock as i, createElementVNode as y, createTextVNode as g, normalizeStyle as w, toDisplayString as O, mergeProps as $, Fragment as k, createBlock as f, resolveDynamicComponent as D, normalizeProps as R, getCurrentInstance as me, renderList as M, normalizeClass as W, markRaw as te, useSlots as pe, createVNode as h, withCtx as B, resolveComponent as ne } from "vue";
 import { createDotCMSClient as ve } from "@dotcms/client";
-import { UVEEventType as fe, UVE_MODE as P, DotCMSUVEAction as z } from "@dotcms/types";
-import { createUVESubscription as ye, getUVEState as x, initUVE as _e, updateNavigation as ge, sendMessageToUVE as X } from "@dotcms/uve";
+import { UVEEventType as fe, UVE_MODE as U, DotCMSUVEAction as z } from "@dotcms/types";
+import { createUVESubscription as ye, getUVEState as A, initUVE as _e, updateNavigation as ge, sendMessageToUVE as X } from "@dotcms/uve";
 import { registerStyleEditorSchemas as Ce, isDotAnalyticsActive as Q, ANALYTICS_READY_EVENT as J, DEVELOPMENT_MODE as Ee, EMPTY_CONTAINER_STYLE_REACT as oe, getDotContentletAttributes as ke, getAnalyticsContentletAttributes as De, CUSTOM_NO_COMPONENT as Te, getContainersData as Me, getContentletsInContainer as he, getDotContainerAttributes as be, combineClasses as Se, DOT_SECTION_ID_PREFIX as Ne, __DEFAULT_TINYMCE_CONFIG__ as we, __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__ as H, __TINYMCE_PATH_ON_DOTCMS__ as $e, isValidBlocks as Oe } from "@dotcms/uve/internal";
-import xe from "@tinymce/tinymce-vue";
-import { __DOTCMS_UVE_EVENT__ as Ae, BlockEditorDefaultBlocks as Ie } from "@dotcms/types/internal";
+import Ae from "@tinymce/tinymce-vue";
+import { __DOTCMS_UVE_EVENT__ as xe, BlockEditorDefaultBlocks as Ie } from "@dotcms/types/internal";
 const se = /* @__PURE__ */ Symbol("DotCMSClient");
-function qt(t) {
+function Qt(t) {
   const e = ve(t);
   return {
     client: e,
@@ -15,7 +15,7 @@ function qt(t) {
     }
   };
 }
-function zt() {
+function Jt() {
   const t = ee(se, null);
   if (!t)
     throw new Error(
@@ -32,7 +32,7 @@ function Re(t) {
       return e.get(o);
     if (Array.isArray(o)) {
       const d = [];
-      return e.set(o, d), o.forEach((p) => d.push(n(p))), d;
+      return e.set(o, d), o.forEach((v) => d.push(n(v))), d;
     }
     const s = Object.getPrototypeOf(o);
     if (s !== Object.prototype && s !== null)
@@ -45,11 +45,11 @@ function Re(t) {
   };
   return n(t);
 }
-function Xt(t) {
+function Zt(t) {
   const e = ue(L(t));
   let n, a;
   const o = (s) => {
-    if (n?.(), n = void 0, !x())
+    if (n?.(), n = void 0, !A())
       return;
     if (!s) {
       console.warn("[useEditableDotCMSPage]: No page response provided");
@@ -79,32 +79,32 @@ function Le(t) {
   const e = N(!1);
   return b(() => {
     e.value = !0;
-  }), c(() => e.value ? x()?.mode === L(t) : !1);
+  }), c(() => e.value ? A()?.mode === L(t) : !1);
 }
 const Be = /^https?:\/\//;
-function Qt(t = "") {
+function en(t = "") {
   const e = t ? new URL(t).origin : "";
   return (n, a = {}) => {
     if (Be.test(n))
       return n;
-    const { width: o, quality: s = 50, languageId: l = "1" } = a, d = n.includes("/dA/") ? n : `/dA/${n}`, p = o ? `/${o}w` : "";
-    return `${e}${d}${p}/${s}q?language_id=${l}`;
+    const { width: o, quality: s = 50, languageId: l = "1" } = a, d = n.includes("/dA/") ? n : `/dA/${n}`, v = o ? `/${o}w` : "";
+    return `${e}${d}${v}/${s}q?language_id=${l}`;
   };
 }
-const Jt = /* @__PURE__ */ v({
+const tn = /* @__PURE__ */ p({
   __name: "DotCMSShow",
   props: {
-    when: { default: P.EDIT }
+    when: { default: U.EDIT }
   },
   setup(t) {
     const e = t, n = Le(() => e.when);
     return (a, o) => E(n) ? S(a.$slots, "default", { key: 0 }) : T("", !0);
   }
 }), re = /* @__PURE__ */ Symbol("DotCMSPageContext");
-function Pe(t) {
+function Ue(t) {
   de(re, t);
 }
-const Ue = {
+const Pe = {
   pageAsset: {},
   mode: "production",
   userComponents: {},
@@ -112,29 +112,29 @@ const Ue = {
   isAnalyticsActive: !1,
   slots: {}
 };
-function A() {
+function x() {
   return ee(
     re,
-    c(() => Ue)
+    c(() => Pe)
   );
 }
 const Ve = {
   key: 0,
   "data-testid": "error-message",
   style: { padding: "1rem", border: "1px solid #e0e0e0", borderRadius: "4px" }
-}, Fe = /* @__PURE__ */ v({
+}, Fe = /* @__PURE__ */ p({
   __name: "ErrorMessage",
   setup(t) {
-    const e = A(), n = c(() => e.value.isDevMode);
+    const e = x(), n = c(() => e.value.isDevMode);
     return b(() => {
       console.warn("Missing required layout.body property in page");
     }), (a, o) => n.value ? (r(), i("div", Ve, [...o[0] || (o[0] = [
       y("p", { style: { margin: "0 0 0.5rem", color: "#666" } }, [
-        C(" The "),
+        g(" The "),
         y("code", null, "page"),
-        C(" is missing the required "),
+        g(" is missing the required "),
         y("code", null, "layout.body"),
-        C(" property. ")
+        g(" property. ")
       ], -1),
       y("p", { style: { margin: 0, color: "#666" } }, " Make sure the page asset is properly loaded and includes a layout configuration. ", -1)
     ])])) : T("", !0);
@@ -151,19 +151,19 @@ function Ge() {
   }), t;
 }
 function He(t) {
-  const e = x()?.mode;
-  return e ? e === P.EDIT : t === Ee;
+  const e = A()?.mode;
+  return e ? e === U.EDIT : t === Ee;
 }
 function Ye(t) {
   return c(() => He(L(t)));
 }
-const je = /* @__PURE__ */ v({
+const je = /* @__PURE__ */ p({
   __name: "ContainerNotFound",
   props: {
     identifier: {}
   },
   setup(t) {
-    const e = t, n = A(), a = c(() => n.value.isDevMode);
+    const e = t, n = x(), a = c(() => n.value.isDevMode);
     return b(() => {
       a.value && console.error(`Container with identifier ${e.identifier} not found`);
     }), (o, s) => a.value ? (r(), i("div", {
@@ -172,11 +172,11 @@ const je = /* @__PURE__ */ v({
       style: w(E(oe))
     }, " This container with identifier " + O(t.identifier) + " was not found. ", 5)) : T("", !0);
   }
-}), Ke = /* @__PURE__ */ v({
+}), Ke = /* @__PURE__ */ p({
   inheritAttrs: !1,
   __name: "EmptyContainer",
   setup(t) {
-    const e = A(), n = c(() => e.value.isDevMode);
+    const e = x(), n = c(() => e.value.isDevMode);
     return (a, o) => n.value ? (r(), i("div", $({ key: 0 }, a.$attrs, { style: E(oe) }), [...o[0] || (o[0] = [
       y("span", {
         "data-testid": "empty-container-message",
@@ -195,68 +195,68 @@ function We(t) {
 const qe = "dotcms-contentlet", ze = {
   key: 1,
   "data-testid": "no-component"
-}, Xe = /* @__PURE__ */ v({
+}, Xe = /* @__PURE__ */ p({
   __name: "FallbackComponent",
   props: {
     contentlet: {},
     userNoComponent: {}
   },
   setup(t) {
-    const e = t, n = A(), a = c(() => n.value.isDevMode), o = c(() => !!e.userNoComponent);
+    const e = t, n = x(), a = c(() => n.value.isDevMode), o = c(() => !!e.userNoComponent);
     return (s, l) => a.value ? (r(), i(k, { key: 0 }, [
       o.value ? (r(), f(D(t.userNoComponent), R($({ key: 0 }, t.contentlet)), null, 16)) : (r(), i("div", ze, [
-        l[0] || (l[0] = C(" No Component for ", -1)),
+        l[0] || (l[0] = g(" No Component for ", -1)),
         y("strong", null, O(t.contentlet.contentType), 1),
-        l[1] || (l[1] = C(" . ", -1))
+        l[1] || (l[1] = g(" . ", -1))
       ]))
     ], 64)) : T("", !0);
   }
-}), Qe = /* @__PURE__ */ v({
+}), Qe = /* @__PURE__ */ p({
   __name: "Contentlet",
   props: {
     contentlet: {},
     container: {}
   },
   setup(t) {
-    const e = t, n = A(), a = c(() => n.value.isDevMode), o = me(), s = We(
+    const e = t, n = x(), a = c(() => n.value.isDevMode), o = me(), s = We(
       () => o?.proxy?.$el
     ), l = c(() => n.value.isDevMode ? {
       ...ke(e.contentlet, e.container),
       "data-dot-object": "contentlet"
     } : n.value.isAnalyticsActive ? De(e.contentlet) : {}), d = c(
       () => a.value ? { minHeight: s.value ? void 0 : "4rem" } : {}
-    ), p = c(() => {
-      const m = e.contentlet?.identifier, g = m ? n.value.slots?.[m] : void 0;
-      if (g)
-        return () => g({ contentlet: e.contentlet });
+    ), v = c(() => {
+      const m = e.contentlet?.identifier, C = m ? n.value.slots?.[m] : void 0;
+      if (C)
+        return () => C({ contentlet: e.contentlet });
     }), u = c(
       () => n.value.userComponents[e.contentlet?.contentType]
     ), _ = c(
       () => n.value.userComponents[Te]
     );
-    return (m, g) => (r(), i("div", $(l.value, {
+    return (m, C) => (r(), i("div", $(l.value, {
       class: E(qe),
       style: d.value
     }), [
-      p.value ? (r(), f(D(p.value), { key: 0 })) : u.value ? (r(), f(D(u.value), R($({ key: 1 }, t.contentlet)), null, 16)) : (r(), f(Xe, {
+      v.value ? (r(), f(D(v.value), { key: 0 })) : u.value ? (r(), f(D(u.value), R($({ key: 1 }, t.contentlet)), null, 16)) : (r(), f(Xe, {
         key: 2,
         "user-no-component": _.value,
         contentlet: t.contentlet
       }, null, 8, ["user-no-component", "contentlet"]))
     ], 16));
   }
-}), Je = /* @__PURE__ */ v({
+}), Je = /* @__PURE__ */ p({
   __name: "Container",
   props: {
     container: {}
   },
   setup(t) {
-    const e = t, n = A(), a = c(() => Me(n.value.pageAsset, e.container)), o = c(() => he(n.value.pageAsset, e.container)), s = c(() => o.value.length === 0), l = c(
+    const e = t, n = x(), a = c(() => Me(n.value.pageAsset, e.container)), o = c(() => he(n.value.pageAsset, e.container)), s = c(() => o.value.length === 0), l = c(
       () => n.value.isDevMode && a.value ? be(a.value) : {}
     ), d = c(
       () => n.value.isDevMode ? JSON.stringify(a.value) : ""
     );
-    return (p, u) => a.value ? s.value ? (r(), f(Ke, R($({ key: 1 }, l.value)), null, 16)) : (r(), i("div", R($({ key: 2 }, l.value)), [
+    return (v, u) => a.value ? s.value ? (r(), f(Ke, R($({ key: 1 }, l.value)), null, 16)) : (r(), i("div", R($({ key: 2 }, l.value)), [
       (r(!0), i(k, null, M(o.value, (_) => (r(), f(Qe, {
         key: _.identifier,
         contentlet: _,
@@ -267,7 +267,7 @@ const qe = "dotcms-contentlet", ze = {
       identifier: t.container.identifier
     }, null, 8, ["identifier"]));
   }
-}), Ze = /* @__PURE__ */ v({
+}), Ze = /* @__PURE__ */ p({
   __name: "Column",
   props: {
     column: {}
@@ -291,7 +291,7 @@ const qe = "dotcms-contentlet", ze = {
       ], 2)
     ], 4));
   }
-}), et = ["id"], tt = /* @__PURE__ */ v({
+}), et = ["id"], tt = /* @__PURE__ */ p({
   __name: "Row",
   props: {
     row: {},
@@ -312,14 +312,14 @@ const qe = "dotcms-contentlet", ze = {
         "data-dot-object": "row",
         style: o
       }, [
-        (r(!0), i(k, null, M(t.row.columns, (d, p) => (r(), f(Ze, {
-          key: p,
+        (r(!0), i(k, null, M(t.row.columns, (d, v) => (r(), f(Ze, {
+          key: v,
           column: d
         }, null, 8, ["column"]))), 128))
       ])
     ], 10, et));
   }
-}), Zt = /* @__PURE__ */ v({
+}), nn = /* @__PURE__ */ p({
   __name: "DotCMSLayoutBody",
   props: {
     page: {},
@@ -328,17 +328,17 @@ const qe = "dotcms-contentlet", ze = {
   },
   setup(t) {
     const e = t, n = Ye(() => e.mode), a = Ge(), o = c(() => {
-      const p = {};
+      const v = {};
       for (const u of Object.keys(e.components))
-        p[u] = j(e.components[u]);
-      return te(p);
+        v[u] = j(e.components[u]);
+      return te(v);
     }), s = pe(), l = c(() => {
-      const p = {}, u = Object.entries(s);
+      const v = {}, u = Object.entries(s);
       for (const [_, m] of u)
-        m && _.startsWith(Z) && (p[_.slice(Z.length)] = m);
-      return p;
+        m && _.startsWith(Z) && (v[_.slice(Z.length)] = m);
+      return v;
     });
-    Pe(
+    Ue(
       c(() => ({
         pageAsset: e.page,
         mode: e.mode,
@@ -349,7 +349,7 @@ const qe = "dotcms-contentlet", ze = {
       }))
     );
     const d = c(() => e.page?.layout?.body?.rows);
-    return (p, u) => d.value ? (r(!0), i(k, { key: 0 }, M(d.value, (_, m) => (r(), f(tt, {
+    return (v, u) => d.value ? (r(!0), i(k, { key: 0 }, M(d.value, (_, m) => (r(), f(tt, {
       key: m,
       row: _,
       index: m + 1
@@ -375,7 +375,7 @@ const qe = "dotcms-contentlet", ze = {
 }, ot = ["innerHTML"], st = {
   key: 1,
   style: { outline: "2px solid #006ce7", borderRadius: "4px" }
-}, en = /* @__PURE__ */ v({
+}, on = /* @__PURE__ */ p({
   __name: "DotCMSEditableText",
   props: {
     contentlet: {},
@@ -391,9 +391,9 @@ const qe = "dotcms-contentlet", ze = {
         s.value = e.contentlet?.[e.fieldName] || "", n.value?.setContent(s.value, { format: e.format });
       }
     );
-    const d = (m, g) => {
-      n.value = g;
-    }, p = (m) => {
+    const d = (m, C) => {
+      n.value = C;
+    }, v = (m) => {
       if (Number(
         e.contentlet.onNumberOfPages ?? 1
       ) <= 1 || n.value?.hasFocus())
@@ -410,44 +410,44 @@ const qe = "dotcms-contentlet", ze = {
       const m = n.value?.getContent({ format: e.format }) || "";
       if (!n.value?.isDirty() || m === s.value)
         return;
-      const { inode: g, languageId: I } = e.contentlet;
+      const { inode: C, languageId: I } = e.contentlet;
       X({
         action: z.UPDATE_CONTENTLET_INLINE_EDITING,
         payload: {
           content: m,
-          dataset: { inode: g, langId: I, fieldName: e.fieldName }
+          dataset: { inode: C, langId: I, fieldName: e.fieldName }
         }
       });
     }, _ = ({ data: m }) => {
-      const { name: g, payload: I } = m ?? {};
-      if (g !== Ae.UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS)
+      const { name: C, payload: I } = m ?? {};
+      if (C !== xe.UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS)
         return;
       const { oldInode: G, inode: ae, fieldName: ce } = I ?? {}, q = e.contentlet.inode;
       (q === G || q === ae) && ce === e.fieldName && n.value?.focus();
     };
     return b(() => {
-      const m = x();
-      if (o.value = m?.mode === P.EDIT && !!m?.dotCMSHost?.length, !e.contentlet || !e.fieldName) {
+      const m = A();
+      if (o.value = m?.mode === U.EDIT && !!m?.dotCMSHost?.length, !e.contentlet || !e.fieldName) {
         console.error(
           "[DotCMSEditableText]: contentlet or fieldName is missing. Ensure all needed props are passed to view and edit the content."
         );
         return;
       }
-      if (m && m.mode !== P.EDIT) {
+      if (m && m.mode !== U.EDIT) {
         console.warn("[DotCMSEditableText]: TinyMCE is not available in the current mode");
         return;
       }
       m?.dotCMSHost && (a.value = new URL($e, m.dotCMSHost).toString(), window.addEventListener("message", _));
     }), K(() => {
       window.removeEventListener("message", _);
-    }), (m, g) => o.value ? (r(), i("div", st, [
-      h(E(xe), {
+    }), (m, C) => o.value ? (r(), i("div", st, [
+      h(E(Ae), {
         "tinymce-script-src": a.value,
         inline: !0,
         init: l.value,
         "initial-value": s.value,
         onInit: d,
-        onMousedown: p,
+        onMousedown: v,
         onFocusout: u
       }, null, 8, ["tinymce-script-src", "init", "initial-value"])
     ])) : (r(), i("span", {
@@ -466,7 +466,7 @@ function at(t, e) {
     S(t.$slots, "default")
   ]);
 }
-const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it = /* @__PURE__ */ v({
+const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it = /* @__PURE__ */ p({
   __name: "CodeBlock",
   props: {
     node: {}
@@ -479,7 +479,27 @@ const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it =
       ])
     ], 8, lt));
   }
-}), ut = /* @__PURE__ */ v({
+}), ut = {
+  controls: "",
+  preload: "metadata"
+}, dt = ["src", "type"], mt = /* @__PURE__ */ p({
+  __name: "DotAudio",
+  props: {
+    node: {}
+  },
+  setup(t) {
+    const e = t, n = c(() => e.node.attrs ?? {});
+    return (a, o) => (r(), i("audio", ut, [
+      y("source", {
+        src: n.value.src,
+        type: n.value.mimeType
+      }, null, 8, dt),
+      o[0] || (o[0] = g(" Your browser does not support the ", -1)),
+      o[1] || (o[1] = y("code", null, "audio", -1)),
+      o[2] || (o[2] = g(" element. ", -1))
+    ]));
+  }
+}), pt = /* @__PURE__ */ p({
   __name: "NoComponentProvided",
   props: {
     contentType: {}
@@ -499,21 +519,21 @@ const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it =
       style: e
     }, [
       y("strong", { style: n }, "Dev Warning"),
-      o[0] || (o[0] = C(" : No component or custom renderer provided for content type ", -1)),
+      o[0] || (o[0] = g(" : No component or custom renderer provided for content type ", -1)),
       y("strong", { style: n }, O(t.contentType || "Unknown"), 1),
-      o[1] || (o[1] = C(" . ", -1)),
+      o[1] || (o[1] = g(" . ", -1)),
       o[2] || (o[2] = y("br", null, null, -1)),
-      o[3] || (o[3] = C(" Please refer to the ", -1)),
+      o[3] || (o[3] = g(" Please refer to the ", -1)),
       y("a", {
         href: "https://dev.dotcms.com/docs/block-editor",
         target: "_blank",
         rel: "noopener noreferrer",
         style: n
       }, " Block Editor Custom Renderers Documentation "),
-      o[4] || (o[4] = C(" for guidance. ", -1))
+      o[4] || (o[4] = g(" for guidance. ", -1))
     ]));
   }
-}), dt = "[DotCMSBlockEditorRenderer]: No data provided for Contentlet Block. Try to add a contentlet to the block editor. If the error persists, please contact the DotCMS support team.", mt = /* @__PURE__ */ v({
+}), vt = "[DotCMSBlockEditorRenderer]: No data provided for Contentlet Block. Try to add a contentlet to the block editor. If the error persists, please contact the DotCMS support team.", ft = /* @__PURE__ */ p({
   __name: "DotContent",
   props: {
     node: {},
@@ -525,10 +545,10 @@ const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it =
     return V(
       l,
       (d) => {
-        d === "no-data" ? console.error(dt) : d === "no-component" && console.warn(e(o.value));
+        d === "no-data" ? console.error(vt) : d === "no-component" && console.warn(e(o.value));
       },
       { immediate: !0 }
-    ), (d, p) => l.value === "dev-warning" ? (r(), f(ut, {
+    ), (d, v) => l.value === "dev-warning" ? (r(), f(pt, {
       key: 0,
       "content-type": o.value
     }, null, 8, ["content-type"])) : l.value === "render" ? (r(), f(D(s.value), {
@@ -536,7 +556,7 @@ const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it =
       node: t.node
     }, null, 8, ["node"])) : T("", !0);
   }
-}), pt = ["alt", "src"], vt = /* @__PURE__ */ v({
+}), yt = ["alt", "src"], _t = /* @__PURE__ */ p({
   __name: "DotImage",
   props: {
     node: {}
@@ -555,10 +575,10 @@ const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it =
         alt: n.value.alt,
         src: n.value.src,
         style: w(o.value)
-      }, null, 12, pt)
+      }, null, 12, yt)
     ], 4));
   }
-}), ft = ["width", "height", "poster"], yt = ["src", "type"], _t = /* @__PURE__ */ v({
+}), gt = ["width", "height", "poster"], Ct = ["src", "type"], Et = /* @__PURE__ */ p({
   __name: "DotVideo",
   props: {
     node: {}
@@ -580,13 +600,13 @@ const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it =
       y("source", {
         src: n.value.src,
         type: n.value.mimeType
-      }, null, 8, yt),
-      s[1] || (s[1] = C(" Your browser does not support the ", -1)),
+      }, null, 8, Ct),
+      s[1] || (s[1] = g(" Your browser does not support the ", -1)),
       s[2] || (s[2] = y("code", null, "video", -1)),
-      s[3] || (s[3] = C(" element. ", -1))
-    ], 8, ft));
+      s[3] || (s[3] = g(" element. ", -1))
+    ], 8, gt));
   }
-}), gt = /* @__PURE__ */ v({
+}), kt = /* @__PURE__ */ p({
   __name: "GridBlock",
   props: {
     node: {},
@@ -613,7 +633,7 @@ const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it =
         class: "grid-block__column",
         style: w({ gridColumn: `span ${n.value[d] ?? 6}` })
       }, [
-        h(U, {
+        h(P, {
           content: l.content,
           "custom-renderers": t.customRenderers,
           "is-dev-mode": t.isDevMode
@@ -621,7 +641,7 @@ const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it =
       ], 4))), 128))
     ]));
   }
-}), Ct = /* @__PURE__ */ v({
+}), Dt = /* @__PURE__ */ p({
   __name: "Heading",
   props: {
     node: {}
@@ -635,19 +655,19 @@ const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it =
       _: 3
     }));
   }
-}), Et = {};
-function kt(t, e) {
+}), Tt = {};
+function Mt(t, e) {
   return r(), i("li", null, [
     S(t.$slots, "default")
   ]);
 }
-const Dt = /* @__PURE__ */ F(Et, [["render", kt]]), Tt = {};
-function Mt(t, e) {
+const ht = /* @__PURE__ */ F(Tt, [["render", Mt]]), bt = {};
+function St(t, e) {
   return r(), i("ol", null, [
     S(t.$slots, "default")
   ]);
 }
-const ht = /* @__PURE__ */ F(Tt, [["render", Mt]]), bt = /* @__PURE__ */ v({
+const Nt = /* @__PURE__ */ F(bt, [["render", St]]), wt = /* @__PURE__ */ p({
   __name: "Paragraph",
   props: {
     node: {}
@@ -660,13 +680,13 @@ const ht = /* @__PURE__ */ F(Tt, [["render", Mt]]), bt = /* @__PURE__ */ v({
       S(a.$slots, "default")
     ], 4));
   }
-}), St = {};
-function Nt(t, e) {
+}), $t = {};
+function Ot(t, e) {
   return r(), i("blockquote", null, [
     S(t.$slots, "default")
   ]);
 }
-const wt = /* @__PURE__ */ F(St, [["render", Nt]]), $t = ["aria-label", "aria-labelledby"], Ot = { key: 0 }, xt = ["colspan", "rowspan", "scope"], At = ["colspan", "rowspan"], It = /* @__PURE__ */ v({
+const At = /* @__PURE__ */ F($t, [["render", Ot]]), xt = ["aria-label", "aria-labelledby"], It = { key: 0 }, Rt = ["colspan", "rowspan", "scope"], Lt = ["colspan", "rowspan"], Bt = /* @__PURE__ */ p({
   __name: "TableRenderer",
   props: {
     content: {},
@@ -676,17 +696,17 @@ const wt = /* @__PURE__ */ F(St, [["render", Nt]]), $t = ["aria-label", "aria-la
   },
   setup(t) {
     const e = t, n = c(() => e.attrs?.caption || void 0), a = c(() => e.attrs?.ariaLabel || void 0), o = c(() => e.attrs?.ariaLabelledby || void 0), s = (d) => Number(d.attrs?.colspan || 1), l = (d) => Number(d.attrs?.rowspan || 1);
-    return (d, p) => (r(), i("table", {
+    return (d, v) => (r(), i("table", {
       "aria-label": a.value,
       "aria-labelledby": o.value
     }, [
-      n.value ? (r(), i("caption", Ot, O(n.value), 1)) : T("", !0),
+      n.value ? (r(), i("caption", It, O(n.value), 1)) : T("", !0),
       y("tbody", null, [
         (r(!0), i(k, null, M(t.content, (u, _) => (r(), i("tr", {
           key: `row-${_}`
         }, [
-          (r(!0), i(k, null, M(u.content ?? [], (m, g) => (r(), i(k, {
-            key: `cell-${g}`
+          (r(!0), i(k, null, M(u.content ?? [], (m, C) => (r(), i(k, {
+            key: `cell-${C}`
           }, [
             m.type === "tableHeader" ? (r(), i("th", {
               key: 0,
@@ -694,28 +714,28 @@ const wt = /* @__PURE__ */ F(St, [["render", Nt]]), $t = ["aria-label", "aria-la
               rowspan: l(m),
               scope: m.attrs?.scope || void 0
             }, [
-              h(U, {
+              h(P, {
                 content: m.content ?? [],
                 "custom-renderers": t.customRenderers,
                 "is-dev-mode": t.isDevMode
               }, null, 8, ["content", "custom-renderers", "is-dev-mode"])
-            ], 8, xt)) : (r(), i("td", {
+            ], 8, Rt)) : (r(), i("td", {
               key: 1,
               colspan: s(m),
               rowspan: l(m)
             }, [
-              h(U, {
+              h(P, {
                 content: m.content ?? [],
                 "custom-renderers": t.customRenderers,
                 "is-dev-mode": t.isDevMode
               }, null, 8, ["content", "custom-renderers", "is-dev-mode"])
-            ], 8, At))
+            ], 8, Lt))
           ], 64))), 128))
         ]))), 128))
       ])
-    ], 8, $t));
+    ], 8, xt));
   }
-}), Rt = /* @__PURE__ */ v({
+}), Ut = /* @__PURE__ */ p({
   __name: "TextBlock",
   props: {
     text: {},
@@ -731,7 +751,7 @@ const wt = /* @__PURE__ */ F(St, [["render", Nt]]), $t = ["aria-label", "aria-la
       subscript: "sub",
       link: "a"
     }, a = c(() => e.marks ?? []), o = c(() => a.value[0]), s = c(() => a.value.slice(1)), l = c(() => o.value ? n[o.value.type] : void 0), d = c(() => o.value?.attrs ?? {});
-    return (p, u) => {
+    return (v, u) => {
       const _ = ne("TextBlock", !0);
       return l.value ? (r(), f(D(l.value), R($({ key: 0 }, d.value)), {
         default: B(() => [
@@ -742,11 +762,11 @@ const wt = /* @__PURE__ */ F(St, [["render", Nt]]), $t = ["aria-label", "aria-la
         ]),
         _: 1
       }, 16)) : (r(), i(k, { key: 1 }, [
-        C(O(t.text), 1)
+        g(O(t.text), 1)
       ], 64));
     };
   }
-}), Lt = /* @__PURE__ */ v({
+}), Pt = /* @__PURE__ */ p({
   __name: "UnknownBlock",
   props: {
     node: {}
@@ -762,19 +782,19 @@ const wt = /* @__PURE__ */ F(St, [["render", Nt]]), $t = ["aria-label", "aria-la
       border: "1px solid #fc8181"
     };
     return b(() => {
-      x() || console.warn(
+      A() || console.warn(
         `[DotCMSBlockEditorRenderer]: Unknown block type "${e.node?.type}". No renderer was found for it.`
       );
-    }), (a, o) => E(x)() ? (r(), i("div", {
+    }), (a, o) => E(A)() ? (r(), i("div", {
       key: 0,
       "data-testid": "unknown-block",
       style: n
     }, [
-      o[0] || (o[0] = C(" Unknown block type: ", -1)),
+      o[0] || (o[0] = g(" Unknown block type: ", -1)),
       y("strong", null, O(t.node?.type), 1)
     ])) : T("", !0);
   }
-}), Bt = { key: 4 }, Pt = { key: 5 }, U = /* @__PURE__ */ v({
+}), Vt = { key: 4 }, Ft = { key: 5 }, P = /* @__PURE__ */ p({
   __name: "BlockEditorBlock",
   props: {
     content: {},
@@ -783,19 +803,20 @@ const wt = /* @__PURE__ */ F(St, [["render", Nt]]), $t = ["aria-label", "aria-la
   },
   setup(t) {
     const e = Ie, n = {
-      [e.PARAGRAPH]: bt,
-      [e.HEADING]: Ct,
+      [e.PARAGRAPH]: wt,
+      [e.HEADING]: Dt,
       [e.BULLET_LIST]: ct,
-      [e.ORDERED_LIST]: ht,
-      [e.LIST_ITEM]: Dt,
-      [e.BLOCK_QUOTE]: wt,
+      [e.ORDERED_LIST]: Nt,
+      [e.LIST_ITEM]: ht,
+      [e.BLOCK_QUOTE]: At,
       [e.CODE_BLOCK]: it
     }, a = {
-      [e.DOT_IMAGE]: vt,
-      [e.DOT_VIDEO]: _t
+      [e.DOT_IMAGE]: _t,
+      [e.DOT_VIDEO]: Et,
+      [e.DOT_AUDIO]: mt
     }, o = (l) => n[l], s = (l) => a[l];
     return (l, d) => {
-      const p = ne("BlockEditorBlock", !0);
+      const v = ne("BlockEditorBlock", !0);
       return r(!0), i(k, null, M(t.content ?? [], (u, _) => (r(), i(k, {
         key: `${u.type}-${_}`
       }, [
@@ -804,7 +825,7 @@ const wt = /* @__PURE__ */ F(St, [["render", Nt]]), $t = ["aria-label", "aria-la
           node: u
         }, {
           default: B(() => [
-            h(p, {
+            h(v, {
               content: u.content,
               "custom-renderers": t.customRenderers,
               "is-dev-mode": t.isDevMode
@@ -816,47 +837,47 @@ const wt = /* @__PURE__ */ F(St, [["render", Nt]]), $t = ["aria-label", "aria-la
           node: u
         }, {
           default: B(() => [
-            h(p, {
+            h(v, {
               content: u.content,
               "custom-renderers": t.customRenderers,
               "is-dev-mode": t.isDevMode
             }, null, 8, ["content", "custom-renderers", "is-dev-mode"])
           ]),
           _: 2
-        }, 1032, ["node"])) : u.type === E(e).TEXT ? (r(), f(Rt, {
+        }, 1032, ["node"])) : u.type === E(e).TEXT ? (r(), f(Ut, {
           key: 2,
           text: u.text,
           marks: u.marks
         }, null, 8, ["text", "marks"])) : s(u.type) ? (r(), f(D(s(u.type)), {
           key: 3,
           node: u
-        }, null, 8, ["node"])) : u.type === E(e).HARDBREAK ? (r(), i("br", Bt)) : u.type === E(e).HORIZONTAL_RULE ? (r(), i("hr", Pt)) : u.type === E(e).TABLE ? (r(), f(It, {
+        }, null, 8, ["node"])) : u.type === E(e).HARDBREAK ? (r(), i("br", Vt)) : u.type === E(e).HORIZONTAL_RULE ? (r(), i("hr", Ft)) : u.type === E(e).TABLE ? (r(), f(Bt, {
           key: 6,
           content: u.content ?? [],
           attrs: u.attrs,
           "custom-renderers": t.customRenderers,
           "is-dev-mode": t.isDevMode
-        }, null, 8, ["content", "attrs", "custom-renderers", "is-dev-mode"])) : u.type === E(e).GRID_BLOCK ? (r(), f(gt, {
+        }, null, 8, ["content", "attrs", "custom-renderers", "is-dev-mode"])) : u.type === E(e).GRID_BLOCK ? (r(), f(kt, {
           key: 7,
           node: u,
           "custom-renderers": t.customRenderers,
           "is-dev-mode": t.isDevMode
-        }, null, 8, ["node", "custom-renderers", "is-dev-mode"])) : u.type === E(e).DOT_CONTENT ? (r(), f(mt, {
+        }, null, 8, ["node", "custom-renderers", "is-dev-mode"])) : u.type === E(e).DOT_CONTENT ? (r(), f(ft, {
           key: 8,
           node: u,
           "custom-renderers": t.customRenderers,
           "is-dev-mode": t.isDevMode
-        }, null, 8, ["node", "custom-renderers", "is-dev-mode"])) : (r(), f(Lt, {
+        }, null, 8, ["node", "custom-renderers", "is-dev-mode"])) : (r(), f(Pt, {
           key: 9,
           node: u
         }, null, 8, ["node"]))
       ], 64))), 128);
     };
   }
-}), Ut = {
+}), Gt = {
   key: 0,
   "data-testid": "invalid-blocks-message"
-}, tn = /* @__PURE__ */ v({
+}, sn = /* @__PURE__ */ p({
   __name: "DotCMSBlockEditorRenderer",
   props: {
     blocks: {},
@@ -880,13 +901,13 @@ const wt = /* @__PURE__ */ F(St, [["render", Nt]]), $t = ["aria-label", "aria-la
         s && console.error(s);
       },
       { immediate: !0 }
-    ), (s, l) => o.value && t.isDevMode ? (r(), i("div", Ut, O(o.value), 1)) : o.value ? T("", !0) : (r(), i("div", {
+    ), (s, l) => o.value && t.isDevMode ? (r(), i("div", Gt, O(o.value), 1)) : o.value ? T("", !0) : (r(), i("div", {
       key: 1,
       class: W(t.className),
       style: w(t.style),
       "data-testid": "dot-block-editor-container"
     }, [
-      h(U, {
+      h(P, {
         content: t.blocks?.content,
         "custom-renderers": n.value,
         "is-dev-mode": t.isDevMode
@@ -897,16 +918,16 @@ const wt = /* @__PURE__ */ F(St, [["render", Nt]]), $t = ["aria-label", "aria-la
 export {
   se as DOTCMS_CLIENT,
   re as DOTCMS_PAGE_CONTEXT,
-  tn as DotCMSBlockEditorRenderer,
-  en as DotCMSEditableText,
-  Zt as DotCMSLayoutBody,
-  Jt as DotCMSShow,
-  Qt as createDotCMSImageLoader,
-  qt as createDotCMSVue,
-  Pe as provideDotCMSPageContext,
+  sn as DotCMSBlockEditorRenderer,
+  on as DotCMSEditableText,
+  nn as DotCMSLayoutBody,
+  tn as DotCMSShow,
+  en as createDotCMSImageLoader,
+  Qt as createDotCMSVue,
+  Ue as provideDotCMSPageContext,
   Re as toPlain,
-  zt as useDotCMSClient,
-  A as useDotCMSPageContext,
+  Jt as useDotCMSClient,
+  x as useDotCMSPageContext,
   Le as useDotCMSShowWhen,
-  Xt as useEditableDotCMSPage
+  Zt as useEditableDotCMSPage
 };

package/lib/components/DotCMSBlockEditorRenderer/components/blocks/DotAudio.vue.d.ts

@@ -0,0 +1,7 @@
+import { BlockEditorNode } from '@dotcms/types';
+/** Renders a dotCMS audio block. Mirrors DotVideo without poster/width/height. */
+type __VLS_Props = {
+    node: BlockEditorNode;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLAudioElement>;
+export default _default;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@dotcms/vue",
-  "version": "26.07.21-01",
+  "version": "26.07.27-01",
   "peerDependencies": {
     "vue": ">=3.4"
   },
   "dependencies": {
-    "@dotcms/uve": "26.07.21-01",
-    "@dotcms/client": "26.07.21-01",
+    "@dotcms/uve": "26.07.27-01",
+    "@dotcms/client": "26.07.27-01",
     "@tinymce/tinymce-vue": "^6.1.0"
   },
   "devDependencies": {