GrapesJS TypeScript — Integrationsleitfaden

import grapesjs from 'grapesjs';
import type { Editor, Component, Block } from 'grapesjs';

// Typed editor instance
let editor: Editor | null = null;

editor = grapesjs.init({
  container: '#gjs',
  storageManager: false,
});

// Typed event handlers
editor.on('component:add', (component: Component) => {
  console.log('Added component:', component.get('type'));
});

// Typed block access
const blockManager = editor.BlockManager;
const blocks: Block[] = blockManager.getAll().models;

import type { Editor } from 'grapesjs';

interface MyPluginOptions {
  apiKey?: string;
  debug?: boolean;
}

const myPlugin = (editor: Editor, opts: MyPluginOptions = {}) => {
  const { apiKey = '', debug = false } = opts;

  editor.BlockManager.add('custom-block', {
    label: 'Custom Block',
    category: 'Custom',
    content: '<div class="custom-block">Custom content</div>',
  });

  if (debug) {
    console.log('Plugin initialized with API key:', apiKey);
  }
};

export default myPlugin;

import type { ComponentDefinition, ComponentProperties } from 'grapesjs';

// Typed component definition
const heroComponent: ComponentDefinition = {
  model: {
    defaults: {
      tagName: 'section',
      draggable: true,
      droppable: false,
      attributes: { class: 'hero-section' },
      traits: [
        { type: 'text', name: 'headline', label: 'Headline' },
        { type: 'text', name: 'subheadline', label: 'Subheadline' },
      ],
    } as ComponentProperties,
  },
};

editor.ComponentManager.addType('hero', heroComponent);