tldraw/dist-esm/lib/ui/hooks/useInsertMedia.mjs

A tiny little drawing editor.

import {
  DEFAULT_SUPPORTED_MEDIA_TYPE_LIST,
  useEditor,
  useShallowArrayIdentity
} from "@tldraw/editor";
import React, { useCallback, useEffect, useRef } from "react";
const MimeTypeContext = React.createContext([]);
function useInsertMedia() {
  const editor = useEditor();
  const inputRef = useRef();
  const mimeTypes = useShallowArrayIdentity(React.useContext(MimeTypeContext));
  useEffect(() => {
    const input = window.document.createElement("input");
    input.type = "file";
    input.accept = mimeTypes?.join(",") ?? DEFAULT_SUPPORTED_MEDIA_TYPE_LIST;
    input.multiple = true;
    inputRef.current = input;
    async function onchange(e) {
      const fileList = e.target.files;
      if (!fileList || fileList.length === 0) return;
      editor.markHistoryStoppingPoint("insert media");
      await editor.putExternalContent({
        type: "files",
        files: Array.from(fileList),
        point: editor.getViewportPageBounds().center,
        ignoreParent: false
      });
      input.value = "";
    }
    input.addEventListener("change", onchange);
    return () => {
      inputRef.current = void 0;
      input.removeEventListener("change", onchange);
    };
  }, [editor, mimeTypes]);
  return useCallback(() => {
    inputRef.current?.click();
  }, [inputRef]);
}
export {
  MimeTypeContext,
  useInsertMedia
};
//# sourceMappingURL=useInsertMedia.mjs.map