Skip to content

An advanced text editor based on QuillJS, vaguely inspired by Tumblr's.

License

Notifications You must be signed in to change notification settings

featherbutt/boba-editor

 
 

Repository files navigation

boba-editor

An advanced text editor based on QuillJS, vaguely inspired by Tumblr's. Created for BobaBoard.

Demo

Demo on Netlify!

Try on Storybook

Requires nodejs 12.9.1.

yarn run storybook

To enable all embed types you can run your own Iframely instance on your localhost (or server).

How to Use

import { Editor } from "BobaEditor";

<div style={{ backgroundColor: "white", maxWidth: "500px" }}>
    <Editor
      editable={true}
      initialText={JSON.parse(
        '[{"insert":"Open RP"},{"attributes":{"header":1},"insert":"\\n"},{"insert":{"block-image":"https://cdn.discordapp.com/attachments/443967088118333442/691486081895628830/unknown.png"}}, {"attributes":{"italic":true},"insert":"You have my sword..."}]'
      )}
      onTextChange={() => {
        console.log("changed!");
      }}
      focus={true}
      onIsEmptyChange={() => {
        console.log("empty!");
      }}
      onSubmit={() => {
        // This is for cmd + enter pressed while in the editor
        console.log("submit!");
      }}
    />
  </div>

Props

  • initialText: A QuillJS Delta.
  • focus: Whether to focus on first render.

Contributions

Pull requests are welcome. Feel free to open an issue to discuss!

About

An advanced text editor based on QuillJS, vaguely inspired by Tumblr's.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 62.3%
  • TypeScript 36.0%
  • HTML 1.7%