Skip to content

Commit ab12518

Browse files
ianstormtaylorianstormtaylor
committedJul 13, 2016
clean up examples
·
v0.6.60.1.8
1 parent 9793b11 commit ab12518

File tree

8 files changed

+279
-107
lines changed

8 files changed

+279
-107
lines changed
 

‎examples/auto-markdown/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import keycode from 'keycode'
55
import initialState from './state.json'
66

77
/**
8-
* Node renderers.
8+
* Define a set of node renderers.
99
*
1010
* @type {Object}
1111
*/

‎examples/code-highlighting/index.js

+52-5
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import keycode from 'keycode'
66
import initialState from './state.json'
77

88
/**
9-
* Node renderers.
9+
* Define a set of node renderers.
1010
*
1111
* @type {Object}
1212
*/
@@ -16,7 +16,7 @@ const NODES = {
1616
}
1717

1818
/**
19-
* Mark renderers.
19+
* Define a set of mark renderers.
2020
*
2121
* @type {Object}
2222
*/
@@ -34,22 +34,42 @@ const MARKS = {
3434
}
3535

3636
/**
37-
* Example.
37+
* The code highlighting example.
3838
*
3939
* @type {Component}
4040
*/
4141

4242
class CodeHighlighting extends React.Component {
4343

44+
/**
45+
* Deserialize the raw initial state.
46+
*
47+
* @type {Object}
48+
*/
49+
4450
state = {
4551
state: Raw.deserialize(initialState)
4652
};
4753

54+
/**
55+
* On change, save the new state.
56+
*
57+
* @param {State} state
58+
*/
59+
4860
onChange = (state) => {
4961
this.setState({ state })
5062
}
5163

52-
onKeyDown = (e, state, editor) => {
64+
/**
65+
* On key down inside code blocks, insert soft new lines.
66+
*
67+
* @param {Event} e
68+
* @param {State} state
69+
* @return {State}
70+
*/
71+
72+
onKeyDown = (e, state) => {
5373
const key = keycode(e.which)
5474
if (key != 'enter') return
5575
const { startBlock } = state
@@ -62,6 +82,12 @@ class CodeHighlighting extends React.Component {
6282
return transform.apply()
6383
}
6484

85+
/**
86+
* Render.
87+
*
88+
* @return {Component}
89+
*/
90+
6591
render = () => {
6692
return (
6793
<div className="editor">
@@ -77,15 +103,36 @@ class CodeHighlighting extends React.Component {
77103
)
78104
}
79105

106+
/**
107+
* Return a node renderer for a Slate `node`.
108+
*
109+
* @param {Node} node
110+
* @return {Component or Void}
111+
*/
112+
80113
renderNode = (node) => {
81114
return NODES[node.type]
82115
}
83116

117+
/**
118+
* Return a mark renderer for a Slate `mark`.
119+
*
120+
* @param {Mark} mark
121+
* @return {Object or Void}
122+
*/
123+
84124
renderMark = (mark) => {
85125
return MARKS[mark.type] || {}
86126
}
87127

88-
renderDecorations = (text, state, editor) => {
128+
/**
129+
* Render decorations on `text` nodes inside code blocks.
130+
*
131+
* @param {Text} text
132+
* @return {Characters}
133+
*/
134+
135+
renderDecorations = (text, state) => {
89136
const { document } = state
90137
const block = document.getClosestBlock(text)
91138
if (block.type != 'code') return text.characters

‎examples/hovering-menu/index.js

+101-28
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import position from 'selection-position'
66
import initialState from './state.json'
77

88
/**
9-
* Mark renderers.
9+
* Define a set of mark renderers.
1010
*
1111
* @type {Object}
1212
*/
@@ -30,17 +30,27 @@ const MARKS = {
3030
}
3131

3232
/**
33-
* The rich text example.
33+
* The hovering menu example.
3434
*
3535
* @type {Component}
3636
*/
3737

3838
class HoveringMenu extends React.Component {
3939

40+
/**
41+
* Deserialize the raw initial state.
42+
*
43+
* @type {Object}
44+
*/
45+
4046
state = {
4147
state: Raw.deserialize(initialState)
4248
};
4349

50+
/**
51+
* On update, update the menu.
52+
*/
53+
4454
componentDidMount = () => {
4555
this.updateMenu()
4656
}
@@ -49,6 +59,64 @@ class HoveringMenu extends React.Component {
4959
this.updateMenu()
5060
}
5161

62+
/**
63+
* Check if the current selection has a mark with `type` in it.
64+
*
65+
* @param {String} type
66+
* @return {Boolean}
67+
*/
68+
69+
hasMark = (type) => {
70+
const { state } = this.state
71+
return state.marks.some(mark => mark.type == type)
72+
}
73+
74+
/**
75+
* On change, save the new state.
76+
*
77+
* @param {State} state
78+
*/
79+
80+
onChange = (state) => {
81+
this.setState({ state })
82+
}
83+
84+
/**
85+
* When a mark button is clicked, toggle the current mark.
86+
*
87+
* @param {Event} e
88+
* @param {String} type
89+
*/
90+
91+
onClickMark = (e, type) => {
92+
e.preventDefault()
93+
const isActive = this.hasMark(type)
94+
let { state } = this.state
95+
96+
state = state
97+
.transform()
98+
[isActive ? 'unmark' : 'mark'](type)
99+
.apply()
100+
101+
this.setState({ state })
102+
}
103+
104+
/**
105+
* When the portal opens, cache the menu element.
106+
*
107+
* @param {Element} portal
108+
*/
109+
110+
onOpen = (portal) => {
111+
this.setState({ menu: portal.firstChild })
112+
}
113+
114+
/**
115+
* Render.
116+
*
117+
* @return {Element}
118+
*/
119+
52120
render = () => {
53121
return (
54122
<div>
@@ -58,6 +126,12 @@ class HoveringMenu extends React.Component {
58126
)
59127
}
60128

129+
/**
130+
* Render the hovering menu.
131+
*
132+
* @return {Element}
133+
*/
134+
61135
renderMenu = () => {
62136
const { state } = this.state
63137
const isOpen = state.isExpanded && state.isFocused
@@ -73,6 +147,14 @@ class HoveringMenu extends React.Component {
73147
)
74148
}
75149

150+
/**
151+
* Render a mark-toggling toolbar button.
152+
*
153+
* @param {String} type
154+
* @param {String} icon
155+
* @return {Element}
156+
*/
157+
76158
renderMarkButton = (type, icon) => {
77159
const isActive = this.hasMark(type)
78160
const onMouseDown = e => this.onClickMark(e, type)
@@ -84,6 +166,12 @@ class HoveringMenu extends React.Component {
84166
)
85167
}
86168

169+
/**
170+
* Render the Slate editor.
171+
*
172+
* @return {Element}
173+
*/
174+
87175
renderEditor = () => {
88176
return (
89177
<div className="editor">
@@ -96,10 +184,21 @@ class HoveringMenu extends React.Component {
96184
)
97185
}
98186

187+
/**
188+
* Return a mark renderer for a Slate `mark`.
189+
*
190+
* @param {Mark} mark
191+
* @return {Object or Void}
192+
*/
193+
99194
renderMark = (mark) => {
100195
return MARKS[mark.type]
101196
}
102197

198+
/**
199+
* Update the menu's absolute position.
200+
*/
201+
103202
updateMenu = () => {
104203
const { menu, state } = this.state
105204
if (!menu) return
@@ -115,32 +214,6 @@ class HoveringMenu extends React.Component {
115214
menu.style.left = `${rect.left + window.scrollX - menu.offsetWidth / 2 + rect.width / 2}px`
116215
}
117216

118-
hasMark = (type) => {
119-
const { state } = this.state
120-
return state.marks.some(mark => mark.type == type)
121-
}
122-
123-
onChange = (state) => {
124-
this.setState({ state })
125-
}
126-
127-
onClickMark = (e, type) => {
128-
e.preventDefault()
129-
const isActive = this.hasMark(type)
130-
let { state } = this.state
131-
132-
state = state
133-
.transform()
134-
[isActive ? 'unmark' : 'mark'](type)
135-
.apply()
136-
137-
this.setState({ state })
138-
}
139-
140-
onOpen = (el) => {
141-
this.setState({ menu: el.firstChild })
142-
}
143-
144217
}
145218

146219
/**

‎examples/images/index.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import initialState from './state.json'
66
import { Map } from 'immutable'
77

88
/**
9-
* Node renderers.
9+
* Define a set of node renderers.
1010
*
1111
* @type {Object}
1212
*/
@@ -29,6 +29,12 @@ const NODES = {
2929

3030
class Images extends React.Component {
3131

32+
/**
33+
* Deserialize the raw initial state.
34+
*
35+
* @type {Object}
36+
*/
37+
3238
state = {
3339
state: Raw.deserialize(initialState)
3440
};

‎examples/links/index.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import initialState from './state.json'
66
import { Map } from 'immutable'
77

88
/**
9-
* Node renderers.
9+
* Define a set of node renderers.
1010
*
1111
* @type {Object}
1212
*/
@@ -28,6 +28,12 @@ const NODES = {
2828

2929
class Links extends React.Component {
3030

31+
/**
32+
* Deserialize the raw initial state.
33+
*
34+
* @type {Object}
35+
*/
36+
3137
state = {
3238
state: Raw.deserialize(initialState)
3339
};

0 commit comments

Comments
 (0)