Application d'un formatage personnalisé

dans le guide précédent, nous avons appris à créer des types de blocs personnalisés qui affichent des morceaux de texte dans différents conteneurs mais slate permet de faire bien plus que simplement des « blocs » dans ce guide, nous allons vous montrer comment ajouter des options de formatage personnalisées, comme gras , italique , code ou barré nous commençons donc par notre application précédente const renderelement = props => { switch (props element type) { case 'code' return \<codeelement { props} /> default return \<defaultelement { props} /> } } const initialvalue = \[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ] const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) return ( \<slate editor={editor} value={initialvalue}> \<editable renderelement={renderelement} onkeydown={event => { if (event key === '`' && event ctrlkey) { event preventdefault() const { selection } = editor const \[match] = editor nodes(editor, { match n => n type === 'code', }) transforms setnodes( editor, { type match ? 'paragraph' 'code' }, { match n => editor isblock(editor, n) } ) } }} /> \</slate> ) } et maintenant, nous allons modifier le gestionnaire onkeydown afin que lorsque vous appuyez sur control b , il ajoute un format gras au texte actuellement sélectionné const initialvalue = \[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ] const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const renderelement = usecallback(props => { switch (props element type) { case 'code' return \<codeelement { props} /> default return \<defaultelement { props} /> } }, \[]) return ( \<slate editor={editor} value={initialvalue}> \<editable renderelement={renderelement} onkeydown={event => { if (!event ctrlkey) { return } switch (event key) { // when "`" is pressed, keep our existing code block logic case '`' { event preventdefault() const \[match] = editor nodes(editor, { match n => n type === 'code', }) transforms setnodes( editor, { type match ? 'paragraph' 'code' }, { match n => editor isblock(editor, n) } ) break } // when "b" is pressed, bold the text in the selection case 'b' { event preventdefault() transforms setnodes( editor, { bold true }, // apply it to text nodes, and split the text node up if the // selection is overlapping only part of it { match n => text istext(n), split true } ) break } } }} /> \</slate> ) } très bien, nous avons configuré le gestionnaire de raccourcis mais ! si vous essayez maintenant de sélectionner du texte et d’appuyer sur ctrl b , vous ne verrez aucun changement c’est parce que nous n’avons pas encore indiqué à slate comment afficher une marque « bold » pour chaque format que vous ajoutez, slate va diviser le contenu textuel en « feuilles », et vous devez indiquer à slate comment les lire, comme pour les éléments définissons donc un composant feuille // define a react component to render leaves with bold text const leaf = props => { return ( \<span { props attributes} style={{ fontweight props leaf bold ? 'bold' 'normal' }} \> {props children} \</span> ) } assez familier, n’est ce pas ? et maintenant, indiquons à slate l’existence de cette feuille pour ce faire, nous allons passer la propriété renderleaf à notre éditeur const initialvalue = \[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ] const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const renderelement = usecallback(props => { switch (props element type) { case 'code' return \<codeelement { props} /> default return \<defaultelement { props} /> } }, \[]) // define a leaf rendering function that is memoized with `usecallback` const renderleaf = usecallback(props => { return \<leaf { props} /> }, \[]) return ( \<slate editor={editor} value={initialvalue}> \<editable renderelement={renderelement} // pass in the `renderleaf` function renderleaf={renderleaf} onkeydown={event => { if (!event ctrlkey) { return } switch (event key) { case '`' { event preventdefault() const \[match] = editor nodes(editor, { match n => n type === 'code', }) transforms setnodes( editor, { type match ? null 'code' }, { match n => editor isblock(editor, n) } ) break } case 'b' { event preventdefault() transforms setnodes( editor, { bold true }, { match n => text istext(n), split true } ) break } } }} /> \</slate> ) } const leaf = props => { return ( \<span { props attributes} style={{ fontweight props leaf bold ? 'bold' 'normal' }} \> {props children} \</span> ) } maintenant, si vous essayez de sélectionner un morceau de texte et d’appuyer sur ctrl b vous devriez le voir apparaître en bold ! magique !