# CKEditor 5 – Development Sample

## Development environment

This is a demo of the classic editor build that loads your plugin (`Mermaid`) generated by the tool. You can modify this sample and use it to validate whether a plugin or a set of plugins work fine.

`Mermaid` inserts text into the editor. You can click the CKEditor 5 icon in the toolbar and see the results.

### Helpful resources

- Architecture
  - Core editor architecture
  - The editing engine
  - The UI library
- Browser compatibility
- The error codes
- The DLL builds

### The directory structure

The code snippet below presents the directory structure.

    .
    ├─ lang
    │  └─ contexts.json    # Entries used for creating translations.
    ├─ sample
    │  ├─ dll.html         # The editor initialized using the DLL builds. Check README for details.
    │  ├─ index.html       # The currently displayed file.
    │  └─ ckeditor.ts      # The editor initialization script.
    ├─ src
    │  ├─ mermaid.ts
    │  ├─ augmentation.ts  # Type augmentations for the `@ckeditor/ckeditor5-core` module. Read more in PluginsMap and CommandsMap.
    │  ├─ index.ts         # The modules exported by the package when using the DLL builds.
    │  └─ **/*.ts          # All TypeScript source files should be saved here.
    ├─ tests
    │  ├─ mermaid.ts
    │  ├─ index.ts         # Tests for the plugin.
    │  └─ **/*.ts          # All tests should be saved here.
    ├─ theme
    │  ├─ icons
    │  │  ├─ ckeditor.svg  # The CKEditor 5 icon displayed in the toolbar.
    │  │  └─ **/*.svg      # All icon files should be saved here.
    │  └─ **/*.css         # All CSS files should be saved here.
    ├─ typings
    │  └─ **/*.d.ts        # Files containing type definitions.
    ├─ .editorconfig
    ├─ ...
    ├─ README.md
    └─ tsconfig.json       # TypeScript configuration file.

### Reporting issues

If you found a problem with CKEditor 5 or the package generator, please, report an issue:

- CKEditor 5
- The package generator