@blockslides/extension-bubble-menu-preset 0.1.0

package/dist/index.js

@@ -0,0 +1,676 @@
+// src/bubble-menu-preset.ts
+import { Extension } from "@blockslides/core";
+import {
+  BubbleMenuPlugin
+} from "@blockslides/extension-bubble-menu";
+var STYLE_ID = "blockslides-bubble-menu-preset-styles";
+var DEFAULT_ITEMS = [
+  "undo",
+  "redo",
+  "fontFamily",
+  "fontSize",
+  "bold",
+  "italic",
+  "underline",
+  "textColor",
+  "highlightColor",
+  "link",
+  "align"
+];
+var DEFAULT_FONTS = [
+  "Inter",
+  "Arial",
+  "Helvetica",
+  "Times New Roman",
+  "Georgia",
+  "Courier New",
+  "Monaco"
+];
+var DEFAULT_FONT_SIZES = ["12px", "14px", "16px", "18px", "20px", "24px", "32px", "40px"];
+var DEFAULT_ALIGNMENTS = ["left", "center", "right", "justify"];
+var DEFAULT_COLOR_PALETTE = [
+  "#000000",
+  "#434343",
+  "#666666",
+  "#999999",
+  "#b7b7b7",
+  "#cccccc",
+  "#d9d9d9",
+  "#efefef",
+  "#f3f3f3",
+  "#ffffff",
+  "#e60000",
+  "#ff0000",
+  "#ff9900",
+  "#ffff00",
+  "#00ff00",
+  "#00ffff",
+  "#4a86e8",
+  "#0000ff",
+  "#9900ff",
+  "#ff00ff",
+  "#f4cccc",
+  "#fce5cd",
+  "#fff2cc",
+  "#d9ead3",
+  "#d0e0e3",
+  "#cfe2f3",
+  "#d9d2e9",
+  "#ead1dc",
+  "#f9cb9c",
+  "#ffe599",
+  "#b6d7a8",
+  "#a2c4c9",
+  "#9fc5e8",
+  "#b4a7d6",
+  "#d5a6bd",
+  "#e06666",
+  "#f6b26b",
+  "#ffd966",
+  "#93c47d",
+  "#76a5af",
+  "#6fa8dc",
+  "#8e7cc3",
+  "#c27ba0",
+  "#cc0000",
+  "#e69138",
+  "#f1c232",
+  "#6aa84f",
+  "#45818e",
+  "#3d85c6",
+  "#674ea7",
+  "#a64d79",
+  "#990000",
+  "#b45f06",
+  "#bf9000",
+  "#38761d",
+  "#134f5c",
+  "#0b5394",
+  "#351c75",
+  "#741b47",
+  "#660000",
+  "#783f04",
+  "#7f6000",
+  "#274e13",
+  "#0c343d",
+  "#073763",
+  "#20124d",
+  "#4c1130"
+];
+var DEFAULT_HIGHLIGHT_PALETTE = DEFAULT_COLOR_PALETTE;
+var DEFAULT_LABELS = {
+  undo: "Undo",
+  redo: "Redo",
+  fontFamily: "Font",
+  fontSize: "Size",
+  bold: "B",
+  italic: "I",
+  underline: "U",
+  textColor: "A",
+  highlightColor: "Hi",
+  link: "Link",
+  align: "Align"
+};
+var BubbleMenuPreset = Extension.create({
+  name: "bubbleMenuPreset",
+  addOptions() {
+    return {
+      element: null,
+      items: DEFAULT_ITEMS,
+      className: "",
+      injectStyles: true,
+      textColors: DEFAULT_COLOR_PALETTE,
+      highlightColors: DEFAULT_HIGHLIGHT_PALETTE,
+      fonts: DEFAULT_FONTS,
+      fontSizes: DEFAULT_FONT_SIZES,
+      alignments: DEFAULT_ALIGNMENTS,
+      pluginKey: "bubbleMenuPreset",
+      updateDelay: 250,
+      resizeDelay: 60,
+      appendTo: void 0,
+      shouldShow: null,
+      options: {
+        placement: "top",
+        strategy: "absolute",
+        offset: 8,
+        flip: {},
+        shift: {}
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    const options = this.options;
+    const editor = this.editor;
+    const usingCustomElement = !!options.element;
+    const { element, cleanup } = options.element && typeof document !== "undefined" ? { element: options.element, cleanup: () => {
+    } } : buildMenuElement(editor, {
+      items: (_a = options.items) != null ? _a : DEFAULT_ITEMS,
+      className: (_b = options.className) != null ? _b : "",
+      injectStyles: options.injectStyles !== false,
+      textColors: (_c = options.textColors) != null ? _c : DEFAULT_COLOR_PALETTE,
+      highlightColors: (_d = options.highlightColors) != null ? _d : DEFAULT_HIGHLIGHT_PALETTE,
+      fonts: (_e = options.fonts) != null ? _e : DEFAULT_FONTS,
+      fontSizes: (_f = options.fontSizes) != null ? _f : DEFAULT_FONT_SIZES,
+      alignments: (_g = options.alignments) != null ? _g : DEFAULT_ALIGNMENTS
+    });
+    this.storage.element = element;
+    this.storage.cleanup = cleanup;
+    this.storage.usingCustomElement = usingCustomElement;
+    const pluginOptions = {
+      pluginKey: (_h = options.pluginKey) != null ? _h : "bubbleMenuPreset",
+      editor,
+      element,
+      updateDelay: options.updateDelay,
+      resizeDelay: options.resizeDelay,
+      appendTo: options.appendTo,
+      options: options.options,
+      getReferencedVirtualElement: options.getReferencedVirtualElement,
+      shouldShow: (_i = options.shouldShow) != null ? _i : void 0
+    };
+    return [BubbleMenuPlugin(pluginOptions)];
+  },
+  onDestroy() {
+    const el = this.storage.element;
+    const cleanup = this.storage.cleanup;
+    const usingCustomElement = this.storage.usingCustomElement;
+    if (cleanup) {
+      cleanup();
+    }
+    if (el && !usingCustomElement) {
+      el.remove();
+    }
+  }
+});
+function buildMenuElement(editor, opts) {
+  var _a;
+  if (opts.injectStyles) {
+    injectStyles();
+  }
+  const element = document.createElement("div");
+  element.className = `bs-bubble-menu-preset ${(_a = opts.className) != null ? _a : ""}`.trim();
+  element.setAttribute("data-bubble-menu-preset", "true");
+  element.tabIndex = 0;
+  const toolbar = document.createElement("div");
+  toolbar.className = "bs-bmp-toolbar";
+  const popovers = [];
+  const cleanupFns = [];
+  const getCommand = (name) => {
+    var _a2;
+    return (_a2 = editor.commands) == null ? void 0 : _a2[name];
+  };
+  const runChainCommand = (name, ...args) => {
+    var _a2, _b, _c, _d;
+    const chain = (_a2 = editor.chain) == null ? void 0 : _a2.call(editor);
+    if (!chain || typeof chain[name] !== "function") return false;
+    const runner = typeof chain.focus === "function" ? chain.focus() : chain;
+    if (typeof runner[name] !== "function") return false;
+    return (_d = (_c = (_b = runner[name](...args)).run) == null ? void 0 : _c.call(_b)) != null ? _d : false;
+  };
+  const closePopovers = () => {
+    popovers.forEach((p) => p.classList.add("bs-bmp-hidden"));
+  };
+  const runWithFocus = (fn) => {
+    if (!fn) return false;
+    return !!fn();
+  };
+  const addButton = (item, label, onClick, opts2 = {}) => {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = `bs-bmp-btn bs-bmp-btn-${item}`;
+    btn.textContent = label;
+    if (opts2.title) {
+      btn.title = opts2.title;
+      btn.setAttribute("aria-label", opts2.title);
+    }
+    if (opts2.disabled) {
+      btn.disabled = true;
+      btn.classList.add("bs-bmp-disabled");
+    } else {
+      btn.addEventListener("click", () => {
+        closePopovers();
+        onClick();
+      });
+    }
+    toolbar.appendChild(btn);
+  };
+  const addUndoRedo = () => {
+    const hasUndo = typeof getCommand("undo") === "function";
+    const hasRedo = typeof getCommand("redo") === "function";
+    addButton("undo", DEFAULT_LABELS.undo, () => runWithFocus(() => runChainCommand("undo")), {
+      disabled: !hasUndo,
+      title: "Undo"
+    });
+    addButton("redo", DEFAULT_LABELS.redo, () => runWithFocus(() => runChainCommand("redo")), {
+      disabled: !hasRedo,
+      title: "Redo"
+    });
+  };
+  const addFontFamily = () => {
+    const hasCommand = typeof getCommand("setFontFamily") === "function";
+    const wrapper = document.createElement("div");
+    wrapper.className = "bs-bmp-select";
+    const select = document.createElement("select");
+    select.className = "bs-bmp-select-input";
+    select.title = "Font family";
+    opts.fonts.forEach((font) => {
+      const option = document.createElement("option");
+      option.value = font;
+      option.textContent = font;
+      option.style.fontFamily = font;
+      select.appendChild(option);
+    });
+    select.disabled = !hasCommand;
+    select.addEventListener("change", () => {
+      var _a2, _b;
+      runWithFocus(() => runChainCommand("setFontFamily", select.value));
+      (_b = (_a2 = editor.commands).setMeta) == null ? void 0 : _b.call(_a2, "bubbleMenu", "updatePosition");
+    });
+    wrapper.appendChild(select);
+    toolbar.appendChild(wrapper);
+  };
+  const addFontSize = () => {
+    const hasCommand = typeof getCommand("setFontSize") === "function";
+    const wrapper = document.createElement("div");
+    wrapper.className = "bs-bmp-select";
+    const select = document.createElement("select");
+    select.className = "bs-bmp-select-input";
+    select.title = "Font size";
+    opts.fontSizes.forEach((size) => {
+      const option = document.createElement("option");
+      option.value = size;
+      option.textContent = size;
+      select.appendChild(option);
+    });
+    select.disabled = !hasCommand;
+    select.addEventListener("change", () => {
+      var _a2, _b;
+      runWithFocus(() => runChainCommand("setFontSize", select.value));
+      (_b = (_a2 = editor.commands).setMeta) == null ? void 0 : _b.call(_a2, "bubbleMenu", "updatePosition");
+    });
+    wrapper.appendChild(select);
+    toolbar.appendChild(wrapper);
+  };
+  const addToggleMark = (item, commandName, title) => {
+    const fn = getCommand(commandName);
+    const disabled = typeof fn !== "function";
+    addButton(
+      item,
+      DEFAULT_LABELS[item],
+      () => {
+        runWithFocus(() => runChainCommand(commandName));
+      },
+      { disabled, title }
+    );
+  };
+  const addTextColor = () => {
+    const hasSet = typeof getCommand("setColor") === "function";
+    const hasUnset = typeof getCommand("unsetColor") === "function";
+    const { popover, toggle, destroy } = createColorPopover({
+      label: DEFAULT_LABELS.textColor,
+      title: "Text color",
+      colors: opts.textColors,
+      onSelect: (color) => {
+        var _a2, _b;
+        if (!hasSet) return;
+        runWithFocus(() => runChainCommand("setColor", color));
+        (_b = (_a2 = editor.commands).setMeta) == null ? void 0 : _b.call(_a2, "bubbleMenu", "updatePosition");
+      },
+      onClear: () => {
+        var _a2, _b;
+        if (!hasUnset) return;
+        runWithFocus(() => runChainCommand("unsetColor"));
+        (_b = (_a2 = editor.commands).setMeta) == null ? void 0 : _b.call(_a2, "bubbleMenu", "updatePosition");
+      },
+      onToggle: () => {
+        var _a2, _b;
+        return (_b = (_a2 = editor.commands).setMeta) == null ? void 0 : _b.call(_a2, "bubbleMenu", "updatePosition");
+      }
+    });
+    popovers.push(popover);
+    cleanupFns.push(destroy);
+    toolbar.appendChild(toggle);
+    toolbar.appendChild(popover);
+  };
+  const addHighlightColor = () => {
+    const hasToggle = typeof getCommand("toggleHighlight") === "function";
+    const hasUnset = typeof getCommand("unsetHighlight") === "function";
+    const { popover, toggle, destroy } = createColorPopover({
+      label: DEFAULT_LABELS.highlightColor,
+      title: "Highlight color",
+      colors: opts.highlightColors,
+      onSelect: (color) => {
+        var _a2, _b;
+        if (!hasToggle) return;
+        runWithFocus(() => runChainCommand("toggleHighlight", { color }));
+        (_b = (_a2 = editor.commands).setMeta) == null ? void 0 : _b.call(_a2, "bubbleMenu", "updatePosition");
+      },
+      onClear: () => {
+        var _a2, _b;
+        if (!hasUnset) return;
+        runWithFocus(() => runChainCommand("unsetHighlight"));
+        (_b = (_a2 = editor.commands).setMeta) == null ? void 0 : _b.call(_a2, "bubbleMenu", "updatePosition");
+      },
+      onToggle: () => {
+        var _a2, _b;
+        return (_b = (_a2 = editor.commands).setMeta) == null ? void 0 : _b.call(_a2, "bubbleMenu", "updatePosition");
+      }
+    });
+    popovers.push(popover);
+    cleanupFns.push(destroy);
+    toolbar.appendChild(toggle);
+    toolbar.appendChild(popover);
+  };
+  const addLink = () => {
+    const hasToggle = typeof getCommand("toggleLink") === "function";
+    const hasUnset = typeof getCommand("unsetLink") === "function";
+    addButton(
+      "link",
+      DEFAULT_LABELS.link,
+      () => {
+        var _a2, _b;
+        const currentHref = (_b = (_a2 = editor.getAttributes("link")) == null ? void 0 : _a2.href) != null ? _b : "";
+        const href = window.prompt("Link URL", currentHref);
+        if (href === null) return;
+        if (!href) {
+          if (hasUnset) {
+            runWithFocus(() => runChainCommand("unsetLink"));
+          }
+          return;
+        }
+        if (hasToggle) {
+          runWithFocus(() => runChainCommand("toggleLink", { href }));
+        }
+      },
+      { disabled: !hasToggle && !hasUnset, title: "Insert link" }
+    );
+  };
+  const addAlign = () => {
+    const hasSet = typeof getCommand("setTextAlign") === "function";
+    const hasToggle = typeof getCommand("toggleTextAlign") === "function";
+    const wrapper = document.createElement("div");
+    wrapper.className = "bs-bmp-select";
+    const select = document.createElement("select");
+    select.className = "bs-bmp-select-input";
+    select.title = "Align";
+    opts.alignments.forEach((alignment) => {
+      const option = document.createElement("option");
+      option.value = alignment;
+      option.textContent = alignment.charAt(0).toUpperCase() + alignment.slice(1);
+      select.appendChild(option);
+    });
+    select.disabled = !hasSet && !hasToggle;
+    select.addEventListener("change", () => {
+      var _a2, _b;
+      if (hasToggle) {
+        runWithFocus(() => runChainCommand("toggleTextAlign", select.value));
+      } else if (hasSet) {
+        runWithFocus(() => runChainCommand("setTextAlign", select.value));
+      }
+      (_b = (_a2 = editor.commands).setMeta) == null ? void 0 : _b.call(_a2, "bubbleMenu", "updatePosition");
+    });
+    wrapper.appendChild(select);
+    toolbar.appendChild(wrapper);
+  };
+  opts.items.forEach((item) => {
+    switch (item) {
+      case "undo":
+        addUndoRedo();
+        break;
+      case "redo":
+        break;
+      case "fontFamily":
+        addFontFamily();
+        break;
+      case "fontSize":
+        addFontSize();
+        break;
+      case "bold":
+        addToggleMark("bold", "toggleBold", "Bold");
+        break;
+      case "italic":
+        addToggleMark("italic", "toggleItalic", "Italic");
+        break;
+      case "underline":
+        addToggleMark("underline", "toggleUnderline", "Underline");
+        break;
+      case "textColor":
+        addTextColor();
+        break;
+      case "highlightColor":
+        addHighlightColor();
+        break;
+      case "link":
+        addLink();
+        break;
+      case "align":
+        addAlign();
+        break;
+      default:
+        break;
+    }
+  });
+  element.appendChild(toolbar);
+  return {
+    element,
+    cleanup: () => {
+      popovers.forEach((p) => p.remove());
+      cleanupFns.forEach((fn) => fn());
+      element.replaceChildren();
+    }
+  };
+}
+function createColorPopover(args) {
+  const toggle = document.createElement("button");
+  toggle.type = "button";
+  toggle.className = "bs-bmp-btn bs-bmp-btn-color";
+  toggle.textContent = args.label;
+  toggle.title = args.title;
+  toggle.setAttribute("aria-expanded", "false");
+  const popover = document.createElement("div");
+  popover.className = "bs-bmp-popover bs-bmp-hidden";
+  popover.setAttribute("role", "menu");
+  const header = document.createElement("div");
+  header.className = "bs-bmp-popover-header";
+  const noneBtn = document.createElement("button");
+  noneBtn.type = "button";
+  noneBtn.className = "bs-bmp-btn bs-bmp-btn-ghost";
+  noneBtn.textContent = "None";
+  noneBtn.addEventListener("click", () => {
+    args.onClear();
+    hide();
+  });
+  header.appendChild(noneBtn);
+  popover.appendChild(header);
+  const grid = document.createElement("div");
+  grid.className = "bs-bmp-color-grid";
+  const columns = 10;
+  grid.style.setProperty("--bs-bmp-grid-columns", String(columns));
+  args.colors.forEach((color) => {
+    const swatch = document.createElement("button");
+    swatch.type = "button";
+    swatch.className = "bs-bmp-color-swatch";
+    swatch.style.backgroundColor = color;
+    swatch.setAttribute("aria-label", color);
+    swatch.addEventListener("click", (event) => {
+      event.stopPropagation();
+      args.onSelect(color);
+      hide();
+    });
+    grid.appendChild(swatch);
+  });
+  popover.appendChild(grid);
+  const customRow = document.createElement("div");
+  customRow.className = "bs-bmp-popover-footer";
+  const customLabel = document.createElement("span");
+  customLabel.textContent = "Custom";
+  const customInput = document.createElement("input");
+  customInput.type = "color";
+  customInput.className = "bs-bmp-color-input";
+  customInput.addEventListener("input", () => {
+    args.onSelect(customInput.value);
+  });
+  customRow.appendChild(customLabel);
+  customRow.appendChild(customInput);
+  popover.appendChild(customRow);
+  const hide = () => {
+    var _a;
+    popover.classList.add("bs-bmp-hidden");
+    toggle.setAttribute("aria-expanded", "false");
+    (_a = args.onToggle) == null ? void 0 : _a.call(args);
+  };
+  const show = () => {
+    var _a;
+    popover.classList.remove("bs-bmp-hidden");
+    toggle.setAttribute("aria-expanded", "true");
+    (_a = args.onToggle) == null ? void 0 : _a.call(args);
+  };
+  const toggleHandler = (event) => {
+    event.stopPropagation();
+    if (popover.classList.contains("bs-bmp-hidden")) {
+      show();
+    } else {
+      hide();
+    }
+  };
+  toggle.addEventListener("click", toggleHandler);
+  const outsideHandler = (event) => {
+    if (popover.contains(event.target) || toggle.contains(event.target)) {
+      return;
+    }
+    hide();
+  };
+  document.addEventListener(
+    "click",
+    outsideHandler,
+    { capture: true }
+  );
+  const destroy = () => {
+    document.removeEventListener("click", outsideHandler, { capture: true });
+    toggle.removeEventListener("click", toggleHandler);
+  };
+  return { toggle, popover, destroy };
+}
+function injectStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+.bs-bubble-menu-preset {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  padding: 8px 10px;
+  border-radius: 20%;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
+  color: #111827;
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+.bs-bmp-toolbar {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.bs-bmp-btn {
+  border: none;
+  background: transparent;
+  color: inherit;
+  padding: 6px 8px;
+  border-radius: 12px;
+  cursor: pointer;
+  font-size: 13px;
+  line-height: 1;
+  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
+}
+.bs-bmp-btn:hover {
+  background: #f3f4f6;
+}
+.bs-bmp-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.bs-bmp-select {
+  display: inline-flex;
+  align-items: center;
+}
+.bs-bmp-select-input {
+  border: 1px solid #e5e7eb;
+  background: #ffffff;
+  color: inherit;
+  padding: 6px 8px;
+  border-radius: 12px;
+  font-size: 13px;
+  outline: none;
+}
+.bs-bmp-select-input:focus {
+  border-color: #4f46e5;
+  box-shadow: 0 0 0 2px rgba(79,70,229,0.15);
+}
+.bs-bmp-popover {
+  position: absolute;
+  margin-top: 6px;
+  padding: 10px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
+  z-index: 999;
+}
+.bs-bmp-hidden {
+  display: none;
+}
+.bs-bmp-popover-header,
+.bs-bmp-popover-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+.bs-bmp-btn-ghost {
+  background: transparent;
+  border: none;
+  color: inherit;
+  padding: 4px 6px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.bs-bmp-btn-ghost:hover {
+  background: #f3f4f6;
+}
+.bs-bmp-color-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--bs-bmp-grid-columns, 10), 22px);
+  gap: 4px;
+  margin-bottom: 8px;
+}
+.bs-bmp-color-swatch {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 1px solid #e5e7eb;
+  cursor: pointer;
+  padding: 0;
+}
+.bs-bmp-color-swatch:hover {
+  outline: 2px solid #4f46e5;
+  outline-offset: 2px;
+}
+.bs-bmp-color-input {
+  width: 32px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #ffffff;
+}
+`;
+  document.head.appendChild(style);
+}
+export {
+  BubbleMenuPreset,
+  BubbleMenuPreset as default
+};
+//# sourceMappingURL=index.js.map