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";
You can pass the following props to the Editor
component.
The string value of the editor.
A function that will be called whenever the value of the editor changes, with the new value as the first argument.
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.
The placeholder text for the editor.
default: Start typing and enter / for commands
The theme of the editor.
default: light
The selector for the element that will be used to calculate the bounds of the embeds.
default: window
Whether the editor is readonly or not.
default: false
A function that will be called whenever the editor loses focus.
A function that will be called whenever the editor gains focus.
A function that will be called whenever the editor is ready to be used.
Props marked with ? are optional.
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,
});