@dotcms/vue 26.8.14-1-next.2533 → 26.8.19-1

package/index.js

@@ -1,22 +1,22 @@
-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 { inject as ee, isRef as ce, isReactive as ie, toRaw as j, shallowRef as ue, toValue as L, watch as V, onMounted as S, onBeforeUnmount as K, ref as w, computed as c, defineComponent as p, unref as k, renderSlot as N, createCommentVNode as T, provide as de, openBlock as r, createElementBlock as u, createElementVNode as y, createTextVNode as g, normalizeStyle as M, toDisplayString as O, mergeProps as $, Fragment as E, createBlock as f, resolveDynamicComponent as D, normalizeProps as R, getCurrentInstance as me, renderList as h, normalizeClass as W, markRaw as te, useSlots as pe, createVNode as b, withCtx as B, resolveComponent as ne } from "vue";
 import { createDotCMSClient as ve } from "@dotcms/client";
 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 { registerStyleEditorSchemas as Ce, isDotAnalyticsActive as Q, ANALYTICS_READY_EVENT as J, DEVELOPMENT_MODE as ke, EMPTY_CONTAINER_STYLE_REACT as oe, getDotContentletAttributes as Ee, 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 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) {
+const re = /* @__PURE__ */ Symbol("DotCMSClient");
+function Zt(t) {
   const e = ve(t);
   return {
     client: e,
     install(n) {
-      n.provide(se, e);
+      n.provide(re, e);
     }
   };
 }
-function Jt() {
-  const t = ee(se, null);
+function en() {
+  const t = ee(re, null);
   if (!t)
     throw new Error(
       "[useDotCMSClient] No dotCMS client found. Did you install the plugin with `app.use(createDotCMSVue({ ... }))`?"
@@ -25,27 +25,27 @@ function Jt() {
 }
 function Re(t) {
   const e = /* @__PURE__ */ new WeakMap(), n = (a) => {
-    const o = le(a) ? a.value : ie(a) ? j(a) : a;
+    const o = ce(a) ? a.value : ie(a) ? j(a) : a;
     if (o === null || typeof o != "object")
       return o;
     if (e.has(o))
       return e.get(o);
     if (Array.isArray(o)) {
-      const d = [];
-      return e.set(o, d), o.forEach((v) => d.push(n(v))), d;
+      const i = [];
+      return e.set(o, i), o.forEach((v) => i.push(n(v))), i;
     }
     const s = Object.getPrototypeOf(o);
     if (s !== Object.prototype && s !== null)
       return o;
     const l = {};
     e.set(o, l);
-    for (const d of Object.keys(o))
-      l[d] = n(o[d]);
+    for (const i of Object.keys(o))
+      l[i] = n(o[i]);
     return l;
   };
   return n(t);
 }
-function Zt(t) {
+function tn(t) {
   const e = ue(L(t));
   let n, a;
   const o = (s) => {
@@ -55,8 +55,8 @@ function Zt(t) {
       console.warn("[useEditableDotCMSPage]: No page response provided");
       return;
     }
-    const l = Re(s), d = l?.pageAsset?.page?.pageURI;
-    ({ destroyUVESubscriptions: n } = _e(l)), d && ge(d), l.styleEditorSchemas?.length && Ce(l.styleEditorSchemas);
+    const l = Re(s), i = l?.pageAsset?.page?.pageURI;
+    ({ destroyUVESubscriptions: n } = _e(l)), i && ge(i), l.styleEditorSchemas?.length && Ce(l.styleEditorSchemas);
   };
   return V(
     () => L(t),
@@ -64,7 +64,7 @@ function Zt(t) {
       e.value = s, o(s);
     },
     { immediate: !0 }
-  ), b(() => {
+  ), S(() => {
     ({ unsubscribe: a } = ye(
       fe.CONTENT_CHANGES,
       (s) => {
@@ -76,33 +76,33 @@ function Zt(t) {
   }), e;
 }
 function Le(t) {
-  const e = N(!1);
-  return b(() => {
+  const e = w(!1);
+  return S(() => {
     e.value = !0;
   }), c(() => e.value ? A()?.mode === L(t) : !1);
 }
 const Be = /^https?:\/\//;
-function en(t = "") {
+function nn(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}`, v = o ? `/${o}w` : "";
-    return `${e}${d}${v}/${s}q?language_id=${l}`;
+    const { width: o, quality: s = 50, languageId: l = "1" } = a, i = n.includes("/dA/") ? n : `/dA/${n}`, v = o ? `/${o}w` : "";
+    return `${e}${i}${v}/${s}q?language_id=${l}`;
   };
 }
-const tn = /* @__PURE__ */ p({
+const on = /* @__PURE__ */ p({
   __name: "DotCMSShow",
   props: {
     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);
+    return (a, o) => k(n) ? N(a.$slots, "default", { key: 0 }) : T("", !0);
   }
-}), re = /* @__PURE__ */ Symbol("DotCMSPageContext");
+}), se = /* @__PURE__ */ Symbol("DotCMSPageContext");
 function Ue(t) {
-  de(re, t);
+  de(se, t);
 }
 const Pe = {
   pageAsset: {},
@@ -114,7 +114,7 @@ const Pe = {
 };
 function x() {
   return ee(
-    re,
+    se,
     c(() => Pe)
   );
 }
@@ -126,9 +126,9 @@ const Ve = {
   __name: "ErrorMessage",
   setup(t) {
     const e = x(), n = c(() => e.value.isDevMode);
-    return b(() => {
+    return S(() => {
       console.warn("Missing required layout.body property in page");
-    }), (a, o) => n.value ? (r(), i("div", Ve, [...o[0] || (o[0] = [
+    }), (a, o) => n.value ? (r(), u("div", Ve, [...o[0] || (o[0] = [
       y("p", { style: { margin: "0 0 0.5rem", color: "#666" } }, [
         g(" The "),
         y("code", null, "page"),
@@ -141,10 +141,10 @@ const Ve = {
   }
 }), Z = "contentlet-";
 function Ge() {
-  const t = N(!1), e = () => {
+  const t = w(!1), e = () => {
     t.value = Q();
   };
-  return b(() => {
+  return S(() => {
     t.value = Q(), window.addEventListener(J, e);
   }), K(() => {
     window.removeEventListener(J, e);
@@ -152,7 +152,7 @@ function Ge() {
 }
 function He(t) {
   const e = A()?.mode;
-  return e ? e === U.EDIT : t === Ee;
+  return e ? e === U.EDIT : t === ke;
 }
 function Ye(t) {
   return c(() => He(L(t)));
@@ -164,12 +164,12 @@ const je = /* @__PURE__ */ p({
   },
   setup(t) {
     const e = t, n = x(), a = c(() => n.value.isDevMode);
-    return b(() => {
+    return S(() => {
       a.value && console.error(`Container with identifier ${e.identifier} not found`);
-    }), (o, s) => a.value ? (r(), i("div", {
+    }), (o, s) => a.value ? (r(), u("div", {
       key: 0,
       "data-testid": "container-not-found",
-      style: w(E(oe))
+      style: M(k(oe))
     }, " This container with identifier " + O(t.identifier) + " was not found. ", 5)) : T("", !0);
   }
 }), Ke = /* @__PURE__ */ p({
@@ -177,7 +177,7 @@ const je = /* @__PURE__ */ p({
   __name: "EmptyContainer",
   setup(t) {
     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] = [
+    return (a, o) => n.value ? (r(), u("div", $({ key: 0 }, a.$attrs, { style: k(oe) }), [...o[0] || (o[0] = [
       y("span", {
         "data-testid": "empty-container-message",
         "data-dot-object": "empty-content"
@@ -186,8 +186,8 @@ const je = /* @__PURE__ */ p({
   }
 });
 function We(t) {
-  const e = N(!1);
-  return b(() => {
+  const e = w(!1);
+  return S(() => {
     const n = t()?.getBoundingClientRect().height ?? 0;
     e.value = n > 0;
   }), e;
@@ -203,8 +203,8 @@ const qe = "dotcms-contentlet", ze = {
   },
   setup(t) {
     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, [
+    return (s, l) => a.value ? (r(), u(E, { key: 0 }, [
+      o.value ? (r(), f(D(t.userNoComponent), R($({ key: 0 }, t.contentlet)), null, 16)) : (r(), u("div", ze, [
         l[0] || (l[0] = g(" No Component for ", -1)),
         y("strong", null, O(t.contentlet.contentType), 1),
         l[1] || (l[1] = g(" . ", -1))
@@ -221,24 +221,24 @@ const qe = "dotcms-contentlet", ze = {
     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),
+      ...Ee(e.contentlet, e.container),
       "data-dot-object": "contentlet"
-    } : n.value.isAnalyticsActive ? De(e.contentlet) : {}), d = c(
+    } : n.value.isAnalyticsActive ? De(e.contentlet) : {}), i = c(
       () => a.value ? { minHeight: s.value ? void 0 : "4rem" } : {}
     ), v = c(() => {
       const m = e.contentlet?.identifier, C = m ? n.value.slots?.[m] : void 0;
       if (C)
         return () => C({ contentlet: e.contentlet });
-    }), u = c(
+    }), d = c(
       () => n.value.userComponents[e.contentlet?.contentType]
     ), _ = c(
       () => n.value.userComponents[Te]
     );
-    return (m, C) => (r(), i("div", $(l.value, {
-      class: E(qe),
-      style: d.value
+    return (m, C) => (r(), u("div", $(l.value, {
+      class: k(qe),
+      style: i.value
     }), [
-      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, {
+      v.value ? (r(), f(D(v.value), { key: 0 })) : d.value ? (r(), f(D(d.value), R($({ key: 1 }, t.contentlet)), null, 16)) : (r(), f(Xe, {
         key: 2,
         "user-no-component": _.value,
         contentlet: t.contentlet
@@ -253,14 +253,14 @@ const qe = "dotcms-contentlet", ze = {
   setup(t) {
     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(
+    ), i = c(
       () => n.value.isDevMode ? JSON.stringify(a.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, {
+    return (v, d) => a.value ? s.value ? (r(), f(Ke, R($({ key: 1 }, l.value)), null, 16)) : (r(), u("div", R($({ key: 2 }, l.value)), [
+      (r(!0), u(E, null, h(o.value, (_) => (r(), f(Qe, {
         key: _.identifier,
         contentlet: _,
-        container: d.value
+        container: i.value
       }, null, 8, ["contentlet", "container"]))), 128))
     ], 16)) : (r(), f(je, {
       key: 0,
@@ -277,14 +277,14 @@ const qe = "dotcms-contentlet", ze = {
       gridColumnStart: e.column.leftOffset,
       gridColumnEnd: e.column.leftOffset + e.column.width
     }));
-    return (a, o) => (r(), i("div", {
+    return (a, o) => (r(), u("div", {
       "data-dot": "column",
-      style: w(n.value)
+      style: M(n.value)
     }, [
       y("div", {
         class: W(t.column.styleClass)
       }, [
-        (r(!0), i(k, null, M(t.column.containers, (s) => (r(), f(Je, {
+        (r(!0), u(E, null, h(t.column.containers, (s) => (r(), f(Je, {
           key: `${s.identifier}-${s.uuid}`,
           container: s
         }, null, 8, ["container"]))), 128))
@@ -303,7 +303,7 @@ const qe = "dotcms-contentlet", ze = {
       gridTemplateColumns: "repeat(12, 1fr)",
       gap: "1rem"
     };
-    return (s, l) => (r(), i("div", {
+    return (s, l) => (r(), u("div", {
       id: a.value,
       class: W(n.value)
     }, [
@@ -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, v) => (r(), f(Ze, {
+        (r(!0), u(E, null, h(t.row.columns, (i, v) => (r(), f(Ze, {
           key: v,
-          column: d
+          column: i
         }, null, 8, ["column"]))), 128))
       ])
     ], 10, et));
   }
-}), nn = /* @__PURE__ */ p({
+}), rn = /* @__PURE__ */ p({
   __name: "DotCMSLayoutBody",
   props: {
     page: {},
@@ -329,12 +329,12 @@ const qe = "dotcms-contentlet", ze = {
   setup(t) {
     const e = t, n = Ye(() => e.mode), a = Ge(), o = c(() => {
       const v = {};
-      for (const u of Object.keys(e.components))
-        v[u] = j(e.components[u]);
+      for (const d of Object.keys(e.components))
+        v[d] = j(e.components[d]);
       return te(v);
     }), s = pe(), l = c(() => {
-      const v = {}, u = Object.entries(s);
-      for (const [_, m] of u)
+      const v = {}, d = Object.entries(s);
+      for (const [_, m] of d)
         m && _.startsWith(Z) && (v[_.slice(Z.length)] = m);
       return v;
     });
@@ -348,8 +348,8 @@ const qe = "dotcms-contentlet", ze = {
         slots: l.value
       }))
     );
-    const d = c(() => e.page?.layout?.body?.rows);
-    return (v, u) => d.value ? (r(!0), i(k, { key: 0 }, M(d.value, (_, m) => (r(), f(tt, {
+    const i = c(() => e.page?.layout?.body?.rows);
+    return (v, d) => i.value ? (r(!0), u(E, { key: 0 }, h(i.value, (_, m) => (r(), f(tt, {
       key: m,
       row: _,
       index: m + 1
@@ -372,10 +372,10 @@ const qe = "dotcms-contentlet", ze = {
     ...Y,
     ...H.minimal
   }
-}, ot = ["innerHTML"], st = {
+}, ot = ["innerHTML"], rt = {
   key: 1,
   style: { outline: "2px solid #006ce7", borderRadius: "4px" }
-}, on = /* @__PURE__ */ p({
+}, sn = /* @__PURE__ */ p({
   __name: "DotCMSEditableText",
   props: {
     contentlet: {},
@@ -384,14 +384,14 @@ const qe = "dotcms-contentlet", ze = {
     mode: { default: "plain" }
   },
   setup(t) {
-    const e = t, n = N(null), a = N(""), o = N(!1), s = N(e.contentlet?.[e.fieldName] || ""), l = c(() => nt[e.mode]);
+    const e = t, n = w(null), a = w(""), o = w(!1), s = w(e.contentlet?.[e.fieldName] || ""), l = c(() => nt[e.mode]);
     V(
       () => [e.fieldName, e.contentlet],
       () => {
         s.value = e.contentlet?.[e.fieldName] || "", n.value?.setContent(s.value, { format: e.format });
       }
     );
-    const d = (m, C) => {
+    const i = (m, C) => {
       n.value = C;
     }, v = (m) => {
       if (Number(
@@ -406,7 +406,7 @@ const qe = "dotcms-contentlet", ze = {
           dataset: { inode: I, language: G, fieldName: e.fieldName }
         }
       });
-    }, u = () => {
+    }, d = () => {
       const m = n.value?.getContent({ format: e.format }) || "";
       if (!n.value?.isDirty() || m === s.value)
         return;
@@ -422,10 +422,10 @@ const qe = "dotcms-contentlet", ze = {
       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();
+      const { oldInode: G, inode: ae, fieldName: le } = I ?? {}, q = e.contentlet.inode;
+      (q === G || q === ae) && le === e.fieldName && n.value?.focus();
     };
-    return b(() => {
+    return S(() => {
       const m = A();
       if (o.value = m?.mode === U.EDIT && !!m?.dotCMSHost?.length, !e.contentlet || !e.fieldName) {
         console.error(
@@ -440,17 +440,17 @@ const qe = "dotcms-contentlet", ze = {
       m?.dotCMSHost && (a.value = new URL($e, m.dotCMSHost).toString(), window.addEventListener("message", _));
     }), K(() => {
       window.removeEventListener("message", _);
-    }), (m, C) => o.value ? (r(), i("div", st, [
-      h(E(Ae), {
+    }), (m, C) => o.value ? (r(), u("div", rt, [
+      b(k(Ae), {
         "tinymce-script-src": a.value,
         inline: !0,
         init: l.value,
         "initial-value": s.value,
-        onInit: d,
+        onInit: i,
         onMousedown: v,
-        onFocusout: u
+        onFocusout: d
       }, null, 8, ["tinymce-script-src", "init", "initial-value"])
-    ])) : (r(), i("span", {
+    ])) : (r(), u("span", {
       key: 0,
       innerHTML: s.value
     }, null, 8, ot));
@@ -460,24 +460,24 @@ const qe = "dotcms-contentlet", ze = {
   for (const [a, o] of e)
     n[a] = o;
   return n;
-}, rt = {};
+}, st = {};
 function at(t, e) {
-  return r(), i("ul", null, [
-    S(t.$slots, "default")
+  return r(), u("ul", null, [
+    N(t.$slots, "default")
   ]);
 }
-const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it = /* @__PURE__ */ p({
+const lt = /* @__PURE__ */ F(st, [["render", at]]), ct = ["data-language"], it = /* @__PURE__ */ p({
   __name: "CodeBlock",
   props: {
     node: {}
   },
   setup(t) {
     const e = t, n = c(() => e.node?.attrs?.language || "");
-    return (a, o) => (r(), i("pre", { "data-language": n.value }, [
+    return (a, o) => (r(), u("pre", { "data-language": n.value }, [
       y("code", null, [
-        S(a.$slots, "default")
+        N(a.$slots, "default")
       ])
-    ], 8, lt));
+    ], 8, ct));
   }
 }), ut = {
   controls: "",
@@ -489,7 +489,7 @@ const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it =
   },
   setup(t) {
     const e = t, n = c(() => e.node.attrs ?? {});
-    return (a, o) => (r(), i("audio", ut, [
+    return (a, o) => (r(), u("audio", ut, [
       y("source", {
         src: n.value.src,
         type: n.value.mimeType
@@ -514,7 +514,7 @@ const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it =
       marginTop: "1rem",
       border: "1px solid #ed8936"
     }, n = { color: "#c05621" };
-    return (a, o) => (r(), i("div", {
+    return (a, o) => (r(), u("div", {
       "data-testid": "no-component-provided",
       style: e
     }, [
@@ -541,14 +541,14 @@ const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it =
     isDevMode: { type: Boolean }
   },
   setup(t) {
-    const e = (d) => `[DotCMSBlockEditorRenderer]: No matching component found for content type: ${d}. Provide a custom renderer for this content type to fix this error.`, n = t, a = c(() => n.node.attrs?.data), o = c(() => a.value?.contentType ?? "Unknown Content Type"), s = c(() => n.customRenderers?.[o.value]), l = c(() => a.value ? n.isDevMode && !s.value ? "dev-warning" : s.value ? "render" : "no-component" : "no-data");
+    const e = (i) => `[DotCMSBlockEditorRenderer]: No matching component found for content type: ${i}. Provide a custom renderer for this content type to fix this error.`, n = t, a = c(() => n.node.attrs?.data), o = c(() => a.value?.contentType ?? "Unknown Content Type"), s = c(() => n.customRenderers?.[o.value]), l = c(() => a.value ? n.isDevMode && !s.value ? "dev-warning" : s.value ? "render" : "no-component" : "no-data");
     return V(
       l,
-      (d) => {
-        d === "no-data" ? console.error(vt) : d === "no-component" && console.warn(e(o.value));
+      (i) => {
+        i === "no-data" ? console.error(vt) : i === "no-component" && console.warn(e(o.value));
       },
       { immediate: !0 }
-    ), (d, v) => l.value === "dev-warning" ? (r(), f(pt, {
+    ), (i, 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), {
@@ -556,36 +556,55 @@ const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it =
       node: t.node
     }, null, 8, ["node"])) : T("", !0);
   }
-}), yt = ["alt", "src"], _t = /* @__PURE__ */ p({
+}), yt = ["href", "target", "rel"], _t = ["alt", "src"], gt = ["alt", "src"], Ct = /* @__PURE__ */ p({
   __name: "DotImage",
   props: {
     node: {}
   },
   setup(t) {
     const e = t, n = c(() => e.node.attrs ?? {}), a = c(() => {
-      const { textWrap: s, textAlign: l } = n.value;
-      return s === "left" ? { float: "left", width: "50%", margin: "0 1rem 1rem 0" } : s === "right" ? { float: "right", width: "50%", margin: "0 0 1rem 1rem" } : l ? { textAlign: l } : {};
+      const { textWrap: l, textAlign: i } = n.value;
+      return l === "left" ? { float: "left", width: "50%", margin: "0 1rem 1rem 0" } : l === "right" ? { float: "right", width: "50%", margin: "0 0 1rem 1rem" } : i ? { textAlign: i } : {};
     }), o = c(
       () => n.value.textWrap ? { maxWidth: "100%", height: "auto" } : void 0
-    );
-    return (s, l) => (r(), i("figure", {
-      style: w(a.value)
+    ), s = c(() => {
+      const { href: l, target: i } = n.value;
+      return l ? {
+        href: l,
+        target: i ?? void 0,
+        rel: i === "_blank" ? "noopener noreferrer" : void 0
+      } : null;
+    });
+    return (l, i) => (r(), u("figure", {
+      style: M(a.value)
     }, [
-      y("img", {
+      s.value ? (r(), u("a", {
+        key: 0,
+        href: s.value.href,
+        target: s.value.target,
+        rel: s.value.rel
+      }, [
+        y("img", {
+          alt: n.value.alt,
+          src: n.value.src,
+          style: M(o.value)
+        }, null, 12, _t)
+      ], 8, yt)) : (r(), u("img", {
+        key: 1,
         alt: n.value.alt,
         src: n.value.src,
-        style: w(o.value)
-      }, null, 12, yt)
+        style: M(o.value)
+      }, null, 12, gt))
     ], 4));
   }
-}), gt = ["width", "height", "poster"], Ct = ["src", "type"], Et = /* @__PURE__ */ p({
+}), kt = ["width", "height", "poster"], Et = ["src", "type"], Dt = /* @__PURE__ */ p({
   __name: "DotVideo",
   props: {
     node: {}
   },
   setup(t) {
     const e = t, n = c(() => e.node.attrs ?? {}), a = c(() => n.value.data?.thumbnail);
-    return (o, s) => (r(), i("video", {
+    return (o, s) => (r(), u("video", {
       controls: "",
       preload: "metadata",
       width: n.value.width,
@@ -600,13 +619,13 @@ const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it =
       y("source", {
         src: n.value.src,
         type: n.value.mimeType
-      }, null, 8, Ct),
+      }, null, 8, Et),
       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] = g(" element. ", -1))
-    ], 8, gt));
+    ], 8, kt));
   }
-}), kt = /* @__PURE__ */ p({
+}), Tt = /* @__PURE__ */ p({
   __name: "GridBlock",
   props: {
     node: {},
@@ -622,18 +641,18 @@ const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it =
       gridTemplateColumns: "repeat(12, 1fr)",
       gap: "1rem"
     };
-    return (o, s) => (r(), i("div", {
+    return (o, s) => (r(), u("div", {
       "data-type": "gridBlock",
       class: "grid-block",
       style: a
     }, [
-      (r(!0), i(k, null, M(t.node.content ?? [], (l, d) => (r(), i("div", {
-        key: `gridColumn-${d}`,
+      (r(!0), u(E, null, h(t.node.content ?? [], (l, i) => (r(), u("div", {
+        key: `gridColumn-${i}`,
         "data-type": "gridColumn",
         class: "grid-block__column",
-        style: w({ gridColumn: `span ${n.value[d] ?? 6}` })
+        style: M({ gridColumn: `span ${n.value[i] ?? 6}` })
       }, [
-        h(P, {
+        b(P, {
           content: l.content,
           "custom-renderers": t.customRenderers,
           "is-dev-mode": t.isDevMode
@@ -641,7 +660,7 @@ const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it =
       ], 4))), 128))
     ]));
   }
-}), Dt = /* @__PURE__ */ p({
+}), Mt = /* @__PURE__ */ p({
   __name: "Heading",
   props: {
     node: {}
@@ -650,43 +669,43 @@ const ct = /* @__PURE__ */ F(rt, [["render", at]]), lt = ["data-language"], it =
     const e = t, n = c(() => `h${e.node?.attrs?.level || 1}`);
     return (a, o) => (r(), f(D(n.value), null, {
       default: B(() => [
-        S(a.$slots, "default")
+        N(a.$slots, "default")
       ]),
       _: 3
     }));
   }
-}), Tt = {};
-function Mt(t, e) {
-  return r(), i("li", null, [
-    S(t.$slots, "default")
+}), ht = {};
+function bt(t, e) {
+  return r(), u("li", null, [
+    N(t.$slots, "default")
   ]);
 }
-const ht = /* @__PURE__ */ F(Tt, [["render", Mt]]), bt = {};
-function St(t, e) {
-  return r(), i("ol", null, [
-    S(t.$slots, "default")
+const St = /* @__PURE__ */ F(ht, [["render", bt]]), Nt = {};
+function wt(t, e) {
+  return r(), u("ol", null, [
+    N(t.$slots, "default")
   ]);
 }
-const Nt = /* @__PURE__ */ F(bt, [["render", St]]), wt = /* @__PURE__ */ p({
+const $t = /* @__PURE__ */ F(Nt, [["render", wt]]), Ot = /* @__PURE__ */ p({
   __name: "Paragraph",
   props: {
     node: {}
   },
   setup(t) {
     const e = t, n = c(() => e.node?.attrs ?? {});
-    return (a, o) => (r(), i("p", {
-      style: w(n.value)
+    return (a, o) => (r(), u("p", {
+      style: M(n.value)
     }, [
-      S(a.$slots, "default")
+      N(a.$slots, "default")
     ], 4));
   }
-}), $t = {};
-function Ot(t, e) {
-  return r(), i("blockquote", null, [
-    S(t.$slots, "default")
+}), At = {};
+function xt(t, e) {
+  return r(), u("blockquote", null, [
+    N(t.$slots, "default")
   ]);
 }
-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({
+const It = /* @__PURE__ */ F(At, [["render", xt]]), Rt = ["aria-label", "aria-labelledby"], Lt = { key: 0 }, Bt = ["colspan", "rowspan", "scope"], Ut = ["colspan", "rowspan"], Pt = /* @__PURE__ */ p({
   __name: "TableRenderer",
   props: {
     content: {},
@@ -695,47 +714,47 @@ const At = /* @__PURE__ */ F($t, [["render", Ot]]), xt = ["aria-label", "aria-la
     isDevMode: { type: Boolean }
   },
   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, v) => (r(), i("table", {
+    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 = (i) => Number(i.attrs?.colspan || 1), l = (i) => Number(i.attrs?.rowspan || 1);
+    return (i, v) => (r(), u("table", {
       "aria-label": a.value,
       "aria-labelledby": o.value
     }, [
-      n.value ? (r(), i("caption", It, O(n.value), 1)) : T("", !0),
+      n.value ? (r(), u("caption", Lt, O(n.value), 1)) : T("", !0),
       y("tbody", null, [
-        (r(!0), i(k, null, M(t.content, (u, _) => (r(), i("tr", {
+        (r(!0), u(E, null, h(t.content, (d, _) => (r(), u("tr", {
           key: `row-${_}`
         }, [
-          (r(!0), i(k, null, M(u.content ?? [], (m, C) => (r(), i(k, {
+          (r(!0), u(E, null, h(d.content ?? [], (m, C) => (r(), u(E, {
             key: `cell-${C}`
           }, [
-            m.type === "tableHeader" ? (r(), i("th", {
+            m.type === "tableHeader" ? (r(), u("th", {
               key: 0,
               colspan: s(m),
               rowspan: l(m),
               scope: m.attrs?.scope || void 0
             }, [
-              h(P, {
+              b(P, {
                 content: m.content ?? [],
                 "custom-renderers": t.customRenderers,
                 "is-dev-mode": t.isDevMode
               }, null, 8, ["content", "custom-renderers", "is-dev-mode"])
-            ], 8, Rt)) : (r(), i("td", {
+            ], 8, Bt)) : (r(), u("td", {
               key: 1,
               colspan: s(m),
               rowspan: l(m)
             }, [
-              h(P, {
+              b(P, {
                 content: m.content ?? [],
                 "custom-renderers": t.customRenderers,
                 "is-dev-mode": t.isDevMode
               }, null, 8, ["content", "custom-renderers", "is-dev-mode"])
-            ], 8, Lt))
+            ], 8, Ut))
           ], 64))), 128))
         ]))), 128))
       ])
-    ], 8, xt));
+    ], 8, Rt));
   }
-}), Ut = /* @__PURE__ */ p({
+}), Vt = /* @__PURE__ */ p({
   __name: "TextBlock",
   props: {
     text: {},
@@ -750,23 +769,23 @@ const At = /* @__PURE__ */ F($t, [["render", Ot]]), xt = ["aria-label", "aria-la
       superscript: "sup",
       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 (v, u) => {
+    }, 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), i = c(() => o.value?.attrs ?? {});
+    return (v, d) => {
       const _ = ne("TextBlock", !0);
-      return l.value ? (r(), f(D(l.value), R($({ key: 0 }, d.value)), {
+      return l.value ? (r(), f(D(l.value), R($({ key: 0 }, i.value)), {
         default: B(() => [
-          h(_, {
+          b(_, {
             text: t.text,
             marks: s.value
           }, null, 8, ["text", "marks"])
         ]),
         _: 1
-      }, 16)) : (r(), i(k, { key: 1 }, [
+      }, 16)) : (r(), u(E, { key: 1 }, [
         g(O(t.text), 1)
       ], 64));
     };
   }
-}), Pt = /* @__PURE__ */ p({
+}), Ft = /* @__PURE__ */ p({
   __name: "UnknownBlock",
   props: {
     node: {}
@@ -781,11 +800,11 @@ const At = /* @__PURE__ */ F($t, [["render", Ot]]), xt = ["aria-label", "aria-la
       marginTop: "1rem",
       border: "1px solid #fc8181"
     };
-    return b(() => {
+    return S(() => {
       A() || console.warn(
         `[DotCMSBlockEditorRenderer]: Unknown block type "${e.node?.type}". No renderer was found for it.`
       );
-    }), (a, o) => E(A)() ? (r(), i("div", {
+    }), (a, o) => k(A)() ? (r(), u("div", {
       key: 0,
       "data-testid": "unknown-block",
       style: n
@@ -794,7 +813,7 @@ const At = /* @__PURE__ */ F($t, [["render", Ot]]), xt = ["aria-label", "aria-la
       y("strong", null, O(t.node?.type), 1)
     ])) : T("", !0);
   }
-}), Vt = { key: 4 }, Ft = { key: 5 }, P = /* @__PURE__ */ p({
+}), Gt = { key: 4 }, Ht = { key: 5 }, P = /* @__PURE__ */ p({
   __name: "BlockEditorBlock",
   props: {
     content: {},
@@ -803,81 +822,81 @@ const At = /* @__PURE__ */ F($t, [["render", Ot]]), xt = ["aria-label", "aria-la
   },
   setup(t) {
     const e = Ie, n = {
-      [e.PARAGRAPH]: wt,
-      [e.HEADING]: Dt,
-      [e.BULLET_LIST]: ct,
-      [e.ORDERED_LIST]: Nt,
-      [e.LIST_ITEM]: ht,
-      [e.BLOCK_QUOTE]: At,
+      [e.PARAGRAPH]: Ot,
+      [e.HEADING]: Mt,
+      [e.BULLET_LIST]: lt,
+      [e.ORDERED_LIST]: $t,
+      [e.LIST_ITEM]: St,
+      [e.BLOCK_QUOTE]: It,
       [e.CODE_BLOCK]: it
     }, a = {
-      [e.DOT_IMAGE]: _t,
-      [e.DOT_VIDEO]: Et,
+      [e.DOT_IMAGE]: Ct,
+      [e.DOT_VIDEO]: Dt,
       [e.DOT_AUDIO]: mt
     }, o = (l) => n[l], s = (l) => a[l];
-    return (l, d) => {
+    return (l, i) => {
       const v = ne("BlockEditorBlock", !0);
-      return r(!0), i(k, null, M(t.content ?? [], (u, _) => (r(), i(k, {
-        key: `${u.type}-${_}`
+      return r(!0), u(E, null, h(t.content ?? [], (d, _) => (r(), u(E, {
+        key: `${d.type}-${_}`
       }, [
-        t.customRenderers && t.customRenderers[u.type] ? (r(), f(D(t.customRenderers[u.type]), {
+        t.customRenderers && t.customRenderers[d.type] ? (r(), f(D(t.customRenderers[d.type]), {
           key: 0,
-          node: u
+          node: d
         }, {
           default: B(() => [
-            h(v, {
-              content: u.content,
+            b(v, {
+              content: d.content,
               "custom-renderers": t.customRenderers,
               "is-dev-mode": t.isDevMode
             }, null, 8, ["content", "custom-renderers", "is-dev-mode"])
           ]),
           _: 2
-        }, 1032, ["node"])) : o(u.type) ? (r(), f(D(o(u.type)), {
+        }, 1032, ["node"])) : o(d.type) ? (r(), f(D(o(d.type)), {
           key: 1,
-          node: u
+          node: d
         }, {
           default: B(() => [
-            h(v, {
-              content: u.content,
+            b(v, {
+              content: d.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(Ut, {
+        }, 1032, ["node"])) : d.type === k(e).TEXT ? (r(), f(Vt, {
           key: 2,
-          text: u.text,
-          marks: u.marks
-        }, null, 8, ["text", "marks"])) : s(u.type) ? (r(), f(D(s(u.type)), {
+          text: d.text,
+          marks: d.marks
+        }, null, 8, ["text", "marks"])) : s(d.type) ? (r(), f(D(s(d.type)), {
           key: 3,
-          node: u
-        }, 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, {
+          node: d
+        }, null, 8, ["node"])) : d.type === k(e).HARDBREAK ? (r(), u("br", Gt)) : d.type === k(e).HORIZONTAL_RULE ? (r(), u("hr", Ht)) : d.type === k(e).TABLE ? (r(), f(Pt, {
           key: 6,
-          content: u.content ?? [],
-          attrs: u.attrs,
+          content: d.content ?? [],
+          attrs: d.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(kt, {
+        }, null, 8, ["content", "attrs", "custom-renderers", "is-dev-mode"])) : d.type === k(e).GRID_BLOCK ? (r(), f(Tt, {
           key: 7,
-          node: u,
+          node: d,
           "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(ft, {
+        }, null, 8, ["node", "custom-renderers", "is-dev-mode"])) : d.type === k(e).DOT_CONTENT ? (r(), f(ft, {
           key: 8,
-          node: u,
+          node: d,
           "custom-renderers": t.customRenderers,
           "is-dev-mode": t.isDevMode
-        }, null, 8, ["node", "custom-renderers", "is-dev-mode"])) : (r(), f(Pt, {
+        }, null, 8, ["node", "custom-renderers", "is-dev-mode"])) : (r(), f(Ft, {
           key: 9,
-          node: u
+          node: d
         }, null, 8, ["node"]))
       ], 64))), 128);
     };
   }
-}), Gt = {
+}), Yt = {
   key: 0,
   "data-testid": "invalid-blocks-message"
-}, sn = /* @__PURE__ */ p({
+}, an = /* @__PURE__ */ p({
   __name: "DotCMSBlockEditorRenderer",
   props: {
     blocks: {},
@@ -901,13 +920,13 @@ const At = /* @__PURE__ */ F($t, [["render", Ot]]), xt = ["aria-label", "aria-la
         s && console.error(s);
       },
       { immediate: !0 }
-    ), (s, l) => o.value && t.isDevMode ? (r(), i("div", Gt, O(o.value), 1)) : o.value ? T("", !0) : (r(), i("div", {
+    ), (s, l) => o.value && t.isDevMode ? (r(), u("div", Yt, O(o.value), 1)) : o.value ? T("", !0) : (r(), u("div", {
       key: 1,
       class: W(t.className),
-      style: w(t.style),
+      style: M(t.style),
       "data-testid": "dot-block-editor-container"
     }, [
-      h(P, {
+      b(P, {
         content: t.blocks?.content,
         "custom-renderers": n.value,
         "is-dev-mode": t.isDevMode
@@ -916,18 +935,18 @@ const At = /* @__PURE__ */ F($t, [["render", Ot]]), xt = ["aria-label", "aria-la
   }
 });
 export {
-  se as DOTCMS_CLIENT,
-  re as DOTCMS_PAGE_CONTEXT,
-  sn as DotCMSBlockEditorRenderer,
-  on as DotCMSEditableText,
-  nn as DotCMSLayoutBody,
-  tn as DotCMSShow,
-  en as createDotCMSImageLoader,
-  Qt as createDotCMSVue,
+  re as DOTCMS_CLIENT,
+  se as DOTCMS_PAGE_CONTEXT,
+  an as DotCMSBlockEditorRenderer,
+  sn as DotCMSEditableText,
+  rn as DotCMSLayoutBody,
+  on as DotCMSShow,
+  nn as createDotCMSImageLoader,
+  Zt as createDotCMSVue,
   Ue as provideDotCMSPageContext,
   Re as toPlain,
-  Jt as useDotCMSClient,
+  en as useDotCMSClient,
   x as useDotCMSPageContext,
   Le as useDotCMSShowWhen,
-  Zt as useEditableDotCMSPage
+  tn as useEditableDotCMSPage
 };

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

@@ -1,5 +1,5 @@
 import { BlockEditorNode } from '@dotcms/types';
-/** Renders a dotCMS image block with optional text-wrap / alignment. */
+/** Renders a dotCMS image block with optional link, text-wrap / alignment. */
 type __VLS_Props = {
     node: BlockEditorNode;
 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@dotcms/vue",
-  "version": "26.8.14-1-next.2533",
+  "version": "26.08.19-01",
   "peerDependencies": {
     "vue": ">=3.4"
   },
   "dependencies": {
-    "@dotcms/uve": "26.8.14-1-next.2533",
-    "@dotcms/client": "26.8.14-1-next.2533",
+    "@dotcms/uve": "26.08.19-01",
+    "@dotcms/client": "26.08.19-01",
     "@tinymce/tinymce-vue": "^6.1.0"
   },
   "devDependencies": {