Quill Editor

Независимый модуль quill (Rich text editor) для редактирования основного контента в редакторском интерфейсе.

Пакет выделен в отдельный репозиторий по причине его переиспользуемости.

У этих проектов разный бэкенд и в каждом проекте используется разный API и разные фрэймворки для построения интерфейса, но интерфейс редактирования материала и его логика одинаковые. Поэтому следуя лучшим практикам разработки ПО выделяем общее неизменяемое от изменяемого. В нашем случае, изменяемым является способ общения с бэком и внешняя оболочка (приложение, где используется компонент редактирования).

Данный модуль является интерфейсом редактирования и имеет свой API, чтобы можно было общаться с ним и применять свой способ общения с бэком. Например, в редактуре 2019 года на Vue используются fetch запросы для обращения к серверным API, в 2020-м в проекте на React используется уже GraphQL спецификация. Наш проект должен дать возможность выбирать способ сохранения контента материала с помощью своего API. Все они описаны ниже. Информация для разработчиков модуля в файле CONTRIBUTING.md

Установка

``
npm i rg-quill-editor -S
`

Использование

HTML Разметка
`html

`

Подключаем модуль
`js
import QuillEditor from 'rg-quill-editor'
`

Использование в коде
`js
let quillEditor = new QuillEditor(null, options, {
text: "

Test

"
})
`

> Если не передать первый параметр, то модуль будет рендерить всё в DOM элемент с id quill-editor.
> options - объект с опциями. Будет рассмотрен подробнее далее.

ВАЖНОЕ

* Мы используем ветку develop (в react), тк в stable версии (на данный момент 1.3.7) нет поддержки таблиц. В vue версии используется именно 1.3.7
* Мы используем форк quill - версию quill-ocean из-за проблемы, описанно в issue

Пояснение
См изменения в core/quill.js
disableFormattingOnPaste — вот эту штуку я добавил, без неё у нас всегда запрос на сохранение статьи отправлялся когда внутри что-то рендерилось просто.

МОЖЕТ БЫТЬ это можно было бы костыльнуть где-то ещё, но я как бы сделал так и это по нормальному. Ты теперь можешь просто зарегистрировать блот и у него нстройку сделать, чтобы библиотека не следила за измненеием высоты контента.

я как бы отключаю слежку за высотой блока, у тех блотов, где ты пишешь datasilent: true

Ссылка на коммит

> Далее будут подробные примеры использования и описание всех API Work In Progress

Как собрать модуль для RgTextControls

Создаем отдельную дирректорию в src вида rg-[название]. Для примера возьмем rg-demo.

В ней будет набор файлов:
- RgDemoEditor это модуль попапа, который будет вызываться, при выборе из списка в редакторе. В нем зашита логика вставки сущности (она называется БЛОТ) в сам редактор.
- rg-demo-popup.html это шаблон попапа с размеченными контейнерами для дальнейшей отрисовки (некий шаблон из html). Используется в createBaseMarkup
- rg-demo-quill-blot это модуль (написанный по правилам Quill библиотеки), который и является вставкой в редактор текста. (будет работать после регистрации в системе, об этом будет написано ниже). Внутри себя он содержит веб-компонент, который конечный пользователь и видит в редактуре.
- rg-demo-wc это веб компонент, который видит пользователь, после вставки блота в редактор. В нем отображение всех данных + кнопки для редактирования-удаления-перемещения компонента по разметке тела материала.
- rg-demo.html это шаблон со стилями для веб компонента rg-demo-wc`. В нем корневой контейнер (остальная разметка генерится внутри инициализации самого веб-компонента) и стили.