editor — живой ввод выдели текст → тулбар · «+» слева → новый блок

⠿

💡

⠿

— Эдсгер Дейкстра

⠿

•

⠿

public sealed record CalloutBlock : BlockNode, ITextBlock
{
    public string Type { get; set; } = "info";   // info | warn | danger | success
    public List<InlineNode> Inlines { get; set; } = new();
}

предпросмотр

CSHARP
public sealed record CalloutBlock : BlockNode, ITextBlock
{
    public string Type { get; set; } = "info";   // info | warn | danger | success
    public List<InlineNode> Inlines { get; set; } = new();
}

⠿

⠿

⠿

✅

⠿

⚠️

16 blk

Документ как дерево, а не строка

Перед вами живой документ. Каждый абзац — типизированный узел дерева DocNode, а не мешок HTML-тегов. Слева от каждого блока — кнопка + для вставки нового.

💡 Информация

Источник истины — JSON. Откройте вкладку json справа: структура обновляется синхронно с каждым нажатием клавиши.

Inline-слой

Выделите фрагмент — появится тулбар: жирный / курсив / подчёркнутый / ~~зачёркнутый~~ / inline-код и ссылки .

Простота — предпосылка надёжности.
— Эдсгер Дейкстра

Блочные структуры

1. Enter делит блок надвое по позиции каретки

2. Backspace в начале строки склеивает с предыдущим

• TAB / Shift+Enter — мягкий перенос внутри блока нумератора

CSHARP

public sealed record CalloutBlock : BlockNode, ITextBlock
{
    public string Type { get; set; } = "info";   // info | warn | danger | success
    public List<InlineNode> Inlines { get; set; } = new();
}

Строк 3

Колонок 3

⌕

Слой

Формат

Кто владеет

Редактирование

DOM (contenteditable)

JS — между рендерами

Модель

DocNode → BlockNode → InlineNode

.NET — источник истины

Хранение

JSON

БД / localStorage

✅ Готово

Правая панель пересчитывается на каждый ввод — без перезагрузки и без JS-фреймворков.

⚠️ Внимание

Демо хранит документ в localStorage браузера. Кнопка «сбросить автосохранение» вернёт исходный документ.