Create your own Notion like WYSIWYG editor with Editor.JS!!

In this video, I'll be talking about Editor.JS - a free block-style editor with a universal JSON output. Editor.js provides maximum power for developers and products staying focused on the end-user experience. It is very customisable and very fun to work with.
Editor.JS website: editorjs.io/
Docs: editorjs.io/ba...
Editor.JS React Renderer: www.npmjs.com/...
---
Website: kavin.me
Blog: livecode247.com
Github: github.com/kav...

[@angadsingh5636]

my goat, right when i needed to build an editor

[@michaelyabut5969]

thanks, this video helped a lot. all those dynamic imports were important

[@sukritsaha5632]

Even I am using Editor.JS in my project and it's brilliant. Ended up building custom renderers for almost all the tools and it looks perfect.

[@livecode247]

It is a pretty good setup and much lightweight compared to the ones which existed before. Obviously all have different use cases but yes

[@sukritsaha5632]

@@livecode247 Yeah, I agree

[@ebukaezeanya512]

The part where you have to destroy the ref i dont get it. I'm trying to follow along using typescript and when i create my editor component and i call it... It renders it like 4 times and when i try to add the line where you destroy the ref.current my code breaks

[@mihiramin1091]

can I get the orginal code cause I tried a lot but I didn't even get up with running the Editor Js, let alone the further things in the video. Please can I get your original code and not some other reference code? please

[@prat_0501]

Awesome tutorial 💯💯 but how to render text by providing JSON data?

[@livecode247]

Thank you so much! I'm pretty sure that's part of the video

[@AbhilashShibu-d4u]

Bro what's your vim setup like, I'm trying to get into vim. Could you help me out or point me in the right direction

[@livecode247]

I'm using Neovim, and this is my own custom configuration which you can find here: kavin.me/dots
Honestly, I would suggest to start off just use vim keybindings in VSCode or ay other code editor that you use to just get used to the motions.

[@Ckuiper123]

Nvm my question. My problem was that I had the Editor as part of a map function. So there were more then 1 editors on a page. I changed my code around and got it working now. Here the adjusted code for more editors on a single page.
import React, { useState, useEffect, useRef } from "react";
import dynamic from 'next/dynamic';
export default function Editor() {
const [isMounted, setIsMounted] = useState(false);
const ref = useRef();
const initializeEditor = async () => {
const EditorJS = (await import("@editorjs/editorjs")).default
const Header = (await import("@editorjs/header")).default
if (ref.current) {
const editor = new EditorJS({
holder: ref.current,
tools: {
header: Header,
},
});
ref.current = editor
}
};
useEffect(() => {
if (typeof window !== "undefined") {
setIsMounted(true);
}
}, [])
useEffect(() => {
const init = async () => {
await initializeEditor();
};
if (isMounted) {
init();
return () => {
if (ref.current) {
ref.current.destroy();
}
}
}
}, [isMounted])
const save = () => {
if (ref.current) {
ref.current.save().then((outputData) => {
console.log(outputData)
})
}
}
return (


Save

)
};

[@livecode247]

Thank you for sharing!

[@Himanshuyadav-us6me]

Thanks dude.
I am facing one issue
Heading in editor are not big, their size is same as normal text.
Did you face this issue?
Edit: I got the fix, Tailwind CSS was overriding h1 style

[@adityapandey1190]

@@Himanshuyadav-us6me Hi, I'm facing the same problem how to counter the overriding?

[@rishabhpanwar8971]

Nice video. I reached out on LinkedIn.

[@livecode247]

Thank you!

[@shreyAtJob]

Could we please get the code?

[@umuden]

You magician..

[@livecode247]

Thank you!

[@prateekkukreja9664]

which code editor is that?

[@livecode247]

That's Neovim!

[@angelomancilla7153]

How do you resolve the errors of typescript about types of modules like table, chekclist and others? I only found types for @editorjs/editorjs__header.

[@livecode247]

Ya they don't exist unfortunately, just // @ts-ignore them for now

[@pranjalgupta2575]

can i do the same using django?

[@livecode247]

Not sure how well it works but you can look at this: github.com/2ik/django-editorjs-fields

[@saipranay3363]

hey can i get link to that code !!

[@livecode247]

Oh man, I'm so sorry. I thought I'd posted a Github Link in the description and deleted the directory. The code is somewhat similar to this component written by @joshtriedcoding so you can check that out instead if it helps
github.com/joschan21/breadit/blob/master/src/components/Editor.tsx

[@ukrainetoday960]

Notiion use EditorJS

[@navaneeth6157]

discord?

[@livecode247]

Here it is: kavinvalli

[@navaneeth6157]

@@livecode247 no i mean server like any community?

[@livecode247]

Oh, no 😔. Not that big yet lol