Building a Real-Time Collaborative Whiteboard With Froala Text Editor — Part 1.
Intro
Hello! Nice to meet you, I am Boyan. I recently became a web-developer after completing a web development bootcamp at Le Wagon London, and am pretty excited (and nervous!) to make my first post to Medium, and join an amazing community that has taught me so much in just a few months.
The idea:
The initial idea for this project was to use the Froala WYSIWYG editor to create a blank canvas for artists to slap anything they want on a web-page, set the layout exactly as they please, and create Internet art, functioning in the same way to NewHive, a web-based canvas for making artworks like this! (NewHive doesn’t seem to really exist anymore, beyond this Instagram account ☹️ )
But when I demoed the app, it was suggested that it could actually be really useful as a collaborative tool for sharing ideas and taking notes as a team — a whiteboard for brainstorming — if I simply added a unique URL for sharing and a database for sending and retrieving data between each user’s whiteboard. Imagine: you fire up the web-app and a unique link is generated in the address bar. You then share the link with your colleague, and then you proceed to add an image and some text. Your colleague will see the image and text show up instantaneously in their own browser. A bit like Google docs!
By the end of this tutorial, you will have created your very own whiteboard web-app, starting with the basics of React, Redux and Froala, to implementing a back-end server, a database, and a CDN, and then finally pushing it all to a web-host to allow the world to see!
You can see the final version of the app here: froala.com/wysiwyg-editor/whiteboard or from my portfolio here: levchev.com
After following the link, you will notice that a series of numbers and letters are appended to the URL. This whole URL will be unique to your whiteboard. If you copy and paste it to another browser, or share it with a friend, you can then play around with adding gifs or doodling, and it will update immediately in the other browser.
And here’s a link to the repo — I have comments throughout the code which should help you get around! -> https://github.com/boyanlevchev/froala-whiteboard.git
We will cover the following topics over 5 posts
- How to use the Froala text editor for React (Named react-froala-wysiwyg):
• Configuring the text-editor
• Customizing the toolbar — buttons for adding video, images, etc. - How to use Redux to improve communication in your app, and create a whiteboard — Click to go to part 2
• Creating your own Froala Editor buttons — in our case a delete button
• Creating user actions to dynamically add and move content on the whiteboard - How to build a back-end server using Express.js and communicate with a cloud-based real-time NoSQL database using Google FireBase
• Adding async functionality to our whiteboard using Redux-Thunk
• CORS policies
• How to store your secret keys the RIGHT way in React - How to store media in AWS S3
• How to host video and images on a CDN — for storage and delivery — using AWS S3.
• How to make a bucket on S3 — also link to guides online
• Configuring Froala Editor to automatically communicate with S3 - Hosting your web-app online using Heroku!
This guide assumes that you some minor knowledge of the CLI (Terminal), of the JavaScript/Node package managers NPM and Yarn, and of basic git commands — and that NPM, Yarn and git are already installed on your computer. This guide also uses MacOS, so you may have to Google the equivalent commands for your operating system.
Let’s Begin!
Getting started with a simple React app and Froala, and preparing the correct structure.
First, we must create our React app. The easiest way to get started is to use create-react-app.
To do this, add a folder called froala-project to your desktop. This will be the directory for all the code we will write. In your command-line, paste the following commands:
*Please note that you can name your app and place it wherever you please, but for the purpose of this tutorial I will be using the name “froala-whiteboard” and have it located in a folder in the computer’s root directory, which we will call “code”:
cd #take us to the root directorymkdir code #creates a new folder called 'code'cd code #access new folder we just creatednpx create-react-app froala-whiteboard #create a new react app with the name froala-whiteboard - i.e. creates a new folder with all the necessary stuff insidecd froala-whiteboard #access the folder created by the above commandnpm start #runs the new React project so it shows up in your web browser
You can now see your site if you type into the address bar of your web browser — localhost:3000 — and press enter. After this, open up your app in your text editor of choice — I use Sublime Text, and the CLI command stt.
Now we just need to add the Froala Editor for React package. Back to your CLI, hit ⌘-t to open a new tab (so that we can leave the localhost server running, and continue to use the CLI for other commands), and run the following:
npm install react-froala-wysiwygYou can now head back to your text-editor and check your package.json file in the root directory of your app, and you will see it added as“react-froala-wysiwyg” with a version number to its right.
Now let’s think about the structure of the app. We are trying to build a whiteboard, and on this whiteboard, we want to be able to add content like text, video and images. So the app will house a child component which will be the whiteboard, and the whiteboard will be the parent of its own children components that will house the content. The power of the content component will be delivered by the Froala editor, which has the inbuilt capacity to accept fully format-able text, images and video.
So, following this structure, go to the src folder of your app, and add a new folder called containers. Inside of containers, create two files — name one whiteboard.jsx and the other froala.jsx. Copy-paste the template code below into both of these new files, and replace [NAME-OF-COMPONENT] in each file with the name Whiteboard and Froala respectively:
import React, { Component } from 'react'class [NAME-OF-COMPONENT] extends Component {
constructor(props) {
super(props);this.state = {
};
}render(){
return(
<div>
</div>
)
}
}export default [NAME-OF-COMPONENT];
Now, let’s start with configuring the content component. Go to froala.jsx, and underneath the line where we import React, we need to import the Froala Editor, along with its CSS and associated JavaScript functionality:
import FroalaEditor from 'react-froala-wysiwyg';import 'froala-editor/js/froala_editor.pkgd.min.js';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
And then add the code in bold below to the return statement:
render(){
return(
<div>
<FroalaEditor/>
</div>
)
}Now, we need to hook this file up to the Whiteboard, to let the Whiteboard know that this is a child that it has to display. Do this by going to the whiteboard.jsx file, and typing in the code in bold below. First, we import the Froala component we just created above, and then we add it to the return statement of the render() function, within the <divs>:
import React, { Component } from 'react'import Froala from './froala'class Whiteboard extends Component {
constructor(props) {
super(props);this.state = {
};
}render(){
return(
<div>
<Froala/>
</div>
)
}
}export default Whiteboard;
Finally, we have to tell the app that it must display its own child component, which will be the Whiteboard. Go to app.js and import the Whiteboard component at the top, delete everything within the <divs> inside of the return statement, and add in the component to be rendered — as shown below in bold:
import React from 'react';
import logo from './logo.svg';
import './App.css';import Whiteboard from './containers/whiteboard'function App() {
return (
<div className="App">
<Whiteboard/>
</div>
);
}export default App;
And that’s it! 🎉 ... No, it’s not, but you can go to localhost:3000 and you will see the Froala text editor right there! So easy!
Now let’s pass some settings to make the editor only have the features we need. We want to be able to add photos, videos, and format our text inside of the content component however we please! So back in froala.jsx, we must import some new files, which will give us added functionality — you can see in the filename for each one what functionality is being added (we kind of have a stupid amount of import calls at the top now, but whatever…):
import 'froala-editor/js/plugins/image.min.js';
import 'froala-editor/js/plugins/video.min.js';
import 'froala-editor/js/plugins/colors.min.js';
import 'froala-editor/js/plugins/emoticons.min.js';
import 'froala-editor/js/plugins/font_family.min.js';
import 'froala-editor/js/plugins/font_size.min.js';
import 'froala-editor/js/plugins/line_height.min.js';
import 'froala-editor/js/plugins/lists.min.js';
import 'froala-editor/js/plugins/align.min.js';
import 'froala-editor/js/plugins/link.min.js';
import 'froala-editor/js/plugins/file.min.js';import 'froala-editor/css/plugins/image.min.css';
import 'froala-editor/css/plugins/video.min.css';
import 'froala-editor/css/plugins/colors.min.css';
import 'froala-editor/css/plugins/emoticons.min.css';
import 'froala-editor/css/plugins/file.min.css';
And then, we must create a new constant called config. This constant will be an Object (also known in other languages as a Hash) into which we add the configurations that we want for the Froala editor — you can see a list of all the available toolbar plugins and editor configurations here. Add the config to the render() function (but before the return statement) and then assign this to the config prop of the <FroalaEditor> component as shown in bold below (apologies if the formatting below looks funky, if you copy/paste into your text editor, you should be able to see the structure of the config Object more clearly):
render(){const config = {
toolbarButtons: {
'moreRich': {
'buttons': ['insertImage', 'insertVideo', 'insertLink', 'insertFile', 'emoticons'],
buttonsVisible: 5
},
'moreText': {
'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting', 'alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'],
buttonsVisible: 0
}
},
autofocus: true,
toolbarInline: true,
toolbarVisibleWithoutSelection: true,
heightMin: '30',
placeholderText: 'Type something \n or click inside me',
charCounterCount: true,
attribution: false
};
return(
<div>
<FroalaEditor config={config}/>
</div>
)
}
Let’s just add one final touch which will set the style of the whiteboard. Essentially, we want the whiteboard to be at least the size of the computer screen (mine is 15 inches).
In the src directory of the app, add a new folder called assets. In assets, create a new file whiteboard.scss and copy-paste the code below:
#whiteboard {
/* set the height and width */
min-height: 700px;
min-width: 1500px; /* This will allow us to position the child media relative to the position of the whiteboard */
position: relative; /* The next five lines remove a glowing blue outline from the whiteboard, which is usually included for accessibility reasons, but is not necessary for our use case. */
shadow: none;
outline: none;
& :focus{
shadow: none;
outline: none;
}
}
Then we must give the whiteboard an id, which will then style the whiteboard as defined above. Add the code in bold below into our whiteboard.jsx file, inside the opening <div> tag in the return statement:
render(){
return(
<div id=”whiteboard”>
<Froala/>
</div>
)
}Finally, we must tie it together, by going to the App.css file in the src folder, and adding at the top:
@import './assets/whiteboard.scss';If you go back to localhost:3000 and click inside the editor, you will now see the menu offer all of the buttons you configured above, and the whiteboard will be the size of the screen. Nice one!
The next part will go over adding Redux, and connecting the whiteboard to the dynamically generated editor instances, so that we can add as many content components as we like, and position them where we want, and have them send data between each other.
