@bagelink/vue 0.0.378 → 0.0.390

package/dist/index.cjs

@@ -4964,7 +4964,7 @@ function frmRow(...children2) {
     children: children2
   };
 }
-const BagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const bagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   frmRow,
   numField,
@@ -5042,7 +5042,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$E = { class: "full-nav" };
 const _hoisted_2$x = { class: "nav-scroll" };
-const _hoisted_3$m = { class: "nav-links-wrapper" };
+const _hoisted_3$l = { class: "nav-links-wrapper" };
 const _hoisted_4$e = { class: "tooltip" };
 const _hoisted_5$b = { class: "bot-buttons-wrapper" };
 const _hoisted_6$7 = { class: "tooltip" };
@@ -5077,7 +5077,7 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
         ], 32),
         vue.createElementVNode("div", _hoisted_1$E, [
           vue.createElementVNode("div", _hoisted_2$x, [
-            vue.createElementVNode("div", _hoisted_3$m, [
+            vue.createElementVNode("div", _hoisted_3$l, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.links, (link) => {
                 return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(link.to ? "router-link" : "div"), {
                   class: "nav-button",
@@ -5257,6 +5257,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   props: {
     side: { type: Boolean },
     title: {},
+    width: {},
     dismissable: { type: Boolean },
     actions: {},
     visible: { type: Boolean }
@@ -5265,14 +5266,26 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props2 = __props;
     let isVisible = vue.ref(false);
-    vue.watch(() => props2.visible, (val) => {
-      if (val === isVisible.value || val === void 0)
-        return;
-      if (val)
-        openModal();
-      else
-        closeModal();
-    }, { immediate: true });
+    vue.watch(
+      () => props2.visible,
+      (val) => {
+        if (val === isVisible.value || val === void 0)
+          return;
+        if (val)
+          openModal();
+        else
+          closeModal();
+      },
+      { immediate: true }
+    );
+    const maxWidth = vue.computed(() => {
+      const { width } = props2;
+      if (width == null ? void 0 : width.match(/px|em|rem|vw|vh|%/))
+        return { "max-width": width };
+      if (width == null ? void 0 : width.match(/\d+/))
+        return { "max-width": `${width}px` };
+      return { "max-width": "720px" };
+    });
     const emit2 = __emit;
     const closeModal = () => {
       isVisible.value = false;
@@ -5296,7 +5309,8 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
         vue.createVNode(vue.unref(_sfc_main$u), {
           class: "modal",
           onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
-          }, ["stop"]))
+          }, ["stop"])),
+          style: vue.normalizeStyle({ ...maxWidth.value })
         }, {
           default: vue.withCtx(() => [
             vue.createElementVNode("header", _hoisted_1$C, [
@@ -5327,7 +5341,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
             ])
           ]),
           _: 3
-        })
+        }, 8, ["style"])
       ], 34);
     };
   }
@@ -5337,6 +5351,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   props: /* @__PURE__ */ vue.mergeModels({
     side: { type: Boolean },
     title: {},
+    width: {},
     dismissable: { type: Boolean },
     actions: {},
     schema: { type: Function },
@@ -5346,7 +5361,9 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     onError: { type: Function },
     modelValue: {}
   }, {
-    "modelValue": { default: {} },
+    "modelValue": {
+      default: {}
+    },
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
@@ -5394,6 +5411,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
         side: _ctx.side,
         ref_key: "modal",
         ref: modal,
+        width: _ctx.width,
         dismissable: _ctx.dismissable,
         title: _ctx.title
       }, vue.createSlots({
@@ -5436,14 +5454,14 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["onOnUpdate:isModalVisible", "side", "dismissable", "title"]);
+      ]), 1032, ["onOnUpdate:isModalVisible", "side", "width", "dismissable", "title"]);
     };
   }
 });
-const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-7e6899c7"]]);
+const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-204f5236"]]);
 const _hoisted_1$B = { class: "accordion-item" };
 const _hoisted_2$u = ["aria-expanded", "aria-controls"];
-const _hoisted_3$l = { class: "accordion-label" };
+const _hoisted_3$k = { class: "accordion-label" };
 const _hoisted_4$d = ["id", "aria-hidden"];
 const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
   __name: "AccordionItem",
@@ -5476,7 +5494,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
           class: "accordion-head",
           "aria-controls": `accordion-body-${vue.unref(id)}`
         }, [
-          vue.createElementVNode("span", _hoisted_3$l, vue.toDisplayString(_ctx.label), 1),
+          vue.createElementVNode("span", _hoisted_3$k, vue.toDisplayString(_ctx.label), 1),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["accordion-icon", { open: vue.unref(open) }])
           }, [
@@ -5503,7 +5521,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
 const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-bf74738b"]]);
 const _hoisted_1$A = { class: "list-wrap bgl_card thin grid overflow-hidden h-100 p-0" };
 const _hoisted_2$t = { class: "p-1" };
-const _hoisted_3$k = { class: "list-content auto-flow-rows align-items-start overflow-y h-100" };
+const _hoisted_3$j = { class: "list-content auto-flow-rows align-items-start overflow-y h-100" };
 const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
   __name: "ListView",
   setup(__props) {
@@ -5512,7 +5530,7 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", _hoisted_2$t, [
           vue.renderSlot(_ctx.$slots, "header")
         ]),
-        vue.createElementVNode("div", _hoisted_3$k, [
+        vue.createElementVNode("div", _hoisted_3$j, [
           vue.renderSlot(_ctx.$slots, "default")
         ])
       ]);
@@ -5583,7 +5601,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$x = { class: "table-list-wrap h-100" };
 const _hoisted_2$q = { class: "infinite-wrapper" };
-const _hoisted_3$j = { class: "row first-row" };
+const _hoisted_3$i = { class: "row first-row" };
 const _hoisted_4$c = ["onClick"];
 const _hoisted_5$a = { class: "flex" };
 const _hoisted_6$6 = ["onClick"];
@@ -5624,7 +5642,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
         vue.createElementVNode("table", _hoisted_2$q, [
-          vue.createElementVNode("thead", _hoisted_3$j, [
+          vue.createElementVNode("thead", _hoisted_3$i, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value, (field) => {
               return vue.openBlock(), vue.createElementBlock("th", {
                 class: "col",
@@ -5720,7 +5738,7 @@ const _hoisted_2$p = {
   key: 0,
   class: "data-row"
 };
-const _hoisted_3$i = { class: "key" };
+const _hoisted_3$h = { class: "key" };
 const _hoisted_4$b = { key: 1 };
 const _hoisted_5$9 = { class: "key" };
 const _hoisted_6$5 = { class: "vlue" };
@@ -5748,7 +5766,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
             key: field.id
           }, [
             vue.unref(iffer)(field, itemData.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$p, [
-              vue.createElementVNode("div", _hoisted_3$i, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1),
+              vue.createElementVNode("div", _hoisted_3$h, vue.toDisplayString((field == null ? void 0 : field.label) || vue.unref(keyToLabel)(field.id)), 1),
               vue.createVNode(vue.unref(_sfc_main$l), {
                 field,
                 modelValue: itemData.value,
@@ -5945,10 +5963,9 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-10743b06"]]);
-const _hoisted_1$r = { class: "bgl_vid" };
-const _hoisted_2$n = ["src"];
-const _hoisted_3$h = ["src", "autoplay", "muted", "loop", "controls"];
+const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-561f7a72"]]);
+const _hoisted_1$r = ["src"];
+const _hoisted_2$n = ["src", "autoplay", "muted", "loop", "controls"];
 const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   __name: "BglVideo",
   props: {
@@ -5961,26 +5978,31 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     const props2 = __props;
-    const aspectRatio = vue.computed(() => props2.aspectRatio.replace(":", "/"));
+    const aspectRatio = vue.computed(
+      () => {
+        var _a2;
+        return ((_a2 = props2.aspectRatio) == null ? void 0 : _a2.replace(":", "/")) || "16/9";
+      }
+    );
     const embedType = vue.computed(() => {
       const youtubeRegex = /youtube\.com|youtu\.be/;
-      if (youtubeRegex.test(props2.src))
+      if (youtubeRegex.test(props2.src || ""))
         return "YouTube";
       const vimeoRegex = /vimeo\.com/;
-      if (vimeoRegex.test(props2.src))
+      if (vimeoRegex.test(props2.src || ""))
         return "Vimeo";
       return null;
     });
     const videoUrl = vue.computed(() => {
-      var _a2, _b, _c, _d;
+      var _a2, _b, _c, _d, _e2, _f;
       if (embedType.value) {
         if (embedType.value === "YouTube") {
-          const videoId = (_c = (_b = (_a2 = props2.src.split(/v=|youtu\.be\//)) == null ? void 0 : _a2[1]) == null ? void 0 : _b.split("&")) == null ? void 0 : _c[0];
+          const videoId = (_d = (_c = (_b = (_a2 = props2.src) == null ? void 0 : _a2.split(/v=|youtu\.be\//)) == null ? void 0 : _b[1]) == null ? void 0 : _c.split("&")) == null ? void 0 : _d[0];
           return `https://www.youtube.com/embed/${videoId}`;
         }
         if (embedType.value === "Vimeo") {
           const vimeoRegex = /vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/)?(\d+)(?:$|\/|\?)/;
-          const videoId = (_d = props2.src.match(vimeoRegex)) == null ? void 0 : _d[3];
+          const videoId = (_f = (_e2 = props2.src) == null ? void 0 : _e2.match(vimeoRegex)) == null ? void 0 : _f[3];
           return `https://player.vimeo.com/video/${videoId}`;
         }
       }
@@ -5988,7 +6010,9 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     });
     console.log("Video URL:", videoUrl.value);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["bgl_vid", { vid_empty: !_ctx.src }])
+      }, [
         embedType.value ? (vue.openBlock(), vue.createElementBlock("iframe", {
           key: 0,
           src: videoUrl.value,
@@ -5996,7 +6020,7 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
           frameborder: "0",
           allowfullscreen: "",
           title: "Video"
-        }, null, 12, _hoisted_2$n)) : (vue.openBlock(), vue.createElementBlock("video", {
+        }, null, 12, _hoisted_1$r)) : _ctx.src ? (vue.openBlock(), vue.createElementBlock("video", {
           key: 1,
           src: _ctx.src,
           autoplay: _ctx.autoplay,
@@ -6005,12 +6029,12 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
           style: vue.normalizeStyle({ aspectRatio: aspectRatio.value }),
           controls: _ctx.controls,
           playsinline: ""
-        }, null, 12, _hoisted_3$h))
-      ]);
+        }, null, 12, _hoisted_2$n)) : vue.createCommentVNode("", true)
+      ], 2);
     };
   }
 });
-const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-23835d69"]]);
+const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-bbfc4353"]]);
 const _hoisted_1$q = {
   key: 0,
   class: "blocker"
@@ -18336,7 +18360,6 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "RadioPillsInput",
   props: {
     options: {},
-    stringOptions: {},
     modelValue: {},
     id: {},
     label: {}
@@ -18344,12 +18367,21 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const emits = __emit;
+    const getLabel = (option2) => {
+      if (typeof option2 === "string")
+        return option2;
+      if (typeof option2 === "number")
+        return `${option2}`;
+      return option2.label;
+    };
+    const getValue = (option2) => {
+      if (typeof option2 === "string")
+        return option2;
+      if (typeof option2 === "number")
+        return option2;
+      return option2.value;
+    };
     const props2 = __props;
-    const cumputedOptions = vue.computed(() => props2.options || props2.stringOptions.map((v2) => ({
-      optioId: v2,
-      label: v2,
-      value: v2
-    })));
     let selectedValue = vue.ref("");
     function handleSelect(e) {
       var _a2;
@@ -18374,20 +18406,22 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
         vue.createElementVNode("label", _hoisted_2$d, vue.toDisplayString(_ctx.label), 1),
         vue.createElementVNode("div", _hoisted_3$a, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(cumputedOptions.value, ({ optioId, label, value }, index2) => {
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (option2, index2) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               class: "radio-pill",
               key: index2
             }, [
               vue.createElementVNode("input", {
                 type: "radio",
-                id: optioId,
+                id: getValue(option2),
                 name: _ctx.id,
-                value,
-                checked: vue.unref(selectedValue) === value,
+                value: getValue(option2),
+                checked: vue.unref(selectedValue) === getValue(option2),
                 onChange: handleSelect
               }, null, 40, _hoisted_4$6),
-              vue.createElementVNode("label", { for: optioId }, vue.toDisplayString(label), 9, _hoisted_5$5)
+              vue.createElementVNode("label", {
+                for: getValue(option2)
+              }, vue.toDisplayString(getLabel(option2)), 9, _hoisted_5$5)
             ]);
           }), 128))
         ])
@@ -18395,7 +18429,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-e47ae8b5"]]);
+const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-ee7dd382"]]);
 const _hoisted_1$f = { class: "bagel-input" };
 const _hoisted_2$c = {
   key: 0,
@@ -18423,7 +18457,8 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     label: {},
     multiple: { type: Boolean },
     files: {},
-    deleteEndpoint: {}
+    deleteEndpoint: {},
+    bindkey: {}
   }, {
     "modelValue": {},
     "modelModifiers": {}
@@ -18432,7 +18467,8 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const bagel = useBagel();
     const props2 = __props;
-    const file_ids = vue.useModel(__props, "modelValue");
+    const bindKey2 = props2.bindkey || "id";
+    const file_bindkeys = vue.useModel(__props, "modelValue");
     const storageFiles = vue.ref([]);
     const compareIds = (v1, v2) => [v1].flat().join(",") === [v2].flat().join(",");
     vue.watch(
@@ -18447,13 +18483,15 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
       () => storageFiles.value,
       (newFiles) => {
         var _a2;
-        let idValue = "";
+        let idValue;
         if (props2.multiple)
-          idValue = newFiles.map((f2) => f2.id || "");
-        else
-          idValue = ((_a2 = newFiles[0]) == null ? void 0 : _a2.id) || "";
-        if (!compareIds(file_ids == null ? void 0 : file_ids.value, idValue))
-          file_ids.value = idValue;
+          idValue = newFiles.map((f2) => f2[bindKey2]);
+        else {
+          idValue = ((_a2 = newFiles[0]) == null ? void 0 : _a2[bindKey2]) || "";
+        }
+        if (!compareIds(file_bindkeys == null ? void 0 : file_bindkeys.value, idValue)) {
+          file_bindkeys.value = idValue;
+        }
       },
       { deep: true }
     );
@@ -18602,7 +18640,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-3bb24b0c"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-0dbacaa0"]]);
 const _withScopeId = (n2) => (vue.pushScopeId("data-v-b87221d6"), n2 = n2(), vue.popScopeId(), n2);
 const _hoisted_1$e = ["title"];
 const _hoisted_2$b = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));
@@ -33871,7 +33909,24 @@ function markPasteRule(config) {
     }
   });
 }
-const inputRegex$4 = /^\s*>\s$/;
+function nodePasteRule(config) {
+  return new PasteRule({
+    find: config.find,
+    handler({ match: match2, chain, range: range2, pasteEvent }) {
+      const attributes = callOrReturn(config.getAttributes, void 0, match2, pasteEvent);
+      if (attributes === false || attributes === null) {
+        return null;
+      }
+      if (match2.input) {
+        chain().deleteRange(range2).insertContentAt(range2.from, {
+          type: config.type.name,
+          attrs: attributes
+        });
+      }
+    }
+  });
+}
+const inputRegex$5 = /^\s*>\s$/;
 const Blockquote = Node$2.create({
   name: "blockquote",
   addOptions() {
@@ -33911,7 +33966,7 @@ const Blockquote = Node$2.create({
   addInputRules() {
     return [
       wrappingInputRule({
-        find: inputRegex$4,
+        find: inputRegex$5,
         type: this.type
       })
     ];
@@ -34056,7 +34111,7 @@ const TextStyle$1 = Mark.create({
     };
   }
 });
-const inputRegex$3 = /^\s*([-+*])\s$/;
+const inputRegex$4 = /^\s*([-+*])\s$/;
 const BulletList = Node$2.create({
   name: "bulletList",
   addOptions() {
@@ -34096,12 +34151,12 @@ const BulletList = Node$2.create({
   },
   addInputRules() {
     let inputRule = wrappingInputRule({
-      find: inputRegex$3,
+      find: inputRegex$4,
       type: this.type
     });
     if (this.options.keepMarks || this.options.keepAttributes) {
       inputRule = wrappingInputRule({
-        find: inputRegex$3,
+        find: inputRegex$4,
         type: this.type,
         keepMarks: this.options.keepMarks,
         keepAttributes: this.options.keepAttributes,
@@ -34116,7 +34171,7 @@ const BulletList = Node$2.create({
     ];
   }
 });
-const inputRegex$2 = /(?:^|\s)((?:`)((?:[^`]+))(?:`))$/;
+const inputRegex$3 = /(?:^|\s)((?:`)((?:[^`]+))(?:`))$/;
 const pasteRegex$1 = /(?:^|\s)((?:`)((?:[^`]+))(?:`))/g;
 const Code = Mark.create({
   name: "code",
@@ -34157,7 +34212,7 @@ const Code = Mark.create({
   addInputRules() {
     return [
       markInputRule({
-        find: inputRegex$2,
+        find: inputRegex$3,
         type: this.type
       })
     ];
@@ -35645,7 +35700,7 @@ const TextStyle = Mark.create({
     };
   }
 });
-const inputRegex$1 = /^(\d+)\.\s$/;
+const inputRegex$2 = /^(\d+)\.\s$/;
 const OrderedList = Node$2.create({
   name: "orderedList",
   addOptions() {
@@ -35698,14 +35753,14 @@ const OrderedList = Node$2.create({
   },
   addInputRules() {
     let inputRule = wrappingInputRule({
-      find: inputRegex$1,
+      find: inputRegex$2,
       type: this.type,
       getAttributes: (match2) => ({ start: +match2[1] }),
       joinPredicate: (match2, node) => node.childCount + node.attrs.start === +match2[1]
     });
     if (this.options.keepMarks || this.options.keepAttributes) {
       inputRule = wrappingInputRule({
-        find: inputRegex$1,
+        find: inputRegex$2,
         type: this.type,
         keepMarks: this.options.keepMarks,
         keepAttributes: this.options.keepAttributes,
@@ -35750,7 +35805,7 @@ const Paragraph = Node$2.create({
     };
   }
 });
-const inputRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))$/;
+const inputRegex$1 = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))$/;
 const pasteRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))/g;
 const Strike = Mark.create({
   name: "strike",
@@ -35805,7 +35860,7 @@ const Strike = Mark.create({
   addInputRules() {
     return [
       markInputRule({
-        find: inputRegex,
+        find: inputRegex$1,
         type: this.type
       })
     ];
@@ -39097,6 +39152,285 @@ vue.defineComponent({
     }, (_b = (_a2 = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a2));
   }
 });
+const inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/;
+const Image = Node$2.create({
+  name: "image",
+  addOptions() {
+    return {
+      inline: false,
+      allowBase64: false,
+      HTMLAttributes: {}
+    };
+  },
+  inline() {
+    return this.options.inline;
+  },
+  group() {
+    return this.options.inline ? "inline" : "block";
+  },
+  draggable: true,
+  addAttributes() {
+    return {
+      src: {
+        default: null
+      },
+      alt: {
+        default: null
+      },
+      title: {
+        default: null
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: this.options.allowBase64 ? "img[src]" : 'img[src]:not([src^="data:"])'
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["img", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+  },
+  addCommands() {
+    return {
+      setImage: (options) => ({ commands: commands2 }) => {
+        return commands2.insertContent({
+          type: this.name,
+          attrs: options
+        });
+      }
+    };
+  },
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: inputRegex,
+        type: this.type,
+        getAttributes: (match2) => {
+          const [, , alt, src, title] = match2;
+          return { src, alt, title };
+        }
+      })
+    ];
+  }
+});
+const YOUTUBE_REGEX = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu\.be|youtube-nocookie\.com)\/(?!channel\/)(?!@)(.+)?$/;
+const YOUTUBE_REGEX_GLOBAL = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu\.be)\/(?!channel\/)(?!@)(.+)?$/g;
+const isValidYoutubeUrl = (url) => {
+  return url.match(YOUTUBE_REGEX);
+};
+const getYoutubeEmbedUrl = (nocookie) => {
+  return nocookie ? "https://www.youtube-nocookie.com/embed/" : "https://www.youtube.com/embed/";
+};
+const getEmbedUrlFromYoutubeUrl = (options) => {
+  const { url, allowFullscreen, autoplay, ccLanguage, ccLoadPolicy, controls, disableKBcontrols, enableIFrameApi, endTime, interfaceLanguage, ivLoadPolicy, loop, modestBranding, nocookie, origin, playlist, progressBarColor, startAt } = options;
+  if (!isValidYoutubeUrl(url)) {
+    return null;
+  }
+  if (url.includes("/embed/")) {
+    return url;
+  }
+  if (url.includes("youtu.be")) {
+    const id = url.split("/").pop();
+    if (!id) {
+      return null;
+    }
+    return `${getYoutubeEmbedUrl(nocookie)}${id}`;
+  }
+  const videoIdRegex = /(?:v=|shorts\/)([-\w]+)/gm;
+  const matches2 = videoIdRegex.exec(url);
+  if (!matches2 || !matches2[1]) {
+    return null;
+  }
+  let outputUrl = `${getYoutubeEmbedUrl(nocookie)}${matches2[1]}`;
+  const params = [];
+  if (allowFullscreen === false) {
+    params.push("fs=0");
+  }
+  if (autoplay) {
+    params.push("autoplay=1");
+  }
+  if (ccLanguage) {
+    params.push(`cc_lang_pref=${ccLanguage}`);
+  }
+  if (ccLoadPolicy) {
+    params.push("cc_load_policy=1");
+  }
+  if (!controls) {
+    params.push("controls=0");
+  }
+  if (disableKBcontrols) {
+    params.push("disablekb=1");
+  }
+  if (enableIFrameApi) {
+    params.push("enablejsapi=1");
+  }
+  if (endTime) {
+    params.push(`end=${endTime}`);
+  }
+  if (interfaceLanguage) {
+    params.push(`hl=${interfaceLanguage}`);
+  }
+  if (ivLoadPolicy) {
+    params.push(`iv_load_policy=${ivLoadPolicy}`);
+  }
+  if (loop) {
+    params.push("loop=1");
+  }
+  if (modestBranding) {
+    params.push("modestbranding=1");
+  }
+  if (origin) {
+    params.push(`origin=${origin}`);
+  }
+  if (playlist) {
+    params.push(`playlist=${playlist}`);
+  }
+  if (startAt) {
+    params.push(`start=${startAt}`);
+  }
+  if (progressBarColor) {
+    params.push(`color=${progressBarColor}`);
+  }
+  if (params.length) {
+    outputUrl += `?${params.join("&")}`;
+  }
+  return outputUrl;
+};
+const Youtube = Node$2.create({
+  name: "youtube",
+  addOptions() {
+    return {
+      addPasteHandler: true,
+      allowFullscreen: true,
+      autoplay: false,
+      ccLanguage: void 0,
+      ccLoadPolicy: void 0,
+      controls: true,
+      disableKBcontrols: false,
+      enableIFrameApi: false,
+      endTime: 0,
+      height: 480,
+      interfaceLanguage: void 0,
+      ivLoadPolicy: 0,
+      loop: false,
+      modestBranding: false,
+      HTMLAttributes: {},
+      inline: false,
+      nocookie: false,
+      origin: "",
+      playlist: "",
+      progressBarColor: void 0,
+      width: 640
+    };
+  },
+  inline() {
+    return this.options.inline;
+  },
+  group() {
+    return this.options.inline ? "inline" : "block";
+  },
+  draggable: true,
+  addAttributes() {
+    return {
+      src: {
+        default: null
+      },
+      start: {
+        default: 0
+      },
+      width: {
+        default: this.options.width
+      },
+      height: {
+        default: this.options.height
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-youtube-video] iframe"
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setYoutubeVideo: (options) => ({ commands: commands2 }) => {
+        if (!isValidYoutubeUrl(options.src)) {
+          return false;
+        }
+        return commands2.insertContent({
+          type: this.name,
+          attrs: options
+        });
+      }
+    };
+  },
+  addPasteRules() {
+    if (!this.options.addPasteHandler) {
+      return [];
+    }
+    return [
+      nodePasteRule({
+        find: YOUTUBE_REGEX_GLOBAL,
+        type: this.type,
+        getAttributes: (match2) => {
+          return { src: match2.input };
+        }
+      })
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    const embedUrl = getEmbedUrlFromYoutubeUrl({
+      url: HTMLAttributes.src,
+      allowFullscreen: this.options.allowFullscreen,
+      autoplay: this.options.autoplay,
+      ccLanguage: this.options.ccLanguage,
+      ccLoadPolicy: this.options.ccLoadPolicy,
+      controls: this.options.controls,
+      disableKBcontrols: this.options.disableKBcontrols,
+      enableIFrameApi: this.options.enableIFrameApi,
+      endTime: this.options.endTime,
+      interfaceLanguage: this.options.interfaceLanguage,
+      ivLoadPolicy: this.options.ivLoadPolicy,
+      loop: this.options.loop,
+      modestBranding: this.options.modestBranding,
+      nocookie: this.options.nocookie,
+      origin: this.options.origin,
+      playlist: this.options.playlist,
+      progressBarColor: this.options.progressBarColor,
+      startAt: HTMLAttributes.start || 0
+    });
+    HTMLAttributes.src = embedUrl;
+    return [
+      "div",
+      { "data-youtube-video": "" },
+      [
+        "iframe",
+        mergeAttributes(this.options.HTMLAttributes, {
+          width: this.options.width,
+          height: this.options.height,
+          allowfullscreen: this.options.allowFullscreen,
+          autoplay: this.options.autoplay,
+          ccLanguage: this.options.ccLanguage,
+          ccLoadPolicy: this.options.ccLoadPolicy,
+          disableKBcontrols: this.options.disableKBcontrols,
+          enableIFrameApi: this.options.enableIFrameApi,
+          endTime: this.options.endTime,
+          interfaceLanguage: this.options.interfaceLanguage,
+          ivLoadPolicy: this.options.ivLoadPolicy,
+          loop: this.options.loop,
+          modestBranding: this.options.modestBranding,
+          origin: this.options.origin,
+          playlist: this.options.playlist,
+          progressBarColor: this.options.progressBarColor
+        }, HTMLAttributes)
+      ]
+    ];
+  }
+});
 const _hoisted_1$d = { class: "RichText" };
 const _hoisted_2$a = {
   key: 0,
@@ -39109,6 +39443,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
+    const { txtField: txtField2 } = bagelFormUtils;
     let editor = vue.ref();
     const props2 = __props;
     const focus2 = () => {
@@ -39116,6 +39451,18 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
         throw new Error("editor is not defined");
       return editor.value.chain().focus();
     };
+    const { showModalForm } = useModal();
+    function addImage() {
+      showModalForm({
+        title: "Add Image",
+        schema: [
+          txtField2("title", "Title"),
+          { $el, id: "src", attrs: { bindkey: "url" } },
+          txtField2("alt", "Alt Text")
+        ],
+        onSubmit: (imgObj) => focus2().setImage(imgObj).run()
+      });
+    }
     const config = [
       {
         name: "Bold",
@@ -39152,11 +39499,31 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
         command: () => focus2().toggleCode().run(),
         icon: "code"
       },
-      // {
-      // 	name: 'clearMarks',
-      // 	command: () => focus().unsetAllMarks(),
-      // 	icon: 'clear',
-      // },
+      {
+        name: "Image",
+        command: addImage,
+        icon: "image"
+      },
+      {
+        name: "YouTube",
+        command: () => {
+          showModalForm({
+            title: "Add YouTube Video",
+            schema: [
+              txtField2("src", "YouTube URL"),
+              {
+                $el: BglVideo,
+                attrs: { src: (_2, { src }) => src || "" }
+              }
+            ],
+            onSubmit: (videoObj) => {
+              var _a2;
+              return (_a2 = editor.value) == null ? void 0 : _a2.commands.setYoutubeVideo(videoObj);
+            }
+          });
+        },
+        icon: "youtube_activity"
+      },
       {
         name: "Clear",
         command: () => focus2().clearNodes().run(),
@@ -39255,7 +39622,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     const emit2 = __emit;
     function initEditor() {
       editor.value = new Editor({
-        extensions: [StarterKit],
+        extensions: [StarterKit, Image, Youtube],
         content: props2.modelValue,
         onUpdate: ({ editor: editor2 }) => emit2("update:modelValue", editor2.getHTML())
       });
@@ -39282,6 +39649,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
           (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(config, (item) => {
             var _a2;
             return vue.withDirectives(vue.createVNode(vue.unref(Btn), {
+              tabindex: "-1",
               flat: !vue.unref(editor).isActive(item.name, item.option),
               onClick: item.command,
               thin: "",
@@ -45998,7 +46366,7 @@ exports.DataPreview = DataPreview;
 exports.DateInput = _sfc_main$j;
 exports.DatePicker = _sfc_main$c;
 exports.Dropdown = kt$1;
-exports.FileUpload = FileUpload;
+exports.FileUpload = $el;
 exports.Icon = _sfc_main$H;
 exports.JSONInput = JSONInput;
 exports.Layout = Layout;
@@ -46026,7 +46394,7 @@ exports.TextInput = TextInput;
 exports.Title = _sfc_main$s;
 exports.ToggleInput = ToggleInput;
 exports.TopBar = TopBar;
-exports.bagelFormUtils = BagelFormUtils;
+exports.bagelFormUtils = bagelFormUtils;
 exports.bagelInjectionKey = bagelInjectionKey;
 exports.bindAttrs = bindAttrs;
 exports.classify = classify;