Build a Notes App with Editor.js and ReactJS - #2 - Editor Configuration

In this video, we're building a Notes App using ReactJS and Bootstrap. We'll spice things up by integrating EditorJS, a powerful and customizable rich text editor. Get ready for a WYSIWYG adventure as we craft a seamless editing experience! Whether you're a React aficionado or just starting out, join me on this coding journey. Hit play, code along, and let's turn your Notes App into something extraordinary! #ReactJS #Bootstrap #EditorJS #NotesApp #wysiwyg
📂 Source Code: github.com/aardapeker/notes-a...

[@gastonyauck]

Hi, im having a problem with the popup for the color picker..
Im rendering the editor on a modal, but when i try to apply a color, the popup appears and dissapears again....
Do you know the reason of this behaviour? I tried multiple browsers, incognite mode, etc..
Thank you!

[@loremIpsumDolorDev]

Hi, I don't know about this issue, but I encountered something similar with Next.js and I'm still working on it. This color plugin works fine with React or core JavaScript.

[@gastonyauck]

@@loremIpsumDolorDev In my case it got solved by downgrading the version of the tool editorjs-text-color-plugin.

[@gastonyauck]

Hi again, wanted to ask.
How are you rendering the outputData generated from editorJS?
Because there are some libraries that parse the output to React like:
-editorjs-blocks-react-renderer - React component to render blocks to semantic HTML5 tags
-editorjs-react - Editor.js React parser to parse Editor.js data to JSX components
But, its not the same if i call the EditorJs component, and pass the data with a readonly true??

[@loremIpsumDolorDev]

I typically render the output by applying my own styling to it. I haven't used the readonly mode, but it does seem quite useful, especially for projects like Notion or Jupyter notebooks.

[@desuchan3313]

can I have the source code?

[@loremIpsumDolorDev]

github.com/aardapeker/notes-app/tree/lesson-2

[@desuchanz4956]

@@loremIpsumDolorDev thank you so much!