My Editor

To view this page as a render view, visit here

Features:

  • Headings 1-6
  • Quote
  • Dot list
  • Num list
  • Code blocks
  • Inline styling : Bold, Italic, Underline, Monospace
  • Image & link inserting (url only) into text.
  • seperator line

Examples :

Quote
This is a quote
Lists
  • Dot list
    • Dot list 2
      • Dot list 3 (max)

there is also num list

  1. num list
    1. num list 2
      1. num list 3
Code block

the code block is not highlighted in the editor, but can be highlighted when you render it (explanation below).

//this is a code block
console.log("hello world");

for inline code, use monospace

Images & links

To add an image, select text to be an alt and click on the image button.

example/

to insert link, simply paste it, or select a text and click on the link icon, my github

there are also undo and redo buttons, alongside some keyboard shortcuts.

Tech stack :

  • Next.js
  • Draft.js + Draftjs-to-html
  • cheerio
  • highlight.js
  • Shadcn + next themes
  • Tailwind
  • Typescript
  • React icons

How to use the editor:

  1. make sure to copy the editor file, the editor styles, Shadcn, and initialize theme and css variables. (If you don't want to use shadcn or css variables, you can customize it with some work).
  2. Create a component of which you will render the Editor inside and give it basic styles as width and height.
  3. Create a react ref to forward to the editor and content state to store the content. (optionally) : give the editor initial content in a form of RawDraftContentState, useful for editing existing forms.
  4. When you are done with editing the form, use the getContent function to convert it to html string and save it how you want to.
  5. when you want to render the html string, use the allPreCodeToHighlighted function on the string, then you can render it as dangerouslySetInnerHTML.

Notes

  • Unfortunately, this editor will not work well in mobile, because Draft.js mobile pairing is bad (selection problems).
  • To use the seperator line, simply write "-" three times.
  • Using num list or dot list one after another without anything in between will cause weird behavior in rendering them, so simply seperate them using text or empty row in between.
  • I recommend saving a JSON and an HTML versions of the editor if you need to edit it in the future, because as mentioned, you can give initial draft to the editor and it requires the JSON format. you can instead, switch to working with JSON only and convert it to html when rendering the page, but it will be more server heavy.