Skip to content

v2.0.0-beta.2

Pre-release
Pre-release

Choose a tag to compare

@goodlime goodlime released this 21 Jun 14:49
33dbdb5

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/react render-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)
  • *gjsContainer directive for appending a GrapesJS-owned HTMLElement into a host element (Angular equivalent of React's portal Container).
  • New component outputs: editorCreated (fires synchronously after grapesjs.init() returns), projectUpdated (fires on every 'update' event with latest ProjectData).
  • New component inputs: grapesjsCss (async <link> injection before init), waitReady (boolean | TemplateRef<unknown> — hide/replace the editor host until editor.onReady() fires).
  • New service signal isInitializedtrue after grapesjs.init() returns.
  • Async CDN plugin loading — plugins input 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.1editorReady output semantics changed and the earlier-firing name was moved:
    • Output editorReady (previously fired on GrapesJS 'load') is renamed to editorLoaded — same firing point, clearer name.
    • Output editorReady now fires on editor.onReady() (post-mount, post-storage-load) to match @grapesjs/react onReady semantics.
  • BREAKING vs 2.0.0-beta.1 — service signal isReady semantics changed:
    • Signal isReady (previously flipped after init) is renamed to isInitialized.
    • Signal isReady now reflects the post-editor.onReady() state.
  • plugins input widened from Plugin[] to PluginTypeToLoad[] — source-compatible; existing Plugin[] assignments still compile.
  • <gjs-editor> now defaults the GrapesJS init config to height: '100%' and width: '100%' so the editor fills its host element. GrapesJS's internal default of height: 900px was 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 initial selector:custom / style:custom event — so these panels stayed empty until a component was selected. Both providers now self-trigger the event on wire(), matching <gjs-traits-provider>.
  • SSR-safe: <gjs-editor> no longer calls grapesjs.init() or touches DOM APIs when PLATFORM_ID === 'server' — the host renders inert and ngOnDestroy short-circuits.