New Editor to Replace Raw Textareas

[shanberg]

The raw textarea experience feels pretty rough, and will be a liability to Athens until it’s radically improved. Other apps like Saga.so and Notion provide much richer and more fluid tools for editing content, with things like as-you-type parsing and decoration, undo boundaries, no flash on click, accurate cursor placement, and true WYSIWYG for most entries because they don't rely on a raw textarea for content entry.

There are a handful of mature packages available that are made to handle WYSIWYG, and have benefitted from years of development and testing. I recommend we investigate a few of them and chart a path toward a revamp of the block editing experience.

Some elements of the current experience I think we need to focus on

• Janky look and feel (raw textarea content can't be styled)
• Text can't be visibly rendered as you type
• Editable area sometimes sized different from rendered area, leading to weird vertical spaces while editing
• Block text like headings and code blocks can't have custom spacing, because the containers can't know what content they have inside
• DOM element overload, with extra wrappers and textareas everywhere
• Poor undo boundaries
• Poor cursor accuracy when clicking into block content to edit it

Considerations

• How to handle parsing with a new editor?
• How to make that transition?

Potential editor packages

• ProseMirror: Low-level. Very modular.
• Draft.js: Facebook's. Opinionated. Slightly old but long history of solved bugs.
• Slate.js: React-first. Beta.

Suggested baselines for comparison

• Saga.so
• Notion
• Google Docs
• Craft

[tangjeff0]

https://reflectchangelog.substack.com/p/reflects-new-editor