@bagelink/vue 0.0.714 → 0.0.724

package/dist/index.cjs

@@ -2939,10 +2939,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() {
@@ -2961,7 +2958,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
     };
   }
 });
@@ -3242,8 +3239,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";
@@ -3254,7 +3252,6 @@ const utils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   hasBrowserEnv,
   hasStandardBrowserEnv,
   hasStandardBrowserWebWorkerEnv,
-  navigator: _navigator,
   origin
 }, Symbol.toStringTag, { value: "Module" }));
 const platform = {
@@ -3830,7 +3827,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) {
@@ -4336,7 +4333,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,
@@ -4344,7 +4340,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");
@@ -4488,7 +4484,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) {
@@ -5151,6 +5147,231 @@ class Bagel {
     return data2;
   }
 }
+const _withScopeId$3 = (n2) => (vue.pushScopeId("data-v-c003c59a"), n2 = n2(), vue.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__ */ vue.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__ */ vue.defineComponent({
+  __name: "Lightbox",
+  setup(__props, { expose: __expose }) {
+    let isOpen = vue.ref(false);
+    let currentItem = vue.ref();
+    let group = vue.ref([]);
+    let currentIndex = vue.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];
+    }
+    vue.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 vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        class: "lightbox-overlay",
+        onKeydown: [
+          vue.withKeys(close2, ["esc"]),
+          vue.withKeys(prev, ["left"]),
+          vue.withKeys(next, ["right"])
+        ],
+        onClick: close2
+      }, [
+        vue.createElementVNode("div", {
+          class: "lightbox",
+          onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+          }, ["stop"]))
+        }, [
+          vue.createVNode(vue.unref(Btn), {
+            flat: "",
+            class: "close-button color-white",
+            icon: "close",
+            onClick: close2
+          }),
+          vue.createElementVNode("div", _hoisted_1$N, [
+            ((_a2 = vue.unref(currentItem)) == null ? void 0 : _a2.type) === "image" ? (vue.openBlock(), vue.createElementBlock("img", {
+              key: 0,
+              src: (_b = vue.unref(currentItem)) == null ? void 0 : _b.src,
+              alt: "Preview"
+            }, null, 8, _hoisted_2$C)) : ((_c = vue.unref(currentItem)) == null ? void 0 : _c.type) === "video" ? (vue.openBlock(), vue.createElementBlock("video", _hoisted_3$p, [
+              vue.createElementVNode("source", {
+                src: (_d = vue.unref(currentItem)) == null ? void 0 : _d.src,
+                type: "video/mp4"
+              }, null, 8, _hoisted_4$h),
+              _hoisted_5$g
+            ])) : ((_e2 = vue.unref(currentItem)) == null ? void 0 : _e2.type) === "pdf" ? (vue.openBlock(), vue.createElementBlock("embed", {
+              key: 2,
+              src: normalizeURL((_f = vue.unref(currentItem)) == null ? void 0 : _f.src),
+              type: "application/pdf",
+              width: "100%",
+              height: "1080",
+              title: (_g = vue.unref(currentItem)) == null ? void 0 : _g.name
+            }, null, 8, _hoisted_6$b)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$5, [
+              vue.createElementVNode("p", null, "File: " + vue.toDisplayString((_h = vue.unref(currentItem)) == null ? void 0 : _h.name), 1),
+              vue.createElementVNode("p", null, "Type: " + vue.toDisplayString((_i = vue.unref(currentItem)) == null ? void 0 : _i.type), 1),
+              vue.createElementVNode("a", {
+                href: (_j = vue.unref(currentItem)) == null ? void 0 : _j.src,
+                target: "_blank"
+              }, "Open file", 8, _hoisted_8$3)
+            ]))
+          ]),
+          vue.createElementVNode("div", _hoisted_9$3, [
+            vue.createVNode(vue.unref(Btn), {
+              class: "navigation-btn",
+              icon: "arrow_back",
+              onClick: prev
+            }),
+            vue.createVNode(vue.unref(Btn), {
+              class: "navigation-btn",
+              icon: "arrow_forward",
+              onClick: next
+            })
+          ]),
+          vue.unref(group) && vue.unref(group).length > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$2, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(group), (item, index2) => {
+              return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index2 }, [
+                item.type === "image" ? (vue.openBlock(), vue.createElementBlock("img", {
+                  key: 0,
+                  class: "thumbnail",
+                  src: item.src,
+                  alt: "",
+                  onClick: ($event) => selectItem(index2)
+                }, null, 8, _hoisted_11$2)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$Q), {
+                  key: 1,
+                  class: "thumbnail",
+                  icon: "description",
+                  onClick: ($event) => selectItem(index2)
+                }, null, 8, ["onClick"]))
+              ], 64);
+            }), 128))
+          ])) : vue.createCommentVNode("", true)
+        ])
+      ], 32)) : vue.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 = vue.createApp(Lightbox$1);
+  return app.mount(lightboxEl);
+}
+const Lightbox = {
+  install(app) {
+    app.directive("lightbox", lightboxDirective);
+  }
+};
 const clickOutside = {
   beforeMount(el, binding) {
     el.clickOutsideEvent = (event) => {
@@ -5442,6 +5663,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": {
@@ -5648,13 +5870,6 @@ const _sfc_main$P = /* @__PURE__ */ vue.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,
@@ -6500,7 +6715,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 };
@@ -6673,7 +6888,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                       }, null, 8, ["class"])
                     ], 2)
                   ])
-                ], 8, _hoisted_7$5);
+                ], 8, _hoisted_7$4);
               }), 128))
             ]),
             vue.createElementVNode("tbody", null, [
@@ -6772,7 +6987,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,
@@ -6841,7 +7056,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value, ({ id, label }) => {
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: id }, [
               !isUnset(itemData.value[id]) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$8, [
-                vue.createElementVNode("div", _hoisted_7$4, [
+                vue.createElementVNode("div", _hoisted_7$3, [
                   vue.createElementVNode("p", _hoisted_8$1, vue.toDisplayString(label), 1)
                 ]),
                 vue.createElementVNode("div", null, [
@@ -16319,8 +16534,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__ */ vue.defineComponent({
   __name: "SelectInput",
   props: {
@@ -16485,7 +16699,9 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
                 placeholder: "Search",
                 icon: "search"
               }, null, 8, ["modelValue"])) : vue.createCommentVNode("", true),
-              vue.createElementVNode("div", _hoisted_6$7, [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(["selectinput-options", { multiselect: _ctx.multiselect }])
+              }, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredOptions.value, (option2, i2) => {
                   return vue.openBlock(), vue.createElementBlock("div", {
                     key: `${option2}${i2}`,
@@ -16496,19 +16712,21 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
                     onClick: ($event) => select2(option2),
                     onKeydown: vue.withKeys(($event) => select2(option2), ["enter"])
                   }, [
-                    isSelected(option2) ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$Q), {
-                      key: 0,
-                      icon: "check"
-                    })) : vue.createCommentVNode("", true),
-                    !isSelected(option2) ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$Q), {
-                      key: 1,
-                      class: "opacity-3",
-                      icon: "fiber_manual_record"
-                    })) : vue.createCommentVNode("", true),
+                    _ctx.multiselect ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                      isSelected(option2) ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$Q), {
+                        key: 0,
+                        icon: "select_check_box"
+                      })) : vue.createCommentVNode("", true),
+                      !isSelected(option2) ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$Q), {
+                        key: 1,
+                        class: "opacity-3",
+                        icon: "check_box_outline_blank"
+                      })) : vue.createCommentVNode("", true)
+                    ], 64)) : vue.createCommentVNode("", true),
                     vue.createElementVNode("span", null, vue.toDisplayString(getLabel(option2)), 1)
-                  ], 42, _hoisted_7$3);
+                  ], 42, _hoisted_6$7);
                 }), 128))
-              ]),
+              ], 2),
               vue.renderSlot(_ctx.$slots, "last", {}, void 0, true)
             ]),
             _: 3
@@ -16532,9 +16750,10 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
                 !_ctx.hideLabel ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3$g, vue.toDisplayString(selectedLabel.value), 1)) : vue.createCommentVNode("", true),
                 _ctx.clearable && selectedItemCount.value > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$c, [
                   vue.createVNode(vue.unref(Btn), {
+                    flat: "",
                     thin: "",
                     icon: "clear",
-                    class: "color-primary bg-gray-20",
+                    class: "color-gray",
                     onClick: _cache[0] || (_cache[0] = ($event) => {
                       vue.isRef(selectedItems) ? selectedItems.value = [] : selectedItems = [];
                       emitUpdate();
@@ -16562,7 +16781,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.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
@@ -33242,11 +33461,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 });
@@ -46425,7 +46640,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.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 {
@@ -46465,7 +46680,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;
@@ -47156,7 +47371,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$f = {
-  class: "toolbar",
+  class: "toolbar flex gap-025 pb-05 flex-wrap",
   role: "toolbar"
 };
 const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
@@ -47167,82 +47382,58 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   emits: ["action"],
   setup(__props, { emit: __emit }) {
     const emit2 = __emit;
-    const colorPicker = vue.ref(null);
-    const fontSizeInput = vue.ref(null);
+    vue.ref(null);
+    vue.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 = vue.resolveDirective("tooltip");
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(toolbarOptions.filter((t) => _ctx.config.includes(t.name)), (action) => {
-          return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.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") ? (vue.openBlock(), vue.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)) : vue.createCommentVNode("", true),
-        _ctx.config.includes("fontSize") ? (vue.openBlock(), vue.createElementBlock("input", {
-          key: 1,
-          ref_key: "fontSizeInput",
-          ref: fontSizeInput,
-          type: "number",
-          min: "1",
-          max: "7",
-          onChange: handleFontSizeChange
-        }, null, 544)) : vue.createCommentVNode("", true)
+        vue.createVNode(SelectInput, {
+          class: "m-0 w150",
+          options: ["Text", "Heading 1", "Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6", "Blockquote", "Code"],
+          onChange: handleSelectChange
+        }),
+        (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(toolbarOptions, (action, index2) => {
+          return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+            action.name !== "separator" && _ctx.config.includes(action.name) ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.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]
+            ]) : vue.createCommentVNode("", true),
+            action.name === "separator" ? (vue.openBlock(), vue.createElementBlock("span", {
+              key: `separator-${index2}`,
+              class: "opacity-2 mb-025"
+            }, "|")) : vue.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) {
@@ -47415,8 +47606,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__ */ vue.defineComponent({
   __name: "index",
   props: {
@@ -47450,7 +47644,9 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
       "blockquote",
       "codeBlock",
       "splitView",
-      "codeView"
+      "youtube",
+      "codeView",
+      "clear"
     ];
     const config = vue.ref(props2.toolbarConfig || defaultConfig2);
     let contentHtml = vue.ref(props2.modelValue);
@@ -47533,15 +47729,15 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
-        vue.createVNode(Toolbar, {
+        vue.createVNode(_sfc_main$a, {
           config: config.value,
           onAction: handleToolbarAction
         }, null, 8, ["config"]),
         vue.createElementVNode("div", {
-          class: vue.normalizeClass(["editor-container", { "split-view": vue.unref(isSplitView) }])
+          class: vue.normalizeClass(["editor-container flex flex-stretch", { "split-view": vue.unref(isSplitView) }])
         }, [
           vue.createElementVNode("div", {
-            class: vue.normalizeClass(["content-area", { "code-view": vue.unref(isCodeView) }])
+            class: vue.normalizeClass(["content-area rounded p-1 bg-white shadow-light w-100 grid", { "code-view": vue.unref(isCodeView) }])
           }, [
             vue.unref(isCodeView) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", {
               key: 0,
@@ -47554,6 +47750,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
               ref_key: "editableContent",
               ref: editableContent,
               contenteditable: "true",
+              class: "editableContent",
               role: "textbox",
               "aria-multiline": "true",
               tabindex: "0",
@@ -47561,17 +47758,13 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
               onKeydown: handleKeyDown2
             }, null, 544))
           ], 2),
-          vue.unref(isSplitView) ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            class: "preview-area",
-            innerHTML: vue.unref(contentHtml)
-          }, null, 8, _hoisted_2$b)) : vue.createCommentVNode("", true)
+          vue.unref(isSplitView) ? (vue.openBlock(), vue.createElementBlock("code", _hoisted_2$b, vue.toDisplayString(vue.unref(contentHtml)), 1)) : vue.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" };
@@ -50740,8 +50933,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;
@@ -50769,8 +50962,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);
@@ -50815,8 +51008,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);
       }
@@ -50906,10 +51099,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]) {
@@ -50961,8 +51154,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;
@@ -50976,8 +51169,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;
       }
@@ -50999,8 +51192,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;
     }
@@ -51016,8 +51209,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);
     }
   }
@@ -51340,15 +51533,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() {