@blinkk/editor/dist/src/editor/field/media.d.ts

Structured content editor with live previews.

import { DeepObject, DroppableUiComponent, Field, FieldComponent, FieldConfig, GroupField, SelectiveEditor, TemplateResult, Types } from '@blinkk/selective-edit';
import { LiveEditorGlobalConfig } from '../editor';
import { Template } from '@blinkk/selective-edit/dist/src/selective/template';
import { MediaFileData } from '../api';
export declare const DEFAULT_EXTRA_KEY = "extra";
export declare const EXT_TO_MIME_TYPE: Record<string, string>;
export declare const VALID_IMAGE_MIME_TYPES: string[];
export declare const VALID_VIDEO_MIME_TYPES: string[];
export interface MediaFieldConfig extends FieldConfig {
    /**
     * Valid mime or file types that the field accepts.
     *
     * Defaults to {@link VALID_IMAGE_MIME_TYPES} and {@link VALID_VIDEO_MIME_TYPES}.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
     */
    accepted?: Array<string>;
    /**
     * Key to use for the data for the 'extra' fields.
     *
     * For example, if the `extraKey` is `foo` then the data
     * would look similar to:
     *
     * ```yaml
     * path: /path/to/file.png
     * foo:
     *   title: testing
     * ```
     */
    extraKey?: string;
    /**
     * Label to use for the 'extra' fields.
     */
    extraLabel?: string;
    /**
     * Fields to be grouped.
     */
    fields?: Array<FieldConfig>;
    /**
     * Are the extra fields expanded to show the fields?
     *
     * Set to `true` to expand the extra fields by default.
     */
    isExpanded?: boolean;
    /**
     * Placeholder for the path input.
     */
    placeholder?: string;
    /**
     * Placeholder for the label input.
     */
    placeholderLabel?: string;
    /**
     * Preview field keys.
     *
     * When showing a preview of the group, use these field keys to determine
     * the value to show for the preview.
     *
     * If no fields are no preview will be shown for the group when collapsed.
     */
    previewFields?: Array<string>;
}
export interface MediaFieldComponent extends FieldComponent {
    config: MediaFieldConfig;
    droppableUi: DroppableUiComponent;
    handleFiles(files: Array<File>): void;
    isProcessing?: boolean;
    templatePreviewMedia: Template;
    templatePreviewValue(editor: SelectiveEditor, data: DeepObject, index?: number): TemplateResult;
}
export interface MediaMeta {
    height: number;
    width: number;
}
declare const MediaField_base: (new (...args: any[]) => {
    _droppableUi?: DroppableUiComponent | undefined;
    droppableUi: DroppableUiComponent;
}) & typeof Field;
export declare class MediaField extends MediaField_base implements MediaFieldComponent {
    config: MediaFieldConfig;
    group?: GroupField;
    globalConfig: LiveEditorGlobalConfig;
    isProcessing?: boolean;
    meta?: MediaMeta;
    showFileUpload?: boolean;
    constructor(types: Types, config: MediaFieldConfig, globalConfig: LiveEditorGlobalConfig, fieldType?: string);
    protected ensureGroup(): void;
    /**
     * Handle when the accessibility label changes value.
     *
     * @param evt Input event from changing value.
     */
    handleA11yLabel(evt: Event): void;
    handleFiles(files: Array<File>): void;
    /**
     * Handle when the input changes value.
     *
     * @param evt Input event from changing value.
     */
    handleInput(evt: Event): void;
    /**
     * Handle when the input changes value.
     *
     * @param evt Input event from changing value.
     */
    handleFileUpload(evt: Event): void;
    handlePreviewMediaLoad(evt: Event): void;
    handlePreviewVideoLoad(evt: Event): void;
    get isClean(): boolean;
    get isSimple(): boolean;
    get isValid(): boolean;
    /**
     * Retrieve the url for previewing the field.
     */
    get previewUrl(): string | undefined;
    templateAltLabel(editor: SelectiveEditor, data: DeepObject): TemplateResult;
    templateFileUpload(editor: SelectiveEditor, data: DeepObject): TemplateResult;
    templateInput(editor: SelectiveEditor, data: DeepObject): TemplateResult;
    templatePreview(editor: SelectiveEditor, data: DeepObject): TemplateResult;
    /**
     * Template for how to render a preview.
     *
     * @param editor Selective editor used to render the template.
     * @param data Data provided to render the template.
     */
    templatePreviewValue(editor: SelectiveEditor, data: DeepObject, index?: number): TemplateResult;
    templatePreviewMedia(editor: SelectiveEditor, data: DeepObject): TemplateResult;
    templatePreviewMeta(editor: SelectiveEditor, data: DeepObject): Array<TemplateResult>;
    uploadFile(uploadFile: File): Promise<MediaFileData>;
    /**
     * Get the value for the field, optionally including the extra values.
     */
    get value(): any;
}
export declare class RemoteMediaField extends MediaField {
    constructor(types: Types, config: MediaFieldConfig, globalConfig: LiveEditorGlobalConfig, fieldType?: string);
    uploadFile(uploadFile: File): Promise<MediaFileData>;
}
export {};