@remotion/studio 4.0.494 → 4.0.496

package/dist/api/get-static-files.d.ts

@@ -1,7 +1,7 @@
 export declare const getStaticFiles: () => StaticFile[];
 export type StaticFile = {
     /**
-     * A string that you can pass to the `src` attribute of an `<Audio>`, `<Img>`, `<Video>`, `<Html5Audio>`, `<Html5Video>` or `<OffthreadVideo>` element.
+     * A string that you can pass to the `src` attribute of an `<Audio>`, `<CanvasImage>`, `<Img>`, `<Video>`, `<Html5Audio>`, `<Html5Video>` or `<OffthreadVideo>` element.
      */
     src: string;
     /**

package/dist/components/AssetFileIcon.d.ts

@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react';
+import type { AssetFileType } from '../helpers/get-preview-file-type';
+export declare const AssetFileIcon: ({ fileType, ...props }: SVGProps<SVGSVGElement> & {
+    readonly color: string;
+} & {
+    readonly fileType: AssetFileType;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AssetFileIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetFileIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const audio_1 = require("../icons/audio");
+const file_1 = require("../icons/file");
+const font_1 = require("../icons/font");
+const frame_1 = require("../icons/frame");
+const json_1 = require("../icons/json");
+const video_1 = require("../icons/video");
+const iconByFileType = {
+    audio: audio_1.AudioFileIcon,
+    font: font_1.FontFileIcon,
+    image: frame_1.PicIcon,
+    json: json_1.JsonFileIcon,
+    other: file_1.FileIcon,
+    txt: file_1.FileIcon,
+    video: video_1.VideoFileIcon,
+};
+const AssetFileIcon = ({ fileType, ...props }) => {
+    const Icon = iconByFileType[fileType];
+    return jsx_runtime_1.jsx(Icon, { ...props });
+};
+exports.AssetFileIcon = AssetFileIcon;

package/dist/components/AssetSelectorItem.js

@@ -44,15 +44,16 @@ const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
 const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const url_state_1 = require("../helpers/url-state");
 const use_asset_drag_events_1 = __importStar(require("../helpers/use-asset-drag-events"));
 const clipboard_1 = require("../icons/clipboard");
-const file_1 = require("../icons/file");
 const folder_1 = require("../icons/folder");
 const modals_1 = require("../state/modals");
 const sidebar_1 = require("../state/sidebar");
+const AssetFileIcon_1 = require("./AssetFileIcon");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const ContextMenu_1 = require("./ContextMenu");
 const import_assets_1 = require("./import-assets");
@@ -60,8 +61,8 @@ const InlineAction_1 = require("./InlineAction");
 const layout_1 = require("./layout");
 const styles_1 = require("./Menu/styles");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const open_in_new_window_1 = require("./open-in-new-window");
 const actions_1 = require("./RenderQueue/actions");
-const ASSET_ITEM_HEIGHT = 32;
 const iconStyle = {
     width: 18,
     height: 18,
@@ -69,20 +70,23 @@ const iconStyle = {
 };
 const itemStyle = {
     paddingRight: 10,
-    paddingTop: 6,
-    paddingBottom: 6,
+    paddingTop: 5,
+    paddingBottom: 5,
     fontSize: 13,
     display: 'flex',
     textDecoration: 'none',
     cursor: 'default',
     alignItems: 'center',
     marginBottom: 1,
+    marginLeft: 4,
+    marginRight: 4,
     appearance: 'none',
     border: 'none',
-    width: '100%',
+    borderRadius: 4,
+    width: 'calc(100% - 8px)',
     textAlign: 'left',
     backgroundColor: colors_1.BACKGROUND,
-    height: ASSET_ITEM_HEIGHT,
+    height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
@@ -183,6 +187,9 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     const relativePath = (0, react_1.useMemo)(() => {
         return parentFolder ? parentFolder + '/' + item.name : item.name;
     }, [parentFolder, item.name]);
+    const previewFileType = (0, react_1.useMemo)(() => {
+        return (0, get_preview_file_type_1.getPreviewFileType)(relativePath);
+    }, [relativePath]);
     const selected = (0, react_1.useMemo)(() => {
         if (canvasContent && canvasContent.type === 'asset') {
             return canvasContent.asset === relativePath;
@@ -232,13 +239,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         return {
             ...itemStyle,
             color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
-            backgroundColor: hovered
-                ? selected
-                    ? colors_1.SELECTED_BACKGROUND
-                    : colors_1.WHITE_ALPHA_06
-                : selected
-                    ? colors_1.SELECTED_BACKGROUND
-                    : colors_1.TRANSPARENT,
+            backgroundColor: hovered || selected ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
             paddingLeft: 12 + level * 8,
         };
     }, [hovered, level, selected]);
@@ -311,6 +312,11 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     }, [confirm, relativePath]);
     const contextMenu = (0, react_1.useMemo)(() => {
         return [
+            (0, open_in_new_window_1.getOpenInNewWindowMenuItem)(`/assets/${relativePath}`),
+            {
+                type: 'divider',
+                id: 'open-in-new-window-divider',
+            },
             {
                 id: 'copy-asset-file-name',
                 keyHint: null,
@@ -398,7 +404,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         copyStaticFilePath();
     }, [copyStaticFilePath]);
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { ref: rowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, draggable: canDragAsset, onDragStart: onDragStart, onDragEnd: onDragEnd, tabIndex: tabIndex, title: item.name, children: [
-                    jsx_runtime_1.jsx(file_1.FileIcon, { style: iconStyle, color: colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name }), hovered && !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { fileType: previewFileType, style: iconStyle, color: colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name }), hovered && !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Copy staticFile() path", renderAction: renderCopyAction, onClick: copyToClipboard }), serverActionDisabled ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: `Show in ${fileManagerName}`, renderAction: renderFileExplorerAction, onClick: revealInExplorer })
                                 ] }))] })) : null] }) }) }));

package/dist/components/Canvas.js

@@ -8,7 +8,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const get_static_files_1 = require("../api/get-static-files");
 const client_id_1 = require("../helpers/client-id");
+const clipboard_figma_1 = require("../helpers/clipboard-figma");
+const clipboard_images_1 = require("../helpers/clipboard-images");
+const clipboard_svg_1 = require("../helpers/clipboard-svg");
 const colors_1 = require("../helpers/colors");
 const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
@@ -16,6 +20,7 @@ const install_required_package_1 = require("../helpers/install-required-package"
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
 const smooth_zoom_1 = require("../helpers/smooth-zoom");
+const studio_fit_padding_1 = require("../helpers/studio-fit-padding");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const canvas_ref_1 = require("../state/canvas-ref");
 const editor_guides_1 = require("../state/editor-guides");
@@ -29,8 +34,10 @@ const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
 const element_drag_and_drop_1 = require("./element-drag-and-drop");
 const import_assets_1 = require("./import-assets");
 const layout_1 = require("./layout");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const Preview_1 = require("./Preview");
 const ResetZoomButton_1 = require("./ResetZoomButton");
+const SvgImportDialog_1 = require("./SvgImportDialog");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 const elementInstallCompositionIdStyle = {
     fontFamily: 'monospace',
@@ -83,6 +90,17 @@ const resetZoom = {
     right: layout_1.SPACING_UNIT * 2,
 };
 const ZOOM_PX_FACTOR = 0.003;
+const calculateCanvasScale = ({ addFitPadding, canvasSize, compositionHeight, compositionWidth, previewSize, }) => {
+    const options = {
+        canvasSize,
+        compositionHeight,
+        compositionWidth,
+        previewSize,
+    };
+    return addFitPadding
+        ? (0, studio_fit_padding_1.calculateStudioScale)(options)
+        : remotion_1.Internals.calculateScale(options);
+};
 const isFileDragEvent = (event) => {
     var _a;
     var _b;
@@ -174,11 +192,12 @@ const getSfxDragUrl = (event) => {
     }
     return null;
 };
-const getDropPosition = ({ clientX, clientY, contentDimensions, previewSize, size, }) => {
+const getDropPosition = ({ addFitPadding, clientX, clientY, contentDimensions, previewSize, size, }) => {
     if (contentDimensions === null || contentDimensions === 'none') {
         return null;
     }
-    const scale = remotion_1.Internals.calculateScale({
+    const scale = calculateCanvasScale({
+        addFitPadding,
         canvasSize: size,
         compositionHeight: contentDimensions.height,
         compositionWidth: contentDimensions.width,
@@ -224,6 +243,7 @@ const Canvas = ({ canvasContent, size }) => {
     const touchPinchRef = (0, react_1.useRef)(null);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    const chooseSvgImportMode = (0, SvgImportDialog_1.useSvgImportDialog)();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const areRulersVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
     const { editorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
@@ -258,6 +278,7 @@ const Canvas = ({ canvasContent, size }) => {
         currentCompositionId !== null &&
         compositionFile !== null;
     const canDropAssets = canInstallElements && !isAddingAsset;
+    const cannotAddSequence = (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false;
     const contentDimensions = (0, react_1.useMemo)(() => {
         if ((canvasContent.type === 'asset' ||
             canvasContent.type === 'output' ||
@@ -272,6 +293,7 @@ const Canvas = ({ canvasContent, size }) => {
         return null;
     }, [assetResolution, config, canvasContent]);
     const isFit = previewSize.size === 'auto';
+    const addFitPadding = canvasContent.type === 'composition';
     previewSnapshotRef.current = {
         previewSize,
         canvasSize: size,
@@ -298,7 +320,8 @@ const Canvas = ({ canvasContent, size }) => {
         }
         ev.preventDefault();
         setSize((prevSize) => {
-            const scale = remotion_1.Internals.calculateScale({
+            const scale = calculateCanvasScale({
+                addFitPadding,
                 canvasSize: size,
                 compositionHeight: contentDimensions.height,
                 compositionWidth: contentDimensions.width,
@@ -310,6 +333,7 @@ const Canvas = ({ canvasContent, size }) => {
                 const added = smoothened + ev.deltaY * ZOOM_PX_FACTOR;
                 const unsmoothened = (0, smooth_zoom_1.unsmoothenZoom)(added);
                 return (0, get_effective_translation_1.applyZoomAroundFocalPoint)({
+                    addFitPadding,
                     canvasSize: size,
                     contentDimensions,
                     previewSizeBefore: prevSize,
@@ -340,7 +364,14 @@ const Canvas = ({ canvasContent, size }) => {
                 }),
             };
         });
-    }, [editorZoomGestures, contentDimensions, isFit, setSize, size]);
+    }, [
+        addFitPadding,
+        editorZoomGestures,
+        contentDimensions,
+        isFit,
+        setSize,
+        size,
+    ]);
     (0, react_1.useEffect)(() => {
         const { current } = canvas_ref_1.canvasRef;
         if (!current) {
@@ -371,7 +402,8 @@ const Canvas = ({ canvasContent, size }) => {
             }
             e.preventDefault();
             suppressWheelFromWebKitPinchRef.current = true;
-            const fitted = remotion_1.Internals.calculateScale({
+            const fitted = calculateCanvasScale({
+                addFitPadding,
                 canvasSize: canvasSz,
                 compositionHeight: cdim.height,
                 compositionWidth: cdim.width,
@@ -392,7 +424,8 @@ const Canvas = ({ canvasContent, size }) => {
             const dimensions = cdim;
             e.preventDefault();
             setSize((prevSize) => {
-                const scale = remotion_1.Internals.calculateScale({
+                const scale = calculateCanvasScale({
+                    addFitPadding,
                     canvasSize: canvasSz,
                     compositionHeight: dimensions.height,
                     compositionWidth: dimensions.width,
@@ -400,6 +433,7 @@ const Canvas = ({ canvasContent, size }) => {
                 });
                 const oldNumeric = prevSize.size === 'auto' ? scale : prevSize.size;
                 return (0, get_effective_translation_1.applyZoomAroundFocalPoint)({
+                    addFitPadding,
                     canvasSize: canvasSz,
                     contentDimensions: dimensions,
                     previewSizeBefore: prevSize,
@@ -427,7 +461,7 @@ const Canvas = ({ canvasContent, size }) => {
             current.removeEventListener('gestureend', onGestureEnd);
             current.removeEventListener('gesturecancel', onGestureEnd);
         };
-    }, [editorZoomGestures, setSize, supportsWebKitPinch]);
+    }, [addFitPadding, editorZoomGestures, setSize, supportsWebKitPinch]);
     (0, react_1.useEffect)(() => {
         const { current } = canvas_ref_1.canvasRef;
         if (!current || !editorZoomGestures) {
@@ -449,7 +483,8 @@ const Canvas = ({ canvasContent, size }) => {
             if (initialDistance < 1e-6) {
                 return;
             }
-            const fitted = remotion_1.Internals.calculateScale({
+            const fitted = calculateCanvasScale({
+                addFitPadding,
                 canvasSize: snap.canvasSize,
                 compositionHeight: snap.contentDimensions.height,
                 compositionWidth: snap.contentDimensions.width,
@@ -477,7 +512,8 @@ const Canvas = ({ canvasContent, size }) => {
             setSize((prevSize) => {
                 const canvasSz = snap.canvasSize;
                 const cdim = snap.contentDimensions;
-                const scale = remotion_1.Internals.calculateScale({
+                const scale = calculateCanvasScale({
+                    addFitPadding,
                     canvasSize: canvasSz,
                     compositionHeight: cdim.height,
                     compositionWidth: cdim.width,
@@ -485,6 +521,7 @@ const Canvas = ({ canvasContent, size }) => {
                 });
                 const oldNumeric = prevSize.size === 'auto' ? scale : prevSize.size;
                 return (0, get_effective_translation_1.applyZoomAroundFocalPoint)({
+                    addFitPadding,
                     canvasSize: canvasSz,
                     contentDimensions: cdim,
                     previewSizeBefore: prevSize,
@@ -510,7 +547,7 @@ const Canvas = ({ canvasContent, size }) => {
             current.removeEventListener('touchend', onTouchEnd);
             current.removeEventListener('touchcancel', onTouchEnd);
         };
-    }, [editorZoomGestures, setSize]);
+    }, [addFitPadding, editorZoomGestures, setSize]);
     const onReset = (0, react_1.useCallback)(() => {
         setSize(() => {
             return {
@@ -530,7 +567,8 @@ const Canvas = ({ canvasContent, size }) => {
             return;
         }
         setSize((prevSize) => {
-            const scale = remotion_1.Internals.calculateScale({
+            const scale = calculateCanvasScale({
+                addFitPadding,
                 canvasSize: size,
                 compositionHeight: contentDimensions.height,
                 compositionWidth: contentDimensions.width,
@@ -544,7 +582,7 @@ const Canvas = ({ canvasContent, size }) => {
                 size: Math.min(smooth_zoom_1.MAX_ZOOM, scale * 2),
             };
         });
-    }, [contentDimensions, setSize, size]);
+    }, [addFitPadding, contentDimensions, setSize, size]);
     const onZoomOut = (0, react_1.useCallback)(() => {
         if (!contentDimensions || contentDimensions === 'none') {
             return;
@@ -553,7 +591,8 @@ const Canvas = ({ canvasContent, size }) => {
             return;
         }
         setSize((prevSize) => {
-            const scale = remotion_1.Internals.calculateScale({
+            const scale = calculateCanvasScale({
+                addFitPadding,
                 canvasSize: size,
                 compositionHeight: contentDimensions.height,
                 compositionWidth: contentDimensions.width,
@@ -567,7 +606,7 @@ const Canvas = ({ canvasContent, size }) => {
                 size: Math.max(smooth_zoom_1.MIN_ZOOM, scale / 2),
             };
         });
-    }, [contentDimensions, setSize, size]);
+    }, [addFitPadding, contentDimensions, setSize, size]);
     (0, react_1.useEffect)(() => {
         const resetBinding = keybindings.registerKeybinding({
             event: 'keydown',
@@ -748,36 +787,46 @@ const Canvas = ({ canvasContent, size }) => {
         };
     }, [activeElementInstallRequest, confirm]);
     const onDragOver = (0, react_1.useCallback)((event) => {
-        if (!canDropAssets ||
-            (!isFileDragEvent(event) &&
-                !isAssetDragEvent(event) &&
-                !isCompositionDragEvent(event) &&
-                !isComponentDragEvent(event) &&
-                !isElementDragEvent(event) &&
-                !isSfxDragEvent(event) &&
-                !isRemoteAssetDragEvent(event)) ||
+        if ((!isFileDragEvent(event) &&
+            !isAssetDragEvent(event) &&
+            !isCompositionDragEvent(event) &&
+            !isComponentDragEvent(event) &&
+            !isElementDragEvent(event) &&
+            !isSfxDragEvent(event) &&
+            !isRemoteAssetDragEvent(event)) ||
             !isDragEventInsideCanvas(event)) {
             return;
         }
+        if (!canDropAssets && !cannotAddSequence) {
+            return;
+        }
         event.preventDefault();
         if (event.dataTransfer) {
-            event.dataTransfer.dropEffect = 'copy';
+            event.dataTransfer.dropEffect = canDropAssets ? 'copy' : 'none';
         }
-    }, [canDropAssets]);
+    }, [canDropAssets, cannotAddSequence]);
     const onDrop = (0, react_1.useCallback)(async (event) => {
         var _a;
         var _b;
+        if ((!isFileDragEvent(event) &&
+            !isAssetDragEvent(event) &&
+            !isCompositionDragEvent(event) &&
+            !isComponentDragEvent(event) &&
+            !isElementDragEvent(event) &&
+            !isSfxDragEvent(event) &&
+            !isRemoteAssetDragEvent(event)) ||
+            !isDragEventInsideCanvas(event)) {
+            return;
+        }
+        if (cannotAddSequence) {
+            event.preventDefault();
+            event.stopPropagation();
+            (0, NotificationCenter_1.showNotification)('Cannot insert items into this composition component', 3000);
+            return;
+        }
         if (!canDropAssets ||
             compositionFile === null ||
-            currentCompositionId === null ||
-            (!isFileDragEvent(event) &&
-                !isAssetDragEvent(event) &&
-                !isCompositionDragEvent(event) &&
-                !isComponentDragEvent(event) &&
-                !isElementDragEvent(event) &&
-                !isSfxDragEvent(event) &&
-                !isRemoteAssetDragEvent(event)) ||
-            !isDragEventInsideCanvas(event)) {
+            currentCompositionId === null) {
             return;
         }
         if (event.dataTransfer &&
@@ -790,6 +839,7 @@ const Canvas = ({ canvasContent, size }) => {
         setIsAddingAsset(true);
         try {
             const dropPosition = getDropPosition({
+                addFitPadding,
                 clientX: event.clientX,
                 clientY: event.clientY,
                 contentDimensions,
@@ -801,12 +851,19 @@ const Canvas = ({ canvasContent, size }) => {
                 if (files.length === 0) {
                     return;
                 }
+                const svgImportMode = (0, import_assets_1.hasSvgFile)(files)
+                    ? await chooseSvgImportMode()
+                    : 'image';
+                if (svgImportMode === null) {
+                    return;
+                }
                 await (0, import_assets_1.importAssets)({
                     files,
                     compositionFile,
                     compositionId: currentCompositionId,
                     destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
                     dropPosition,
+                    svgImportMode,
                 });
             }
             else if (isAssetDragEvent(event)) {
@@ -884,24 +941,122 @@ const Canvas = ({ canvasContent, size }) => {
             setIsAddingAsset(false);
         }
     }, [
+        addFitPadding,
         canDropAssets,
+        cannotAddSequence,
+        chooseSvgImportMode,
         compositionFile,
         contentDimensions,
         currentCompositionId,
         previewSize,
         size,
     ]);
-    (0, react_1.useEffect)(() => {
-        if (!canDropAssets) {
+    const onPaste = (0, react_1.useCallback)(async (event) => {
+        const { activeElement } = document;
+        if (!canDropAssets ||
+            compositionFile === null ||
+            currentCompositionId === null ||
+            event.clipboardData === null ||
+            activeElement instanceof HTMLInputElement ||
+            activeElement instanceof HTMLTextAreaElement ||
+            (activeElement instanceof HTMLElement &&
+                activeElement.isContentEditable)) {
+            return;
+        }
+        const dropPosition = contentDimensions === null || contentDimensions === 'none'
+            ? null
+            : {
+                centerX: contentDimensions.width / 2,
+                centerY: contentDimensions.height / 2,
+            };
+        const figmaHtml = (0, clipboard_figma_1.getClipboardFigmaHtml)(event.clipboardData);
+        if (figmaHtml !== null) {
+            event.preventDefault();
+            setIsAddingAsset(true);
+            try {
+                await (0, import_assets_1.importFigmaClipboard)({
+                    compositionFile,
+                    compositionId: currentCompositionId,
+                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
+                    dropPosition,
+                    html: figmaHtml,
+                });
+            }
+            finally {
+                setIsAddingAsset(false);
+            }
             return;
         }
+        const svgMarkup = (0, clipboard_svg_1.getClipboardSvgMarkup)(event.clipboardData);
+        if (svgMarkup !== null) {
+            event.preventDefault();
+            setIsAddingAsset(true);
+            try {
+                await (0, import_assets_1.insertSvgMarkup)({
+                    compositionFile,
+                    compositionId: currentCompositionId,
+                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
+                    dropPosition,
+                    markup: svgMarkup,
+                });
+            }
+            finally {
+                setIsAddingAsset(false);
+            }
+            return;
+        }
+        const files = (0, clipboard_images_1.getClipboardImageFiles)({
+            clipboardData: event.clipboardData,
+            existingFileNames: (0, get_static_files_1.getStaticFiles)().map((file) => file.name),
+        });
+        if (files.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        const svgImportMode = (0, import_assets_1.hasSvgFile)(files)
+            ? await chooseSvgImportMode()
+            : 'image';
+        if (svgImportMode === null) {
+            return;
+        }
+        setIsAddingAsset(true);
+        try {
+            await (0, import_assets_1.importAssets)({
+                files,
+                compositionFile,
+                compositionId: currentCompositionId,
+                destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
+                dropPosition,
+                svgImportMode,
+            });
+        }
+        finally {
+            setIsAddingAsset(false);
+        }
+    }, [
+        canDropAssets,
+        chooseSvgImportMode,
+        compositionFile,
+        contentDimensions,
+        currentCompositionId,
+    ]);
+    (0, react_1.useEffect)(() => {
         document.addEventListener('dragover', onDragOver, { capture: true });
         document.addEventListener('drop', onDrop, { capture: true });
         return () => {
             document.removeEventListener('dragover', onDragOver, { capture: true });
             document.removeEventListener('drop', onDrop, { capture: true });
         };
-    }, [canDropAssets, onDragOver, onDrop]);
+    }, [onDragOver, onDrop]);
+    (0, react_1.useEffect)(() => {
+        if (!canDropAssets ||
+            !keybindings.isHighestContext ||
+            (0, use_keybinding_1.areKeyboardShortcutsDisabled)()) {
+            return;
+        }
+        document.addEventListener('paste', onPaste);
+        return () => document.removeEventListener('paste', onPaste);
+    }, [canDropAssets, keybindings.isHighestContext, onPaste]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, onRetryAssetMetadata: fetchMetadata })) : null, isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
 };