diff --git a/.eslintrc b/.eslintrc
index 3bc2f9ed4..b737d1bcf 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,7 +1,10 @@
{
- "env": {
- "browser": true,
- "node": true
+ "plugins": [
+ "import",
+ "react"
+ ],
+ "settings": {
+ "import/extensions": [".js"]
},
"parser": "babel-eslint",
"parserOptions": {
@@ -9,10 +12,10 @@
"jsx": true
}
},
- "plugins": [
- "import",
- "react"
- ],
+ "env": {
+ "browser": true,
+ "node": true
+ },
"rules": {
"block-spacing": "error",
"comma-dangle": ["error", "only-multiline"],
@@ -25,9 +28,7 @@
"dot-notation": ["error", { "allowKeywords": true }],
"eol-last": "error",
"func-style": ["error", "declaration"],
- "import/default": "error",
"import/export": "error",
- "import/named": "error",
"import/namespace": "error",
"import/newline-after-import": "error",
"import/no-deprecated": "error",
@@ -41,7 +42,6 @@
"new-parens": "error",
"no-array-constructor": "error",
"no-class-assign": "error",
- "no-console": "warn",
"no-const-assign": "error",
"no-debugger": "warn",
"no-dupe-args": "error",
diff --git a/Makefile b/Makefile
index fbd01525c..09201cddf 100644
--- a/Makefile
+++ b/Makefile
@@ -47,16 +47,19 @@ examples:
install:
@ npm install
-# Lint the sources files with Standard JS.
+# Lint the source files.
lint:
- @ $(eslint) "lib/**/*.js"
+ @ $(eslint) \
+ "lib/**/*.js" \
+ "examples/**/*.js" --ignore-pattern "build.js"
# Build the test source.
-test/browser/support/build.js: $(shell find ./lib) ./test/browser.js
+test/support/build.js: $(shell find ./lib) ./test/browser.js
@ $(browserify) \
+ ./test/browser.js \
--debug \
--transform babelify \
- --outfile ./test/support/build.js ./test/browser.js
+ --outfile ./test/support/build.js
# Run the tests.
test: test-browser test-server
diff --git a/examples/auto-markdown/index.js b/examples/auto-markdown/index.js
index 848cb4a99..5b338040b 100644
--- a/examples/auto-markdown/index.js
+++ b/examples/auto-markdown/index.js
@@ -2,7 +2,7 @@
import { Editor, Raw } from '../..'
import React from 'react'
import keycode from 'keycode'
-import state from './state.json'
+import initialState from './state.json'
/**
* Node renderers.
@@ -38,7 +38,7 @@ class AutoMarkdown extends React.Component {
*/
state = {
- state: Raw.deserialize(state)
+ state: Raw.deserialize(initialState)
};
/**
@@ -48,7 +48,7 @@ class AutoMarkdown extends React.Component {
* @return {String} block
*/
- getType(chars) {
+ getType = (chars) => {
switch (chars) {
case '*':
case '-':
@@ -71,26 +71,45 @@ class AutoMarkdown extends React.Component {
* @return {Component} component
*/
- render() {
+ render = () => {
return (
NODES[node.type]}
- onKeyDown={(e, state) => this.onKeyDown(e, state)}
- onChange={(state) => {
- console.groupCollapsed('Change!')
- console.log('Document:', state.document.toJS())
- console.log('Selection:', state.selection.toJS())
- console.log('Content:', Raw.serialize(state))
- console.groupEnd()
- this.setState({ state })
- }}
+ onChange={this.onChange}
+ onKeyDown={this.onKeyDown}
+ renderNode={this.renderNode}
/>
)
}
+ /**
+ * Render a `node`.
+ *
+ * @param {Node} node
+ * @return {Element}
+ */
+
+ renderNode = (node) => {
+ return NODES[node.type]
+ }
+
+ /**
+ * On change.
+ *
+ * @param {State} state
+ */
+
+ onChange = (state) => {
+ console.groupCollapsed('Change!')
+ console.log('Document:', state.document.toJS())
+ console.log('Selection:', state.selection.toJS())
+ console.log('Content:', Raw.serialize(state))
+ console.groupEnd()
+ this.setState({ state })
+ }
+
/**
* On key down, check for our specific key shortcuts.
*
@@ -99,7 +118,7 @@ class AutoMarkdown extends React.Component {
* @return {State or Null} state
*/
- onKeyDown(e, state) {
+ onKeyDown = (e, state) => {
const key = keycode(e.which)
switch (key) {
case 'space': return this.onSpace(e, state)
@@ -117,7 +136,7 @@ class AutoMarkdown extends React.Component {
* @return {State or Null} state
*/
- onSpace(e, state) {
+ onSpace = (e, state) => {
if (state.isExpanded) return
let { selection } = state
const { startText, startBlock, startOffset } = state
@@ -151,7 +170,7 @@ class AutoMarkdown extends React.Component {
* @return {State or Null} state
*/
- onBackspace(e, state) {
+ onBackspace = (e, state) => {
if (state.isExpanded) return
if (state.startOffset != 0) return
const { startBlock } = state
@@ -178,7 +197,7 @@ class AutoMarkdown extends React.Component {
* @return {State or Null} state
*/
- onEnter(e, state) {
+ onEnter = (e, state) => {
if (state.isExpanded) return
const { startBlock, startOffset, endOffset } = state
if (startOffset == 0 && startBlock.length == 0) return this.onBackspace(e, state)
diff --git a/examples/code-highlighting/index.js b/examples/code-highlighting/index.js
index 9c932fc77..165136d6a 100644
--- a/examples/code-highlighting/index.js
+++ b/examples/code-highlighting/index.js
@@ -3,7 +3,7 @@ import { Editor, Mark, Raw, Selection } from '../..'
import Prism from 'prismjs'
import React from 'react'
import keycode from 'keycode'
-import state from './state.json'
+import initialState from './state.json'
/**
* Node renderers.
@@ -43,10 +43,19 @@ const MARKS = {
class CodeHighlighting extends React.Component {
state = {
- state: Raw.deserialize(state)
+ state: Raw.deserialize(initialState)
};
- onKeyDown(e, state, editor) {
+ onChange = (state) => {
+ console.groupCollapsed('Change!')
+ console.log('Document:', state.document.toJS())
+ console.log('Selection:', state.selection.toJS())
+ console.log('Content:', Raw.serialize(state))
+ console.groupEnd()
+ this.setState({ state })
+ }
+
+ onKeyDown = (e, state, editor) => {
const key = keycode(e.which)
if (key != 'enter') return
const { startBlock } = state
@@ -59,29 +68,30 @@ class CodeHighlighting extends React.Component {
return transform.apply()
}
- render() {
+ render = () => {
return (
NODES[node.type]}
- renderMark={mark => MARKS[mark.type] || {}}
- renderDecorations={(...args) => this.renderDecorations(...args)}
- onKeyDown={(...args) => this.onKeyDown(...args)}
- onChange={(state) => {
- console.groupCollapsed('Change!')
- console.log('Document:', state.document.toJS())
- console.log('Selection:', state.selection.toJS())
- console.log('Content:', Raw.serialize(state))
- console.groupEnd()
- this.setState({ state })
- }}
+ renderNode={this.renderNode}
+ renderMark={this.renderMark}
+ renderDecorations={this.renderDecorations}
+ onKeyDown={this.onKeyDown}
+ onChange={this.onChange}
/>
)
}
- renderDecorations(text, state, editor) {
+ renderNode = (node) => {
+ return NODES[node.type]
+ }
+
+ renderMark = (mark) => {
+ return MARKS[mark.type] || {}
+ }
+
+ renderDecorations = (text, state, editor) => {
let characters = text.characters
const { document } = state
const block = document.getClosestBlock(text)
diff --git a/examples/hovering-menu/index.js b/examples/hovering-menu/index.js
index f83ea00fe..62c560bc8 100644
--- a/examples/hovering-menu/index.js
+++ b/examples/hovering-menu/index.js
@@ -3,7 +3,7 @@ import { Editor, Mark, Raw } from '../..'
import Portal from 'react-portal'
import React from 'react'
import position from 'selection-position'
-import state from './state.json'
+import initialState from './state.json'
/**
* Node renderers.
@@ -48,37 +48,74 @@ const MARKS = {
class HoveringMenu extends React.Component {
state = {
- state: Raw.deserialize(state)
+ state: Raw.deserialize(initialState)
};
- componentDidMount() {
+ componentDidMount = () => {
this.updateMenu()
}
- componentDidUpdate() {
+ componentDidUpdate = () => {
this.updateMenu()
}
- hasMark(type) {
+ render = () => {
+ return (
+
+ {this.renderMenu()}
+ {this.renderEditor()}
+
+ )
+ }
+
+ renderMenu = () => {
const { state } = this.state
- const { marks } = state
- return marks.some(mark => mark.type == type)
+ const isOpen = state.isExpanded && state.isFocused
+ return (
+
+
+ {this.renderMarkButton('bold', 'format_bold')}
+ {this.renderMarkButton('italic', 'format_italic')}
+ {this.renderMarkButton('underlined', 'format_underlined')}
+ {this.renderMarkButton('code', 'code')}
+
+
+ )
}
- onClickMark(e, type) {
- e.preventDefault()
+ renderMarkButton = (type, icon) => {
const isActive = this.hasMark(type)
- let { state } = this.state
+ const onMouseDown = e => this.onClickMark(e, type)
- state = state
- .transform()
- [isActive ? 'unmark' : 'mark'](type)
- .apply()
-
- this.setState({ state })
+ return (
+
+ {icon}
+
+ )
}
- updateMenu() {
+ renderEditor = () => {
+ return (
+
+
+
+ )
+ }
+
+ renderNode = (node) => {
+ return NODES[node.type]
+ }
+
+ renderMark = (mark) => {
+ return MARKS[mark.type]
+ }
+
+ updateMenu = () => {
const { menu, state } = this.state
if (!menu) return
@@ -93,61 +130,35 @@ class HoveringMenu extends React.Component {
menu.style.left = `${rect.left + window.scrollX - menu.offsetWidth / 2 + rect.width / 2}px`
}
- onOpen(el) {
- this.setState({ menu: el.firstChild })
- }
-
- render() {
- return (
-
- {this.renderMenu()}
- {this.renderEditor()}
-
- )
- }
-
- renderMenu() {
+ hasMark = (type) => {
const { state } = this.state
- const isOpen = state.isExpanded && state.isFocused
- return (
- this.onOpen(el)} >
-
- {this.renderMarkButton('bold', 'format_bold')}
- {this.renderMarkButton('italic', 'format_italic')}
- {this.renderMarkButton('underlined', 'format_underlined')}
- {this.renderMarkButton('code', 'code')}
-
-
- )
+ return state.marks.some(mark => mark.type == type)
}
- renderMarkButton(type, icon) {
+ onChange = (state) => {
+ console.groupCollapsed('Change!')
+ console.log('Document:', state.document.toJS())
+ console.log('Selection:', state.selection.toJS())
+ console.log('Content:', Raw.serialize(state))
+ console.groupEnd()
+ this.setState({ state })
+ }
+
+ onClickMark = (e, type) => {
+ e.preventDefault()
const isActive = this.hasMark(type)
- return (
- this.onClickMark(e, type)} data-active={isActive}>
- {icon}
-
- )
+ let { state } = this.state
+
+ state = state
+ .transform()
+ [isActive ? 'unmark' : 'mark'](type)
+ .apply()
+
+ this.setState({ state })
}
- renderEditor() {
- return (
-
- NODES[node.type]}
- renderMark={mark => MARKS[mark.type]}
- onChange={(state) => {
- console.groupCollapsed('Change!')
- console.log('Document:', state.document.toJS())
- console.log('Selection:', state.selection.toJS())
- console.log('Content:', Raw.serialize(state))
- console.groupEnd()
- this.setState({ state })
- }}
- />
-
- )
+ onOpen = (el) => {
+ this.setState({ menu: el.firstChild })
}
}
diff --git a/examples/images/index.js b/examples/images/index.js
index f9cfa5714..163d4a32a 100644
--- a/examples/images/index.js
+++ b/examples/images/index.js
@@ -2,7 +2,7 @@
import { Editor, Mark, Raw } from '../..'
import React from 'react'
import ReactDOM from 'react-dom'
-import state from './state.json'
+import initialState from './state.json'
import { Map } from 'immutable'
/**
@@ -31,16 +31,104 @@ const NODES = {
class Images extends React.Component {
state = {
- state: Raw.deserialize(state)
+ state: Raw.deserialize(initialState)
};
+ /**
+ * Render the app.
+ *
+ * @return {Element} element
+ */
+
+ render = () => {
+ return (
+
+ {this.renderToolbar()}
+ {this.renderEditor()}
+
+ )
+ }
+
+ /**
+ * Render the toolbar.
+ *
+ * @return {Element} element
+ */
+
+ renderToolbar = () => {
+ return (
+
+
+ image
+
+
+ )
+ }
+
+ /**
+ * Render the editor.
+ *
+ * @return {Element} element
+ */
+
+ renderEditor = () => {
+ return (
+
+
+
+ )
+ }
+
+ /**
+ * Render a `node`.
+ *
+ * @param {Node} node
+ * @return {Element}
+ */
+
+ renderNode = (node) => {
+ return NODES[node.type]
+ }
+
+ /**
+ * On change.
+ *
+ * @param {State} state
+ */
+
+ onChange = (state) => {
+ console.groupCollapsed('Change!')
+ console.log('Document:', state.document.toJS())
+ console.log('Selection:', state.selection.toJS())
+ console.log('Content:', Raw.serialize(state))
+ console.groupEnd()
+ this.setState({ state })
+ }
+
+ /**
+ * On clicking the image button, prompt for an image and insert it.
+ *
+ * @param {Event} e
+ */
+
+ onClickImage = (e) => {
+ e.preventDefault()
+ const src = window.prompt('Enter the URL of the image:')
+ if (!src) return
+ this.insertImage(src)
+ }
+
/**
* Insert an image with `src` at the current selection.
*
* @param {String} src
*/
- insertImage(src) {
+ insertImage = (src) => {
let { state } = this.state
if (state.isExpanded) {
@@ -74,75 +162,6 @@ class Images extends React.Component {
this.setState({ state })
}
- /**
- * On clicking the image button, prompt for an image and insert it.
- *
- * @param {Event} e
- */
-
- onClickImage(e) {
- e.preventDefault()
- const src = window.prompt('Enter the URL of the image:')
- if (!src) return
- this.insertImage(src)
- }
-
- /**
- * Render the app.
- *
- * @return {Element} element
- */
-
- render() {
- return (
-
- {this.renderToolbar()}
- {this.renderEditor()}
-
- )
- }
-
- /**
- * Render the toolbar.
- *
- * @return {Element} element
- */
-
- renderToolbar() {
- return (
-
- this.onClickImage(e)}>
- image
-
-
- )
- }
-
- /**
- * Render the editor.
- *
- * @return {Element} element
- */
-
- renderEditor() {
- return (
-
- NODES[node.type]}
- onChange={(state) => {
- console.groupCollapsed('Change!')
- console.log('Document:', state.document.toJS())
- console.log('Selection:', state.selection.toJS())
- console.log('Content:', Raw.serialize(state))
- console.groupEnd()
- this.setState({ state })
- }}
- />
-
- )
- }
-
}
/**
diff --git a/examples/links/index.js b/examples/links/index.js
index 2416fd3c4..3eb96b434 100644
--- a/examples/links/index.js
+++ b/examples/links/index.js
@@ -2,7 +2,7 @@
import { Editor, Mark, Raw } from '../..'
import React from 'react'
import ReactDOM from 'react-dom'
-import state from './state.json'
+import initialState from './state.json'
import { Map } from 'immutable'
/**
@@ -29,7 +29,7 @@ const NODES = {
class Links extends React.Component {
state = {
- state: Raw.deserialize(state)
+ state: Raw.deserialize(initialState)
};
/**
@@ -38,10 +38,9 @@ class Links extends React.Component {
* @return {Boolean} hasLinks
*/
- hasLinks() {
+ hasLinks = () => {
const { state } = this.state
- const { inlines } = state
- return inlines.some(inline => inline.type == 'link')
+ return state.inlines.some(inline => inline.type == 'link')
}
/**
@@ -51,7 +50,7 @@ class Links extends React.Component {
* @param {Event} e
*/
- onClickLink(e) {
+ onClickLink = (e) => {
e.preventDefault()
let { state } = this.state
const hasLinks = this.hasLinks()
@@ -92,7 +91,7 @@ class Links extends React.Component {
* @return {Element} element
*/
- render() {
+ render = () => {
return (
{this.renderToolbar()}
@@ -107,11 +106,11 @@ class Links extends React.Component {
* @return {Element} element
*/
- renderToolbar() {
+ renderToolbar = () => {
const hasLinks = this.hasLinks()
return (
- this.onClickLink(e)} data-active={hasLinks}>
+
link
@@ -124,25 +123,44 @@ class Links extends React.Component {
* @return {Element} element
*/
- renderEditor() {
+ renderEditor = () => {
return (
NODES[node.type]}
- onChange={(state) => {
- console.groupCollapsed('Change!')
- console.log('Document:', state.document.toJS())
- console.log('Selection:', state.selection.toJS())
- console.log('Content:', Raw.serialize(state))
- console.groupEnd()
- this.setState({ state })
- }}
+ renderNode={this.renderNode}
+ onChange={this.onChange}
/>
)
}
+ /**
+ * Render a `node`.
+ *
+ * @param {Node} node
+ * @return {Element}
+ */
+
+ renderNode = (node) => {
+ return NODES[node.type]
+ }
+
+ /**
+ * On change.
+ *
+ * @param {State} state
+ */
+
+ onChange = (state) => {
+ console.groupCollapsed('Change!')
+ console.log('Document:', state.document.toJS())
+ console.log('Selection:', state.selection.toJS())
+ console.log('Content:', Raw.serialize(state))
+ console.groupEnd()
+ this.setState({ state })
+ }
+
}
/**
diff --git a/examples/paste-html/index.js b/examples/paste-html/index.js
index 9e4e99447..ff1449105 100644
--- a/examples/paste-html/index.js
+++ b/examples/paste-html/index.js
@@ -1,7 +1,7 @@
import { Editor, Html, Raw } from '../..'
import React from 'react'
-import state from './state.json'
+import initialState from './state.json'
/**
* Node renderers.
@@ -166,10 +166,41 @@ const serializer = new Html(RULES)
class PasteHtml extends React.Component {
state = {
- state: Raw.deserialize(state)
+ state: Raw.deserialize(initialState)
};
- onPaste(e, paste, state, editor) {
+ render = () => {
+ return (
+
+
+
+ )
+ }
+
+ renderNode = (node) => {
+ return NODES[node.type]
+ }
+
+ renderMark = (mark) => {
+ return MARKS[mark.type]
+ }
+
+ onChange = (state) => {
+ console.groupCollapsed('Change!')
+ console.log('Document:', state.document.toJS())
+ console.log('Selection:', state.selection.toJS())
+ console.log('Content:', Raw.serialize(state))
+ console.groupEnd()
+ this.setState({ state })
+ }
+
+ onPaste = (e, paste, state, editor) => {
if (paste.type != 'html') return
const { html } = paste
const { document } = serializer.deserialize(html)
@@ -180,27 +211,6 @@ class PasteHtml extends React.Component {
.apply()
}
- render() {
- return (
-
- NODES[node.type]}
- renderMark={mark => MARKS[mark.type]}
- onPaste={(...args) => this.onPaste(...args)}
- onChange={(state) => {
- console.groupCollapsed('Change!')
- console.log('Document:', state.document.toJS())
- console.log('Selection:', state.selection.toJS())
- console.log('Content:', Raw.serialize(state))
- console.groupEnd()
- this.setState({ state })
- }}
- />
-
- )
- }
-
}
/**
diff --git a/examples/plain-text/index.js b/examples/plain-text/index.js
index 982a5b449..e01371877 100644
--- a/examples/plain-text/index.js
+++ b/examples/plain-text/index.js
@@ -1,7 +1,7 @@
import { Block, Character, Document, Editor, State, Text } from '../..'
import React from 'react'
-import state from './state.json'
+import initialState from './state.json'
/**
* A helper to deserialize a string into an editor state.
@@ -54,7 +54,7 @@ class PlainText extends React.Component {
*/
state = {
- state: deserialize(state)
+ state: deserialize(initialState)
};
/**
@@ -63,22 +63,30 @@ class PlainText extends React.Component {
* @return {Component} component
*/
- render() {
+ render = () => {
return (
{
- console.groupCollapsed('Change!')
- console.log('Document:', state.document.toJS())
- console.log('Selection:', state.selection.toJS())
- console.log('Content:', serialize(state))
- console.groupEnd()
- this.setState({ state })
- }}
+ onChange={this.onChange}
/>
)
}
+ /**
+ * On change.
+ *
+ * @param {State} state
+ */
+
+ onChange = (state) => {
+ console.groupCollapsed('Change!')
+ console.log('Document:', state.document.toJS())
+ console.log('Selection:', state.selection.toJS())
+ console.log('Content:', serialize(state))
+ console.groupEnd()
+ this.setState({ state })
+ }
+
}
/**
diff --git a/examples/rich-text/index.js b/examples/rich-text/index.js
index 62b36a4c8..878118efa 100644
--- a/examples/rich-text/index.js
+++ b/examples/rich-text/index.js
@@ -1,7 +1,7 @@
import { Editor, Mark, Raw } from '../..'
import React from 'react'
-import state from './state.json'
+import initialState from './state.json'
/**
* Node renderers.
@@ -52,22 +52,20 @@ const MARKS = {
class RichText extends React.Component {
state = {
- state: Raw.deserialize(state)
+ state: Raw.deserialize(initialState)
};
- hasMark(type) {
+ hasMark = (type) => {
const { state } = this.state
- const { marks } = state
- return marks.some(mark => mark.type == type)
+ return state.marks.some(mark => mark.type == type)
}
- hasBlock(type) {
+ hasBlock = (type) => {
const { state } = this.state
- const { blocks } = state
- return blocks.some(node => node.type == type)
+ return state.blocks.some(node => node.type == type)
}
- onClickMark(e, type) {
+ onClickMark = (e, type) => {
e.preventDefault()
const isActive = this.hasMark(type)
let { state } = this.state
@@ -80,7 +78,7 @@ class RichText extends React.Component {
this.setState({ state })
}
- onClickBlock(e, type) {
+ onClickBlock = (e, type) => {
e.preventDefault()
const isActive = this.hasBlock(type)
let { state } = this.state
@@ -93,7 +91,7 @@ class RichText extends React.Component {
this.setState({ state })
}
- render() {
+ render = () => {
return (
{this.renderToolbar()}
@@ -102,7 +100,7 @@ class RichText extends React.Component {
)
}
- renderToolbar() {
+ renderToolbar = () => {
return (
{this.renderMarkButton('bold', 'format_bold')}
@@ -118,43 +116,58 @@ class RichText extends React.Component {
)
}
- renderMarkButton(type, icon) {
+ renderMarkButton = (type, icon) => {
const isActive = this.hasMark(type)
+ const onMouseDown = e => this.onClickMark(e, type)
+
return (
-
this.onClickMark(e, type)} data-active={isActive}>
+
{icon}
)
}
- renderBlockButton(type, icon) {
+ renderBlockButton = (type, icon) => {
const isActive = this.hasBlock(type)
+ const onMouseDown = e => this.onClickBlock(e, type)
+
return (
- this.onClickBlock(e, type)} data-active={isActive}>
+
{icon}
)
}
- renderEditor() {
+ renderEditor = () => {
return (
NODES[node.type]}
- renderMark={mark => MARKS[mark.type]}
- onChange={(state) => {
- console.groupCollapsed('Change!')
- console.log('Document:', state.document.toJS())
- console.log('Selection:', state.selection.toJS())
- console.log('Content:', Raw.serialize(state))
- console.groupEnd()
- this.setState({ state })
- }}
+ renderNode={this.renderNode}
+ renderMark={this.renderMark}
+ onChange={this.onChange}
/>
)
}
+
+ renderNode = (node) => {
+ return NODES[node.type]
+ }
+
+ renderMark = (mark) => {
+ return MARKS[mark.type]
+ }
+
+ onChange = (state) => {
+ console.groupCollapsed('Change!')
+ console.log('Document:', state.document.toJS())
+ console.log('Selection:', state.selection.toJS())
+ console.log('Content:', Raw.serialize(state))
+ console.groupEnd()
+ this.setState({ state })
+ }
+
}
/**
diff --git a/examples/tables/index.js b/examples/tables/index.js
index 0c16a2e33..998efdb5b 100644
--- a/examples/tables/index.js
+++ b/examples/tables/index.js
@@ -1,8 +1,8 @@
import { Editor, Raw } from '../..'
import React from 'react'
+import initialState from './state.json'
import keycode from 'keycode'
-import state from './state.json'
/**
* Node renderers.
@@ -44,7 +44,7 @@ class Tables extends React.Component {
*/
state = {
- state: Raw.deserialize(state)
+ state: Raw.deserialize(initialState)
};
/**
@@ -53,27 +53,57 @@ class Tables extends React.Component {
* @return {Component} component
*/
- render() {
+ render = () => {
return (
NODES[node.type]}
- renderMark={mark => MARKS[mark.type]}
- onKeyDown={(e, state) => this.onKeyDown(e, state)}
- onChange={(state) => {
- console.groupCollapsed('Change!')
- console.log('Document:', state.document.toJS())
- console.log('Selection:', state.selection.toJS())
- console.log('Content:', Raw.serialize(state))
- console.groupEnd()
- this.setState({ state })
- }}
+ renderNode={this.renderNode}
+ renderMark={this.renderMark}
+ onKeyDown={this.onKeyDown}
+ onChange={this.onChange}
/>
)
}
+ /**
+ * Render a `node`.
+ *
+ * @param {Node} node
+ * @return {Element}
+ */
+
+ renderNode = (node) => {
+ return NODES[node.type]
+ }
+
+ /**
+ * Render a `mark`.
+ *
+ * @param {Mark} mark
+ * @return {Element}
+ */
+
+ renderMark = (mark) => {
+ return MARKS[mark.type]
+ }
+
+ /**
+ * On change.
+ *
+ * @param {State} state
+ */
+
+ onChange = (state) => {
+ console.groupCollapsed('Change!')
+ console.log('Document:', state.document.toJS())
+ console.log('Selection:', state.selection.toJS())
+ console.log('Content:', Raw.serialize(state))
+ console.groupEnd()
+ this.setState({ state })
+ }
+
/**
* On key down, check for our specific key shortcuts.
*
@@ -82,11 +112,9 @@ class Tables extends React.Component {
* @return {State or Null} state
*/
- onKeyDown(e, state) {
+ onKeyDown = (e, state) => {
if (state.startBlock.type != 'table-cell') return
-
- const key = keycode(e.which)
- switch (key) {
+ switch (keycode(e.which)) {
case 'backspace': return this.onBackspace(e, state)
case 'delete': return this.onDelete(e, state)
case 'enter': return this.onEnter(e, state)
@@ -101,7 +129,7 @@ class Tables extends React.Component {
* @return {State or Null} state
*/
- onBackspace(e, state) {
+ onBackspace = (e, state) => {
if (state.startOffset != 0) return
e.preventDefault()
return state
@@ -115,7 +143,7 @@ class Tables extends React.Component {
* @return {State or Null} state
*/
- onDelete(e, state) {
+ onDelete = (e, state) => {
if (state.endOffset != state.startText.length) return
e.preventDefault()
return state
@@ -129,7 +157,7 @@ class Tables extends React.Component {
* @return {State or Null} state
*/
- onEnter(e, state) {
+ onEnter = (e, state) => {
e.preventDefault()
return state
}
diff --git a/package.json b/package.json
index 89a42df6b..6291d7df2 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
"main": "./dist/index.js",
"scripts": {
"prepublish": "make dist",
- "test": "make test"
+ "test": "make check"
},
"dependencies": {
"cheerio": "^0.20.0",