From 738e54daede815079fbdf0bb65b84ba67c747bbb Mon Sep 17 00:00:00 2001
From: 4eb0da <4eb0da@yandex-team.com>
Date: Tue, 16 Sep 2025 12:42:09 +0300
Subject: [PATCH] Custom file dialog
 commit_hash:711677a73f1ec8302190d28f891f5ba4c190536d

---
 .mapping.json                                 |  1 -
 visual-editor/src/App.svelte                  | 20 +++++++++--
 visual-editor/src/lib.ts                      | 34 ++++++++++++++++++-
 .../src/lib/components/controls/Text.svelte   |  2 +-
 .../components/prop-dialog/File2Dialog.svelte | 11 +++---
 .../prop-dialog/VideoSourcesDialog.svelte     |  2 +-
 .../components/simple-props/FileProp.svelte   |  2 +-
 .../simple-props/VideoSourcesItem.svelte      |  2 +-
 .../simple-props/VideoSourcesProp.svelte      |  2 +-
 visual-editor/src/lib/ctx/appContext.ts       | 30 ++--------------
 visual-editor/src/lib/utils/video.ts          |  4 ---
 11 files changed, 64 insertions(+), 46 deletions(-)
 delete mode 100644 visual-editor/src/lib/utils/video.ts

diff --git a/.mapping.json b/.mapping.json
index 9a3f4b2ed..fbbf8f61e 100644
--- a/.mapping.json
+++ b/.mapping.json
@@ -23060,7 +23060,6 @@
   "visual-editor/src/lib/utils/tanker.ts":"divkit/public/visual-editor/src/lib/utils/tanker.ts",
   "visual-editor/src/lib/utils/tree.ts":"divkit/public/visual-editor/src/lib/utils/tree.ts",
   "visual-editor/src/lib/utils/truthy.ts":"divkit/public/visual-editor/src/lib/utils/truthy.ts",
-  "visual-editor/src/lib/utils/video.ts":"divkit/public/visual-editor/src/lib/utils/video.ts",
   "visual-editor/src/main.css":"divkit/public/visual-editor/src/main.css",
   "visual-editor/src/types/divjson.d.ts":"divkit/public/visual-editor/src/types/divjson.d.ts",
   "visual-editor/src/vite-env.d.ts":"divkit/public/visual-editor/src/vite-env.d.ts",
diff --git a/visual-editor/src/App.svelte b/visual-editor/src/App.svelte
index e7032345a..9196e5d25 100644
--- a/visual-editor/src/App.svelte
+++ b/visual-editor/src/App.svelte
@@ -5,7 +5,7 @@
     import type { LanguageContext } from './lib/ctx/languageContext';
     import { LANGUAGE_CTX } from './lib/ctx/languageContext';
     import ContextMenu from './lib/components/ContextMenu.svelte';
-    import type { CardLocale, EditorInstance, EditorOptions, FileLimits, FontFaceDesc, GetTranslationKey, GetTranslationSuggest, Layout } from './lib';
+    import type { CardLocale, EditorInstance, EditorOptions, FileDialogApi, FileLimits, FontFaceDesc, GetTranslationKey, GetTranslationSuggest, Layout } from './lib';
     import LayoutColumn from './lib/components/LayoutColumn.svelte';
     import { APP_CTX, type AppContext, type ContextMenuApi, type RendererApi, type ShowErrors } from './lib/ctx/appContext';
     import { editorFabric as editorFabricInternal } from './lib/data/editorWrapper';
@@ -70,6 +70,8 @@
 
     export let getTranslationKey: GetTranslationKey | undefined = undefined;
 
+    export let fileDialogApi: FileDialogApi | undefined = undefined;
+
     export function setLayout(newLayout: Layout): void {
         layout = newLayout;
     }
@@ -118,6 +120,8 @@
     let selectOptionsDialog: SelectOptionsDialog;
     let itemsListDialog: ItemsListDialog;
 
+    let isCustomFileDialogShown = false;
+
     setContext<LanguageContext>(LANGUAGE_CTX, {
         lang,
         getLanguage(): string {
@@ -237,10 +241,20 @@
         file2Dialog() {
             return {
                 show(props) {
-                    file2Dialog.show(props);
+                    if (fileDialogApi?.canShow(props)) {
+                        fileDialogApi.show(props);
+                        isCustomFileDialogShown = true;
+                    } else {
+                        file2Dialog.show(props);
+                        isCustomFileDialogShown = false;
+                    }
                 },
                 hide() {
-                    file2Dialog.hide();
+                    if (isCustomFileDialogShown) {
+                        fileDialogApi?.hide();
+                    } else {
+                        file2Dialog.hide();
+                    }
                 }
             };
         },
diff --git a/visual-editor/src/lib.ts b/visual-editor/src/lib.ts
index 5c60f7f39..978748c0c 100644
--- a/visual-editor/src/lib.ts
+++ b/visual-editor/src/lib.ts
@@ -1,4 +1,5 @@
 import { get, type Unsubscriber } from 'svelte/store';
+import type { VideoSource } from '@divkitframework/divkit/typings/common';
 import App from './App.svelte';
 import type { Loc } from './lib/utils/stringifyWithLoc';
 import type { TypedRange } from './lib/data/editor';
@@ -98,12 +99,42 @@ export type GetTranslationSuggest = (query: string, locale: string) => Promise<T
 
 export type GetTranslationKey = (key: string) => Promise<Record<string, string> | undefined>;
 
+export interface FileDialogValue {
+    url: string;
+    width?: number;
+    height?: number;
+}
+
+export type FileDialogCallback = (opts: FileDialogValue) => void;
+
+export interface FileDialogShowProps {
+    value: FileDialogValue;
+    title: string;
+    subtype: 'image' | 'gif' | 'lottie' | 'video' | 'image_preview';
+    direction?: 'left' | 'right';
+    hasSize?: boolean;
+    hasDelete?: boolean;
+    target: HTMLElement;
+    disabled?: boolean;
+    generateFromVideo?: VideoSource[];
+    generateFromLottie?: string;
+    callback: FileDialogCallback;
+    onHide?(): void;
+}
+
+export interface FileDialogApi {
+    canShow(props: FileDialogShowProps): boolean;
+    show(props: FileDialogShowProps): void;
+    hide(): void;
+}
+
 export interface DivProEditorApi {
     uploadFile?(file: File): Promise<string>;
     editorFabric?(opts: EditorOptions): EditorInstance;
     onChange?(): void;
     getTranslationSuggest?: GetTranslationSuggest;
     getTranslationKey?: GetTranslationKey;
+    fileDialog?: FileDialogApi;
 }
 
 export interface Source {
@@ -257,7 +288,8 @@ export const DivProEditor = {
                 uploadFile: opts.api?.uploadFile,
                 editorFabric: opts.api?.editorFabric,
                 getTranslationKey: opts.api?.getTranslationKey,
-                getTranslationSuggest: opts.api?.getTranslationSuggest
+                getTranslationSuggest: opts.api?.getTranslationSuggest,
+                fileDialogApi: opts.api?.fileDialog
             }
         });
 
diff --git a/visual-editor/src/lib/components/controls/Text.svelte b/visual-editor/src/lib/components/controls/Text.svelte
index 54bb0cb67..9b500d108 100644
--- a/visual-editor/src/lib/components/controls/Text.svelte
+++ b/visual-editor/src/lib/components/controls/Text.svelte
@@ -11,11 +11,11 @@
 
 <script lang="ts">
     import { createEventDispatcher, getContext } from 'svelte';
+    import type { VideoSource } from '@divkitframework/divkit/typings/common';
     import { LANGUAGE_CTX, type LanguageContext } from '../../ctx/languageContext';
     import { APP_CTX, type AppContext } from '../../ctx/appContext';
     import { formatFileSize } from '../../utils/formatFileSize';
     import { calcFileSizeMod, getFileSize } from '../../utils/fileSize';
-    import type { VideoSource } from '../../utils/video';
     import type { StringValueFilter } from '../../../lib';
     import { checkStringValue } from '../../utils/checkValue';
 
diff --git a/visual-editor/src/lib/components/prop-dialog/File2Dialog.svelte b/visual-editor/src/lib/components/prop-dialog/File2Dialog.svelte
index c323c9515..da7a8cb57 100644
--- a/visual-editor/src/lib/components/prop-dialog/File2Dialog.svelte
+++ b/visual-editor/src/lib/components/prop-dialog/File2Dialog.svelte
@@ -13,12 +13,13 @@
     import { getContext, onDestroy } from 'svelte';
 
     import type { AnimationItem } from 'lottie-web';
-    import type { VideoSource } from '../../utils/video';
+    import type { VideoSource } from '@divkitframework/divkit/typings/common';
+    import type { FileDialogCallback, FileDialogShowProps, FileDialogValue } from '../../../lib';
     import Text from '../controls/Text.svelte';
     import ContextDialog from './ContextDialog.svelte';
     import { LANGUAGE_CTX, type LanguageContext } from '../../ctx/languageContext';
     import Button2 from '../controls/Button2.svelte';
-    import { APP_CTX, type AppContext, type File2DialogCallback, type File2DialogShowProps, type File2DialogValue } from '../../ctx/appContext';
+    import { APP_CTX, type AppContext } from '../../ctx/appContext';
     import loaderImage from '../../../assets/loader.svg?raw';
     import trashIcon from '../../../assets/trash.svg?raw';
     import generateIcon from '../../../assets/generate.svg?raw';
@@ -110,7 +111,7 @@
         } */
     }
 
-    export function show(props: File2DialogShowProps): void {
+    export function show(props: FileDialogShowProps): void {
         callback = props.callback;
         target = props.target;
         value = props.value;
@@ -143,12 +144,12 @@
     let isShown = false;
     let hasSize: boolean | undefined = false;
     let hasDelete: boolean | undefined = false;
-    let value: File2DialogValue = {
+    let value: FileDialogValue = {
         url: '',
         width: 0,
         height: 0
     };
-    let callback: File2DialogCallback;
+    let callback: FileDialogCallback;
     let title = '';
     let subtype: '' | 'image' | 'gif' | 'lottie' | 'video' | 'image_preview' = '';
     let commonSubtype = '';
diff --git a/visual-editor/src/lib/components/prop-dialog/VideoSourcesDialog.svelte b/visual-editor/src/lib/components/prop-dialog/VideoSourcesDialog.svelte
index 9e2dbd1fe..4ccf300f6 100644
--- a/visual-editor/src/lib/components/prop-dialog/VideoSourcesDialog.svelte
+++ b/visual-editor/src/lib/components/prop-dialog/VideoSourcesDialog.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
     import { getContext } from 'svelte';
+    import type { VideoSource } from '@divkitframework/divkit/typings/common';
     import type { ComponentProperty, SiblingComponentProperty } from '../../data/componentProps';
     import { LANGUAGE_CTX, type LanguageContext } from '../../ctx/languageContext';
     import Text from '../controls/Text.svelte';
     import ContextDialog from './ContextDialog.svelte';
     import { APP_CTX, type AppContext, type VideoSourceShowProps } from '../../ctx/appContext';
-    import type { VideoSource } from '../../utils/video';
     import UnknownPropWithLabel from '../simple-props/UnknownPropWithLabel.svelte';
 
     const { l10n } = getContext<LanguageContext>(LANGUAGE_CTX);
diff --git a/visual-editor/src/lib/components/simple-props/FileProp.svelte b/visual-editor/src/lib/components/simple-props/FileProp.svelte
index 12b08e841..ab35ea70e 100644
--- a/visual-editor/src/lib/components/simple-props/FileProp.svelte
+++ b/visual-editor/src/lib/components/simple-props/FileProp.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { createEventDispatcher, getContext } from 'svelte';
+    import type { VideoSource } from '@divkitframework/divkit/typings/common';
     import type { FileProperty } from '../../data/componentProps';
-    import type { VideoSource } from '../../utils/video';
     import Text from '../controls/Text.svelte';
     import { APP_CTX, type AppContext } from '../../ctx/appContext';
     import { getObjectProperty } from '../../utils/objectProperty';
diff --git a/visual-editor/src/lib/components/simple-props/VideoSourcesItem.svelte b/visual-editor/src/lib/components/simple-props/VideoSourcesItem.svelte
index 6cb7d7d31..3abde4c32 100644
--- a/visual-editor/src/lib/components/simple-props/VideoSourcesItem.svelte
+++ b/visual-editor/src/lib/components/simple-props/VideoSourcesItem.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { createEventDispatcher, getContext, onDestroy } from 'svelte';
-    import type { VideoSource } from '../../utils/video';
+    import type { VideoSource } from '@divkitframework/divkit/typings/common';
     import { APP_CTX, type AppContext } from '../../ctx/appContext';
     import { calcFileSizeMod, getFileSize } from '../../utils/fileSize';
     import { LANGUAGE_CTX, type LanguageContext } from '../../ctx/languageContext';
diff --git a/visual-editor/src/lib/components/simple-props/VideoSourcesProp.svelte b/visual-editor/src/lib/components/simple-props/VideoSourcesProp.svelte
index 8a2a9a316..0c68b14dd 100644
--- a/visual-editor/src/lib/components/simple-props/VideoSourcesProp.svelte
+++ b/visual-editor/src/lib/components/simple-props/VideoSourcesProp.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { createEventDispatcher, getContext } from 'svelte';
+    import type { VideoSource } from '@divkitframework/divkit/typings/common';
     import { LANGUAGE_CTX, type LanguageContext } from '../../ctx/languageContext';
     import type { ComponentProperty } from '../../data/componentProps';
     import MoveList2 from '../controls/MoveList2.svelte';
     import VideoSourcesItem from './VideoSourcesItem.svelte';
     import AddButton from '../controls/AddButton.svelte';
     import { APP_CTX, type AppContext } from '../../ctx/appContext';
-    import type { VideoSource } from '../../utils/video';
 
     export let value: VideoSource[];
     export let item: ComponentProperty;
diff --git a/visual-editor/src/lib/ctx/appContext.ts b/visual-editor/src/lib/ctx/appContext.ts
index 0d089cd8d..ec23d7e8b 100644
--- a/visual-editor/src/lib/ctx/appContext.ts
+++ b/visual-editor/src/lib/ctx/appContext.ts
@@ -1,9 +1,8 @@
-import type { Action } from '@divkitframework/divkit/typings/common';
-import type { CardLocale, EditorInstance, EditorOptions, FileLimits, FontFaceDesc, GetTranslationKey, GetTranslationSuggest } from '../../lib';
+import type { Action, VideoSource } from '@divkitframework/divkit/typings/common';
+import type { CardLocale, EditorInstance, EditorOptions, FileDialogShowProps, FileLimits, FontFaceDesc, GetTranslationKey, GetTranslationSuggest } from '../../lib';
 import type { State } from '../data/state';
 import type { TreeLeaf } from './tree';
 import type { Background } from '../data/background';
-import type { VideoSource } from '../utils/video';
 import type { SelectOption } from '../utils/select';
 import type { Item } from '../utils/items';
 
@@ -69,29 +68,6 @@ export interface Expression2ShowProps {
     callback(val: string): void;
 }
 
-export interface File2DialogValue {
-    url: string;
-    width?: number;
-    height?: number;
-}
-
-export type File2DialogCallback = (opts: File2DialogValue) => void;
-
-export interface File2DialogShowProps {
-    value: File2DialogValue;
-    title: string;
-    subtype: 'image' | 'gif' | 'lottie' | 'video' | 'image_preview';
-    direction?: 'left' | 'right';
-    hasSize?: boolean;
-    hasDelete?: boolean;
-    target: HTMLElement;
-    disabled?: boolean;
-    generateFromVideo?: VideoSource[];
-    generateFromLottie?: string;
-    callback: File2DialogCallback;
-    onHide?(): void;
-}
-
 export interface Link2DialogShowProps {
     value: string;
     target: HTMLElement;
@@ -199,7 +175,7 @@ export interface Expression2DialogApi {
 }
 
 export interface File2DialogApi {
-    show(props: File2DialogShowProps): void;
+    show(props: FileDialogShowProps): void;
     hide(): void;
 }
 
diff --git a/visual-editor/src/lib/utils/video.ts b/visual-editor/src/lib/utils/video.ts
deleted file mode 100644
index 37b2179b0..000000000
--- a/visual-editor/src/lib/utils/video.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface VideoSource {
-    url?: string;
-    mime_type?: string;
-}