Refactor ExportTemplate

packages/core/src/commands/registry.ts

@@ -13,6 +13,7 @@ import type { CopyComponentCommandRegistryRun } from './view/CopyComponent';
 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';
 
 type CommandRegistryHandler = (...args: any[]) => any;
 type CommandRegistryEntry<TRegistry, TId extends string> = TId extends keyof TRegistry
@@ -28,13 +29,15 @@ export interface CommandRegistryRun
     CopyComponentCommandRegistryRun,
     PasteComponentCommandRegistryRun,
     CanvasMoveCommandRegistryRun,
-    CanvasClearCommandRegistryRun {}
+    CanvasClearCommandRegistryRun,
+    ExportTemplateCommandRegistryRun {}
 
 export interface CommandRegistryStop
   extends FullscreenCommandRegistryStop,
     PreviewCommandRegistryStop,
     ResizeCommandRegistryStop,
-    CanvasMoveCommandRegistryStop {}
+    CanvasMoveCommandRegistryStop,
+    ExportTemplateCommandRegistryStop {}
 
 export type CommandRunKnownId = Extract<keyof CommandRegistryRun, string>;
 export type CommandStopKnownId = Extract<keyof CommandRegistryStop, string>;

packages/core/src/commands/view/ExportTemplate.ts

@@ -1,14 +1,35 @@
-import { CommandObject } from './CommandAbstract';
-import { EditorParam } from '../../editor';
+import Editor, { EditorParam } from '../../editor';
 import { createEl } from '../../utils/dom';
+import type { CommandPublicFnFromHandler } from '../registryHelpers';
+import CommandAbstract from './CommandAbstract';
 
-interface ExportTemplateRunOptions {
+export interface ExportTemplateRunOptions {
   optsHtml?: EditorParam<'getHtml', 0>;
   optsCss?: EditorParam<'getCss', 0>;
 }
 
-export default {
-  run(editor, sender, opts: ExportTemplateRunOptions = {}) {
+export interface ExportTemplateCommandRegistryRun {
+  'core:open-code': CommandPublicFnFromHandler<CommandExportTemplate['run']>;
+  'export-template': CommandPublicFnFromHandler<CommandExportTemplate['run']>;
+}
+
+export interface ExportTemplateCommandRegistryStop {
+  'core:open-code': CommandPublicFnFromHandler<CommandExportTemplate['stop']>;
+  'export-template': CommandPublicFnFromHandler<CommandExportTemplate['stop']>;
+}
+
+export default class CommandExportTemplate extends CommandAbstract<
+  ExportTemplateRunOptions,
+  ExportTemplateRunOptions,
+  void,
+  void
+> {
+  cm: Editor['CodeManager'] | null = null;
+  editors?: HTMLElement;
+  htmlEditor?: { setContent: (content: string) => void };
+  cssEditor?: { setContent: (content?: string) => void };
+
+  run(editor: Editor, sender: any, opts: ExportTemplateRunOptions = {}) {
     sender && sender.set && sender.set('active', 0);
     const config = editor.getConfig();
     const modal = editor.Modal;
@@ -33,14 +54,14 @@ export default {
       })
       .getModel()
       .once('change:open', () => editor.stopCommand(`${this.id}`));
-    this.htmlEditor.setContent(editor.getHtml(opts.optsHtml));
-    this.cssEditor.setContent(editor.getCss(opts.optsCss));
-  },
+    this.htmlEditor?.setContent(editor.getHtml(opts.optsHtml));
+    this.cssEditor?.setContent(editor.getCss(opts.optsCss));
+  }
 
-  stop(editor) {
+  stop(editor: Editor) {
     const modal = editor.Modal;
     modal && modal.close();
-  },
+  }
 
   buildEditor(codeName: string, theme: string, label: string) {
     const cm = this.em.CodeManager;
@@ -56,5 +77,5 @@ export default {
     } as any).render().el;
 
     return { model, el };
-  },
-} as CommandObject<{}, { [k: string]: any }>;
+  }
+}

packages/core/test/specs/commands/view/ExportTemplate.ts

@@ -0,0 +1,59 @@
+import ExportTemplate from '../../../../src/commands/view/ExportTemplate';
+
+describe('ExportTemplate command', () => {
+  test('should open modal and update editors content', () => {
+    const command = new ExportTemplate({});
+    const once = jest.fn();
+    const open = jest.fn(() => ({
+      getModel: jest.fn(() => ({
+        once,
+      })),
+    }));
+    const htmlSetContent = jest.fn();
+    const cssSetContent = jest.fn();
+    const createViewer = jest
+      .fn()
+      .mockImplementationOnce(() => ({ setContent: htmlSetContent }))
+      .mockImplementationOnce(() => ({ setContent: cssSetContent }));
+    const render = jest.fn(function (this: any) {
+      return { el: document.createElement('div') };
+    });
+    const EditorView = jest.fn(() => ({ render }));
+
+    command.em = {
+      CodeManager: {
+        createViewer,
+        getConfig: jest.fn(() => ({})),
+        EditorView,
+      },
+    } as any;
+    command.id = 'core:open-code';
+
+    const sender = { set: jest.fn() };
+    const editor = {
+      getConfig: jest.fn(() => ({ stylePrefix: 'gjs-', textViewCode: 'Code' })),
+      Modal: { open },
+      CodeManager: {},
+      getHtml: jest.fn(() => '<div>HTML</div>'),
+      getCss: jest.fn(() => '.cls{}'),
+      stopCommand: jest.fn(),
+    } as any;
+
+    command.run(editor, sender, {});
+
+    expect(sender.set).toHaveBeenCalledWith('active', 0);
+    expect(open).toHaveBeenCalled();
+    expect(htmlSetContent).toHaveBeenCalledWith('<div>HTML</div>');
+    expect(cssSetContent).toHaveBeenCalledWith('.cls{}');
+    expect(once).toHaveBeenCalledWith('change:open', expect.any(Function));
+  });
+
+  test('stop should close the modal', () => {
+    const command = new ExportTemplate({});
+    const close = jest.fn();
+
+    command.stop({ Modal: { close } } as any);
+
+    expect(close).toHaveBeenCalledTimes(1);
+  });
+});