Как спроектировать конструктор: модель, редактор и экспорт
Сначала определите, что именно собирает пользователь: форму, страницу, диаграмму или конфигурацию. Без этого слово «конструктор» не задаёт архитектуру. Для первого выпуска ограничьте один результат и небольшой набор блоков.
Модель документа
Отделите данные проекта от DOM редактора. Например, у блока есть стабильный ID, тип и проверенные параметры. Сохранение версии формата позволит позже мигрировать старые проекты.
{
"version": 1,
"blocks": [{"id": "title-1", "type": "heading", "text": "Пример"}]
}Минимальный путь пользователя
- Добавить допустимый блок из палитры.
- Изменить его параметры и увидеть результат.
- Переместить блок и отменить ошибочное действие.
- Сохранить проект и открыть его заново без потери порядка и значений.
- Экспортировать результат в заявленном формате.
Реализация и проверка
Используйте один источник состояния и проверяйте импортируемый документ. Недоверенный текст выводите как текст, а не исполняемый HTML. Ограничьте число блоков и размер файла, не исполняйте код из импортированного проекта.
Проверьте пустой документ, длинный текст, неизвестный тип блока, undo/redo и повторное открытие. Drag-and-drop дополните клавиатурным способом перестановки. Документация должна объяснять ограничения экспорта и совместимость версий, а не обещать работу на любой платформе без проверки.