@bendyline/squisq-editor-react 2.13.3 → 2.13.5

package/dist/{chunk-D77UNB6T.js → chunk-WEEHXZUY.js}

@@ -6521,6 +6521,7 @@ import {
   deriveTemplateInputs,
   extractBodyPlainText,
   extractEmbeddedVideos,
+  extractHostedVideos,
   extractBlockquoteText,
   extractImages,
   extractListItems,
@@ -6658,11 +6659,7 @@ function buildTemplatePreviewInputs(templateName, block, headingText2, bodyText,
     }
     case "leftFeature":
     case "rightFeature": {
-      const hasFeature = hasText(provided.imageSrc) || extractImages(contents, 1).length > 0 || extractEmbeddedVideos(contents, 1).length > 0 || (contents ?? []).some(
-        (node2) => node2.type === "code" && isPictureFence(node2) && !!node2.value.trim()
-      ) || ["diagram", "tree", "timeline"].some(
-        (template) => !!deriveTemplateInputs(template, headingText2, contents, { placeholders: false })
-      );
+      const hasFeature = hasText(provided.imageSrc) || hasVisualFeature(contents, headingText2);
       return {
         inputs: hasFeature ? deriveTemplateInputs(templateName, headingText2, contents, { placeholders: false }) ?? {
           title: headingText2,
@@ -6671,6 +6668,15 @@ function buildTemplatePreviewInputs(templateName, block, headingText2, bodyText,
         ...hasFeature ? {} : { warning: "No visual feature found in this block" }
       };
     }
+    case "topFeature":
+    case "bottomFeature":
+    case "mediaOnly": {
+      const hasFeature = hasVisualFeature(contents, headingText2);
+      return {
+        inputs: hasFeature ? { title: headingText2 } : null,
+        ...hasFeature ? {} : { warning: "No image or video found in this block" }
+      };
+    }
     case "imageWithCaption":
     case "photoGrid": {
       const imageCount = extractImages(contents, templateName === "photoGrid" ? 2 : 1).length;
@@ -6742,6 +6748,13 @@ function buildTemplatePreviewInputs(templateName, block, headingText2, bodyText,
       };
   }
 }
+function hasVisualFeature(contents, headingText2) {
+  return extractImages(contents, 1).length > 0 || extractEmbeddedVideos(contents, 1).length > 0 || extractHostedVideos(contents, 1).length > 0 || (contents ?? []).some(
+    (node2) => node2.type === "code" && isPictureFence(node2) && !!node2.value.trim()
+  ) || ["diagram", "tree", "timeline"].some(
+    (template) => !!deriveTemplateInputs(template, headingText2, contents, { placeholders: false })
+  );
+}
 function derivePullQuoteInputs(block, headingText2, bodyText) {
   const image = extractImages(block.contents, 1)[0];
   const text = extractBlockquoteText(block.contents) || bodyText || headingText2;
@@ -7087,6 +7100,39 @@ var TEMPLATE_ENTRIES = [
       /* @__PURE__ */ jsx18("rect", { x: 3, y: 27, width: 16, height: 2.5, rx: 1, fill: F1, opacity: 0.6 })
     ] })
   },
+  {
+    name: "topFeature",
+    label: "Top Feature",
+    description: "Image or video across the full width at the top, title and body text below.",
+    icon: /* @__PURE__ */ jsxs14(TemplateIcon, { children: [
+      /* @__PURE__ */ jsx18("rect", { x: 3, y: 3, width: 50, height: 19, rx: 2, fill: F2, opacity: 0.55 }),
+      /* @__PURE__ */ jsx18("polygon", { points: "25,8.5 25,16.5 32,12.5", fill: "white", opacity: 0.5 }),
+      /* @__PURE__ */ jsx18("rect", { x: 3, y: 25, width: 22, height: 4, rx: 1, fill: FA }),
+      /* @__PURE__ */ jsx18("rect", { x: 3, y: 31, width: 48, height: 2.5, rx: 1, fill: F1 }),
+      /* @__PURE__ */ jsx18("rect", { x: 3, y: 35.5, width: 34, height: 2.5, rx: 1, fill: F1, opacity: 0.75 })
+    ] })
+  },
+  {
+    name: "bottomFeature",
+    label: "Bottom Feature",
+    description: "Title and body text at the top, image or video across the full width below.",
+    icon: /* @__PURE__ */ jsxs14(TemplateIcon, { children: [
+      /* @__PURE__ */ jsx18("rect", { x: 3, y: 3, width: 22, height: 4, rx: 1, fill: FA }),
+      /* @__PURE__ */ jsx18("rect", { x: 3, y: 9, width: 48, height: 2.5, rx: 1, fill: F1 }),
+      /* @__PURE__ */ jsx18("rect", { x: 3, y: 13.5, width: 34, height: 2.5, rx: 1, fill: F1, opacity: 0.75 }),
+      /* @__PURE__ */ jsx18("rect", { x: 3, y: 18, width: 50, height: 19, rx: 2, fill: F2, opacity: 0.55 }),
+      /* @__PURE__ */ jsx18("polygon", { points: "25,23.5 25,31.5 32,27.5", fill: "white", opacity: 0.5 })
+    ] })
+  },
+  {
+    name: "mediaOnly",
+    label: "Media Only",
+    description: "The image or video fills the slide, with no title, text or caption.",
+    icon: /* @__PURE__ */ jsxs14(TemplateIcon, { children: [
+      /* @__PURE__ */ jsx18("rect", { x: 3, y: 3, width: 50, height: 34, rx: 2, fill: F2, opacity: 0.55 }),
+      /* @__PURE__ */ jsx18("polygon", { points: "24,14 24,26 34,20", fill: "white", opacity: 0.5 })
+    ] })
+  },
   {
     name: "map",
     label: "Map",
@@ -8789,7 +8835,6 @@ var BUTTONS = [
 var MEDIA_BUTTONS = BUTTONS.filter((b) => b.group === "media");
 var FILE_STORING_BUTTONS = /* @__PURE__ */ new Set(["image", "file"]);
 var CONVERT_BUTTONS = MEDIA_BUTTONS.filter((b) => b.id === "table" || b.id === "tasklist");
-var INSERT_MENU_WIDTH = 200;
 var CODE_SNIPPET_MENU_WIDTH = 220;
 var MERMAID_TYPE_MENU_WIDTH = 520;
 var CHART_TYPE_MENU_WIDTH = 360;
@@ -20529,7 +20574,7 @@ function Toolbar({
   const codeSnippetMenuRef = useRef36(null);
   const mermaidTypeMenuRef = useRef36(null);
   const chartTypeMenuRef = useRef36(null);
-  const insertMenuTriggerRectRef = useRef36(null);
+  const insertMenuTriggerRef = useRef36(null);
   const [insertMenuAnchor, setInsertMenuAnchor] = useState40(null);
   const [codeSnippetMenuAnchor, setCodeSnippetMenuAnchor] = useState40(null);
   const [mermaidTypeMenuAnchor, setMermaidTypeMenuAnchor] = useState40(null);
@@ -20539,15 +20584,8 @@ function Toolbar({
     if (!btn) return;
     insertMenuReturnFocusRef.current = trigger ? overflowTriggerRef.current : insertMenuButtonRef.current;
     const rect = btn.getBoundingClientRect();
-    const gap = 4;
-    const margin = 8;
-    const vw = window.innerWidth;
-    let left = rect.left;
-    if (left + INSERT_MENU_WIDTH + margin > vw) {
-      left = Math.max(margin, rect.right - INSERT_MENU_WIDTH);
-    }
-    insertMenuTriggerRectRef.current = rect;
-    setInsertMenuAnchor({ top: rect.bottom + gap, left, placement: "down" });
+    insertMenuTriggerRef.current = { element: btn, rect };
+    setInsertMenuAnchor({ top: rect.bottom + 4, left: rect.left, placement: "down" });
     setCodeSnippetMenuAnchor(null);
     setMermaidTypeMenuAnchor(null);
     setChartTypeMenuAnchor(null);
@@ -20601,7 +20639,7 @@ function Toolbar({
     setMermaidTypeMenuAnchor(null);
   }, []);
   const closeInsertMenu = useCallback32(() => {
-    insertMenuTriggerRectRef.current = null;
+    insertMenuTriggerRef.current = null;
     setInsertMenuAnchor(null);
     setCodeSnippetMenuAnchor(null);
     setMermaidTypeMenuAnchor(null);
@@ -20687,23 +20725,39 @@ function Toolbar({
   useLayoutEffect9(() => {
     if (!insertMenuOpen) return;
     const menu = insertMenuRef.current;
-    const triggerRect = insertMenuTriggerRectRef.current;
-    if (!menu || !triggerRect) return;
-    const gap = 4;
-    const margin = 8;
-    const spaceBelow = Math.max(0, window.innerHeight - triggerRect.bottom - gap - margin);
-    const spaceAbove = Math.max(0, triggerRect.top - gap - margin);
-    const naturalHeight = Math.max(menu.scrollHeight, menu.getBoundingClientRect().height);
-    const placement = naturalHeight > spaceBelow && spaceAbove > spaceBelow ? "up" : "down";
-    const maxHeight = placement === "up" ? spaceAbove : spaceBelow;
-    const visibleHeight = Math.min(naturalHeight, maxHeight);
-    const top = placement === "up" ? Math.max(margin, triggerRect.top - gap - visibleHeight) : triggerRect.bottom + gap;
-    setInsertMenuAnchor((current) => {
-      if (!current || current.top === top && current.maxHeight === maxHeight && current.placement === placement) {
-        return current;
-      }
-      return { ...current, top, maxHeight, placement };
-    });
+    const trigger = insertMenuTriggerRef.current;
+    if (!menu || !trigger) return;
+    const positionMenu = () => {
+      const liveRect = trigger.element.getBoundingClientRect();
+      const triggerRect = trigger.element.isConnected && liveRect.width > 0 ? liveRect : trigger.rect;
+      const gap = 4;
+      const margin = 8;
+      const menuRect = menu.getBoundingClientRect();
+      const rightEdge = window.innerWidth - margin;
+      const preferredLeft = triggerRect.left + menuRect.width <= rightEdge ? triggerRect.left : triggerRect.right - menuRect.width;
+      const left = Math.max(margin, Math.min(preferredLeft, rightEdge - menuRect.width));
+      const spaceBelow = Math.max(0, window.innerHeight - triggerRect.bottom - gap - margin);
+      const spaceAbove = Math.max(0, triggerRect.top - gap - margin);
+      const naturalHeight = Math.max(menu.scrollHeight, menuRect.height);
+      const placement = naturalHeight > spaceBelow && spaceAbove > spaceBelow ? "up" : "down";
+      const maxHeight = placement === "up" ? spaceAbove : spaceBelow;
+      const visibleHeight = Math.min(naturalHeight, maxHeight);
+      const top = placement === "up" ? Math.max(margin, triggerRect.top - gap - visibleHeight) : triggerRect.bottom + gap;
+      setInsertMenuAnchor((current) => {
+        if (!current || current.left === left && current.top === top && current.maxHeight === maxHeight && current.placement === placement) {
+          return current;
+        }
+        return { ...current, left, top, maxHeight, placement };
+      });
+    };
+    positionMenu();
+    const observer = new ResizeObserver(positionMenu);
+    observer.observe(menu);
+    window.addEventListener("resize", positionMenu);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", positionMenu);
+    };
   }, [insertMenuOpen]);
   const [, forceUpdate] = useReducer2((c) => c + 1, 0);
   useEffect31(() => {
@@ -35324,6 +35378,35 @@ function looksLikeMarkdown(text) {
 }
 
 // src/wysiwygImageUpload.ts
+function isPlayableMediaFile(file) {
+  const kind = squisqMediaKind(mediaMimeType(file));
+  return kind === "video" || kind === "audio";
+}
+async function uploadAndInsertMediaPlayers(view, files, mediaProvider, onMediaUploaded) {
+  const paths = await processMediaFiles(files, mediaProvider);
+  if (!paths.some(Boolean)) return;
+  onMediaUploaded?.();
+  const { schema } = view.state;
+  const players = [];
+  for (const [index2, path] of paths.entries()) {
+    if (!path) continue;
+    const spec = squisqMediaNode(fileReference(path, files[index2].name, files[index2].type));
+    const nodeType = spec ? schema.nodes[spec.type] : void 0;
+    if (spec && nodeType) players.push(nodeType.create(spec.attrs));
+  }
+  if (players.length > 0) insertTopLevelNodes(view, players);
+}
+function insertTopLevelNodes(view, nodes) {
+  const { state } = view;
+  const { $from } = state.selection;
+  if ($from.depth < 1) {
+    view.dispatch(state.tr.insert(state.doc.content.size, nodes).scrollIntoView());
+    return;
+  }
+  const block = $from.node(1);
+  const tr = block.type.name === "paragraph" && block.content.size === 0 ? state.tr.replaceWith($from.before(1), $from.after(1), nodes) : state.tr.insert($from.after(1), nodes);
+  view.dispatch(tr.scrollIntoView());
+}
 async function uploadAndInsertImages(view, files, mediaProvider, onMediaUploaded) {
   const placeholders = files.map(() => `squisq-upload:${uniquePasteToken()}`);
   const imageType = view.state.schema.nodes.image;
@@ -35900,47 +35983,23 @@ function WysiwygEditor({
         view.pasteHTML(html);
         return true;
       },
-      // When image files are dropped onto the editor, upload them via the
-      // MediaProvider and insert <img> nodes referencing the relative paths.
-      // Drags from the MediaBin can also insert existing image, video, audio,
-      // or generic-file references without uploading them again.
-      // Falls through to default handling for non-image drops or when no
-      // MediaProvider is available.
+      // When image, video or audio files are dropped onto the editor, upload
+      // them via the MediaProvider and insert image nodes / players
+      // referencing the relative paths. Drags from the MediaBin can also
+      // insert existing image, video, audio, or generic-file references
+      // without uploading them again. Falls through to default handling for
+      // other drops or when no MediaProvider is available.
       handleDrop: (view, event, _slice, moved) => {
         const dt = event.dataTransfer;
         if (!dt) return false;
         if (moved) return false;
-        const squisqRaw = dt.getData(SQUISQ_MEDIA_MIME);
-        if (squisqRaw) {
-          const payload = parseSquisqMediaPayload(squisqRaw);
-          if (payload) {
-            event.preventDefault();
-            moveSelectionToDropPoint(view, event);
-            return insertExistingMediaReference(view, payload);
-          }
-        }
-        const imageFiles = filesFromDataTransfer(dt);
-        if (imageFiles.length === 0) {
-          if (dt.files.length > 0 || dt.items.length > 0) {
-            console.warn(
-              "[squisq-editor] Drop received with no recognizable image File. Types:",
-              Array.from(dt.types ?? []),
-              "files:",
-              Array.from(dt.files).map((f) => `${f.name} (${f.type || "no-type"})`)
-            );
-          }
-          return false;
-        }
-        if (!mediaProviderRef.current) {
-          console.warn(
-            "[squisq-editor] Image drop received but no MediaProvider is wired up; cannot persist the image. Pass `mediaProvider` to EditorShell / EditorProvider."
-          );
-          return false;
-        }
-        event.preventDefault();
-        moveSelectionToDropPoint(view, event);
-        uploadAndInsertImages(view, imageFiles, mediaProviderRef.current, bumpMediaRevision);
-        return true;
+        return insertDroppedMedia(
+          view,
+          event,
+          { left: event.clientX, top: event.clientY },
+          mediaProviderRef.current,
+          bumpMediaRevision
+        );
       }
     }
   });
@@ -36153,6 +36212,25 @@ function WysiwygEditor({
     if (!editor || editor.isDestroyed) return;
     editor.view.dispatch(editor.state.tr.setMeta(DOCUMENT_TRAY_KEY, layoutMode === "document"));
   }, [editor, layoutMode]);
+  const handleDeskDrop = useCallback43(
+    (event) => {
+      if (event.defaultPrevented || readOnly || !editor || editor.isDestroyed) return;
+      const { view } = editor;
+      if (view.dragging || view.dom.contains(event.target)) return;
+      const page = view.dom.getBoundingClientRect();
+      insertDroppedMedia(
+        view,
+        event.nativeEvent,
+        {
+          left: Math.min(Math.max(event.clientX, page.left + 1), page.right - 1),
+          top: Math.min(Math.max(event.clientY, page.top + 1), page.bottom - 1)
+        },
+        mediaProviderRef.current,
+        bumpMediaRevision
+      );
+    },
+    [bumpMediaRevision, editor, readOnly]
+  );
   return /* @__PURE__ */ jsx72(CustomTemplateProvider, { docTemplates, onDocTemplatesChange, children: /* @__PURE__ */ jsxs58(
     "div",
     {
@@ -36168,6 +36246,7 @@ function WysiwygEditor({
       "data-block-tags": BLOCK_TAG_DATA_VALUES[blockTagVisibility],
       "data-theme-inheritance": themeInheritance,
       ref: containerRef,
+      onDrop: handleDeskDrop,
       children: [
         editor && layoutMode === "document" && /* @__PURE__ */ jsx72(DocumentTray, { editor }),
         /* @__PURE__ */ jsx72(EditorContent2, { editor, style: { height: "100%" } }),
@@ -36255,10 +36334,8 @@ function filesFromDataTransfer(dt) {
   const seen = /* @__PURE__ */ new Set();
   for (let i = 0; i < dt.files.length; i++) {
     const file = dt.files[i];
-    if (looksLikeImageFile(file)) {
-      files.push(file);
-      seen.add(`${file.name}|${file.size}`);
-    }
+    files.push(file);
+    seen.add(`${file.name}|${file.size}`);
   }
   if (dt.items) {
     for (let i = 0; i < dt.items.length; i++) {
@@ -36266,7 +36343,6 @@ function filesFromDataTransfer(dt) {
       if (item.kind !== "file") continue;
       const file = item.getAsFile();
       if (!file) continue;
-      if (!looksLikeImageFile(file)) continue;
       const key = `${file.name}|${file.size}`;
       if (seen.has(key)) continue;
       files.push(file);
@@ -36306,10 +36382,7 @@ function insertExistingMediaReference(view, payload) {
   if (spec) {
     const nodeType = state.schema.nodes[spec.type];
     if (!nodeType) return false;
-    const node3 = nodeType.create(spec.attrs);
-    const { $from } = state.selection;
-    const pos = $from.depth >= 1 ? $from.after(1) : state.doc.content.size;
-    view.dispatch(state.tr.insert(pos, node3).scrollIntoView());
+    insertTopLevelNodes(view, [nodeType.create(spec.attrs)]);
     return true;
   }
   const linkType = state.schema.marks.link;
@@ -36319,12 +36392,54 @@ function insertExistingMediaReference(view, payload) {
   view.dispatch(state.tr.replaceSelectionWith(node2).scrollIntoView());
   return true;
 }
-function moveSelectionToDropPoint(view, event) {
-  const coords = view.posAtCoords({ left: event.clientX, top: event.clientY });
+function moveSelectionToPoint(view, point) {
+  const coords = view.posAtCoords(point);
   if (!coords) return;
   const tr = view.state.tr.setSelection(Selection2.near(view.state.doc.resolve(coords.pos)));
   view.dispatch(tr);
 }
+function insertDroppedMedia(view, event, point, mediaProvider, onMediaUploaded) {
+  const dt = event.dataTransfer;
+  if (!dt) return false;
+  const squisqRaw = dt.getData(SQUISQ_MEDIA_MIME);
+  if (squisqRaw) {
+    const payload = parseSquisqMediaPayload(squisqRaw);
+    if (payload) {
+      event.preventDefault();
+      moveSelectionToPoint(view, point);
+      return insertExistingMediaReference(view, payload);
+    }
+  }
+  const droppedFiles = filesFromDataTransfer(dt);
+  const imageFiles = droppedFiles.filter(looksLikeImageFile);
+  const playerFiles = droppedFiles.filter(isPlayableMediaFile);
+  if (imageFiles.length === 0 && playerFiles.length === 0) {
+    if (dt.files.length > 0 || dt.items.length > 0) {
+      console.warn(
+        "[squisq-editor] Drop received with no recognizable image, video or audio File. Types:",
+        Array.from(dt.types ?? []),
+        "files:",
+        Array.from(dt.files).map((f) => `${f.name} (${f.type || "no-type"})`)
+      );
+    }
+    return false;
+  }
+  if (!mediaProvider) {
+    console.warn(
+      "[squisq-editor] Media drop received but no MediaProvider is wired up; cannot persist the file. Pass `mediaProvider` to EditorShell / EditorProvider."
+    );
+    return false;
+  }
+  event.preventDefault();
+  moveSelectionToPoint(view, point);
+  if (imageFiles.length > 0) {
+    uploadAndInsertImages(view, imageFiles, mediaProvider, onMediaUploaded);
+  }
+  if (playerFiles.length > 0) {
+    void uploadAndInsertMediaPlayers(view, playerFiles, mediaProvider, onMediaUploaded);
+  }
+  return true;
+}
 
 // src/InlinePreviewGutter.tsx
 import { useLayoutEffect as useLayoutEffect13, useMemo as useMemo43, useRef as useRef51, useState as useState70 } from "react";
@@ -41894,19 +42009,19 @@ function iconForMime(mimeType) {
 function isImageMime(mimeType) {
   return mimeType.startsWith("image/");
 }
-var IMAGE_EXTENSIONS = /* @__PURE__ */ new Set(["png", "jpg", "jpeg", "gif", "webp", "svg", "avif", "ico"]);
-function isImageFile(file) {
-  if (isImageMime(file.type)) return true;
-  const dot = file.name.lastIndexOf(".");
-  return dot >= 0 && IMAGE_EXTENSIONS.has(file.name.slice(dot + 1).toLowerCase());
+function isMediaFile(file) {
+  return squisqMediaKind(mediaMimeType(file)) !== "file";
+}
+function isMediaMime(mimeType) {
+  return squisqMediaKind(mimeType) !== "file";
 }
-function dataTransferMayContainImage(dataTransfer) {
+function dataTransferMayContainMedia(dataTransfer) {
   if (dataTransfer.items.length > 0) {
     return Array.from(dataTransfer.items).some(
-      (item) => item.kind === "file" && (item.type === "" || isImageMime(item.type))
+      (item) => item.kind === "file" && (item.type === "" || isMediaMime(item.type))
     );
   }
-  return Array.from(dataTransfer.files).some(isImageFile);
+  return Array.from(dataTransfer.files).some(isMediaFile);
 }
 async function resolveThumbnailUrl(provider, name) {
   const url = await provider.resolveUrl(name);
@@ -42047,7 +42162,7 @@ function MediaBin({
       try {
         for (const file of files) {
           const buffer = await file.arrayBuffer();
-          const mimeType = file.type || "application/octet-stream";
+          const mimeType = mediaMimeType(file);
           const relativePath = await mediaProvider.addMedia(file.name, buffer, mimeType);
           if (onMediaUploaded) {
             try {
@@ -42075,7 +42190,7 @@ function MediaBin({
   );
   const handleDragEnter = useCallback55(
     (event) => {
-      if (!mediaProvider || loading || !dataTransferMayContainImage(event.dataTransfer)) return;
+      if (!mediaProvider || loading || !dataTransferMayContainMedia(event.dataTransfer)) return;
       event.preventDefault();
       event.stopPropagation();
       dropDepthRef.current += 1;
@@ -42085,7 +42200,7 @@ function MediaBin({
   );
   const handleDragOver = useCallback55(
     (event) => {
-      if (!mediaProvider || loading || !dataTransferMayContainImage(event.dataTransfer)) return;
+      if (!mediaProvider || loading || !dataTransferMayContainMedia(event.dataTransfer)) return;
       event.preventDefault();
       event.stopPropagation();
       event.dataTransfer.dropEffect = "copy";
@@ -42104,13 +42219,13 @@ function MediaBin({
   );
   const handleDrop = useCallback55(
     (event) => {
-      const imageFiles = Array.from(event.dataTransfer.files).filter(isImageFile);
-      if (!mediaProvider || !isDropActive && imageFiles.length === 0) return;
+      const mediaFiles = Array.from(event.dataTransfer.files).filter(isMediaFile);
+      if (!mediaProvider || !isDropActive && mediaFiles.length === 0) return;
       event.preventDefault();
       event.stopPropagation();
       dropDepthRef.current = 0;
       setIsDropActive(false);
-      if (imageFiles.length > 0) void uploadFiles(imageFiles);
+      if (mediaFiles.length > 0) void uploadFiles(mediaFiles);
     },
     [isDropActive, mediaProvider, uploadFiles]
   );
@@ -42309,7 +42424,7 @@ ${formatSize(entry.size)}`,
         ] }),
         isDropActive && /* @__PURE__ */ jsxs72("div", { className: "squisq-media-bin-drop-target", "aria-hidden": "true", children: [
           /* @__PURE__ */ jsx89("span", { className: "squisq-media-bin-drop-target-icon", children: "+" }),
-          /* @__PURE__ */ jsx89("strong", { children: "Drop images here" }),
+          /* @__PURE__ */ jsx89("strong", { children: "Drop media here" }),
           /* @__PURE__ */ jsx89("span", { children: "Attach to this document" })
         ] }),
         contextMenu && /* @__PURE__ */ jsx89(

package/dist/index.d.ts

@@ -1335,7 +1335,7 @@ interface MediaBinProps {
     usedMediaPaths?: ReadonlySet<string>;
     /**
      * Fired after a successful upload via the MediaBin's "+ Upload"
-     * button or image drop target. `relativePath` is what the provider returned (the same
+     * button or media drop target. `relativePath` is what the provider returned (the same
      * value embedded in markdown refs, e.g. `attachments/xyz.png`);
      * `name` is the uploader-chosen filename before storage renamed
      * it. Consumers typically use this to insert a markdown image ref

package/dist/index.js

@@ -243,7 +243,7 @@ import {
   videoEmbedParagraphJson,
   viewStateFromBinding,
   writeHeadingViewState
-} from "./chunk-D77UNB6T.js";
+} from "./chunk-WEEHXZUY.js";
 import {
   EditorProvider,
   applySourceEditsToText,

package/dist/shell/index.js

@@ -5,7 +5,7 @@ import {
   RawEditor,
   WysiwygEditor,
   useEditorContextMenuItems
-} from "../chunk-D77UNB6T.js";
+} from "../chunk-WEEHXZUY.js";
 import {
   EditorProvider,
   useEditorContext,

package/dist/styles/index.css

@@ -8681,7 +8681,10 @@
 }
 .squisq-insert-menu {
   z-index: 100;
-  min-width: 200px;
+  box-sizing: border-box;
+  width: max-content;
+  min-width: min(200px, calc(100vw - 16px));
+  max-width: calc(100vw - 16px);
   padding: 4px 0;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -8691,6 +8694,17 @@
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 }
+.squisq-insert-menu .squisq-toolbar-overflow-item {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.squisq-insert-menu .squisq-toolbar-overflow-item > span {
+  min-width: 0;
+}
+.squisq-insert-menu .squisq-toolbar-overflow-icon,
+.squisq-insert-menu .squisq-toolbar-overflow-item > svg {
+  flex-shrink: 0;
+}
 .squisq-insert-menu-header {
   padding: 6px 12px 4px;
   font-size: 11px;
@@ -13599,6 +13613,7 @@ button.squisq-view-menu-radio-row:focus-visible {
     y2 120ms ease-out;
 }
 @container squisq-editor-body (max-width: 720px) {
+  .squisq-block-preview-panel,
   .squisq-inline-preview-gutter,
   .squisq-inline-preview-connectors,
   .squisq-outline {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "2.13.3",
+  "version": "2.13.5",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -102,12 +102,12 @@
     }
   },
   "dependencies": {
-    "@bendyline/squisq": "2.13.1",
+    "@bendyline/squisq": "2.13.3",
     "@bendyline/squisq-calc": "2.11.2",
-    "@bendyline/squisq-formats": "2.8.2",
-    "@bendyline/squisq-grid-react": "2.11.30",
-    "@bendyline/squisq-react": "2.12.10",
-    "@bendyline/squisq-video-react": "2.5.11",
+    "@bendyline/squisq-formats": "2.8.4",
+    "@bendyline/squisq-grid-react": "2.11.32",
+    "@bendyline/squisq-react": "2.12.12",
+    "@bendyline/squisq-video-react": "2.5.13",
     "@fortawesome/fontawesome-free": "7.3.1",
     "@tiptap/core": "2.27.3",
     "@tiptap/extension-heading": "2.27.3",