Application de formatage personnalisé

dans le guide précédent, nous avons appris à créer des types de blocs personnalisés qui rendent des morceaux de texte à l'intérieur de différents conteneurs mais slate permet plus que de simples "blocs" qweqwrqwr qrqw rqwr rqw dans ce guide, nous allons vous montrer comment ajouter des options de formatage personnalisées, comme gras , italique , code ou barré donc, nous commençons avec notre application d'avant const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) const renderelement = usecallback(props => { switch (props element type) { case 'code' return \<codeelement { props} /> default return \<defaultelement { props} /> } }, \[]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<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 onkeydown gestionnaire pour faire en sorte que lorsque vous appuyez sur control b , cela ajoutera un gras format au texte actuellement sélectionné const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) const renderelement = usecallback(props => { switch (props element type) { case 'code' return \<codeelement { props} /> default return \<defaultelement { props} /> } }, \[]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<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> ) } d'accord, donc 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 remarquerez aucun changement c'est parce que nous n'avons pas dit à slate comment rendre une marque "grasse" pour chaque format que vous ajoutez, slate va diviser le contenu textuel en "feuilles", et vous devez dire à slate comment le lire, tout comme pour les éléments alors définissons un leaf composant // 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, non ? et maintenant, parlons à slate de cette feuille pour ce faire, nous allons passer la renderleaf propriété à notre éditeur const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) 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={value} onchange={value => setvalue(value)}> \<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 devenir gras ! magie !