react markdown Télécharger - react markdown Téléchargement du code source

react markdown

Autres ressources

2.3.13

Télécharger

react markdown

Construit avec slate-js

Usage

Installez le package npm :

npm install -E @opuscapita/react-markdown

Importez-le dans votre application

import MarkdownInput from '@opuscapita/react-markdown

Voir l'exemple interactif pour plus de détails : https://opuscapita.github.io/react-markdown

Démo optimisée par React Showroom

Si vous souhaitez utiliser avec Bootstrap Modal, vous devez ajouter des styles :

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

Comment ça marche

MarkdownEditor prend en charge les décorateurs suivants :

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

Boutons (leurs groupes, séquence)

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

actions de texte en ligne
- [B] - marque en gras
- [I] - marque italique
- [S] - marque barrée
lien
- [A] - insert d'ancrage
actions de bloc de texte
- [H1] - bloc d'en-tête 1
- [H2] - bloc d'en-tête 2
- [H3] - bloc d'en-tête 3
- [H4] - bloc d'en-tête 4
- [H5] - bloc d'en-tête 5
- [H6] - bloc d'en-tête 6
listes
- [UL] - bloc de liste
- [OL] - bloc de liste ordonnée

Remarque pour la sélection multiligne : seules list et ordered list sont disponibles pour la sélection multiligne, les autres boutons d'une barre d'outils sont désactivés, car sinon la mise en évidence des démarques devient incohérente.

Comportement

Éléments de bloc

Bouton Liste [UL]

Voici la spécification par exemple vidéo pour ce bouton

bouton de liste optimisé

Insérez le marqueur '*' au début de la ligne si la ligne ne commence pas par ['{numéro}. ', '#', '##', '###', '####', '#####', '###### ']
Remplacez par le marqueur '*' si la ligne commence par ['{numéro}. ', '#', '##', '###', '####', '#####', '###### ']
Insérez le marqueur '*' au début de la ligne suivante si vous appuyez sur enter à la fin de la ligne marquée comme élément de liste si l'élément contient du texte
Effacez la ligne de '*' et placez le curseur sur une nouvelle ligne si l'utilisateur a appuyé sur enter à la fin de la ligne marquée comme élément de liste mais ne contient aucun texte.

Bouton Liste ordonnée [OL]

Voici la spécification par exemple vidéo pour ce bouton

bouton-liste-ordonnée-optimisé

Insérez le marqueur '1. ' en début de ligne si elle ne commence pas par ['* ', '# ', '## ', '### ', '#### ', '##### ', '## ####']
Remplacer par le marqueur '1. ' si la ligne commence par ['* ', '# ', '## ', '### ', '#### ', '##### ', '###### ']
Insérez le marqueur '{number+1}' au début de la ligne suivante si vous appuyez sur enter à la fin de la ligne marquée comme élément de liste si l'élément contient du texte
Effacez la ligne de '{number}' et placez le curseur sur une nouvelle ligne si l'utilisateur a appuyé sur enter à la fin de la ligne marquée comme élément de liste ordonnée mais ne contient aucun texte.

Boutons d'élément d'en-tête [h1-h6]

Voici les spécifications par exemple vidéo pour le bouton [H2] (les autres boutons d'en-tête fonctionnent de manière correspondante)

bouton h2 optimisé

Insérez le marqueur '#' - '######' (cela dépend du bouton) au début de la ligne si elle ne commence pas par ['* ', '{number}. ']
Remplacez par le marqueur '#' - '######' (cela dépend du bouton) si la ligne commence par ['*', '{number}. ']
Supprimez le marqueur d'en-tête existant si le bouton d'en-tête correspondant est cliqué
Mettre à jour le marqueur d'en-tête existant vers un autre marqueur d'en-tête si le marqueur d'en-tête actuel ne correspond pas au bouton d'en-tête enfoncé.

Éléments marqués

Voici les spécifications par exemple vidéo pour ces boutons

gras-italique-barré-optimisé

Bouton gras [B]

Le texte sélectionné est enveloppé par '**', par exemple {selected_text} -> **{selected_text}**
Si le texte sélectionné contient du texte en gras, il est déballé, par exemple **{selected_text}** -> {selected_text}
Insère '**{cursor}**' dans la position du curseur si le texte n'est pas sélectionné et que le curseur est placé à l'intérieur

Bouton italique [I]

Le texte sélectionné est enveloppé par '_', par exemple {selected_text} -> _{selected_text}_
Si le texte sélectionné est marqué en italique, il est déballé, par exemple _{selected_text}_ -> {selected_text}
Insère '_{cursor}_' dans la position du curseur si le texte n'est pas sélectionné et que le curseur est placé à l'intérieur

Bouton barré [S]

Le texte sélectionné est enveloppé par '~~', par exemple {selected_text} -> ~~{selected_text}~~
Si le texte sélectionné est marqué comme barré, il est déballé, par exemple ~~{selected_text}~~ -> {selected_text}
Insère '~~{cursor}~~' dans la position du curseur si le texte n'est pas sélectionné et que le curseur est placé à l'intérieur

Éléments en ligne

Bouton d'ancrage externe [A]

Voici la spécification par exemple vidéo pour ce bouton

bouton de lien optimisé

Encapsule le texte sélectionné avec '[' et '](http://example.com)', par exemple {selected_text} -> [{selected_text}](http://example.com)
Insère du texte [texte du lien](http://example.com) à la position du curseur si le texte n'est pas sélectionné.

Problèmes connus

Dans le cas d'une barre d'outils de sélection multiligne, tous les boutons, à l'exception list et ordered list ne sont pas disponibles (aucune action n'est prise en charge)
Les blocs de code ne sont pas pris en charge