@blockslides/extension-bubble-menu-preset 0.1.3 → 0.2.0

package/dist/index.cjs

@@ -21,6 +21,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   BubbleMenuPreset: () => BubbleMenuPreset,
+  DEFAULT_ALIGNMENTS: () => DEFAULT_ALIGNMENTS,
+  DEFAULT_COLOR_PALETTE: () => DEFAULT_COLOR_PALETTE,
+  DEFAULT_FONTS: () => DEFAULT_FONTS,
+  DEFAULT_FONT_SIZES: () => DEFAULT_FONT_SIZES,
+  DEFAULT_HIGHLIGHT_PALETTE: () => DEFAULT_HIGHLIGHT_PALETTE,
+  DEFAULT_ITEMS: () => DEFAULT_ITEMS,
+  buildMenuElement: () => buildMenuElement,
   default: () => BubbleMenuPreset
 });
 module.exports = __toCommonJS(index_exports);
@@ -28,6 +35,7 @@ module.exports = __toCommonJS(index_exports);
 // src/bubble-menu-preset.ts
 var import_core = require("@blockslides/core");
 var import_extension_bubble_menu = require("@blockslides/extension-bubble-menu");
+var import_state = require("@blockslides/pm/state");
 var STYLE_ID = "blockslides-bubble-menu-preset-styles";
 var DEFAULT_ITEMS = [
   "undo",
@@ -51,7 +59,20 @@ var DEFAULT_FONTS = [
   "Courier New",
   "Monaco"
 ];
-var DEFAULT_FONT_SIZES = ["12px", "14px", "16px", "18px", "20px", "24px", "32px", "40px"];
+var DEFAULT_FONT_SIZES = [
+  "12px",
+  "14px",
+  "16px",
+  "18px",
+  "20px",
+  "24px",
+  "32px",
+  "40px",
+  "48px",
+  "56px",
+  "64px",
+  "72px"
+];
 var DEFAULT_ALIGNMENTS = ["left", "center", "right", "justify"];
 var DEFAULT_COLOR_PALETTE = [
   "#000000",
@@ -157,13 +178,19 @@ var BubbleMenuPreset = import_core.Extension.create({
       updateDelay: 250,
       resizeDelay: 60,
       appendTo: void 0,
-      shouldShow: null,
       options: {
         placement: "top",
         strategy: "absolute",
         offset: 8,
         flip: {},
         shift: {}
+      },
+      shouldShow: ({ state, editor }) => {
+        const { selection } = state;
+        const imageSelection = selection instanceof import_state.NodeSelection && ["image", "imageBlock"].includes(selection.node.type.name) || editor.isActive("image") || editor.isActive("imageBlock");
+        if (imageSelection) return true;
+        if ((0, import_core.isTextSelection)(selection) && !selection.empty && !imageSelection) return true;
+        return false;
       }
     };
   },
@@ -220,10 +247,14 @@ function buildMenuElement(editor, opts) {
   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 textToolbar = document.createElement("div");
+  textToolbar.className = "bs-bmp-toolbar";
+  const imageToolbar = document.createElement("div");
+  imageToolbar.className = "bs-bmp-toolbar bs-bmp-toolbar-image";
   let fontFamilySelect = null;
   let fontSizeSelect = null;
+  let imageAlignSelect = null;
+  let imageDisplaySelect = null;
   const normalizeFontFamily = (value) => {
     var _a2;
     if (!value) return value;
@@ -242,6 +273,21 @@ function buildMenuElement(editor, opts) {
       fontSize: styles.fontSize || void 0
     };
   };
+  const isImageSelection = () => {
+    const sel = editor.state.selection;
+    if (sel instanceof import_state.NodeSelection) {
+      return ["image", "imageBlock"].includes(sel.node.type.name);
+    }
+    return editor.isActive("image") || editor.isActive("imageBlock");
+  };
+  const getImageAttrs = () => {
+    const sel = editor.state.selection;
+    if (sel instanceof import_state.NodeSelection && ["image", "imageBlock"].includes(sel.node.type.name)) {
+      return sel.node.attrs || {};
+    }
+    if (editor.isActive("imageBlock")) return editor.getAttributes("imageBlock") || {};
+    return editor.getAttributes("image") || {};
+  };
   const ensureOptionExists = (select, value) => {
     const exists = Array.from(select.options).some((opt) => opt.value === value);
     if (!exists) {
@@ -275,13 +321,16 @@ function buildMenuElement(editor, opts) {
     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"));
+    popovers.forEach((p) => {
+      p.classList.add("bs-bmp-hidden");
+      p.style.display = "none";
+    });
   };
   const runWithFocus = (fn) => {
     if (!fn) return false;
     return !!fn();
   };
-  const addButton = (item, label, onClick, opts2 = {}) => {
+  const addButton = (container, item, label, onClick, opts2 = {}) => {
     const btn = document.createElement("button");
     btn.type = "button";
     btn.className = `bs-bmp-btn bs-bmp-btn-${item}`;
@@ -299,16 +348,16 @@ function buildMenuElement(editor, opts) {
         onClick();
       });
     }
-    toolbar.appendChild(btn);
+    container.appendChild(btn);
   };
   const addUndoRedo = () => {
     const hasUndo = typeof getCommand("undo") === "function";
     const hasRedo = typeof getCommand("redo") === "function";
-    addButton("undo", DEFAULT_LABELS.undo, () => runWithFocus(() => runChainCommand("undo")), {
+    addButton(textToolbar, "undo", DEFAULT_LABELS.undo, () => runWithFocus(() => runChainCommand("undo")), {
       disabled: !hasUndo,
       title: "Undo"
     });
-    addButton("redo", DEFAULT_LABELS.redo, () => runWithFocus(() => runChainCommand("redo")), {
+    addButton(textToolbar, "redo", DEFAULT_LABELS.redo, () => runWithFocus(() => runChainCommand("redo")), {
       disabled: !hasRedo,
       title: "Redo"
     });
@@ -335,7 +384,7 @@ function buildMenuElement(editor, opts) {
     });
     fontFamilySelect = select;
     wrapper.appendChild(select);
-    toolbar.appendChild(wrapper);
+    textToolbar.appendChild(wrapper);
   };
   const addFontSize = () => {
     const hasCommand = typeof getCommand("setFontSize") === "function";
@@ -358,12 +407,13 @@ function buildMenuElement(editor, opts) {
     });
     fontSizeSelect = select;
     wrapper.appendChild(select);
-    toolbar.appendChild(wrapper);
+    textToolbar.appendChild(wrapper);
   };
   const addToggleMark = (item, commandName, title) => {
     const fn = getCommand(commandName);
     const disabled = typeof fn !== "function";
     addButton(
+      textToolbar,
       item,
       DEFAULT_LABELS[item],
       () => {
@@ -398,8 +448,8 @@ function buildMenuElement(editor, opts) {
     });
     popovers.push(popover);
     cleanupFns.push(destroy);
-    toolbar.appendChild(toggle);
-    toolbar.appendChild(popover);
+    textToolbar.appendChild(toggle);
+    textToolbar.appendChild(popover);
   };
   const addHighlightColor = () => {
     const hasToggle = typeof getCommand("toggleHighlight") === "function";
@@ -427,13 +477,14 @@ function buildMenuElement(editor, opts) {
     });
     popovers.push(popover);
     cleanupFns.push(destroy);
-    toolbar.appendChild(toggle);
-    toolbar.appendChild(popover);
+    textToolbar.appendChild(toggle);
+    textToolbar.appendChild(popover);
   };
   const addLink = () => {
     const hasToggle = typeof getCommand("toggleLink") === "function";
     const hasUnset = typeof getCommand("unsetLink") === "function";
     addButton(
+      textToolbar,
       "link",
       DEFAULT_LABELS.link,
       () => {
@@ -479,7 +530,139 @@ function buildMenuElement(editor, opts) {
       (_b = (_a2 = editor.commands).setMeta) == null ? void 0 : _b.call(_a2, "bubbleMenu", "updatePosition");
     });
     wrapper.appendChild(select);
-    toolbar.appendChild(wrapper);
+    textToolbar.appendChild(wrapper);
+  };
+  const addImageControls = () => {
+    const addImageButton = (label, title, handler) => {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "bs-bmp-btn bs-bmp-btn-image";
+      btn.textContent = label;
+      btn.title = title;
+      btn.setAttribute("aria-label", title);
+      btn.addEventListener("click", () => {
+        closePopovers();
+        handler();
+      });
+      imageToolbar.appendChild(btn);
+    };
+    const { popover: replacePopover, show: showReplacePopover } = createReplacePopover({
+      getCurrentValue: () => {
+        var _a2;
+        return (_a2 = getImageAttrs().src) != null ? _a2 : "";
+      },
+      onSave: (next) => {
+        var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
+        const chain = (_a2 = editor.chain) == null ? void 0 : _a2.call(editor);
+        const runner = typeof (chain == null ? void 0 : chain.focus) === "function" ? chain.focus() : chain;
+        if (editor.isActive("imageBlock") && typeof (runner == null ? void 0 : runner.setImageBlockMetadata) === "function") {
+          (_c = (_b = runner.setImageBlockMetadata({ src: next })).run) == null ? void 0 : _c.call(_b);
+        } else if (typeof (runner == null ? void 0 : runner.updateAttributes) === "function") {
+          (_e = (_d = runner.updateAttributes("image", { src: next })).run) == null ? void 0 : _e.call(_d);
+        } else if (typeof (runner == null ? void 0 : runner.replaceImageBlock) === "function") {
+          (_g = (_f = runner.replaceImageBlock({ src: next })).run) == null ? void 0 : _g.call(_f);
+        }
+        (_i = (_h = editor.commands).setMeta) == null ? void 0 : _i.call(_h, "bubbleMenu", "updatePosition");
+      }
+    });
+    popovers.push(replacePopover);
+    imageToolbar.appendChild(replacePopover);
+    addImageButton("Replace", "Replace image", () => {
+      closePopovers();
+      showReplacePopover();
+    });
+    const alignWrapper = document.createElement("div");
+    alignWrapper.className = "bs-bmp-select";
+    const alignSelect = document.createElement("select");
+    alignSelect.className = "bs-bmp-select-input";
+    alignSelect.title = "Align image";
+    ["left", "center", "right"].forEach((alignment) => {
+      const option = document.createElement("option");
+      option.value = alignment;
+      option.textContent = alignment.charAt(0).toUpperCase() + alignment.slice(1);
+      alignSelect.appendChild(option);
+    });
+    alignSelect.addEventListener("change", () => {
+      var _a2, _b, _c, _d, _e, _f, _g;
+      const value = alignSelect.value;
+      const chain = (_a2 = editor.chain) == null ? void 0 : _a2.call(editor);
+      const runner = typeof (chain == null ? void 0 : chain.focus) === "function" ? chain.focus() : chain;
+      if (editor.isActive("imageBlock") && typeof (runner == null ? void 0 : runner.setImageBlockAlignment) === "function") {
+        (_c = (_b = runner.setImageBlockAlignment(value)).run) == null ? void 0 : _c.call(_b);
+      } else if (typeof (runner == null ? void 0 : runner.updateAttributes) === "function") {
+        (_e = (_d = runner.updateAttributes("image", { align: value })).run) == null ? void 0 : _e.call(_d);
+      }
+      (_g = (_f = editor.commands).setMeta) == null ? void 0 : _g.call(_f, "bubbleMenu", "updatePosition");
+    });
+    alignWrapper.appendChild(alignSelect);
+    imageToolbar.appendChild(alignWrapper);
+    imageAlignSelect = alignSelect;
+    const displayWrapper = document.createElement("div");
+    displayWrapper.className = "bs-bmp-select";
+    const displaySelect = document.createElement("select");
+    displaySelect.className = "bs-bmp-select-input";
+    displaySelect.title = "Image fit";
+    ["default", "cover", "contain", "fill"].forEach((mode) => {
+      const option = document.createElement("option");
+      option.value = mode;
+      option.textContent = mode.charAt(0).toUpperCase() + mode.slice(1);
+      displaySelect.appendChild(option);
+    });
+    displaySelect.addEventListener("change", () => {
+      var _a2, _b, _c, _d, _e, _f, _g;
+      const value = displaySelect.value;
+      const chain = (_a2 = editor.chain) == null ? void 0 : _a2.call(editor);
+      const runner = typeof (chain == null ? void 0 : chain.focus) === "function" ? chain.focus() : chain;
+      if (editor.isActive("imageBlock") && typeof (runner == null ? void 0 : runner.setImageBlockLayout) === "function") {
+        if (value === "cover" && typeof (runner == null ? void 0 : runner.setImageBlockFullBleed) === "function") {
+          runner.setImageBlockFullBleed(true);
+        }
+        (_c = (_b = runner.setImageBlockLayout(value === "default" ? "cover" : value)).run) == null ? void 0 : _c.call(_b);
+      } else if (typeof (runner == null ? void 0 : runner.updateAttributes) === "function") {
+        (_e = (_d = runner.updateAttributes("image", { display: value })).run) == null ? void 0 : _e.call(_d);
+      }
+      (_g = (_f = editor.commands).setMeta) == null ? void 0 : _g.call(_f, "bubbleMenu", "updatePosition");
+    });
+    displayWrapper.appendChild(displaySelect);
+    imageToolbar.appendChild(displayWrapper);
+    imageDisplaySelect = displaySelect;
+    addImageButton("Full width", "Set image width to 100%", () => {
+      var _a2, _b, _c, _d, _e, _f, _g;
+      const chain = (_a2 = editor.chain) == null ? void 0 : _a2.call(editor);
+      const runner = typeof (chain == null ? void 0 : chain.focus) === "function" ? chain.focus() : chain;
+      if (editor.isActive("imageBlock") && typeof (runner == null ? void 0 : runner.setImageBlockDimensions) === "function") {
+        (_c = (_b = runner.setImageBlockDimensions({ width: "100%", height: null })).run) == null ? void 0 : _c.call(_b);
+      } else if (typeof (runner == null ? void 0 : runner.updateAttributes) === "function") {
+        (_e = (_d = runner.updateAttributes("image", { width: "100%", height: null })).run) == null ? void 0 : _e.call(_d);
+      }
+      (_g = (_f = editor.commands).setMeta) == null ? void 0 : _g.call(_f, "bubbleMenu", "updatePosition");
+    });
+    const { popover: altPopover, show: showAltPopover } = createAltPopover({
+      getCurrentValue: () => {
+        var _a2;
+        return (_a2 = getImageAttrs().alt) != null ? _a2 : "";
+      },
+      onSave: (next) => {
+        var _a2, _b, _c, _d, _e, _f, _g;
+        const chain = (_a2 = editor.chain) == null ? void 0 : _a2.call(editor);
+        const runner = typeof (chain == null ? void 0 : chain.focus) === "function" ? chain.focus() : chain;
+        if (editor.isActive("imageBlock") && typeof (runner == null ? void 0 : runner.setImageBlockMetadata) === "function") {
+          (_c = (_b = runner.setImageBlockMetadata({ alt: next })).run) == null ? void 0 : _c.call(_b);
+        } else if (typeof (runner == null ? void 0 : runner.updateAttributes) === "function") {
+          (_e = (_d = runner.updateAttributes("image", { alt: next })).run) == null ? void 0 : _e.call(_d);
+        }
+        (_g = (_f = editor.commands).setMeta) == null ? void 0 : _g.call(_f, "bubbleMenu", "updatePosition");
+      }
+    });
+    popovers.push(altPopover);
+    imageToolbar.appendChild(altPopover);
+    addImageButton("Alt", "Set alt text", () => {
+      closePopovers();
+      showAltPopover();
+    });
+    addImageButton("Delete", "Delete image", () => {
+      editor.chain().focus().deleteSelection().run();
+    });
   };
   opts.items.forEach((item) => {
     switch (item) {
@@ -519,8 +702,11 @@ function buildMenuElement(editor, opts) {
         break;
     }
   });
-  element.appendChild(toolbar);
+  addImageControls();
+  element.appendChild(textToolbar);
+  element.appendChild(imageToolbar);
   const syncSelectionState = () => {
+    if (isImageSelection()) return;
     const attrs = editor.getAttributes("textStyle") || {};
     let family = attrs.fontFamily;
     let size = attrs.fontSize;
@@ -532,10 +718,26 @@ function buildMenuElement(editor, opts) {
     setSelectValue(fontFamilySelect, normalizeFontFamily(family));
     setSelectValue(fontSizeSelect, size);
   };
-  const handleSelectionUpdate = () => syncSelectionState();
+  const syncImageState = () => {
+    if (!isImageSelection()) return;
+    const attrs = getImageAttrs();
+    const fitValue = editor.isActive("imageBlock") ? attrs.layout || "cover" : attrs.display || "default";
+    setSelectValue(imageAlignSelect, attrs.align);
+    setSelectValue(imageDisplaySelect, fitValue);
+  };
+  const syncToolbarVisibility = () => {
+    const imageVisible = isImageSelection();
+    textToolbar.style.display = imageVisible ? "none" : "";
+    imageToolbar.style.display = imageVisible ? "" : "none";
+  };
+  const handleSelectionUpdate = () => {
+    syncToolbarVisibility();
+    syncSelectionState();
+    syncImageState();
+  };
   const handleTransaction = ({ transaction }) => {
     if (!transaction || transaction.docChanged || transaction.selectionSet) {
-      syncSelectionState();
+      handleSelectionUpdate();
     }
   };
   editor.on("selectionUpdate", handleSelectionUpdate);
@@ -544,7 +746,9 @@ function buildMenuElement(editor, opts) {
     editor.off("selectionUpdate", handleSelectionUpdate);
     editor.off("transaction", handleTransaction);
   });
+  syncToolbarVisibility();
   syncSelectionState();
+  syncImageState();
   return {
     element,
     cleanup: () => {
@@ -652,6 +856,99 @@ function createColorPopover(args) {
   };
   return { toggle, popover, destroy };
 }
+function createAltPopover(args) {
+  const popover = document.createElement("div");
+  popover.className = "bs-bmp-popover bs-bmp-popover-alt bs-bmp-hidden";
+  const input = document.createElement("input");
+  input.type = "text";
+  input.className = "bs-bmp-text-input";
+  input.placeholder = "Describe the image";
+  popover.appendChild(input);
+  const actions = document.createElement("div");
+  actions.className = "bs-bmp-popover-actions";
+  const cancel = document.createElement("button");
+  cancel.type = "button";
+  cancel.className = "bs-bmp-btn bs-bmp-btn-ghost";
+  cancel.textContent = "Cancel";
+  cancel.addEventListener("click", () => hide());
+  const save = document.createElement("button");
+  save.type = "button";
+  save.className = "bs-bmp-btn";
+  save.textContent = "Save";
+  save.addEventListener("click", () => {
+    args.onSave(input.value.trim());
+    hide();
+  });
+  actions.appendChild(cancel);
+  actions.appendChild(save);
+  popover.appendChild(actions);
+  const hide = () => popover.classList.add("bs-bmp-hidden");
+  const show = () => {
+    input.value = args.getCurrentValue();
+    popover.classList.remove("bs-bmp-hidden");
+    popover.style.display = "";
+    input.focus();
+    input.select();
+  };
+  input.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      save.click();
+    }
+    if (event.key === "Escape") hide();
+  });
+  hide();
+  return { popover, show, hide };
+}
+function createReplacePopover(args) {
+  const popover = document.createElement("div");
+  popover.className = "bs-bmp-popover bs-bmp-popover-replace bs-bmp-hidden";
+  const input = document.createElement("input");
+  input.type = "url";
+  input.className = "bs-bmp-text-input";
+  input.placeholder = "https://...";
+  popover.appendChild(input);
+  const actions = document.createElement("div");
+  actions.className = "bs-bmp-popover-actions";
+  const cancel = document.createElement("button");
+  cancel.type = "button";
+  cancel.className = "bs-bmp-btn bs-bmp-btn-ghost";
+  cancel.textContent = "Cancel";
+  cancel.addEventListener("click", () => hide());
+  const save = document.createElement("button");
+  save.type = "button";
+  save.className = "bs-bmp-btn";
+  save.textContent = "Replace";
+  save.addEventListener("click", () => {
+    const val = input.value.trim();
+    if (!val) return;
+    args.onSave(val);
+    hide();
+  });
+  actions.appendChild(cancel);
+  actions.appendChild(save);
+  popover.appendChild(actions);
+  const hide = () => {
+    popover.classList.add("bs-bmp-hidden");
+    popover.style.display = "none";
+  };
+  const show = () => {
+    input.value = args.getCurrentValue();
+    popover.classList.remove("bs-bmp-hidden");
+    popover.style.display = "";
+    input.focus();
+    input.select();
+  };
+  input.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      save.click();
+    }
+    if (event.key === "Escape") hide();
+  });
+  hide();
+  return { popover, show, hide };
+}
 function injectStyles() {
   if (typeof document === "undefined") return;
   if (document.getElementById(STYLE_ID)) return;
@@ -722,7 +1019,7 @@ function injectStyles() {
   z-index: 999;
 }
 .bs-bmp-hidden {
-  display: none;
+  display: none !important;
 }
 .bs-bmp-popover-header,
 .bs-bmp-popover-footer {
@@ -768,11 +1065,37 @@ function injectStyles() {
   border-radius: 8px;
   background: #ffffff;
 }
+.bs-bmp-popover-alt,
+.bs-bmp-popover-replace {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 260px;
+}
+.bs-bmp-text-input {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  font-size: 13px;
+}
+.bs-bmp-popover-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+}
 `;
   document.head.appendChild(style);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  BubbleMenuPreset
+  BubbleMenuPreset,
+  DEFAULT_ALIGNMENTS,
+  DEFAULT_COLOR_PALETTE,
+  DEFAULT_FONTS,
+  DEFAULT_FONT_SIZES,
+  DEFAULT_HIGHLIGHT_PALETTE,
+  DEFAULT_ITEMS,
+  buildMenuElement
 });
 //# sourceMappingURL=index.cjs.map