Add text formatting options

Hello!

I am thinking about adding a new feature where it is possible to post some news for the users to read. It would be pretty easy using a collection in firebase but I would like the have available in the UI the basic text styling options that you usually find in a “post message” box (like this one). The possibility to make the text bold, italic, add links, picture, etc.

How could I achieve this? I would appreciate someone to guide me in the right direction.

Thank you!

You would need to write a plugin that implements an editor in React Studio. Something like this https://www.npmjs.com/package/react-editor would probably be a starting point.

Point of clarification: you do not need to write the entire plugin.

It is pretty easy to wrap npm libraries (more specifically components from npm libraries) as React Studio plugins.

This tutorial will walk you through the basics. Future tutorials will cover the subject of writing data back from a plugin into RS data structures.

1 Like

Thank you both for your answers. Writting a plugin goes beyond my knowledge by far. I am not a programmer but a music teacher with programming interests and using RS to create basic projects to help my daily teaching. I have been reading the pdf to wrap a npm in a plugin and I get lost when it involves writting some more elaborated code because I can just understand some HTML, CSS and JS but not too complicated.

I was trying to do it with Quill:


It seems not to be difficult but I guess I still need to assimilate concepts and understand more to achieve it. I will keep trying to scratch the thing.

Thank you!

1 Like

I would be happy to jump on a zoom call and go through it together.

Just let me know…

Adam

Thank you so much for your offering! That is no nice. I don’t feel confident enough to jump into a zoom session because I don’t want to spend your time by not being proficient enough in the matter. As I mentioned before, I am just a music teacher beginning to learn about programming. I will keep reading and maybe I can write here my progress and ask specific questions. That way I won’t feel that I am not spending much of your time and someone else can take advantage of the process to wrap the component?

As you wish, but I really do not mind.

Even if you have difficulty, it is helpful for me to see where you have the difficulty because then I can tell where to improve the product.

So I really would be happy to do it and I would never feel that my time was wasted.

Adam

1 Like

I appreciate it. I am going to try to solve it and if I see I could take advantage of it, I will let you know. Even though I am fluent in English, it is not my native language and I am afraid the lack of programming knowledge along with that would make it difficult and I really don’t want to waste your time.

In order to try by myself, here it comes my first question. I have seen selected Quill as a the rich text editor to implement and I have seen there is a react npm package, so I am guessing I would have to make the process with that npm package, right?

Here I found some instructions about how to use a component in React with Quill. My idea is to include this in my project. Specifically, I have created a component in my project that basically has two input fields: one for the post subject, and body of the message. Then a button to send this information to Firebase. I would just need the body message to have the rich text options so the user can insert bold, italic, urls, etc.

I am just describing what I am looking for but the question is: Do I have to try to create the plugin from this react-quill component or from the main quill package? Maybe it is a dumb question but I am just learning about all this.

Thank you!

No questions are dumb, and if it makes you feel any better, I am really bad programmer, so I cannot judge you. :slight_smile:

The tutorial you picked is okay, but looking at example code like this is more useful.

You need to look at two or three things in the example code first.

  1. look at the import statements. The new that matter to you are:
    import ReactQuill, { Mixin, Toolbar, Quill } from "react-quill";
    and
    import "react-quill/dist/quill.snow.css";

The rest of the import statements are general React.js stuff that React Studio takes care of for you.

Then you want to scroll down until you see these two lines:

render() {
    return (

Most example code will use these JSF tags to let you know where the component code is.

The stuff you are interested in is:

 <ReactQuill
            onRef={(el: any) => (this.quillRef = el)}
            value={this.state.contents}
            onChange={this.onChangeContents}
            onKeyUp={this.onKeyUp}
            onFocus={this.onFocus}
            onBlur={this.onBlur}
            theme="snow"
            modules={this.modules}
            formats={this.formats}
          />

You will need to read the quill documentation (and/or a tutorial) to understand what each prop (line) does here, but notice that each prop is bound to (connected to) something like: this.prop or this.someFunction. The way you can tell if it is a prop or a function is that further up in the code, functions always start with function name followed by an equals sign and an open parenthesis, like this: onKeyUp = (.

Props will have { or [ after the equals sign.

These props and functions will have to be declared in the this.getReactWebRenderMethodSetupCode entry point that you will explained find in my tutorial.

The part inside of

render() {
    return (
        thisIsThePart...
    )
}

is what you put into the this.getReactWebJSXCode entry point as described in the plugin tutorial.

Then you will need to specify which dataslot or datasheet to use to load/store the contents of quill editing window. This is where it gets complicated.

I would see if you can just get the editing window to appear at first, and then we can work on the plumbing that connects it to the data.

Adam