@silexlabs/grapesjs-symbols/src/index.ts

Symbols for GrapesJS

import SymbolsView, { SymbolsViewOptions } from './view/SymbolsView'
import initCommands from './SymbolsCommands'
import { registerCapabilities } from './capabilities'
import initTraits from './view/traits'
import { makeInstanceIdsUnique } from './id-utils'
import { Editor } from 'grapesjs'

export interface SymbolOptions {
  appendTo: string;
  emptyText: string;
  primaryColor: string;
  secondaryColor: string;
  highlightColor: string;
}

export default (editor: Editor, opts: Partial<SymbolOptions> = {}) => {
  const options: SymbolOptions = { ...{
    appendTo: '#symbols',
    emptyText: 'No symbol yet.',
    primaryColor: '#b9a5a6',
    secondaryColor: '#463a3c',
    highlightColor: '#d97aa6',
  },  ...opts }

  editor.on('load', () => {
    // Display symbols
    new SymbolsView({ ...options, editor } as SymbolsViewOptions)

    // Commands to create/delete symbols
    initCommands(editor)

    // Add traits like a plugin
    initTraits(editor, options)

    // When a symbol instance is created (by any method: drop, duplicate, API, etc.),
    // update ID references to match the new unique IDs generated by GrapesJS
    editor.on('symbol:instance:add', ({ component }) => {
      makeInstanceIdsUnique(editor, component)
    })
  })

  // Register AI capabilities if grapesjs-ai-capabilities is loaded
  editor.on('ai-capabilities:ready', (addCapability: (def: Record<string, unknown>) => void) => {
    registerCapabilities(addCapability)
  })
}