micnews / article-json-to-contenteditable

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

License

MIT

Generated by package-json-to-readme