@pie-lib/editable-html 9.2.6-next.2 → 9.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (90) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/lib/editor.js.map +1 -1
  3. package/lib/index.js.map +1 -1
  4. package/lib/parse-html.js.map +1 -1
  5. package/lib/plugins/characters/custom-popper.js.map +1 -1
  6. package/lib/plugins/characters/index.js.map +1 -1
  7. package/lib/plugins/characters/utils.js.map +1 -1
  8. package/lib/plugins/image/alt-dialog.js.map +1 -1
  9. package/lib/plugins/image/component.js.map +1 -1
  10. package/lib/plugins/image/image-toolbar.js.map +1 -1
  11. package/lib/plugins/image/index.js.map +1 -1
  12. package/lib/plugins/index.js.map +1 -1
  13. package/lib/plugins/list/index.js.map +1 -1
  14. package/lib/plugins/math/index.js +1 -1
  15. package/lib/plugins/math/index.js.map +1 -1
  16. package/lib/plugins/media/index.js.map +1 -1
  17. package/lib/plugins/media/media-dialog.js.map +1 -1
  18. package/lib/plugins/media/media-toolbar.js.map +1 -1
  19. package/lib/plugins/media/media-wrapper.js.map +1 -1
  20. package/lib/plugins/respArea/drag-in-the-blank/choice.js.map +1 -1
  21. package/lib/plugins/respArea/drag-in-the-blank/index.js.map +1 -1
  22. package/lib/plugins/respArea/explicit-constructed-response/index.js.map +1 -1
  23. package/lib/plugins/respArea/icons/index.js.map +1 -1
  24. package/lib/plugins/respArea/index.js.map +1 -1
  25. package/lib/plugins/respArea/inline-dropdown/index.js.map +1 -1
  26. package/lib/plugins/respArea/utils.js.map +1 -1
  27. package/lib/plugins/table/icons/index.js.map +1 -1
  28. package/lib/plugins/table/index.js.map +1 -1
  29. package/lib/plugins/table/table-toolbar.js.map +1 -1
  30. package/lib/plugins/toolbar/default-toolbar.js.map +1 -1
  31. package/lib/plugins/toolbar/done-button.js.map +1 -1
  32. package/lib/plugins/toolbar/editor-and-toolbar.js.map +1 -1
  33. package/lib/plugins/toolbar/index.js.map +1 -1
  34. package/lib/plugins/toolbar/toolbar-buttons.js.map +1 -1
  35. package/lib/plugins/toolbar/toolbar.js.map +1 -1
  36. package/lib/plugins/utils.js.map +1 -1
  37. package/lib/serialization.js.map +1 -1
  38. package/package.json +6 -6
  39. package/playground/image/data.js +20 -20
  40. package/playground/image/index.html +20 -22
  41. package/playground/image/index.jsx +7 -12
  42. package/playground/index.html +23 -25
  43. package/playground/mathquill/index.html +20 -23
  44. package/playground/mathquill/index.jsx +7 -18
  45. package/playground/prod-test/index.html +20 -24
  46. package/playground/prod-test/index.jsx +2 -5
  47. package/playground/schema-override/data.js +10 -10
  48. package/playground/schema-override/image-plugin.jsx +3 -3
  49. package/playground/schema-override/index.html +19 -21
  50. package/playground/schema-override/index.jsx +12 -12
  51. package/playground/serialization/data.js +10 -10
  52. package/playground/serialization/image-plugin.jsx +3 -3
  53. package/playground/serialization/index.html +20 -22
  54. package/playground/table-examples.html +8 -5
  55. package/playground/webpack.config.js +10 -10
  56. package/src/editor.jsx +77 -101
  57. package/src/index.jsx +11 -18
  58. package/src/parse-html.js +1 -1
  59. package/src/plugins/characters/custom-popper.js +7 -7
  60. package/src/plugins/characters/index.jsx +19 -25
  61. package/src/plugins/characters/utils.js +81 -81
  62. package/src/plugins/image/alt-dialog.jsx +3 -3
  63. package/src/plugins/image/component.jsx +42 -46
  64. package/src/plugins/image/image-toolbar.jsx +14 -26
  65. package/src/plugins/image/index.jsx +21 -23
  66. package/src/plugins/index.jsx +10 -12
  67. package/src/plugins/list/index.jsx +10 -10
  68. package/src/plugins/math/index.jsx +28 -31
  69. package/src/plugins/media/index.jsx +21 -21
  70. package/src/plugins/media/media-dialog.js +60 -86
  71. package/src/plugins/media/media-toolbar.jsx +6 -6
  72. package/src/plugins/media/media-wrapper.jsx +6 -6
  73. package/src/plugins/respArea/drag-in-the-blank/choice.jsx +19 -21
  74. package/src/plugins/respArea/drag-in-the-blank/index.jsx +10 -12
  75. package/src/plugins/respArea/explicit-constructed-response/index.jsx +5 -5
  76. package/src/plugins/respArea/icons/index.jsx +8 -8
  77. package/src/plugins/respArea/index.jsx +21 -31
  78. package/src/plugins/respArea/inline-dropdown/index.jsx +6 -6
  79. package/src/plugins/respArea/utils.jsx +12 -12
  80. package/src/plugins/table/icons/index.jsx +11 -17
  81. package/src/plugins/table/index.jsx +43 -49
  82. package/src/plugins/table/table-toolbar.jsx +8 -13
  83. package/src/plugins/toolbar/default-toolbar.jsx +11 -19
  84. package/src/plugins/toolbar/done-button.jsx +4 -4
  85. package/src/plugins/toolbar/editor-and-toolbar.jsx +39 -47
  86. package/src/plugins/toolbar/index.jsx +2 -2
  87. package/src/plugins/toolbar/toolbar-buttons.jsx +11 -11
  88. package/src/plugins/toolbar/toolbar.jsx +34 -47
  89. package/src/plugins/utils.js +4 -5
  90. package/src/serialization.jsx +32 -32
package/playground/serialization/index.html CHANGED
@@ -1,24 +1,22 @@
1
- <!doctype html>
1
+ <!DOCTYPE html>
2
2
  <html>
3
+ <head>
4
+ <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
5
+ <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
6
+ <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom-server.browser.production.min.js"></script>
7
+ <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
8
+ <style>
9
+ body,
10
+ span,
11
+ div,
12
+ p {
13
+ font-family: 'Roboto', sans-serif;
14
+ }
15
+ </style>
16
+ <script src="bundle.js" type="text/javascript"></script>
17
+ </head>
3
18
 
4
- <head>
5
- <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
6
- <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
7
- <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom-server.browser.production.min.js"></script>
8
- <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
9
- <style>
10
- body,
11
- span,
12
- div,
13
- p {
14
- font-family: 'Roboto', sans-serif;
15
- }
16
- </style>
17
- <script src="bundle.js" type="text/javascript"></script>
18
- </head>
19
-
20
- <body>
21
- <div id="app"></div>
22
- </body>
23
-
24
- </html>
19
+ <body>
20
+ <div id="app"></div>
21
+ </body>
22
+ </html>
package/playground/table-examples.html CHANGED
@@ -4,10 +4,12 @@
4
4
  <th class="tabpadding" colspan="2">Selena's Input/Output Table</th>
5
5
  </tr>
6
6
  <tr>
7
- <th class="tabpadding">time in minutes since beginning of train ride (
8
- <span class="mf-mc-pml-pie">$x$</span>)</th>
9
- <th class="tabpadding">distance in miles between Selena's and her grandmother's house (
10
- <span class="mf-mc-pml-pie">$y$</span>)</th>
7
+ <th class="tabpadding">
8
+ time in minutes since beginning of train ride ( <span class="mf-mc-pml-pie">$x$</span>)
9
+ </th>
10
+ <th class="tabpadding">
11
+ distance in miles between Selena's and her grandmother's house ( <span class="mf-mc-pml-pie">$y$</span>)
12
+ </th>
11
13
  </tr>
12
14
  <tr>
13
15
  <td class="numbersCenter">5</td>
@@ -58,10 +60,11 @@
58
60
  <td>foo</td>
59
61
  </tr>
60
62
  </table>
63
+
61
64
  <table>
62
65
  <tbody>
63
66
  <tr>
64
67
  <td>foo</td>
65
68
  </tr>
66
69
  </tbody>
67
- </table>
70
+ </table>
package/playground/webpack.config.js CHANGED
@@ -9,34 +9,34 @@ module.exports = {
9
9
  'schema-override': './schema-override/index.jsx',
10
10
  'prod-test': './prod-test/index.jsx',
11
11
  mathquill: './mathquill/index.jsx',
12
- serialization: './serialization/index.jsx'
12
+ serialization: './serialization/index.jsx',
13
13
  },
14
14
  output: {
15
15
  filename: '[name]/bundle.js',
16
- path: __dirname
16
+ path: __dirname,
17
17
  },
18
18
  module: {
19
19
  rules: [
20
20
  {
21
21
  test: /\.css$/,
22
- loader: 'url-loader'
22
+ loader: 'url-loader',
23
23
  },
24
24
  {
25
25
  test: /\.jsx$/,
26
26
  loader: 'babel-loader',
27
27
  options: {
28
28
  babelrc: false,
29
- presets: ['react', 'env', 'stage-0']
30
- }
31
- }
32
- ]
29
+ presets: ['react', 'env', 'stage-0'],
30
+ },
31
+ },
32
+ ],
33
33
  },
34
34
  resolve: {
35
- extensions: ['.js', '.jsx']
35
+ extensions: ['.js', '.jsx'],
36
36
  },
37
37
  externals: {
38
38
  react: 'React',
39
39
  'react-dom': 'ReactDOM',
40
- 'react-dom/server': 'ReactDOMServer'
41
- }
40
+ 'react-dom/server': 'ReactDOMServer',
41
+ },
42
42
  };
package/src/editor.jsx CHANGED
@@ -25,21 +25,21 @@ const defaultToolbarOpts = {
25
25
  alignment: 'left',
26
26
  alwaysVisible: false,
27
27
  showDone: true,
28
- doneOn: 'blur'
28
+ doneOn: 'blur',
29
29
  };
30
30
 
31
31
  const defaultResponseAreaProps = {
32
32
  options: {},
33
33
  respAreaToolbar: () => {},
34
- onHandleAreaChange: () => {}
34
+ onHandleAreaChange: () => {},
35
35
  };
36
36
 
37
37
  const defaultLanguageCharactersProps = [];
38
38
 
39
- const createToolbarOpts = toolbarOpts => {
39
+ const createToolbarOpts = (toolbarOpts) => {
40
40
  return {
41
41
  ...defaultToolbarOpts,
42
- ...toolbarOpts
42
+ ...toolbarOpts,
43
43
  };
44
44
  };
45
45
 
@@ -58,7 +58,7 @@ export class Editor extends React.Component {
58
58
  disableImageAlignmentButtons: PropTypes.bool,
59
59
  uploadSoundSupport: PropTypes.shape({
60
60
  add: PropTypes.func,
61
- delete: PropTypes.func
61
+ delete: PropTypes.func,
62
62
  }),
63
63
  charactersLimit: PropTypes.number,
64
64
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -76,40 +76,33 @@ export class Editor extends React.Component {
76
76
  pluginProps: PropTypes.any,
77
77
  placeholder: PropTypes.string,
78
78
  responseAreaProps: PropTypes.shape({
79
- type: PropTypes.oneOf([
80
- 'explicit-constructed-response',
81
- 'inline-dropdown',
82
- 'drag-in-the-blank'
83
- ]),
79
+ type: PropTypes.oneOf(['explicit-constructed-response', 'inline-dropdown', 'drag-in-the-blank']),
84
80
  options: PropTypes.object,
85
81
  respAreaToolbar: PropTypes.func,
86
- onHandleAreaChange: PropTypes.func
82
+ onHandleAreaChange: PropTypes.func,
87
83
  }),
88
84
  languageCharactersProps: PropTypes.arrayOf(
89
85
  PropTypes.shape({
90
86
  language: PropTypes.string,
91
87
  characterIcon: PropTypes.string,
92
- characters: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))
93
- })
88
+ characters: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
89
+ }),
94
90
  ),
95
91
  toolbarOpts: PropTypes.shape({
96
92
  position: PropTypes.oneOf(['bottom', 'top']),
97
93
  alignment: PropTypes.oneOf(['left', 'right']),
98
94
  alwaysVisible: PropTypes.bool,
99
95
  showDone: PropTypes.bool,
100
- doneOn: PropTypes.string
96
+ doneOn: PropTypes.string,
101
97
  }),
102
- activePlugins: PropTypes.arrayOf(values => {
103
- const allValid = values.every(v => ALL_PLUGINS.includes(v));
98
+ activePlugins: PropTypes.arrayOf((values) => {
99
+ const allValid = values.every((v) => ALL_PLUGINS.includes(v));
104
100
 
105
- return (
106
- !allValid &&
107
- new Error(`Invalid values: ${values}, values must be one of [${ALL_PLUGINS.join(',')}]`)
108
- );
101
+ return !allValid && new Error(`Invalid values: ${values}, values must be one of [${ALL_PLUGINS.join(',')}]`);
109
102
  }),
110
103
  className: PropTypes.string,
111
104
  maxImageWidth: PropTypes.number,
112
- maxImageHeight: PropTypes.number
105
+ maxImageHeight: PropTypes.number,
113
106
  };
114
107
 
115
108
  static defaultProps = {
@@ -119,14 +112,14 @@ export class Editor extends React.Component {
119
112
  onKeyDown: () => {},
120
113
  toolbarOpts: defaultToolbarOpts,
121
114
  responseAreaProps: defaultResponseAreaProps,
122
- languageCharactersProps: defaultLanguageCharactersProps
115
+ languageCharactersProps: defaultLanguageCharactersProps,
123
116
  };
124
117
 
125
118
  constructor(props) {
126
119
  super(props);
127
120
  this.state = {
128
121
  value: props.value,
129
- toolbarOpts: createToolbarOpts(props.toolbarOpts)
122
+ toolbarOpts: createToolbarOpts(props.toolbarOpts),
130
123
  };
131
124
 
132
125
  this.onResize = () => {
@@ -136,17 +129,17 @@ export class Editor extends React.Component {
136
129
  this.handlePlugins(this.props);
137
130
  }
138
131
 
139
- handlePlugins = props => {
132
+ handlePlugins = (props) => {
140
133
  const normalizedResponseAreaProps = {
141
134
  ...defaultResponseAreaProps,
142
- ...props.responseAreaProps
135
+ ...props.responseAreaProps,
143
136
  };
144
137
 
145
138
  this.plugins = buildPlugins(props.activePlugins, {
146
139
  math: {
147
140
  onClick: this.onMathClick,
148
141
  onFocus: this.onPluginFocus,
149
- onBlur: this.onPluginBlur
142
+ onBlur: this.onPluginBlur,
150
143
  },
151
144
  image: {
152
145
  disableImageAlignmentButtons: props.disableImageAlignmentButtons,
@@ -154,13 +147,13 @@ export class Editor extends React.Component {
154
147
  props.imageSupport &&
155
148
  props.imageSupport.delete &&
156
149
  ((src, done) => {
157
- props.imageSupport.delete(src, e => {
150
+ props.imageSupport.delete(src, (e) => {
158
151
  done(e, this.state.value);
159
152
  });
160
153
  }),
161
154
  insertImageRequested:
162
155
  props.imageSupport &&
163
- (getHandler => {
156
+ ((getHandler) => {
164
157
  /**
165
158
  * The handler is the object through which the outer context
166
159
  * communicates file upload events like: fileChosen, cancel, progress
@@ -171,7 +164,7 @@ export class Editor extends React.Component {
171
164
  onFocus: this.onPluginFocus,
172
165
  onBlur: this.onPluginBlur,
173
166
  maxImageWidth: this.props.maxImageWidth,
174
- maxImageHeight: this.props.maxImageHeight
167
+ maxImageHeight: this.props.maxImageHeight,
175
168
  },
176
169
  toolbar: {
177
170
  /**
@@ -195,7 +188,7 @@ export class Editor extends React.Component {
195
188
  } else {
196
189
  this.onEditingDone();
197
190
  }
198
- }
191
+ },
199
192
  },
200
193
  table: {
201
194
  onFocus: () => {
@@ -205,7 +198,7 @@ export class Editor extends React.Component {
205
198
  onBlur: () => {
206
199
  log('[table:onBlur]...');
207
200
  this.onPluginBlur();
208
- }
201
+ },
209
202
  },
210
203
  responseArea: {
211
204
  type: normalizedResponseAreaProps.type,
@@ -221,15 +214,15 @@ export class Editor extends React.Component {
221
214
  onBlur: () => {
222
215
  log('[table:onBlur]...');
223
216
  this.onPluginBlur();
224
- }
217
+ },
225
218
  },
226
219
  languageCharacters: props.languageCharactersProps,
227
220
  media: {
228
221
  focus: this.focus,
229
222
  createChange: () => this.state.value.change(),
230
223
  onChange: this.onChange,
231
- uploadSoundSupport: props.uploadSoundSupport
232
- }
224
+ uploadSoundSupport: props.uploadSoundSupport,
225
+ },
233
226
  });
234
227
  };
235
228
 
@@ -242,9 +235,7 @@ export class Editor extends React.Component {
242
235
  if (this.editor && this.props.autoFocus) {
243
236
  Promise.resolve().then(() => {
244
237
  if (this.editor) {
245
- const editorDOM = document.querySelector(
246
- `[data-key="${this.editor.value.document.key}"]`
247
- );
238
+ const editorDOM = document.querySelector(`[data-key="${this.editor.value.document.key}"]`);
248
239
 
249
240
  this.editor.focus();
250
241
 
@@ -262,7 +253,7 @@ export class Editor extends React.Component {
262
253
 
263
254
  if (!isEqual(newToolbarOpts, toolbarOpts)) {
264
255
  this.setState({
265
- toolbarOpts: newToolbarOpts
256
+ toolbarOpts: newToolbarOpts,
266
257
  });
267
258
  }
268
259
 
@@ -276,13 +267,13 @@ export class Editor extends React.Component {
276
267
  // so we increase the width to at least 2px in order for the user to see it
277
268
  const zeroWidthEls = document.querySelectorAll('[data-slate-zero-width="z"]');
278
269
 
279
- Array.from(zeroWidthEls).forEach(el => {
270
+ Array.from(zeroWidthEls).forEach((el) => {
280
271
  el.style.minWidth = '2px';
281
272
  el.style.display = 'inline-block';
282
273
  });
283
274
  }
284
275
 
285
- onPluginBlur = e => {
276
+ onPluginBlur = (e) => {
286
277
  log('[onPluginBlur]', e && e.relatedTarget);
287
278
  const target = e && e.relatedTarget;
288
279
 
@@ -293,7 +284,7 @@ export class Editor extends React.Component {
293
284
  });
294
285
  };
295
286
 
296
- onPluginFocus = e => {
287
+ onPluginFocus = (e) => {
297
288
  log('[onPluginFocus]', e && e.target);
298
289
  const target = e && e.target;
299
290
  if (target) {
@@ -308,8 +299,8 @@ export class Editor extends React.Component {
308
299
  this.stashValue();
309
300
  };
310
301
 
311
- onMathClick = node => {
312
- this.editor.change(c => c.collapseToStartOf(node));
302
+ onMathClick = (node) => {
303
+ this.editor.change((c) => c.collapseToStartOf(node));
313
304
  this.setState({ selectedNode: node });
314
305
  };
315
306
 
@@ -328,10 +319,10 @@ export class Editor extends React.Component {
328
319
  }
329
320
 
330
321
  // Allowing time for onChange to take effect if it is called
331
- handleBlur = resolve => {
322
+ handleBlur = (resolve) => {
332
323
  const { nonEmpty } = this.props;
333
324
  const {
334
- toolbarOpts: { doneOn }
325
+ toolbarOpts: { doneOn },
335
326
  } = this.state;
336
327
 
337
328
  this.setState({ toolbarInFocus: false, focusedNode: null });
@@ -353,7 +344,7 @@ export class Editor extends React.Component {
353
344
  }
354
345
  };
355
346
 
356
- onBlur = event => {
347
+ onBlur = (event) => {
357
348
  log('[onBlur]');
358
349
  const target = event.relatedTarget;
359
350
 
@@ -361,16 +352,16 @@ export class Editor extends React.Component {
361
352
 
362
353
  log('[onBlur] node: ', node);
363
354
 
364
- return new Promise(resolve => {
355
+ return new Promise((resolve) => {
365
356
  this.setState(
366
357
  { preBlurValue: this.state.value, focusedNode: !node ? null : node },
367
- this.handleBlur.bind(this, resolve)
358
+ this.handleBlur.bind(this, resolve),
368
359
  );
369
360
  this.props.onBlur(event);
370
361
  });
371
362
  };
372
363
 
373
- handleDomBlur = e => {
364
+ handleDomBlur = (e) => {
374
365
  const editorDOM = document.querySelector(`[data-key="${this.state.value.document.key}"]`);
375
366
 
376
367
  setTimeout(() => {
@@ -380,13 +371,10 @@ export class Editor extends React.Component {
380
371
  return;
381
372
  }
382
373
 
383
- const editorElement =
384
- !editorDOM || document.activeElement.closest(`[class*="${editorDOM.className}"]`);
374
+ const editorElement = !editorDOM || document.activeElement.closest(`[class*="${editorDOM.className}"]`);
385
375
  const toolbarElement =
386
- !this.toolbarRef ||
387
- document.activeElement.closest(`[class*="${this.toolbarRef.className}"]`);
388
- const isInCurrentComponent =
389
- this.wrapperRef.contains(editorElement) || this.wrapperRef.contains(toolbarElement);
376
+ !this.toolbarRef || document.activeElement.closest(`[class*="${this.toolbarRef.className}"]`);
377
+ const isInCurrentComponent = this.wrapperRef.contains(editorElement) || this.wrapperRef.contains(toolbarElement);
390
378
 
391
379
  if (!isInCurrentComponent) {
392
380
  editorDOM.removeEventListener('blur', this.handleDomBlur);
@@ -406,7 +394,7 @@ export class Editor extends React.Component {
406
394
  * Note: The use of promises has been causing issues with MathQuill
407
395
  * */
408
396
  onFocus = () =>
409
- new Promise(resolve => {
397
+ new Promise((resolve) => {
410
398
  const editorDOM = document.querySelector(`[data-key="${this.state.value.document.key}"]`);
411
399
 
412
400
  log('[onFocus]', document.activeElement);
@@ -454,7 +442,7 @@ export class Editor extends React.Component {
454
442
  /**
455
443
  * Reset the value if the user didn't click done.
456
444
  */
457
- resetValue = force => {
445
+ resetValue = (force) => {
458
446
  const { value, focusedNode } = this.state;
459
447
 
460
448
  const stopReset = this.plugins.reduce((s, p) => {
@@ -470,7 +458,7 @@ export class Editor extends React.Component {
470
458
  const newValue = Value.fromJSON(this.state.stashedValue.toJSON());
471
459
 
472
460
  log('newValue: ', newValue.document);
473
- return new Promise(resolve => {
461
+ return new Promise((resolve) => {
474
462
  setTimeout(() => {
475
463
  this.setState({ value: newValue, stashedValue: null }, () => {
476
464
  log('value now: ', this.state.value.document.toJSON());
@@ -489,12 +477,7 @@ export class Editor extends React.Component {
489
477
  const { value } = change;
490
478
  const { charactersLimit } = this.props;
491
479
 
492
- if (
493
- value &&
494
- value.document &&
495
- value.document.text &&
496
- value.document.text.length > charactersLimit
497
- ) {
480
+ if (value && value.document && value.document.text && value.document.text.length > charactersLimit) {
498
481
  return;
499
482
  }
500
483
 
@@ -519,12 +502,12 @@ export class Editor extends React.Component {
519
502
  if (!props.value.document.equals(this.props.value.document)) {
520
503
  this.setState({
521
504
  focus: false,
522
- value: props.value
505
+ value: props.value,
523
506
  });
524
507
  }
525
508
  }
526
509
 
527
- valueToSize = v => {
510
+ valueToSize = (v) => {
528
511
  if (!v) {
529
512
  return;
530
513
  }
@@ -553,11 +536,11 @@ export class Editor extends React.Component {
553
536
  width: this.valueToSize(width),
554
537
  height: this.valueToSize(height),
555
538
  minHeight: this.valueToSize(minHeight),
556
- maxHeight: this.valueToSize(maxHeight)
539
+ maxHeight: this.valueToSize(maxHeight),
557
540
  };
558
541
  }
559
542
 
560
- validateNode = node => {
543
+ validateNode = (node) => {
561
544
  if (node.object !== 'block') return;
562
545
 
563
546
  const last = node.nodes.last();
@@ -608,10 +591,7 @@ export class Editor extends React.Component {
608
591
  const fragment = transfer.fragment;
609
592
  const text = transfer.text;
610
593
 
611
- if (
612
- file &&
613
- (file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png')
614
- ) {
594
+ if (file && (file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png')) {
615
595
  if (!this.props.imageSupport) {
616
596
  return;
617
597
  }
@@ -623,8 +603,8 @@ export class Editor extends React.Component {
623
603
  isVoid: true,
624
604
  data: {
625
605
  loading: false,
626
- src
627
- }
606
+ src,
607
+ },
628
608
  });
629
609
 
630
610
  if (dropContext) {
@@ -650,7 +630,7 @@ export class Editor extends React.Component {
650
630
  return;
651
631
  }
652
632
  const {
653
- value: { document, selection, startBlock }
633
+ value: { document, selection, startBlock },
654
634
  } = change;
655
635
 
656
636
  if (startBlock.isVoid) {
@@ -661,13 +641,13 @@ export class Editor extends React.Component {
661
641
  const defaultMarks = document.getInsertMarksAtRange(selection);
662
642
  const frag = Plain.deserialize(text, {
663
643
  defaultBlock,
664
- defaultMarks
644
+ defaultMarks,
665
645
  }).document;
666
646
  change.insertFragment(frag);
667
647
  }
668
648
  };
669
649
 
670
- renderPlaceholder = props => {
650
+ renderPlaceholder = (props) => {
671
651
  const { editor } = props;
672
652
  const { document } = editor.value;
673
653
 
@@ -685,7 +665,7 @@ export class Editor extends React.Component {
685
665
  whiteSpace: 'nowrap',
686
666
  opacity: '0.33',
687
667
  pointerEvents: 'none',
688
- userSelect: 'none'
668
+ userSelect: 'none',
689
669
  }}
690
670
  >
691
671
  {editor.props.placeholder}
@@ -702,7 +682,7 @@ export class Editor extends React.Component {
702
682
  className,
703
683
  placeholder,
704
684
  pluginProps,
705
- onKeyDown
685
+ onKeyDown,
706
686
  } = this.props;
707
687
 
708
688
  const { value, focusedNode, toolbarOpts } = this.state;
@@ -712,26 +692,22 @@ export class Editor extends React.Component {
712
692
  const names = classNames(
713
693
  {
714
694
  [classes.withBg]: highlightShape,
715
- [classes.toolbarOnTop]: toolbarOpts.alwaysVisible && toolbarOpts.position === 'top'
695
+ [classes.toolbarOnTop]: toolbarOpts.alwaysVisible && toolbarOpts.position === 'top',
716
696
  },
717
- className
697
+ className,
718
698
  );
719
699
 
720
700
  return (
721
- <div
722
- ref={ref => (this.wrapperRef = ref)}
723
- style={{ width: sizeStyle.width }}
724
- className={names}
725
- >
701
+ <div ref={(ref) => (this.wrapperRef = ref)} style={{ width: sizeStyle.width }} className={names}>
726
702
  <SlateEditor
727
703
  plugins={this.plugins}
728
- innerRef={r => {
704
+ innerRef={(r) => {
729
705
  if (r) {
730
706
  this.slateEditor = r;
731
707
  }
732
708
  }}
733
- ref={r => (this.editor = r && this.props.editorRef(r))}
734
- toolbarRef={r => {
709
+ ref={(r) => (this.editor = r && this.props.editorRef(r))}
710
+ toolbarRef={(r) => {
735
711
  if (r) {
736
712
  this.toolbarRef = r;
737
713
  }
@@ -752,14 +728,14 @@ export class Editor extends React.Component {
752
728
  spellCheck={spellCheck}
753
729
  className={classNames(
754
730
  {
755
- [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder
731
+ [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder,
756
732
  },
757
- classes.slateEditor
733
+ classes.slateEditor,
758
734
  )}
759
735
  style={{
760
736
  minHeight: sizeStyle.minHeight,
761
737
  height: sizeStyle.height,
762
- maxHeight: sizeStyle.maxHeight
738
+ maxHeight: sizeStyle.maxHeight,
763
739
  }}
764
740
  pluginProps={pluginProps}
765
741
  toolbarOpts={toolbarOpts}
@@ -775,7 +751,7 @@ export class Editor extends React.Component {
775
751
  // TODO color - hardcoded gray background and keypad colors will need to change too
776
752
  const styles = {
777
753
  withBg: {
778
- backgroundColor: 'rgba(0,0,0,0.06)'
754
+ backgroundColor: 'rgba(0,0,0,0.06)',
779
755
  },
780
756
  slateEditor: {
781
757
  fontFamily: 'Roboto, sans-serif',
@@ -785,10 +761,10 @@ const styles = {
785
761
  width: '100%',
786
762
  borderCollapse: 'collapse',
787
763
  color: color.text(),
788
- backgroundColor: color.background()
764
+ backgroundColor: color.background(),
789
765
  },
790
766
  '& table:not([border="1"]) tr': {
791
- borderTop: '1px solid #dfe2e5'
767
+ borderTop: '1px solid #dfe2e5',
792
768
  // TODO perhaps secondary color for background, for now disable
793
769
  // '&:nth-child(2n)': {
794
770
  // backgroundColor: '#f6f8fa'
@@ -796,18 +772,18 @@ const styles = {
796
772
  },
797
773
  '& td, th': {
798
774
  padding: '.6em 1em',
799
- textAlign: 'center'
775
+ textAlign: 'center',
800
776
  },
801
777
  '& table:not([border="1"]) td, th': {
802
- border: '1px solid #dfe2e5'
803
- }
778
+ border: '1px solid #dfe2e5',
779
+ },
804
780
  },
805
781
  toolbarOnTop: {
806
- marginTop: '45px'
782
+ marginTop: '45px',
807
783
  },
808
784
  noPadding: {
809
- padding: '0 !important'
810
- }
785
+ padding: '0 !important',
786
+ },
811
787
  };
812
788
 
813
789
  export default withStyles(styles)(Editor);