Presentamos Pulse Editor

Una parte fundamental de Platzi es la creación de contenido escrito, ya sea de parte de estudiantes en forma de tutoriales, comentarios, discusiones o artículos del blog o del equipo también en forma de materiales de texto. Por esa razón es importante que el editor de texto de Platzi sea fácil de usar y personalizable de acuerdo a las necesidades tanto nuestra como de la comunidad.

En la historia de Platzi hemos iterado sobre el editor en múltiples oportunidades, durante mucho tiempo existió un editor WYSIWYG, bastante viejo y desactualizado. El problema de este editor es que aunque personalizable no era posible extender su funcionalidad, además del hecho de que el creador ya no le daba soporte 😦.

Durante el proceso de migrar de Backbone a React para crear la UI de Platzi, nos volvimos a encontrar con el editor y fue el momento ideal de ponernos a mejorar esa parte de Platzi.

La búsqueda del editor ideal

Lo primero fue un proceso de buscar durante varios días diferentes editores WYSIWYG y pensar cual era el que más se adaptaba a nuestras necesidades.

• Estar activamente mantenido
• Poder insertar código (la mayoría de nuestros cursos son de código)
• Poder compartir imágenes fácilmente
• Ser personalizable
• Ser extensible

Una de las primeras ideas que tuvimos en el equipo de producto fue usar un editor Markdown. La idea se descartó en favor de facilitar la experiencia a los estudiantes y no obligarlos a aprender Markdown.

En la búsqueda nos encontramos con muchos editores posibles, entre ellos el que, en primera instancia, decidimos implementar, Draft.js.

Draft.js

RICH TEXT EDITOR FRAMEWORK FOR REACT

Fue creado por Facebook y está construido sobre React.js, se define en realidad como un framework para crear editores WYSIWYG. Justo lo que necesitábamos, la base para crear nuestro propio editor a nuestro gusto. Y lo hicimos, creamos un editor con Draft.js.

Durante varios meses estuvimos con este editor, trabajamos para agregarle features, cabe destacar que lo empezamos a usar la semana que Facebook lo liberó, así que no había ejemplos de uso, casos de éxito (más allá de FB) y documentación aparte de la oficial en su sitio web.

El problema

En general todo iba bien hasta que quisimos usarlo para contenido del blog y materiales, los cuales debían ser editables. Resulta que Draft.js maneja internamente una estructura JSON a la que llaman Raw donde guardan toda la información del contenido.

Algo así:

{
	"entityMap": {
		"0": {
			"type": "IMAGE",
			"mutability": "MUTABLE",
			"data": {
				"src": "http://placekitten.com/g/100/100/",
			},
		},
	},
	"blocks": [{
		"data": {},
		"key": "8dfrr",
		"text": "The HTML string to parse",
		"type": "unstyled",
		"depth": 0,
		"inlineStyleRanges": [],
		"entityRanges": [],
	}, {
		"data": {},
		"key": "581ge",
		"text": "~",
		"type": "atomic",
		"depth": 0,
		"inlineStyleRanges": [],
		"entityRanges": [{
			"offset": 0,
			"length": 1,
			"key": 0,
		}],
	}],
}

¿Muy raro no? Para poder usar este editor para editar contenido viejo significaba parsear el contenido a ese Raw, cargarlo en el editor, modificarlo, arreglar manualmente problemas de la conversión de HTML a Raw y luego al guardar volver a generar el HTML y empezar a guardar el Raw en la DB (para evitar problemas de conversión de luego).

Un trabajo que hubiese causado muchos problemas al equipo de contenido y más aún a nuestros estudiantes si les dejábamos editar sus tutoriales. Fue acá que decidimos que Draft.js no podía ser el futuro de la creación de contenido en Platzi.

Markdown

Markdown es un lenguaje para crear contenido enriquecido en texto plano para la web. La idea original de Markdown nace de los emails de texto plano, en los que era común para destacar un texto usar *text* o para destacarlo más usar dos *. Resulta que Markdown hace esto mismo, ya que usar un * o _ para envolver un texto lo marca como itálica así *hola* o _hola_ se transforman en <i>hola</i>. Simple, no requiere saber HTML, es posible convertir de MD a HTML ¡y de HTML a MD!

Decidimos por esto volver a darle una oportunidad a MD y tener un editor donde se escribe MD y se obtiene HTML. Lo primero entonces fue buscar un parser de MD a HTML, bueno y extensible. Así dimos con markdown-it, un parser en JS extensible mediante plugins y con bastante plugins ya creados por la comunidad.

Luego de jugar con sus plugins terminamos creando @platzi/markdown. Un parser de MD a HTML que por debajo es markdown-it más algunos plugins. Lo que llamamos Platzi Flavored Markdown (el MD de Platzi). Y como usamos React claramente lanzamos @platzi/react-markdown, un super simple componente de React que internamente utiliza @platzi/markdown para transformar un MD a HTML y renderizarlo directamente.

Pulse Editor

Sobre estas dos librerías creamos Pulse Editor. Un editor MD construido sobre React, personalizable y extensible. La primera forma de usarlo era pasar un montón de props para definir cada botón y varias funcionalidades. La nueva API con el cual lo hicimos público se basa en que todo son componentes combinables para formar el editor que quieras. Esto nos permite decidir que botones mostrar, si cambiamos el orden de la vista previa y el campo de texto, etc.

Además el editor nos provee de formas utilizar sus métodos internos para crear nuestro propio componente de React que se comunique con el y le diga que actualice el contenido, así nos es posible tener un editor base simple (Pulse Editor) pero uno personalizado en la plataforma.

El editor de forma básica nos provee de varios botones para poner negrita, cursiva, subrayado, bloques de código y código en línea, enlaces, imágenes, listas ordenadas y sin ordenar (ol y ul), citas, encabezados y vídeos de YouTube. Estos botones además definen los atajos de teclado una vez renderizados, esto último es interesante, ya que es posible crear tus propios botones para diferentes funcionalidades y ponerles atajos de teclado fácilmente sin modificar el código del editor.

Además de estos botones también nos provee el componente de campo de texto, de vista previa (que internamente usa @platzi/react-markdown) y posee una barra de sugerencias de emojis que nos muestra sugerencias de emojis soportados ¡similar a como funciona Slack!

Gracias a su API extensible podemos implementar sistemas como Drag&Drop de imágenes para compartir imágenes de forma fácil, podemos implementar highlight de código sobre el código generado por el editor y cualquier feature que podamos necesitar a futuro.

Conclusiones

Hasta ahora este editor a demostrado cumplir nuestras necesidades y la de nuestros estudiantes. En futuros artículos vamos a empezar a mostrar más sobre como funciona y como usarlo para implementar un editor propio. Por ahora en el repositorio hay un ejemplo de uso con estilos que pueden revisar el cual usa Next.js para hacer server render del editor y se puede llevar a producción con Now con un click y vamos a seguir agregando ejemplos explicando como hacer botones personalizados o implementar funciones adicionales extendiendo el editor.