diff --git a/packages/core/src/commands/registry.ts b/packages/core/src/commands/registry.ts index 2b631d83a..64ea8ba03 100644 --- a/packages/core/src/commands/registry.ts +++ b/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 = 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; export type CommandStopKnownId = Extract; diff --git a/packages/core/src/commands/view/ExportTemplate.ts b/packages/core/src/commands/view/ExportTemplate.ts index cf1286842..2c154467d 100644 --- a/packages/core/src/commands/view/ExportTemplate.ts +++ b/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; + 'export-template': CommandPublicFnFromHandler; +} + +export interface ExportTemplateCommandRegistryStop { + 'core:open-code': CommandPublicFnFromHandler; + 'export-template': CommandPublicFnFromHandler; +} + +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 }>; + } +} diff --git a/packages/core/test/specs/commands/view/ExportTemplate.ts b/packages/core/test/specs/commands/view/ExportTemplate.ts new file mode 100644 index 000000000..f4dbd8e26 --- /dev/null +++ b/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(() => '
HTML
'), + 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('
HTML
'); + 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); + }); +});