Собственный quill tooltip, как сделать и как работает
25.10.2024
56
0
0
0
0
Как работают тултипы в quill, вместо вступления
Настало время рассказать про то, как сделать свой собственный тултип. И для начала, узнаем как работает тултип от quill.
Все тултипы quill-а, наследуются от общего класса BaseTooltip. Меня, да и тебя в частности, должны волновать следующие строки в коде:
Мне они не очень нравятся. Почему? Я просто не вижу возможности органично добавить новый тултип или расширить старый. Сам я, долго мучался и гадал, как бы мне расширить уже существующий класс. Но единственный способ, к которому я пришёл это наследоваться не от BaseTooltip, но от Tooltip.
Ещё одним вариантом, является создание своей темы. Ведь quill тултип, это не модуль, (что на самом деле было бы логичнее, по моему мнению), но составная часть темы. А тем две, snow и bubble. Но опят же, по мне, это слишком много работы ради того, чтобы показать на экране одно лишнее окошко.
Честно, моё решение проблемы не элегантно от слова совсем. Но оно рабочее ¯\_(ツ)_/¯. И его я собираюсь показать вам в любом случае)
Собираем тултип
Как ты уже знаешь (а если не знаешь, можешь узнать (☞゚ヮ゚)☞), мой html редактор имеет три типа ссылок, внутренние, внешние и скачиваемые. Внешние, ведут на другие страницы. Внутренние ведут на другие части страницы. Скачиваемые, ну ... это просто ссылки на файлы которые можно скачать ???
Создадим новые blot-ы используя inline. Прошу заметь, я не наследуюсь от 'formats/link' !!! Всё дело в том, что к данному форматеру прикреплён тултип по умолчанию и мне ненужно лишней суеты создаваемой данным тултипом.
Вместо этого, я создал кастомные блоты и зарегистрировал для них новые форматеры. Ещё я добавил обработчики кликов по ссылкам. Они и вызывают создание, вернее сказать, появление тултипа.
Ещё немного о позиции и высоте. За положение на экране у меня отвечают CSS стили. Не то чтобы они очень нужны. Но вот они:
Высоту я устанавливаю ибо, хотел чтобы он, перекрывал "прилипший" футер.
Теперь можно перейти к самому тултипу. Из чего он состоит, в чём особенности и т.д. и т.п. Я создавал свой тултип по аналогии с BaseTooltip. По этому, много методов чисто для внутренней работы. Вот весь он:
Конструктор задаёт форму, высоту и структуру тултипа. Хочу отметить, что оригинальй тултип (который от quill), задаёт свою структуру при помощи статического члена класса TEMPLATE, что находится в https://github.com/slab/quill/blob/main/packages/quill/src/themes/snow.ts. Я решил, мне нужна более модульная система. (Да, под модульной системой я имел в виду те жалкие 3 функции создания кнопочек ¯\(°_o)/¯) По этому существуют такие функции как:
insertRemoveBtn
insertAddBtn
insertTextInput
Так же были переопределены функции save и remove. Вот таким вот образом работают мои тултипы в редакторе. Не красиво и не элегантно, но работает. Надеюсь, этот пример был тебе полезен и ты подчерпнул из него хоть что-то.