diff --git a/packages/core/src/asset_manager/config/config.ts b/packages/core/src/asset_manager/config/config.ts index 34ca1c593b..adb15c7c54 100644 --- a/packages/core/src/asset_manager/config/config.ts +++ b/packages/core/src/asset_manager/config/config.ts @@ -1,3 +1,5 @@ +import { UploadFileFn } from '../types'; + export interface AssetManagerConfig { /** * Default assets. @@ -83,7 +85,7 @@ export interface AssetManagerConfig { * // ...send somewhere * } */ - uploadFile?: (ev: DragEvent) => void; + uploadFile?: UploadFileFn; /** * In the absence of 'uploadFile' or 'upload' assets will be embedded as Base64. * @default true diff --git a/packages/core/src/asset_manager/index.ts b/packages/core/src/asset_manager/index.ts index cfee7a7b47..5dd3381215 100644 --- a/packages/core/src/asset_manager/index.ts +++ b/packages/core/src/asset_manager/index.ts @@ -40,13 +40,10 @@ import { ProjectData } from '../storage_manager'; import defConfig, { AssetManagerConfig } from './config/config'; import Asset from './model/Asset'; import Assets from './model/Assets'; -import AssetsEvents, { AssetOpenOptions } from './types'; +import AssetsEvents, { AssetAddInput, AssetOpenOptions, AssetProps } from './types'; import AssetsView from './view/AssetsView'; import FileUploaderView from './view/FileUploader'; -// TODO -type AssetProps = Record; - const assetCmd = 'open-assets'; export default class AssetManager extends ItemManagerModule { @@ -153,7 +150,7 @@ export default class AssetManager extends ItemManagerModule void; types?: string[]; @@ -9,6 +12,20 @@ export interface AssetOpenOptions { target?: any; } +export interface AssetProps { + src: string; + [key: string]: unknown; +} + +export interface UploadFileOptions { + componentView?: ComponentView; + file?: File; +} + +export type UploadFileClb = (result: { data: (AssetProps | string)[] }) => void; + +export type UploadFileFn = (ev: DragEvent, clb?: UploadFileClb, opts?: UploadFileOptions) => Promise | undefined; + /**{START_EVENTS}*/ export enum AssetsEvents { /** diff --git a/packages/core/src/asset_manager/view/FileUploader.ts b/packages/core/src/asset_manager/view/FileUploader.ts index e8cef8c581..208298333f 100644 --- a/packages/core/src/asset_manager/view/FileUploader.ts +++ b/packages/core/src/asset_manager/view/FileUploader.ts @@ -4,6 +4,7 @@ import EditorModel from '../../editor/model/Editor'; import fetch from '../../utils/fetch'; import html from '../../utils/html'; import { AssetManagerConfig } from '../config/config'; +import { UploadFileClb, UploadFileOptions } from '../types'; type FileUploaderTemplateProps = { pfx: string; @@ -53,7 +54,7 @@ export default class FileUploaderView extends View { constructor(opts: any = {}) { super(opts); this.options = opts; - const c = opts.config || {}; + const c = (opts.config || {}) as AssetManagerConfig & { pStylePrefix?: string; disableUpload?: boolean }; this.module = opts.module; this.config = c; // @ts-ignore @@ -113,7 +114,7 @@ export default class FileUploaderView extends View { * @param {string} text Response text * @private */ - onUploadResponse(text: string, clb?: (json: any) => void) { + onUploadResponse(text: string, clb?: UploadFileClb) { const { module, config, target } = this; let json; try { @@ -138,9 +139,9 @@ export default class FileUploaderView extends View { * @return {Promise} * @private * */ - uploadFile(e: DragEvent, clb?: () => void) { - // @ts-ignore - const files = e.dataTransfer ? e.dataTransfer.files : e.target.files; + uploadFile(e: DragEvent, clb?: UploadFileClb, opts?: UploadFileOptions) { + opts; // Options are not used here but can be used by the custom uploadFile function + const files = e.dataTransfer ? e.dataTransfer.files : ((e.target as any)?.files as FileList); const { config } = this; const { beforeUpload } = config; @@ -293,7 +294,7 @@ export default class FileUploaderView extends View { return this; } - static embedAsBase64(e: DragEvent, clb?: () => void) { + static embedAsBase64(e: DragEvent, clb?: UploadFileClb) { // List files dropped // @ts-ignore const files = e.dataTransfer ? e.dataTransfer.files : e.target.files; diff --git a/packages/core/src/dom_components/view/ComponentImageView.ts b/packages/core/src/dom_components/view/ComponentImageView.ts index 19d9de56b6..ada10c3c7f 100644 --- a/packages/core/src/dom_components/view/ComponentImageView.ts +++ b/packages/core/src/dom_components/view/ComponentImageView.ts @@ -40,14 +40,17 @@ export default class ComponentImageView { + } as unknown as DragEvent, + (res) => { const obj = res && res.data && res.data[0]; const src = obj && (isString(obj) ? obj : obj.src); src && model.set({ src }); }, + { + componentView: this, + file, + }, ); model.set('file', ''); } diff --git a/packages/core/src/utils/Droppable.ts b/packages/core/src/utils/Droppable.ts index 3685031652..5d5a8aac79 100644 --- a/packages/core/src/utils/Droppable.ts +++ b/packages/core/src/utils/Droppable.ts @@ -1,12 +1,12 @@ import { bindAll, indexOf } from 'underscore'; import CanvasModule from '../canvas'; import { ObjectStrings } from '../common'; +import Component from '../dom_components/model/Component'; import EditorModel from '../editor/model/Editor'; import { getDocumentScroll, off, on } from './dom'; -import { DragDirection, DragSource } from './sorter/types'; import CanvasNewComponentNode from './sorter/CanvasNewComponentNode'; import ComponentSorter from './sorter/ComponentSorter'; -import Component from '../dom_components/model/Component'; +import { DragDirection, DraggableContent, DragSource } from './sorter/types'; // TODO move in sorter type SorterOptions = { @@ -233,7 +233,7 @@ export default class Droppable { handleDrop(ev: Event | DragEvent) { ev.preventDefault(); const dt = (ev as DragEvent).dataTransfer; - const content = this.getContentByData(dt).content; + const content = this.getContentByData(dt!).content || ''; if (this.draggedNode) { this.draggedNode.content = content; } @@ -241,12 +241,12 @@ export default class Droppable { this.endDrop(!content, ev); } - getContentByData(dt: any) { + getContentByData(dt?: DataTransfer) { const em = this.em; - const types = dt && dt.types; - const files = (dt && dt.files) || []; + const types = dt?.types || []; + const files = dt?.files || []; const dragSource: DragSource = em.get('dragSource'); - let content = dt && dt.getData('text'); + let content: DraggableContent['content'] = dt?.getData('text') || ''; if (files.length) { content = []; @@ -280,9 +280,13 @@ export default class Droppable { content = `
${content}
`; } - const result = { content }; + const result = { + content, + setContent(content: DraggableContent['content']) { + result.content = content; + }, + }; em.trigger('canvas:dragdata', dt, result); - return result; } }