GrapesJS Angular Page Builder

// grapesjs.service.ts
import { Injectable, ElementRef, NgZone } from '@angular/core';
import grapesjs from 'grapesjs';
import type { Editor } from 'grapesjs';

@Injectable({ providedIn: 'root' })
export class GrapesJSService {
  private editor: Editor | null = null;
  constructor(private zone: NgZone) {}

  init(container: ElementRef): Editor {
    this.editor = grapesjs.init({
      container: container.nativeElement,
      fromElement: false,
      height: '100vh',
      storageManager: false,
    });

    this.editor.on('component:selected', () => {
      this.zone.run(() => {
        // Keep Angular state updates reactive when GrapesJS triggers events.
      });
    });

    return this.editor;
  }

  destroy(): void {
    this.editor?.destroy();
    this.editor = null;
  }
}

// editor.component.ts
import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
import { GrapesJSService } from './grapesjs.service';

@Component({
  selector: 'app-editor',
  template: '<div #editorContainer style="height:100vh"></div>',
})
export class EditorComponent implements AfterViewInit, OnDestroy {
  @ViewChild('editorContainer') container!: ElementRef;

  constructor(private gjsService: GrapesJSService) {}

  ngAfterViewInit(): void { this.gjsService.init(this.container); }
  ngOnDestroy(): void { this.gjsService.destroy(); }
}