@divkitframework/visual-editor/dist/divkit-editor.d.ts

Visual editor for DivKit

import { VideoSource } from '@divkitframework/divkit/typings/common';

interface Loc {
    line: number;
    column: number;
    offset: number;
}
interface Range {
    start: Loc;
    end: Loc;
}

interface TypedRange {
    range: Range;
    type: 'highlight' | 'select';
}

declare function convertDictToPalette(json: any): any;
declare function convertPaletteToDict(json: any): any;

declare function addTemplatesSuffix(card: any, suffix: string): any;
declare function removeTemplatesSuffix(card: any, clearSuffix: (str: string) => string | undefined): any;

type Theme = 'light' | 'dark';
type LayoutItem = 'new-component' | 'component-tree' | 'palette' | 'preview' | 'component-props' | 'code' | 'component-props:code' | 'tanker-overview' | 'sources-overview' | 'custom-variables' | 'timers';
type LayoutColumn = {
    items: LayoutItem[];
    minWidth?: number;
    weight?: number;
};
type Layout = LayoutColumn[];
type Locale = 'ru' | 'en';
interface ActionArgBase {
    type: string;
    name: string;
    text: Record<string, string>;
}
interface ActionArgString extends ActionArgBase {
    type: 'string';
}
type ActionArg = ActionArgString;
interface ActionDesc {
    baseUrl: string;
    text: Record<string, string>;
    args?: ActionArg[];
}
interface FontFaceDesc {
    value: string;
    text: Record<string, string>;
    cssValue: string;
}
type TankerMeta = Record<string, Record<string, string>>;
interface Meta {
    tanker?: TankerMeta;
}
interface Card {
    json: string;
    meta?: Meta;
}
interface CardLocale {
    id: string;
    text: Record<string, string>;
}
type StringValueFilter = RegExp | ((value: string) => boolean);
interface ValueFilters {
    actionUrl?: StringValueFilter;
}
interface EditorOptions {
    node: HTMLElement;
    shadowRoot?: ShadowRoot;
    value: string;
    theme: 'light' | 'dark';
    readOnly?: boolean;
    onChange(value: string): void;
    onOver(offset: number | null): void;
    onClick(offset: number): void;
}
interface EditorInstance {
    setValue(value: string): void;
    setTheme(theme: 'light' | 'dark'): void;
    setReadOnly(readOnly: boolean): void;
    revealLoc(loc: Loc): void;
    decorateRanges(typedRanges: TypedRange[]): void;
    isFocused(): boolean;
    destroy(): void;
}
interface TranslationVariant {
    key: string;
    text?: string;
}
type GetTranslationSuggest = (query: string, locale: string) => Promise<TranslationVariant[]>;
type GetTranslationKey = (key: string) => Promise<Record<string, string> | undefined>;
interface FileDialogValue {
    url: string;
    width?: number;
    height?: number;
}
type FileDialogCallback = (opts: FileDialogValue) => void;
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;
}
interface FileDialogApi {
    canShow(props: FileDialogShowProps): boolean;
    show(props: FileDialogShowProps): void;
    hide(): void;
}
interface DivProEditorApi {
    uploadFile?(file: File): Promise<string>;
    editorFabric?(opts: EditorOptions): EditorInstance;
    onChange?(): void;
    getTranslationSuggest?: GetTranslationSuggest;
    getTranslationKey?: GetTranslationKey;
    fileDialog?: FileDialogApi;
}
interface Source {
    key: string;
    url: string;
    example: object;
}
interface FileLimit {
    warn?: number;
    error?: number;
}
interface FileLimits {
    preview?: FileLimit;
    image?: FileLimit;
    lottie?: FileLimit;
    video?: FileLimit;
    upload?: FileLimit;
}
type SafeAreaEmulation = Record<'top' | 'right' | 'bottom' | 'left', {
    name: string;
    value: number;
}>;
interface DivProEditorOptions {
    renderTo: HTMLElement;
    shadowRoot?: ShadowRoot;
    value?: string;
    card?: Card;
    theme?: Theme;
    layout?: Layout;
    locale?: Locale;
    api?: DivProEditorApi;
    actionLogUrlVariable?: string;
    readOnly?: boolean;
    customActions?: ActionDesc[];
    paletteEnabled?: boolean;
    cardLocales?: CardLocale[];
    sources?: Source[];
    previewWarnFileLimit?: number;
    previewErrorFileLimit?: number;
    warnFileLimit?: number;
    errorFileLimit?: number;
    fileLimits?: FileLimits;
    valueFilters?: ValueFilters;
    rootConfigurable?: boolean;
    customFontFaces?: FontFaceDesc[];
    directionSelector?: boolean;
    direction?: 'ltr' | 'rtl';
    perThemeProps?: boolean;
    safeAreaEmulation?: SafeAreaEmulation;
}
interface EditorError {
    message: string;
    level: 'error' | 'warn';
}
interface DivProEditorInstance {
    getValue(): string;
    getCard(): Card;
    getErrors(): EditorError[];
    setTheme(theme: Theme): void;
    setLayout(layout: Layout): void;
    setLocale(locale: Locale): void;
    setReadOnly(readOnly: boolean): void;
    setCustomActions(customActions: ActionDesc[]): void;
    setPaletteEnabled(toggle: boolean): void;
    destroy(): void;
}
declare const DivProEditor: {
    init(opts: DivProEditorOptions): DivProEditorInstance;
};

export { type ActionArg, type ActionArgBase, type ActionArgString, type ActionDesc, type Card, type CardLocale, DivProEditor, type DivProEditorApi, type DivProEditorInstance, type DivProEditorOptions, type EditorError, type EditorInstance, type EditorOptions, type FileDialogApi, type FileDialogCallback, type FileDialogShowProps, type FileDialogValue, type FileLimit, type FileLimits, type FontFaceDesc, type GetTranslationKey, type GetTranslationSuggest, type Layout, type LayoutColumn, type LayoutItem, type Locale, type Meta, type SafeAreaEmulation, type Source, type StringValueFilter, type TankerMeta, type Theme, type TranslationVariant, type ValueFilters, addTemplatesSuffix, convertDictToPalette, convertPaletteToDict, removeTemplatesSuffix };