@bagelink/vue 0.0.374 → 0.0.384

package/dist/index.mjs

@@ -4791,7 +4791,7 @@ class Bagel {
   async uploadFile(file, options) {
     const formData = new FormData();
     formData.append("file", file);
-    const { data: data2 } = await axios.post("/files/upload", formData, {
+    const { data: data2 } = await axios.post("/static_files/upload", formData, {
       headers: {
         "Content-Type": "multipart/form-data"
       },
@@ -4962,7 +4962,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,
@@ -5040,7 +5040,7 @@ const _sfc_main$H = /* @__PURE__ */ 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" };
@@ -5075,7 +5075,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         ], 32),
         createElementVNode("div", _hoisted_1$E, [
           createElementVNode("div", _hoisted_2$x, [
-            createElementVNode("div", _hoisted_3$m, [
+            createElementVNode("div", _hoisted_3$l, [
               (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.links, (link) => {
                 return openBlock(), createBlock(resolveDynamicComponent(link.to ? "router-link" : "div"), {
                   class: "nav-button",
@@ -5255,6 +5255,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   props: {
     side: { type: Boolean },
     title: {},
+    width: {},
     dismissable: { type: Boolean },
     actions: {},
     visible: { type: Boolean }
@@ -5263,14 +5264,26 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props2 = __props;
     let isVisible = ref(false);
-    watch(() => props2.visible, (val) => {
-      if (val === isVisible.value || val === void 0)
-        return;
-      if (val)
-        openModal();
-      else
-        closeModal();
-    }, { immediate: true });
+    watch(
+      () => props2.visible,
+      (val) => {
+        if (val === isVisible.value || val === void 0)
+          return;
+        if (val)
+          openModal();
+        else
+          closeModal();
+      },
+      { immediate: true }
+    );
+    const maxWidth = 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;
@@ -5294,7 +5307,8 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
         createVNode(unref(_sfc_main$u), {
           class: "modal",
           onClick: _cache[0] || (_cache[0] = withModifiers(() => {
-          }, ["stop"]))
+          }, ["stop"])),
+          style: normalizeStyle({ ...maxWidth.value })
         }, {
           default: withCtx(() => [
             createElementVNode("header", _hoisted_1$C, [
@@ -5325,7 +5339,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
             ])
           ]),
           _: 3
-        })
+        }, 8, ["style"])
       ], 34);
     };
   }
@@ -5335,6 +5349,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   props: /* @__PURE__ */ mergeModels({
     side: { type: Boolean },
     title: {},
+    width: {},
     dismissable: { type: Boolean },
     actions: {},
     schema: { type: Function },
@@ -5344,7 +5359,9 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     onError: { type: Function },
     modelValue: {}
   }, {
-    "modelValue": { default: {} },
+    "modelValue": {
+      default: {}
+    },
     "modelModifiers": {}
   }),
   emits: ["update:modelValue"],
@@ -5392,6 +5409,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
         side: _ctx.side,
         ref_key: "modal",
         ref: modal,
+        width: _ctx.width,
         dismissable: _ctx.dismissable,
         title: _ctx.title
       }, createSlots({
@@ -5434,14 +5452,14 @@ const _sfc_main$D = /* @__PURE__ */ 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__ */ defineComponent({
   __name: "AccordionItem",
@@ -5474,7 +5492,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
           class: "accordion-head",
           "aria-controls": `accordion-body-${unref(id)}`
         }, [
-          createElementVNode("span", _hoisted_3$l, toDisplayString(_ctx.label), 1),
+          createElementVNode("span", _hoisted_3$k, toDisplayString(_ctx.label), 1),
           createElementVNode("div", {
             class: normalizeClass(["accordion-icon", { open: unref(open) }])
           }, [
@@ -5501,7 +5519,7 @@ const _sfc_main$C = /* @__PURE__ */ 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__ */ defineComponent({
   __name: "ListView",
   setup(__props) {
@@ -5510,7 +5528,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_2$t, [
           renderSlot(_ctx.$slots, "header")
         ]),
-        createElementVNode("div", _hoisted_3$k, [
+        createElementVNode("div", _hoisted_3$j, [
           renderSlot(_ctx.$slots, "default")
         ])
       ]);
@@ -5581,7 +5599,7 @@ const _sfc_main$z = /* @__PURE__ */ 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"];
@@ -5622,7 +5640,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$x, [
         createElementVNode("table", _hoisted_2$q, [
-          createElementVNode("thead", _hoisted_3$j, [
+          createElementVNode("thead", _hoisted_3$i, [
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(computedSchema.value, (field) => {
               return openBlock(), createElementBlock("th", {
                 class: "col",
@@ -5718,7 +5736,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" };
@@ -5746,7 +5764,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             key: field.id
           }, [
             unref(iffer)(field, itemData.value) ? (openBlock(), createElementBlock("div", _hoisted_2$p, [
-              createElementVNode("div", _hoisted_3$i, toDisplayString((field == null ? void 0 : field.label) || unref(keyToLabel)(field.id)), 1),
+              createElementVNode("div", _hoisted_3$h, toDisplayString((field == null ? void 0 : field.label) || unref(keyToLabel)(field.id)), 1),
               createVNode(unref(_sfc_main$l), {
                 field,
                 modelValue: itemData.value,
@@ -5944,9 +5962,8 @@ const _sfc_main$p = /* @__PURE__ */ 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 _hoisted_1$r = ["src"];
+const _hoisted_2$n = ["src", "autoplay", "muted", "loop", "controls"];
 const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "BglVideo",
   props: {
@@ -5959,26 +5976,31 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props2 = __props;
-    const aspectRatio = computed(() => props2.aspectRatio.replace(":", "/"));
+    const aspectRatio = computed(
+      () => {
+        var _a2;
+        return ((_a2 = props2.aspectRatio) == null ? void 0 : _a2.replace(":", "/")) || "16/9";
+      }
+    );
     const embedType = 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 = 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}`;
         }
       }
@@ -5986,7 +6008,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     });
     console.log("Video URL:", videoUrl.value);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$r, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["bgl_vid", { vid_empty: !_ctx.src }])
+      }, [
         embedType.value ? (openBlock(), createElementBlock("iframe", {
           key: 0,
           src: videoUrl.value,
@@ -5994,7 +6018,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           frameborder: "0",
           allowfullscreen: "",
           title: "Video"
-        }, null, 12, _hoisted_2$n)) : (openBlock(), createElementBlock("video", {
+        }, null, 12, _hoisted_1$r)) : _ctx.src ? (openBlock(), createElementBlock("video", {
           key: 1,
           src: _ctx.src,
           autoplay: _ctx.autoplay,
@@ -6003,12 +6027,12 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           style: normalizeStyle({ aspectRatio: aspectRatio.value }),
           controls: _ctx.controls,
           playsinline: ""
-        }, null, 12, _hoisted_3$h))
-      ]);
+        }, null, 12, _hoisted_2$n)) : 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"
@@ -18421,7 +18445,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     label: {},
     multiple: { type: Boolean },
     files: {},
-    deleteEndpoint: {}
+    deleteEndpoint: {},
+    bindkey: {}
   }, {
     "modelValue": {},
     "modelModifiers": {}
@@ -18430,23 +18455,34 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const bagel = useBagel();
     const props2 = __props;
-    const file_ids = useModel(__props, "modelValue");
+    const bindKey2 = props2.bindkey || "id";
+    const file_bindkeys = useModel(__props, "modelValue");
     const storageFiles = ref([]);
     const compareIds = (v1, v2) => [v1].flat().join(",") === [v2].flat().join(",");
-    watch(() => props2.files, (newFiles) => {
-      if (newFiles)
-        storageFiles.value.push(...[newFiles].flat());
-    }, { immediate: true });
-    watch(() => storageFiles.value, (newFiles) => {
-      var _a2;
-      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;
-    }, { deep: true });
+    watch(
+      () => props2.files,
+      (newFiles) => {
+        if (newFiles)
+          storageFiles.value.push(...[newFiles].flat());
+      },
+      { immediate: true }
+    );
+    watch(
+      () => storageFiles.value,
+      (newFiles) => {
+        var _a2;
+        let idValue;
+        if (props2.multiple)
+          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 }
+    );
     const fileQueue = ref([]);
     let isDragOver = ref(false);
     const preventDefault = (e) => {
@@ -18457,21 +18493,20 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const removeFile = (file) => {
       const index2 = storageFiles.value.indexOf(file);
       storageFiles.value.splice(index2, 1);
-      if (props2.deleteEndpoint)
+      if (props2.deleteEndpoint) {
         void bagel.delete(`${props2.deleteEndpoint}/${file.id}`);
+      }
     };
     const flushQueue = () => {
-      fileQueue.value.forEach(
-        async (file, i2) => {
-          if (!props2.multiple)
-            storageFiles.value.splice(0, 1);
-          const serverFile = await bagel.uploadFile(file.file, {
-            onUploadProgress: (e) => file.progress = e.progress * 100 - 1
-          });
-          storageFiles.value.push(serverFile);
-          fileQueue.value.splice(i2, 1);
-        }
-      );
+      fileQueue.value.forEach(async (file, i2) => {
+        if (!props2.multiple)
+          storageFiles.value.splice(0, 1);
+        const serverFile = await bagel.uploadFile(file.file, {
+          onUploadProgress: (e) => file.progress = e.progress * 100 - 1
+        });
+        storageFiles.value.push(serverFile);
+        fileQueue.value.splice(i2, 1);
+      });
     };
     const browse = () => {
       const input = document.createElement("input");
@@ -18480,7 +18515,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       input.onchange = (e) => {
         const target = e == null ? void 0 : e.target;
         if (target == null ? void 0 : target.files) {
-          Array.from(target.files).forEach((file) => fileQueue.value.push({ name: file.name, file, progress: 0 }));
+          Array.from(target.files).forEach(
+            (file) => fileQueue.value.push({ name: file.name, file, progress: 0 })
+          );
         }
         flushQueue();
       };
@@ -18518,7 +18555,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           onDragover: dragover,
           onDrop: drop3,
           onDragleave: dragleave,
-          class: normalizeClass(["fileUploadWrap", { fileDropZone: !storageFiles.value.length && !fileQueue.value.length, dragover: unref(isDragOver) }])
+          class: normalizeClass(["fileUploadWrap", {
+            fileDropZone: !storageFiles.value.length && !fileQueue.value.length,
+            dragover: unref(isDragOver)
+          }])
         }, [
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(storageFiles.value, (file) => {
             return openBlock(), createElementBlock(Fragment$1, {
@@ -18588,7 +18628,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-1be8d7b1"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-0dbacaa0"]]);
 const _withScopeId = (n2) => (pushScopeId("data-v-b87221d6"), n2 = n2(), popScopeId(), n2);
 const _hoisted_1$e = ["title"];
 const _hoisted_2$b = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", { class: "slider round" }, null, -1));
@@ -33857,7 +33897,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() {
@@ -33897,7 +33954,7 @@ const Blockquote = Node$2.create({
   addInputRules() {
     return [
       wrappingInputRule({
-        find: inputRegex$4,
+        find: inputRegex$5,
         type: this.type
       })
     ];
@@ -34042,7 +34099,7 @@ const TextStyle$1 = Mark.create({
     };
   }
 });
-const inputRegex$3 = /^\s*([-+*])\s$/;
+const inputRegex$4 = /^\s*([-+*])\s$/;
 const BulletList = Node$2.create({
   name: "bulletList",
   addOptions() {
@@ -34082,12 +34139,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,
@@ -34102,7 +34159,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",
@@ -34143,7 +34200,7 @@ const Code = Mark.create({
   addInputRules() {
     return [
       markInputRule({
-        find: inputRegex$2,
+        find: inputRegex$3,
         type: this.type
       })
     ];
@@ -35631,7 +35688,7 @@ const TextStyle = Mark.create({
     };
   }
 });
-const inputRegex$1 = /^(\d+)\.\s$/;
+const inputRegex$2 = /^(\d+)\.\s$/;
 const OrderedList = Node$2.create({
   name: "orderedList",
   addOptions() {
@@ -35684,14 +35741,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,
@@ -35736,7 +35793,7 @@ const Paragraph = Node$2.create({
     };
   }
 });
-const inputRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))$/;
+const inputRegex$1 = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))$/;
 const pasteRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))/g;
 const Strike = Mark.create({
   name: "strike",
@@ -35791,7 +35848,7 @@ const Strike = Mark.create({
   addInputRules() {
     return [
       markInputRule({
-        find: inputRegex,
+        find: inputRegex$1,
         type: this.type
       })
     ];
@@ -39083,6 +39140,285 @@ 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,
@@ -39095,6 +39431,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
+    const { txtField: txtField2 } = bagelFormUtils;
     let editor = ref();
     const props2 = __props;
     const focus2 = () => {
@@ -39102,6 +39439,18 @@ const _sfc_main$8 = /* @__PURE__ */ 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",
@@ -39138,11 +39487,31 @@ const _sfc_main$8 = /* @__PURE__ */ 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(),
@@ -39241,7 +39610,7 @@ const _sfc_main$8 = /* @__PURE__ */ 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())
       });
@@ -39268,6 +39637,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           (openBlock(), createElementBlock(Fragment$1, null, renderList(config, (item) => {
             var _a2;
             return withDirectives(createVNode(unref(Btn), {
+              tabindex: "-1",
               flat: !unref(editor).isActive(item.name, item.option),
               onClick: item.command,
               thin: "",
@@ -45985,7 +46355,7 @@ export {
   _sfc_main$j as DateInput,
   _sfc_main$c as DatePicker,
   kt$1 as Dropdown,
-  FileUpload,
+  $el as FileUpload,
   _sfc_main$H as Icon,
   JSONInput,
   Layout,
@@ -46013,7 +46383,7 @@ export {
   _sfc_main$s as Title,
   ToggleInput,
   TopBar,
-  BagelFormUtils as bagelFormUtils,
+  bagelFormUtils,
   bagelInjectionKey,
   bindAttrs,
   classify,