Disclaimer: If you want to read this post in English click here to see the translated version by deepl
Hace unos días explicaba en una publicación, que sería interesante mejorar el editor de texto para facilitar el proceso a los nuevos usuarios y bajar la curva de aprendizaje, evitando la necesidad de recurrir a HTML y clases de CSS (entre otro tipo de brujerías 🤣 ) para mejorar el formato de las publicaciones. Al final hacía referencia a algunos editores que incluso incluyen la funcionalidad de voz integrada para poder redactar.
Para mi sorpresa la funcionalidad de voz fue lo que a varias personas le llamó la atención y a pesar de que mi idea principal iba más por el lado del formato, decidí investigar un poco y ponerme como reto de estudio incorporar esta funcionalidad desde cero sin utilizar algún plug-in en especial.
Revisando el código fuente de Hive.blog (condenser)
Dentro del proyecto se encuentra un componente llamado VisualEditor.jsx revisando el código, noté que al inicio declaraban una variable de nombre RichTextEditor y le asignaban un módulo que ya está instalado de nombre react-rte. Para mí era totalmente nuevo, pero el nombre de la variable me dio la pista para ver que se trataba del plug-in utilizado para el editor de texto en hive.blog.
Con una búsqueda en Google rápidamente conseguí el repositorio de npm
A pesar de que es un proyecto basado en otro (draft.js) ya archivado por sus creadores (Facebook), supongo que los desarrolladores de hive.blog se decidieron por este gracias a su fácil integración con React.js y la manera en la que mantiene separada la lógica de la vista. Algo meramente técnico que permite mantener la integridad y flujo de trabajo.
Esto reforzó mi idea de tratar de recrear la funcionalidad de voz a texto sin la necesidad de cambiar el plug-in, sino agregarle este nuevo módulo sin afectar la funcionalidad del editor.
Pasos para desarrollar la solución
Lo primero que hice fue al MDN de Mozilla para ver como funciona la Web API para voz y fue cuando conseguí la API Web Speech
Gracias a la documentación, prueba, ensayo y error, entre otras googleadas, pude dar con una solución. El código es fácil de entender, la función que dispara la acción de speech to text (talkWithHive) se ve así:
Probando la nueva función
Repositorio con el componente editado
Pueden encontrar el componente en mi repositorio de Github. Si alguien dentro del equipo de desarrolladores se interesa seguro podrá ver mi ejemplo a hacer alguna adaptación mejorando esta nueva funcionalidad de voz dentro de hive.blog
Espero que sea de su agrado, saludos ✌️ desde Venezuela 🇻🇪
English Version
A few days ago I explained in a post, that it would be interesting to improve the text editor to facilitate the process to new users and lower the learning curve, avoiding the need to resort to HTML and CSS classes (among other kind of wizardry 🤣 ) to improve the formatting of publications. At the end I was making reference to some editors that even include built-in voice functionality to be able to compose.
To my surprise the voice functionality was what caught the attention of several people and even though my main idea was more on the formatting side, I decided to do some research and set myself a study challenge to incorporate this functionality from scratch without using any special plug-in.
Reviewing the source code of Hive.blog (condenser)
Inside the project there is a component called VisualEditor.jsx reviewing the code, I noticed that at the beginning they declared a variable named RichTextEditor and assigned it a module that is already installed named react-rte. It was totally new to me, but the variable name gave me the clue to see that it was the plug-in used for the text editor in hive.blog.
With a Google search I quickly got the npm repository.
Although it is a project based on another (draft.js) already archived by its creators (Facebook), I guess the developers of hive.blog decided on this one thanks to its easy integration with React.js and the way it keeps the logic separate from the view. Something purely technical that allows to maintain integrity and workflow.
This reinforced my idea of trying to recreate the speech-to-text functionality without the need to change the plug-in, but to add this new module to it without affecting the functionality of the editor.
Steps to develop the solution
The first thing I did was to Mozilla MDN to see how the Web Speech API works and that's when I got the Web Speech API.
Thanks to documentation, testing, trial and error, among other googling, I was able to come up with a solution. The code is easy to understand, the function that triggers the speech-to-text action (talkWithHive) looks like this:
Testing the new function
Repository with the edited component
You can find the component in my Github repository. If someone in the developers team is interested for sure you can see my example to make some adaptation improving this new voice functionality within hive.blog.
I hope you like it, greetings ✌️ from Venezuela 🇻🇪
