Context

Until this feature was built, the only way to update or create new project posts was by manually entering JSON into the database (first local .json files, then MongoDB). While this wasn't a huge deal, I wanted something more streamlined.

Requirements

My requirements for this feature were as follows:

A rich text editor that allowed me to export as HTML
The ability to upload photos to a cloud storage service (currently Google Cloud Platform)
The capability to upload everything to MongoDB
Form validation

Process

The first step was to find a rich text editor that had all the features I needed and worked with SSR. Unfortunately, it took many hours of searching and demoing to find something that worked. Most of the editors tried to access document or window during SSR, which kept breaking my application. Since I wasn't familiar enough with useEffect() I was unsuccessful in finding a work-around using that. Here is the list of editors I tried before finding something that worked:

CKEditor
Lexical
Slate.js
Quill
Draft.js

and finally the one that worked:

Tiptap

Tiptap

Read the official docs at https://tiptap.dev/

There were two big reasons I stuck with Tiptap after trying so many others. First, it's incredibly customizable. The editor itself is headless, so it's up to the developer to create the visual editor. It provides all the normal rich text editor features (bold, italic, headers, code blocks, alignment, etc.) right out of the box. Additionally, it allows images, and can export everything as HTML.

The second reason is because it worked with my SSR React components.

Usage

The Tiptap editor has all its configuration done through an Editor object. See the docs for specifics on getting set up.

After configuring the editor, the next step was to connect it with a toolbar to enable all the different style options. I did this just by using buttons.

<button
  title="Bold"
  onClick={() => editor.chain().focus().toggleBold().run()}
  disabled={!editor.can().chain().focus().toggleBold().run()}
  className={editor.isActive("bold ") ? "is-active " : ""}>
  <i className="ri-bold"></i>
</button>

For most options, the button includes the onClick to tell Tiptap to alter the selected text, or to trigger something like bold. The disabled attribute makes sure that the editor is able to perform the selected action. I used Remix Icons for the button icons

Links

For links, things got a little more complicated. Because links need an href attribute, I would need to prompt the user for a URL. While I could have used a prompt() to get user input, I wanted something a little more attractive and customizable.

Enter <dialog>

Using the onClick attribute, I could trigger a dialog element and have it display a form.

This allowed me to give the user more options, such as removing the link later on. Here's what the HTML looks like:

      <dialog
        id="linkInput"
        className="inputDialog"
        ref={linkDialog}
        onClose={handleCloseLinkForm}>
        <form className="get-link-url">
          <button id="cancel" value="cancel" formMethod="dialog">
            Cancel
          </button>
          <label htmlFor="href">Enter URL for Link</label>
          <input
            type="text"
            id="href"
            name="href"
            ref={hrefEl}
            onChange={handleLinkTextInput}></input>
          <div className="dialog-buttons">
            <button
              id="remove"
              className="remove-button"
              value="remove"
              formMethod="dialog"
              ref={removeBtn}
              onClick={handleRemoveLink}>
              Remove Link
            </button>
            <button
              id="confirmBtn"
              className="confirm-button"
              value="default"
              ref={confirmBtn}
              onClick={handleSubmitLink}>
              Confirm
            </button>
          </div>
        </form>
      </dialog>
      <button
        id="showDialog"
        title="Link"
        className={editor.isActive("link") ? "is-active " : ""}
        ref={showButton}
        onClick={handleLinkShowButton}>
        <i className="ri-link"></i>
      </button>

The fun doesn't end here, however. Next I had to give the dialog functionality and get the data from the form without refreshing the page.

To do this, I first used useRef() to have safe references to the HTML elements. I used these refs to trigger the modal, prevent the default form action, and pass information between elements.

  function handleLinkShowButton() {
    // editor is the Tiptap editor and is passed in as a prop
    let previousUrl = editor.getAttributes("link").href;
    if (previousUrl === undefined) {
      previousUrl = "";
    }
    // We want to pre-populate the url value with the previous url, or ""
    hrefEl.current.value = previousUrl;
    linkDialog.current.showModal();
  }

  function handleLinkTextInput() {
    // Send text input to the confirm button for later
    confirmBtn.current.value = hrefEl.current.value;
  }

  function handleRemoveLink() {
    editor.chain().focus().extendMarkRange("link").unsetLink().run();
    linkDialog.current.returnValue = "";
    linkDialog.current.close(linkDialog.current.returnValue);
  }

  function handleCloseLinkForm() {
    if (linkDialog.current.returnValue === "") {
      editor.chain().focus().extendMarkRange("link").unsetLink().run();
    } else if (linkDialog.current.returnValue === "cancel") {
      return;
    } else {
      // Tell Tiptap to make the selected text a link
      editor
        .chain()
        .focus()
        .extendMarkRange("link")
        .setLink({ href: linkDialog.current.returnValue })
        .run();
    }
  }

  function handleSubmitLink(event) {
    event.preventDefault();
    // Have to send the select box value here.
    linkDialog.current.close(hrefEl.current.value); 
  }

Inline Images

As a part of this feature, I wanted to be able to upload images to a cloud service and embed them in the editor. While similar to the Link feature, adding images required a few additional steps.

I started by creating a dialog element to hold the form:

      <dialog
        id="imageInput"
        className="inputDialog"
        ref={imgDialog}
        onClose={handleCloseImgForm}>
        <fetcher.Form
          className="get-image"
          encType="multipart/form-data"
          method="post"
          action="/admin/upload">
          <button
            id="cancelImg"
            value="cancel"
            className="cancel-button"
            formMethod="dialog">
            Cancel
          </button>
          <label htmlFor="src">Upload image</label>
          <input
            type="file"
            accept="image/*"
            className="image-upload"
            id="src"
            name="src"
            ref={srcEl}
          />
          <br />
          <label htmlFor="alt">Image Alt Text</label>
          <input
            type="text"
            id="alt"
            name="alt"
            ref={altEl}
          />
          <div className="dialog-buttons">
            <button
              id="confirmImg"
              className="confirm-button"
              value="default"
              ref={confirmBtnImg}
              onClick={handleSubmitImg}
              type="submit">
              Confirm
            </button>
          </div>
        </fetcher.Form>
      </dialog>
      <button
        id="showImgDialog"
        title="Insert Image"
        onClick={handleImgShowButton}
        ref={showImageButton}>
        <i className="ri-image-add-line"></i>
      </button>

The biggest difference is using fetcher.Form. By using a fetcher, the form can be sent to an action without refreshing the page. When setting up the handlers, we use fetcher to send the form data to an action that handles the uploading of the file, which is complicated enough to deserve a separate article.

  function handleImgShowButton() {
    imgDialog.current.showModal();
  }

  function handleCloseImgForm() {
    if (imgDialog.current.returnValue === "cancel") {
      return;
    } else {
      editor
        .chain()
        .focus()
        .setImage({
          src: srcEl.current.returnValue,
          alt: altEl.current.returnValue,
        })
        .run();
    }
  }

  async function handleSubmitImg(event) {
    event.preventDefault();

    const data = await fetcher.submit(event.target.form, {
      method: "post",
      action: "/admin/upload",
      encType: "multipart/form-data",
    });

    console.log("toolbar-upload-data" + data);
    srcEl.current.returnValue = data.src;
    altEl.current.returnValue = data.alt;

    imgDialog.current.close();
  }

Source Code

See this GitHub repository for the complete source code: https://github.com/matkatd/RemixPortfolio/blob/master/app/routes/components/ToolBar.jsx

React Rich Text Editor with Tiptap