Coder Social home page Coder Social logo

rich's Introduction

A completely customizable framework
for building rich text editors in ClojureScript.


Design goals · Demo


·


Design goals

  • Nested document model. The document model used for Rich is a nested, recursive tree, just like the DOM itself. The document tree adheres to the hickory format to make converting to and from HTML easy. Because it's a tree and not a flat list of characters, creating complex components like tables or nested block quotes are possible for advanced use cases.

  • Flexible schemas. The nodes in Rich's document model are open maps, and the core assumes very little about the schema of the data you'll be editing. That means that there are no assumptions baked into the library that'll trip you up when you need to go beyond the most basic use cases.

  • Intuitive commands. Rich documents are edited using "commands", that are designed to be high-level and extremely intuitive to write and read, so that custom functionality is as expressive as possible. This greatly increases your ability to reason about your code.

  • Collaboration-ready data model. The data model Rich uses—specifically how operations are applied to the document—has been designed to allow for collaborative editing to be layered on top, so you won't need to rethink everything if you decide to make your editor collaborative.

  • Clear "core" boundaries. With a plugin-first architecture, and a schema-less core, it becomes a lot clearer where the boundary is between "core" and "custom", which means that the core experience doesn't get bogged down in edge cases.

Demo

To get an idea of how you might use Rich, check out the demo.

To run the demo site yourself, clone this repo and run:

npm install
npm run build

Examples

To get started using Rich, it might help to start with an example.

  • Plain text -- showing the most basic case: a glorified <textarea>
  • Rich text -- showing the features you'd most likely expect from an editor.
  • More to come...

Features

  • Deserialize text editor state to JSON, EDN, and its contents to HTML
  • Undoable state
  • Extensible command pallette

Roadmap

  • Paste with or without formatting
  • Delta encoding of state history
  • Full rich text demo with reagent, including toolbars and multiple editors
  • Remove dependency on Reagent
  • Remove dependency on React
  • Compatibility with CRDTs for collaborative editing

rich's People

Contributors

calherries avatar

Stargazers

 avatar Andrew Foltz-Morrison avatar bryan avatar Daniel Stockton avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.