@bagelink/vue 0.0.865 → 0.0.871

package/dist/index.mjs

@@ -599,9 +599,11 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     }
     function updateHeight() {
       if (!props2.autoHeight || !bglSlider.value) return;
-      const children2 = Array.from(bglSlider.value.children[activeSlideIndex.value].children);
-      const totalHeight = children2.reduce((sum, el) => sum + el.clientHeight, 0);
-      yHeight.value = `${totalHeight}px`;
+      setTimeout(() => {
+        const children2 = Array.from(bglSlider.value.children[activeSlideIndex.value].children);
+        const totalHeight = children2.reduce((sum, el) => sum + el.clientHeight, 0);
+        yHeight.value = `${totalHeight}px`;
+      }, 200);
     }
     function easeScroll(target, duration = 500) {
       if (!bglSlider.value || isPressed.value) return;
@@ -737,7 +739,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-5da489eb"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-ca63f224"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }
@@ -9585,7 +9587,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       if (props2.field.$el === "select") return SelectInput;
       if (props2.field.$el === "toggle") return ToggleInput;
       if (props2.field.$el === "check") return CheckInput;
-      if (props2.field.$el === "richtext") return _sfc_main$w;
+      if (props2.field.$el === "richtext") return RichText;
       if (props2.field.$el === "file") return $el;
       if (props2.field.$el === "date") return _sfc_main$F;
       return props2.field.$el ?? "div";
@@ -43396,12 +43398,16 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     };
   }
 });
+let modal;
 function applyFormatting(command2, value = "") {
   const selection = window.getSelection();
   if (selection && selection.rangeCount > 0) {
     const range2 = selection.getRangeAt(0);
     const span = document.createElement("span");
     switch (command2) {
+      case "formatBlock":
+        formatBlock(value);
+        break;
       case "bold":
         span.style.fontWeight = "bold";
         break;
@@ -43466,8 +43472,9 @@ function applyFormatting(command2, value = "") {
         increaseFontSize();
         break;
       case "decreaseFontSize":
+        decreaseFontSize();
         break;
-      case "insertLink":
+      case "link":
         insertLink();
         break;
       case "image":
@@ -43483,6 +43490,15 @@ function applyFormatting(command2, value = "") {
     range2.surroundContents(span);
   }
 }
+function formatBlock(value) {
+  if (!value) return;
+  const selection = window.getSelection();
+  const range2 = selection == null ? void 0 : selection.getRangeAt(0);
+  if (!range2) return;
+  range2.selectNodeContents(range2.startContainer);
+  const el = document.createElement(value);
+  range2.surroundContents(el);
+}
 function increaseFontSize() {
   const selection = window.getSelection();
   if (selection && selection.rangeCount > 0) {
@@ -43494,6 +43510,17 @@ function increaseFontSize() {
     range2.surroundContents(span);
   }
 }
+function decreaseFontSize() {
+  const selection = window.getSelection();
+  if (selection && selection.rangeCount > 0) {
+    const range2 = selection.getRangeAt(0);
+    const span = document.createElement("span");
+    const currentFontSize = Number.parseInt(range2.startContainer.parentNode.style.fontSize || "16", 10);
+    const newFontSize = currentFontSize - 2;
+    span.style.fontSize = `${newFontSize}px`;
+    range2.surroundContents(span);
+  }
+}
 function removeFormatting() {
   const selection = window.getSelection();
   if (selection && selection.rangeCount > 0) {
@@ -43526,22 +43553,38 @@ function insertList(type3) {
   }
 }
 function insertLink() {
-  const url = prompt("Enter the URL:");
-  if (url) {
-    const selection = window.getSelection();
-    if (selection && selection.rangeCount > 0) {
-      const range2 = selection.getRangeAt(0);
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount < 1) return;
+  const range2 = selection.getRangeAt(0);
+  modal.showModalForm({ title: "Insert Link", schema: [
+    { id: "url", $el: "text", label: "URL" },
+    { id: "openInNewTab", $el: "check", label: "Open in new tab" }
+  ], onSubmit: (data2) => {
+    const { url, openInNewTab } = data2;
+    if (url) {
       const anchor = document.createElement("a");
       anchor.href = url;
       range2.surroundContents(anchor);
+      if (openInNewTab) anchor.target = "_blank";
     }
-  }
+  } });
 }
 function insertImage() {
-  console.log("image");
-  const { showModalForm } = useModal();
-  console.log(showModalForm);
-  showModalForm({ title: "Upload Image", schema: [{ id: "image", type: "file" }], onSubmit: (_data) => {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount < 1) return;
+  const range2 = selection.getRangeAt(0);
+  modal.showModalForm({ title: "Upload Image", schema: [
+    { id: "src", $el: "file", attrs: { bindkey: "url" } },
+    { id: "alt", $el: "text", label: "Alt Text" }
+  ], onSubmit: (_data) => {
+    const { src } = _data;
+    if (src) {
+      const img = document.createElement("img");
+      img.src = src;
+      img.alt = _data.alt;
+      range2.deleteContents();
+      range2.insertNode(img);
+    }
   } });
 }
 function createTable() {
@@ -43568,6 +43611,25 @@ function createTable() {
     }
   }
 }
+function clearFormatting() {
+  const selection = window.getSelection();
+  const range2 = selection == null ? void 0 : selection.getRangeAt(0);
+  if (!range2) return;
+  range2.selectNodeContents(range2.startContainer);
+  const contents = range2.extractContents();
+  const text = contents.textContent;
+  if (text !== null && text !== "") {
+    range2.deleteContents();
+    const textNode = document.createTextNode(`${text}`);
+    setTimeout(() => {
+      range2.insertNode(textNode);
+    }, 1);
+  }
+}
+function useFormatting(modalInstance) {
+  modal = modalInstance;
+  return { applyFormatting, clearFormatting };
+}
 const _hoisted_1$o = { class: "flex gap-05" };
 const _hoisted_2$f = ["disabled"];
 const _hoisted_3$c = { key: 1 };
@@ -43875,6 +43937,11 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const emit2 = __emit;
     const toolbarOptions = [
+      { name: "formatBlock", label: "h2", icon: "format_h2" },
+      { name: "formatBlock", label: "h3", icon: "format_h3" },
+      { name: "formatBlock", label: "h4", icon: "format_h4" },
+      { name: "formatBlock", label: "h5", icon: "format_h5" },
+      { name: "formatBlock", label: "h6", icon: "format_h6" },
       { name: "separator" },
       { name: "bold", label: "Bold", icon: "format_bold" },
       { name: "italic", label: "Italic", icon: "format_italic" },
@@ -43891,31 +43958,22 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       { name: "clear", label: "Clear Formatting", icon: "format_clear" },
       { name: "fullScreen", label: "Full Screen", icon: "fullscreen", class: "ms-auto" }
     ];
-    function handleSelectChange(selectedOption) {
-      emit2("action", "formatBlock", selectedOption);
-    }
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
       return openBlock(), createElementBlock("div", _hoisted_1$n, [
-        createVNode(SelectInput, {
-          class: "m-0 w150",
-          options: ["Text", "Heading 1", "Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6", "Blockquote", "Code"],
-          onChange: handleSelectChange
-        }),
         (openBlock(), createElementBlock(Fragment$1, null, renderList(toolbarOptions, (action, index2) => {
-          return openBlock(), createElementBlock(Fragment$1, null, [
+          return openBlock(), createElementBlock(Fragment$1, { key: index2 }, [
             action.name !== "separator" && _ctx.config.includes(action.name) ? withDirectives((openBlock(), createBlock(unref(Btn), {
-              key: action.name,
+              key: 0,
+              icon: action.icon,
               thin: "",
               flat: "",
-              class: normalizeClass([action.class, "radius-05"]),
               "aria-label": action.name,
-              icon: action.icon,
-              onClick: ($event) => emit2("action", action.name)
-            }, null, 8, ["class", "aria-label", "icon", "onClick"])), [
+              class: normalizeClass([action.class, "radius-05"]),
+              onClick: ($event) => emit2("action", action.name, action.label)
+            }, null, 8, ["icon", "aria-label", "class", "onClick"])), [
               [_directive_tooltip, action.label]
-            ]) : createCommentVNode("", true),
-            action.name === "separator" ? (openBlock(), createElementBlock("span", {
+            ]) : action.name === "separator" ? (openBlock(), createElementBlock("span", {
               key: `separator-${index2}`,
               class: "opacity-2 mb-025"
             }, "|")) : createCommentVNode("", true)
@@ -43925,9 +43983,9 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$m = { class: "rich-text-editor rounded pt-05 px-1 pb-1" };
+const _hoisted_1$m = { class: "rich-text-editor rounded pt-05 px-05 pb-1" };
 const _hoisted_2$e = { class: "editor-container flex flex-stretch gap-1 m_column" };
-const _hoisted_3$b = { class: "content-area radius-05 p-1 shadow-light w-100 grid" };
+const _hoisted_3$b = { class: "content-area radius-05 p-1 w-100 grid" };
 const _hoisted_4$7 = ["textContent"];
 const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "index",
@@ -43939,8 +43997,11 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit2 = __emit;
+    const modal2 = useModal();
+    const { applyFormatting: applyFormatting2, clearFormatting: clearFormatting2 } = useFormatting(modal2);
     const editableContent = ref();
     const defaultConfig2 = [
+      "formatBlock",
       "bold",
       "italic",
       "underline",
@@ -43978,39 +44039,32 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       }
       emit2("update:modelValue", contentHtml.value);
     }
+    function updateToolbarHighlight() {
+      if (document.getSelection()) {
+        const selection = document.getSelection();
+        const range2 = (selection == null ? void 0 : selection.rangeCount) ? selection.getRangeAt(0) : null;
+        const container = range2 == null ? void 0 : range2.commonAncestorContainer;
+        if (container) {
+          let currentElement = container.nodeType === 3 ? container.parentElement : container;
+          while (currentElement && currentElement !== editableContent.value) {
+            if (["H1", "H2", "H3"].includes(currentElement.tagName)) {
+              break;
+            }
+            currentElement = currentElement.parentElement;
+          }
+        }
+      }
+    }
+    document.addEventListener("selectionchange", updateToolbarHighlight);
     function handleToolbarAction(action, value) {
       if (!editableContent.value) return;
       if (["alignLeft", "alignCenter", "alignRight", "alignJustify"].includes(action))
         value = action.replace("align", "").toLowerCase();
-      switch (action) {
-        case "link":
-          applyFormatting("insertLink");
-          break;
-        case "orderedList":
-          applyFormatting("insertOrderedList");
-          break;
-        case "unorderedList":
-          applyFormatting("insertUnorderedList");
-          break;
-        case "blockquote":
-          applyFormatting("formatBlock", "<blockquote>");
-          break;
-        case "codeBlock":
-          applyFormatting("formatBlock", "<pre>");
-          break;
-        case "splitView":
-          isSplitView.value = !isSplitView.value;
-          break;
-        case "codeView":
-          isCodeView.value = !isCodeView.value;
-          break;
-        case "fullScreen":
-          toggleFullScreen();
-          break;
-        default:
-          applyFormatting(action, value);
-          break;
-      }
+      if (action === "splitView") isSplitView.value = !isSplitView.value;
+      else if (action === "codeView") isCodeView.value = !isCodeView.value;
+      else if (action === "fullScreen") toggleFullScreen();
+      else if (action === "clear") clearFormatting2();
+      else applyFormatting2(action, value);
       updateContent();
     }
     function toggleFullScreen() {
@@ -44093,7 +44147,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             key: 0,
             contenteditable: "true",
             class: "preview-area w-100 radius-05 p-1",
-            onInput: logInput,
+            onInput: _cache[1] || (_cache[1] = (e) => logInput(e)),
             textContent: toDisplayString(unref(contentHtml))
           }, null, 40, _hoisted_4$7)) : createCommentVNode("", true)
         ])
@@ -44101,7 +44155,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-ee4d5b26"]]);
+const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-492bb647"]]);
 /*!
  * Signature Pad v5.0.4 | https://github.com/szimek/signature_pad
  * (c) 2024 Szymon Nowak | Released under the MIT license
@@ -52532,14 +52586,15 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
               ]),
               _: 2
             }, 1032, ["to", "onClick"]);
-          }), 128))
+          }), 128)),
+          renderSlot(_ctx.$slots, "end", {}, void 0, true)
         ]),
         _: 3
       });
     };
   }
 });
-const BottomMenu = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-557bcad0"]]);
+const BottomMenu = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-ee7b8f1a"]]);
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "Layout",
   props: {
@@ -52988,13 +53043,13 @@ function _sfc_render$2(_ctx, _cache) {
 }
 const ListView = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$2]]);
 const _hoisted_1$8 = ["id"];
-const defaultMarkerSVG = '<svg id="eCJDQPwuXje1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 36 36" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" project-id="ac827abc0a8c4922b76bac4df7bd7646" export-id="2cc86932ccbc4825a31fd063b3e75478" cached="false"><style><![CDATA[#eCJDQPwuXje3_ts {animation: eCJDQPwuXje3_ts__ts 3000ms linear infinite normal forwards}@keyframes eCJDQPwuXje3_ts__ts { 0% {transform: translate(18px,18px) scale(1,1)} 3.333333% {transform: translate(18px,18px) scale(1,1);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 100% {transform: translate(18px,18px) scale(1.8,1.8)}} #eCJDQPwuXje3 {animation: eCJDQPwuXje3_c_o 3000ms linear infinite normal forwards}@keyframes eCJDQPwuXje3_c_o { 0% {opacity: 0} 3.333333% {opacity: 1;animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 100% {opacity: 0}}]]></style><ellipse rx="10.049312" ry="10.049312" transform="translate(18 18)" fill="#2e5bff" stroke-width="0"/><g id="eCJDQPwuXje3_ts" transform="translate(18,18) scale(1,1)"><ellipse id="eCJDQPwuXje3" rx="10.049312" ry="10.049312" transform="translate(0,0)" opacity="0" fill="#2e5bff" stroke-width="0"/></g></svg>';
+const defaultMarkerSVG = '<svg width="28" height="38" viewBox="0 0 28 38" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.2263 37.7955C17.0897 37.7955 19.4109 37.0138 19.4109 36.0496C19.4109 35.0854 17.0897 34.3037 14.2263 34.3037C11.363 34.3037 9.04175 35.0854 9.04175 36.0496C9.04175 37.0138 11.363 37.7955 14.2263 37.7955Z" fill="black" fill-opacity="0.1"/><path d="M14.2265 0.549591C21.2842 0.549591 27.0131 6.23786 27.0787 13.28V13.4024C27.0787 19.3328 24.4759 24.4306 21.5627 28.2764C18.6511 32.12 15.4577 34.6754 14.3457 35.5097C14.2748 35.5629 14.1778 35.5629 14.1068 35.5097C12.9947 34.675 9.80135 32.1197 6.88984 28.2762C3.97665 24.4304 1.37378 19.3328 1.37378 13.4024C1.37378 6.30387 7.12806 0.549591 14.2265 0.549591Z" fill="#ED1b3E" stroke="#ED6C6F"/><path d="M14.2263 21.6185C18.7639 21.6185 22.4424 17.94 22.4424 13.4024C22.4424 8.86477 18.7639 5.18631 14.2263 5.18631C9.68872 5.18631 6.01025 8.86477 6.01025 13.4024C6.01025 17.94 9.68872 21.6185 14.2263 21.6185Z" fill="white"/></svg>';
 const leafletScriptUrl = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js";
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "MapEmbed",
   props: {
     center: { default: () => [31.7683, 35.2137] },
-    zoom: { default: 13 },
+    zoom: { default: 15 },
     height: { default: 400 },
     zoomControl: { type: Boolean, default: true },
     markers: {},
@@ -53022,19 +53077,36 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         L2.value.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 18 }).addTo(map4.value);
       }
     }
-    function addMarker(L22, latlng) {
+    function addMarker(L22, latlng, label) {
       const iconSVG = props2.markerIcon || defaultMarkerSVG;
       const customIcon = L22 == null ? void 0 : L22.icon({
         iconUrl: `data:image/svg+xml;utf8,${encodeURIComponent(iconSVG)}`,
         iconSize: [32, 32]
       });
       const marker = L22 == null ? void 0 : L22.marker(latlng, { icon: customIcon }).addTo(map4.value);
+      if (label) {
+        marker.bindTooltip(label, { direction: "top" });
+      }
+      marker.on("click", () => {
+        console.log("Marker clicked:", latlng);
+        marker.openPopup();
+      });
       _markers.value.push(marker);
     }
     function fitMarkers(L22) {
-      var _a2;
+      var _a2, _b;
       if (_markers.value.length > 0) {
-        (_a2 = map4.value) == null ? void 0 : _a2.fitBounds(L22.featureGroup(_markers.value).getBounds());
+        const latLngs = _markers.value.map((marker) => marker.getLatLng());
+        const bounds = L22.latLngBounds(latLngs);
+        console.log(props2.zoom, bounds.getCenter());
+        (_a2 = map4.value) == null ? void 0 : _a2.setView(bounds.getCenter(), props2.zoom);
+        (_b = map4.value) == null ? void 0 : _b.fitBounds(bounds, {
+          animate: true,
+          maxZoom: props2.zoom,
+          // B
+          padding: [20, 20]
+          // Adjust padding as needed
+        });
       }
     }
     async function watchMarkers(markers) {
@@ -53042,11 +53114,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       _markers.value.forEach((marker) => marker.remove());
       if (!markers) return;
       for (const marker of markers) {
-        const [lat, lon] = Array.isArray(marker) ? marker : [marker.lat, marker.lon];
+        const [lat, lon, label] = Array.isArray(marker) ? [marker[0], marker[1], marker[2]] : [marker.lat, marker.lon, marker.label];
         if (!map4.value) initializeMap();
-        addMarker(L2.value, [lat, lon]);
-        fitMarkers(L2.value);
+        addMarker(L2.value, [+lat, +lon], label);
       }
+      fitMarkers(L2.value);
     }
     watch(() => props2.markers, watchMarkers, { immediate: true });
     watch(() => props2.center, (center2) => {
@@ -53058,7 +53130,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         id: id.value,
         class: "leaflet-map",
-        style: normalizeStyle({ height: `${props2.height || 400}px` })
+        style: normalizeStyle({ height: `${props2.height || 400}px` }),
+        dir: "ltr"
       }, null, 12, _hoisted_1$8);
     };
   }
@@ -53279,7 +53352,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const props2 = __props;
     const emit2 = __emit;
     const bagel = useBagel();
-    const modal = ref();
+    const modal2 = ref();
     const computedFormSchema = computed(() => {
       if (typeof props2.schema === "function") return props2.schema();
       return props2.schema;
@@ -53288,7 +53361,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const form = ref();
     const closeModal = () => {
       var _a2;
-      return (_a2 = modal.value) == null ? void 0 : _a2.closeModal();
+      return (_a2 = modal2.value) == null ? void 0 : _a2.closeModal();
     };
     let submitting = ref(false);
     async function runSubmit() {
@@ -53317,7 +53390,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(_sfc_main$b), {
         ref_key: "modal",
-        ref: modal,
+        ref: modal2,
         side: _ctx.side,
         width: _ctx.width,
         visible: _ctx.visible,
@@ -55611,21 +55684,21 @@ const ModalPlugin = {
     const ModalComponent = defineComponent({
       data: () => ({ modalStack: modalStack.value }),
       render() {
-        return this.modalStack.map((modal, index2) => {
+        return this.modalStack.map((modal2, index2) => {
           const props2 = {
-            ...modal.modalOptions,
+            ...modal2.modalOptions,
             "visible": true,
             "onUpdate:visible": () => {
               hideModal(index2);
             }
           };
-          switch (modal.modalType) {
+          switch (modal2.modalType) {
             case "modalForm":
-              return h$2(ModalForm, props2, modal.componentSlots);
+              return h$2(ModalForm, props2, modal2.componentSlots);
             case "confirmModal":
               return h$2(_sfc_main$a, props2, {});
             default:
-              return h$2(_sfc_main$b, props2, modal.componentSlots);
+              return h$2(_sfc_main$b, props2, modal2.componentSlots);
           }
         });
       }
@@ -56007,8 +56080,8 @@ export {
   RadioGroup,
   RadioPillsInput,
   RangeInput,
-  _sfc_main$w as RichText,
-  index$1 as RichText2,
+  RichText,
+  _sfc_main$w as RichText2,
   RouterWrapper,
   SelectInput,
   SidebarMenu,

package/dist/style.css

@@ -350,7 +350,7 @@ display: block;
 	padding: 0;
 }
 
-.blocker[data-v-5da489eb] {
+.blocker[data-v-ca63f224] {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -358,7 +358,7 @@ display: block;
 	height: 100%;
 	z-index: 100;
 }
-.bgl-slider[data-v-5da489eb] {
+.bgl-slider[data-v-ca63f224] {
 	display: grid;
 	position: relative;
 	/* scroll-behavior: smooth; */
@@ -367,43 +367,43 @@ display: block;
 	/* scroll-snap-type: x mandatory; */
 	overflow-x: hidden;
 }
-.autoHeight[data-v-5da489eb] {
+.autoHeight[data-v-ca63f224] {
 	transition: height ease 0.7s;
 }
-.bgl-slider.allowScroll[data-v-5da489eb] {
+.bgl-slider.allowScroll[data-v-ca63f224] {
 	overflow-x: scroll;
 }
-.bgl-slider[data-v-5da489eb] {
+.bgl-slider[data-v-ca63f224] {
 	grid-auto-columns: calc(100% / var(--item-count) - calc(var(--item-count) - 1) * 1%);
 	gap: 1%;
 }
-.bgl-slider.odd[data-v-5da489eb] {
+.bgl-slider.odd[data-v-ca63f224] {
 	grid-auto-columns: calc(100% / var(--item-count) - calc(var(--item-count) - 2) * 1%);
 }
-.bgl-slider.slides-1[data-v-5da489eb] {
+.bgl-slider.slides-1[data-v-ca63f224] {
 	grid-auto-columns: 100%;
 	gap: 0;
 }
-.bgl-slider[data-v-5da489eb]::-webkit-scrollbar {
+.bgl-slider[data-v-ca63f224]::-webkit-scrollbar {
 	display: none;
 }
-.bgl-slider[data-v-5da489eb] * {
+.bgl-slider[data-v-ca63f224] * {
 	scroll-snap-align: start;
 }
-.dragging.bgl-slider[data-v-5da489eb] {
+.dragging.bgl-slider[data-v-ca63f224] {
 	cursor: grabbing;
 	cursor: -webkit-grabbing;
 	scroll-snap-type: unset;
 }
-.clicking.bgl-slider[data-v-5da489eb] {
+.clicking.bgl-slider[data-v-ca63f224] {
 	scroll-behavior: unset;
 }
-.dragging.bgl-slider[data-v-5da489eb] * {
+.dragging.bgl-slider[data-v-ca63f224] * {
 	scroll-snap-align: unset;
 	user-select: none;
 }
 @media screen and (max-width: 600px) {
-.bgl-slider.slides-1[data-v-5da489eb]> * {
+.bgl-slider.slides-1[data-v-ca63f224]> * {
 		margin-inline-start: 0%;
 }
 }
@@ -1288,29 +1288,29 @@ p {
     8 #818181 /* few chars */
   ;
 }
-.preview-area[data-v-ee4d5b26]{
+.preview-area[data-v-492bb647]{
 	font-family: "FontWithASyntaxHighlighter", monospace;
   	font-palette: --myCustomPalette;
 	background: var(--bgl-code-bg);
 	color: var(--bgl-code-color)
 }
-.rich-text-editor[data-v-ee4d5b26] {
+.rich-text-editor[data-v-492bb647] {
 	background: var(--input-bg);
 	margin-bottom: 0.5rem;
 	width: 100%;
 }
-.editableContent[data-v-ee4d5b26]{
+.editableContent[data-v-492bb647]{
 	min-height: 100%;
 	white-space: pre-wrap;
 	outline: none;
 }
-.content-area[data-v-ee4d5b26]{
+.content-area[data-v-492bb647]{
 	background: var(--bgl-richtext-color);
 }
-.content-area[data-v-ee4d5b26], .preview-area[data-v-ee4d5b26]{
+.content-area[data-v-492bb647], .preview-area[data-v-492bb647]{
 	min-height: 200px;
 }
-.fullscreen-mode[data-v-ee4d5b26] {
+.fullscreen-mode[data-v-492bb647] {
     position: fixed;
     top: 0;
     left: 0;
@@ -1322,14 +1322,14 @@ p {
     overflow: auto;
 	border-radius: 0;
 }
-.fullscreen-mode .content-area[data-v-ee4d5b26]{
+.fullscreen-mode .content-area[data-v-492bb647]{
 	height: calc(100vh - 5rem);
 	padding: 4rem !important;
 	max-width: 900px;
 	margin-inline: auto ;
 	overflow-y: auto;
 }
-.fullscreen-mode .toolbar[data-v-ee4d5b26]{
+.fullscreen-mode .toolbar[data-v-492bb647]{
 	max-width: 900px;
 	margin-inline: auto ;
 	/* border-bottom: 1px solid var(--border-color); */
@@ -1733,7 +1733,7 @@ p {
   gap: 0;
 }
 
-.bgl_bottombar[data-v-557bcad0] {
+.bgl_bottombar[data-v-ee7b8f1a] {
   background-color: var(--bgl-primary);
   color: var(--bgl-light-text);
   grid-template-columns: repeat(auto-fill, var(--bgl_bottombar-btn-width));
@@ -1742,16 +1742,16 @@ p {
 	padding: 0;
 	--bgl_bottombar-btn-width: 62px;
 }
-.bgl_bottombar[data-v-557bcad0]>* {
+.bgl_bottombar[data-v-ee7b8f1a]>* {
   width: var(--bgl_bottombar-btn-width);
 }
-.bgl_bottombar[data-v-557bcad0]::-webkit-scrollbar {
+.bgl_bottombar[data-v-ee7b8f1a]::-webkit-scrollbar {
   display: none;
 }
-.bgl_bottombar .nav-button[data-v-557bcad0] {
+.bgl_bottombar .nav-button[data-v-ee7b8f1a] {
   border-radius: var(--card-border-radius);
 }
-.bgl_bottombar .router-link-active[data-v-557bcad0] {
+.bgl_bottombar .router-link-active[data-v-ee7b8f1a] {
   background: var(--bgl-popup-bg);
   color: var(--bgl-primary) !important;
 }
@@ -2667,7 +2667,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
   height: 100%;
   border-radius: var(--input-border-radius);
   position: relative;
-  background: var(--bgl-bg)
+  background: var(--bgl-bg);
+  direction: ltr;
 }
 .leaflet-map::after {
   content: "";
@@ -2683,7 +2684,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   display: none;
 }
 .leaflet-pane.leaflet-marker-pane img {
-  filter: drop-shadow(0px 8px 3px rgba(0, 0, 0, 0.2));
+  /* filter: drop-shadow(0px 8px 3px rgba(0, 0, 0, 0.2)); */
 }
 .leaflet-touch .leaflet-control-zoom-in,
 .leaflet-touch .leaflet-control-zoom-out {
@@ -2719,6 +2720,9 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .leaflet-bar a:focus {
   filter: var(--bgl-active-filter);
 }
+.leaflet-marker-icon {
+	cursor: pointer;
+}
 .bg-dark {
     position: fixed;
     top: 0;