Сделать визуальный редактор в Эгее на базе EditorJS?

Я давно хочу сделать в Эгее нормальный визуальный редактор, но как-нибудь так, чтобы не потерять возможности писать любой ХТМЛ и использовать другие кастомные штуки в заметках. Написать самому — неподъёмная задача. Все визуальные редакторы, которые я видел — настолько далеки от того, что мне надо в Эгее, что просто кошмар. Нужно было бы пол-Эгеи взорвать, чтобы их прикрутить.

Но недавно мне попалась такая штука — EditorJS. И он вроде подаёт надежды. Кстати, первые четыре раза, когда я заходил на его сайт, я не мог найти хоть какую-то демку. И даже попросил Виктора Корейшу, который мне сейчас много помогает с Эгеей, где-то для меня её собрать. И вот он мне указал, что она снизу прямо на главной странице. Жесть, прям пример того, как нельзя делать дизайн.

Мне нравится, что ЭдиторЖС работает с неким промежуточным джейсоном и что он кастомизируется разными модулями — можно добавить поддержку Жуэля, Фоторамы, просто куска ХТМЛя (видимо), других элементов, нужных мне в Эгее. Более того, кажется, что можно будет легко сконвертировать старые заметки в синтаксисе Эгее в такой джейсон, чтобы они открывались в новом редакторе.

Но есть и проблемы. В первую очередь мне не нравится очень корявая поддержка клавиатуры. Например, стандартные маковские комбинации для перехода в начало или конец текста не срабатывают — они ведут в начало и конец текущего блока — так блочная подкапотность проступает. Или вот в таблицах не работает таб для перехода в следующую ячейку — это как вообще? Чую, если покопать сильнее, там найдётся много такого.

Кривожопо работает выделение текста. Даже влом описывать, достаточно попробовать, чтобы понять, что что-то не так.

Ещё очень плохо выглядят все его стандартные контролы. Навязчивые совершенно ненужные рамки для подписей картинок. Или эти дурацкие многоточия на треугольных градиентах. Я не понимаю, насколько сложно будет это всё переделать по-своему и заменить в менюшках непонятные иконки понятными словами, а также линеаризовать списки опций, чтобы по ним можно было ходить клавиатурой. Кстати, конечно, нужен будет способ попасть в сами эти выпадающие меню с клавиатуры.

Или вот странная фигня, что этаж определённого типа добавляется кнопкой «Плюс». Я хочу как в Гугль-доке (и в Эгее сейчас): просто нажать Энтер, написать строчку, а потом нажать Альт-Комманд-1, и чтобы он стал заголовком. «Плюс» нужно просто выкрутить оттуда с корнем: он демонстрирует технозависимость и противоречит всему опыту человечества в области текстовой редакции.

Короче, штука кажется очень-очень сырой, но при этом идеологически наиболее удобной.

Так что вопрос: нет ли среди вас желающих её допилить для меня и под моим руководством? Возможно, окажется, что часть того, что в нём коряво, не лечится, потому что является следствием каких-то основополагающих архитектурных решений. Ну, тогда не судьба. Но вдруг не так?

Значительная часть вещей, которые я захочу — это просто общечеловеческие улучшения, а не что-то специфичное для Эгеи, поэтому это имеет смысл сделать прямо в самом ЭдитореЖС. Думаю, авторы примут пулреквесты с улучшениям. Но есть и специальные вещи: я бы хотел, чтобы вы сделали хотя бы на уровне пруф-оф-концепта Фотораму или Жуэль, чтобы мы убедились, что это всё можно добавить туда.

Дальше
7 комментариев
Валерий 2019

Илья, а что думаете про https://imperavi.com/redactor/ ?

Илья Бирман 2019

Там нет ни слова о том, что мне важно. Я не представил, как он интегрируется с фичами Эгеи. Но внешне это лучший вариант.

Filipp Riabchun 2019

Принципиально ли, чтоб помогали именно читатели твоего блога? Если нет, есть смысл позаводить на гитхабе ишуи на каждую проблему и пожелание.

Filipp Riabchun 2019

Это было бы полезно и для нас, твоих читателей, желающих помочь. Например, мы сможем прямо там же писать, над какой задачей начали работать.

Mykola Harmash 2019

Посмотри ещё на https://github.com/ianstormtaylor/slate, из него по идее можно слепить что угодно. Но придётся притянуть реакт на фронтенд.

Andrew Golubev 2019

А мне очень нравится возможность в Эгее писать сразу, без всяких кликаний мышкой и добавлением параграфов. Мне нравится, как вставляются урлы и картинки, как делается наклонный и жирный шрифт. Это позволяет писать, а не кликать мышкой. Именно благодаря Эгее я задвинул вордпресс в сторону.

Илья Бирман 2019

И мне. Я не буду внедрять решение, в котором не будет 100% доступности всего с клавиатуры.

Konstantin Baryshnikov 2019

Полагаю, что https://ckeditor.com/ckeditor-5/ подойдет лучше. Из коробки это кажется не тем, что надо, но под капотом там гибкий универсальный фреймворк, на котором можно сделать что угодно.

Но, конечно, на освоение потребуются определенные усилия, некоторые вещи там вообще не задокументированы.

Олег Горбунов 2019

Есть еще https://quilljs.com Там тоже очень хорошее разделение контента от отображения и редактирования. Хорошо работает клавиатура, можно создавать свои типы блоков, неплохо — выделение текста.

Мои книги