Crear un Producto Colaborativo Similar a Notion en 2H

Bienvenidos a todos. Estoy extremadamente feliz de estar aquí. Y hoy tendremos alrededor de dos horas de talleres y trataremos de construir un producto similar a Notion en dos horas.

Antes de comenzar con la codificación, mostraré algunas diapositivas aquí. Así que el nombre, por ejemplo, mi nombre es Itek Soha y soy el propietario técnico del equipo principal de CK Editor 5 y junto conmigo, con sus cámaras encendidas, pueden ver a Piotr Koszulinsky, él es el director de ingeniería, y a Szymon, él es el líder del proyecto en las características de colaboración, y ellos también se unen a nosotros. Juntos tienen alrededor de 20 años de experiencia en la construcción de editores, así que si tienen preguntas más avanzadas, estoy seguro de que las responderán de inmediato. Entonces, CK qué, como, ese es un nombre bastante extraño para el producto, pero CK Editor es básicamente un editor de texto enriquecido, ¿verdad?, por lo que tenemos un editor, lo que ves es lo que obtienes, y básicamente puedes crear el contenido de manera visual y luego recibir el contenido en el formato deseado. Por lo general, es HTML, por lo que el editor en sí está escrito completamente en TypeScript en este momento. Esto es algo nuevo. Acabamos de terminar la reescritura a TypeScript. También usaremos TypeScript hoy y el editor en sí se puede implementar en cualquier aplicación que tenga soporte de HTML, CSM y JavaScript, ¿verdad? El editor en sí también es altamente extensible. Si te faltan algunas funcionalidades, puedes usar el editor en sí como un marco y agregar algunas funcionalidades por ti mismo. Y es un proyecto de código abierto. Así que si quieres, puedes revisar en GitHub. Estamos allí y el editor completo está licenciado bajo la licencia GPL. Entonces la historia no es tan breve. El editor en sí lleva en el mercado alrededor de 20 años. Y comenzó en 2003 como FCK editor, hecho por Federico. Y luego fue renombrado como pueden ver, FCK no era un buen acrónimo para tener el producto. Pueden responder ustedes mismos por qué. Pero luego fue rebrandeado a CK editor 3. Luego en 2012, se lanzó CK editor 4. Y hay una alta probabilidad de que en realidad lo hayan usado en algún lugar. Fue el editor principal en el CMS Drupal, ¿verdad? Luego tuvimos otro producto, que es básicamente un producto totalmente diferente, CK editor 5 lanzado en 2018. Y como dije, una arquitectura totalmente diferente, esos dos productos en realidad aún estaban en el mercado lado a lado. Es por eso que tienes estos números 4 y 5, pero CK editor 5 introdujo soluciones de edición de texto más poderosas como la colaboración en tiempo real que intentaremos usar hoy. Y en 2022, CK editor 5 fue nuevamente incluido en el núcleo de Drupal como el editor principal. Aquí tienen algunos logotipos muy geniales de nuestros productos que utilizan CK editor 5. Y nuestros clientes también. Esta es la historia breve y algunos datos sobre CK editor. Pero ¿qué haremos hoy? Y así es como la IA imagina el muro de pegamentos. Lo que haremos principalmente hoy es pegar. Pegaremos diferentes configuraciones del editor solo para obtener un producto que nos gustaría tener. Digo pegar porque pasaremos la mayor parte del tiempo configurando el editor, instalando diferentes complementos. No desarrollaremos nuevas características para el editor. Ese puede ser un tema para futuros talleres. Y también solo tenemos dos horas, así que intentaremos utilizar solo los complementos que ya están allí, pero aún divirtiéndonos un poco con ello. Pequeña advertencia. Amamos Notion. Este es el producto similar a Notion. De hecho, usamos Notion dentro de la empresa CK source. Por lo tanto, esto es algo que valoramos mucho y realmente nos gusta este producto y trataremos de construir algo similar. Y si tienen alguna pregunta, aquí está Simon, aquí está Piotrek. Así que siéntanse libres de preguntar. Básicamente pueden hacer las preguntas en el chat. ¿Se utiliza CK editor dentro de Notion? No o aún no. No lo sabemos, pero actualmente no se utiliza. Así que si tienen alguna pregunta, intentaré echar un vistazo al

Alguien más lo integrará, no te preocupes por eso. Solo necesitamos funciones básicas del editor, como negritas, encabezados, listas y enlaces, y eso debería ser suficiente por un año, ¿verdad? Así que eso es lo estándar. Debería ser suficiente por un año.

Entonces, cuando busques en Google la documentación de CKEditor, hay múltiples opciones de instalación. Pero básicamente lo que haremos aquí, al principio, es simplemente instalar algunos paquetes para CKEditor. Si estás programando junto conmigo, lo haré más fácil para ti si quieres copiar y pegar. Es un poco más rápido para mí porque ya los he instalado. Pero básicamente lo que hemos hecho aquí es instalar algunos complementos. El Editor clásico es el tipo de editor que usaremos. El paquete Essentials es la interacción básica del editor, entrada de portapapeles, estilos básicos después de los estilos básicos para textos, ¿verdad? Negritas, cursiva, formato automático en atajos del editor, encabezados, enlaces y listas. Es bastante autoexplicativo. Los veremos en un segundo.

Entonces, los complementos son la forma en que introducimos las funciones del editor, ¿verdad? Cada función está implementada, o al menos habilitada por un complemento. Entonces, el complemento es básicamente el paquete en nuestro lado. O un paquete puede tener varios complementos en realidad. Los complementos son muy granulares, como puedes ver. Cada función está habilitada por un complemento y lo veremos en un segundo. Y los complementos conocen todo sobre el editor, pero los complementos deben conocer lo menos posible sobre los demás, ¿verdad? Esta es la arquitectura que tenemos aquí. Así que comenzaremos con la configuración básica del editor ahora mismo. Solo iré al index.html. Y tenemos el div con el id editor. Y vamos a incrustar este editor aquí, ¿verdad? Esto es algo que haremos. Y déjame ir a SRC main, ¿verdad? Este es nuestro archivo TypeScript. Ya estamos importando algunos estilos aquí. Más sobre estilos más adelante. Solo sabemos que aquí tenemos los estilos. ¿Y qué necesitamos hacer? Básicamente necesitamos obtener el elemento del editor. Así que hagamos eso. Elemento del editor. Y necesitamos obtenerlo del DOM. Entonces es document.getElementById. Y ahí teníamos el id del editor, ¿verdad? Así que eso es lo que envolveremos aquí. Como estamos usando TypeScript, TypeScript se quejará de que puede ser nulo. Así que mantengamos a TypeScript satisfecho por ahora. Entonces, si no tenemos este elemento del editor, simplemente lanzaremos el error. Necesito... Entonces, si no tenemos el editor, simplemente saldremos temprano, y eso es todo. Y una vez que tenemos este elemento del editor de nuestro DOM, básicamente podemos configurar el editor, ¿verdad? Tenemos el editor clásico y lo importaremos, así que el editor clásico tiene el método estático create. Y aquí simplemente pasaremos el elemento del editor que hemos obtenido del index, ¿verdad? Index y HTML tenían este div, y luego la segunda parte es la configuración del editor. Y aquí, básicamente pasamos el objeto con varias configuraciones, y la primera que haremos es los complementos. Entonces, como hemos instalado los paquetes, básicamente agregamos los complementos a nuestro editor. Y aquí, necesitamos importar básicamente todas esas cosas que hemos instalado. Entonces, se mencionaron los esenciales, Bolt. Asegurémonos de que se importe, Bolt, también estaba la cursiva, el subrayado también. Arreglemos los estilos en un segundo. El tachado, también lo teníamos. Puede ser útil más adelante. Y se mencionó el autoformato. Y luego, tenemos el encabezado. Tenemos el enlace.

Tenemos el auto enlace, que también es un complemento genial que te mostraré en un segundo. Y tenemos la lista de documentos. Entonces, esta es la lista de complementos que usamos. Permíteme formatear este archivo. Así que todos esos complementos están configurados con el editor. Y solo abriré una segunda pestaña aquí para ejecutar el comando npm run dev. Y en nuestro localhost 5133, deberíamos ver el editor, y está ahí, pero algo falta.

Entonces, básicamente, podemos escribir aquí, ¿verdad? Incluso si presiono comando B, está ahí, pero lo que nos falta es la barra de herramientas, ¿verdad? Por lo general, cuando ves el editor, también esperas que haya una barra de herramientas para él. Entonces, esa es nuestra segunda opción de configuración que debemos agregar, y básicamente es una opción de barra de herramientas. Y podemos ver los complementos que tenemos arriba para simplemente agregarlos. Por lo general, lo que ves es que comenzamos con el encabezado. Lo que también podemos hacer aquí es agregar la línea vertical que básicamente dividirá la barra de herramientas. Entonces, tenemos el encabezado, y más adelante, ajustemos los estilos para el texto. Negrita. Solo estoy mirando la lista de complementos en este momento. También tenemos la cursiva. Tenemos el subrayado. Tenemos el tachado como el último. Por cierto, si voy demasiado rápido, avísame y iré más despacio. No se necesita el auto formato. El encabezado ya está agregado, así que simplemente bórralo una vez más. Tendremos el enlace. No se necesita el auto enlace en la barra de herramientas. Luego tenemos dos opciones para las listas de documentos. Creo que tenemos una lista numerada, ¿verdad? Esta es uno de los tipos de lista que podemos agregar, y luego tenemos la lista con viñetas. Entonces, simplemente guardémoslo, formateémoslo y veamos cómo se ve ahora. Se está recargando automáticamente, y básicamente vemos aquí la barra de herramientas del editor, ¿verdad? Tenemos párrafos estándar. Con el auto formato, podemos tener una sintaxis similar a Markdown para agregar, por ejemplo, encabezados, ¿verdad? Entonces, este es el encabezado uno. También podemos agregar viñetas, ¿verdad, como una lista? Y también podemos tener estilos de texto estándar, ¿verdad? El subrayado y usar la barra de herramientas para eso. También podemos agregar enlaces, como ckeditor.com, y cuando lo agregamos y hacemos clic en él, veremos que en realidad no funciona. Entonces, se insertó sin el protocolo, y sin el protocolo, básicamente significa que vemos que creó el enlace relativo. Entonces, para que funcione, en realidad solo necesitamos agregar la configuración a nuestro complemento de enlace. Entonces, simplemente agreguemos el protocolo predeterminado para el enlace, y lo haremos básicamente HTTPS. Entonces, cada vez que agreguemos el enlace sin el protocolo, y volvamos a verificar esto, ckeditor.com, creará un enlace adecuado para nosotros. También tenemos la función de auto enlace. Entonces, por ejemplo, si escribimos www.cksource.com, y presionamos espacio o enter, el complemento de auto enlace básicamente lo hace funcionar. Esto cambia al enlace real en el editor, lo mismo para cksource. ¿Para los correos electrónicos, verdad? Entonces, automáticamente, el propio editor cambia los enlaces a los enlaces adecuados.

Bien, esta es la configuración básica que tenemos aquí. Permíteme verificar el chat. Veo que Kjetil está respondiendo. Eso es genial. Parece que hemos terminado aquí. Y podemos enviarlo a nuestro PM, ¿verdad? Y terminar por un año. Como sabemos, esto es lo que suele suceder. Entonces, simplemente guardaré, cerraré, y sí, más adelante, comenzaremos el acto dos. Y dos días después, nuestro PM vuelve a nosotros y dice que las pruebas internas han tenido una gran recepción, pero faltan algunas funciones, ¿verdad? Y básicamente, los usuarios se quejan de que deshacer/rehacer no funciona. Tal vez podríamos verificar si podemos guardar automáticamente el editor, cómo podríamos preservar estos datos de manera amigable para el usuario. ¿Y podemos hacerlo para mañana? Eso es lo estándar. Entonces intentaremos hacerlo realidad.

Entonces, los data y el autoguardado son el próximo tema que intentaré mostrarte. Y básicamente, lo que haremos aquí es, nuevamente, probablemente no te sorprenderá. Instalaremos el complemento de autoguardado. Pero también había una dimensión de deshacer y rehacer, ¿verdad? Así que volvamos a la página principal. Y el deshacer y rehacer ya está ahí cuando verifiquemos el editor y comencemos a escribir y simplemente presionar comando Z. Verás que en realidad funciona. Pero no es visible en la barra de herramientas. Por lo tanto, deshacer y rehacer forman parte del paquete esencial. Entonces, lo que quizás no era visible para nuestros usuarios, es que ellos no lo veían en la barra de herramientas o asumían que no funcionaba. Así que simplemente agregaré la configuración para la barra de herramientas para tener el deshacer y rehacer. Vemos los iconos aquí y es posible deshacer y rehacer algunas operaciones del editor.

Entonces, todas las operaciones de deshacer y rehacer básicamente son todas nuestras operaciones que se organizan en lotes, ¿verdad? Por lo tanto, más adelante se pueden deshacer o rehacer fácilmente. Y gracias a este enfoque, esta función puede revertir cambios anteriores. No solo el último. Esto nos permitirá manejar operaciones asíncronas. Por ejemplo, cargar imágenes sin bloquear a los usuarios mientras editan el documento.

Se mencionó el autoguardado, pero antes de llegar allí, observemos los datos del editor, ¿de acuerdo? Entonces, cómo muestra el editor los datos. ¿Qué datos tenemos en el editor? Teníamos esta función create y en realidad devuelve una promesa. Entonces, lo que podemos hacer más adelante aquí es simplemente, usaremos esta promesa y básicamente obtendremos el editor aquí en esta función de devolución de llamada. Y primero lo adjuntaremos a la ventana. Entonces, window.editor = editor y el TypeScript contendrá aquí que no tenemos editor en la ventana. No sabe lo que haremos. Así que simplemente extenderé el TypeScript aquí para que sepa que la ventana puede tener el editor. Entonces tendremos algo de editor clásico aquí. He adjuntado el editor a la ventana y cuando lo veamos en la consola y tratemos de obtener el editor, está ahí, ¿verdad? Así que estamos en la consola del navegador, hemos escrito el editor. Permíteme escribir algunas cosas aquí. Y tal vez agreguemos esto. Entonces, cómo obtenemos los datos del editor, una función, ¿verdad? editor.getData es cómo obtienes el HTML puro del editor. Pero estos son solo los datos que obtenemos, ¿verdad? Hay un modelo adicional debajo del editor y lo veremos en un segundo. En realidad, es bueno inspeccionarlo y ver qué tiene el editor debajo.

Y para hacer eso, simplemente usaremos el complemento que usamos mucho para el desarrollo. Entonces, el complemento en sí es el inspector CKEditor5. Aún no está escrito en TypeScript. Es algo que usamos puramente para el desarrollo. Entonces, simplemente puedes agregarlo a tus DevDependencies y el inspector de CKEditor nos permitirá verificar el modelo del editor. Así que volveré a src main, y aquí, debajo de adjuntar el editor a la ventana, simplemente usaré el inspector de CKEditor. Entonces, esta es nuestra clase principal que usaremos y básicamente adjuntaremos el propio editor a ella. Obviamente, necesito importarlo. Así que tenemos el inspector de CKEditor y lo haremos desde el paquete inspector. Como mencioné, no está en TypeScript, así que simplemente, una vez, prometo, ignoraremos el TypeScript. Todo esto en verde y veamos qué tenemos aquí. Entonces, lo que puedes ver aquí, este es el panel del inspector de CKEditor. Cuando escribimos aquí, verás que tenemos algo llamado Modelo en el editor. Entonces, básicamente, el Modelo son nuestras estructuras similares al DOM, una estructura de elementos y nodos de texto. A diferencia del DOM real, lo que verás aquí es que tanto los elementos como los nodos de texto pueden tener atributos. Por ejemplo, aquí tenemos el texto y el texto tiene el atributo negrita. Entonces, casi todas las características del editor se centran en trabajar directamente en el Modelo, pero este Modelo se convierte posteriormente en dos vistas separadas. Tenemos la vista de edición y la vista de datos, que representan básicamente la vista de edición, el contenido que el usuario está editando. Entonces, esta estructura similar al DOM que ves en el navegador y en el segundo paso del inspector, verás esta vista de edición, y también tenemos la vista de datos. Y la vista de datos es básicamente editor.getData. Así que tenemos la vista de datos en HTML. Tenemos la vista de edición, también en HTML en el lado de edición. Y también tenemos el Modelo del editor. Esos son los tres conceptos principales que observaremos a lo largo de los talleres, cómo funcionan. Lo que verás, y trataré de mostrártelo también, es cómo la vista de edición difiere de la vista de datos. Pero de todos modos, volvamos al Autoguardado, ¿de acuerdo? Ese era nuestro concepto principal que queremos tener. Primero que nada, hagamos algo estándar aquí. Entonces, importaremos el complemento Autosave. Y luego, lo siguiente que debemos hacer, es configurar el complemento Autosave. Así que simplemente pasaremos las propiedades, tiempo de espera. El tiempo que debe transcurrir después de la última acción para que se lance la devolución de llamada, ¿verdad? Entonces, básicamente tendremos aquí 5 milisegundos, y luego tendremos la devolución de llamada aquí también.

Entonces, para guardar, obtendremos el editor aquí, y básicamente devolveremos una promesa. Solo crearé una función, guardar data con el editor. Aquí lo que haré, en realidad escribiré este editor como editor clásico. Necesitaría instalar un paquete adicional para obtener el tipo de editor. Como puedes ver aquí, obtendremos el editor en la parte inferior de la pantalla. Simplemente lo convertiré en editor clásico para que TypeScript no instale un paquete adicional. En esta función guardar data, lo que haremos como mencioné, es obtener el propio editor de tipo editor clásico y básicamente devolveremos una nueva promesa. Esto es lo que simularemos aquí el autoguardado. Por lo general, tendrías alguna implementación para guardar los data a través de alguna API, por ejemplo, que tu backend te proporciona para guardar el contenido. Nosotros simplemente lo imitaremos con el tiempo de espera. Entonces, básicamente tenemos una promesa aquí y aquí tendremos la resolución. Y simplemente estableceremos el tiempo de espera aquí con el controlador vacío y lo que haremos aquí, simplemente registraremos en la consola que se guardaron los data, ¿verdad? Y aquí ves nuestra función editor get data al final de ella, obviamente necesitamos resolver y tal vez lo hagamos nuevamente cada 500 milisegundos. Entonces tenemos la devolución de llamada para guardar data cuando lo verificaremos e intentaremos hacerlo. Estoy escribiendo algo y en la consola a la derecha ves que en realidad estamos guardando automáticamente de vez en cuando cuando pasa el tiempo. Pero el usuario no lo ve, ¿verdad? Entonces, algo que necesitaremos hacer aquí es tener algún tipo de elemento visible para el usuario que le permita observar básicamente que el autoguardado está en progreso. Así que lo haremos nuevamente teniendo una función y esta función estará en el, así que haremos la función de mostrar estado, lo escribiremos en un segundo. Entonces, mostrar estado para nuestro editor. Lo que verás aquí, y volveré al índice HTML a una de nuestras partes comentadas en el índice HTML, tenemos esta parte comentada que básicamente nos da este lugar de autoguardado. Entonces habrá un pequeño spinner que nos mostrará que se está guardando automáticamente, pero aún necesitamos mostrar cómo, cuándo mostrar que este autoguardado se está guardando realmente. Entonces, este es nuestro estado de visualización, lo que hará nuestra función de mostrar estado. Entonces tenemos esta función, mostrar estado. Vamos a definirla. Nuevamente, toma el editor clásico. Y lo que haremos aquí, usaremos el editor para obtener uno de los complementos. Este complemento se llama acciones pendientes y usaremos la API del editor para obtenerlo. Entonces, complementos del editor, obtener, y aquí tendremos las acciones pendientes. Entonces obtuvimos uno de los complementos, y otra cosa que debemos hacer es obtener el indicador de estado del DOM. Y aquí simplemente obtendremos el elemento por ID nuevamente. Y creo que era, déjame verificar, volviendo atrás, creo que necesitamos obtener el estado de autoguardado. Así que simplemente copiaré eso aquí, tal vez vuelva y lo pegue aquí. Entonces tenemos el complemento en sí acciones pendientes y tenemos el indicador de estado que cambiará y mostrará el spinner que se está guardando. Entonces, en las acciones pendientes agregaremos el escucha, ¿verdad? Entonces nuevamente, puedes agregar escuchas a nuestros complementos. Entonces habrá básicamente un evento aquí llamado cambio en la propiedad tiene 10 años. Entonces, si hay alguna acción, simplemente queremos tener una devolución de llamada para hacer algo con eso, ¿verdad? Aquí hay tres propiedades, ignoraremos la herramienta. Entonces obtendremos el evento en sí, obtendremos el nombre de la propiedad, pero no lo usaremos. Así que simplemente lo subrayaré. Y el tercero es básicamente el nuevo valor que nos gustaría verificar si está ahí. Entonces, si el nuevo valor está ahí, lo que nos gustaría hacer, es simplemente agregar a la lista de clases de nuestro indicador de estado. Agregaremos la clase ocupado. Entonces nuestros estilos nos permiten usar esta clase y si no está allí, eliminaremos la clase. Comenzamos con el indicador, la lista de clases y eliminemos la clase ocupado. Parece que todo está bien. Vamos a darle estilo. Y este es nuestro autoguardado en la esquina superior derecha. Entonces, cuando comience a escribir algo, las acciones pendientes verán eso, bien, algo está sucediendo allí. Y luego, cuando se guarda, mostramos al usuario que, bien, el editor en sí está guardado. El autoguardado está funcionando. Otra característica interesante del autoguardado, tal vez también lo veas cuando escriba algo. Entonces, el autoguardado todavía está como si no hubiéramos guardado el contenido pero luego intentaré salir de la parte superior. El autoguardado funciona de tal manera que intentará evitarlo, ¿verdad? Es posible que algunos data no se guarden, estimado usuario, ¿estás seguro de que quieres salir? Correcto, esto es algo que viene directamente con el autoguardado.

De acuerdo, vemos que funciona, el autoguardado está funcionando, tenemos un indicador genial de que se está guardando. Podemos guardarlo nuevamente y enviarlo a RPM. Permítanme verificar si hay alguna pregunta. Piotrek, pulgar arriba. ¿Necesitamos responder algo? Perfecto, ¿voy demasiado rápido? Es posible. Intentaré ir más despacio entonces. Nadie se está quejando. Si quieres quejarte, adelante. Si no, voy a seguir porque hemos enviado algo a RPM y eso significa que comienza el Acto 3. Entonces, inmediatamente, oh, Kipo, entonces inmediatamente, oh, estás al día, perfecto, genial. Bueno saber eso. Oh Dios mío, el autoguardado es perfecto. El PM está encantado y podemos hacer tablas e imágenes. Obviamente, te sorprenderá que el PM haya dicho que tenemos un año con un conjunto básico de funciones pero la dirección ama la iniciativa así que simplemente seguiremos adelante. Las tablas e imágenes son algo bastante estándar que tienes en todos los editores. ¿No son fáciles de implementar, verdad? Así que esto es algo que veremos lo que podríamos obtener en CKEditor. Y aquí, simplemente pegaré complementos adicionales que se instalarán y en realidad son solo dos. Entonces tenemos la tabla de CKEditor y la imagen de CKEditor y comenzaremos con la configuración simple de la tabla de CKEditor. Nuevamente, no te sorprenderá lo que haremos primero es agregar esos complementos. Entonces tenemos la tabla, el segundo que intentaremos agregar es la barra de herramientas de la tabla porque sí, una buena barra de herramientas para la tabla no está mal. Y lo que haremos aquí es agregar algo a nuestra barra de herramientas llamado insertar tabla. Por lo tanto, se mostrará en nuestra barra de herramientas que es posible insertar la tabla. Y vuelvo a nuestro editor y sí, la tabla está aquí pero lo que notarás es que se comporta de manera un poco diferente porque aquí vemos el primer widget y ves la diferencia principal entre la, oh, algo está sucediendo aquí, probablemente aún está funcionando, déjame verificar. De acuerdo, ves la diferencia en la vista de edición y la vista de data a la derecha, ¿verdad? Entonces, en la vista de edición, ves algunas clases adicionales en los elementos de la tabla. También hay algunos atributos adicionales pero en la vista de data, no los verás. Aquí vemos la primera diferencia entre la vista de edición y la vista de data. Son diferentes. Y los widgets básicamente agregan algunas funcionalidades de edición geniales. Entonces, por ejemplo, imagina que no tienes este párrafo aquí, ¿verdad? Y quieres agregar contenido. Querrías presionar Enter antes de eso y comenzar a escribir aquí. También el selector también. Agrega funciones geniales cuando estás escribiendo y te mueves con tu teclado. Entonces simplemente puedes seguir adelante y moverte con tu teclado. Puedes ingresar, ¿verdad? Entonces esto es un widget y también lo veremos en las imágenes en un segundo pero quedémonos con la tabla por un momento. He mencionado la barra de herramientas. Nuevamente, la barra de herramientas es algo que configuramos a través de la configuración, ¿verdad? Entonces tenemos una opción de tabla aquí. Y lo que queremos hacer aquí es en realidad antes de ir a la barra de herramientas hay una opción que quiero mostrarte, encabezados predeterminados, ¿verdad? Entonces podemos decirle al editor que de manera predeterminada queremos que la primera fila. Y por ejemplo la primera columna sea nuestro encabezado. Entonces esto es algo que podríamos agregar aquí. Y otro es la barra de herramientas de contenido. Entonces aquí diremos que en nuestra barra de herramientas queremos tener la columna de la tabla, con la columna nos gustaría tener la opción para la fila de la tabla. Y también nos gustaría tener la fusión de celdas. Creo que esa era la opción de fusión, fusionar celdas de tabla. De acuerdo, intentémoslo de nuevo. Como puedes ver, ya tenemos los encabezados a, b, c, d. Lo que también podemos hacer. Vemos la barra de herramientas aquí. Obviamente podemos usar esto para agregar algunas filas o eliminar algunas filas, agregar algunas columnas también. Y también tenemos esta función genial de fusión. Y estas son solo algunas características de la tabla.

No quiero pasar mucho tiempo aquí. Obviamente, también tenemos propiedades y estilos de tabla. Todas esas opciones se pueden agregar a la barra de herramientas de la tabla. Así que la tabla está ahí. Permíteme verificar la hora, el tiempo. Está bien. La tabla está ahí. Y lo segundo que queríamos agregar eran las imágenes. Nuevamente, algo que estamos haciendo aquí. Necesitamos importar la imagen desde CKEditor 5 imagen. Y tal vez también tengamos la opción de redimensionar aquí para que nuestro usuario tenga la posibilidad de redimensionar. Y otra cosa aquí es la carga de imágenes. Esto es algo que verás aquí. Tenemos la carga de imágenes. De hecho, hemos agregado tres complementos del paquete de imágenes. Tenemos imagen, redimensionar imagen y carga de imágenes. Después de la tabla, lo que necesitamos hacer en la barra de herramientas en sí, agreguemos una división adicional solo para dividirla. Y aquí tenemos la carga de imágenes, ¿verdad? Así que agregamos capacidad adicional a nuestra barra de herramientas. En nuestra barra de herramientas, veremos el icono aquí. Y cuando intente cargar una imagen, no funcionará. Básicamente, lo que usualmente necesitamos configurar junto con las imágenes es el adaptador de carga. Llamamos a este software que básicamente le dice al editor qué hacer con la imagen que recibió. Básicamente, es una devolución de llamada, cómo guardar o enviar el archivo al servidor. Aquí hay dos estrategias principales. Básicamente, puedes usar uno de nuestros productos, como adaptadores de carga oficiales, que son muy fáciles de configurar. Solo tienes que agregarlos y verás eso en un segundo. Tenemos opciones gratuitas y premium para esos adaptadores, o simplemente puedes escribir tu propio adaptador aquí. Y algo que puedes hacer para conectar el editor a tu backend y usar tu lógica, ¿verdad? Cómo quieres manejar los archivos y las imágenes. Usaremos CKBox. Este es nuestro adaptador oficial. Para usarlo, necesitas tener la licencia y si alguien está programando junto, simplemente pegaré aquí donde puedes obtener la prueba gratuita de 30 días, sin tarjeta de crédito, solo danos tu correo electrónico, no te enviaremos correos electrónicos o probablemente solo habrá algunos correos electrónicos. Pero si quieres configurar CKBox, configurar la prueba ahora mismo, debería ser bastante rápido y luego dentro de la prueba obtendremos algo llamado URL de token para ello. Así que me detendré aquí por un segundo para darte tiempo si quieres configurarlo. A partir de esto, más adelante también usaremos esta prueba para configurar la colaboración en tiempo real. Así que esto es algo que puede ser útil más adelante. Tenemos funciones premium para nuestro editor. Solo usaremos un par de ellas para mostrar la colaboración en tiempo real. Mientras configuras la prueba para obtener las claves de nuestro CKBox, solo te mostraré y trataré de hacerlo despacio para que nadie se pierda. Simplemente vamos a nuestro index HTML. Y lo que necesitamos hacer aquí, hay un script que carga el CKBox para nosotros. Como es un producto externo, simplemente lo cargaremos desde el CDN el CKBox. Y las cosas adicionales que necesitamos hacer aquí es instalar los complementos. Así que dos complementos que instalaremos aquí, uno es la conexión de CKEditor5 con CKBox. Esos son dos productos separados. El segundo es los servicios en la nube. No lo necesitaríamos si solo usamos CKBox, pero esto es algo que también usaremos más adelante. Así que ya podemos comenzar con eso. Y lo que necesitamos hacer aquí para configurar CKBox, y solo verificaré si... Hasta ahora, sin problemas, perfecto. Volvemos al dominio y agregamos esos dos complementos que acabamos de instalar a nuestra lista de complementos.

En realidad, necesitaremos tener tres. Básicamente agregamos CKBox. Así que nuestro enlace entre el editor y CKBox. También tenemos los servicios en la nube, y también agregaremos la edición de imágenes porque CKBox en sí utiliza la etiqueta de imagen. Así que esto también será necesario. Y obviamente nos gustaría tener CKBox en la barra de herramientas. Y una última cosa que necesitaríamos configurar es en realidad esta licencia, ¿verdad? Entonces algo que tal vez podamos agregar al final de nuestra configuración, aquí tenemos la configuración de los servicios en la nube, y aquí usaremos una de las opciones para autenticar o decirle al editor, `oye, tengo esta función premium y se llama URL de token`. Solo intentaré mostrarte cómo llegar allí, tal vez mi panel de control. Por ejemplo, tienes el CK editor. Así que esta es mi prueba, ¿verdad? Puedes ver aquí que tienes el CK editor y cuando vas a nuestros paneles de control, es posible obtener el entorno de muestra y usaremos la URL de token de desarrollo, ¿verdad? Es un entorno de desarrollo que te ayudará a usar CKBox y más adelante la colaboración, probablemente necesites generarlo. Ya lo tengo generado. Así que esto es algo que tal vez necesites hacer. Y luego dentro del proyecto en sí, tendrás el archivo de token en el ESRC. Solo copia y pega la URL de token en esta variable que tenemos allí y debería funcionar. Ya tengo un archivo diferente configurado. Así que simplemente importaré desde el archivo de token que tengo aquí. Y si hemos hecho todo correctamente, debería funcionar. Déjame revisar nuestro editor. Y lo que queríamos hacer aquí es cargar una imagen y ahí está. Esta es la imagen que elegí. Puedo redimensionarla. Oh, algo gracioso sucedió allí, pero puedo redimensionarla. Y observa lo que hizo CKEditor, ¿verdad? He subido la imagen. Como puedes ver a la derecha, los data, CKEditor convirtió la imagen en una imagen responsiva. Como hay esta implementación en el lado HTML del elemento de origen. CKBox convirtió la imagen a varios tipos de archivo y dependiendo del tamaño de tu pantalla, servirá el archivo diferente, ¿verdad? Así que esto es algo que obtienes directamente de CKBox. Por lo general, necesitarías escribir mucho código para obtenerlo, ¿verdad?, pero aquí CKBox lo maneja por ti. También puedes ver que es el tipo de archivo WebP. Así que también está convirtiendo los archivos y esto es algo que hace por ti directamente. Y también podemos usar el panel de CKBox en el CKEditor, ¿verdad? Básicamente, tenemos imágenes aquí, como puedes ver, pero también puedes cargar archivos e imágenes. Oh, esto es algo que usé para testing, ¿verdad? Obviamente puedes copiar y pegar, ¿verdad? Así que simplemente tendré la parte de la pantalla en mi portapapeles. Lo copiaré y pegaré y también se cargará. Así que podemos arrastrar y soltar, podemos copiar y pegar. También tenemos otras opciones de configuración de imágenes, ¿verdad? Entonces algo que podrías hacer es, por ejemplo, esta es la imagen de bloque, ¿verdad? También tenemos la posibilidad de tener imágenes en línea. También hay una barra de herramientas para las imágenes y puedes darles estilo para moverlas a la derecha y a la izquierda. No iremos allí, solo quería mostrarte la configuración básica de las imágenes y qué podemos hacer con ellas y cómo usar el adaptador oficial que proporcionamos para ti, ¿verdad? Y como puedes ver nuevamente, la imagen en sí es un widget por lo que agrega esas capacidades geniales de hacer esto y escribir alrededor de la imagen. El redimensionamiento, no disminuye el tamaño del archivo, el redimensionamiento en nuestro sitio también es configurable. Entonces puedes, por ejemplo, agregar opciones para que el usuario tenga la posibilidad de redimensionar al 50% y al 25%. Y básicamente solo estamos agregando el estilo en línea al elemento de figura, como puedes ver allí. Esta es la implementación de la imagen de bloque. Entonces la imagen en sí está envuelta alrededor de la figura. Y en el caso de CK Box, también creo que alrededor de la imagen que hemos agregado aquí. Y también, archivos, ¿verdad? Entonces, también puedes agregar los archivos a CK Box. Se mostrarán como enlaces dentro del editor. Esto es algo que CK Box también puede servir y servir PDF u otros archivos que desees cargar allí. De acuerdo. Los archivos están ahí. Y creo que podemos enviarlo de vuelta a nuestro PM y ver si tiene alguna otra misión para nosotros. Y en realidad estoy yendo tan rápido que terminaré temprano. Así que tendremos que averiguar qué mostrarte durante otra hora.

No, no es eso, pero hablaré un poco más despacio ahora. Así que tenemos el acto cuatro, algo que nuestro PM, veamos qué nos dirá nuestro PM. Eres un maestro. Eso es genial. Y bien, entonces nuestro departamento de design te pidió que lo hagas, que se vea y funcione como Notion. Te sorprenderás como usualmente cuando tomas algunas decisiones sobre el editor, te gustaría conocer este error antes de elegir el editor, pero ya sabes cómo es. Nuestro PM quiere tener un editor de vanguardia, sin barra de herramientas, del siglo XXI. Así que usualmente cuando usas algunos productos, eso puede ser un cambio difícil, cómo estilizar el editor, pero lo que podríamos hacer en el sitio de CK editor, es agregar complementos, ¿verdad? Y tenemos los complementos que básicamente cambian el tipo de editor. Así que tenemos un complemento que básicamente nos permite cambiar el estilo del editor clásico al editor de globo en sí. Así que tenemos dos nuevos complementos, que básicamente son un complemento de interfaz de usuario y el editor de globo que instalaremos aquí. Y cuando lo instalemos, simplemente reemplazaremos el editor clásico que tenemos con el editor de globo. Así que tenemos el editor clásico aquí, déjame desplazarme hasta él y reemplazaré nuestro editor clásico con el editor de globo. Hemos usado el editor clásico en algunos lugares, así que simplemente reemplazaré cada aparición con el editor de globo, así que tenemos el editor de globo aquí, tenemos el editor de globo en el mismo data, estado de visualización del editor de globo, este es el import, esta es la declaración global y en realidad podemos, esto no es algo que quiera hacer, podemos eliminar el editor clásico. Así que esto es algo que no usaremos, tenemos el tipo de editor de globo, te lo mostraré en un segundo, pero la segunda cosa que podríamos intentar hacer es básicamente un complemento para la barra de herramientas de bloques. Así que tenemos la barra de herramientas clásica en la parte superior de nuestro editor, lo que nos gustaría tener ahora es básicamente algún tipo de icono que muestre o permita abrir la barra de herramientas de bloques. Así que tenemos un complemento para eso, se llama barra de herramientas de bloques, tal vez lo agregaré al final, asegurémonos de que esté allí, así que tenemos la barra de herramientas de bloques y solo necesitamos cambiar la opción de la barra de herramientas a la barra de herramientas de bloques. Y con eso, veamos cómo se ve ahora. Y tenemos el editor aquí, como puedes ver, no tenemos la barra de herramientas, solo tenemos esta Pilkrow a la izquierda que básicamente es nuestra nueva barra de herramientas. Así que se parece un poco más a Notion cuando tienes estos seis puntos y el más, así que es solo un elemento de barra de herramientas diferente que podemos tener aquí con el que básicamente podemos estilizar las características y también estilizar el texto si queremos usarlo de esta manera, obviamente los atajos de teclado siguen funcionando. Algo que no funciona tan bien es que cuando salimos del editor, en realidad no vemos que haya algo allí. Y para eso, lo que podemos hacer, es simplemente agregar el marcador de posición. Así que le diremos al editor que queremos tener la opción de comenzar a escribir allí. Aquí. Así que tenemos el marcador de posición para comenzar a escribir. Y cuando vamos aquí, ya vemos eso, okay, este es el lugar para el editor y puedo comenzar a escribir, ¿verdad? Así que hemos cambiado el tipo de editor del editor clásico, por lo general, el que ves en la web, al editor de globo con la genial barra de herramientas de bloques. Y también puedes preguntar aquí, pero okay, ¿qué está sucediendo con los estilos, verdad? Como tenemos esos estilos aquí. Tal vez hay algo de magia allí. Permíteme guardar. Pero en realidad no es tanto. Solo configuramos el teléfono. Entonces el editor realmente se puede estilizar con CSS, ¿verdad? Como básicamente puedes agregar algunas clases o sobrescribir algunos parámetros, ¿verdad? A nivel de CSS, a nivel de raíz. Y estilizamos obviamente aquí, la raíz, el cuerpo, la parte superior es el contenedor que tenemos desde arriba. Contenedor H1, que es algo fuera del editor. Y para el propio editor, en realidad tenemos, creo que tal vez tres definiciones, ¿verdad? Como hacemos que el orden sea transparente y no haya sombra de caja. Pero en realidad es solo esto, como este fuego es un poco más largo. También tenemos probablemente el guardado automático es el más complejo aquí estilización que tenemos, que es este genial spinner que tenemos en la parte superior derecha. Pero aparte de eso, en su mayoría es esto. No quiero arruinar otras características que implementaremos en un segundo. Pero básicamente el estilo está ahí, pero no hemos usado tantas cosas para que se vea más limpio. Así es nuestro editor actual. Se parece un poco más a Notion, así que intentemos enviarlo a nuestro PM y veamos qué comentarios tiene para nosotros.

Así que nos estamos acercando a nuestro, tal vez no final pero el momento que todos hemos estado esperando porque nuestro PM es muy inteligente y perspicaz y se dará cuenta de que Notion generalmente también tiene la colaboración en tiempo real y este es el segundo momento en el que generalmente te vuelves loco y tienes miedo porque nuevamente, esto es algo que sería ideal saber al principio del proyecto si estás implementando algo pero nuevamente, es algo en lo que el editor de CK puede ayudarte, así que cada vez que tengas en el futuro algún tipo de necesidad de implementar la colaboración en tiempo real en un texto, te tenemos cubierto y lo mostraremos en un segundo. Las dos cosas aquí para recordar es que en realidad tenemos las dos partes aquí así que tenemos la colaboración y para eso tenemos, creo, tres complementos, ¿verdad? Así que podemos dejar los comentarios, obviamente puedes tener el seguimiento de cambios y el historial de revisiones. Así que esta es la parte de colaboración, pero también puedes, y puedes hacerlo de forma asíncrona, ¿verdad? Por ejemplo, una persona hace un comentario, luego otra persona abre el documento, agrega otro comentario. Así que esto puede ser totalmente colaborativo asincrónico habilitado por algunas características del editor, pero lo que también puedes tener es, además de eso, tener la colaboración en tiempo real. Entonces los usuarios pueden observar en tiempo real lo que los otros usuarios están haciendo. Así que esto es algo que intentaremos implementar ahora mismo. Colaboración en tiempo real más comentarios. Esto es algo que generalmente se necesita.

Nuevamente, una función premium en nuestro sitio. Puedes probarla libremente con la prueba de 30 días y configurarla para ti mismo. Y es la misma configuración que teníamos para CKBox. Más adelante, simplemente copiaremos más configuración allí. Pero antes de ir a la configuración, necesitamos hacer dos cosas. Necesitamos instalar dos complementos más y, como mencioné, tendremos la colaboración en tiempo real y tendremos los comentarios además de la colaboración en tiempo real. Esto llevará un tiempo. Así que asegúrate de tener la prueba configurada si quieres unirte a la colaboración en tiempo real. Y debería terminar en un segundo. Ya estamos listos.

Así que volveré a nuestro archivo principal de TS y los pasos habituales serán los mismos que antes, así que básicamente agregaremos la edición colaborativa en tiempo real. Antes de pasar a los comentarios, observemos solo la parte de edición, donde varios usuarios agregan contenido al mismo tiempo. Tenemos el complemento de edición colaborativa en tiempo real. También utilizaremos la lista de presencia que nos permitirá mostrar quién está en el contenido, es decir, quién lo está editando. Parte de la configuración ya está aquí.

Así que vamos a nuestros servicios en la nube que hemos configurado para CKBox. Aquí ya tenemos la URL del token. Y recuerda que esta es la URL del token para el entorno de desarrollo. Más adelante, podemos hablar de cómo implementar algo para tu entorno, pero aquí obtendremos automáticamente la configuración de usuario, ¿verdad? Los usuarios de demostración, no necesitamos configurar nuestro propio backend para los usuarios y cosas así. Esto es para el entorno de desarrollo. Lo que necesitamos agregar aquí es la segunda opción, la URL del WebSocket. Nuevamente, la verás en el panel de control cerca de la URL del token. Ya he configurado esta parte. Agrégalo a tu archivo de tokens. Ya lo tengo aquí. Así que simplemente lo agregaré. Esta es la configuración que permite la colaboración en tiempo real. Y la opción que es obligatoria para toda la colaboración en tiempo real, y probablemente la más crucial, es el ID del canal. Y simplemente escribiré aquí 1, 2, 3, 4, 5, 6. El ID del canal es básicamente la configuración, la propiedad de configuración muy importante para la colaboración. Porque establece en el editor qué instancias del editor colaboran entre sí. Entonces, todos los clientes, todos los usuarios que tienen el mismo ID de canal colaborarán en el mismo contenido. Y cada documento debe tener un ID de canal diferente. Este ID, como puedes imaginar, generalmente es la clave primaria del documento. Algún ID dentro de tu base de datos para el documento. Puedes poner lo que necesites allí. Solo recuerda que debe ser único. También agregaremos aquí la lista de presencia. Y la lista de presencia es algo que ya tenemos en el indexHTML. Solo necesitamos el contenedor. Y nuevamente, obtendremos el elemento por ID. Y solo verificaré en el index. Creo que está comentado. Así que la lista de presencia está aquí. Está en la parte superior. Contenedor de la lista de presencia. Permíteme copiar esto. ID. Y agreguémoslo a nuestra lista de presencia. Desafortunadamente, haré que TypeScript vuelva a compilar.

Simplemente lo forzaré y diré que esta lista de presencia, si está ahí, mostrará una advertencia. Así que vamos a probarlo. Este es el momento en el que deberíamos verlo. Se actualiza automáticamente. Así que la lista de presencia, en la parte superior derecha. Este soy yo. Esta es Amelia. Este es el usuario de demostración que se nos proporciona con el token. Permíteme cerrar la consola por un momento. Y abriremos la división del lado derecho. Agreguemos un segundo documento aquí. Y el segundo usuario, o en realidad el tercer usuario, y deberíamos conectarnos. Y disculpen por los tres usuarios. Probablemente tenga abiertas dos cosas en algún lugar. De acuerdo, déjame cerrarlo. ¡Y funciona, ¿verdad? Entonces, esto es, aún no, ¿verdad? Así que vemos que tenemos dos usuarios. Permíteme intentar empezar a escribir. Y funciona. Para ser honesto, cuando vi por primera vez lo rápido que pude configurarlo, me quedé bastante asombrado de que simplemente funcionara, ¿verdad? Como esta colaboración en tiempo real es un tema bastante complejo, como puedes imaginar, los usuarios pueden no escuchar imágenes, pueden hacer lo que quieran aquí. Y aquí vemos la sesión en vivo entre los dos usuarios. Esto es algo realmente, realmente genial en el que básicamente tienes dos sesiones de editores colaborando en el mismo contenido con los usuarios junto a ellos. Y simplemente trabajan juntos. Y eso es bastante genial, diría yo, y realmente me gusta.

Lo que debes recordar, y déjame ocultar el esquema por un momento, es que hay un servidor, ¿verdad? Así que hay un servidor en el medio de esos dos editores que colaboran que básicamente gestiona la sesión de la colaboración. Entonces, lo que estamos haciendo aquí es básicamente tenemos dos usuarios conectados, hay un servidor, pero este servidor en la nube, o local, porque en realidad podemos, también puedes tener la colaboración en local en tus propios servidores. Almacena la sesión, pero solo temporalmente, ¿verdad? Mientras haya usuarios conectados, y a veces la sesión está ahí. Así que debes asegurarte de guardar este contenido en tu base de datos antes de que el último usuario se desconecte. De lo contrario, el contenido de la sesión se perderá, ¿verdad? Por lo tanto, se recomienda guardar los datos automáticamente cada vez que los datos cambien. Y solo imagina que hay dos usuarios colaborando entre sí, e imagina que hay un conflicto, ¿verdad? Como que a alguien se le cae internet. Vuelven, comienzan a editar. Esta es la versión posterior del documento. Entonces, lo que podría suceder es que alguien intente guardar la versión anterior del documento, sobrescribiendo la más nueva. Y usualmente no quieres que eso suceda.

Lo que haremos aquí es utilizar una de las propiedades que nos proporcionan los complementos, y nos dirigiremos a nuestra función de guardar data, y en la promesa antes de establecer el tiempo, también antes de este guardado falso en alguna base de datos, intentaremos obtener la versión del documento. Aquí tenemos la versión, nuevamente, nos conectaremos a la API del editor para obtener este complemento, que tiene un nombre muy largo, cliente de colaboración en tiempo real. Este es el complemento que obtendremos, y de él obtendremos la versión del documento en la nube. Esta es la versión del documento que tendremos. Y simplemente lo colocaremos junto a la obtención de data del editor. Así que tenemos la versión del complemento, y esta versión quedará registrada en nuestra consola.

Permíteme volver a nuestro editor y verificar una cosa en el fondo, los editores se están actualizando. Hubo una actualización porque era necesario reconstruir el vid, hemos cambiado la prueba, así que hubo una reconstrucción completa y un empaquetado, pero el contenido permanece. Entonces, cuando has visto anteriormente que hemos cambiado el contenido del editor, se perdió, pero aquí tenemos esta sesión abierta, así que cada vez que volvamos a los editores, este contenido realmente permanecerá con nosotros y estará allí mientras la sesión esté activa. Permíteme abrir la consola nuevamente aquí y comencemos a escribir aquí. Tal vez agreguemos un subpunto adicional aquí. Así que tenemos estos datos guardados y aquí puedes ver el número al final. Entonces, cuanto mayor sea el número, más nuevo será el documento, ¿verdad? Por lo tanto, este número lo proporcionaremos nosotros, creo que en realidad desde el servidor, ¿verdad? Nos dará el número de este documento y cuando estés guardando el documento mediante, por ejemplo, el guardado automático, necesitas comparar, okay, necesito almacenar este número en mi base de datos probablemente y cada vez que haya alguna acción de guardado, verifico si el nuevo documento tiene un número de versión más alto y eso significa que es bastante seguro guardar el contenido de este editor. Como puedes imaginar, tenemos otros métodos de guardar los datos. Por ejemplo, también puedes usar, creo que nuestra conexión WebSocket, ¿verdad? Por lo tanto, podemos conectarnos, no obtener el contenido de los usuarios, sino simplemente usar la conexión a través de los WebHooks desde nuestro servidor, no WebSockets, lo siento, no WebSockets, WebHooks desde nuestro servidor, como un servidor central que tiene la sesión y recibirás el contenido a través de los WebHooks desde nuestro sitio y lo enviarás a tu servidor. Creo que también hay una API REST que podrías usar. También hay una función llamada almacenamiento de documentos en la cual, de hecho, almacenaremos el documento por ti y luego simplemente podrás obtenerlo desde nuestros servidores. Hay varias opciones aquí. Solo quería mostrarte la más fácil. Ya tenemos el guardado automático, así que digamos con la versión más reciente del editor. Y ya tenemos la colaboración configurada. Permíteme verificar la hora, estamos bastante seguros. Simon está escribiendo algo genial. Yo estaba escribiendo lo mismo pero acabas de mencionar la demostración. No quería interrumpirte. Perfecto. Así que lee los comentarios de Simon. Si estás interesado en los métodos de guardado, lo que haré aquí rápidamente y creo que seguramente tendremos tiempo para la discusión. Podrás hacernos algunas preguntas. Así que tenemos la colaboración en tiempo real y lo que haremos, lo segundo que queríamos tener son los comentarios. Y nuevamente, los comentarios se pueden hacer de forma asíncrona pero nos gustaría tenerlos en, creo que es un complemento de comentarios en nuestro lado. Así que tienes los comentarios y agregas comentarios colaborativos en tiempo real, ¿verdad? Entonces, nuevamente, los comentarios se pueden usar de forma asíncrona pero si quieres tener la colaboración en tiempo real también es posible. Así que también tenemos el complemento de comentarios colaborativos en tiempo real. Después de nuestro CKbox, agreguemos el botón de comentarios a nuestra barra de herramientas de bloques. Así que hay un comentario y creo que hay una segunda opción que acaba de ser lanzada. Recientemente, también tenemos el archivo de comentarios. Así que tenemos el archivo de comentarios y otra cosa que podríamos configurar aquí es básicamente tener una especie de barra lateral para los comentarios. Entonces, cuando vayamos al índice HTML, hay una cosa que podemos descomentar aquí que es la barra lateral y la barra lateral con la barra lateral habilitada. Simplemente copiemos la lista de presencia. Será algo similar. Así que tenemos la configuración de los comentarios y aquí, según recuerdo, era el ID de la barra lateral que tendremos aquí. Así que tenemos la configuración de los comentarios que básicamente es la barra de herramientas más los complementos, las cosas habituales que hemos hecho. También agregaremos la barra lateral. Empuja nuestro contenido un poco hacia la izquierda. Más tarde puedo mostrarte una implementación diferente de eso pero básicamente lo que tenemos aquí ahora mismo es que aquí está la barra lateral que nos empujó un poco hacia la izquierda y dentro del registro simplemente podemos agregar el comentario. Así que agregaré el comentario aquí. Aún tenemos esta sesión abierta, ¿verdad? Entonces, cada vez que estés en una sesión de colaboración en tiempo real con otro usuario, podrás verlo en vivo y respondamos aquí, buen comentario. Y esto es algo que el otro usuario también verá en vivo. Nuevamente, algo interesante para ti que quizás quieras revisar es que cuando tenemos el, y permíteme abrir aquí nuevamente nuestra vista de data del editor y agreguemos algo aquí. Cuando mires los datos, verás que aquí tenemos el inicio del comentario y el comando y dentro del HTML.

Entonces, no incluimos ningún contenido de los comentarios por razones de security seguridad, ¿verdad? Entonces, si comenzamos, por ejemplo, algo aquí, algún actor malicioso podría editarlo, ¿verdad? Incluyendo los comentarios de otros autores. Entonces, los datos de los comentarios no están ahí, pero podemos verificarlo, ¿verdad? Podemos obtenerlo básicamente del repositorio de comentarios. Entonces, nuevamente, nuestra función favorita de guardar datos, obtendremos el complemento del repositorio de comentarios aquí. Entonces, desde el editor, perdón, el repositorio de comentarios, pero solo guardé unas pocas letras al escribir, repositorio de comentarios. Este es uno de los complementos que obtendremos aquí.

Y desde este repositorio de comentarios, simplemente obtendremos los datos de los hilos, ¿verdad? Como el hilo común de datos. Entonces, solo tendremos comentarios, repositorio, obtener hilos comunes. Y aquí podemos pasar algunas opciones, por ejemplo, omitir los comentarios que no están adjuntos a los documentos, por ejemplo, o omitir si el comentario está vacío. Entonces, simplemente no veremos esos comentarios que están vacíos o simplemente los mostraremos en JSON, ¿verdad? Esas son las cosas que podemos tener aquí. Y tal vez en nuestro tiempo de espera, solo imprimamos en la consola esos comentarios en los hilos de datos. De acuerdo, veamos cómo se ve. Así que tenemos los comentarios, agreguemos una cosa más aquí. Y tenemos los comentarios aquí, tenemos un hilo, así que cuando este hilo, tenemos dos comentarios y esos comentarios tienen ciertos textos, ¿verdad? Entonces, el repositorio de comentarios nos da acceso a los comentarios y cómo guardarías eso, ¿verdad? No te mostraré la implementación completa pero en realidad haces algo similar a las imágenes, ¿verdad? Entonces, necesitas crear tu propio adaptador, como un adaptador de carga de comentarios o algo así, que básicamente tomará el contenido de los comentarios y lo almacenará en tu servidor o de la manera que desees almacenarlos, ¿verdad? Entonces, nuevamente, como probablemente hayas notado, si no, intentaré mostrarlo por segunda vez, si agrego algún comentario aquí, esto es muy, muy pequeño, así que tal vez agreguemos los comentarios aquí. Entonces, cuando agregué el comentario, cambié algo, ¿verdad? Cuando agregué el comentario, creo que el guardado automático no se lanzaría, así que tal vez agregue la respuesta aquí, y sí, puedes ver que no se está guardando automáticamente, ¿verdad? No estamos verificando, esto no está configurado con el guardado automático, este es un almacenamiento separado para los comentarios que necesitarías sincronizar de alguna manera con tu servidor. Volviendo a las funciones de comentarios, como puedes ver, puedes responder, puedes editar, puedes eliminar si eres el usuario, pero también puedes resolver, y luego tenemos esta opción para, probablemente, lo que conoces de Google Docs también. Hay un archivo común, siempre que el comentario esté resuelto, ¿verdad? Como que simplemente no quieres tenerlo ahí. Puedes agregar este comentario y puedes archivar este comentario y puedes reabrirlo, ¿verdad? Como volver a traerlo básicamente al editor mismo.

De acuerdo, solo revisando si hay alguna pregunta. Simon está agregando cosas adicionales allí, perfecto. De acuerdo, hemos terminado con los comentarios. La colaboración en tiempo real funciona con los comentarios. Tal vez lo que intentaré hacer aquí ahora mismo es cerrar la pestaña derecha. Tenemos algo allí y tal vez agreguemos un contenido más agradable al editor. He terminado con esto ASD, ASD. Entonces, este es nuestro nuevo contenido y sí, todo debería funcionar como antes. Podemos escribir aquí y todo funciona. Es solo una versión un poco diferente del contenido. Así que simplemente puedes copiar y pegar cualquier contenido que desees tener. He utilizado el contenido de nuestro ejemplo de características completas del editor.

De acuerdo, los comentarios están listos. Los comentarios de colaboración en tiempo real también funcionan. Así que vamos a nuestro querido gerente de producto y compartamos lo que hemos hecho aquí. Y esto es básicamente una aplicación adicional, ¿verdad? Como el gerente de producto está tan feliz de que eso fue genial con lo que hemos logrado. Somos los héroes del editor. En una hora y algo hemos implementado algo genial pero en realidad quiero mostrarte algo más genial. No estaba seguro si tendría tiempo. Hemos lanzado recientemente algunas características geniales que quería mostrar pero todavía tenemos casi 30 minutos, 40 minutos. Así que solo quiero mostrarte dos cosas geniales que acabamos de implementar y que son realmente agradables.

Entonces, básicamente, lo primero que quiero mostrarte es el comando slash. Así que tenemos dos complementos adicionales. Forman parte de nuestro paquete de productivity. Esto es algo que también puedes usar como una función premium. Se puede utilizar a través de la clave de licencia que básicamente está fuera de línea. Entonces, nuevamente, cuando tienes la configuración del panel de control cuando vayas a tus productos a los complementos independientes sin conexión puedes usar la clave de licencia desde aquí. Y eso es lo que haremos ahora mismo. El comando slash es probablemente algo de lo que estás bien consciente de cómo funciona, ¿verdad? Básicamente, es esta función genial del editor en la que puedes usar el slash para las acciones. Así que he agregado el comando slash aquí el comando adicional que necesitamos agregar se menciona que se utiliza debajo del comando slash. Entonces tenemos el comando slash que hemos mencionado y una cosa adicional que necesitamos agregar es la clave de licencia. Esta propiedad le dirá al editor o resaltará que puedes usar las funciones premium las funciones premium sin conexión de la clave de licencia. Y nuevamente, copia eso desde tu panel de control desde tu prueba y agrégalo a este archivo de token. Ya lo he configurado en un archivo diferente. Así que solo lo importaré y colocaré la coma aquí. De acuerdo, veamos cómo funciona. Todavía estamos en la sesión, ¿verdad? Todavía tenemos nuestro contenido y el comando slash es básicamente insertar el slash y por defecto el comando slash te da las opciones, ¿verdad? Como cualquier complemento que tengas, siempre hay una versión predeterminada de los comandos que puedes usar. Entonces también puedes escribir, por ejemplo aquí, el encabezado, ¿verdad? Así que esto es algo que tenemos aquí, slash, creo que también tenemos el CK box, ¿verdad? Entonces, puedes abrir rápidamente algo para ir rápidamente al CK box. Pero lo que también es genial acerca de los comandos slash, es que puedes agregar tu propio cuadro de llamadas aquí. No estoy seguro si tendremos tiempo, pero básicamente puedes configurar comandos slash de manera que configures algunos comandos. Estará disponible aquí en esta lista. Y luego puedes tener alguna devolución de llamada que haga algo en el editor o lance tu propio complemento. Esto es algo que realmente quería mostrarte. Creo que está disponible desde la versión 37, ahora estamos en la versión 38. Así que solo una versión anterior, hemos introducido este paquete de productivity con otras características también. Tabla de contenidos, esquema del documento, solo por nombrar algunas. Entonces, esto es una cosa genial que quería mostrarte y algo que lanzamos ayer pero como una función experimental. Aún no está listo para producción. Y esto es algo en lo que hemos estado trabajando es el arrastrar y soltar más advanced. Entonces, lo que puedes ver ahora mismo en el editor, tenemos el sistema de arrastrar y soltar, pero ¿cómo funciona? Básicamente, se suelta en línea, ¿verdad? Entonces, si arrastras algo y lo sueltas lo mismo para las imágenes, ¿verdad? Básicamente obtendrás la suelta en línea, ¿verdad? Entonces, puedes arrastrarlo, pero solo puedes soltarlo en línea.

Y lo que realmente queríamos introducir en el editor y esto es algo en lo que trabajaremos es la función de arrastrar y soltar bloques similar a la de Notion. Probablemente estés familiarizado con ella. Si usas Notion, básicamente es la posibilidad de arrastrar un bloque y colocarlo entre otros bloques y Notion lo hizo realmente muy bien.

Como mencioné, todavía es experimental en nuestro lado. De hecho, lo lanzamos ayer como una implementación que está disponible en el editor. Pero como veremos por el nombre del complemento, todavía está marcado como experimental. Entonces tenemos el complemento experimental de arrastrar y soltar. Este es uno que necesitamos importar del paquete de complementos. Hasta donde sé, arrastrar y soltar experimental, CK Editor 5, portapapeles. Este es uno que tenemos. Y el segundo es la barra de herramientas de arrastrar y soltar bloques, que explicaré en un momento. Entonces, esto es la barra de herramientas de arrastrar y soltar bloques, que no se usa en ningún lugar. Así que solo necesitamos agregarlo a la barra de herramientas de arrastrar y soltar a nuestra lista de complementos. Entonces tenemos dos complementos de arrastrar y soltar aquí, y vamos a nuestro editor. Y ahora mismo tenemos nuevas posibilidades. Así que hay una posibilidad de seleccionar el bloque completo y podemos arrastrarlo y soltarlo entre los otros bloques. Por ejemplo, decidí que quiero colocar este contenido aquí. Todavía podemos tenerlo en línea. Así que seleccioné un par de bloques aquí. Por ejemplo, decidí que esto se colocará en línea en algún lugar, pero también tengo la opción de colocarlo entre bloques. Así que esto es algo que también queríamos verificar y creo que es posible. Entonces, está bien, todavía es posible colocarlo en línea, pero aún puedo tenerlo entre los bloques. Otra cosa adicional que estamos probando en este momento es básicamente tener este icono, ¿verdad? Eso es lo que también tiene Notion y básicamente se usa como un asa de arrastre, ¿verdad? Así que tengo este asa de almohada. Cada vez que selecciono un bloque, tengo la posibilidad de arrastrarlo y soltarlo. Como puedes ver, solo tenemos ahora mismo el icono en la selección. Así que algo en lo que probablemente estaremos trabajando es tenerlo al pasar el mouse, ¿verdad? Entonces, al pasar el mouse sobre los bloques, el asa de arrastre se mueve junto con él. Y aún hay algunas cosas que no funcionan tan bien. Otra cosa que funciona realmente bien es algo que creo que no he visto en ningún otro editor y es que puedes arrastrar algo y realmente puedes colocarlo dentro de una tabla, por ejemplo, ¿verdad? Así que decidimos arrastrar el bloque como todo el párrafo y colocarlo dentro de la tabla, por ejemplo, aquí. Así que esto es algo con lo que estamos bastante satisfechos en cuanto al resultado, porque funciona bastante bien. Y trabajaremos en ello en los próximos meses para asegurarnos de que funcione bien. Una cosa que realmente nos gustaría lograr es colocar entre las listas, ¿verdad? Algo que nuevamente funciona bastante bien en otros productos es que puedes seleccionar un bloque y colocarlo entre las listas, pero en realidad lo estamos renombrando como párrafo, ¿verdad? Así que todavía es experimental en nuestro lado. Hay algunas cosas que nos gustaría mejorar un poco, pero si quieres probarlo, nos encantaría recibir tus comentarios, ver cómo funciona el arrastrar y soltar y probarlo en nuestro editor.

De acuerdo, esta es en realidad la última parte que quería mostrarte. Y nos queda media hora antes de terminar y lo último que quería decirte aquí es gracias. Tenemos media hora completa para comentarios y preguntas. Y si tienes algo, nos encantaría recibir tus comentarios. Así que siéntete libre. Te cedo la palabra. Shimon, si tienes algún comentario, tal vez haya algunas preguntas interesantes, podemos iniciar un debate. Así que siéntete libre de comenzar si quieres, o tal vez alguien tenga una pregunta, el turno también es tuyo.

No hay problema, fue muy agradable mostrártelo. Puedes hacer cualquier pregunta sobre cualquier cosa. De hecho, me gustaría saber cuántas personas aquí les gusta la experiencia de Notion, algo de lo que hemos hablado en los comentarios mientras tanto. Pero Notion tiene un modelo de edición bastante inusual, bloques, mucho arrastrar y soltar, la barra de herramientas que aparece en el texto activo personal. Esto es algo, quiero decir, usamos Notion en CKsource y a muchas personas les encanta, pero también a muchas personas les disgusta, se sienten completamente perdidas en el contenido. Así que tengo curiosidad, ¿alguien tiene alguna experiencia interesante con lo que hay en eso, observaciones? Para empezar, tal vez responderé a tu pregunta. Para mí, Notion es bastante genial. Pero una cosa que realmente no me gusta y creo que necesitan resolver de alguna manera es la selección. Muy a menudo, intento seleccionar algo y se selecciona otra cosa o se selecciona todo el bloque cuando solo quería seleccionar una parte del contenido. Así que esto es algo que no me parece muy intuitivo. Pero aparte de eso, supongo que no me quejo mucho. Creo que en realidad han lanzado algunos cambios en su selección recientemente, porque he notado que funciona de manera diferente. Sí, el modelo basado en bloques es complicado de entender. Han trabajado mucho en ello a lo largo de los años. Como he usado Notion durante no sé, cuatro años, incluso más, tal vez no. Y han pulido la implementación. En un momento se planteó si Notion usaba CKD para renderizar el contenido, desafortunadamente no. Pero en ese momento, cuando realmente lograron la mayoría de las cosas, porque hay cientos de pequeños detalles que pulir al pensar en todos estos casos de edición de texto enriquecido. Así que ahora probablemente no cambiarán. Pero sí, fue mucho trabajo para ellos. Pero como mencionaste, todavía es un poco extraño en algunos casos. Michał comentó que Notion tiene limitaciones cuando se trata de editar texto. Así que supongo que te refieres a fórmulas matemáticas o- Matemáticas, ¿verdad? Sí, supongo que sí. Supongo que no es un error tipográfico en el texto. Pero en realidad es texto. ¿Te refieres a si lo usas para fórmulas matemáticas o solo para artículos completos? ¿Para qué lo usas? Creo que nunca he usado texto en Notion. Ni siquiera sabía que había- Creo que en realidad no está. Así que está limitado. Es posible que se pueda agregar una fórmula o algo así, pero creo que tienes que crear documentos completos. Me encanta eso. Es genial. Si quieres obtener un PDF, la única forma de hacerlo es usar CK Editor o usar Lattic, porque es básicamente solo texto puro. Tenemos entradas de palabras y tenemos entradas de Lattic. Entradas de Lattic. Sí, eso sería genial.

De acuerdo, de todos modos, gracias a todos por colaborar y estar aquí hoy con nosotros. Una cosa, definitivamente comparte tus comentarios con nosotros. Nos encantaría saber qué te ha gustado o no te ha gustado durante esta sesión de talleres. Así que dinos qué piensas. Además, esto es nuevamente como, ¿verdad? Así que básicamente solo se usaron las funciones básicas del editor, pero el editor completo es un marco de trabajo. Puedes agregar tu propio complemento al editor y, por ejemplo, escribir en Lattic, ¿verdad? Y convertir ese texto al modelo, ¿verdad? Y luego del modelo a otros formatos y muchas otras capacidades que puedes implementar. Así que si te gustaría saber algún día cómo crear tu propio complemento para el editor, cómo trabajar con el editor como marco de trabajo, déjanos una nota, tal vez intentemos crear algo, algún taller para eso también. Y por ahora, supongo que gracias. Que tengas una tarde muy agradable. Fue un verdadero placer y sí, nos vemos pronto. Gracias. Igualmente. Gracias, Víctor. Felicidades.