En el artículo anterior hicimos una primera práctica con ProseMirror a modo de introducción de algunas de sus principales posibilidades. Ahora vamos a continuar experimentando otras cuestiones importantes, en concreto los comandos que nos ofrece ProseMirror.

Qué son los comandos de ProseMirror

Los comandos de ProseMirror son unas funciones especiales para realizar acciones con el editor que estamos desarrollando.

Los comandos permiten encapsular acciones de edición y trabajan produciendo una transacción, que una vez aplicada tendrá consigo, generalmente, alguna transformación del contenido editable.

Estos comandos pueden ser de lo más variado. Puedes usarlos para aplicarlos sobre combinaciones de teclas o sobre los elementos de una barra de menú.

En el artículo anterior ya estuvimos viendo algunos comandos y los pusimos en marcha por medio de combinaciones de teclas. De hecho, las acciones "undo" y "redo" sobre el historial son implementadas por medio de comandos de ProseMirror.

Paquete prosemirror-commands

Existe un package de npm proporcionado por ProseMirror que contiene numerosos comandos que podemos usar en nuestros editores de texto. Se trata de prosemirror-commands, que vamos a instalar mediante npm.

npm i prosemirror-commands

Combinaciones de teclas básicas

Dentro de este paquete vamos a comenzar explorando "baseKeymap", que es una declaración que nos permite añadir algunos comportamientos para teclas y combinaciones de teclas.

Lo vamos a importar con:

import { baseKeymap } from "prosemirror-commands";

Luego lo podemos usar agregando a la declaración de plugins este keymap.

plugins: [
  history(),
  keymap({ "Mod-z": undo, "Mod-y": redo }),
  keymap(baseKeymap),
],

Ahora en tu editor observarás que funciona la tecla "Enter", que antes, sin el baseKeymap no tenía ningún comportamiento asignado. De este modo ya podemos crear varios párrafos en el editor de texto.

Otros comandos incluidos en prosemirror-commands

Existen muchos comandos dentro del package prosemirror-commands, algunos más útiles e intuitivos que otros. Vamos a ver algunos ejemplos de ellos y cómo los podremos utilizar.

Existen en el paquete prosemirror-commands dos comandos bien sencillos de entender:

• selectTextblockEnd, que permite moverse al final de la línea o párrafo.
• selectTextblockStart, que permite moverse al inicio de la línea o párrafo.

Vamos a agregar estos comandos a nuestras importaciones.

import { 
  baseKeymap,
  selectTextblockEnd,
  selectTextblockStart,
} from "prosemirror-commands";

A continuación los vamos a asociar con otras teclas rápidas, con combinaciones de teclas nuevas.

keymap({ 
  "Mod-z": undo, 
  "Mod-y": redo,
  "Mod-e": selectTextblockEnd,
  "Shift-Mod-e": selectTextblockStart
}),

• Hemos configurado el comando selectTextblockEnd para que se ejecute cuando pulsemos Ctrl + e (o Cmd + e si estamos en MacOs).
• Además, el comando selectTextblockStart lo hemos configurado para que se ejecute cuando pulsemos Mayusculas + Ctrl + e (o Mayusculas + Cmd + e si estamos en MacOs).

Ahora somos capaces de movernos al principio o final de un párrafo con nuevas combinaciones de teclas. Ha sido un simple demo, que no tiene mucha utilidad, ya que existen teclas para ir al inicio o al fin que ya funcionaban de casa, pero hemos podido agregar nuevas combinaciones a modo de prueba.

Conclusión

En este artículo hemos aprendido lo que son los comandos de ProseMirror y hemos experimentado con algunos comandos que nos proporciona el package prosemirror-commands.

Existen muchos otros comandos, así como algunas otras funciones que no son comandos en este package. Como decimos, no todas tienen mucho sentido ahora, sino que nos permiten hacer operaciones que tendrán más sentido en combinación con otras. Por ejemplo, otro comando que es bastante fácil de entender es selectAll, que permite seleccionar de una vez todo el texto del editor.

Además hemos explorado algunas nuevas formas de crear teclas rápidas o atajos de teclado con combinaciones de teclas más complejas por medio del plugin keymap().