OSCHINA-MIRROR/mirrors-Slate-js

Полностью настраиваемый фреймворк
для создания редакторов с богатым текстом.

Почему? · Принципы · Демо · Примеры · Документация · Участие!

Slate позволяет вам создавать богатые, интуитивно понятные редакторы, такие как те в Medium, Dropbox Paper или Google Docs — которые становятся обязательной частью приложений на вебе — без того чтобы ваш код стал запутанным.

Он может это делать потому что вся его логика реализуется с помощью серии плагинов, поэтому вы никогда не будете ограничены тем, что есть или нет в "ядре". Вы можете представить себе это как плагируемую реализацию contenteditable, основанную на React. Он был вдохновлен библиотеками, такими как Draft.js, Prosemirror и Quill.> 🤖 Slate находится в настоящее время в режиме бета-тестирования. Его основной API можно использовать прямо сейчас, но вам могут потребоваться запросы на внесение улучшений для продвинутых случаев использования или исправлений для некоторых ошибок. Некоторые из его API еще не являются "конечными" и будут иметь обратные совместимости со временем, пока мы не найдем лучшие решения. В настоящее время нет расписания выпуска версии 1.0, мы все ещё работаем над правильной архитектурой.> 🤖 Slate также является проектом, управляемым участниками. Он не финансируется какой-либо крупной компанией, что означает, что все вклады добровольны и выполняются людьми, которым это действительно нужно. Если вам что-то требуется улучшить, добавить или исправить, пожалуйста, сделайте свой вклад самостоятельно, иначе никто этого не сделает. А если вы хотите стать более активным поддерживателем, сообщите нам об этом в канале Slack.

Почему?

Почему создали Slate? Ну... _(Учтите: этот раздел содержит несколько моих личных мнений!)_Прежде чем создать Slate, я попробовал множество других библиотек для работы с богатыми текстовыми данными — Draft.js, Prosemirror, Quill, и прочие. Я обнаружил, что хотя получить простые примеры работоспособными было достаточно просто, как только начинаешь строить что-то похожее на Medium, Dropbox Paper или Google Docs, сталкиваешься со сложными проблемами...- Схема редактора была жёстко закодирована и затрудняла кастомизацию. Поддержка таких вещей, как полужирный шрифт и курсив, была предусмотрена из коробки, но что насчёт комментариев, встроенных объектов или даже более специфических требований?

Программное преобразование документов было очень запутанным. Написание текста пользователем могло работать, но выполнение программных изменений, важных для создания продвинутых поведений, было ненужно сложным.
Сериализация в HTML, Markdown и пр. казалась второстепенной задачей. Простые вещи, такие как преобразование документа в HTML или Markdown, требовали написания большого количества шаблонного кода для того, что казалось довольно распространёнными случаями использования.
Переинжениринг уровня представлений показался неэффективным и ограничивающим. Большинство редакторов использовали свои собственные представления вместо существующих технологий, таких как React, поэтому приходилось учиться новой системе с новыми "ловушками".
Коллаборативное редактирование не было спроектировано заранее. Часто внутреннее представление данных редактора делало его невозможным использовать для реального времени, коллаборативного редактирования без фактического перезаписывания всего редактора.- Репозитории были монолитными, а не маленькими и переиспользуемыми. Кодовые базы многих редакторов часто не предоставляли внутренних инструментов, которые можно было бы переиспользовать, что приводило к необходимости заново изобретать колесо.
Создание сложных вложенных документов было невозможно. Многие редакторы были спроектированы вокруг простых «плоских» документов, что делало вещи, такие как таблицы, встраивания и подписи, трудными для понимания и иногда невозможными.

Конечно, не каждый редактор демонстрирует все эти проблемы, но если вы пробовали использовать другой редактор, вы могли столкнуться с аналогичными проблемами. Чтобы обойти ограничения их API и достичь желаемого пользовательского опыта, вам приходится прибегать к очень хакерским методам. А некоторые опыт просто невозможно реализовать.

Если это звучит знакомо, вам может понравиться Slate.

Что приводит меня к тому, как Slate решает все это...

Принципы

Slate пытается ответить на вопрос «Почему?» несколькими принципами:

Первоклассные плагины. Самым важным аспектом Slate является то, что плагины являются первоклассными сущностями. Это значит, что вы можете полностью настроить опыт редактирования, чтобы создать сложные редакторы, такие как Medium или Dropbox, без необходимости бороться против предположений библиотеки.2. Ядро без схемы. Ядро логики Slate предполагает очень мало относительно схемы данных, которую вы будете редактировать, что означает, что нет встроенных предположений в библиотеке, которые могут помешать вам при выходе за рамки самых базовых случаев использования.
Модель документа с вложенностью. Модель документа, используемая в Slate, представляет собой вложенный рекурсивный дерево, точно так же как сам DOM. Это означает, что создание сложных компонентов, таких как таблицы или вложенные цитаты, возможно для продвинутых случаев использования. Но также легко сохранять простоту, используя только один уровень иерархии.
Параллельность с DOM. Модель данных Slate основана на DOM — документ представляет собой вложенный дерево, он использует выборки и диапазоны, и он предоставляет все стандартные обработчики событий. Это означает, что продвинутые поведения, такие как таблицы или вложенные цитаты, возможны. Почти всё, что можно сделать в DOM, можно сделать в Slate.
Интуитивные команды. Документы Slate редактируются с помощью команд, которые предназначены для того, чтобы быть высокого уровня и максимально интуитивными для написания и чтения, чтобы пользовательская функциональность была максимально экспрессивной. Это значительно увеличивает вашу способность анализировать свой код.6. Модель данных для совместной работы. Модель данных, используемая Slate — особенно то, как операции применяются к документу — спроектирована таким образом, чтобы позволить добавление совместной работы сверху, поэтому вам не придётся перепроектировывать всё, если вы решите сделать свой редактор совместимым.
Четкие границы между "core" и "custom". Благодаря архитектуре с приоритетом плагинов и схемообразной основе становится очевидно, где заканчивается "core" и начинается "custom", что позволяет основному опыту не зависеть от граничных случаев.

Демонстрация

Просмотрите живую демонстрацию всех примеров!

Примеры

Чтобы получить представление о том, как можно использовать Slate, просмотрите несколько примеров:- Простой текст — демонстрирует самый базовый случай: обычный <textarea>.

Размеченный текст — демонстрирует те возможности, которые можно ожидать от базового редактора.
Предварительный просмотр в формате Markdown — демонстрирует, как добавляются клавишные обработчики для коротких сочетаний клавиш в стиле Markdown.
Инлайновые элементы — демонстрирует, как оборачивать текст в узловых элементах с связаными данными.
Изображения — демонстрирует, как использовать пустые (без текста) узловые элементы для добавления изображений.
Подвешиваемая панель инструментов — демонстрирует, как реализуется подвешивающаяся панель инструментов.
Таблицы — демонстрирует, как использовать вложенные блоки для отображения более продвинутых компонентов.
Вставка HTML — демонстрирует, как использовать сериализатор HTML для обработки вставленного HTML.
Упоминания — демонстрирует, как использовать внутренние пустые узловые элементы для простых упоминаний вроде @.Смотреть все примеры...

Если у вас есть идея для примера, который показывает типичное использование, отправьте pull request!

Документация

Если вы используете Slate впервые, проверьте руководство по началу работы и раздел Концепции, чтобы ознакомиться с архитектурой и умными моделями Slate. - Пошаговые руководства

Если этого недостаточно, вы всегда можете посмотреть исходный код, который подробно-commented.

Также есть переводы документации на другие языки:

Если вы поддерживаете перевод, пожалуйста, отправьте его в виде запроса на слияние здесь!

ПакетыИсходный код Slate управлён с помощью Lerna. Он состоит из нескольких пакетов — хотя вам не обязательно использовать все из них. Вот они:

Пакет	Версия	Размер	Описание
`slate`			Основная логика модели данных Slate.
`slate-history`			Плагин, добавляющий историю отмены/повтора в Slate.
`slate-hyperscript`

```markdown

Пакет	Версия	Размер	Описание
`slate-hyperscript`			Инструмент hyperscript для записи документов Slate с использованием JSX!
`slate-react`			Компоненты React для работы с Slate.


Все вклады приветствуются! Для получения более подробной информации ознакомьтесь с [инструкциями по внесению вклада](https://docs.slatejs.org/general/contributing).

Slate использует лицензию [MIT](./LICENSE.md).