From 0752502bff74df81c75399e628ee7fe08dad767a Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 18 Mar 2024 22:29:42 +0400 Subject: [PATCH 1/6] Bump follow-redirects from 1.15.4 to 1.15.6 (#5762) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.4 to 1.15.6. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.4...v1.15.6) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 854cd3dac..cd418114e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6258,9 +6258,9 @@ fn-name@~2.0.1: integrity sha512-oIDB1rXf3BUnn00bh2jVM0byuqr94rBh6g7ZfdKcbmp1we2GQtPzKdloyvBXHs+q3fvxB8EqX5ecFba3RwCSjA== follow-redirects@^1.0.0: - version "1.15.4" - resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf" - integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw== + version "1.15.6" + resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b" + integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA== for-each@^0.3.3: version "0.3.3" From b9fe69f1d6bc214af93753dffc55f8b5a4813354 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Wed, 20 Mar 2024 00:21:02 +0400 Subject: [PATCH 2/6] Added ability to preselect page on project load. Closes #5463 --- src/canvas/model/Canvas.ts | 2 +- src/pages/index.ts | 6 +++++- src/pages/types.ts | 11 ++++++++++- test/specs/pages/index.ts | 23 +++++++++++++++++++---- 4 files changed, 35 insertions(+), 7 deletions(-) diff --git a/src/canvas/model/Canvas.ts b/src/canvas/model/Canvas.ts index 0e0cbf061..85a85c393 100644 --- a/src/canvas/model/Canvas.ts +++ b/src/canvas/model/Canvas.ts @@ -42,7 +42,7 @@ export default class Canvas extends ModuleModel { init() { const { em } = this; - const mainPage = em.Pages.getMain(); + const mainPage = em.Pages._initPage(); this.set('frames', mainPage.getFrames()); this.updateDevice({ frame: mainPage.getMainFrame() }); } diff --git a/src/pages/index.ts b/src/pages/index.ts index ae81a182e..e674e5dbb 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -93,7 +93,7 @@ export default class PageManager extends ItemManagerModule new Page(page, { em, config })) || []; pages.add(configPages, opt); - const mainPage = !pages.length ? this.add({ type: typeMain }, opt) : this.getMain(); + const mainPage = !pages.length ? this.add({ type: typeMain }, opt) : this._initPage(); mainPage && this.select(mainPage, opt); } @@ -242,6 +242,10 @@ export default class PageManager extends ItemManagerModule { let editor: Editor; @@ -70,7 +71,7 @@ describe('Pages', () => { let idComp2 = 'comp2'; let comp1: ComponentDefinition; let comp2: ComponentDefinition; - let initPages; + let initPages: PageProperties[]; let allbyId: ReturnType; const createCompDef = (id: string): ComponentDefinition => ({ @@ -116,8 +117,8 @@ describe('Pages', () => { }, }); em = editor.getModel(); - domc = em.get('DomComponents'); - pm = em.get('PageManager'); + domc = em.Components; + pm = em.Pages; pm.onLoad(); allbyId = domc.allById(); initCmpLen = Object.keys(allbyId).length; @@ -145,7 +146,21 @@ describe('Pages', () => { // Number of wrappers (eg. 3) where each one containes 1 component and 1 textnode (3 * 3) expect(initCmpLen).toBe(initPages.length * 3); // Each page contains 1 rule per component - expect(em.get('CssComposer').getAll().length).toBe(initPages.length); + expect(em.Css.getAll().length).toBe(initPages.length); + }); + + test('Change initial selected page', () => { + const selected = 'page-3'; + editor = new Editor({ + pageManager: { + pages: initPages, + selected, + }, + }); + pm = editor.getModel().Pages; + pm.onLoad(); + pm.getSelected(); + expect(pm.getSelected()?.id).toBe(selected); }); }); }); From 45d6d9e8e3adeab5fe58a00532232100a00a725f Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 21 Mar 2024 20:48:16 +0400 Subject: [PATCH 3/6] Support mixed block content TS. Closes #5768 --- src/block_manager/model/Block.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/block_manager/model/Block.ts b/src/block_manager/model/Block.ts index 7bdfed543..b3414c60e 100644 --- a/src/block_manager/model/Block.ts +++ b/src/block_manager/model/Block.ts @@ -14,7 +14,7 @@ export interface BlockProperties { /** * The content of the block. Might be an HTML string or a [Component Defintion](/modules/Components.html#component-definition) */ - content: string | ComponentDefinition; + content: string | ComponentDefinition | (string | ComponentDefinition)[]; /** * HTML string for the media/icon of the block, eg. ` Date: Thu, 21 Mar 2024 21:28:04 +0400 Subject: [PATCH 4/6] Refactor asset events --- src/asset_manager/index.ts | 73 ++------------------ src/asset_manager/types.ts | 95 ++++++++++++++++++++++++++ src/asset_manager/view/FileUploader.ts | 11 +-- src/editor/index.ts | 3 +- 4 files changed, 109 insertions(+), 73 deletions(-) create mode 100644 src/asset_manager/types.ts diff --git a/src/asset_manager/index.ts b/src/asset_manager/index.ts index fb119b53e..ef6a6cdeb 100644 --- a/src/asset_manager/index.ts +++ b/src/asset_manager/index.ts @@ -14,18 +14,7 @@ * const assetManager = editor.AssetManager; * ``` * - * ## Available Events - * * `asset:open` - Asset Manager opened. - * * `asset:close` - Asset Manager closed. - * * `asset:add` - Asset added. The [Asset] is passed as an argument to the callback. - * * `asset:remove` - Asset removed. The [Asset] is passed as an argument to the callback. - * * `asset:update` - Asset updated. The updated [Asset] and the object containing changes are passed as arguments to the callback. - * * `asset:upload:start` - Before the upload is started. - * * `asset:upload:end` - After the upload is ended. - * * `asset:upload:error` - On any error in upload, passes the error as an argument. - * * `asset:upload:response` - On upload response, passes the result as an argument. - * * `asset` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback. - * * `asset:custom` - Event for handling custom Asset Manager UI. + * {REPLACE_EVENTS} * * ## Methods * * [open](#open) @@ -51,61 +40,12 @@ import Asset from './model/Asset'; import Assets from './model/Assets'; import AssetsView from './view/AssetsView'; import FileUploaderView from './view/FileUploader'; - -export type AssetEvent = - | 'asset' - | 'asset:open' - | 'asset:close' - | 'asset:add' - | 'asset:remove' - | 'asset:update' - | 'asset:custom' - | 'asset:upload:start' - | 'asset:upload:end' - | 'asset:upload:error' - | 'asset:upload:response'; - -export const evAll = 'asset'; -export const evPfx = `${evAll}:`; -export const evSelect = `${evPfx}select`; -export const evUpdate = `${evPfx}update`; -export const evAdd = `${evPfx}add`; -export const evRemove = `${evPfx}remove`; -export const evRemoveBefore = `${evRemove}:before`; -export const evCustom = `${evPfx}custom`; -export const evOpen = `${evPfx}open`; -export const evClose = `${evPfx}close`; -export const evUpload = `${evPfx}upload`; -export const evUploadStart = `${evUpload}:start`; -export const evUploadEnd = `${evUpload}:end`; -export const evUploadError = `${evUpload}:error`; -export const evUploadRes = `${evUpload}:response`; -const assetCmd = 'open-assets'; -const assetEvents = { - all: evAll, - select: evSelect, - update: evUpdate, - add: evAdd, - remove: evRemove, - removeBefore: evRemoveBefore, - custom: evCustom, - open: evOpen, - close: evClose, - uploadStart: evUploadStart, - uploadEnd: evUploadEnd, - uploadError: evUploadError, - uploadResponse: evUploadRes, -}; +import AssetsEvents, { AssetOpenOptions } from './types'; // TODO type AssetProps = Record; -type OpenOptions = { - select?: (asset: Asset, complete: boolean) => void; - types?: string[]; - accept?: string; - target?: any; -}; +const assetCmd = 'open-assets'; export default class AssetManager extends ItemManagerModule { storageKey = 'assets'; @@ -115,7 +55,7 @@ export default class AssetManager extends ItemManagerModule void; + types?: string[]; + accept?: string; + target?: any; +} + +/**{START_EVENTS}*/ +export enum AssetsEvents { + /** + * @event `asset:add` New asset added to the collection. The [Asset] is passed as an argument to the callback. + * @example + * editor.on('asset:add', (asset) => { ... }); + */ + add = 'asset:add', + + /** + * @event `asset:remove` Asset removed from the collection. The [Asset] is passed as an argument to the callback. + * @example + * editor.on('asset:remove', (asset) => { ... }); + */ + remove = 'asset:remove', + removeBefore = 'asset:remove:before', + + /** + * @event `asset:update` Asset updated. The [Asset] and the object containing changes are passed as arguments to the callback. + * @example + * editor.on('asset:update', (asset, updatedProps) => { ... }); + */ + update = 'asset:update', + + /** + * @event `asset:open` Asset Manager opened. + * @example + * editor.on('asset:open', () => { ... }); + */ + open = 'asset:open', + + /** + * @event `asset:close` Asset Manager closed. + * @example + * editor.on('asset:close', () => { ... }); + */ + close = 'asset:close', + + /** + * @event `asset:upload:start` Asset upload start. + * @example + * editor.on('asset:upload:start', () => { ... }); + */ + uploadStart = 'asset:upload:start', + + /** + * @event `asset:upload:end` Asset upload end. + * @example + * editor.on('asset:upload:end', (result) => { ... }); + */ + uploadEnd = 'asset:upload:end', + + /** + * @event `asset:upload:error` Asset upload error. + * @example + * editor.on('asset:upload:error', (error) => { ... }); + */ + uploadError = 'asset:upload:error', + + /** + * @event `asset:upload:response` Asset upload response. + * @example + * editor.on('asset:upload:response', (res) => { ... }); + */ + uploadResponse = 'asset:upload:response', + + /** + * @event `asset:custom` Event to use in case of [custom Asset Manager UI](https://grapesjs.com/docs/modules/Assets.html#customization). + * @example + * editor.on('asset:custom', ({ container, assets, ... }) => { ... }); + */ + custom = 'asset:custom', + + /** + * @event `asset` Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback. + * @example + * editor.on('asset', ({ event, model, ... }) => { ... }); + */ + all = 'asset', +} +/**{END_EVENTS}*/ + +// need this to avoid the TS documentation generator to break +export default AssetsEvents; diff --git a/src/asset_manager/view/FileUploader.ts b/src/asset_manager/view/FileUploader.ts index b37fc4c8c..2df181131 100644 --- a/src/asset_manager/view/FileUploader.ts +++ b/src/asset_manager/view/FileUploader.ts @@ -1,3 +1,4 @@ +import AssetManager from '..'; import { View } from '../../common'; import EditorModel from '../../editor/model/Editor'; import fetch from '../../utils/fetch'; @@ -18,7 +19,7 @@ export default class FileUploaderView extends View { pfx: string; ppfx: string; em: EditorModel; - module: any; + module: AssetManager; target: any; uploadId: string; disabled: boolean; @@ -80,7 +81,7 @@ export default class FileUploaderView extends View { */ onUploadStart() { const { module } = this; - module && module.__propEv('asset:upload:start'); + module?.__propEv(module.events.uploadStart); } /** @@ -90,7 +91,7 @@ export default class FileUploaderView extends View { */ onUploadEnd(res: any) { const { $el, module } = this; - module && module.__propEv('asset:upload:end', res); + module?.__propEv(module.events.uploadEnd, res); const input = $el.find('input'); input && input.val(''); } @@ -104,7 +105,7 @@ export default class FileUploaderView extends View { const { module } = this; console.error(err); this.onUploadEnd(err); - module && module.__propEv('asset:upload:error', err); + module?.__propEv(module.events.uploadError, err); } /** @@ -121,7 +122,7 @@ export default class FileUploaderView extends View { json = text; } - module && module.__propEv('asset:upload:response', json); + module?.__propEv(module.events.uploadResponse, json); if (config.autoAdd && target) { target.add(json.data, { at: 0 }); diff --git a/src/editor/index.ts b/src/editor/index.ts index 184a98e2d..4e3d8b188 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -55,7 +55,8 @@ * @module docsjs.Editor */ import { IBaseModule } from '../abstract/Module'; -import AssetManager, { AssetEvent } from '../asset_manager'; +import AssetManager from '../asset_manager'; +import { AssetEvent } from '../asset_manager/types'; import BlockManager, { BlockEvent } from '../block_manager'; import CanvasModule, { CanvasEvent } from '../canvas'; import CodeManagerModule from '../code_manager'; From 22ff2eb993fdf7f761a2c3dfce728e2c94a91ba3 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 21 Mar 2024 21:31:11 +0400 Subject: [PATCH 5/6] Up TS --- src/asset_manager/index.ts | 78 +++++++++++++++++++------------------- 1 file changed, 40 insertions(+), 38 deletions(-) diff --git a/src/asset_manager/index.ts b/src/asset_manager/index.ts index ef6a6cdeb..12a02f5dd 100644 --- a/src/asset_manager/index.ts +++ b/src/asset_manager/index.ts @@ -34,13 +34,15 @@ import { debounce, isFunction } from 'underscore'; import { ItemManagerModule } from '../abstract/Module'; +import { AddOptions, RemoveOptions } from '../common'; import EditorModel from '../editor/model/Editor'; +import { ProjectData } from '../storage_manager'; import defaults, { AssetManagerConfig } from './config/config'; import Asset from './model/Asset'; import Assets from './model/Assets'; +import AssetsEvents, { AssetOpenOptions } from './types'; import AssetsView from './view/AssetsView'; import FileUploaderView from './view/FileUploader'; -import AssetsEvents, { AssetOpenOptions } from './types'; // TODO type AssetProps = Record; @@ -82,40 +84,6 @@ export default class AssetManager extends ItemManagerModule this.close(), - remove: (asset: string | Asset, opts?: Record) => this.remove(asset, opts), - select: (asset: Asset, complete: boolean) => { - const res = this.add(asset); - isFunction(bhv.select) && bhv.select(res, complete); - }, - // extra - options: bhv.options || {}, - }; - } - /** * Open the asset manager. * @param {Object} [options] Options for the asset manager. @@ -185,7 +153,7 @@ export default class AssetManager extends ItemManagerModule = {}) { + add(asset: string | AssetProps | (string | AssetProps)[], opts: AddOptions = {}) { // Put the model at the beginning if (typeof opts.at == 'undefined') { opts.at = 0; @@ -231,7 +199,7 @@ export default class AssetManager extends ItemManagerModule) { + remove(asset: string | Asset, opts?: RemoveOptions) { return this.__remove(asset, opts); } @@ -239,7 +207,7 @@ export default class AssetManager extends ItemManagerModule) { + load(data: ProjectData) { return this.loadProjectData(data); } @@ -401,6 +369,40 @@ export default class AssetManager extends ItemManagerModule this.close(), + remove: (asset: string | Asset, opts?: Record) => this.remove(asset, opts), + select: (asset: Asset, complete: boolean) => { + const res = this.add(asset); + isFunction(bhv.select) && bhv.select(res, complete); + }, + // extra + options: bhv.options || {}, + }; + } + __behaviour(opts = {}) { return (this._bhv = { ...(this._bhv || {}), From d9ca5e22234eab765b6141b8725be350e1964265 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 21 Mar 2024 21:32:17 +0400 Subject: [PATCH 6/6] Up TS docs --- docs/api/assets.md | 77 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 65 insertions(+), 12 deletions(-) diff --git a/docs/api/assets.md b/docs/api/assets.md index cab8c5b3b..aeb5376d9 100644 --- a/docs/api/assets.md +++ b/docs/api/assets.md @@ -19,18 +19,71 @@ const assetManager = editor.AssetManager; ``` ## Available Events +* `asset:add` New asset added to the collection. The [Asset] is passed as an argument to the callback. -* `asset:open` - Asset Manager opened. -* `asset:close` - Asset Manager closed. -* `asset:add` - Asset added. The [Asset] is passed as an argument to the callback. -* `asset:remove` - Asset removed. The [Asset] is passed as an argument to the callback. -* `asset:update` - Asset updated. The updated [Asset] and the object containing changes are passed as arguments to the callback. -* `asset:upload:start` - Before the upload is started. -* `asset:upload:end` - After the upload is ended. -* `asset:upload:error` - On any error in upload, passes the error as an argument. -* `asset:upload:response` - On upload response, passes the result as an argument. -* `asset` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback. -* `asset:custom` - Event for handling custom Asset Manager UI. +```javascript +editor.on('asset:add', (asset) => { ... }); +``` + +* `asset:remove` Asset removed from the collection. The [Asset] is passed as an argument to the callback. + +```javascript +editor.on('asset:remove', (asset) => { ... }); +``` + +* `asset:update` Asset updated. The [Asset] and the object containing changes are passed as arguments to the callback. + +```javascript +editor.on('asset:update', (asset, updatedProps) => { ... }); +``` + +* `asset:open` Asset Manager opened. + +```javascript +editor.on('asset:open', () => { ... }); +``` + +* `asset:close` Asset Manager closed. + +```javascript +editor.on('asset:close', () => { ... }); +``` + +* `asset:upload:start` Asset upload start. + +```javascript +editor.on('asset:upload:start', () => { ... }); +``` + +* `asset:upload:end` Asset upload end. + +```javascript +editor.on('asset:upload:end', (result) => { ... }); +``` + +* `asset:upload:error` Asset upload error. + +```javascript +editor.on('asset:upload:error', (error) => { ... }); +``` + +* `asset:upload:response` Asset upload response. + +```javascript +editor.on('asset:upload:response', (res) => { ... }); +``` + +* `asset:custom` Event to use in case of [custom Asset Manager UI](https://grapesjs.com/docs/modules/Assets.html#customization). + +```javascript +editor.on('asset:custom', ({ container, assets, ... }) => { ... }); +``` + +* `asset` Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback. + +```javascript +editor.on('asset', ({ event, model, ... }) => { ... }); +``` ## Methods @@ -160,7 +213,7 @@ Remove asset ### Parameters * `asset` **([String][13] | [Asset])** Asset or asset URL -* `opts` **Record<[string][13], any>?** +* `opts` **RemoveOptions?** ### Examples