1
import type { Editor, Range } from "@tiptap/core";
2
import { mountEditorRenderer } from "../menu/renderer";
3
import { type ImageNodeTarget, type UploadContext, insertImagePlaceholderAtRange } from "../../lib/media-actions";
4
import { ImageInsertPopover, type ImageInsertPopoverProps } from "./insert-popover";
5
 
6
export function insertImageFromSlashMenu(editor: Editor, range: Range, uploadContext: UploadContext) {
7
  const inserted = insertImagePlaceholderAtRange(editor, range);
8
  if (!inserted) return;
9
 
10
  queueMicrotask(() => {
11
    if (editor.isDestroyed) return;
12
    showImageInsertPanel(editor, { uploadContext, target: inserted.target });
13
  });
14
}
15
 
16
export function showImageInsertPanel(editor: Editor, opts: { uploadContext: UploadContext; target: ImageNodeTarget }) {
17
  // Keep launcher exports separate from the React component module so Vite Fast
18
  // Refresh can hot-update the popover implementation without flagging the
19
  // command-style exports in this module as incompatible.
20
  function cleanup() {
21
    renderer.destroy();
22
  }
23
 
24
  const renderer = mountEditorRenderer<unknown, ImageInsertPopoverProps>(editor, ImageInsertPopover, {
25
    editor,
26
    uploadContext: opts.uploadContext,
27
    target: opts.target,
28
    onClose: cleanup,
29
  });
30
}