Download node at and install it, if you haven't already.

Usage no npm install needed!

<script type="module">
  import articleJsonToContenteditable from '';




Download node at and install it, if you haven't already.

npm install article-json-to-contenteditable --save


import {render, tree} from 'deku';
import setupArticle from '../lib';
import element from 'magic-virtual-element';

const Article = setupArticle();
const container = document.querySelector('#editor');

const items = [
    type: 'paragraph',
    children: [{
      type: 'text',
      content: 'Text text text',
      href: null,
      italic: false,
      bold: false,
      mark: false,
      markClass: null
  }, {
    type: 'embed',
    embedType: 'facebook',
    url: '',
    embedAs: 'post',
    date: 'Thursday, January 21, 2016',
    user: 'David Pop Hipsterson',
    text: [{
      content: 'Hey!So, for the last few weeks I\'ve worked on - the new home for (on desktop) - please take a look :)',
      href: null

const getCustomKeyDown = (e) => {
  // Return method(s) to handle any keydown events you want custom
  // handling for, like undo/redo etc.
  const zKeyCode = 90;
  if (e.metaKey && e.keyCode === zKeyCode) {
    return function handleUndoRedo () {
      console.log('should undo/redo');

const onUpdate = ({items, selectionBoundingClientRect, activeItem}) => {
  console.log('in client.js onUpdate');
  console.log('selectionBoundingClientRect:', selectionBoundingClientRect);
  console.log('activeItem:', activeItem);
  app.mount(<Article items={items} onUpdate={onUpdate} getCustomKeyDown={getCustomKeyDown} />);

const app = tree(<Article items={items} onUpdate={onUpdate} getCustomKeyDown={getCustomKeyDown} />);

render(app, container);


npm install
npm test


Dev Dependencies

  • babel-cli: Babel command line.
  • babel-plugin-transform-react-jsx: Turn JSX into React function calls
  • babel-preset-es2015: Babel preset for all es2015 plugins.
  • babel-tape-runner: Babel + Tape for running your ES Next tests
  • babelify: Babel browserify transform
  • beefy: local development server that aims to make using browserify fast and fun
  • brfs: browserify fs.readFileSync() static asset inliner
  • browserify: browser-side require() the node way
  • create-event: Create an event object
  • electron-prebuilt: Install electron prebuilt binaries for the command-line use using npm
  • faucet: human-readable TAP summarizer
  • semistandard-deku: All the goodness of feross/standard with semicolons sprinkled on top. Adapted for deku
  • snazzy: Format JavaScript Standard Style as Stylish (i.e. snazzy) output
  • tape: tap-producing test harness for node and browsers
  • tape-catch: a wrapper around tape that catches and reports exceptions
  • testron: CI your client side tests with Electron



Generated by package-json-to-readme