А вам вообще интересно было бы послушать про создание Notion-like редактора?

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

Взять в пример хотя бы то, что вы видите на картинке слева: специально, исключительно для значков маркированных списков в Notion задаётся шрифт Arial, который позволяет рендерить маркеры списков красиво и предсказуемо, вне зависимости от шрифта вашей операционной системы. Иначе маркеры списков рендерились бы как на картинке справа, т.к. оказывается, что в системном шрифте Mac OS нет символа квадрата, из-за чего Chromium рендерит вместо него эмодзи квадрата, лол.

Также на днях мой коллега Дима рассказал мне, что каждая страничка в Notion — это полноценная база данных на SQLite... Ват?! Но, да, это факт, и благодаря такому подходу у Notion получается быть таким гибким.

Но это всё туфта. Настоящее мясо начинается, когда ты начинаешь реализовывать корнер-кейсы Notion. Например, вы знали, что в Notion ты можешь начинать список, просто набрав любое число? И когда я говорю "любое", то именно это я и имею в виду. Четыре миллиарда двести девяносто четыре миллиона девятьсот шестьдесят семь тысяч двести девяносто пять — тоже число, кстати.

Так вот, для того, чтобы добавить поддержку такой фичи, им пришлось пересоздать списки с помощью обычных <div>, вместо элементов списков, так как последние просто невозможно выровнять так, чтобы они не вылазили за рамки редактора, если номер элемента в списке слишком большой (просто поверьте, я пытался).

Кстати, если номер элемента в списке будет больше границы 64-битного числа, то обычная запись просто превратится в экспоненциальную, а в остальном для списков правда можно использовать любое число (в Blok, кстати, тоже). Остальные ухищрения, на которые пришлось пойти, чтобы создать, казалось бы, банальные списки, можно посмотреть тут (осторожно, 9к строк кода).

Думаю, что вы хотя бы раз навигировались в Ноушен вверх и вниз с помощью стрелок на клавиатуре и видели, как Ноушен сохраняет вашу горизонтальную позицию. Так вот, для меня стало большим шоком, что это не базовая функция браузера, а то, что ребята в Ноушен реализовали самостоятельно. Вторым шоком для меня стало то, что для реализации этой фичи мне понадобилось ещё больше погрузиться в кишки Ноушена и написать почти 2000 строк логики.

Из-за всех описанных выше, да и ещё кучи мелких моментов, ни один редактор не может даже близко подойти к уровню Notion. Те же EditorJS и TipTap на первый взгляд выглядят как Notion, но стоит их немного толкнуть, как они тут же разваливаются. Ближе всего к Ноушену удалось подобраться Buildin... и это многое говорит о состоянии всех остальных редакторов на рынке.

Именно поэтому Blok — особенный. В хорошем смысле. Я не обещаю, что у меня получится воспроизвести всю красоту Notion, но уже сейчас могу сказать, что Blok на несколько голов выше всех остальных Notion-like редакторов на рынке, и это при том, что у меня за плечами всего месяц соло-вайбкодинга, и останавливаться на достигнутом я, конечно, не собираюсь.

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