Notes

Editor - React Conf

Content Editable is an attribute that let any element to be editable

Content Editable is usually use to build rich text editors, or markdown editors, or any kind of editors.

The era of Content Builders

What you need for a Editor?

You need a model for the document

You need a map 1-1 from document to visible screen (usually DOM or native nodes)

You need to handle selections in a good way

You need to handle carets

You need to define edit operations based on key press and mouse clicks

How Medium editor works?

  • it has sections and paragraphs
  • a paragraph contains text and formatting, and also a layout information
  • a section describes background for a sublist of paragraphs

How Notion editor works?

it has a list of basic blocks (text, page, todo list, image, kanban, calendar, database)

each basic block has its own properties

You edit one block per time.

React Conf BR

Drafjs: from RichText to Content Builders

Links to
  • The era of Content BuildersWhat is Content? Content is information organized to an audience What is a Content Builder? A content builder is a software that you let organize your content in different ways.…
Shares tags with
  • Global StateRedux single immutable atom for the whole UI hard to code split hard to optimize Selector: useSelector Recoiljs multiple immutable atoms for the UI it works with sync and async…
  • "Simple" PagesA call "simple" pages: landing pages, blog posts, simple websites. These "simple" pages have a high level complexity of CSS and animations, 2 skills that I'm not so good yet,…
  • A Failed TalkA talk is a good way to explain some concept. When doing a talk you need to know your audience, you can't target beginners and advanced users at once A failed talk can happen for…
  • Building from Scratch?why am I building my blog post from scratch? The idea is to learn all about the details to create great ux and dx I'd like to feel all the pain of writing everything in pure html…
  • Bundle analyzeMost modern apps can’t be built without dependencies, so we need to analyze the final bundle of our application to make sure we are not shipping unnecessary code We can also use…

Sign in with GitHub to reply.

Select any passage to quote it.

Comments