Копируй из Word без мусора: 73 теста для идеального paste

Как перетащить HTML из Word прямо в редактор: история о 73 тестах и пути до конца

Разработчик столкнулся с классической задачей: пользователи копируют текст из Google Docs и Word, вставляют в редактор, а получают хаос из стилей и тегов. Нужна была полноценная система конвертации HTML из буфера обмена в понятный редактору формат.

Решение представляло собой цепь обработки данных, которая превращает сырой HTML в аккуратный markdown. ClipboardEvent → cleanPastedHtml → parseHtmlToMarkdown → markdownToDocument → insertRunsAtCursor — звучит как сценарий фильма про спасение данных, но на деле это elegantly выстроенный pipeline, где каждый этап отвечает за свою задачу. Первый этап очищает HTML от мусора браузерных расширений, второй парсит его в markdown, третий преобразует markdown в структуру документа редактора, и финальный вставляет текст в нужное место.

Параллельно были добавлены два новых плагина. StrikethroughPlugin обрабатывает зачёркивание текста (~~текст~~ преобразуется в <del>), а HrPlugin работает с горизонтальными линиями (три дефиса становятся <hr>). Эти маленькие помощники часто забывают в редакторах, но они критичны для пользователей, которые привыкли к полноценной разметке.

Сложность была в деталях. Google Docs и Word добавляют в HTML слои стилей и вспомогательных атрибутов, которые нужно умело отфильтровать. Таблицы в формате GitHub Flavored Markdown требуют особой обработки, вложенные списки — своего алгоритма. Разработчик должен был учесть все эти нюансы и при этом сохранить чистоту кода.

Здесь пригодилось основательное тестирование. 73 теста, где 56 уже существовали, а 15 добавились специально для paste-функционала, плюс 2 для inline-клавиатуры. Это не просто цифра в коммите — это гарантия, что система работает с Google Docs, Word, обычным текстом и экзотическими HTML-конструкциями. Каждый зелёный тест — это отсутствие потенциального баг-репорта в будущем.

Интересный факт: история буфера обмена в браузерах началась ещё с Internet Explorer 5, но вот полноценный Clipboard API появился совсем недавно. Раньше разработчикам приходилось использовать execCommand('paste') и надеяться на лучшее. Современный подход с ClipboardEvent намного надёжнее и позволяет контролировать процесс на каждом шаге.

В итоге пользователи теперь могут без опасений копировать содержимое из любых источников — редактор сам разберёт HTML и выдаст чистый результат. Все 73 теста зелёные, что означает: система готова к боевым условиям.

😄 Почему JavaScript разработчики не любят природу? Там нет консоли для отладки.