react markdown

react markdown

Построен с использованием slate-js

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

Установите пакет npm:

npm install -E @opuscapita/react-markdown

Импортируйте его в свое приложение

import MarkdownInput from '@opuscapita/react-markdown

Более подробную информацию см. в интерактивном примере: https://opuscapita.github.io/react-markdown.

Демо на базе React Showroom

Если вы хотите использовать вместе с Bootstrap Modal, вам необходимо добавить стили:

 .markdown-input_fullscreen { // pass this class to Modal component
  overflow: hidden;
}
.markdown-input_fullscreen.modal.in .modal-dialog {
  transform: none;
}

Как это работает

MarkdownEditor поддерживает следующие декораторы:

• bold
• italic
• strikethrough
• heading-1
• heading-2
• heading-3
• heading-4
• heading-5
• heading-6
• list
• ordered-list

Кнопки (их группы, последовательность)

[B, I, S] [A] [H1, H2, H3, H4, H5, H6], [UL, OL]

• встроенные текстовые действия
  • [Б] - жирный знак
  • [I] - знак курсива
  • [S] - знак перечеркивания
• связь
  • [А] - анкерная вставка
• действия с текстовым блоком
  • [H1] - блок заголовка 1
  • [H2] - блок заголовка 2
  • [H3] - блок заголовка 3
  • [H4] - блок заголовка 4
  • [H5] - блок заголовка 5
  • [H6] - блок заголовка 6
• списки
  • [UL] - блок списка
  • [OL] - блок упорядоченного списка

Примечание для многострочного выбора : для многострочного выбора доступны только list и ordered list , другие кнопки на панели инструментов отключены, поскольку в противном случае выделение уценки становится несогласованным.

Поведение

Блочные элементы

Кнопка списка [UL]

Вот спецификация на видео-примере для этой кнопки

• Вставьте маркер '*' в начало строки, если строка не начинается с ['{номер}. ', '# ', '## ', '### ', '#### ', '#####', '###### ']
• Замените маркером '*', если строка начинается с ['{номер}. ', '# ', '## ', '### ', '#### ', '#####', '######']
• Вставьте маркер '*' в начало следующей строки, если enter нажат в конце строки, помеченной как элемент списка, если элемент содержит какой-либо текст
• Очистите строку от '*' и поместите курсор на новую строку, если пользователь нажал enter в конце строки, которая помечена как элемент списка, но не содержит никакого текста.

Кнопка упорядоченного списка [OL]

Вот спецификация на видео-примере для этой кнопки

• Вставьте маркер '1. ' в начале строки, если она не начинается с ['*', '#', '##', '###', '####', '#####', '## #### ']
• Замените маркером '1. ' если строка начинается с ['* ', '# ', '## ', '### ', '#### ', '##### ', '###### ']
• Вставьте маркер '{number+1}' в начале следующей строки, если нажата enter в конце строки, помеченной как элемент списка, если элемент содержит какой-либо текст.
• Очистите строку из '{number}' и поместите курсор на новую строку, если пользователь нажал enter в конце строки, которая помечена как элемент упорядоченного списка, но не содержит никакого текста.

Кнопки элемента заголовка [h1-h6]

Вот описание на примере видео кнопки [H2] (остальные кнопки заголовка работают соответственно)

• Вставьте маркер '#' - '######' (в зависимости от кнопки) в начале строки, если она не начинается с ['*', '{номер}. ']
• Замените маркером '#' - '######' (в зависимости от кнопки), если строка начинается с ['*', '{номер}. ']
• Удалить существующий маркер заголовка, если нажата соответствующая кнопка заголовка.
• Обновите существующий маркер заголовка на другой маркер заголовка, если текущий маркер заголовка не соответствует нажатой кнопке заголовка.

Отмеченные элементы

Вот спецификация на видео-примере для этих кнопок

Жирная кнопка [B]

• Выделенный текст обрамляется знаком '**', например {selected_text} -> **{selected_text}**
• Если выделенный текст содержит жирный текст, он разворачивается, например **{selected_text}** -> {selected_text}
• Вставляет '**{cursor}**' в позицию курсора, если текст не выделен и курсор находится внутри.

Кнопка [I], выделенная курсивом

• Выделенный текст обрамляется символом '_', например {selected_text} -> _{selected_text}_.
• Если выделенный текст выделен курсивом, он разворачивается, например _{selected_text}_ -> {selected_text}
• Вставляет '_{курсор}_' в позицию курсора, если текст не выделен и курсор находится внутри

Кнопка «Зачеркивание» [S]

• Выделенный текст обрамляется знаком '~~', например {selected_text} -> ~~{selected_text}~~
• Если выделенный текст помечен зачеркиванием, он разворачивается, например ~~{selected_text}~~ -> {selected_text}
• Вставляет '~~{cursor}~~' в позицию курсора, если текст не выделен и курсор находится внутри

Встроенные элементы

Кнопка внешнего якоря [A]

Вот спецификация на видео-примере для этой кнопки

• Обертывает выделенный текст символами «[» и «](http://example.com)», например {selected_text} -> [{selected_text}](http://example.com).
• Вставляет текст [текст ссылки](http://example.com) в позицию курсора, если текст не выделен.

Известные проблемы

• В случае панели инструментов многострочного выбора все кнопки, кроме list и ordered list недоступны (ни одно действие не поддерживается).
• Блоки кода не поддерживаются

Авторы

	Алексей Сергеев
	Дмитрий Дивин
	Дмитрий Санько
	Александр Балюнов
	Кирилл Волкович

Лицензия

Лицензия Apache, версия 2.0. Полный текст лицензии см. в разделе ЛИЦЕНЗИЯ.