@avp1598/react-beautiful-editor

React Beautiful Editor

Live Demo

A React component that allows you to create a beautiful rich text editor with resizable embeds, images, links, and more.

It is built on top of tiptap and it is an all batteries included editor.

How to use

Install the package:

yarn add @avp1598/react-beautiful-editor

pnpm install @avp1598/react-beautiful-editor

npm install @avp1598/react-beautiful-editor

Import the editor and the css

import { Editor } from "@avp1598/react-beautiful-editor";

const Home = () => {
  const [description, setDescription] = useState("");

  const onSave = () => {
    console.log("description", description);
  };

  const theme = "dark";

  return (
    <div
      // set text color based on the theme
      style={{
        color: theme === "dark" ? "white" : "black",
      }}
    >
      <Editor
        value={description}
        onChange={(value) => {
          setDescription(value);
        }}
        theme={theme}
        uploadImage={async (file) => {
          console.log("file", file);
          // upload the file to your server and return the url
          return "https://picsum.photos/400/600";
        }}
        placeholder="Enter description"
        embedBoundsSelector=".bounds"
        onBlur={onSave}
        readonly={false}
      />
    </div>
  );
};

// import the css
import "@avp1598/react-beautiful-editor/dist/Editor.css";

Features

Slash commands (Type / to see the list of commands)

Text

Heading 1

Heading 2

To-do list

Bulleted list

Numbered list

Divider

Image

Youtube

Twitter

Figma

Resizable embeds and Images

Node marks (Bold, Italic, Underline, Strikethrough, Link)

API (Available props)

You can pass the following props to the Editor component.

value (string)

The string value of the editor.

---

onChange (function)

A function that will be called whenever the value of the editor changes, with the new value as the first argument.

---

uploadImage (function)

A function that will be called whenever the user uploads an image, with the image file as the first argument. This function should return a promise that resolves to the URL of the uploaded image.

---

placeholder? (string)

The placeholder text for the editor.

default: Start typing and enter / for commands

---

theme? (string)

The theme of the editor.

default: light

---

embedBoundsSelector? (string)

The selector for the element that will be used to calculate the bounds of the embeds.

default: window

---

readonly? (boolean)

Whether the editor is readonly or not.

default: false

---

onBlur? (function)

A function that will be called whenever the editor loses focus.

---

onFocus? (function)

A function that will be called whenever the editor gains focus.

---

onReady? (function)

A function that will be called whenever the editor is ready to be used.

---

Props marked with ? are optional.

Working with server side rendering (SSR)

The editor component will not work if the page is server side rendered using next.js. To get around this, dynamic import the editor component.

import dynamic from "next/dynamic";

const Editor = dynamic(() => import("@avp1598/react-beautiful-editor"), {
  ssr: false,
});

Working with tailwindCSS

Tailwind css overrides the default heading and list styles of the editor. To fix this, you can add the following to your global css file where your tailwind directives are defined.

@tailwind base;

@layer base {
  ul,
  ol {
    list-style: revert;
  }

  h1,
  h2 {
    font-size: revert;
    font-weight: revert;
  }
}