v2.0.0-beta.2
Pre-release
Pre-release
This release restructures the library to mirror @grapesjs/react, the official React wrapper. A new custom-UI provider model lets you compose the entire editor shell — sidebars, blocks, layers, style/trait panels — from Angular templates instead of GrapesJS's built-in panels, reaching feature parity with the React render-props API. Contains breaking changes vs 2.0.0-beta.1 (see Changed).
Added
<gjs-canvas>mount-point component enabling custom UI mode — when projected into<gjs-editor>, swaps the editor's default container and disables default panels.- Nine provider components mirroring the
@grapesjs/reactrender-props surface, each exposing typed manager state to a projected<ng-template>:<gjs-blocks-provider>—BlocksState(blocks, drag handlers, container, category map)<gjs-layers-provider>—LayersState(root component, container)<gjs-selectors-provider>—SelectorsState(selectors, states, targets, mutators, container)<gjs-styles-provider>—StylesState(visible sectors, container)<gjs-traits-provider>—TraitsState(current traits, container)<gjs-pages-provider>—PagesState(pages, selected, mutators)<gjs-devices-provider>—DevicesState(devices, selected, select)<gjs-assets-provider>—AssetsState(open, assets, types, select, close, container)<gjs-modal-provider>—ModalState(open, title, content, attributes, close)
*gjsContainerdirective for appending a GrapesJS-ownedHTMLElementinto a host element (Angular equivalent of React's portalContainer).- New component outputs:
editorCreated(fires synchronously aftergrapesjs.init()returns),projectUpdated(fires on every'update'event with latestProjectData). - New component inputs:
grapesjsCss(async<link>injection before init),waitReady(boolean | TemplateRef<unknown>— hide/replace the editor host untileditor.onReady()fires). - New service signal
isInitialized—trueaftergrapesjs.init()returns. - Async CDN plugin loading —
pluginsinput now accepts{ id, src, options }descriptors alongside function references and global names. - Public types:
PluginToLoad,PluginTypeToLoad,GrapesPlugin,ProjectUpdatePayload.
Changed
- BREAKING vs
2.0.0-beta.1—editorReadyoutput semantics changed and the earlier-firing name was moved:- Output
editorReady(previously fired on GrapesJS'load') is renamed toeditorLoaded— same firing point, clearer name. - Output
editorReadynow fires oneditor.onReady()(post-mount, post-storage-load) to match@grapesjs/reactonReadysemantics.
- Output
- BREAKING vs
2.0.0-beta.1— service signalisReadysemantics changed:- Signal
isReady(previously flipped after init) is renamed toisInitialized. - Signal
isReadynow reflects the post-editor.onReady()state.
- Signal
pluginsinput widened fromPlugin[]toPluginTypeToLoad[]— source-compatible; existingPlugin[]assignments still compile.<gjs-editor>now defaults the GrapesJS init config toheight: '100%'andwidth: '100%'so the editor fills its host element. GrapesJS's internal default ofheight: 900pxwas overflowing flex layouts. Consumer config still overrides.
Fixed
<gjs-selectors-provider>and<gjs-styles-provider>now render their projected template on init. In custom-UI mode GrapesJS skips its default panel render — the only place it fires the initialselector:custom/style:customevent — so these panels stayed empty until a component was selected. Both providers now self-trigger the event onwire(), matching<gjs-traits-provider>.- SSR-safe:
<gjs-editor>no longer callsgrapesjs.init()or touches DOM APIs whenPLATFORM_ID === 'server'— the host renders inert andngOnDestroyshort-circuits.