Refactor OpenAssets

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,

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 {
+export interface OpenAssetsCommandRegistryRun {
-  open(content: string) {
+  'core:open-assets': CommandPublicFnFromHandler<CommandOpenAssets['run']>;
+  'open-assets': CommandPublicFnFromHandler<CommandOpenAssets['run']>;
+}
+
+export interface OpenAssetsCommandRegistryStop {
+  'core:open-assets': CommandPublicFnFromHandler<CommandOpenAssets['stop']>;
+  'open-assets': CommandPublicFnFromHandler<CommandOpenAssets['stop']>;
+}
+
+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 { rendered } = this;
-        const uploadEl = this.rendered.querySelector(`input#${config.stylePrefix}uploadFile`);
+      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);
+    this.close();
-  },
+  }
-} as CommandObject<any, { [k: string]: any }>;
+}

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);
+  });
+});