DEV Community: Sharon Gomez

Setting up a rich text editor in React: Inserting images

Sharon Gomez — Sat, 10 Oct 2020 02:50:27 +0000

Hello all! In my previous post I went over how to set up a very basic rich text editor using CKEditor 5. The Classic Build that I used comes with the option to allow inserting images, but not out of the box.

If you try to upload an image, you will get this warning in the console along with a link to the docs:

filerepository-no-upload-adapter: Upload adapter is not defined.

Reading the description of the error in the link, you'll see that you need to configure an 'upload adapter' in order to get usage out of the image uploading feature.

You need to enable an upload adapter in order to be able to upload files. This warning shows up when FileRepository is being used without definining an upload adapter.

In this post I'll show you how I set up my own upload adapter in order to use the image uploading feature in CKEditor.

Set up the custom upload adapter

First I'm setting up an UploadAdapter class. Inside of our constructor we need to a have a file loader instance that will control the process of reading and uploading files.

import { firebase } from '../utilities/firebase'

class UploadAdapter {
    constructor(loader) {
        this.loader = loader
    }
}

export default UploadAdapter

Our upload adapter class also needs to have an upload() method that returns a promise that is resolved when the file is successfully uploaded.

To make my code a little more dry, I created a variable for my firebase reference called uploadTask. Then I'm using uploadTask.on() to ultimately handle what I want to happen if the image is successfully uploaded to my firebase storage.

In .on() we're passing in 4 parameters:

a string that identifies an event (for us, we're checking if the state changed with firebase.storage.TaskEvent.STATE_CHANGED)
a callback function that gives you access to a snapshot
a second callback for error handling
a third callback for if the file upload is successful

Here's what my upload() method looks like:

upload() {
    return this.loader.file.then(
        (file) =>
            new Promise((resolve, reject) => {
                // firebase reference
                let uploadTask = firebase.storage().ref()
                    .child(`images/${file.name}`)
                    .put(file)

                uploadTask.on(
                        firebase.storage.TaskEvent.STATE_CHANGED,
                        (snapshot) => {
                            /* snapshot with info about 
                            the upload progress & metadata */
                        },
                        (error) => {
                            // error handling
                        },
                        () => {
                            // upload successful
                        }
                    )
            })
    )
}

The snapshot contains info about the upload progress and other metadata, which can be used if you'd like to display a progress bar to the user. You can use the error callback to handle any errors that may occur during the upload process.

Finally, we want to tell firebase what to do if the image upload is successful. In our last callback function, we want to grab the download URL that was created and tell CKEditor to use that URL to display the image within the editor.

uploadTask.snapshot.ref
    .getDownloadURL()
    .then((downloadURL) => {
        resolve({
            default: downloadURL
        })
    })

Ultimately, your UploadAdapter file should end up looking like this:

import { firebase } from '../utilities/firebase'

class UploadAdapter {
    constructor(loader) {
        this.loader = loader
    }
    upload() {
        return this.loader.file.then(
            (file) =>
                new Promise((resolve, reject) => {
                    // firebase reference
                    let uploadTask = firebase.storage().ref()
                        .child(`images/${file.name}`)
                        .put(file)

                    uploadTask.on(
                        firebase.storage.TaskEvent.STATE_CHANGED,
                        (snapshot) => {
                            /* snapshot with info about 
                            the upload progress & metadata */
                        },
                        (error) => {
                            // error handling
                        },
                        () => {
                            // upload successful
                            uploadTask.snapshot.ref
                                .getDownloadURL()
                                .then((downloadURL) => {
                                    resolve({
                                        default: downloadURL
                                    })
                                })
                        }
                    )
                })
        )
    }
}

export default UploadAdapter

Import our custom upload adapter into our CKEditor

Import UploadAdapter into your text editor component where you are using CKEditor. The CKEditor component takes a prop called onInit, a function called when the editor is initialized. This gives us access to the initialized editor.

To specify that we want to use our own custom upload adapter, we want to utilize the FileRepository plugin. FileRepository gives us the prop .createUploadAdapter, which is a function that takes in a file loader instance and returns a new upload adapter instance.

import React, { useState } from 'react'
import CKEditor from '@ckeditor/ckeditor5-react'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import UploadAdapter from './UploadAdapter'

const TextEditor = ({ onSubmit }) => {
    const [body, setBody] = useState('')

    const handleSubmit = (e) => {
        e.preventDefault()
        onSubmit({ body })
    }

    return (
        <form onSubmit={handleSubmit}>
            <CKEditor
                // here's where we are using our custom adapter
                onInit={(editor) => {
                    editor.plugins.get('FileRepository')
                        .createUploadAdapter = (loader) => {
                            return new UploadAdapter(loader)
                        }
                }}
                editor={ClassicEditor}
                onChange={(event, editor) => {
                    const data = editor.getData()
                    setBody(data)
                }}
            />
            <button type='submit'>Submit</button>
        </form>
    )
}

export default TextEditor

Now you should be allowed to upload images in your editor. Out of the box it allows you to upload, drag and paste images into the editor. It also gives you the option to let your images be inline or block, and include an image caption.

Thanks for reading! 😊

Setting up a basic rich text editor in React

Sharon Gomez — Thu, 17 Sep 2020 21:44:08 +0000

As mentioned in my previous post, I've been working on a blogging app. I started writing up some posts of my own to document the experience, but quickly realized that the post content was not only plain-looking, but hard to read and unorganized.

Here's what my posts were looking like:

Here's what I wanted them to look like!

I did a lot of research trying to find a straightforward library that would let me achieve the above. In my case, CKEditor 5 ended up being the easiest to implement in my opinion. Out of the box it is very user-friendly and has a nice, minimal design. Some features I appreciate are keyboard shortcuts (like Ctrl+B/CMD+B for bold or Ctrl+I/CMD+I for italic) and auto-formatting. Here's how I was able to set up a very basic rich text editor using CKEditor.

First up, choose your build

They have several different build options depending on what you're using it for, but in my case I used the Classic Build. Here's what the toolbar looks like:

As you can see, it gives you the option to insert images, but you have to set up your own adapter to do so. I'll go over how to set that up in another post!

Install CKEditor and your build

Using npm:



npm install @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic --save

Or using yarn:



yarn add @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

Set up a component that will handle your form and text input

Import CKEditor and ClassicEditor (or whatever build you chose), then call on the CKEditor component inside your form. The component takes two necessary props: editor and onChange.

All you have to do is specify what build you're using in the editor prop, in this example it's editor={ClassicEditor}.

The onChange prop can be used to grab the stylized text. It uses a function that takes event and editor. We can use editor.getData() to grab that text. In my case, I'm storing it in my body state.

Note: For me, this component will be used in multiple parent components and I'm handling the form submission differently in each one, which is why I'm passing `onSubmit` as a prop. Your form submission might be different.


 javascript
// TextEditor.js

import React, { useState } from 'react'
import CKEditor from '@ckeditor/ckeditor5-react'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

const TextEditor = ({ onSubmit }) => {
    const [body, setBody] = useState('')

    const handleSubmit = (e) => {
        e.preventDefault()
        onSubmit({ body })
    }

    return (
        <form onSubmit={handleSubmit}>
            <CKEditor
                editor={ClassicEditor}
                onChange={(event, editor) => {
                    const data = editor.getData()
                    setBody(data)
                }}
            />
            <button type='submit'>Submit</button>
        </form>
    )
}

export default TextEditor

That's all you need to have a simple working rich text editor using React and CKEditor 5. The data I'm storing in body is in HTML, so if you want to display the output elsewhere you need to use dangerouslySetInnerHTML. Keep reading if you want to configure the toolbar plugins!

Configuring the toolbar plugins

Let's say you just want a very basic editor, and don't want to have the option to insert tables or images/media. In that case, you can set up a configuration object and pass it to your build's defaultConfig. You can also use this to separate the different sections and further personalize the toolbar to your needs.


 javascript
// editorConfig.js

export const config = {
    toolbar: {
        items: [
            'bold',
            'italic',
            '|',
            'bulletedList',
            'numberedList',
            'indent',
            'outdent',
            '|',
            'heading',
            '|',
            'undo',
            'redo'
        ]
    }
}

Once the config is set up, I'm just importing it into my TextEditor file. Inside the component before the return statement, just pass the config in with ClassicEditor.defaultConfig = config.


 javascript
// TextEditor.js

import React, { useState } from 'react'
import CKEditor from '@ckeditor/ckeditor5-react'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

// import the config here
import { config } from './editorConfig'

const TextEditor = ({ onSubmit }) => {
    const [body, setBody] = useState('')

        // and then plug it in here
    ClassicEditor.defaultConfig = config

    const handleSubmit = (e) => {
        // ...
    }

    return (
        // ...
    )
}

export default TextEditor

And that's it! Here's what mine looks like in my app:

Thanks for reading 😄

Cropping and resizing images in React

Sharon Gomez — Tue, 15 Sep 2020 22:55:04 +0000

In my last post I wrote about how I struggled with images clogging up my Firebase Database/Storage. One of the ways that helped decrease the file size was by allowing users to crop their image and then resizing it before it was uploaded to my Firebase Storage. Here's how I set up basic image cropping using the react-easy-crop library.

Install react-easy-crop

Using npm:

npm install react-easy-crop --save

or using yarn:

yarn add react-easy-crop

Set up ImageCropper component

Here's my basic setup for the cropper. I'm using getBlob() in order to pass the cropped image up from this child component.

Setting aspect={1} will force the image to be cropped into a square, but you can change the aspect ratio to whatever you want. For me, I kept the aspect ratio to 1 as I'm using it for user avatars in my app, and square images are easier to style. 😊

// ImageCropper.js

import React, { useState } from 'react'
import Cropper from 'react-easy-crop'
import { getCroppedImg } from './cropImage'

const ImageCropper = ({ getBlob, inputImg }) => {
    const [crop, setCrop] = useState({ x: 0, y: 0 })
    const [zoom, setZoom] = useState(1)

    /* onCropComplete() will occur each time the user modifies the cropped area, 
    which isn't ideal. A better implementation would be getting the blob 
    only when the user hits the submit button, but this works for now  */
    const onCropComplete = async (_, croppedAreaPixels) => {
        const croppedImage = await getCroppedImg(
            inputImg,
            croppedAreaPixels
        )
        getBlob(croppedImage)
    }

    return (
        /* need to have a parent with `position: relative` 
    to prevent cropper taking up whole page */
        <div className='cropper'> 
            <Cropper
                image={inputImg}
                crop={crop}
                zoom={zoom}
                aspect={1}
                onCropChange={setCrop}
                onCropComplete={onCropComplete}
                onZoomChange={setZoom}
            />
        </div>
    )
}

export default ImageCropper

Set up a component that takes the image file

The cropper takes in an image url or base64. Here I allowed the user to upload their own image and then converted it to base64.

// ImageUpload.js

import React, { useState } from 'react'
import * as firebase from 'firebase/app'
import ImageCropper from './ImageCropper'

const ImageUpload = () => {
    const [blob, setBlob] = useState(null)
    const [inputImg, setInputImg] = useState('')

    const getBlob = (blob) => {
        // pass blob up from the ImageCropper component
        setBlob(blob)
    }

    const onInputChange = (e) => {
        // convert image file to base64 string
        const file = e.target.files[0]
        const reader = new FileReader()

        reader.addEventListener('load', () => {
            setInputImg(reader.result)
        }, false)

        if (file) {
            reader.readAsDataURL(file)
        }
    }

    const handleSubmitImage = (e) => {
    // upload blob to firebase 'images' folder with filename 'image'
        e.preventDefault()
        firebase
            .storage()
            .ref('images')
            .child('image')
            .put(blob, { contentType: blob.type })
            .then(() => {
                // redirect user 
            })
    }


    return (
        <form onSubmit={handleSubmitImage}>
            <input
                type='file'
                accept='image/*'
                onChange={onInputChange}
            />
            {
                inputImg && (
                    <ImageCropper
                        getBlob={getBlob}
                        inputImg={inputImg}
                    />
                )
            }
            <button type='submit'>Submit</button>
        </form>
    )
}

export default ImageUpload

Set up function to crop and save the image

To save only the 'cropped' section of the image, we create a canvas and use .useContext('2d') to create a 2d shape on it. We draw only the cropped section of the image on our canvas using .drawImage(), and then return the canvas as a blob.

Set the canvas.width and canvas.height to however big you want to store the cropped image as (in pixels). For me, I kept it to 250px by 250px.

// cropImage.js

// create the image with a src of the base64 string
const createImage = (url) =>
    new Promise((resolve, reject) => {
        const image = new Image()
        image.addEventListener('load', () => resolve(image))
        image.addEventListener('error', error => reject(error))
        image.setAttribute('crossOrigin', 'anonymous')
        image.src = url
    })

export const getCroppedImg = async (imageSrc, crop) => {
    const image = await createImage(imageSrc)
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')

    /* setting canvas width & height allows us to 
    resize from the original image resolution */
    canvas.width = 250
    canvas.height = 250

    ctx.drawImage(
        image,
        crop.x,
        crop.y,
        crop.width,
        crop.height,
        0,
        0,
        canvas.width,
        canvas.height
    )

    return new Promise((resolve) => {
        canvas.toBlob((blob) => {
            resolve(blob)
        }, 'image/jpeg')
    })
}

This should leave you with a working image cropping tool! When a user uploads an image, the cropper will appear. The user is then able to drag the cropped area and zoom in/out to their content. When they hit submit, the final cropped image is then uploaded (in my case to Firebase Storage) and resized to reduce the file size.

Here's how mine looks after a bit of styling:

Thanks for reading! 😊

How I almost maxed out my 10GB monthly limit of downloads from my database in 2 days

Sharon Gomez — Tue, 15 Sep 2020 01:16:14 +0000

TL;DR: Too many downloads were being made from my database (due to ignorance and many bad decisions) which almost maxed out my free monthly limit of 10gb in only 2 days.

Hello world! This is my first post so I'm a bit nervous, but here's a funny story I thought I'd start things off with. I had just delved into using Firebase, so I was very ignorant on a lot of things.

Recently I've been working on a blog app. In the past I had made a very minimal blog app following a Udemy course, but this time I wanted to start from scratch and use some new tools I had acquired since then. I had just finished implementing a feature that allows each user to upload their own profile picture that is displayed throughout the site.

Since I was already using Firebase's Realtime Database to store some data, I decided to just store the images in there as well temporarily. This was my first mistake. My second mistake was sharing a link to the app with my family, thinking it would help me see if the site was user-friendly. Be careful what you wish for 🤷🏻

A little background on how my app is set up.

A homepage that displays all posts.
- Each post consists of a title and body, and shows the author's avatar.
A page that allows you to create a new post.
A profile page that displays a user's posts along with a bigger image of their avatar. When logged in, your profile has a link that lets you edit your username and avatar.
A navigation bar that displays the current users avatar.

So I received a warning email from Firebase on Sept. 10th telling me that my Realtime Database was at 8.8gb, and that I only had 1.2gb worth of downloads left for the rest of the month.

Here's the two main factors that caused this:

I was storing the user avatars in base64, which lead to bigger file size. This meant downloading it from the database took longer and ate up more of my allotted downloads.
Each time an avatar was being displayed, I was making a new fetch to the database, and not storing it anywhere. So each time a user visits the home page, new call is made to the database to download all the avatars that are displayed on each post.

Lets say each avatar is originally 170kb, which is uploaded to the database as base64, so the image size is now 225kb. That doesn't seem too bad. But if there's 30 posts on the homepage, 30 avatars are being downloaded from the database, so 30 * 225 = 6750kb. Still doesn't seem too bad, but lemme give you an example to find out how I tortured the Realtime Database.

Let's follow a typical user as they sign up and navigate my app.

A user visits my site for the first time. They are sent to the homepage, where there are 30 posts and 30 avatars are downloaded to be displayed on each post. That's 6750kb worth of downloads. This user decides to create an account, which redirects them back to the home page afterwards. 6750 + 6750 = 13,500kb. They go to their profile page to change their profile pic, then decide to check out the homepage feed again, and all 30 avatars are downloaded once again. 13,500 + 6750 = 20,250kb. They decide to write a post, and are redirected to the homepage afterwards. Again, +6750. Our total is now 27,000kb, which is 0.027gb. This still doesn't seem too bad, but don't forget that this is just one user.

If there are 20 people signed up on my app, and they all are navigating my app like in my example, that's 20 * 27,000kb = 540,000kb. Not to mention that's only one session! So if all 20 people visit my app 4 times per day (that's wishful thinking 🥺), that's 2,160,000kb, or 2.16gb in one day!! Don't forget that this whole example is assuming the images are all 225kb each. 😱 Thankfully my dear family decided to make multiple accounts and upload huge HQ images haha.

But most importantly, since I'm working on this app all day everyday, I'M the one using it the most. 😭 At the moment I don't have separate databases for development/production. In addition I'm using webpack-dev-server, so the app was refreshing each time I saved a file. All the while making real calls to the database to make downloads.

Anyway, here's how I solved this problem 😊

Most importantly I'm now using Firebase's Storage for images, and the Realtime Database is solely for storing usernames and post info.
I'm no longer storing the image in base64, instead using the original files format.
Once an avatar is uploaded, I'm storing it's Firebase Storage URL in Redux, so the image is downloaded from the Redux store the next time it needs to be displayed.

This was already enough to decrease the downloads, but there's a few more features I'm working on that will greatly help improve things.

Allow users to crop their image, and then a step further would be somehow compressing the image. Only then will it upload to Storage.
Persisting the Redux state to local storage. If you visit the homepage, all the avatar URLs are downloaded and saved to the Redux store. This only works during one session. If you refresh the page or visit my app again another time, the store is reset, and all the URLs need to be downloaded from the database again. Saving the state in the browser's local storage fixes this. The next time you visit my blog app, the browser remembers what data has already been downloaded.

So anyway, that concludes my first big production bug. Rushing to do damage control so my database wouldn't be shut down for the rest of the month. 😅 Thankfully, ever since I switched to Firebase Storage and storing the image URLs in Redux/local storage, my Realtime Database still shows that I have 1.2gb left. Hopefully this means that my app will still be up and running for the rest of September!