How to use

Install the package:

yarn add @francocirulli95/world-of-gami-wysiwyg

Import the editor and it's css

import { Editor } from "@francocirulli95/world-of-gami-wysiwyg";

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 "@francocirulli95/world-of-gami-wysiwyg/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("@francocirulli95/world-of-gami-wysiwyg"), {
  ssr: false,
});