@the-grid/ed

npm start

ed

:warning: WIP; not in production yet. :warning:

Using ProseMirror with data from the Grid API

Demo: the-grid.github.io/ed/

The demo shows translating from ProseMirror to the the Grid API JSON and back.

purpose

ProseMirror provides a high-level schema-based interface for interacting with contenteditable, taking care of that pain. This project is focused on:

• Schema to translate between the Grid API data and ProseMirror doc type
• Coordinating widgets (block editors specialized by type) (example)

todo

• API communication layer
• iframe widgets
• native widgets
• handle image, video, article, quote types
  • edit attribution
• Integrate into web app
• Integrate into mobile apps
• Read-only mode

use

  ed = new Ed({
    // Where ed will mount
    container: document.querySelector('#ed'),
    // Content array from post
    initialContent: [],
    menutip: true,
    menubar: false,
    // Hit with each change
    onChange: function () { console.log('change') },
    // Debounced for saves
    onAutosave: function () { console.log(ed.getContent()) },
    autosaveInterval: 100
  })  

• You can only call ed.setContent() with full content once (or as constructor initialContent option).
  • Future calls will only update placeholder blocks.
  • If you need to load new content in, you must make a new Ed.
• ed.getContent() takes some processing and should not be done on every change.

Demo: ./demo/demo.js

dev

server

npm start and open http://localhost:8080/

In development mode, webpack builds and serves the targets in memory from /webpack/

Changes will trigger a browser refresh.

plugins

Plugins are ES2015 classes with 2 required methods:

• constructor (ed) {} gets a reference to the main ed, where you can
  • listen to PM events: ed.pm.on('draw', ...)
  • and set up UI: ed.pluginContainer.appendChild(...)
• teardown () {} where all listeners and UI should be removed

widgets

Widgets are mini-editors built to edit specific media types

iframe

Run in iframe and communicate via postMessage

Example: ced - widget for code editing

native

Example: WIP

code style

Feross standard checked by ESLint with npm test or npm run lint

• no unneeded semicolons
• no trailing spaces
• single quotes

test

npm test

build

npm run build

Outputs minified dist/ed.js and copies widgets defined in package.json.