@youcan/celeste 0.6.30 → 0.6.31

package/dist/es/link-bubble.js

@@ -0,0 +1,229 @@
+import { defineComponent, defineAsyncComponent, ref, computed, onMounted, onUnmounted, openBlock, createBlock, unref, withCtx, createElementBlock, createElementVNode, createVNode, withKeys, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import Button from "./button.js";
+import CompactButton from "./compact-button.js";
+import LinkButton from "./link-button.js";
+import Label from "./label.js";
+import { _ as _sfc_main$1 } from "./chunks/switch.vue_vue_type_style_index_0_lang.js";
+import TextInputAffix from "./text-input-affix.js";
+import TextInput from "./text-input.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "set-mode"
+};
+const _hoisted_2 = { class: "set-link" };
+const _hoisted_3 = { class: "switch-button-box" };
+const _hoisted_4 = {
+  key: 1,
+  class: "edit-mode"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "link-bubble",
+  props: {
+    editor: {},
+    showSetLinkFromToolbar: { type: Boolean }
+  },
+  emits: ["set-link-closed"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const BubbleMenu = defineAsyncComponent(
+      () => import("./chunks/index2.js").then((m) => m.BubbleMenu)
+    );
+    const href = ref("");
+    const openInNewTab = ref(false);
+    const editing = ref(false);
+    const isTextSelected = () => props.editor.state.selection.from !== props.editor.state.selection.to;
+    const showBubble = computed(() => {
+      return editing.value || props.editor.isActive("link") || props.showSetLinkFromToolbar && isTextSelected();
+    });
+    function startEdit() {
+      editing.value = true;
+      const attrs = props.editor.getAttributes("link");
+      href.value = attrs.href || "";
+      openInNewTab.value = attrs.target === "_blank";
+    }
+    function removeLink() {
+      props.editor.chain().focus().unsetLink().run();
+      reset();
+    }
+    function reset() {
+      editing.value = false;
+      href.value = "";
+      openInNewTab.value = false;
+      emit("set-link-closed");
+    }
+    function truncateMiddleUrl(str) {
+      const maxLength = 40;
+      if (str.length <= maxLength) {
+        return str;
+      }
+      const startChars = Math.ceil((maxLength - 3) / 2);
+      const endChars = Math.floor((maxLength - 3) / 2);
+      return `${str.slice(0, startChars)}...${str.slice(-endChars)}`;
+    }
+    function isAllowedUri() {
+      const url = href.value.trim();
+      if (!url || url.includes(" ")) {
+        return false;
+      }
+      if (url.startsWith("/")) {
+        return true;
+      }
+      if (url.startsWith("./") || url.startsWith("../")) {
+        return false;
+      }
+      const allowedProtocols = /^(?:https?:|mailto:)/i;
+      const disallowedProtocols = /^(?:javascript:|data:)/i;
+      if (disallowedProtocols.test(url)) {
+        return false;
+      }
+      if (allowedProtocols.test(url)) {
+        return true;
+      }
+      return false;
+    }
+    const isValidUrl = computed(() => isAllowedUri());
+    function applyLink() {
+      if (!href.value || !isValidUrl.value) {
+        return;
+      }
+      props.editor.chain().focus().extendMarkRange("link").setLink({
+        href: href.value,
+        target: openInNewTab.value ? "_blank" : null
+      }).run();
+      reset();
+    }
+    const bubbleRef = ref(null);
+    function handleClickOutside(event) {
+      const target = event.target;
+      if (!bubbleRef.value) {
+        return;
+      }
+      if (bubbleRef.value && bubbleRef.value.contains(target)) {
+        return;
+      }
+      if (target.closest(".i-celeste-link")) {
+        return;
+      }
+      emit("set-link-closed");
+    }
+    onMounted(() => {
+      props.editor.on("selectionUpdate", () => {
+        if (props.editor.isActive("link") || props.showSetLinkFromToolbar) {
+          const attrs = props.editor.getAttributes("link");
+          href.value = attrs.href || "";
+          openInNewTab.value = attrs.target === "_blank";
+        } else {
+          reset();
+        }
+      });
+      document.addEventListener("click", handleClickOutside);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("click", handleClickOutside);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(BubbleMenu), {
+        "should-show": () => true,
+        editor: _ctx.editor,
+        options: {
+          placement: "bottom",
+          offset: {
+            mainAxis: 0,
+            crossAxis: 12
+          }
+        }
+      }, {
+        default: withCtx(() => [
+          showBubble.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            ref_key: "bubbleRef",
+            ref: bubbleRef,
+            class: "link-bubble"
+          }, [
+            editing.value || props.showSetLinkFromToolbar && isTextSelected() ? (openBlock(), createElementBlock("div", _hoisted_1, [
+              createElementVNode("div", _hoisted_2, [
+                createVNode(TextInput, {
+                  modelValue: href.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => href.value = $event),
+                  type: "url",
+                  size: "xs",
+                  placeholder: "Paste or type a link",
+                  class: "link-input",
+                  onKeydown: [
+                    withKeys(applyLink, ["enter"]),
+                    withKeys(reset, ["esc"])
+                  ]
+                }, {
+                  leadingNode: withCtx(() => [
+                    createVNode(TextInputAffix, null, {
+                      default: withCtx(() => _cache[2] || (_cache[2] = [
+                        createElementVNode("i", { class: "i-celeste-link" }, null, -1)
+                      ])),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["modelValue"]),
+                createVNode(Button, {
+                  intent: "neutral",
+                  size: "xs",
+                  variant: "stroke",
+                  disabled: !isValidUrl.value,
+                  onClick: applyLink
+                }, {
+                  default: withCtx(() => _cache[3] || (_cache[3] = [
+                    createTextVNode(" Set link ")
+                  ])),
+                  _: 1
+                }, 8, ["disabled"])
+              ]),
+              createElementVNode("div", _hoisted_3, [
+                createVNode(Label, { for: "open-in-new-tab" }, {
+                  default: withCtx(() => _cache[4] || (_cache[4] = [
+                    createTextVNode(" Open in new tab ")
+                  ])),
+                  _: 1
+                }),
+                createVNode(_sfc_main$1, {
+                  id: "open-in-new-tab",
+                  checked: openInNewTab.value,
+                  "onUpdate:checked": _cache[1] || (_cache[1] = ($event) => openInNewTab.value = $event)
+                }, null, 8, ["checked"])
+              ])
+            ])) : props.editor.isActive("link") ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              createVNode(LinkButton, {
+                href: _ctx.editor.getAttributes("link").href,
+                target: _ctx.editor.getAttributes("link").target
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(truncateMiddleUrl(_ctx.editor.getAttributes("link").href)), 1)
+                ]),
+                _: 1
+              }, 8, ["href", "target"]),
+              _cache[5] || (_cache[5] = createElementVNode("div", { class: "divider" }, null, -1)),
+              createVNode(CompactButton, {
+                icon: "i-celeste-edit-line",
+                size: "lg",
+                variant: "ghost",
+                onClick: startEdit
+              }),
+              createVNode(CompactButton, {
+                icon: "i-celeste-delete-bin-line",
+                size: "lg",
+                variant: "ghost",
+                onClick: removeLink
+              })
+            ])) : createCommentVNode("", true)
+          ], 512)) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["editor"]);
+    };
+  }
+});
+const LinkBubble = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c63c1d92"]]);
+export {
+  LinkBubble as default
+};

package/dist/es/link-button.js

@@ -39,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const linkButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-82b3b1ab"]]);
+const LinkButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-82b3b1ab"]]);
 export {
-  linkButton as default
+  LinkButton as default
 };

package/dist/es/modal-content.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, Transition, mergeProps, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, a1 as Dv, a2 as Eu, a3 as xu } from "./chunks/index.js";
+import { x as xe, aa as Dv, ab as Eu, ac as xu } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "modal-content",

package/dist/es/modal-header.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, createCommentVNode, createBlock, withCtx, toDisplayString, createVNode } from "vue";
 import CompactButton from "./compact-button.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { a4 as Pu, a5 as Du, a as Gl } from "./chunks/index.js";
+import { ad as Pu, ae as Du, a as Gl } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = ["data-dismissible", "data-alignment", "data-type"];
 const _hoisted_2 = {

package/dist/es/popover-content.js

@@ -2,7 +2,7 @@ import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, m
 import CompactButton from "./compact-button.js";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, a6 as bs, a7 as ws, a8 as _s, a9 as xs } from "./chunks/index.js";
+import { x as xe, af as bs, ag as ws, ah as _s, ai as xs } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = ["data-icon-size"];
 const _hoisted_2 = { class: "celeste-popover-title" };

package/dist/es/popover-trigger.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
-import { aa as gs } from "./chunks/index.js";
+import { aj as gs } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "popover-trigger",