Article-json-to-contenteditable NPM

article-json-to-contenteditable

Installation

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

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

Example

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: 'https://www.facebook.com/david.bjorklund/posts/10153809692501070',
    embedAs: 'post',
    date: 'Thursday, January 21, 2016',
    user: 'David Pop Hipsterson',
    text: [{
      content: 'Hey!So, for the last few weeks I\'ve worked on http://mic.com/ - the new home for mic.com (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);

Tests

npm install
npm test

Dependencies

article-json-html-render: Base for html-based article-json renderer, such as article-json-to-amp
deku: Create view components using a virtual DOM
embeds: Parse & render embeds
html-to-article-json: Converting HTML to article-json
keycode: Convert between keyboard keycodes and keynames and vice versa.
magic-virtual-element: Build virtual tree elements with magic attributes
morphdom: Morph a DOM tree to another DOM tree (no virtual DOM needed)
save-selection: Save & restore selections in a document, using <mark> elements

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