Exécution des commandes

jusqu'à présent, tout ce que nous avons appris concerne la manière d'écrire une logique unique pour votre éditeur slate spécifique mais l'une des choses les plus puissantes à propos de slate est qu'il vous permet de modéliser votre "domaine" de texte riche spécifique comme vous le souhaitez, et d'écrire moins de code unique dans les guides précédents, nous avons écrit du code utile pour gérer le formatage des blocs de code et les marques en gras et nous avons connecté le onkeydown gestionnaire pour invoquer ce code mais nous l'avons toujours fait en utilisant les aides de l'éditeur directement, au lieu d'utiliser des "commandes" slate vous permet d'augmenter l'objet éditeur pour gérer vos propres commandes de texte riche personnalisées et vous pouvez même utiliser des "plugins" pré packagés qui ajoutent un ensemble donné de fonctionnalités voyons comment cela fonctionne nous allons commencer 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} /> } }, \[]) const renderleaf = usecallback(props => { return \<leaf { props} /> }, \[]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<editable renderelement={renderelement} 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> ) } il a le concept de "blocs de code" et de "formatage en gras" mais ces choses sont toutes définies dans des cas uniques à l'intérieur du onkeydown gestionnaire si vous vouliez réutiliser cette logique ailleurs, vous devriez l'extraire nous pouvons plutôt implémenter ces concepts spécifiques au domaine en créant des fonctions d'aide personnalisées // define our own custom set of helpers const customeditor = { isboldmarkactive(editor) { const \[match] = editor nodes(editor, { match n => n bold === true, universal true, }) return !!match }, iscodeblockactive(editor) { const \[match] = editor nodes(editor, { match n => n type === 'code', }) return !!match }, toggleboldmark(editor) { const isactive = customeditor isboldmarkactive(editor) transforms setnodes( editor, { bold isactive ? null true }, { match n => text istext(n), split true } ) }, togglecodeblock(editor) { const isactive = customeditor iscodeblockactive(editor) transforms setnodes( editor, { type isactive ? null 'code' }, { match n => editor isblock(editor, n) } ) }, } 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} /> } }, \[]) const renderleaf = usecallback(props => { return \<leaf { props} /> }, \[]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<editable renderelement={renderelement} renderleaf={renderleaf} onkeydown={event => { if (!event ctrlkey) { return } // replace the `onkeydown` logic with our new commands switch (event key) { case '`' { event preventdefault() customeditor togglecodeblock(editor) break } case 'b' { event preventdefault() customeditor toggleboldmark(editor) break } } }} /> \</slate> ) } maintenant, nos commandes sont clairement définies et vous pouvez les invoquer de n'importe où où nous avons accès à notre éditeur objet par exemple, depuis des boutons d'outils hypothétiques 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} /> } }, \[]) const renderleaf = usecallback(props => { return \<leaf { props} /> }, \[]) return ( // add a toolbar with buttons that call the same methods \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<div> \<button onmousedown={event => { event preventdefault() customeditor toggleboldmark(editor) }} \> bold \</button> \<button onmousedown={event => { event preventdefault() customeditor togglecodeblock(editor) }} \> code block \</button> \</div> \<editable editor={editor} renderelement={renderelement} renderleaf={renderleaf} onkeydown={event => { if (!event ctrlkey) { return } switch (event key) { case '`' { event preventdefault() customeditor togglecodeblock(editor) break } case 'b' { event preventdefault() customeditor toggleboldmark(editor) break } } }} /> \</slate> ) } c'est l'avantage d'extraire la logique et voilà ! nous venons d'ajouter une tonne de fonctionnalités à l'éditeur avec très peu de travail et nous pouvons garder toute notre logique de commande testée et isolée à un seul endroit, ce qui rend le code plus facile à maintenir