📝 Another Rich Text Editor
Just a simple, themable, rich-ish text editor for React. Can it do everything? Nope. But it can do more than nothing and is super easy to use.
-
⌨️ Written in Typescript -
🛠️ Built on top of Prosemirror -
🙏 Couldn't be done without rich-markdown-editor and tiptap.
⚠️ This editor was built to support Launchbot. If you are looking for something more powerful (i.e. inline images, custom view components, embeds), look elsewhere. While we may add these features over time, ARTE isn't there today. Check out Remirror, or try building something from scratch using Prosemirror.
Demo
Live demo running here, or clone the repo to run the example usage locally.
Usage
Installation
import Editor from "@launchbot/editor";
const handleChange = value => {
// or store in database, save to form state etc.
localStorage.setItem("saved", JSON.stringify(value));
}
<Editor
readOnly={false}
placeholder={"A thousand words are worth...a thousand words"}
onChange={handleChange}
/>
Props
readOnly (default: false)
Set editor to read only view, which hides toolbars
placeholder
Placeholder text for an empty editor.
initialValue
String representing initial editor value. Can pass either plain text or a Document object, which represents the editor content with formatting.
onChange(value): void
Callback fired on editor changes. See the examples for how to receive and persist the editor content.
onFocus(): void
Callback fired when editor is focused.
onBlur(): void
Callback fired when editor loses focus.
theme (default: light)
Provide a custom theme for the editor. See the examples for usage, or use one of the built-in light/dark themes here.
Local Development
To run the demo locally:
npm install
npm run start