sizzname / pgtest

Markdown form

По условиям задачи есть форма для ввода текста, где можно задать жирность и курсив в формате markdown

При изменении текста в поле ввода (событие oninput) текст отправляется на сервер и при последующих событиях повторных изменениях отправка блокируется, пока не будет получен ответ. При получении ответа от сервера, проверяется, изменён ли текст в поле ввода, по сравнению с тем, который был отправлен на сервер в последний раз и если да, данные снова отправляются на сервер уже автоматически, а не по событию. Это позволяет создать достаточную интерактивность отображения вводимого текста, не перегружая сервер запросами которые возможно будут не успевать отобразиться, а так же позволяет всегда отображать именно последние изменения в форме ввода.

На сервер вводимый текст отправляется в виде AJAX-запроса с помощью метода fetch(), так как не оговорено условий по применяемым браузерам, но это будет работать во всех современных. А так как для окончательной сборки скриптов используется стандартный функционал в виде Webpack/Encore, то поддержку старых браузеров недолго включить добавив обработку через Babel.

После получения ответа от сервера, если ответ успешный, то обновляется превью, если нет - остаётся предыдущее состояние.

На сервере обработка происходит стандартно для Symfony. Контроллер MarkdownFormController отображает страницу формы и он же обрабатывает ajax-запросы для отображения форматированного текста в этой форме. Полученный текст конроллер обрабатывает вызывая функцию markdownToHtml() сервиса TextService и возвращеет в формате JSON. В функции markdownToHtml разметка для выделенного текста (жирный и курсив) преобразуется в HTML код с помощью регулярных выражений взятых из проекта Markdown, чтобы действовали аналогично. Единственное отличие на данный момент - не учитываются escape-последовательности, но это можно и недолго добавить в случае необходимости.

В рамках задачи такой реализации вполне достаточно, функционал не избыточен но легко может меняться и дополняться.