diff --git a/packages/core/src/commands/registry.ts b/packages/core/src/commands/registry.ts index 25c51e283..c2fb1cd80 100644 --- a/packages/core/src/commands/registry.ts +++ b/packages/core/src/commands/registry.ts @@ -14,6 +14,7 @@ import type { PasteComponentCommandRegistryRun } from './view/PasteComponent'; import type { CanvasMoveCommandRegistryRun, CanvasMoveCommandRegistryStop } from './view/CanvasMove'; import type { CanvasClearCommandRegistryRun } from './view/CanvasClear'; import type { ExportTemplateCommandRegistryRun, ExportTemplateCommandRegistryStop } from './view/ExportTemplate'; +import type { OpenAssetsCommandRegistryRun, OpenAssetsCommandRegistryStop } from './view/OpenAssets'; import type { OpenLayersCommandRegistryRun, OpenLayersCommandRegistryStop } from './view/OpenLayers'; import type { OpenBlocksCommandRegistryRun, OpenBlocksCommandRegistryStop } from './view/OpenBlocks'; import type { @@ -41,6 +42,7 @@ export interface CommandRegistryRun CanvasMoveCommandRegistryRun, CanvasClearCommandRegistryRun, ExportTemplateCommandRegistryRun, + OpenAssetsCommandRegistryRun, OpenBlocksCommandRegistryRun, OpenLayersCommandRegistryRun, OpenStyleManagerCommandRegistryRun, @@ -52,6 +54,7 @@ export interface CommandRegistryStop ResizeCommandRegistryStop, CanvasMoveCommandRegistryStop, ExportTemplateCommandRegistryStop, + OpenAssetsCommandRegistryStop, OpenBlocksCommandRegistryStop, OpenLayersCommandRegistryStop, OpenStyleManagerCommandRegistryStop, diff --git a/packages/core/src/commands/view/OpenAssets.ts b/packages/core/src/commands/view/OpenAssets.ts index c76cc4fb1..45340d89b 100644 --- a/packages/core/src/commands/view/OpenAssets.ts +++ b/packages/core/src/commands/view/OpenAssets.ts @@ -1,29 +1,53 @@ import { isFunction } from 'underscore'; import Asset from '../../asset_manager/model/Asset'; +import Editor from '../../editor'; import { createEl } from '../../utils/dom'; -import { CommandObject } from './CommandAbstract'; +import type { CommandPublicFnFromHandler } from '../registryHelpers'; +import CommandAbstract from './CommandAbstract'; -export default { - open(content: string) { +export interface OpenAssetsCommandRegistryRun { + 'core:open-assets': CommandPublicFnFromHandler; + 'open-assets': CommandPublicFnFromHandler; +} + +export interface OpenAssetsCommandRegistryStop { + 'core:open-assets': CommandPublicFnFromHandler; + 'open-assets': CommandPublicFnFromHandler; +} + +export default class CommandOpenAssets extends CommandAbstract { + title = ''; + editor?: Editor; + am?: any; + rendered?: HTMLElement; + + open(content: string | HTMLElement) { const { editor, title, config, am } = this; + if (!editor || !config || !am) return; const { custom } = config; + if (isFunction(custom.open)) { return custom.open(am.__customData()); } + const { Modal } = editor; - Modal.open({ title, content }).onceClose(() => editor.stopCommand(this.id)); - }, + Modal.open({ title, content }).onceClose(() => editor.stopCommand(this.id as string)); + } close() { - const { custom } = this.config; + const { config, am, editor } = this; + if (!config || !am || !editor) return; + const { custom } = config; + if (isFunction(custom.close)) { - return custom.close(this.am.__customData()); + return custom.close(am.__customData()); } - const { Modal } = this.editor; + + const { Modal } = editor; Modal && Modal.close(); - }, + } - run(editor, sender, opts = {}) { + run(editor: Editor, sender: any, opts: any = {}) { const am = editor.AssetManager; const config = am.getConfig(); const { types = [], accept, select } = opts; @@ -59,18 +83,20 @@ export default { this.rendered = am.getContainer(); } - if (accept) { - const uploadEl = this.rendered.querySelector(`input#${config.stylePrefix}uploadFile`); + const { rendered } = this; + if (accept && rendered) { + const uploadEl = rendered.querySelector(`input#${config.stylePrefix}uploadFile`); uploadEl && uploadEl.setAttribute('accept', accept); } } - this.open(this.rendered); + const { rendered } = this; + rendered && this.open(rendered); return this; - }, + } - stop(editor) { + stop(editor: Editor) { this.editor = editor; - this.close(this.rendered); - }, -} as CommandObject; + this.close(); + } +} diff --git a/packages/core/test/specs/commands/view/OpenAssets.ts b/packages/core/test/specs/commands/view/OpenAssets.ts new file mode 100644 index 000000000..7869c39d8 --- /dev/null +++ b/packages/core/test/specs/commands/view/OpenAssets.ts @@ -0,0 +1,37 @@ +import OpenAssets from '../../../../src/commands/view/OpenAssets'; + +describe('OpenAssets command', () => { + test('open should open the modal', () => { + const onceClose = jest.fn(); + const command = new OpenAssets({}); + command.editor = { + Modal: { + open: jest.fn(() => ({ onceClose })), + }, + stopCommand: jest.fn(), + } as any; + command.am = { __customData: jest.fn() }; + command.config = { custom: false }; + command.title = 'Assets'; + + command.open('content'); + + expect(command.editor.Modal.open).toHaveBeenCalledWith({ title: 'Assets', content: 'content' }); + expect(onceClose).toHaveBeenCalledTimes(1); + }); + + test('stop should close the modal', () => { + const command = new OpenAssets({}); + command.editor = { + Modal: { + close: jest.fn(), + }, + } as any; + command.am = { __customData: jest.fn() }; + command.config = { custom: false }; + + command.stop(command.editor); + + expect(command.editor.Modal.close).toHaveBeenCalledTimes(1); + }); +});