@bagelink/vue 0.0.714 → 0.0.724

package/dist/index.mjs

@@ -1,7 +1,7 @@
 var __defProp2 = Object.defineProperty;
 var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField2 = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { pushScopeId, popScopeId, defineComponent, nextTick, openBlock, createBlock, createElementBlock, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, withScopeId, resolveComponent, normalizeStyle, withKeys, createElementVNode, Fragment as Fragment$1, createCommentVNode, mergeProps, withCtx, createVNode, ref, createApp, h as h$2, toDisplayString, markRaw, reactive, computed, inject, watch, unref, renderList, resolveDynamicComponent, useCssVars, useSlots, withModifiers, createTextVNode, onMounted, onUnmounted, mergeModels, useModel, createSlots, Transition, getCurrentScope, onScopeDispose, getCurrentInstance, shallowRef, withDirectives, isRef, vModelCheckbox, provide, toRef, Teleport, render as render$f, onBeforeUpdate, vShow, TransitionGroup, vModelDynamic, vModelText, vModelRadio, onBeforeUnmount, watchEffect, customRef, resolveDirective } from "vue";
+import { pushScopeId, popScopeId, defineComponent, nextTick, openBlock, createBlock, createElementBlock, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, withScopeId, resolveComponent, normalizeStyle, withKeys, createElementVNode, Fragment as Fragment$1, createCommentVNode, mergeProps, withCtx, createVNode, ref, createApp, h as h$2, toDisplayString, watch, unref, withModifiers, renderList, markRaw, reactive, computed, inject, resolveDynamicComponent, useCssVars, useSlots, createTextVNode, onMounted, onUnmounted, mergeModels, useModel, createSlots, Transition, getCurrentScope, onScopeDispose, getCurrentInstance, shallowRef, withDirectives, isRef, vModelCheckbox, provide, toRef, Teleport, render as render$f, onBeforeUpdate, vShow, TransitionGroup, vModelDynamic, vModelText, vModelRadio, onBeforeUnmount, watchEffect, customRef, resolveDirective } from "vue";
 const sides = ["top", "right", "bottom", "left"];
 const alignments = ["start", "end"];
 const placements$1 = /* @__PURE__ */ sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
@@ -2937,10 +2937,7 @@ function AxiosError(message2, code2, config, request, response) {
   code2 && (this.code = code2);
   config && (this.config = config);
   request && (this.request = request);
-  if (response) {
-    this.response = response;
-    this.status = response.status ? response.status : null;
-  }
+  response && (this.response = response);
 }
 utils$1.inherits(AxiosError, Error, {
   toJSON: function toJSON() {
@@ -2959,7 +2956,7 @@ utils$1.inherits(AxiosError, Error, {
       // Axios
       config: utils$1.toJSONObject(this.config),
       code: this.code,
-      status: this.status
+      status: this.response && this.response.status ? this.response.status : null
     };
   }
 });
@@ -3240,8 +3237,9 @@ const platform$1 = {
   protocols: ["http", "https", "file", "blob", "url", "data"]
 };
 const hasBrowserEnv = typeof window !== "undefined" && typeof document !== "undefined";
-const _navigator = typeof navigator === "object" && navigator || void 0;
-const hasStandardBrowserEnv = hasBrowserEnv && (!_navigator || ["ReactNative", "NativeScript", "NS"].indexOf(_navigator.product) < 0);
+const hasStandardBrowserEnv = ((product) => {
+  return hasBrowserEnv && ["ReactNative", "NativeScript", "NS"].indexOf(product) < 0;
+})(typeof navigator !== "undefined" && navigator.product);
 const hasStandardBrowserWebWorkerEnv = (() => {
   return typeof WorkerGlobalScope !== "undefined" && // eslint-disable-next-line no-undef
   self instanceof WorkerGlobalScope && typeof self.importScripts === "function";
@@ -3252,7 +3250,6 @@ const utils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   hasBrowserEnv,
   hasStandardBrowserEnv,
   hasStandardBrowserWebWorkerEnv,
-  navigator: _navigator,
   origin
 }, Symbol.toStringTag, { value: "Module" }));
 const platform = {
@@ -3828,7 +3825,7 @@ const isURLSameOrigin = platform.hasStandardBrowserEnv ? (
   // Standard browser envs have full support of the APIs needed to test
   // whether the request URL is of the same origin as current location.
   function standardBrowserEnv() {
-    const msie = platform.navigator && /(msie|trident)/i.test(platform.navigator.userAgent);
+    const msie = /(msie|trident)/i.test(navigator.userAgent);
     const urlParsingNode = document.createElement("a");
     let originURL;
     function resolveURL(url) {
@@ -4334,7 +4331,6 @@ const fetchAdapter = isFetchSupported && (async (config) => {
     if (!utils$1.isString(withCredentials)) {
       withCredentials = withCredentials ? "include" : "omit";
     }
-    const isCredentialsSupported = "credentials" in Request.prototype;
     request = new Request(url, {
       ...fetchOptions,
       signal: composedSignal,
@@ -4342,7 +4338,7 @@ const fetchAdapter = isFetchSupported && (async (config) => {
       headers: headers.normalize().toJSON(),
       body: data2,
       duplex: "half",
-      credentials: isCredentialsSupported ? withCredentials : void 0
+      credentials: withCredentials
     });
     let response = await fetch(request);
     const isStreamResponse = supportsResponseStream && (responseType === "stream" || responseType === "response");
@@ -4486,7 +4482,7 @@ function dispatchRequest(config) {
     return Promise.reject(reason);
   });
 }
-const VERSION = "1.7.5";
+const VERSION = "1.7.4";
 const validators$1 = {};
 ["object", "boolean", "number", "function", "string", "symbol"].forEach((type3, i2) => {
   validators$1[type3] = function validator2(thing) {
@@ -5149,6 +5145,231 @@ class Bagel {
     return data2;
   }
 }
+const _withScopeId$3 = (n2) => (pushScopeId("data-v-c003c59a"), n2 = n2(), popScopeId(), n2);
+const _hoisted_1$N = { class: "lightbox-item" };
+const _hoisted_2$C = ["src"];
+const _hoisted_3$p = {
+  key: 1,
+  controls: "",
+  autoplay: ""
+};
+const _hoisted_4$h = ["src"];
+const _hoisted_5$g = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("track", {
+  kind: "captions",
+  src: "#",
+  srclang: "en",
+  label: "English"
+}, null, -1));
+const _hoisted_6$b = ["src", "title"];
+const _hoisted_7$5 = {
+  key: 3,
+  class: "file-info txt-white"
+};
+const _hoisted_8$3 = ["href"];
+const _hoisted_9$3 = { class: "navigation" };
+const _hoisted_10$2 = {
+  key: 0,
+  class: "thumbnails"
+};
+const _hoisted_11$2 = ["src", "onClick"];
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
+  __name: "Lightbox",
+  setup(__props, { expose: __expose }) {
+    let isOpen = ref(false);
+    let currentItem = ref();
+    let group = ref([]);
+    let currentIndex = ref(0);
+    function open(item, groupItems = []) {
+      isOpen.value = true;
+      currentItem.value = item;
+      if (!groupItems.length) return;
+      group.value = groupItems;
+      currentIndex.value = groupItems.indexOf(item);
+      document.addEventListener("keydown", handleKeydown);
+    }
+    function close2() {
+      isOpen.value = false;
+      document.removeEventListener("keydown", handleKeydown);
+    }
+    function next() {
+      if (group.value.length > 1) {
+        currentIndex.value = (currentIndex.value + 1) % group.value.length;
+        currentItem.value = group.value[currentIndex.value];
+      }
+    }
+    function prev() {
+      if (group.value.length > 1) {
+        currentIndex.value = (currentIndex.value - 1 + group.value.length) % group.value.length;
+        currentItem.value = group.value[currentIndex.value];
+      }
+    }
+    function selectItem(index2) {
+      currentIndex.value = index2;
+      currentItem.value = group.value[index2];
+    }
+    watch(() => isOpen.value, (val) => {
+      if (val) document.body.style.overflow = "hidden";
+      else document.body.style.overflow = "";
+    });
+    function normalizeURL(url) {
+      if (url.startsWith("https://")) return url;
+      url = url.replace(/http:\/\//, "");
+      return `//${url}`;
+    }
+    function handleKeydown(event) {
+      if (event.key === "Escape") {
+        close2();
+      } else if (event.key === "ArrowLeft") {
+        prev();
+      } else if (event.key === "ArrowRight") {
+        next();
+      }
+    }
+    __expose({ open, close: close2 });
+    return (_ctx, _cache) => {
+      var _a2, _b, _c, _d, _e2, _f, _g, _h, _i, _j;
+      return unref(isOpen) ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "lightbox-overlay",
+        onKeydown: [
+          withKeys(close2, ["esc"]),
+          withKeys(prev, ["left"]),
+          withKeys(next, ["right"])
+        ],
+        onClick: close2
+      }, [
+        createElementVNode("div", {
+          class: "lightbox",
+          onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+          }, ["stop"]))
+        }, [
+          createVNode(unref(Btn), {
+            flat: "",
+            class: "close-button color-white",
+            icon: "close",
+            onClick: close2
+          }),
+          createElementVNode("div", _hoisted_1$N, [
+            ((_a2 = unref(currentItem)) == null ? void 0 : _a2.type) === "image" ? (openBlock(), createElementBlock("img", {
+              key: 0,
+              src: (_b = unref(currentItem)) == null ? void 0 : _b.src,
+              alt: "Preview"
+            }, null, 8, _hoisted_2$C)) : ((_c = unref(currentItem)) == null ? void 0 : _c.type) === "video" ? (openBlock(), createElementBlock("video", _hoisted_3$p, [
+              createElementVNode("source", {
+                src: (_d = unref(currentItem)) == null ? void 0 : _d.src,
+                type: "video/mp4"
+              }, null, 8, _hoisted_4$h),
+              _hoisted_5$g
+            ])) : ((_e2 = unref(currentItem)) == null ? void 0 : _e2.type) === "pdf" ? (openBlock(), createElementBlock("embed", {
+              key: 2,
+              src: normalizeURL((_f = unref(currentItem)) == null ? void 0 : _f.src),
+              type: "application/pdf",
+              width: "100%",
+              height: "1080",
+              title: (_g = unref(currentItem)) == null ? void 0 : _g.name
+            }, null, 8, _hoisted_6$b)) : (openBlock(), createElementBlock("div", _hoisted_7$5, [
+              createElementVNode("p", null, "File: " + toDisplayString((_h = unref(currentItem)) == null ? void 0 : _h.name), 1),
+              createElementVNode("p", null, "Type: " + toDisplayString((_i = unref(currentItem)) == null ? void 0 : _i.type), 1),
+              createElementVNode("a", {
+                href: (_j = unref(currentItem)) == null ? void 0 : _j.src,
+                target: "_blank"
+              }, "Open file", 8, _hoisted_8$3)
+            ]))
+          ]),
+          createElementVNode("div", _hoisted_9$3, [
+            createVNode(unref(Btn), {
+              class: "navigation-btn",
+              icon: "arrow_back",
+              onClick: prev
+            }),
+            createVNode(unref(Btn), {
+              class: "navigation-btn",
+              icon: "arrow_forward",
+              onClick: next
+            })
+          ]),
+          unref(group) && unref(group).length > 1 ? (openBlock(), createElementBlock("div", _hoisted_10$2, [
+            (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(group), (item, index2) => {
+              return openBlock(), createElementBlock(Fragment$1, { key: index2 }, [
+                item.type === "image" ? (openBlock(), createElementBlock("img", {
+                  key: 0,
+                  class: "thumbnail",
+                  src: item.src,
+                  alt: "",
+                  onClick: ($event) => selectItem(index2)
+                }, null, 8, _hoisted_11$2)) : (openBlock(), createBlock(unref(_sfc_main$Q), {
+                  key: 1,
+                  class: "thumbnail",
+                  icon: "description",
+                  onClick: ($event) => selectItem(index2)
+                }, null, 8, ["onClick"]))
+              ], 64);
+            }), 128))
+          ])) : createCommentVNode("", true)
+        ])
+      ], 32)) : createCommentVNode("", true);
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-c003c59a"]]);
+const groups = {};
+const lightboxDirective = {
+  mounted(el, binding) {
+    const lightboxInstance = createLightboxInstance();
+    if (!lightboxInstance || !lightboxInstance.open) return;
+    if (binding.value.group) {
+      if (!groups[binding.value.group]) groups[binding.value.group] = [];
+      groups[binding.value.group].push({
+        src: binding.value.src || binding.value,
+        type: binding.value.type || determineFileType(binding.value.src || binding.value),
+        name: binding.value.name || ""
+      });
+    }
+    el.addEventListener("click", () => {
+      const group = binding.value.group || null;
+      const item = {
+        src: binding.value.src || binding.value,
+        type: binding.value.type || determineFileType(binding.value.src || binding.value),
+        name: binding.value.name || "",
+        thumbnail: binding.value.thumbnail || ""
+      };
+      const lightboxInstance2 = createLightboxInstance();
+      if (!lightboxInstance2 || !lightboxInstance2.open) return;
+      if (binding.value.group) {
+        if (!groups[binding.value.group]) groups[binding.value.group] = [];
+        groups[binding.value.group].push(item);
+      }
+      const open = lightboxInstance2.open;
+      open(item, groups[group]);
+    });
+  }
+};
+function determineFileType(url) {
+  var _a2;
+  const extension = ((_a2 = url.split(".").pop()) == null ? void 0 : _a2.toLowerCase()) || "";
+  if (IMAGE_FORMATS_REGEXP.test(extension)) return "image";
+  if (VIDEO_FORMATS_REGEXP.test(extension)) return "video";
+  if (["pdf"].includes(extension)) return "pdf";
+  return "unknown";
+}
+function createLightboxInstance() {
+  const lightboxEl = document.createElement("div");
+  document.body.prepend(lightboxEl);
+  const app = createApp(Lightbox$1);
+  return app.mount(lightboxEl);
+}
+const Lightbox = {
+  install(app) {
+    app.directive("lightbox", lightboxDirective);
+  }
+};
 const clickOutside = {
   beforeMount(el, binding) {
     el.clickOutsideEvent = (event) => {
@@ -5440,6 +5661,7 @@ const BagelVue = {
   install: (app, options) => {
     const bagel = new Bagel({ host: options.host, onError: options.onError });
     app.directive("click-outside", clickOutside);
+    app.use(Lightbox);
     app.use(Gt$1, {
       themes: {
         "bgl-theme": {
@@ -5646,13 +5868,6 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _export_sfc = (sfc, props2) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props2) {
-    target[key] = val;
-  }
-  return target;
-};
 const NavBar = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-776cab4a"]]);
 const _hoisted_1$L = {
   key: 0,
@@ -6498,7 +6713,7 @@ const _hoisted_3$k = [
 const _hoisted_4$e = { class: "infinite-wrapper" };
 const _hoisted_5$e = { class: "row first-row" };
 const _hoisted_6$9 = { key: 0 };
-const _hoisted_7$5 = ["onClick"];
+const _hoisted_7$4 = ["onClick"];
 const _hoisted_8$2 = { class: "flex" };
 const _hoisted_9$2 = ["onClick"];
 const _hoisted_10$1 = { key: 0 };
@@ -6671,7 +6886,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
                       }, null, 8, ["class"])
                     ], 2)
                   ])
-                ], 8, _hoisted_7$5);
+                ], 8, _hoisted_7$4);
               }), 128))
             ]),
             createElementVNode("tbody", null, [
@@ -6770,7 +6985,7 @@ const _hoisted_6$8 = {
   key: 0,
   class: "data-row"
 };
-const _hoisted_7$4 = { class: "key" };
+const _hoisted_7$3 = { class: "key" };
 const _hoisted_8$1 = { class: "m-0" };
 const _hoisted_9$1 = {
   key: 0,
@@ -6839,7 +7054,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(computedSchema.value, ({ id, label }) => {
             return openBlock(), createElementBlock(Fragment$1, { key: id }, [
               !isUnset(itemData.value[id]) ? (openBlock(), createElementBlock("div", _hoisted_6$8, [
-                createElementVNode("div", _hoisted_7$4, [
+                createElementVNode("div", _hoisted_7$3, [
                   createElementVNode("p", _hoisted_8$1, toDisplayString(label), 1)
                 ]),
                 createElementVNode("div", null, [
@@ -16317,8 +16532,7 @@ const _hoisted_4$c = {
   class: "ms-auto ps-05 me-05"
 };
 const _hoisted_5$c = ["value"];
-const _hoisted_6$7 = { class: "selectinput-options" };
-const _hoisted_7$3 = ["aria-selected", "onClick", "onKeydown"];
+const _hoisted_6$7 = ["aria-selected", "onClick", "onKeydown"];
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "SelectInput",
   props: {
@@ -16483,7 +16697,9 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                 placeholder: "Search",
                 icon: "search"
               }, null, 8, ["modelValue"])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_6$7, [
+              createElementVNode("div", {
+                class: normalizeClass(["selectinput-options", { multiselect: _ctx.multiselect }])
+              }, [
                 (openBlock(true), createElementBlock(Fragment$1, null, renderList(filteredOptions.value, (option2, i2) => {
                   return openBlock(), createElementBlock("div", {
                     key: `${option2}${i2}`,
@@ -16494,19 +16710,21 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                     onClick: ($event) => select2(option2),
                     onKeydown: withKeys(($event) => select2(option2), ["enter"])
                   }, [
-                    isSelected(option2) ? (openBlock(), createBlock(unref(_sfc_main$Q), {
-                      key: 0,
-                      icon: "check"
-                    })) : createCommentVNode("", true),
-                    !isSelected(option2) ? (openBlock(), createBlock(unref(_sfc_main$Q), {
-                      key: 1,
-                      class: "opacity-3",
-                      icon: "fiber_manual_record"
-                    })) : createCommentVNode("", true),
+                    _ctx.multiselect ? (openBlock(), createElementBlock(Fragment$1, { key: 0 }, [
+                      isSelected(option2) ? (openBlock(), createBlock(unref(_sfc_main$Q), {
+                        key: 0,
+                        icon: "select_check_box"
+                      })) : createCommentVNode("", true),
+                      !isSelected(option2) ? (openBlock(), createBlock(unref(_sfc_main$Q), {
+                        key: 1,
+                        class: "opacity-3",
+                        icon: "check_box_outline_blank"
+                      })) : createCommentVNode("", true)
+                    ], 64)) : createCommentVNode("", true),
                     createElementVNode("span", null, toDisplayString(getLabel(option2)), 1)
-                  ], 42, _hoisted_7$3);
+                  ], 42, _hoisted_6$7);
                 }), 128))
-              ]),
+              ], 2),
               renderSlot(_ctx.$slots, "last", {}, void 0, true)
             ]),
             _: 3
@@ -16530,9 +16748,10 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                 !_ctx.hideLabel ? (openBlock(), createElementBlock("p", _hoisted_3$g, toDisplayString(selectedLabel.value), 1)) : createCommentVNode("", true),
                 _ctx.clearable && selectedItemCount.value > 0 ? (openBlock(), createElementBlock("div", _hoisted_4$c, [
                   createVNode(unref(Btn), {
+                    flat: "",
                     thin: "",
                     icon: "clear",
-                    class: "color-primary bg-gray-20",
+                    class: "color-gray",
                     onClick: _cache[0] || (_cache[0] = ($event) => {
                       isRef(selectedItems) ? selectedItems.value = [] : selectedItems = [];
                       emitUpdate();
@@ -16560,7 +16779,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-a26862a2"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-25fde24f"]]);
 /*!
   * vue-draggable-next v2.2.0
   * (c) 2023 Anish George
@@ -33240,11 +33459,7 @@ function createNodeFromContent(content, schema, options) {
       if (isArrayContent) {
         return Fragment.fromArray(content.map((item) => schema.nodeFromJSON(item)));
       }
-      const node = schema.nodeFromJSON(content);
-      if (options.errorOnInvalidContent) {
-        node.check();
-      }
-      return node;
+      return schema.nodeFromJSON(content);
     } catch (error) {
       if (options.errorOnInvalidContent) {
         throw new Error("[tiptap error]: Invalid JSON content", { cause: error });
@@ -46423,7 +46638,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
 });
 const TelInput = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-9d176183"]]);
 /*!
- * Signature Pad v5.0.3 | https://github.com/szimek/signature_pad
+ * Signature Pad v5.0.2 | https://github.com/szimek/signature_pad
  * (c) 2024 Szymon Nowak | Released under the MIT license
  */
 class Point {
@@ -46463,7 +46678,7 @@ class Bezier {
     const l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
     const dxm = m1.x - m2.x;
     const dym = m1.y - m2.y;
-    const k2 = l1 + l2 == 0 ? 0 : l2 / (l1 + l2);
+    const k2 = l2 / (l1 + l2);
     const cm = { x: m2.x + dxm * k2, y: m2.y + dym * k2 };
     const tx = s2.x - cm.x;
     const ty = s2.y - cm.y;
@@ -47154,7 +47369,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$f = {
-  class: "toolbar",
+  class: "toolbar flex gap-025 pb-05 flex-wrap",
   role: "toolbar"
 };
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
@@ -47165,82 +47380,58 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   emits: ["action"],
   setup(__props, { emit: __emit }) {
     const emit2 = __emit;
-    const colorPicker = ref(null);
-    const fontSizeInput = ref(null);
+    ref(null);
+    ref(null);
     const toolbarOptions = [
+      { name: "separator" },
       { name: "bold", icon: "format_bold" },
       { name: "italic", icon: "format_italic" },
       { name: "underline", icon: "format_underlined" },
-      { name: "fontSize", icon: "format_size" },
-      { name: "fontFamily", icon: "font_download" },
-      { name: "textColor", icon: "text_format" },
-      { name: "backgroundColor", icon: "format_color_fill" },
-      { name: "alignLeft", icon: "format_align_left" },
-      { name: "alignCenter", icon: "format_align_center" },
-      { name: "alignRight", icon: "format_align_right" },
-      { name: "alignJustify", icon: "format_align_justify" },
+      { name: "separator" },
       { name: "orderedList", icon: "format_list_numbered" },
       { name: "unorderedList", icon: "format_list_bulleted" },
-      { name: "indent", icon: "format_indent_increase" },
-      { name: "outdent", icon: "format_indent_decrease" },
-      { name: "link", icon: "link" },
-      { name: "image", icon: "image" },
-      { name: "table", icon: "table_chart" },
-      { name: "blockquote", icon: "format_quote" },
-      { name: "codeBlock", icon: "code" },
-      { name: "splitView", icon: "splitscreen_right" },
-      { name: "codeView", icon: "code" }
+      { name: "separator" },
+      { name: "link", icon: "add_link" },
+      { name: "image", icon: "add_photo_alternate" },
+      { name: "youtube", icon: "youtube_activity" },
+      { name: "separator" },
+      { name: "splitView", icon: "code" },
+      { name: "clear", icon: "format_clear" }
     ];
-    function handleColorPick(type3) {
-      var _a2;
-      const color2 = (_a2 = colorPicker.value) == null ? void 0 : _a2.value;
-      if (color2) {
-        emit2("action", type3, color2);
-      }
-    }
-    function handleFontSizeChange() {
-      var _a2;
-      const size2 = (_a2 = fontSizeInput.value) == null ? void 0 : _a2.value;
-      if (size2) {
-        emit2("action", "fontSize", size2);
-      }
+    function handleSelectChange(selectedOption) {
+      emit2("action", "formatBlock", selectedOption);
     }
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
       return openBlock(), createElementBlock("div", _hoisted_1$f, [
-        (openBlock(true), createElementBlock(Fragment$1, null, renderList(toolbarOptions.filter((t) => _ctx.config.includes(t.name)), (action) => {
-          return withDirectives((openBlock(), createBlock(unref(Btn), {
-            key: action.name,
-            thin: "",
-            color: "light",
-            "aria-label": action.name,
-            icon: action.icon,
-            onClick: ($event) => emit2("action", action.name)
-          }, null, 8, ["aria-label", "icon", "onClick"])), [
-            [_directive_tooltip, action.name]
-          ]);
-        }), 128)),
-        _ctx.config.includes("textColor") || _ctx.config.includes("backgroundColor") ? (openBlock(), createElementBlock("input", {
-          key: 0,
-          ref_key: "colorPicker",
-          ref: colorPicker,
-          type: "color",
-          onChange: _cache[0] || (_cache[0] = ($event) => handleColorPick(_ctx.config.includes("textColor") ? "textColor" : "backgroundColor"))
-        }, null, 544)) : createCommentVNode("", true),
-        _ctx.config.includes("fontSize") ? (openBlock(), createElementBlock("input", {
-          key: 1,
-          ref_key: "fontSizeInput",
-          ref: fontSizeInput,
-          type: "number",
-          min: "1",
-          max: "7",
-          onChange: handleFontSizeChange
-        }, null, 544)) : createCommentVNode("", true)
+        createVNode(SelectInput, {
+          class: "m-0 w150",
+          options: ["Text", "Heading 1", "Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6", "Blockquote", "Code"],
+          onChange: handleSelectChange
+        }),
+        (openBlock(), createElementBlock(Fragment$1, null, renderList(toolbarOptions, (action, index2) => {
+          return openBlock(), createElementBlock(Fragment$1, null, [
+            action.name !== "separator" && _ctx.config.includes(action.name) ? withDirectives((openBlock(), createBlock(unref(Btn), {
+              key: action.name,
+              thin: "",
+              flat: "",
+              class: "rounded",
+              "aria-label": action.name,
+              icon: action.icon,
+              onClick: ($event) => emit2("action", action.name)
+            }, null, 8, ["aria-label", "icon", "onClick"])), [
+              [_directive_tooltip, action.name]
+            ]) : createCommentVNode("", true),
+            action.name === "separator" ? (openBlock(), createElementBlock("span", {
+              key: `separator-${index2}`,
+              class: "opacity-2 mb-025"
+            }, "|")) : createCommentVNode("", true)
+          ], 64);
+        }), 64))
       ]);
     };
   }
 });
-const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-4c741194"]]);
 function applyFormatting(command2, value = "") {
   const selection = window.getSelection();
   if (selection && selection.rangeCount > 0) {
@@ -47413,8 +47604,11 @@ function createTable() {
     }
   }
 }
-const _hoisted_1$e = { class: "rich-text-editor" };
-const _hoisted_2$b = ["innerHTML"];
+const _hoisted_1$e = { class: "rich-text-editor round pt-05 px-1 pb-1" };
+const _hoisted_2$b = {
+  key: 0,
+  class: "preview-area bg-black color-white w-100 rounded p-1"
+};
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
@@ -47448,7 +47642,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       "blockquote",
       "codeBlock",
       "splitView",
-      "codeView"
+      "youtube",
+      "codeView",
+      "clear"
     ];
     const config = ref(props2.toolbarConfig || defaultConfig2);
     let contentHtml = ref(props2.modelValue);
@@ -47531,15 +47727,15 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$e, [
-        createVNode(Toolbar, {
+        createVNode(_sfc_main$a, {
           config: config.value,
           onAction: handleToolbarAction
         }, null, 8, ["config"]),
         createElementVNode("div", {
-          class: normalizeClass(["editor-container", { "split-view": unref(isSplitView) }])
+          class: normalizeClass(["editor-container flex flex-stretch", { "split-view": unref(isSplitView) }])
         }, [
           createElementVNode("div", {
-            class: normalizeClass(["content-area", { "code-view": unref(isCodeView) }])
+            class: normalizeClass(["content-area rounded p-1 bg-white shadow-light w-100 grid", { "code-view": unref(isCodeView) }])
           }, [
             unref(isCodeView) ? withDirectives((openBlock(), createElementBlock("textarea", {
               key: 0,
@@ -47552,6 +47748,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
               ref_key: "editableContent",
               ref: editableContent,
               contenteditable: "true",
+              class: "editableContent",
               role: "textbox",
               "aria-multiline": "true",
               tabindex: "0",
@@ -47559,17 +47756,13 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
               onKeydown: handleKeyDown2
             }, null, 544))
           ], 2),
-          unref(isSplitView) ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: "preview-area",
-            innerHTML: unref(contentHtml)
-          }, null, 8, _hoisted_2$b)) : createCommentVNode("", true)
+          unref(isSplitView) ? (openBlock(), createElementBlock("code", _hoisted_2$b, toDisplayString(unref(contentHtml)), 1)) : createCommentVNode("", true)
         ], 2)
       ]);
     };
   }
 });
-const index = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-e3cd444d"]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-ee96aa53"]]);
 const _hoisted_1$d = ["for"];
 const _hoisted_2$a = ["id", "name", "value"];
 const _hoisted_3$8 = { class: "flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025" };
@@ -50738,8 +50931,8 @@ function selector(selector2) {
 }
 function selection_select(select2) {
   if (typeof select2 !== "function") select2 = selector(select2);
-  for (var groups = this._groups, m2 = groups.length, subgroups = new Array(m2), j2 = 0; j2 < m2; ++j2) {
-    for (var group = groups[j2], n2 = group.length, subgroup = subgroups[j2] = new Array(n2), node, subnode, i2 = 0; i2 < n2; ++i2) {
+  for (var groups2 = this._groups, m2 = groups2.length, subgroups = new Array(m2), j2 = 0; j2 < m2; ++j2) {
+    for (var group = groups2[j2], n2 = group.length, subgroup = subgroups[j2] = new Array(n2), node, subnode, i2 = 0; i2 < n2; ++i2) {
       if ((node = group[i2]) && (subnode = select2.call(node, node.__data__, i2, group))) {
         if ("__data__" in node) subnode.__data__ = node.__data__;
         subgroup[i2] = subnode;
@@ -50767,8 +50960,8 @@ function arrayAll(select2) {
 function selection_selectAll(select2) {
   if (typeof select2 === "function") select2 = arrayAll(select2);
   else select2 = selectorAll(select2);
-  for (var groups = this._groups, m2 = groups.length, subgroups = [], parents = [], j2 = 0; j2 < m2; ++j2) {
-    for (var group = groups[j2], n2 = group.length, node, i2 = 0; i2 < n2; ++i2) {
+  for (var groups2 = this._groups, m2 = groups2.length, subgroups = [], parents = [], j2 = 0; j2 < m2; ++j2) {
+    for (var group = groups2[j2], n2 = group.length, node, i2 = 0; i2 < n2; ++i2) {
       if (node = group[i2]) {
         subgroups.push(select2.call(node, node.__data__, i2, group));
         parents.push(node);
@@ -50813,8 +51006,8 @@ function selection_selectChildren(match2) {
 }
 function selection_filter(match2) {
   if (typeof match2 !== "function") match2 = matcher(match2);
-  for (var groups = this._groups, m2 = groups.length, subgroups = new Array(m2), j2 = 0; j2 < m2; ++j2) {
-    for (var group = groups[j2], n2 = group.length, subgroup = subgroups[j2] = [], node, i2 = 0; i2 < n2; ++i2) {
+  for (var groups2 = this._groups, m2 = groups2.length, subgroups = new Array(m2), j2 = 0; j2 < m2; ++j2) {
+    for (var group = groups2[j2], n2 = group.length, subgroup = subgroups[j2] = [], node, i2 = 0; i2 < n2; ++i2) {
       if ((node = group[i2]) && match2.call(node, node.__data__, i2, group)) {
         subgroup.push(node);
       }
@@ -50904,10 +51097,10 @@ function datum(node) {
 }
 function selection_data(value, key) {
   if (!arguments.length) return Array.from(this, datum);
-  var bind3 = key ? bindKey : bindIndex, parents = this._parents, groups = this._groups;
+  var bind3 = key ? bindKey : bindIndex, parents = this._parents, groups2 = this._groups;
   if (typeof value !== "function") value = constant$1(value);
-  for (var m2 = groups.length, update = new Array(m2), enter2 = new Array(m2), exit = new Array(m2), j2 = 0; j2 < m2; ++j2) {
-    var parent = parents[j2], group = groups[j2], groupLength = group.length, data2 = arraylike(value.call(parent, parent && parent.__data__, j2, parents)), dataLength = data2.length, enterGroup = enter2[j2] = new Array(dataLength), updateGroup = update[j2] = new Array(dataLength), exitGroup = exit[j2] = new Array(groupLength);
+  for (var m2 = groups2.length, update = new Array(m2), enter2 = new Array(m2), exit = new Array(m2), j2 = 0; j2 < m2; ++j2) {
+    var parent = parents[j2], group = groups2[j2], groupLength = group.length, data2 = arraylike(value.call(parent, parent && parent.__data__, j2, parents)), dataLength = data2.length, enterGroup = enter2[j2] = new Array(dataLength), updateGroup = update[j2] = new Array(dataLength), exitGroup = exit[j2] = new Array(groupLength);
     bind3(parent, group, enterGroup, updateGroup, exitGroup, data2, key);
     for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0) {
       if (previous = enterGroup[i0]) {
@@ -50959,8 +51152,8 @@ function selection_merge(context) {
   return new Selection(merges, this._parents);
 }
 function selection_order() {
-  for (var groups = this._groups, j2 = -1, m2 = groups.length; ++j2 < m2; ) {
-    for (var group = groups[j2], i2 = group.length - 1, next = group[i2], node; --i2 >= 0; ) {
+  for (var groups2 = this._groups, j2 = -1, m2 = groups2.length; ++j2 < m2; ) {
+    for (var group = groups2[j2], i2 = group.length - 1, next = group[i2], node; --i2 >= 0; ) {
       if (node = group[i2]) {
         if (next && node.compareDocumentPosition(next) ^ 4) next.parentNode.insertBefore(node, next);
         next = node;
@@ -50974,8 +51167,8 @@ function selection_sort(compare2) {
   function compareNode(a2, b2) {
     return a2 && b2 ? compare2(a2.__data__, b2.__data__) : !a2 - !b2;
   }
-  for (var groups = this._groups, m2 = groups.length, sortgroups = new Array(m2), j2 = 0; j2 < m2; ++j2) {
-    for (var group = groups[j2], n2 = group.length, sortgroup = sortgroups[j2] = new Array(n2), node, i2 = 0; i2 < n2; ++i2) {
+  for (var groups2 = this._groups, m2 = groups2.length, sortgroups = new Array(m2), j2 = 0; j2 < m2; ++j2) {
+    for (var group = groups2[j2], n2 = group.length, sortgroup = sortgroups[j2] = new Array(n2), node, i2 = 0; i2 < n2; ++i2) {
       if (node = group[i2]) {
         sortgroup[i2] = node;
       }
@@ -50997,8 +51190,8 @@ function selection_nodes() {
   return Array.from(this);
 }
 function selection_node() {
-  for (var groups = this._groups, j2 = 0, m2 = groups.length; j2 < m2; ++j2) {
-    for (var group = groups[j2], i2 = 0, n2 = group.length; i2 < n2; ++i2) {
+  for (var groups2 = this._groups, j2 = 0, m2 = groups2.length; j2 < m2; ++j2) {
+    for (var group = groups2[j2], i2 = 0, n2 = group.length; i2 < n2; ++i2) {
       var node = group[i2];
       if (node) return node;
     }
@@ -51014,8 +51207,8 @@ function selection_empty() {
   return !this.node();
 }
 function selection_each(callback) {
-  for (var groups = this._groups, j2 = 0, m2 = groups.length; j2 < m2; ++j2) {
-    for (var group = groups[j2], i2 = 0, n2 = group.length, node; i2 < n2; ++i2) {
+  for (var groups2 = this._groups, j2 = 0, m2 = groups2.length; j2 < m2; ++j2) {
+    for (var group = groups2[j2], i2 = 0, n2 = group.length, node; i2 < n2; ++i2) {
       if (node = group[i2]) callback.call(node, node.__data__, i2, group);
     }
   }
@@ -51338,15 +51531,15 @@ function selection_dispatch(type3, params) {
   return this.each((typeof params === "function" ? dispatchFunction : dispatchConstant)(type3, params));
 }
 function* selection_iterator() {
-  for (var groups = this._groups, j2 = 0, m2 = groups.length; j2 < m2; ++j2) {
-    for (var group = groups[j2], i2 = 0, n2 = group.length, node; i2 < n2; ++i2) {
+  for (var groups2 = this._groups, j2 = 0, m2 = groups2.length; j2 < m2; ++j2) {
+    for (var group = groups2[j2], i2 = 0, n2 = group.length, node; i2 < n2; ++i2) {
       if (node = group[i2]) yield node;
     }
   }
 }
 var root = [null];
-function Selection(groups, parents) {
-  this._groups = groups;
+function Selection(groups2, parents) {
+  this._groups = groups2;
   this._parents = parents;
 }
 function selection_selection() {