@bagelink/vue 0.0.1119 → 0.0.1121

package/dist/components/Image.vue.d.ts

@@ -1,16 +1,16 @@
-declare global {
-    interface Window {
-        heic2any: any;
-    }
-}
-type __VLS_Props = {
+interface ImageProps {
     src?: string;
     pathKey?: string;
     alt?: string;
     width?: string | number;
     height?: string | number;
     caption?: string;
-};
-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, {}, any>;
+}
+declare global {
+    interface Window {
+        heic2any: any;
+    }
+}
+declare const _default: import('vue').DefineComponent<ImageProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;
 //# sourceMappingURL=Image.vue.d.ts.map

package/dist/components/Image.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.vue.d.ts","sourceRoot":"","sources":["../../src/components/Image.vue"],"names":[],"mappings":"AA6GA,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,MAAM;QACf,QAAQ,EAAE,GAAG,CAAA;KACb;CACD;AAED,KAAK,WAAW,GAAG;IAClB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB,CAAC;;AAwJF,wBAMG"}
+{"version":3,"file":"Image.vue.d.ts","sourceRoot":"","sources":["../../src/components/Image.vue"],"names":[],"mappings":"AA+JA,UAAU,UAAU;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,MAAM;QACf,QAAQ,EAAE,GAAG,CAAA;KACb;CACD;;AAkMD,wBAMG"}

package/dist/components/form/inputs/RichText/components/EditorToolbar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorToolbar.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/inputs/RichText/components/EditorToolbar.vue"],"names":[],"mappings":"AAAA,OAsDO,KAAK,EAAE,aAAa,EAAsC,MAAM,kBAAkB,CAAA;AAKzF,KAAK,WAAW,GAAG;IAClB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAC3B,CAAC;;;;;;AAmJF,wBAQG"}
+{"version":3,"file":"EditorToolbar.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/inputs/RichText/components/EditorToolbar.vue"],"names":[],"mappings":"AAAA,OAuDO,KAAK,EAAE,aAAa,EAAsC,MAAM,kBAAkB,CAAA;AAKzF,KAAK,WAAW,GAAG;IAClB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAC3B,CAAC;;;;;;AAqJF,wBAQG"}

package/dist/index.cjs

@@ -21127,6 +21127,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
               flat: "",
               "aria-label": action.name,
               class: vue.normalizeClass([[action.class, { active: _ctx.selectedStyles.has(action.name) }], ""]),
+              tabindex: "-1",
               onClick: ($event) => runAction(action.name)
             }, null, 8, ["icon", "aria-label", "class", "onClick"])), [
               [_directive_tooltip, action.label]
@@ -21140,7 +21141,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-33dff8fa"]]);
+const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-bcd681b9"]]);
 function createCommandExecutor(state2, commands) {
   return {
     execute(command, value) {
@@ -31400,65 +31401,82 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
   props: {
     src: {},
     pathKey: {},
-    alt: { default: "" },
+    alt: {},
     width: {},
     height: {},
     caption: {}
   },
   setup(__props) {
+    const props2 = __props;
     let imageSrc = vue.ref(null);
-    const fileBaseUrl = vue.computed(() => "https://files.bagel.design".replace(/\/$/, ""));
-    function pathToUrl() {
+    let loadingError = vue.ref(false);
+    const fileBaseUrl = vue.computed(() => "https://files.bagel.design");
+    function getImageUrl() {
       var _a2;
-      if ((_a2 = __props.pathKey) == null ? void 0 : _a2.startsWith("static/")) return `${void 0}/${__props.pathKey}`;
-      return `${fileBaseUrl.value}/${__props.pathKey}`;
+      if (!props2.src && !props2.pathKey) return null;
+      if (props2.src) return props2.src;
+      if ((_a2 = props2.pathKey) == null ? void 0 : _a2.startsWith("static/")) {
+        return `${void 0}/${props2.pathKey}`;
+      }
+      return `${fileBaseUrl.value}/${props2.pathKey}`;
+    }
+    async function getCachedImage(url) {
+      if (!("caches" in window)) return null;
+      try {
+        const imgCache = await window.caches.open("img-cache");
+        const cachedResponse = await imgCache.match(url);
+        if (cachedResponse) {
+          return URL.createObjectURL(await cachedResponse.blob());
+        }
+      } catch (error) {
+        console.warn("Cache access error:", error);
+      }
+      return null;
+    }
+    async function cacheImage(url, blob) {
+      if (!("caches" in window)) return;
+      try {
+        const imgCache = await window.caches.open("img-cache");
+        await imgCache.put(url, new Response(blob));
+      } catch (error) {
+        console.warn("Cache write error:", error);
+      }
+    }
+    async function convertHeicImage(url) {
+      await appendScript("https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js");
+      const response = await fetch(normalizeURL(url));
+      const blob = await response.blob();
+      const convertedBlob = await window.heic2any({ blob });
+      await cacheImage(url, convertedBlob);
+      return URL.createObjectURL(convertedBlob);
     }
     async function loadImage() {
       var _a2;
-      const url = __props.src || pathToUrl();
-      console.log(url);
+      loadingError.value = false;
+      const url = getImageUrl();
       if (!url) {
         imageSrc.value = null;
         return;
       }
-      const ext = (_a2 = url.split(".").pop()) == null ? void 0 : _a2.toLowerCase().split("?").shift();
-      if (ext === "heic") {
-        if (!("caches" in window)) {
-          console.warn("Caching is not available. Proceeding without cache.");
-        } else {
-          try {
-            const imgCache = await window.caches.open("img-cache");
-            const cachedResponse = await imgCache.match(url);
-            if (cachedResponse) {
-              imageSrc.value = URL.createObjectURL(await cachedResponse.blob());
-              return;
-            }
-          } catch (error) {
-            console.warn("Error accessing cache:", error);
-          }
-        }
-        try {
-          await appendScript("https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js");
-          const response = await fetch(normalizeURL(url));
-          const blob = await response.blob();
-          const convertedBlob = await window.heic2any({ blob });
-          imageSrc.value = URL.createObjectURL(convertedBlob);
-          if ("caches" in window) {
-            try {
-              const imgCache = await window.caches.open("img-cache");
-              imgCache.put(url, new Response(convertedBlob));
-            } catch (cacheError) {
-              console.warn("Failed to cache the image:", cacheError);
-            }
+      try {
+        const ext = (_a2 = url.split(".").pop()) == null ? void 0 : _a2.toLowerCase().split("?")[0];
+        if (ext === "heic") {
+          const cachedSrc = await getCachedImage(url);
+          if (cachedSrc) {
+            imageSrc.value = cachedSrc;
+            return;
           }
-        } catch (error) {
-          console.error("Error converting HEIC file:", error);
+          imageSrc.value = await convertHeicImage(url);
+        } else {
+          imageSrc.value = url;
         }
-      } else {
-        imageSrc.value = url;
+      } catch (error) {
+        console.error("Image loading error:", error);
+        loadingError.value = true;
+        imageSrc.value = null;
       }
     }
-    vue.watch(() => [__props.src, __props.pathKey], loadImage, { immediate: true });
+    vue.watch(() => [props2.src, props2.pathKey], loadImage, { immediate: true });
     return (_ctx, _cache) => {
       return _ctx.caption ? (vue.openBlock(), vue.createElementBlock("figcaption", _hoisted_1$h, [
         vue.unref(imageSrc) ? (vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({
@@ -31481,8 +31499,17 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
         alt: _ctx.alt,
         width: vue.unref(normalizeDimension)(_ctx.width),
         height: vue.unref(normalizeDimension)(_ctx.height)
-      }), null, 16, _hoisted_3$7)) : (vue.openBlock(), vue.createBlock(vue.unref(Skeleton), {
+      }), null, 16, _hoisted_3$7)) : vue.unref(loadingError) ? (vue.openBlock(), vue.createElementBlock("div", {
         key: 2,
+        class: "flex-center error-image",
+        style: vue.normalizeStyle({
+          width: vue.unref(normalizeDimension)(_ctx.width),
+          height: vue.unref(normalizeDimension)(_ctx.height)
+        })
+      }, [
+        vue.createVNode(vue.unref(_sfc_main$d), { name: "broken_image" })
+      ], 4)) : (vue.openBlock(), vue.createBlock(vue.unref(Skeleton), {
+        key: 3,
         class: "img-web-kit",
         width: vue.unref(normalizeDimension)(_ctx.width),
         height: vue.unref(normalizeDimension)(_ctx.height)
@@ -31490,7 +31517,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-1b7f9bb3"]]);
+const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-6f277b5b"]]);
 const _hoisted_1$g = { class: "m-0 pb-025 txt14 line-height-1 w60 menu-text" };
 const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   __name: "BottomMenu",
@@ -32644,6 +32671,7 @@ function debounceFilter(ms, options = {}) {
     lastRejector();
     lastRejector = noop;
   };
+  let lastInvoker;
   const filter3 = (invoke) => {
     const duration = vue.toValue(ms);
     const maxDuration = vue.toValue(options.maxWait);
@@ -32658,12 +32686,13 @@ function debounceFilter(ms, options = {}) {
     }
     return new Promise((resolve, reject3) => {
       lastRejector = options.rejectOnCancel ? reject3 : resolve;
+      lastInvoker = invoke;
       if (maxDuration && !maxTimer) {
         maxTimer = setTimeout(() => {
           if (timer)
             _clearTimeout(timer);
           maxTimer = null;
-          resolve(invoke());
+          resolve(lastInvoker());
         }, maxDuration);
       }
       timer = setTimeout(() => {

package/dist/index.mjs

@@ -21125,6 +21125,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
               flat: "",
               "aria-label": action.name,
               class: normalizeClass([[action.class, { active: _ctx.selectedStyles.has(action.name) }], ""]),
+              tabindex: "-1",
               onClick: ($event) => runAction(action.name)
             }, null, 8, ["icon", "aria-label", "class", "onClick"])), [
               [_directive_tooltip, action.label]
@@ -21138,7 +21139,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-33dff8fa"]]);
+const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-bcd681b9"]]);
 function createCommandExecutor(state2, commands) {
   return {
     execute(command, value) {
@@ -31398,65 +31399,82 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   props: {
     src: {},
     pathKey: {},
-    alt: { default: "" },
+    alt: {},
     width: {},
     height: {},
     caption: {}
   },
   setup(__props) {
+    const props2 = __props;
     let imageSrc = ref(null);
-    const fileBaseUrl = computed(() => "https://files.bagel.design".replace(/\/$/, ""));
-    function pathToUrl() {
+    let loadingError = ref(false);
+    const fileBaseUrl = computed(() => "https://files.bagel.design");
+    function getImageUrl() {
       var _a2;
-      if ((_a2 = __props.pathKey) == null ? void 0 : _a2.startsWith("static/")) return `${void 0}/${__props.pathKey}`;
-      return `${fileBaseUrl.value}/${__props.pathKey}`;
+      if (!props2.src && !props2.pathKey) return null;
+      if (props2.src) return props2.src;
+      if ((_a2 = props2.pathKey) == null ? void 0 : _a2.startsWith("static/")) {
+        return `${void 0}/${props2.pathKey}`;
+      }
+      return `${fileBaseUrl.value}/${props2.pathKey}`;
+    }
+    async function getCachedImage(url) {
+      if (!("caches" in window)) return null;
+      try {
+        const imgCache = await window.caches.open("img-cache");
+        const cachedResponse = await imgCache.match(url);
+        if (cachedResponse) {
+          return URL.createObjectURL(await cachedResponse.blob());
+        }
+      } catch (error) {
+        console.warn("Cache access error:", error);
+      }
+      return null;
+    }
+    async function cacheImage(url, blob) {
+      if (!("caches" in window)) return;
+      try {
+        const imgCache = await window.caches.open("img-cache");
+        await imgCache.put(url, new Response(blob));
+      } catch (error) {
+        console.warn("Cache write error:", error);
+      }
+    }
+    async function convertHeicImage(url) {
+      await appendScript("https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js");
+      const response = await fetch(normalizeURL(url));
+      const blob = await response.blob();
+      const convertedBlob = await window.heic2any({ blob });
+      await cacheImage(url, convertedBlob);
+      return URL.createObjectURL(convertedBlob);
     }
     async function loadImage() {
       var _a2;
-      const url = __props.src || pathToUrl();
-      console.log(url);
+      loadingError.value = false;
+      const url = getImageUrl();
       if (!url) {
         imageSrc.value = null;
         return;
       }
-      const ext = (_a2 = url.split(".").pop()) == null ? void 0 : _a2.toLowerCase().split("?").shift();
-      if (ext === "heic") {
-        if (!("caches" in window)) {
-          console.warn("Caching is not available. Proceeding without cache.");
-        } else {
-          try {
-            const imgCache = await window.caches.open("img-cache");
-            const cachedResponse = await imgCache.match(url);
-            if (cachedResponse) {
-              imageSrc.value = URL.createObjectURL(await cachedResponse.blob());
-              return;
-            }
-          } catch (error) {
-            console.warn("Error accessing cache:", error);
-          }
-        }
-        try {
-          await appendScript("https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js");
-          const response = await fetch(normalizeURL(url));
-          const blob = await response.blob();
-          const convertedBlob = await window.heic2any({ blob });
-          imageSrc.value = URL.createObjectURL(convertedBlob);
-          if ("caches" in window) {
-            try {
-              const imgCache = await window.caches.open("img-cache");
-              imgCache.put(url, new Response(convertedBlob));
-            } catch (cacheError) {
-              console.warn("Failed to cache the image:", cacheError);
-            }
+      try {
+        const ext = (_a2 = url.split(".").pop()) == null ? void 0 : _a2.toLowerCase().split("?")[0];
+        if (ext === "heic") {
+          const cachedSrc = await getCachedImage(url);
+          if (cachedSrc) {
+            imageSrc.value = cachedSrc;
+            return;
           }
-        } catch (error) {
-          console.error("Error converting HEIC file:", error);
+          imageSrc.value = await convertHeicImage(url);
+        } else {
+          imageSrc.value = url;
         }
-      } else {
-        imageSrc.value = url;
+      } catch (error) {
+        console.error("Image loading error:", error);
+        loadingError.value = true;
+        imageSrc.value = null;
       }
     }
-    watch(() => [__props.src, __props.pathKey], loadImage, { immediate: true });
+    watch(() => [props2.src, props2.pathKey], loadImage, { immediate: true });
     return (_ctx, _cache) => {
       return _ctx.caption ? (openBlock(), createElementBlock("figcaption", _hoisted_1$h, [
         unref(imageSrc) ? (openBlock(), createElementBlock("img", mergeProps({
@@ -31479,8 +31497,17 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         alt: _ctx.alt,
         width: unref(normalizeDimension)(_ctx.width),
         height: unref(normalizeDimension)(_ctx.height)
-      }), null, 16, _hoisted_3$7)) : (openBlock(), createBlock(unref(Skeleton), {
+      }), null, 16, _hoisted_3$7)) : unref(loadingError) ? (openBlock(), createElementBlock("div", {
         key: 2,
+        class: "flex-center error-image",
+        style: normalizeStyle({
+          width: unref(normalizeDimension)(_ctx.width),
+          height: unref(normalizeDimension)(_ctx.height)
+        })
+      }, [
+        createVNode(unref(_sfc_main$d), { name: "broken_image" })
+      ], 4)) : (openBlock(), createBlock(unref(Skeleton), {
+        key: 3,
         class: "img-web-kit",
         width: unref(normalizeDimension)(_ctx.width),
         height: unref(normalizeDimension)(_ctx.height)
@@ -31488,7 +31515,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-1b7f9bb3"]]);
+const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-6f277b5b"]]);
 const _hoisted_1$g = { class: "m-0 pb-025 txt14 line-height-1 w60 menu-text" };
 const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "BottomMenu",
@@ -32642,6 +32669,7 @@ function debounceFilter(ms, options = {}) {
     lastRejector();
     lastRejector = noop;
   };
+  let lastInvoker;
   const filter3 = (invoke) => {
     const duration = toValue(ms);
     const maxDuration = toValue(options.maxWait);
@@ -32656,12 +32684,13 @@ function debounceFilter(ms, options = {}) {
     }
     return new Promise((resolve, reject3) => {
       lastRejector = options.rejectOnCancel ? reject3 : resolve;
+      lastInvoker = invoke;
       if (maxDuration && !maxTimer) {
         maxTimer = setTimeout(() => {
           if (timer)
             _clearTimeout(timer);
           maxTimer = null;
-          resolve(invoke());
+          resolve(lastInvoker());
         }, maxDuration);
       }
       timer = setTimeout(() => {

package/dist/style.css

@@ -1435,7 +1435,7 @@ input[type="range"][data-v-25d991e5]:active::-webkit-slider-thumb {
 	background: var(--bgl-primary-light);
 }
 
-.toolbar[data-v-33dff8fa] .active {
+.toolbar[data-v-bcd681b9] .active {
 	background: var(--bgl-primary);
 	color: white;
 }
@@ -2123,12 +2123,15 @@ line-height: 1.65;
 	color: var(--bgl-green);
 }
 
-.img-web-kit[data-v-1b7f9bb3] {
+.img-web-kit[data-v-6f277b5b] {
 	max-width: 100%;
 	vertical-align: middle;
 	border: 0;
 	width: 100%;
 }
+.error-image[data-v-6f277b5b] {
+	background-color: var(--skeleton-bg);
+}
 
 .bgl_bottombar .bgl_btn-flex{
   flex-direction: column;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1119",
+  "version": "0.0.1121",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Image.vue

@@ -1,83 +1,112 @@
 <script setup lang="ts">
-import { Skeleton, normalizeDimension, appendScript, normalizeURL } from '@bagelink/vue'
-import { watch } from 'vue'
+import { Skeleton, normalizeDimension, appendScript, normalizeURL, Icon } from '@bagelink/vue'
+import { watch, computed } from 'vue'
 
-declare global {
-	interface Window {
-		heic2any: any
-	}
-}
-
-const { height, width, alt = '', src, pathKey } = defineProps<{
+interface ImageProps {
 	src?: string
 	pathKey?: string
 	alt?: string
 	width?: string | number
 	height?: string | number
 	caption?: string
-}>()
+}
+
+declare global {
+	interface Window {
+		heic2any: any
+	}
+}
+
+const props = defineProps<ImageProps>()
 
 let imageSrc = $ref<string | null>(null)
+let loadingError = $ref(false)
 
-const fileBaseUrl = $computed(() => ('https://files.bagel.design').replace(/\/$/, ''))
-function pathToUrl() {
-	if (pathKey?.startsWith('static/')) return `${import.meta.env.VITE_BAGEL_BASE_URL}/${pathKey}`
+const fileBaseUrl = computed(() => 'https://files.bagel.design')
 
-	return `${fileBaseUrl}/${pathKey}`
+function getImageUrl(): string | null {
+	if (!props.src && !props.pathKey) return null
+	if (props.src) return props.src
+	if (props.pathKey?.startsWith('static/')) {
+		return `${import.meta.env.VITE_BAGEL_BASE_URL}/${props.pathKey}`
+	}
+	return `${fileBaseUrl.value}/${props.pathKey}`
+}
+
+async function getCachedImage(url: string): Promise<string | null> {
+	if (!('caches' in window)) return null
+	try {
+		const imgCache = await window.caches.open('img-cache')
+		const cachedResponse = await imgCache.match(url)
+		if (cachedResponse) {
+			return URL.createObjectURL(await cachedResponse.blob())
+		}
+	} catch (error) {
+		console.warn('Cache access error:', error)
+	}
+	return null
+}
+
+async function cacheImage(url: string, blob: Blob) {
+	if (!('caches' in window)) return
+	try {
+		const imgCache = await window.caches.open('img-cache')
+		await imgCache.put(url, new Response(blob))
+	} catch (error) {
+		console.warn('Cache write error:', error)
+	}
+}
+
+async function convertHeicImage(url: string): Promise<string> {
+	await appendScript('https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js')
+	const response = await fetch(normalizeURL(url))
+	const blob = await response.blob()
+	const convertedBlob = await window.heic2any({ blob }) as Blob
+	await cacheImage(url, convertedBlob)
+	return URL.createObjectURL(convertedBlob)
 }
 
 async function loadImage() {
-	const url = src || pathToUrl()
-	console.log(url)
+	loadingError = false
+	const url = getImageUrl()
 	if (!url) {
 		imageSrc = null
 		return
 	}
-	const ext = url.split('.').pop()?.toLowerCase().split('?').shift()
 
-	if (ext === 'heic') {
-		if (!('caches' in window)) {
-			console.warn('Caching is not available. Proceeding without cache.')
-		} else {
-			try {
-				const imgCache = await window.caches.open('img-cache')
-				const cachedResponse = await imgCache.match(url)
-				if (cachedResponse) {
-					imageSrc = URL.createObjectURL(await cachedResponse.blob())
-					return
-				}
-			} catch (error) {
-				console.warn('Error accessing cache:', error)
-			}
-		}
-		try {
-			await appendScript('https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js')
-			const response = await fetch(normalizeURL(url))
-			const blob = await response.blob()
-			const convertedBlob = await window.heic2any({ blob }) as Blob
-			imageSrc = URL.createObjectURL(convertedBlob)
-			// Only attempt to cache if the cache API is available
-			if ('caches' in window) {
-				try {
-					const imgCache = await window.caches.open('img-cache')
-					imgCache.put(url, new Response(convertedBlob))
-				} catch (cacheError) {
-					console.warn('Failed to cache the image:', cacheError)
-				}
+	try {
+		const ext = url.split('.').pop()?.toLowerCase().split('?')[0]
+
+		if (ext === 'heic') {
+			const cachedSrc = await getCachedImage(url)
+			if (cachedSrc) {
+				imageSrc = cachedSrc
+				return
 			}
-		} catch (error) {
-			console.error('Error converting HEIC file:', error)
+			imageSrc = await convertHeicImage(url)
+		} else {
+			imageSrc = url
 		}
-	} else {
-		imageSrc = url
+	} catch (error) {
+		console.error('Image loading error:', error)
+		loadingError = true
+		imageSrc = null
 	}
 }
-watch(() => [src, pathKey], loadImage, { immediate: true })
+
+watch(() => [props.src, props.pathKey], loadImage, { immediate: true })
 </script>
 
 <template>
 	<figcaption v-if="caption">
-		<img v-if="imageSrc" :src="imageSrc" v-bind="$attrs" :alt="alt" :width="normalizeDimension(width)" :height="normalizeDimension(height)">
+		<img
+			v-if="imageSrc"
+			:src="imageSrc"
+			v-bind="$attrs"
+			:alt="alt"
+			:width="normalizeDimension(width)"
+			:height="normalizeDimension(height)"
+		>
 		<Skeleton
 			v-else
 			class="img-web-kit"
@@ -85,7 +114,25 @@ watch(() => [src, pathKey], loadImage, { immediate: true })
 			:height="normalizeDimension(height)"
 		/>
 	</figcaption>
-	<img v-else-if="imageSrc" :src="imageSrc" v-bind="$attrs" :alt="alt" :width="normalizeDimension(width)" :height="normalizeDimension(height)">
+
+	<img
+		v-else-if="imageSrc"
+		:src="imageSrc"
+		v-bind="$attrs"
+		:alt="alt"
+		:width="normalizeDimension(width)"
+		:height="normalizeDimension(height)"
+	>
+	<div
+		v-else-if="loadingError"
+		class="flex-center error-image"
+		:style="{
+			width: normalizeDimension(width),
+			height: normalizeDimension(height),
+		}"
+	>
+		<Icon name="broken_image" />
+	</div>
 	<Skeleton
 		v-else
 		class="img-web-kit"
@@ -101,4 +148,7 @@ watch(() => [src, pathKey], loadImage, { immediate: true })
 	border: 0;
 	width: 100%;
 }
+.error-image {
+	background-color: var(--skeleton-bg);
+}
 </style>

package/src/components/form/inputs/RichText/components/EditorToolbar.vue

@@ -35,6 +35,7 @@ function runAction(name: ToolbarConfigOption, value?: string) {
 				v-else-if="action.name !== 'separator'" v-tooltip="action.label" :icon="action.icon" thin flat
 				:aria-label="action.name" :class="[action.class, { active: selectedStyles.has(action.name) }]"
 				class=""
+				tabindex="-1"
 				@click="runAction(action.name)"
 			/>
 			<span v-else-if="action.name === 'separator'" :key="`separator-${index}`" class="opacity-2 mb-025">|</span>