Краткое описание задачи

Нужно создать плагин для редактора TinyMCE со следующим функционалом:

В программе есть сущность “заметки”, текст которых редактируется при помощи TinyMCE. 

При вводе в редактируемый текст триггера (последовательность знаков) плагин выполняет действия, связанные с этим триггером.

Плагин должен работать описанным ниже образом в Chrome, Firefox и Safari.

Вызов триггеров

При вводе “/” пользователю выводится список доступных триггеров. Можно выбрать из списка триггер при помощи мыши или клавиш, либо продолжить ввод, введя алиас триггера.

Пример реализации в Roam research:

Доступные триггеры

Метки / теги

В нашем приложении пользователь может добавить к заметке теги и впоследствии фильтровать по ним список заметок.

Триггеры “мм” и “tg” присваивают введенную/выбранную метку заметке и добавляют её в текст с префиксом "#".

При вводе триггера плагин обращается к списку меток из опций редактора и выводит выпадающий список меток, соответствующих введенному поисковому запросу (список фильтруется по мере ввода текста).

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

Пользователь может выбрать запись в списке одним из следующих способов:

• При помощи стрелок “вверх-вниз” и нажатия “TAB”.
• При помощи мыши.

Если введенный текст полностью соответствует одной из меток, то при нажатии “TAB” используется это значение и генерируется событие на связку с именем метки. Если текст не соответствует ни одной метке, то при нажатии “TAB” генерируется событие на создание метки и передается её имя.

Связанные заметки

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

Триггеры “св” или “lk” создают связь между редактируемой и выбранной заметкой и добавляют ссылку на последнюю в текст.

Список работает аналогично списку меток.