Кратко.
Хочется понять, как в основном работают (и как планируют работать в будущем) решения по небольшим rich-text-editor-вводам небольших сообщенек в facebook/twitter/slack. Это не редакторы документов уровня google docs и даже не Editor.js и даже не telegra.ph, а проще: редактирование одной сообщеньки с парочкой фич: например подсветка упомянутого юзера, подсветка цитаты и bold-текст по нажатию кнопки «B» при выделенном тексте и больше ничего.
Длинно.
-
Textarea - скучно и прошлый век (зато у всех работает).
-
А хочется чуть сложнее, но всё ещё просто-минималистично (как в твиттере, слаке, фейсбуке). Да, там народ пуд соли на этом сожрал и в одну эту формочку ввода в перечисленных организациях уже вложен не один лям реальных долларов, но не надо набрасывать на вентилятор и троллить - кто-то первым должен был это пройти, да и их изыскания озвучены на массе конференций, так что нам проще.
-
Зачем: чтобы в окне редактора рисовать нужные нам специфические штуки. Например упоминание юзера через @ подсвечивать цветом. Или bold-текст рисовать bold-ом. Или цитаты отделять серой палкой справа. И т.п.
-
Суть. Берём contenteditable=true и там мигает курсор. Но мы не хотим, чтобы редактирование там делал браузер. Потому что это хаос. Поэтому обычно перехватывают keydown, beforeinput, в них смотрят что нажато - достраивают «модель» (структуру документа в памяти) (пример модели - просто var переменная-строка, а достраивание - добавление нажатого символа к концу). Далее по модели рендерят содержимое . Перестраивают его заново или добавляют что-то куда-то - это нюансы.
-
Без модели жить нельзя, ведь при отправке набранного текста мы не хотим отправлять именно нашу консистентную модель, а не некое хаотическое содержимое , куда браузер мог копипастой вставить случайно красный -текст.
-
Примеры этого подхода - сайт telegra.ph, google docs, окно ввода в twitter/facebook - где по символу @ ты красиво меншинишь дружбана или slack, где можно bold сделать прямо в форме ввода. выделил, нажал кнопку, оно стало жирным. Просто, тупо, удобно, модно, молодёжно. Просьба не набрасывать в треде, что так делают только говноеды - я тоже могу набросить, что твоя мамка дурак, но друг друга послать в жопу мы можем долго и засрём тред. Давайте конструктивно без религии и проклинания современных веб-макак.
Проблемы:
-
Часть firefox-ов годичной давности, скажем января 2020, не умеет beforeinput. Нормальные современные firefox-ы умеют, но куча староверов обновляться не хотят. Beforeinput - событие про то, что «я собираюсь поменять содержимое input/textarea/div_contenteditable». Его можно отменить, перехватив то, что летело в это поле ввода и не дав браузеру поменять элемент самому, что нам и надо. Мы же хотим сначала обеспечить консистентность нашей модели. Эти древние firefox-ы генерят сразу input-событие, которое рассказывает уже о том, как окно ввода поменялось. А это уже поздно. Тут приходится строить космолёт - «дай что там в поле ввода, сравнить с моделью, найти diff и поменять модель». Это некоторая жопа, что проще застрелиться. Проще подменить староверам наш модный редактор на textarea и пусть живут с простым текстом.
-
Можно было бы перехватить keydown, который есть везде, но современный chrome решил не передавать там кириллицу - там валятся голые коды железных клавиш и понять какая там у юзера раскладка невозможно. В результате юзер всё время печатает латиницей. Детектить нажатие CTRL + SHIFT можно, но это конечно же признак гидроцефалии и диких костылей.
Решения.
-
Я не очень понял почему так все не делают - как в google docs. Там вообще нет никакого contenteditable и textarea. Чуваки тупо рендерят HTML как хотят, а курсор тоже сами рендерят и сами мигают. За счёт этого умеют рисовать сразу много курсоров тех, кто документ сейчас редактирует. Это наиболее модно и молодёжно конечно, но я слышал что там основная проблема определить абсолютную позицию, по которой надо рисовать курсор, учитывая буковки разной ширины в шрифте и за это сразу нобелевку дадут. Чуваки в гугле, которые это сделали, подписали с ФБР форму о неразглашении и их держат в гуантаномо.
-
Почитал всяких страданий по сабжу - все делают по-разному, но особо никто не утруждает себя подробными объяснениями как сделано именно у них. Есть всякие там Editor.js, но чтение исходников показывает иногда удивительные вещи, например что чуваки живут вообще без beforeinput. Я тогда не понимаю как. Перехватывают input и diff-ают документ? И не лень? Я понимаю, что везде работает, но браузер без beforeinput вроде бы считается куском говна и проще обозвать клиентов с таким софтом скотами и забыть про них, чем городить diff-движок.
Просьба высказаться по сабжу без тролления и сарказма. Да, веб-макаки - паразиты социума, их нужно бить чугунной трубой по темени и зарубать топором пополам, но пока это незаконно и сажают в тюрьму за убийство, так что невозможно, сорян.
