@youcan/celeste 0.6.30 → 0.6.31

package/dist/cjs/config.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Mo = require("vue");
+const fullToolbar = Mo.ref([
+  {
+    slug: "heading",
+    name: "Text styles",
+    children: [
+      { option: "p", name: "Normal text", active: "paragraph" },
+      { option: "1", name: "Heading 1", active: { level: 1 } },
+      { option: "2", name: "Heading 2", active: { level: 2 } },
+      { option: "3", name: "Heading 3", active: { level: 3 } },
+      { option: "4", name: "Heading 4", active: { level: 4 } },
+      { option: "5", name: "Heading 5", active: { level: 5 } },
+      { option: "6", name: "Heading 6", active: { level: 6 } }
+    ]
+  },
+  { type: "divider" },
+  {
+    slug: "fontSize",
+    name: "Font size",
+    children: [
+      { option: "8px", name: "8", active: { fontSize: "8px" } },
+      { option: "10px", name: "10", active: { fontSize: "10px" } },
+      { option: "12px", name: "12", active: { fontSize: "12px" } },
+      { option: "14px", name: "14", active: { fontSize: "14px" } },
+      { option: "16px", name: "16", active: { fontSize: "16px" } },
+      { option: "18px", name: "18", active: { fontSize: "18px" } },
+      { option: "24px", name: "24", active: { fontSize: "24px" } },
+      { option: "30px", name: "30", active: { fontSize: "30px" } },
+      { option: "36px", name: "36", active: { fontSize: "36px" } },
+      { option: "48px", name: "48", active: { fontSize: "48px" } },
+      { option: "60px", name: "60", active: { fontSize: "60px" } },
+      { option: "72px", name: "72", active: { fontSize: "72px" } },
+      { option: "96px", name: "96", active: { fontSize: "96px" } }
+    ]
+  },
+  { type: "divider" },
+  {
+    slug: "color",
+    name: "Text color",
+    children: [
+      { option: "#000000", name: "Black", icon: "i-celeste-circle-fill", active: { color: "#000000" } },
+      { option: "#7B7B7B", name: "Gray", icon: "i-celeste-circle-fill", active: { color: "#7B7B7B" } },
+      { option: "#335CFF", name: "Blue", icon: "i-celeste-circle-fill", active: { color: "#335CFF" } },
+      { option: "#FA7319", name: "Orange", icon: "i-celeste-circle-fill", active: { color: "#FA7319" } },
+      { option: "#7D52F4", name: "Purple", icon: "i-celeste-circle-fill", active: { color: "#7D52F4" } },
+      { option: "#47C2FF", name: "Sky", icon: "i-celeste-circle-fill", active: { color: "#47C2FF" } }
+    ]
+  },
+  { type: "divider" },
+  { slug: "bold", name: "Bold", icon: "i-celeste-bold", active: "bold" },
+  { slug: "italic", name: "Italic", icon: "i-celeste-italic", active: "italic" },
+  { slug: "underline", name: "Underline", icon: "i-celeste-underline", active: "underline" },
+  { slug: "strike", name: "Strike", icon: "i-celeste-strikethrough", active: "strike" },
+  { type: "divider" },
+  { slug: "bulletList", name: "Bulleted list", icon: "i-celeste-list-unordered", active: "bulletList" },
+  { slug: "orderedList", name: "Numbered list", icon: "i-celeste-list-ordered", active: "orderedList" },
+  { type: "divider" },
+  {
+    slug: "align",
+    name: "Text alignment",
+    children: [
+      { option: "left", name: "Left align", icon: "i-celeste-align-left", active: { textAlign: "left" } },
+      { option: "center", name: "Center align", icon: "i-celeste-align-center", active: { textAlign: "center" } },
+      { option: "right", name: "Right align", icon: "i-celeste-align-right", active: { textAlign: "right" } },
+      { option: "justify", name: "Justify", icon: "i-celeste-align-justify", active: { textAlign: "justify" } }
+    ]
+  },
+  { type: "divider" },
+  { slug: "link", name: "Insert Link", icon: "i-celeste-link", active: "link" },
+  { type: "divider" },
+  { slug: "undo", name: "Undo", icon: "i-celeste-arrow-go-back-line", active: "undo" },
+  { slug: "redo", name: "Redo", icon: "i-celeste-arrow-go-forward-line", active: "redo" },
+  { slug: "clear", name: "Clear style", icon: "i-celeste-format-clear", active: "clear" }
+]);
+function onActionClick(editor, slug, option = null, showLinkBubble) {
+  var _a;
+  const chain = editor.chain().focus();
+  if (!chain) {
+    return;
+  }
+  const actionTriggers = {
+    heading: () => {
+      if (!option) {
+        return;
+      }
+      if (option === "p") {
+        chain.setParagraph().run();
+      } else {
+        const headingLevel = Number(option);
+        chain.toggleHeading({ level: headingLevel }).run();
+      }
+    },
+    fontSize: () => {
+      editor.chain().focus().setFontSize(option ?? "16px").run();
+    },
+    color: () => {
+      editor.chain().focus().setColor(option ?? "#000000").run();
+    },
+    bold: () => chain.toggleBold().run(),
+    italic: () => chain.toggleItalic().run(),
+    underline: () => chain.toggleUnderline().run(),
+    strike: () => chain.toggleStrike().run(),
+    bulletList: () => chain.toggleBulletList().run(),
+    orderedList: () => chain.toggleOrderedList().run(),
+    align: () => chain.setTextAlign(option ?? "left").run(),
+    link: () => {
+      if (showLinkBubble) {
+        showLinkBubble();
+      }
+    },
+    undo: () => chain.undo().run(),
+    redo: () => chain.redo().run(),
+    clear: () => chain.clearNodes().unsetAllMarks().run()
+  };
+  (_a = actionTriggers[slug]) == null ? void 0 : _a.call(actionTriggers);
+}
+function selectedOption(editor, children) {
+  if (!Array.isArray(children)) {
+    return "";
+  }
+  for (const child of children) {
+    if (Object.prototype.hasOwnProperty.call(child.active, "fontSize")) {
+      const currentFontSize = editor.getAttributes("textStyle").fontSize || "16px";
+      return currentFontSize;
+    }
+    if (editor.isActive(child.active)) {
+      return child.option;
+    }
+  }
+  return children[0].option;
+}
+exports.fullToolbar = fullToolbar;
+exports.onActionClick = onActionClick;
+exports.selectedOption = selectedOption;

package/dist/cjs/extra-settings.js

@@ -0,0 +1,155 @@
+"use strict";
+const Mo = require("vue");
+const compactButton = require("./compact-button.js");
+const selectContent = require("./select-content.js");
+const selectIcon = require("./select-icon.js");
+const selectItem = require("./select-item.js");
+const selectTrigger = require("./select-trigger.js");
+const select_vue_vue_type_script_setup_true_lang = require("./chunks/select.js");
+const tooltip = require("./tooltip.js");
+const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
+const _hoisted_1 = { class: "show-more-wrapper" };
+const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
+  __name: "extra-settings",
+  props: {
+    editor: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const defaultValue = Mo.ref("");
+    const extraSettings = [
+      {
+        name: "Copy",
+        icon: "i-celeste-file-copy-line"
+      },
+      {
+        name: "Cut",
+        icon: "i-celeste-scissors-line"
+      },
+      {
+        name: "Delete",
+        icon: "i-celeste-delete-bin-4-line"
+      },
+      {
+        name: "Duplicate",
+        icon: "i-celeste-add-circle-line"
+      }
+    ];
+    function selectedText(editor) {
+      const { from, to } = editor.state.selection;
+      const text = editor.state.doc.textBetween(from, to, "\n");
+      return text || null;
+    }
+    async function copySelectionToClipboard(editor) {
+      const text = selectedText(editor);
+      if (!text) {
+        return;
+      }
+      try {
+        if (!window.isSecureContext) {
+          throw new Error("Clipboard API is not available in insecure contexts");
+        }
+        const copyText = await navigator.clipboard.writeText(text);
+        return copyText;
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    async function cutSelection(editor) {
+      await copySelectionToClipboard(editor);
+      deleteSelection(editor);
+    }
+    function deleteSelection(editor) {
+      return editor.commands.deleteSelection();
+    }
+    function duplicateSelection(editor) {
+      const { to } = editor.state.selection;
+      const text = selectedText(editor);
+      if (!text) {
+        return;
+      }
+      return editor.commands.insertContentAt(to, text);
+    }
+    function clearSelectedValue() {
+      defaultValue.value = "";
+    }
+    function onActionClick(name, editor) {
+      switch (name) {
+        case "Copy":
+          copySelectionToClipboard(editor);
+          break;
+        case "Cut":
+          cutSelection(editor);
+          break;
+        case "Delete":
+          deleteSelection(editor);
+          break;
+        case "Duplicate":
+          duplicateSelection(editor);
+          break;
+      }
+    }
+    return (_ctx, _cache) => {
+      return Mo.openBlock(), Mo.createElementBlock("div", _hoisted_1, [
+        Mo.createVNode(select_vue_vue_type_script_setup_true_lang._sfc_main, {
+          modelValue: defaultValue.value,
+          "onUpdate:modelValue": [
+            _cache[0] || (_cache[0] = ($event) => defaultValue.value = $event),
+            _cache[1] || (_cache[1] = ($event) => onActionClick($event, props.editor))
+          ],
+          "onUpdate:open": clearSelectedValue
+        }, {
+          default: Mo.withCtx(() => [
+            Mo.createVNode(selectTrigger, { variant: "inline" }, {
+              default: Mo.withCtx(() => [
+                Mo.createVNode(tooltip, {
+                  title: "Extra settings",
+                  variant: "dark"
+                }, {
+                  default: Mo.withCtx(() => [
+                    Mo.createVNode(compactButton, {
+                      icon: "i-celeste-more-2-line",
+                      variant: "ghost"
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            Mo.createVNode(selectContent, {
+              align: "end",
+              width: "fit"
+            }, {
+              default: Mo.withCtx(() => [
+                (Mo.openBlock(), Mo.createElementBlock(Mo.Fragment, null, Mo.renderList(extraSettings, (item, index) => {
+                  return Mo.createVNode(selectItem, {
+                    key: index,
+                    value: item.name
+                  }, {
+                    default: Mo.withCtx(() => [
+                      Mo.createVNode(selectIcon, null, {
+                        default: Mo.withCtx(() => [
+                          Mo.createElementVNode("i", {
+                            class: Mo.normalizeClass(item.icon)
+                          }, null, 2)
+                        ]),
+                        _: 2
+                      }, 1024),
+                      Mo.createElementVNode("span", null, Mo.toDisplayString(item.name), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["value"]);
+                }), 64))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ]);
+    };
+  }
+});
+const ExtraSettings = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-49d51443"]]);
+module.exports = ExtraSettings;

package/dist/cjs/index.js

@@ -46,6 +46,7 @@ const modal_vue_vue_type_script_setup_true_lang = require("./chunks/modal.js");
 const popoverContent = require("./popover-content.js");
 const popoverTrigger = require("./popover-trigger.js");
 const popover_vue_vue_type_script_setup_true_lang = require("./chunks/popover.js");
+const richEditor = require("./rich-editor.js");
 const scrollArea_vue_vue_type_script_setup_true_lang = require("./chunks/scroll-area.js");
 const segmentedControlItem = require("./segmented-control-item.js");
 const segmentedControl = require("./segmented-control.js");
@@ -59,6 +60,8 @@ const selectTrigger = require("./select-trigger.js");
 const selectValue = require("./select-value.js");
 const select_vue_vue_type_script_setup_true_lang = require("./chunks/select.js");
 const slider_vue_vue_type_style_index_0_lang = require("./chunks/slider.vue_vue_type_style_index_0_lang.js");
+const sonnerAlert = require("./sonner-alert.js");
+const sonner_vue_vue_type_script_setup_true_lang = require("./chunks/sonner.js");
 const switch_vue_vue_type_style_index_0_lang = require("./chunks/switch.vue_vue_type_style_index_0_lang.js");
 const tabMenuContent = require("./tab-menu-content.js");
 const tabMenuItem = require("./tab-menu-item.js");
@@ -115,6 +118,7 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   Popover: popover_vue_vue_type_script_setup_true_lang._sfc_main,
   PopoverContent: popoverContent,
   PopoverTrigger: popoverTrigger,
+  RichEditor: richEditor,
   ScrollArea: scrollArea_vue_vue_type_script_setup_true_lang._sfc_main,
   SegmentedControl: segmentedControl,
   SegmentedControlItem: segmentedControlItem,
@@ -129,6 +133,8 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   SelectValue: selectValue,
   Slider: slider_vue_vue_type_style_index_0_lang._sfc_main,
   SocialButton: socialButton,
+  Sonner: sonner_vue_vue_type_script_setup_true_lang._sfc_main,
+  SonnerAlert: sonnerAlert,
   StatusBadge: statusBadge,
   Switch: switch_vue_vue_type_style_index_0_lang._sfc_main,
   TabMenu: tabMenu,
@@ -194,6 +200,7 @@ exports.Modal = modal_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PopoverContent = popoverContent;
 exports.PopoverTrigger = popoverTrigger;
 exports.Popover = popover_vue_vue_type_script_setup_true_lang._sfc_main;
+exports.RichEditor = richEditor;
 exports.ScrollArea = scrollArea_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.SegmentedControlItem = segmentedControlItem;
 exports.SegmentedControl = segmentedControl;
@@ -207,6 +214,8 @@ exports.SelectTrigger = selectTrigger;
 exports.SelectValue = selectValue;
 exports.Select = select_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.Slider = slider_vue_vue_type_style_index_0_lang._sfc_main;
+exports.SonnerAlert = sonnerAlert;
+exports.Sonner = sonner_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.Switch = switch_vue_vue_type_style_index_0_lang._sfc_main;
 exports.TabMenuContent = tabMenuContent;
 exports.TabMenuItem = tabMenuItem;

package/dist/cjs/label.js

@@ -51,5 +51,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const label = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-4768213c"]]);
-module.exports = label;
+const Label = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-4768213c"]]);
+module.exports = Label;

package/dist/cjs/link-bubble.js

@@ -0,0 +1,228 @@
+"use strict";
+const Mo = require("vue");
+const button = require("./button.js");
+const compactButton = require("./compact-button.js");
+const linkButton = require("./link-button.js");
+const label = require("./label.js");
+const switch_vue_vue_type_style_index_0_lang = require("./chunks/switch.vue_vue_type_style_index_0_lang.js");
+const textInputAffix = require("./text-input-affix.js");
+const textInput = require("./text-input.js");
+const _pluginVue_exportHelper = require("./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__ */ Mo.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 = Mo.defineAsyncComponent(
+      () => Promise.resolve().then(() => require("./chunks/index2.js")).then((m) => m.BubbleMenu)
+    );
+    const href = Mo.ref("");
+    const openInNewTab = Mo.ref(false);
+    const editing = Mo.ref(false);
+    const isTextSelected = () => props.editor.state.selection.from !== props.editor.state.selection.to;
+    const showBubble = Mo.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 = Mo.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 = Mo.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");
+    }
+    Mo.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);
+    });
+    Mo.onUnmounted(() => {
+      document.removeEventListener("click", handleClickOutside);
+    });
+    return (_ctx, _cache) => {
+      return Mo.openBlock(), Mo.createBlock(Mo.unref(BubbleMenu), {
+        "should-show": () => true,
+        editor: _ctx.editor,
+        options: {
+          placement: "bottom",
+          offset: {
+            mainAxis: 0,
+            crossAxis: 12
+          }
+        }
+      }, {
+        default: Mo.withCtx(() => [
+          showBubble.value ? (Mo.openBlock(), Mo.createElementBlock("div", {
+            key: 0,
+            ref_key: "bubbleRef",
+            ref: bubbleRef,
+            class: "link-bubble"
+          }, [
+            editing.value || props.showSetLinkFromToolbar && isTextSelected() ? (Mo.openBlock(), Mo.createElementBlock("div", _hoisted_1, [
+              Mo.createElementVNode("div", _hoisted_2, [
+                Mo.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: [
+                    Mo.withKeys(applyLink, ["enter"]),
+                    Mo.withKeys(reset, ["esc"])
+                  ]
+                }, {
+                  leadingNode: Mo.withCtx(() => [
+                    Mo.createVNode(textInputAffix, null, {
+                      default: Mo.withCtx(() => _cache[2] || (_cache[2] = [
+                        Mo.createElementVNode("i", { class: "i-celeste-link" }, null, -1)
+                      ])),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["modelValue"]),
+                Mo.createVNode(button, {
+                  intent: "neutral",
+                  size: "xs",
+                  variant: "stroke",
+                  disabled: !isValidUrl.value,
+                  onClick: applyLink
+                }, {
+                  default: Mo.withCtx(() => _cache[3] || (_cache[3] = [
+                    Mo.createTextVNode(" Set link ")
+                  ])),
+                  _: 1
+                }, 8, ["disabled"])
+              ]),
+              Mo.createElementVNode("div", _hoisted_3, [
+                Mo.createVNode(label, { for: "open-in-new-tab" }, {
+                  default: Mo.withCtx(() => _cache[4] || (_cache[4] = [
+                    Mo.createTextVNode(" Open in new tab ")
+                  ])),
+                  _: 1
+                }),
+                Mo.createVNode(switch_vue_vue_type_style_index_0_lang._sfc_main, {
+                  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") ? (Mo.openBlock(), Mo.createElementBlock("div", _hoisted_4, [
+              Mo.createVNode(linkButton, {
+                href: _ctx.editor.getAttributes("link").href,
+                target: _ctx.editor.getAttributes("link").target
+              }, {
+                default: Mo.withCtx(() => [
+                  Mo.createTextVNode(Mo.toDisplayString(truncateMiddleUrl(_ctx.editor.getAttributes("link").href)), 1)
+                ]),
+                _: 1
+              }, 8, ["href", "target"]),
+              _cache[5] || (_cache[5] = Mo.createElementVNode("div", { class: "divider" }, null, -1)),
+              Mo.createVNode(compactButton, {
+                icon: "i-celeste-edit-line",
+                size: "lg",
+                variant: "ghost",
+                onClick: startEdit
+              }),
+              Mo.createVNode(compactButton, {
+                icon: "i-celeste-delete-bin-line",
+                size: "lg",
+                variant: "ghost",
+                onClick: removeLink
+              })
+            ])) : Mo.createCommentVNode("", true)
+          ], 512)) : Mo.createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["editor"]);
+    };
+  }
+});
+const LinkBubble = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-c63c1d92"]]);
+module.exports = LinkBubble;

package/dist/cjs/link-button.js

@@ -40,5 +40,5 @@ const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
     };
   }
 });
-const linkButton = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-82b3b1ab"]]);
-module.exports = linkButton;
+const LinkButton = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-82b3b1ab"]]);
+module.exports = LinkButton;