### Install and Start Development Server

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/README.md

Commands to install project dependencies and start the development server.

```bash
# Install
npm i

# Start dev server
npm start
```

--------------------------------

### Start Development Server

Source: https://github.com/grapesjs/preset-newsletter/blob/master/README.md

Run the development server to preview changes locally after cloning and installing the preset newsletter.

```sh
$ npm start
```

--------------------------------

### Clone and Install Newsletter Preset

Source: https://github.com/grapesjs/preset-newsletter/blob/master/README.md

Clone the preset newsletter repository and install its dependencies using npm. This is the initial setup for development.

```sh
$ git clone https://github.com/grapesjs/preset-newsletter.git
$ cd preset-newsletter
$ npm i
```

--------------------------------

### Install GrapesJS Newsletter Preset

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/README.md

Install the newsletter preset package using npm.

```bash
npm install grapesjs-preset-newsletter
```

--------------------------------

### Code Examples Specification

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/MANIFEST.md

Outlines the expected quantity, types, format, and best practices for code examples within the documentation.

```markdown
- **Count:** 50+ examples across all files
- **Types:** Configuration, command execution, block customization, API usage
- **Format:** TypeScript with syntax highlighting
- **Best Practices:** Show realistic patterns, error handling, common use cases
```

--------------------------------

### Initialize Plugin with Options

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/configuration.md

Example of initializing the plugin with required options, merging user-provided options with defaults. Ensure all properties are defined.

```typescript
const options: RequiredPluginOptions = {
  blocks: ['sect100', 'sect50', ...],
  block: () => ({}),
  juiceOpts: {},
  cmdOpenImport: 'gjs-open-import-template',
  // ... all other options with defaults
  ...opts, // merge user-provided opts
};
```

--------------------------------

### Accessing Style Manager Instance

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-styles.md

Demonstrates how to get the StyleManager instance from the editor object.

```APIDOC
## Access Style Manager Instance

### Description
Get the StyleManager instance to interact with styling options.

### Code
```typescript
editor.StyleManager
```
```

--------------------------------

### Commands API

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/README.md

Provides examples of how to programmatically run commands offered by the GrapesJS Newsletter Preset. These commands allow for various actions like getting HTML, importing templates, and toggling image visibility.

```APIDOC
## Commands API

### Description
Run commands programmatically using the `editor.runCommand()` method. This allows for direct interaction with various functionalities provided by the preset.

### Method
```typescript
editor.runCommand('gjs-get-inlined-html');
editor.runCommand('gjs-open-import-template');
editor.runCommand('gjs-toggle-images');
editor.runCommand('set-device-desktop');
```

### See Also
[api-reference-commands.md](api-reference-commands.md) for all 10 commands.
```

--------------------------------

### Minimal GrapesJS Newsletter Preset Configuration

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/REFERENCE-SUMMARY.md

Initializes the GrapesJS editor with the newsletter preset using default settings. This is the simplest way to get started.

```typescript
const editor = grapesjs.init({
  container: '#gjs',
  plugins: [plugin]
});
```

--------------------------------

### Usage Example: Toggling Images

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-commands.md

Demonstrates how to programmatically run and stop the `gjs-toggle-images` command to disable and restore image loading in the editor.

```typescript
// Disable images (run command)
editor.runCommand('gjs-toggle-images');
// All images show placeholder, src = '##'

// Restore images (stop command)
// In GrapesJS, stopping a toggle command:
const cmd = editor.Commands.get('gjs-toggle-images');
cmd.stop(editor);
// Images restored to original srcs
```

--------------------------------

### Import Template Command Configuration

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-commands.md

Provides an example configuration object for the 'gjs-open-import-template' command, allowing customization of command ID, modal titles, labels, button text, placeholder content, and code viewer theme.

```typescript
{
  cmdOpenImport: 'gjs-open-import-template',
  modalTitleImport: 'Import template',
  modalLabelImport: 'Paste your HTML:',
  modalBtnImport: 'Import',
  importPlaceholder: '<table><tr><td>Sample</td></tr></table>',
  codeViewerTheme: 'hopscotch'
}
```

--------------------------------

### Interact with Panels API

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/README.md

Access and manipulate panel components, such as buttons, programmatically. This example shows how to get a specific button and activate it.

```typescript
const button = editor.Panels.getButton('views', 'open-sm');
button?.set('active', true);
```

--------------------------------

### Get All Sectors

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-styles.md

Retrieves all the currently defined sectors within the Style Manager.

```APIDOC
## Get All Sectors

### Description
Retrieve a list of all available sectors in the Style Manager.

### Code
```typescript
const sectors = editor.StyleManager.getSectors();
```
```

--------------------------------

### Define a Custom Block with Properties

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-blocks.md

Example of adding a custom block ('sect100') using `addBlock`. It demonstrates setting standard block properties like `label`, `media`, `content`, and `select`, and merging with custom options obtained from `opts.block`.

```typescript
addBlock('sect100', {
  label: '1 Section',
  media: `<svg viewBox=\"...\">...</svg>`,
  content: `<table style=\"...\"><tr><td></td></tr></table>`,
  select: true,  // Auto-select the table when added
  ...opts.block('sect100'),  // Merge custom options
});
```

--------------------------------

### Configure Newsletter Preset Options

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/README.md

Customize the newsletter preset by providing options during initialization. This example shows how to enable specific blocks, customize table styles, enable inline CSS, and modify modal titles.

```typescript
{
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: {
      // Enable only specific blocks
      blocks: ['sect100', 'sect50', 'button', 'image', 'text'],
      
      // Customize table styling
      tableStyle: {
        width: '100%',
        margin: '10px auto'
      },
      
      // Export with inlined CSS
      inlineCss: true,
      
      // Custom modal titles
      modalTitleExport: 'Download HTML',
      modalTitleImport: 'Paste Template',
      
      // Style manager customization
      updateStyleManager: true,
      showStylesOnChange: true,
      showBlocksOnLoad: true
    }
  }
}
```

--------------------------------

### Example Usage of RequiredPluginOptions

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/types.md

Demonstrates how `RequiredPluginOptions` is used within the plugin to define a complete set of options, including merging user-provided options with defaults.

```typescript
const options: RequiredPluginOptions = {
  blocks: ['sect100', 'sect50', ...],
  block: () => ({}),
  juiceOpts: {},
  cmdOpenImport: 'gjs-open-import-template',
  cmdTglImages: 'gjs-toggle-images',
  cmdInlineHtml: 'gjs-get-inlined-html',
  modalTitleImport: 'Import template',
  modalTitleExport: 'Export template',
  modalLabelImport: '',
  modalLabelExport: '',
  modalBtnImport: 'Import',
  codeViewerTheme: 'hopscotch',
  importPlaceholder: '',
  inlineCss: true,
  cellStyle: { padding: '0', margin: '0', 'vertical-align': 'top' },
  tableStyle: { height: '150px', margin: '0 auto 10px auto', padding: '5px 5px 5px 5px', width: '100%' },
  updateStyleManager: true,
  showStylesOnChange: true,
  showBlocksOnLoad: true,
  useCustomTheme: true,
  textCleanCanvas: 'Are you sure you want to clear the canvas?',
  ...opts,
};
```

--------------------------------

### Get Specific Sector

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-styles.md

Fetches a specific sector from the Style Manager by its name.

```APIDOC
## Get Specific Sector

### Description
Access a particular sector within the Style Manager using its identifier.

### Parameters
#### Path Parameters
- **name** (string) - Required - The name or identifier of the sector to retrieve.

### Code
```typescript
const sector = sectors.getProperty('Dimension');
```
```

--------------------------------

### Style Manager Customization Callback

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-styles.md

An example of a callback function that executes once the GrapesJS editor is ready and the Style Manager has been customized with newsletter-specific sectors.

```javascript
editor.on('editor:load', () => {
  // Style Manager has been customized with newsletter sectors
});
```

--------------------------------

### Get a Panel Instance

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-panels.md

Retrieves a specific panel instance from the editor using its ID.

```typescript
const panel = editor.Panels.getPanel('options');
```

--------------------------------

### Access Style Manager Instance

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-styles.md

Get the StyleManager instance from the editor object. This is the entry point for all Style Manager operations.

```typescript
editor.StyleManager
```

--------------------------------

### Get All Sectors from Style Manager

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-styles.md

Retrieve all available sectors within the Style Manager. This can be useful for inspecting or iterating over existing styles.

```typescript
// Get current sectors
const sectors = editor.StyleManager.getSectors();
```

--------------------------------

### Customizing Block Attributes

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-blocks.md

Example of how to customize block attributes, such as adding a class to the 'sect100' block. This allows for specific styling or targeting of blocks.

```typescript
{
  block: (blockId) => {
    if (blockId === 'sect100') {
      return {
        attributes: { class: 'hero-section' }
      };
    }
    return {};
  }
}
```

--------------------------------

### Run gjs-get-inlined-html Command

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-commands.md

Executes the 'gjs-get-inlined-html' command to get the editor's content with CSS inlined. Custom `juice` options can be provided. This is useful for email compatibility.

```typescript
const inlinedHtml = editor.runCommand('gjs-get-inlined-html');
console.log(inlinedHtml);  // HTML with inlined styles
```

```typescript
const inlinedHtml = editor.runCommand('gjs-get-inlined-html', null, {
  removeStyleTags: false,
  preserveMediaQueries: true
});
```

```typescript
const html = editor.runCommand('gjs-get-inlined-html');
navigator.clipboard.writeText(html);
```

--------------------------------

### Set Import Placeholder HTML

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/configuration.md

Provide default HTML content for the import code editor. This serves as a placeholder or starting point for users importing templates.

```typescript
{
  importPlaceholder: '<table><tr><td>Hello World</td></tr></table>'
}
```

--------------------------------

### Build and Test Project

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/README.md

Commands to build the project for production and run tests.

```bash
# Build for production
npm run build

# Run tests
npm test
```

--------------------------------

### Run set-device-desktop Command

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-commands.md

Executes the 'set-device-desktop' command to switch the editor to desktop preview mode. Ensure the editor instance is available.

```typescript
editor.runCommand('set-device-desktop');
```

--------------------------------

### Initialize GrapesJS with Newsletter Plugin

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/REFERENCE-SUMMARY.md

Demonstrates how to initialize GrapesJS and include the newsletter preset plugin. Specify plugin options within the `pluginsOpts` object.

```typescript
import plugin from 'grapesjs-preset-newsletter';

const editor = grapesjs.init({
  container: '#gjs',
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
});
```

--------------------------------

### Build Newsletter Preset

Source: https://github.com/grapesjs/preset-newsletter/blob/master/README.md

Build the project for production, which also increments the patch version of the package. This command should be run before committing.

```sh
$ npm run build
```

--------------------------------

### Initialize GrapesJS with Newsletter Preset (JavaScript)

Source: https://github.com/grapesjs/preset-newsletter/blob/master/README.md

Import GrapesJS and the newsletter preset plugin in a modern JavaScript project. Initialize the editor with the plugin and its options.

```javascript
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-preset-newsletter';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
  // or
  plugins: [
    editor => plugin(editor, { /* options */ }),
  ],
});
```

--------------------------------

### Initialize GrapesJS with Newsletter Preset (HTML)

Source: https://github.com/grapesjs/preset-newsletter/blob/master/README.md

Directly include the GrapesJS and preset newsletter scripts in an HTML file to initialize the editor. Ensure the container div and plugin configuration are correctly set.

```html
<link href="path/to/grapes.min.css" rel="stylesheet"/>
<script src="path/to/grapes.min.js"></script>
<script src="path/to/grapesjs-preset-newsletter.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      ...
      plugins: ['grapesjs-preset-newsletter'],
      pluginsOpts: {
        'grapesjs-preset-newsletter': {
          // options
        }
      }
  });
</script>
```

--------------------------------

### Initialize GrapesJS with Newsletter Preset

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/00-START-HERE.md

Import the necessary libraries and initialize the GrapesJS editor with the newsletter preset. Configure the preset options to customize the available blocks and export modal.

```typescript
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-preset-newsletter';

const editor = grapesjs.init({
  container: '#gjs',
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: {
      // All options are optional, defaults provided
      blocks: ['sect100', 'sect50', 'button', 'image', 'text'],
      inlineCss: true,
      modalTitleExport: 'Download HTML'
    }
  }
});
```

--------------------------------

### Code Quality Standards

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/MANIFEST.md

Specifies the standards for code quality and documentation within code examples.

```markdown
- [x] All type annotations shown
- [x] Default values clearly stated
- [x] Return types specified
- [x] Behavior documented (not inferred)
- [x] Edge cases and limitations noted
```

--------------------------------

### Run set-device-tablet Command

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-commands.md

Executes the 'set-device-tablet' command to switch the editor to tablet preview mode. This is helpful for testing tablet layouts.

```typescript
editor.runCommand('set-device-tablet');
```

--------------------------------

### Panel Initialization

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-panels.md

Initializes the editor panels, configuring them with device buttons, style controls, and import/export interfaces. It also sets up necessary event listeners for UI behavior.

```APIDOC
## loadPanels

### Description
Configures the editor panels with device buttons, style controls, and specialized export/import interfaces. Also sets up event listeners for UI behavior.

### Function Signature
```typescript
function loadPanels(editor: Editor, opts: Required<PluginOptions>): void
```

### Parameters
#### editor
- Type: `Editor`
- Required: Yes
- Description: GrapesJS editor instance

#### opts
- Type: `Required<PluginOptions>`
- Required: Yes
- Description: Plugin configuration with all options resolved

### Returns
- Type: `void`
```

--------------------------------

### Run Import Template Command

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-commands.md

Demonstrates how to trigger the 'gjs-open-import-template' command. After the command is run, the user is expected to paste HTML into the modal and click the 'Import' button.

```typescript
// User clicks import button to open modal
editor.runCommand('gjs-open-import-template');

// User pastes HTML:
// <table><tr><td>Hello World</td></tr></table>

// Clicks "Import"
// -> Editor clears and loads the new template
```

--------------------------------

### Get a Panel Button

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-panels.md

Retrieves a specific button instance from a panel using the panel's ID and the button's ID.

```typescript
const btn = editor.Panels.getButton('views', 'open-sm');
```

--------------------------------

### API Completeness Checklist

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/MANIFEST.md

Ensures all aspects of the API, configuration, and UI elements are thoroughly documented.

```markdown
- [x] Every exported function documented
- [x] Every interface/type documented
- [x] Every configuration option documented
- [x] Every command documented with full signature
- [x] Every block documented with content and use cases
- [x] Every style property documented with controls
- [x] Every UI panel and button documented
```

--------------------------------

### Style Manager Initialization

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-styles.md

Initializes or updates the Style Manager with email-optimized style sectors. This function registers a callback on `editor.onReady()` to apply styles after the editor is fully initialized, but only if `opts.updateStyleManager` is set to `true`.

```APIDOC
## loadStyles

### Description
Initializes or updates the Style Manager with email-optimized style sectors. Only applies customization if `opts.updateStyleManager` is `true`.

### Function Signature
```typescript
function loadStyles(editor: Editor, opts: Required<PluginOptions>): void
```

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- None

### Parameters
- **editor** (`Editor`) - Required - GrapesJS editor instance
- **opts** (`Required<PluginOptions>`) - Required - Plugin configuration with all options resolved

### Returns
- `void`

### Execution
Registers a callback on `editor.onReady()` to apply styles after the editor is fully initialized.

### Example
```typescript
editor.on('editor:load', () => {
  // Style Manager has been customized with newsletter sectors
});
```
```

--------------------------------

### GrapesJS Components Interface

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/types.md

Represents a collection of components, supporting iteration and filtering. Used for traversing the component tree, for example, in the toggle images command.

```typescript
interface Components extends Iterable<Component> {
  forEach(callback: (component: Component) => void): void;
  // Additional methods used by toggleImages:
  clear(): void;
  // ... other methods
}
```

--------------------------------

### Browser Initialization for Newsletter Plugin

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/index.md

Includes the newsletter preset script and initializes GrapesJS in the browser. Options can be passed via pluginsOpts.

```html
<script src="path/to/grapesjs-preset-newsletter.min.js"></script>
<script>
  var editor = grapesjs.init({
    container: '#gjs',
    plugins: ['grapesjs-preset-newsletter'],
    pluginsOpts: {
      'grapesjs-preset-newsletter': { /* options */ }
    }
  });
</script>
```

--------------------------------

### Initialize Newsletter Plugin

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/index.md

Initializes the GrapesJS editor with the newsletter preset. Configure blocks and inline CSS via pluginsOpts.

```typescript
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-preset-newsletter';

const editor = grapesjs.init({
  container: '#gjs',
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: {
      blocks: ['sect100', 'sect50', 'button', 'image'],
      inlineCss: true
    }
  }
});
```

--------------------------------

### Documentation Structure Overview

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/MANIFEST.md

Illustrates the hierarchical organization of documentation files, from the master README to detailed API references.

```markdown
README.md (Master index)
├── Quick Start & Overview
├── Feature Overview
├── Configuration Quick Reference
├── API Entry Points Summary
├── Block Reference Summary
└── Links to detailed docs

REFERENCE-SUMMARY.md (Quick lookup)
├── Core Exports
├── Feature Map (all blocks, commands, etc.)
├── Configuration Summary
├── API Summary by Source File
└── Common Customization Patterns

Detailed Documentation (organized by topic)
├── index.md
│   └── Plugin overview, entry points, source file map
├── configuration.md
│   └── All 21 options with defaults, types, examples
├── types.md
│   └── All type definitions with field tables
├── api-reference-blocks.md
│   └── All 14 blocks with content, styling, use cases
├── api-reference-commands.md
│   └── All 10 commands with signatures, parameters, examples
├── api-reference-styles.md
│   └── Style Manager with 3 sectors, 20+ properties
└── api-reference-panels.md
    └── 4 panels with 20+ buttons, icons, event handlers
```

--------------------------------

### Get a Specific Sector

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-styles.md

Access a particular sector within the Style Manager by its name. Use this to target specific style categories like 'Dimension'.

```typescript
// Get a specific sector
const sector = sectors.getProperty('Dimension');
```

--------------------------------

### Enable Device Preview Mode

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-panels.md

Sets the `devicePreviewMode` configuration to `true` to enable responsive previews for different screen sizes within the GrapesJS editor.

```typescript
config.devicePreviewMode = true;
```

--------------------------------

### Get Inlined HTML

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/00-START-HERE.md

Programmatically retrieve the inlined HTML content of the editor. This command is useful for exporting the final HTML with all styles applied directly to elements.

```typescript
const html = editor.runCommand('gjs-get-inlined-html');
```

--------------------------------

### Run set-device-mobile Command

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-commands.md

Executes the 'set-device-mobile' command to switch the editor to mobile portrait preview mode. Use this to verify mobile rendering.

```typescript
editor.runCommand('set-device-mobile');
```

--------------------------------

### Panels API

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/README.md

Illustrates how to interact with the Panels API to access and control UI elements like buttons, for instance, activating the 'open-sm' button to show the Style Manager.

```APIDOC
## Panels API

### Description
Interact with the Panels API to manage UI elements such as buttons. This example demonstrates retrieving a specific button ('open-sm' in the 'views' category) and activating it.

### Method
```typescript
const button = editor.Panels.getButton('views', 'open-sm');
button?.set('active', true);
```

### See Also
[api-reference-panels.md](api-reference-panels.md).
```

--------------------------------

### Options Panel Configuration

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-panels.md

Defines the buttons and their commands for the options panel. Each button has an ID, a command, a label, an icon, and a description.

```markdown
| Button ID | Command | Label | Icon | Description |
|-----------|---------|-------|------|-------------|
| `sw-visibility` | `sw-visibility` | Outline | Grid/outline icon | Toggle outline/visibility overlay |
| `preview` | `preview` | Preview | Eye icon | Toggle preview mode |
| `fullscreen` | `fullscreen` | Fullscreen | Fullscreen icon | Toggle fullscreen mode |
| `export-template` | `export-template` | Export | Export icon | Open export modal with HTML code |
| `gjs-open-import-template` | Import | `gjs-open-import-template` | Upload/import icon | Open import modal for HTML template |
| `gjs-toggle-images` | `gjs-toggle-images` | Toggle images | Image toggle icon | Toggle image sources on/off |
| `undo` | `core:undo` | Undo | Undo icon | Undo last action |
| `redo` | `core:redo` | Redo | Redo icon | Redo last action |
| `canvas-clear` | `canvas-clear` | Clear | Trash/delete icon | Clear canvas (with confirmation) |
```

--------------------------------

### Initialize GrapesJS with Newsletter Preset

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/README.md

Basic initialization of GrapesJS with the newsletter preset. Ensure the container element exists in your HTML.

```typescript
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-preset-newsletter';

const editor = grapesjs.init({
  container: '#gjs',
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: {
      // options here
    }
  }
});
```

--------------------------------

### set-device-desktop

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-commands.md

Switches the editor canvas to desktop view. This command is useful for previewing how content will appear on a standard desktop screen.

```APIDOC
## set-device-desktop

### Description
Switches the editor canvas to desktop view.

### Method
runCommand

### Parameters
None

### Request Example
```typescript
editor.runCommand('set-device-desktop');
```

### Response
Returns `void`.
```

--------------------------------

### Devices Panel Configuration

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-panels.md

Details the configuration of the devices panel, which includes buttons for switching between desktop, tablet, and mobile views.

```APIDOC
## Devices Panel

### Panel ID
`devices-c`

### Purpose
Device preview selection buttons

### Buttons

| Button ID | Command | Active | Label | Icon | Description |
|---|---|---|---|---|---|
| `set-device-desktop` | `set-device-desktop` | Yes (default) | Desktop icon | Desktop monitor | Switch to desktop view |
| `set-device-tablet` | `set-device-tablet` | No | Tablet icon | Tablet device | Switch to tablet view |
| `set-device-mobile` | `set-device-mobile` | No | Mobile icon | Mobile phone | Switch to mobile portrait view |

### Behavior
- Only one device button active at a time
- Clicking a device button switches the editor canvas to that view
- Desktop is active by default
```

--------------------------------

### Panel Initialization Function

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-panels.md

Function to load and configure the editor panels. It sets up device buttons, style controls, and import/export interfaces, along with UI event listeners.

```typescript
function loadPanels(editor: Editor, opts: Required<PluginOptions>): void
```

--------------------------------

### Run GrapesJS Command

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-commands.md

Demonstrates how to execute a GrapesJS command using its ID. This can be done programmatically via the editor instance.

```typescript
editor.runCommand('command-id');
```

--------------------------------

### Main Plugin Registration

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/README.md

Demonstrates how to register the newsletter preset plugin with GrapesJS, either directly or via the plugins array during initialization. It also shows how to pass options to the plugin.

```APIDOC
## Main Plugin Registration

### Description
Register the newsletter preset plugin with GrapesJS. This can be done directly using `editor.use(plugin)` or indirectly via the `plugins` array in `grapesjs.init`. Options can be passed to the plugin via `pluginsOpts`.

### Method
```typescript
import plugin from 'grapesjs-preset-newsletter';

// Register with GrapesJS
editor.use(plugin);

// Or via plugins array
grapesjs.init({
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
});
```

### Signature
```typescript
Plugin<PluginOptions> = (editor: Editor, opts?: Partial<PluginOptions>) => void
```

### See Also
[index.md](index.md)
```

--------------------------------

### Editor Ready Event Listener

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-panels.md

Listens for the `editor:ready` event to automatically open the Block Manager when the editor has finished loading, if configured to do so.

```APIDOC
## Event: `editor:ready` (via `editor.onReady()`)

### Description
Automatically opens the Block Manager when the editor finishes loading, if `opts.showBlocksOnLoad` is true.

### Handler
```typescript
editor.onReady(() => {
  if (opts.showBlocksOnLoad) {
    const openBlocksBtn = Panels.getButton('views', 'open-blocks');
    openBlocksBtn?.set('active', true);  // Activate Block Manager
  }
});
```
```

--------------------------------

### Plugin Entry Point Function

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/types.md

Defines the main entry point for the GrapesJS plugin. It accepts editor instance and options, merging them with defaults to initialize various plugin modules.

```typescript
// From src/index.ts
const plugin: Plugin<PluginOptions> = (editor: Editor, opts: Partial<PluginOptions> = {}) => {
  // opts merged with defaults to create RequiredPluginOptions
  const options: RequiredPluginOptions = { ...defaults, ...opts };
  
  loadCommands(editor, options);
  loadBlocks(editor, options);
  loadPanels(editor, options);
  loadStyles(editor, options);
};
```

--------------------------------

### Initialize Newsletter Preset with Custom Options

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/configuration.md

Initialize the GrapesJS editor with the newsletter preset, customizing blocks, styles, export settings, and UI elements.

```typescript
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-preset-newsletter';

const editor = grapesjs.init({
  container: '#gjs',
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: {
      // Include only specific blocks
      blocks: ['sect100', 'sect50', 'button', 'image', 'text', 'divider'],
      
      // Customize block options
      block: (blockId) => {
        if (blockId === 'button') {
          return {
            attributes: { class: 'email-button' }
          };
        }
        return {};
      },
      
      // Custom table styling
      tableStyle: {
        width: '100%',
        margin: '10px auto',
        padding: '0'
      },
      
      cellStyle: {
        padding: '10px',
        'vertical-align': 'top'
      },
      
      // Export configuration
      inlineCss: true,
      juiceOpts: {
        removeStyleTags: false,
        preserveMediaQueries: true
      },
      
      // Modal labels
      modalTitleImport: 'Import Email Template',
      modalTitleExport: 'Export Email HTML',
      modalLabelImport: 'Paste your HTML code:',
      modalLabelExport: 'Copy the code below:',
      
      // UI configuration
      updateStyleManager: true,
      showStylesOnChange: true,
      showBlocksOnLoad: true,
      codeViewerTheme: 'monokai',
      
      // Custom theme
      useCustomTheme: true,
      
      // Canvas confirmation
      textCleanCanvas: 'Are you sure? This will delete all content.'
    }
  }
});
```

--------------------------------

### Handle Editor Ready Event

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-panels.md

Automatically opens the Block Manager when the editor finishes loading, if `opts.showBlocksOnLoad` is true.

```typescript
editor.onReady(() => {
  if (opts.showBlocksOnLoad) {
    const openBlocksBtn = Panels.getButton('views', 'open-blocks');
    openBlocksBtn?.set('active', true);  // Activate Block Manager
  }
});
```

--------------------------------

### Plugin Interface - Default Export

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/index.md

The main plugin function initializes the preset on a GrapesJS editor instance. It accepts the GrapesJS editor instance and optional configuration options.

```APIDOC
## Plugin Interface - Default Export

### Description
The main plugin function initializes the preset on a GrapesJS editor instance. It accepts the GrapesJS editor instance and optional configuration options.

### Signature
```typescript
const plugin: Plugin<PluginOptions> = (editor, opts?: Partial<PluginOptions>) => void
```

### Parameters
#### Editor Instance
- **editor** (`Editor`) - Required - The GrapesJS Editor instance to which the plugin will be applied.

#### Options
- **opts** (`Partial<PluginOptions>`) - Optional - Configuration options for the plugin. Defaults to an empty object.

### Returns
- `void`

### Example Usage (JavaScript)
```javascript
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-preset-newsletter';

const editor = grapesjs.init({
  container: '#gjs',
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: {
      blocks: ['sect100', 'sect50', 'button', 'image'],
      inlineCss: true
    }
  }
});
```

### Example Usage (Browser)
```html
<script src="path/to/grapesjs-preset-newsletter.min.js"></script>
<script>
  var editor = grapesjs.init({
    container: '#gjs',
    plugins: ['grapesjs-preset-newsletter'],
    pluginsOpts: {
      'grapesjs-preset-newsletter': { /* options */ }
    }
  });
</script>

```

--------------------------------

### Run export-template Command

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-commands.md

Executes the 'export-template' command to open a modal displaying the current HTML template. CSS is inlined based on the `inlineCss` configuration option.

```typescript
editor.runCommand('export-template');
// Modal opens showing HTML with optional inlined CSS
```

--------------------------------

### gjs-open-import-template Command

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-commands.md

Opens a modal dialog with an editable code editor for importing HTML templates. User pastes HTML, clicks Import to load it into the editor, clearing existing content.

```APIDOC
## gjs-open-import-template

### Description
Opens a modal dialog with an editable code editor for importing HTML templates. User pastes HTML, clicks Import to load it into the editor, clearing existing content.

### Command ID
`gjs-open-import-template` (configurable via `cmdOpenImport`)

### Method
`editor.runCommand('gjs-open-import-template')`

### Parameters
This command does not take direct parameters when run. Configuration options are set globally.

### Request Example
```typescript
editor.runCommand('gjs-open-import-template');
```

### Response
This command returns `void`.

### Behavior on Import
1. User pastes HTML into the code editor.
2. Clicks "Import" button.
3. Clears current components: `editor.Components.clear()`.
4. Clears current CSS: `editor.Css.clear()`.
5. Loads new HTML: `editor.setComponents(code)`.
6. Closes modal.

### Configuration Options
- `cmdOpenImport`: String - The command ID for opening the import modal (default: `'gjs-open-import-template'`).
- `modalTitleImport`: String - The title of the import modal (default: `'Import template'`).
- `modalLabelImport`: String - The label for the code editor in the modal (default: `'Paste your HTML:'`).
- `modalBtnImport`: String - The label for the import button (default: `'Import'`).
- `importPlaceholder`: String - The initial placeholder text in the code editor (default: `'<table><tr><td>Sample</td></tr></table>'`).
- `codeViewerTheme`: String - The theme for the code editor (default: `'hopscotch'`).
```

--------------------------------

### Initialize GrapesJS Editor with Newsletter Preset

Source: https://github.com/grapesjs/preset-newsletter/blob/master/index.html

This snippet shows how to initialize the GrapesJS editor on the window load event, enabling the newsletter preset. It includes configurations for editor height, disabling storage management, specifying the container element, and setting up plugin options for import/export modals and default cell styles.

```javascript
window.onload = () => {
  window.editor = grapesjs.init({
    height: '100%',
    storageManager: false,
    container: '#gjs',
    fromElement: true,
    plugins: ['grapesjs-preset-newsletter'],
    pluginsOpts: {
      'grapesjs-preset-newsletter': {
        modalLabelImport: 'Paste all your code here below and click import',
        modalLabelExport: 'Copy the code and use it wherever you want',
        importPlaceholder': '<table class="table"><tr><td class="cell">Hello world!</td></tr></table>',
        cellStyle': {
          'font-size': '12px',
          'font-weight': 300,
          'vertical-align': 'top',
          color: 'rgb(111, 119, 125)',
          margin: 0,
          padding: 0
        }
      }
    }
  });
};
```

--------------------------------

### Initialize Newsletter Style Manager

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-styles.md

This function initializes or updates the Style Manager with email-optimized style sectors. It only applies customizations if `opts.updateStyleManager` is true. The styles are applied after the editor is fully initialized.

```typescript
export default function(editor: Editor, opts: Required<PluginOptions>): void
```

--------------------------------

### Panel Integration for Toggle Images

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-commands.md

Shows how to register the `gjs-toggle-images` command as a button in the GrapesJS panels, typically with an icon.

```typescript
{
  id: cmdTglImages,
  command: cmdTglImages,
  label: `<svg>...</svg>` // Image/eye icon
}
```

--------------------------------

### Toggle Image Preview

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/00-START-HERE.md

Execute a command to toggle the image preview functionality within the editor. This command is part of the preset's utility features.

```typescript
editor.runCommand('gjs-toggle-images');
```

--------------------------------

### Configure Text Decoration Radio Buttons

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-styles.md

Sets up radio button controls for text decoration with corresponding icons. Defaults to 'none'.

```typescript
{
  property: 'text-decoration',
  type: 'radio',
  defaults: 'none',
  list: [
    { value: 'none', name: 'None', className: 'fa fa-times' },
    { value: 'underline', name: 'underline', className: 'fa fa-underline' },
    { value: 'line-through', name: 'Line-through', className: 'fa fa-strikethrough' }
  ]
}
```

--------------------------------

### Configure Border Collapse Radio Buttons

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-styles.md

Sets up radio button controls for border collapse behavior. Defaults to 'separate'.

```typescript
{
  property: 'border-collapse',
  type: 'radio',
  defaults: 'separate',
  list: [
    { value: 'separate', name: 'No' },
    { value: 'collapse', name: 'Yes' }
  ]
}
```

--------------------------------

### Configure Font Style Radio Buttons

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-styles.md

Sets up radio button controls for font style with visual icons. Defaults to 'normal'.

```typescript
{
  property: 'font-style',
  type: 'radio',
  defaults: 'normal',
  list: [
    { value: 'normal', name: 'Normal', className: 'fa fa-font' },
    { value: 'italic', name: 'Italic', className: 'fa fa-italic' }
  ]
}
```

--------------------------------

### Enable and Configure CSS Inlining

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/REFERENCE-SUMMARY.md

Enables CSS inlining for exported HTML and configures Juice options for advanced control over the inlining process. This ensures styles are applied directly to elements.

```typescript
pluginsOpts: {
  [plugin]: {
    inlineCss: true,
    juiceOpts: {
      removeStyleTags: false,
      preserveMediaQueries: true,
      inlineImageLimit: 32768
    }
  }
}
```

--------------------------------

### Customize Text Shadow Composite Property

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-styles.md

Demonstrates how to customize the 'Text Shadow' composite property, which expands to reveal sub-inputs for shadow configuration. The generated CSS is also shown.

```typescript
// User clicks "Text Shadow" composite
// Sub-inputs appear:
// - X position (text-shadow-h)
// - Y position (text-shadow-v)
// - Blur (text-shadow-blur)
// - Color (text-shadow-color)

// Generates CSS like:
// text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
```

--------------------------------

### Initialize with Custom Style Manager Sectors

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-styles.md

This code initializes the GrapesJS editor with custom Style Manager sectors when `updateStyleManager` is true. It removes default sectors and adds newsletter-specific ones like Dimension, Typography, and Decorations.

```typescript
export default function(editor: Editor, opts: Required<PluginOptions>) {
  let sectors = editor.StyleManager.getSectors();

  if (opts.updateStyleManager) {
    const styleManagerSectors = [
      // Dimension sector
      {
        name: 'Dimension',
        open: false,
        buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
        properties: [ /* composite properties */ ]
      },
      // Typography sector
      {
        name: 'Typography',
        open: false,
        buildProps: ['font-family', 'font-size', ...],
        properties: [ /* radio/composite properties */ ]
      },
      // Decorations sector
      {
        name: 'Decorations',
        open: false,
        buildProps: ['background-color', 'border-collapse', ...],
        properties: [ /* color/composite properties */ ]
      }
    ];

    editor.onReady(() => {
      sectors.reset();
      sectors.add(styleManagerSectors);
    });
  }
}
```

--------------------------------

### Cross-References in Documentation

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/MANIFEST.md

Details how different documentation files link to each other to provide a cohesive and navigable resource.

```markdown
- README.md links to all detailed docs
- REFERENCE-SUMMARY.md provides quick links
- Configuration.md links to types.md for interface definitions
- API reference docs link to configuration.md for options
- Types.md links to usage in api-reference docs
```

--------------------------------

### export-template

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-commands.md

Opens a modal dialog with a code editor displaying the full HTML template, with CSS optionally inlined.

```APIDOC
## export-template

### Description
Opens a modal dialog with a code editor displaying the full HTML template. If `opts.inlineCss` is true, CSS is automatically inlined before display.

### Command ID
`export-template` (hardcoded)

### Returns
`void`

### Modal Components
1. Optional label (if `opts.modalLabelExport` is set)
2. Code editor with syntax highlighting
3. Copy button (built into CodeMirror)

### Code Editor Configuration
- **Language:** `htmlmixed`
- **Theme:** Configurable via `opts.codeViewerTheme` (default: `'hopscotch'`)
- **Read-only:** Yes (display only, use gjs-get-inlined-html to get the code)

### Behavior
1. Creates code viewer (CodeMirror) on first run
2. Opens modal dialog with configured title
3. Populates editor with current HTML
4. If `inlineCss: true`: Inlines CSS before display
5. User can copy code from the editor

### Usage Example
```typescript
editor.runCommand('export-template');
// Modal opens showing HTML with optional inlined CSS
```

### Configuration
```typescript
{
  modalTitleExport: 'Export template',
  modalLabelExport: 'Copy the code below:',
  inlineCss: true,
  codeViewerTheme: 'hopscotch',
  juiceOpts: { /* juice options */ }
}
```
```

--------------------------------

### Enable Specific Blocks

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/00-START-HERE.md

Configure the preset to enable only a subset of available blocks by providing an array of block IDs.

```typescript
{ blocks: ['sect100', 'sect50', 'button'] }
```

--------------------------------

### Style Manager API

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/README.md

Shows how to access and interact with the Style Manager to retrieve and manipulate style sectors, such as the 'Dimension' sector.

```APIDOC
## Style Manager API

### Description
Access customized sectors within the Style Manager to inspect or modify styling properties. This example shows how to retrieve all sectors and specifically access the 'Dimension' sector.

### Method
```typescript
const sectors = editor.StyleManager.getSectors();
const dimensionSector = sectors.getProperty('Dimension');
```

### See Also
[api-reference-styles.md](api-reference-styles.md).
```

--------------------------------

### Use Custom CodeMirror Theme

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/REFERENCE-SUMMARY.md

Specify a theme name for the CodeMirror editor used in the code viewer. Ensure the theme is available or included.

```typescript
codeViewerTheme: 'monokai'
```

--------------------------------

### set-device-tablet

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-commands.md

Switches the editor canvas to tablet view. This command is helpful for checking the layout on a tablet screen.

```APIDOC
## set-device-tablet

### Description
Switches the editor canvas to tablet view.

### Method
runCommand

### Parameters
None

### Request Example
```typescript
editor.runCommand('set-device-tablet');
```

### Response
Returns `void`.
```

--------------------------------

### Add set-device-desktop Command

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-commands.md

Registers the 'set-device-desktop' command, which switches the editor canvas to desktop view. This command is typically used internally or via UI elements.

```typescript
Commands.add('set-device-desktop', {
  run: (ed: Editor) => ed.setDevice('Desktop'),
  stop: () => {}
})
```

--------------------------------

### Configure Newsletter Preset with Custom Blocks

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/REFERENCE-SUMMARY.md

Initializes the GrapesJS editor with the newsletter preset, specifying a custom list of blocks to be available. This allows for a tailored block selection.

```typescript
const editor = grapesjs.init({
  container: '#gjs',
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: {
      blocks: ['sect100', 'sect50', 'button', 'image', 'text']
    }
  }
});
```

--------------------------------

### Load Newsletter Styles

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/api-reference-styles.md

This function loads the email-optimized style sectors into the GrapesJS Style Manager. It registers a callback on `editor.onReady()` to ensure the styles are applied after the editor is fully initialized.

```typescript
function loadStyles(editor: Editor, opts: Required<PluginOptions>): void
```

--------------------------------

### Registered Commands

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/index.md

The plugin registers several commands that can be invoked to perform specific actions within the editor, such as exporting HTML, importing templates, or toggling image sources.

```APIDOC
## Registered Commands

### Description
The plugin registers the following commands that can be invoked to perform specific actions within the editor, such as exporting HTML, importing templates, or toggling image sources. These commands can often be configured via options when initializing the plugin.

### Commands List

- **gjs-get-inlined-html** (via `cmdInlineHtml` option)
  - **Purpose:** Export HTML with inlined CSS using the Juice library.

- **gjs-open-import-template** (via `cmdOpenImport` option)
  - **Purpose:** Import an HTML template through a modal dialog.

- **gjs-toggle-images** (via `cmdTglImages` option)
  - **Purpose:** Toggle image sources, useful for preview mode.

- **set-device-desktop**
  - **Purpose:** Switch the editor view to desktop mode.

- **set-device-tablet**
  - **Purpose:** Switch the editor view to tablet mode.

- **set-device-mobile**
  - **Purpose:** Switch the editor view to mobile portrait mode.

- **canvas-clear**
  - **Purpose:** Clear the editor canvas, potentially with a confirmation prompt.

### Example Invocation (Conceptual)
```javascript
// To get inlined HTML:
editor.run('gjs-get-inlined-html');

// To open the import template modal:
editor.run('gjs-open-import-template');

// To switch to mobile view:
editor.run('set-device-mobile');
```
```

--------------------------------

### Toggle Images Command Implementation

Source: https://github.com/grapesjs/preset-newsletter/blob/master/_autodocs/types.md

Implements a command to toggle the visibility or properties of image components within the editor. It recursively traverses the component tree.

```typescript
// From src/toggleImagesCommand.ts
export default (editor: Editor, opts: Required<PluginOptions>) => {
  editor.Commands.add(opts.cmdTglImages, {
    run(editor) {
      const components: Components = editor.getComponents();
      this.toggleImages(components);
    },
    
    toggleImages(components: Components, on: boolean = false) {
      // Traverses component tree recursively
      components.forEach((component) => {
        if (component.get('type') === 'image') {
          // Toggle src property
        }
        this.toggleImages(component.components(), on);
      });
    },
  });
};
```