LINUX.ORG.RU

Юный Техник: написание простого RichText-editor на JS: проблемы и инфаркт жопы.

 


0

0

Кратко.

Хочется понять, как в основном работают (и как планируют работать в будущем) решения по небольшим rich-text-editor-вводам небольших сообщенек в facebook/twitter/slack. Это не редакторы документов уровня google docs и даже не Editor.js и даже не telegra.ph, а проще: редактирование одной сообщеньки с парочкой фич: например подсветка упомянутого юзера, подсветка цитаты и bold-текст по нажатию кнопки «B» при выделенном тексте и больше ничего.

Длинно.

  1. Textarea - скучно и прошлый век (зато у всех работает).

  2. А хочется чуть сложнее, но всё ещё просто-минималистично (как в твиттере, слаке, фейсбуке). Да, там народ пуд соли на этом сожрал и в одну эту формочку ввода в перечисленных организациях уже вложен не один лям реальных долларов, но не надо набрасывать на вентилятор и троллить - кто-то первым должен был это пройти, да и их изыскания озвучены на массе конференций, так что нам проще.

  3. Зачем: чтобы в окне редактора рисовать нужные нам специфические штуки. Например упоминание юзера через @ подсвечивать цветом. Или bold-текст рисовать bold-ом. Или цитаты отделять серой палкой справа. И т.п.

  4. Суть. Берём contenteditable=true и там мигает курсор. Но мы не хотим, чтобы редактирование там делал браузер. Потому что это хаос. Поэтому обычно перехватывают keydown, beforeinput, в них смотрят что нажато - достраивают «модель» (структуру документа в памяти) (пример модели - просто var переменная-строка, а достраивание - добавление нажатого символа к концу). Далее по модели рендерят содержимое . Перестраивают его заново или добавляют что-то куда-то - это нюансы.

  5. Без модели жить нельзя, ведь при отправке набранного текста мы не хотим отправлять именно нашу консистентную модель, а не некое хаотическое содержимое , куда браузер мог копипастой вставить случайно красный -текст.

  6. Примеры этого подхода - сайт telegra.ph, google docs, окно ввода в twitter/facebook - где по символу @ ты красиво меншинишь дружбана или slack, где можно bold сделать прямо в форме ввода. выделил, нажал кнопку, оно стало жирным. Просто, тупо, удобно, модно, молодёжно. Просьба не набрасывать в треде, что так делают только говноеды - я тоже могу набросить, что твоя мамка дурак, но друг друга послать в жопу мы можем долго и засрём тред. Давайте конструктивно без религии и проклинания современных веб-макак.

Проблемы:

  1. Часть firefox-ов годичной давности, скажем января 2020, не умеет beforeinput. Нормальные современные firefox-ы умеют, но куча староверов обновляться не хотят. Beforeinput - событие про то, что «я собираюсь поменять содержимое input/textarea/div_contenteditable». Его можно отменить, перехватив то, что летело в это поле ввода и не дав браузеру поменять элемент самому, что нам и надо. Мы же хотим сначала обеспечить консистентность нашей модели. Эти древние firefox-ы генерят сразу input-событие, которое рассказывает уже о том, как окно ввода поменялось. А это уже поздно. Тут приходится строить космолёт - «дай что там в поле ввода, сравнить с моделью, найти diff и поменять модель». Это некоторая жопа, что проще застрелиться. Проще подменить староверам наш модный редактор на textarea и пусть живут с простым текстом.

  2. Можно было бы перехватить keydown, который есть везде, но современный chrome решил не передавать там кириллицу - там валятся голые коды железных клавиш и понять какая там у юзера раскладка невозможно. В результате юзер всё время печатает латиницей. Детектить нажатие CTRL + SHIFT можно, но это конечно же признак гидроцефалии и диких костылей.

Решения.

  1. Я не очень понял почему так все не делают - как в google docs. Там вообще нет никакого contenteditable и textarea. Чуваки тупо рендерят HTML как хотят, а курсор тоже сами рендерят и сами мигают. За счёт этого умеют рисовать сразу много курсоров тех, кто документ сейчас редактирует. Это наиболее модно и молодёжно конечно, но я слышал что там основная проблема определить абсолютную позицию, по которой надо рисовать курсор, учитывая буковки разной ширины в шрифте и за это сразу нобелевку дадут. Чуваки в гугле, которые это сделали, подписали с ФБР форму о неразглашении и их держат в гуантаномо.

  2. Почитал всяких страданий по сабжу - все делают по-разному, но особо никто не утруждает себя подробными объяснениями как сделано именно у них. Есть всякие там Editor.js, но чтение исходников показывает иногда удивительные вещи, например что чуваки живут вообще без beforeinput. Я тогда не понимаю как. Перехватывают input и diff-ают документ? И не лень? Я понимаю, что везде работает, но браузер без beforeinput вроде бы считается куском говна и проще обозвать клиентов с таким софтом скотами и забыть про них, чем городить diff-движок.

Просьба высказаться по сабжу без тролления и сарказма. Да, веб-макаки - паразиты социума, их нужно бить чугунной трубой по темени и зарубать топором пополам, но пока это незаконно и сажают в тюрьму за убийство, так что невозможно, сорян.

А вопрос-то в чём, шизик?

Давайте конструктивно без религии и проклинания современных веб-макак

Да, веб-макаки - паразиты социума, их нужно бить чугунной трубой по темени и зарубать топором пополам, но пока это незаконно и сажают в тюрьму за убийство, так что невозможно, сорян

Начни с себя

CryNet ★★★★ ()
Ответ на: комментарий от kilokolyan

Как-то хреново структурирована.

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

fernandos ★★ ()
Ответ на: комментарий от vazgen05

Это жопа. Занимался, больше не хочу и тебе не советую.

Понимаем. Но хочется делатей, краевых случаев, камней преткновения и заткновения. Просто некоторые чуваки тоже «занимались» и у них работает. Тот же Editor.js. Он в целом жирный, но я пока не добрался до осознания их ядра редактирования, возможно кто-то шарит на каких евентах и принципах оно запилено.

kilokolyan ()
Последнее исправление: kilokolyan (всего исправлений: 1)
Ответ на: комментарий от kilokolyan

Если подумать, не адский. Если заморочиться на написание тулкита, у тебя будет нормальный тулкит, не вот этот вот клубок событий и неоднозначных свойств, навешанный на HTML, который имеет свои собственные тормоза в неоднозначных местах. Так OnlyOffice работает, и это единственное браузерное приложение, которое меня не бесит.

Shadow ★★★★★ ()
Последнее исправление: Shadow (всего исправлений: 1)
Ответ на: комментарий от X512

Проще на canvas сделать, чем бороться с HTML/CSS.

HTML/CSS в наше время хорошо стандартизируется. Уж проще юзать эти стандарты, вполне неплохой результат получается. И иногда нужно биться со всякими старыми Firefox. Это куда проще, чем руками рендерить на canvas что-либо.

kilokolyan ()
Ответ на: комментарий от Shadow

клубок событий и неоднозначных свойств, навешанный на HTML,

От событий никуда не уйду. Где я возьму инфу о нажатой кнопке. В keypress? Он устарел. В keydown - там нет кириллицы в хроме. beforeinput - его тупо не будет, т.к. элемент canvas не editable официально. Могу перехватить keypress, ок, а кириллицу дорисовывать если она включена - а включать её должен будет юзер руками перещёлкивая нарисованный тумблер на канвасе. Короче ещё жопнее. Так никто не делает.

kilokolyan ()
Ответ на: комментарий от X512

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

Да и с HTML/CSS она достаточно предсказуемая, если юзаешь последние стандарты. А с canvas тебя ждёт дикий трах со шрифтами и разными DPI ещё до кучи.

kilokolyan ()

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

Зачем надо было всё портить и пихать в заголовок и текст кучу мусора? Чтобы никто не дай бог случайно не ответил по существу? Это ни разу не юмор, а проявление собственного insecurity.

Не надо прятаться за попытками хохмить, есть идея или вопрос - пиши как есть.

alpha ★★★★★ ()
Ответ на: комментарий от kilokolyan

За примерами долго ходить не надо: у меня на последнем Firefox редактор Reddit глючит, иногда текст нельзя удалить и вставка не работает, надо переключать на режим MarkDown.

X512 ★★ ()
Последнее исправление: X512 (всего исправлений: 1)
Ответ на: комментарий от X512

За примерами долго ходить не надо: у меня на последнем Firefox редактор Reddit глючит, иногда текст нельзя удалить и вставка не работает, надо переключать на режим MarkDown.

Спасибо за наводку. Интересно. Посмотрю что они там намутили.

kilokolyan ()
Ответ на: комментарий от kilokolyan

Так у тебя события в canvas только будут, ты сам себе построишь структуры событий зависимости от положения на canvas, а не будешь ловить всё это дерьмо от прыгающих элементов документа HTML.

Shadow ★★★★★ ()
Последнее исправление: Shadow (всего исправлений: 1)
Ответ на: комментарий от kilokolyan

https://www.onlyoffice.com/ru/download-desktop.aspx
- нет же. У них хитровыдуманная система лицензирования, но чтобы что-то посмотреть - регистрация не нужна.

Shadow ★★★★★ ()
Последнее исправление: Shadow (всего исправлений: 1)
Ответ на: комментарий от X512

у меня на последнем Firefox редактор Reddit глючит, иногда текст нельзя удалить и вставка не работает

Подтверждаю. Последние несколько дней вроде всё ок (может после обновления до 92.0-r1, может я уже придрочился аккуратничать, а может сами reddit пофиксили). А до этого вовсю. Глюкалово было настолько бешеное, что если хочется что-то отредактировать в процессе ввода камента, проще скопипастить в блокнотик, там отредактировать, а в браузере нажать Ctrl+F5 и ввести камент заново.

dimgel ★★★★ ()

Нормальные люди берут какой-нибудь ckeditor, а время тратят на уникальный функционал, а не пишут очередной кривой недоrich text editor.

PS гугл доксы вроде уже на webgpu рисуют, или это ещё не в продакшне, не помню

Legioner ★★★★★ ()
Последнее исправление: Legioner (всего исправлений: 1)
Ответ на: комментарий от Shadow

Так у тебя события в canvas только будут,

Какие менно события? Давайте вы их перечислите. Возможно их не существует.

kilokolyan ()
Последнее исправление: kilokolyan (всего исправлений: 2)
Ответ на: комментарий от Shadow

https://www.onlyoffice.com/ru/download-desktop.aspx

  • нет же. У них хитровыдуманная система лицензирования, но чтобы что-то посмотреть - регистрация не нужна.

Какоё ещё давлноад десктоп, я в вебчике хочу попечатать же.

kilokolyan ()
Ответ на: комментарий от Shadow

Клик, тап, мув.

Ну интересны их имена в JS. Есть мнение, что нужные нам в canvas генериться не будут. keydown будет, например, но в нём нет кириллицы.

kilokolyan ()
Последнее исправление: kilokolyan (всего исправлений: 1)
Ответ на: комментарий от kilokolyan

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

И пока я пилил в canvas, я чувствовал себя человеком. Как только я начал в фоне грузить картинку на сервер и тд и тп - я почуствовал себя в аду.

Shadow ★★★★★ ()
Последнее исправление: Shadow (всего исправлений: 1)