article-json-to-contenteditable
v7.3.7
Published
## Installation
Downloads
7
Readme
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