article-json-to-contenteditable

7.3.7 • Public • Published

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

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

Readme

Keywords

none

Package Sidebar

Install

npm i article-json-to-contenteditable

Weekly Downloads

0

Version

7.3.7

License

MIT

Last publish

Collaborators

  • ellell
  • kesla