MyNodeEditor

A drop-in react component to create an easy-to-use text editor using slate.

Getting started

Start by installing the package.

npm install -s @mynodehost/editor
# or
yarn add @mynodehost/editor

Insert the MyNode editor in your react app for a basic editor.

import MyNodeEditor from "@mynodehost/editor";

function onTextChange(fullValue) {
  console.log(fullValue);
}

return (
  <MyNodeEditor
    placeholder="Write here..."
    onChange={onTextChange}
  />
);

Don't forget to provide the styles using an import statement.

Using next.js? Put the import statement in your _app file to prevent errors!

import "@mynodehost/editor/styles.css";

Blocks

The editor imports and exports blocks. This is an array with a block object. Listed below is an example of a block export.

const block = {
  type: "paragraph" | "heading-one" | "heading-two" | "heading-three" | "quote" | "image", // Note: images are different (read below for more information)
  children: children[]
};

Each type refers to the html tag type, like <p> and <h2>.

The children of each block is an array with the text and styling, like if the text should be bold.

const children = [{
  text: "1"
}, {
  text: "2",
  bold: true
}, {
  text: "3"
}];

Images

Images are different. Images don't export children, instead they export a url (string). An example is listed below.

const imageBlock = {
  type: "image",
  url: "https://some_url/some_path_to_the_image"
};

Initial value

When providing an initial value, make sure to use this to prevent errors! An example of initial values is listed below.

<MyNodeEditor
  initialValue={[{
    type: "paragraph",
    children: [{
      text: "Hello there!",
      italic: true
    }]
  }]}
/>

Advanced features

Images

MyNodeEditor also supports images, however you need to implement your own upload system. Add an imageUpload function that returns a string (the image url).

Note: when the imageUpload option isn't provided, adding images is disabled: the new image button is hidden.

async function uploadImage(base64Image: string): Promise<string> {
  // Upload the base64 image and get an url
  return some_image_url;
}

return (
  <MyNodeEditor
    imageUpload={uploadImage}
  />
);

You can also add a max file size. Images automatically get compressed until hitting the provided size, with a minimum quality of 25%.

When no maxFileSize is present, the image doesn't get compressed.

<MyNodeEditor
  maxFileSize={750000 /*Max 750KB*/}
/>

Custom styles

You can provide a couple basic styles related to the editor width and height. In the example below, all the possible options are listed.

<MyNodeEditor
  style={{
    minWidth: 100,
    width: 200,
    maxWidth: 300,

    minHeight: 100,
    height: 200,
    maxHeight: 300
  }}
/>

Other colors

To change the default colors, create a css file that is imported after the MyNodeEditor css file with the colors. The current light-mode colors are listed below.

html {
  --MyNode-background-one: #ffffff;
  --MyNode-background-two: #d6d6d6;
  --MyNode-background-three: #dddddd;
  --MyNode-dark: #8b8b8b;
  --MyNode-text: #1d1d1d;
  
  --MyNode-green: #0ebb0e;
  --MyNode-green-opacity: #0fce0f4c;
  --MyNode-green-opacity-double: #0fce0f85;
}

Custom texts

Some texts are shown in the image upload section. By default, this text is in English. You can provide your own text using the texts option.

<MyNodeEditor
  texts={{
    uploadTitle: "Upload image",
    uploadButton: "Upload",
    loading: "Loading image...",
    error: "Failed to upload image!",
    linkTitle: "Add a link",
    linkPlaceholder: "Insert link here...",
    linkButton: "Set link"
  }}
/>

Spellcheck

By default, MyNodeEditor has spellcheck enabled. You can manually disable it if you want to.

<MyNodeEditor
  spellCheck={false }
/>