Transformaciones

la estructura de datos de slate es inmutable, por lo que no puedes modificar o eliminar nodos directamente en su lugar, slate viene con una colección de funciones de "transformación" que te permiten cambiar el valor de tu editor las funciones de transformación de slate están diseñadas para ser muy flexibles, para hacer posible representar todo tipo de cambios que puedas necesitar hacer en tu editor sin embargo, esa flexibilidad puede ser difícil de entender al principio 🤖 consulta el docid\ wocloz5dayn1htirfmuuk como referencia para una lista completa de las transformaciones de slate transformaciones de selección las transformaciones relacionadas con la selección son algunas de las más simples por ejemplo, aquí te mostramos cómo establecer la selección en un nuevo rango transforms select(editor, { anchor { path \[0, 0], offset 0 }, focus { path \[1, 0], offset 2 }, }) pero también pueden ser más complejas por ejemplo, es común necesitar mover un cursor hacia adelante o hacia atrás por distancias variables—por carácter, por palabra, por línea así es como moverías el cursor hacia atrás por tres palabras transforms move(editor, { distance 3, unit 'word', reverse true, }) 🤖 para más información, consulta el docid\ wocloz5dayn1htirfmuuk transformaciones de texto las transformaciones de texto actúan sobre el contenido de texto del editor por ejemplo, así es como insertarías una cadena de texto en un punto específico transforms inserttext(editor, 'some words', { at { path \[0, 0], offset 3 }, }) o podrías eliminar todo el contenido en un rango completo del editor transforms delete(editor, { at { anchor { path \[0, 0], offset 0 }, focus { path \[1, 0], offset 2 }, }, }) 🤖 para más información, consulta el docid\ wocloz5dayn1htirfmuuk transformaciones de nodo las transformaciones de nodo actúan sobre los nodos de elementos individuales y de texto que componen el valor del editor por ejemplo, podrías insertar un nuevo nodo de texto en una ruta específica transforms insertnodes( editor, { text 'a new string of text ', }, { at \[0, 1], } ) o podrías mover nodos de una ruta a otra transforms movenodes(editor, { at \[0, 0], to \[0, 1], }) 🤖 para más información, consulta el docid\ wocloz5dayn1htirfmuuk el en opción muchas transformaciones actúan en una ubicación específica en el documento por defecto, usarán la selección actual del usuario pero esto se puede anular con la en opción por ejemplo, al insertar texto, esto insertaría la cadena en el cursor actual del usuario transforms inserttext(editor, 'some words') mientras que esto lo insertaría en un punto específico transforms inserttext(editor, 'some words', { at { path \[0, 0], offset 3 }, }) el en opción es muy versátil, y se puede usar para implementar transformaciones más complejas muy fácilmente dado que es una ubicación siempre puede ser un camino , punto , o rango y cada uno de esos tipos de ubicaciones resultará en transformaciones ligeramente diferentes por ejemplo, en el caso de insertar texto, si especificas una rango ubicación, el rango primero será eliminado, colapsando a un solo punto donde tu texto será insertado así que para reemplazar un rango de texto con una nueva cadena puedes hacer transforms inserttext(editor, 'some words', { at { anchor { path \[0, 0], offset 0 }, focus { path \[0, 0], offset 3 }, }, }) o, si especificas una camino ubicación, se expandirá a un rango que cubre todo el nodo en ese camino luego, utilizando el comportamiento basado en rangos, eliminará todo el contenido del nodo y lo reemplazará con tu texto así que para reemplazar el texto de un nodo completo con una nueva cadena puedes hacer transforms inserttext(editor, 'some words', { at \[0, 0], }) estos comportamientos basados en la ubicación funcionan para todas las transformaciones que toman un en opción puede ser difícil de entender al principio, pero hace que la api sea muy poderosa y capaz de expresar muchas transformaciones sutilmente diferentes la coincidencia opción muchas de las transformaciones basadas en nodos toman una coincidencia opción de función, que restringe la transformación a aplicarse solo a nodos para los cuales la función devuelve verdadero cuando se combina con en , coincidencia también puede ser muy poderosa por ejemplo, considera una transformación básica que mueve un nodo de un camino a otro transforms movenodes(editor, { at \[2], to \[5], }) aunque parece que simplemente toma un camino y lo mueve a otro lugar detrás de escena, están sucediendo dos cosas… primero, la en opción se expande para ser un rango que representa todo el contenido dentro del nodo en \[2] lo que podría verse algo así at { anchor { path \[2, 0], offset 0 }, focus { path \[2, 2], offset 19 } } en segundo lugar, la opción de coincidencia se predetermina a una función que solo coincide con la ruta específica, en este caso \[2] match (node, path) => path equals(path, \[2]) luego, slate itera sobre el rango y mueve cualquier nodo que pase la función de coincidencia a la nueva ubicación en este caso, dado que la coincidencia se predetermina para coincidir solo con el exacto \[2] ruta, ese nodo se mueve pero, ¿qué pasaría si quisieras mover a los hijos del nodo en \[2] en su lugar? podrías considerar iterar sobre los hijos del nodo y moverlos uno a la vez, pero esto se vuelve muy complejo de gestionar porque a medida que mueves los nodos, las rutas a las que te refieres se vuelven obsoletas en su lugar, puedes aprovechar las opciones de at y coincidencia para coincidir con todos los hijos transforms movenodes(editor, { // this will again be expanded to a range of the entire node at `\[2]` at \[2], // matches nodes with a longer path, which are the children match (node, path) => path length === 2, to \[5], }) aquí estamos usando el mismo en la ruta (que se expande a un rango), pero en lugar de dejar que coincida solo con esa ruta por defecto, estamos proporcionando nuestra propia función de coincidencia que resulta coincidir solo con los hijos del nodo usar coincidencia puede hacer que representar lógica compleja sea mucho más simple por ejemplo, considera querer agregar una marca en negrita a cualquier nodo de texto que no esté ya en cursiva transform setnodes( editor, { bold true }, { // this path references the editor, and is expanded to a range that // will encompass all the content of the editor at \[], // this only matches text nodes that are not already italic match (node, path) => text istext(node) && node italic !== true, } ) al realizar transformaciones, si alguna vez estás iterando sobre nodos y transformándolos uno a la vez, considera ver si coincidencia puede resolver tu caso de uso, y delegar la complejidad de gestionar bucles a slate en su lugar