How to customise Slate js — Part 1 (adding Material UI)

I was looking for some text editor for my website. After lot of research and deliberation i decided to use Slate js. The purpose of this tutorial is:

  1. Use Material UI to deisgn Slate js
  2. Upload Images
  3. Embed Videos

I tried to make reusable components which can be used anywhere else in your website. Let’s start with the first part: Using Material UI

  1. Add Material UI: I am using Next js and i used this repo to help me with the setup of Material UI : https://github.com/mui-org/material-ui/tree/master/examples/nextjs
  2. Add Slate js: I took the following repo as a base and added to my Material UI repo: https://github.com/ianstormtaylor/slate/blob/master/site/examples/richtext.js

Now let’s start customising the Toolbar and Buttons. Create a file name: SlateEditorUtil.tsx (it is a copy from Rich Text example. Nothing new in here):

do not worry about image and video elements at this moment. We will cover it in part 2 and part 3 respectively.

Create Slate Toolbar using Material UI now. Straight forward, just using Material UI components. I created two different type of Toolbars: 1) Normal toolbar (always visible) 2) Hovering toollbar in this file

Again do not worry about Image and Video buttons at this moment.

You can use the toolbar as follow in your react file. I am using it with Formik library (https://jaredpalmer.com/formik). You need not to use it. You can simply use your own method/function to update the value in onChange function and ignore the code related to Formik.

Use this SlateInput component anywhere in your application. I am using it my code as below (using Formik):

That’s the end of Part 1. Next we will see how to add Image and Video buttons and functionality to our Slate JS editor.

Part 2 — How to add images — https://medium.com/@bansalsushil_34403/how-to-customise-slate-js-part-2-adding-image-upload-functionality-3320a7260966#6adc