# prezly/slate architecture

> Architecture diagram of the GitHub repository prezly/slate, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/prezly/slate
- Repository: https://github.com/prezly/slate

## Overview

This monorepo provides Prezly-oriented Slate packages: shared document types and editing primitives, list and table extensions, and a React editor with rich-content extensions. The principal workflow is to create an editor from an initial value and extensions, then use editing behavior and content-specific features to manipulate Slate documents. The graph preserves the distinct packages and major extension families visible in the tree. Evidence is limited to the README and sampled/source-index references; unsampled extension interactions are not asserted.

Main entry points: [`packages/slate-editor/src/modules/editor/useCreateEditor.ts`](https://github.com/prezly/slate/blob/main/packages/slate-editor/src/modules/editor/useCreateEditor.ts) (Editor Creation), [`packages/slate-commons/src/commands`](https://github.com/prezly/slate/tree/main/packages/slate-commons/src/commands) (Editor Commands), [`packages/slate-types/src`](https://github.com/prezly/slate/tree/main/packages/slate-types/src) (Slate Types), [`packages/slate-editor/src/extensions/placeholders/PlaceholdersManager.ts`](https://github.com/prezly/slate/blob/main/packages/slate-editor/src/extensions/placeholders/PlaceholdersManager.ts) (Placeholders)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_foundation["Shared Foundation"]
  node_types["Slate Types"]
  node_commands["Editor Commands"]
  node_plugins["Editing Plugins"]
end

subgraph group_editing["Editor Runtime"]
  node_editor_create["Editor Creation<br/>[useCreateEditor.ts]"]
  node_editor_core["Editor Core"]
  node_ui["Editor Components"]
end

subgraph group_content["Content Extensions"]
  node_mentions["Mentions<br/>[useMentions.ts]"]
  node_placeholders["Placeholders"]
  node_rich_extensions["Rich Content"]
end

subgraph group_structures["Document Structures"]
  node_lists["List Editing<br/>[ListsEditor.ts]"]
  node_list_queries["List Queries<br/>[getListItems.ts]"]
  node_tables["Table Editing<br/>[TablesEditor.ts]"]
  node_table_nodes["Table Nodes<br/>[TableNode.ts]"]
end

node_consumer(("Application"))

node_consumer -->|"creates editor"| node_editor_create
node_editor_create -->|"configures"| node_editor_core
node_editor_create -.->|"accepts document"| node_types
node_editor_create -->|"uses primitives"| node_commands
node_mentions -.->|"edits selection"| node_commands
node_placeholders -.->|"supports embeds"| node_rich_extensions
node_placeholders -->|"handles nodes"| node_types
node_commands -->|"inserts paragraph"| node_types
node_lists -->|"uses queries"| node_list_queries
node_tables -->|"exports node operations"| node_table_nodes

click node_types "https://github.com/prezly/slate/tree/main/packages/slate-types/src"
click node_commands "https://github.com/prezly/slate/tree/main/packages/slate-commons/src/commands"
click node_plugins "https://github.com/prezly/slate/tree/main/packages/slate-commons/src/plugins"
click node_editor_create "https://github.com/prezly/slate/blob/main/packages/slate-editor/src/modules/editor/useCreateEditor.ts"
click node_editor_core "https://github.com/prezly/slate/tree/main/packages/slate-editor/src/modules/editor"
click node_ui "https://github.com/prezly/slate/tree/main/packages/slate-editor/src/components"
click node_mentions "https://github.com/prezly/slate/blob/main/packages/slate-editor/src/extensions/mentions/useMentions.ts"
click node_placeholders "https://github.com/prezly/slate/blob/main/packages/slate-editor/src/extensions/placeholders/PlaceholdersManager.ts"
click node_rich_extensions "https://github.com/prezly/slate/tree/main/packages/slate-editor/src/extensions"
click node_lists "https://github.com/prezly/slate/blob/main/packages/slate-lists/src/ListsEditor.ts"
click node_list_queries "https://github.com/prezly/slate/blob/main/packages/slate-lists/src/lib/getListItems.ts"
click node_tables "https://github.com/prezly/slate/blob/main/packages/slate-tables/src/TablesEditor.ts"
click node_table_nodes "https://github.com/prezly/slate/blob/main/packages/slate-tables/src/nodes/TableNode.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_types,node_commands,node_plugins toneBlue
class node_editor_create,node_editor_core,node_ui toneAmber
class node_mentions,node_placeholders,node_rich_extensions toneMint
class node_lists,node_list_queries,node_tables,node_table_nodes toneRose
class node_consumer toneIndigo
```

## Components

### Shared Foundation

- [Slate Types](https://github.com/prezly/slate/tree/main/packages/slate-types/src): `packages/slate-types/src`
- [Editor Commands](https://github.com/prezly/slate/tree/main/packages/slate-commons/src/commands): `packages/slate-commons/src/commands`
- [Editing Plugins](https://github.com/prezly/slate/tree/main/packages/slate-commons/src/plugins): `packages/slate-commons/src/plugins`

### Editor Runtime

- [Editor Creation](https://github.com/prezly/slate/blob/main/packages/slate-editor/src/modules/editor/useCreateEditor.ts): `packages/slate-editor/src/modules/editor/useCreateEditor.ts`
- [Editor Core](https://github.com/prezly/slate/tree/main/packages/slate-editor/src/modules/editor): `packages/slate-editor/src/modules/editor`
- [Editor Components](https://github.com/prezly/slate/tree/main/packages/slate-editor/src/components): `packages/slate-editor/src/components`

### Content Extensions

- [Mentions](https://github.com/prezly/slate/blob/main/packages/slate-editor/src/extensions/mentions/useMentions.ts): `packages/slate-editor/src/extensions/mentions/useMentions.ts`
- [Placeholders](https://github.com/prezly/slate/blob/main/packages/slate-editor/src/extensions/placeholders/PlaceholdersManager.ts): `packages/slate-editor/src/extensions/placeholders/PlaceholdersManager.ts`
- [Rich Content](https://github.com/prezly/slate/tree/main/packages/slate-editor/src/extensions): `packages/slate-editor/src/extensions`

### Document Structures

- [List Editing](https://github.com/prezly/slate/blob/main/packages/slate-lists/src/ListsEditor.ts): `packages/slate-lists/src/ListsEditor.ts`
- [List Queries](https://github.com/prezly/slate/blob/main/packages/slate-lists/src/lib/getListItems.ts): `packages/slate-lists/src/lib/getListItems.ts`
- [Table Editing](https://github.com/prezly/slate/blob/main/packages/slate-tables/src/TablesEditor.ts): `packages/slate-tables/src/TablesEditor.ts`
- [Table Nodes](https://github.com/prezly/slate/blob/main/packages/slate-tables/src/nodes/TableNode.ts): `packages/slate-tables/src/nodes/TableNode.ts`

### Other components

- **Application**

## Connections

- Application → Editor Creation: creates editor (evidence: `README.md`)
- Editor Creation → Editor Core: configures (evidence: `packages/slate-editor/src/modules/editor/useCreateEditor.ts`)
- Editor Creation → Slate Types: accepts document
- Editor Creation → Editor Commands: uses primitives (evidence: `packages/slate-editor/src/modules/editor/useCreateEditor.ts`)
- Mentions → Editor Commands: edits selection
- Placeholders → Rich Content: supports embeds (evidence: `packages/slate-editor/src/extensions/placeholders/PlaceholdersManager.ts`)
- Placeholders → Slate Types: handles nodes (evidence: `packages/slate-editor/src/extensions/placeholders/PlaceholdersManager.ts`)
- Editor Commands → Slate Types: inserts paragraph (evidence: `packages/slate-commons/src/commands/insertEmptyParagraph.ts`)
- List Editing → List Queries: uses queries (evidence: `packages/slate-lists/src/ListsEditor.ts`)
- Table Editing → Table Nodes: exports node operations (evidence: `packages/slate-tables/src/TablesEditor.ts`)