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

⠿

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

⠿

•

⠿

◦

⠿

▪

⠿

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

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

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

⠿

Одиночное изображение

⠿

выполнено 3 из 9 33.33%

⚑

CHANGELOG.md

⠿

⠿

27 blk

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

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

Информация

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

Inline-слой

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

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

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

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

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

• Tab / Shift+Tab — вложенность списков

◦ Вложенный пункт первого уровня

▪ Вложенный пункт второго уровня

CSHARP

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

Изображения и галереи

Блок изображения поддерживает четыре вида: одиночное (single), сетка (gallery), карусель (carousel) и мозаика (mosaic).

Одиночное изображение

Галерея из нескольких файлов с возможностью смены главного изображения и изменения порядка:

Чек-листы

Продвинутый чек-лист с названием, важными пунктами, иерархией и вложениями файлов.

Чек-лист релиза v2.1

выполнено 3 из 9 33.33%

⚑

Прогнать API-тесты

Интеграционные тесты

Нагрузочные тесты

⚑

Обновить changelog

CHANGELOG.md

Сделать backup лисицы

Задеплоить на staging

Smoke-тесты

Регрессионные тесты

Переключить DNS на production

Строк 3

Колонок 3

⌕

Слой

Формат

Кто владеет

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

DOM (contenteditable)

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

Модель

DocNode → BlockNode → InlineNode

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

Хранение

JSON / ASTB

БД / localStorage

Готово

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

Внимание

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

Экспорт и импорт

Используйте кнопки ⇥ экспорт и ⇤ импорт в тулбаре. Поддерживаемые форматы: JSON, ASTB (бинарный), HTML, Markdown, Plain Text.