editable.js

Check out the demo. It features a formatting toolbar and the default insert, split and merge behavior that allow to add and remove content blocks like paragraphs easily.

Editable is built for block level elements containing only phrasing content. This normally means p, h1-h6, blockquote etc. elements. This allows editable to be lean and mean since it is only concerned with formatting and not with layouting.

We made editable.js to support our vision of online document editing. Have a look at livingdocs.io.

Installation

Via npm:

npm install --save @livingdocs/editable.js

You can either require('@livingdocs/editable.js') or find a prebuilt file in the npm bundle dist/editable.js.

Events Overview

• focus

• blur

• selection

• cursor

• change

• spellcheckUpdated

• clipboard

• insert

• split

• merge

• switch

• newline

How to use

To make an element editable:

const editable = new Editable()
editable.add($elem)

Example for Selection Changes

In a selection event you get the editable element that triggered the event as well as a selection object. Through the selection object you can get information about the selection like coordinates or the text it contains and you can manipulate the selection.

In the following example we are going to show a toolbar on top of the selection whenever the user has selected something inside of an editable element.

editable.selection((editableElement, selection) => {
  if (!selection) return toolbar.hide()
// get coordinates relative to the document (suited for absolutely positioned elements)
  const coords = selection.getCoordinates()
// position toolbar
  const top = coords.top - toolbar.outerHeight()
  const left = coords.left + (coords.width / 2) - (toolbar.outerWidth() / 2)
  toolbar.css({top, left}).show()
})

Dive Deeper

We haven't got around to make this documentation comprehensive enough. In the meantime you can find the API methods in src/core.js and the default implementation in src/default-behavior.js.

To find out what you can do with the the editable.js cursor and selection objects see src/cursor.js and src/selection.js.

Development

Setup:

# install node dependencies
npm install

Tasks:

# livereload server with demo app
npm start
run tests with karma on Headless Chrome
npm run test:karma
run tests with karma on Headless Chrome and rerun on changes
npm run test:watch
run tests in Chrome, Firefox and Safari
npm run test:all
javascript linting (configuration in .eslintrc)
npm run lint
build editable.js
npm run build

License

editable.js is licensed under the MIT License.