@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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-lib/editable-html",
3
- "version": "9.2.6-next.2+eae655db",
3
+ "version": "9.2.7",
4
4
  "description": "",
5
5
  "license": "ISC",
6
6
  "main": "lib/index.js",
@@ -10,10 +10,10 @@
10
10
  "@material-ui/core": "^3.8.3",
11
11
  "@material-ui/icons": "^3.0.2",
12
12
  "@material-ui/styles": "^3.0.0-alpha.10",
13
- "@pie-lib/drag": "^1.1.53-next.948+eae655db",
14
- "@pie-lib/math-rendering": "^2.5.0",
15
- "@pie-lib/math-toolbar": "^1.11.3",
16
- "@pie-lib/render-ui": "^4.13.6",
13
+ "@pie-lib/drag": "^2.0.1",
14
+ "@pie-lib/math-rendering": "^2.5.1",
15
+ "@pie-lib/math-toolbar": "^1.11.4",
16
+ "@pie-lib/render-ui": "^4.13.7",
17
17
  "change-case": "^3.0.2",
18
18
  "classnames": "^2.2.6",
19
19
  "debug": "^4.1.1",
@@ -47,6 +47,6 @@
47
47
  "publishConfig": {
48
48
  "access": "public"
49
49
  },
50
- "gitHead": "eae655db1527a37d6c47dacfa402b2590b2bb06b",
50
+ "gitHead": "f81076118e63884db5f5d65a41cff9aad111137e",
51
51
  "scripts": {}
52
52
  }
@@ -13,9 +13,9 @@ module.exports = {
13
13
  object: 'text',
14
14
  leaves: [
15
15
  {
16
- text: 'foo'
17
- }
18
- ]
16
+ text: 'foo',
17
+ },
18
+ ],
19
19
  },
20
20
 
21
21
  {
@@ -24,21 +24,21 @@ module.exports = {
24
24
  isVoid: true,
25
25
  data: {
26
26
  src:
27
- 'https://img.washingtonpost.com/wp-apps/imrs.php?src=https://img.washingtonpost.com/news/speaking-of-science/wp-content/uploads/sites/36/2015/10/as12-49-7278-1024x1024.jpg&w=1484'
28
- }
27
+ 'https://img.washingtonpost.com/wp-apps/imrs.php?src=https://img.washingtonpost.com/news/speaking-of-science/wp-content/uploads/sites/36/2015/10/as12-49-7278-1024x1024.jpg&w=1484',
28
+ },
29
29
  },
30
30
 
31
31
  {
32
32
  object: 'text',
33
33
  leaves: [
34
34
  {
35
- text: 'bar'
36
- }
37
- ]
38
- }
39
- ]
40
- }
41
- ]
35
+ text: 'bar',
36
+ },
37
+ ],
38
+ },
39
+ ],
40
+ },
41
+ ],
42
42
  },
43
43
  {
44
44
  object: 'block',
@@ -48,12 +48,12 @@ module.exports = {
48
48
  object: 'text',
49
49
  leaves: [
50
50
  {
51
- text: 'text'
52
- }
53
- ]
54
- }
55
- ]
56
- }
57
- ]
58
- }
51
+ text: 'text',
52
+ },
53
+ ],
54
+ },
55
+ ],
56
+ },
57
+ ],
58
+ },
59
59
  };
@@ -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>
@@ -15,7 +15,7 @@ class Img extends React.Component {
15
15
 
16
16
  const ImgPlugin = () => {
17
17
  return {
18
- renderNode: props => {
18
+ renderNode: (props) => {
19
19
  if (props.node.type === 'image') {
20
20
  return <Img {...props} />;
21
21
  }
@@ -33,11 +33,11 @@ const ImgPlugin = () => {
33
33
  focusKey: block.key,
34
34
  focusOffset: 0,
35
35
  isFocused: true,
36
- isBackward: false
36
+ isBackward: false,
37
37
  });
38
38
  change.insertBlockAtRange(change.value.selection, block).select(range);
39
39
  }
40
- }
40
+ },
41
41
  };
42
42
  };
43
43
 
@@ -47,7 +47,7 @@ class ImageDemo extends React.Component {
47
47
  constructor(props) {
48
48
  super(props);
49
49
  this.state = {
50
- value: Value.fromJSON(imageData)
50
+ value: Value.fromJSON(imageData),
51
51
  };
52
52
 
53
53
  this.plugins = [ImgPlugin()];
@@ -59,17 +59,12 @@ class ImageDemo extends React.Component {
59
59
  <div>
60
60
  ImageDemo
61
61
  <hr />
62
- This demo tests adding text between images. click on the image and type
63
- some text...
62
+ This demo tests adding text between images. click on the image and type some text...
64
63
  <hr />
65
- <Editor
66
- value={value}
67
- onChange={change => this.setState({ value: change.value })}
68
- plugins={this.plugins}
69
- />
64
+ <Editor value={value} onChange={(change) => this.setState({ value: change.value })} plugins={this.plugins} />
70
65
  <EditableEditor
71
66
  value={value}
72
- onChange={change => this.setState({ value: change.value })}
67
+ onChange={(change) => this.setState({ value: change.value })}
73
68
  plugins={this.plugins}
74
69
  />
75
70
  </div>
@@ -1,27 +1,25 @@
1
- <!doctype html>
1
+ <!DOCTYPE html>
2
2
  <html>
3
+ <head>
4
+ <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
5
+ <style>
6
+ body,
7
+ span,
8
+ div,
9
+ p {
10
+ font-family: 'Roboto', sans-serif;
11
+ }
12
+ </style>
13
+ <script src="./bundle.js" type="text/javascript"></script>
14
+ </head>
3
15
 
4
- <head>
5
- <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
6
- <style>
7
- body,
8
- span,
9
- div,
10
- p {
11
- font-family: 'Roboto', sans-serif;
12
- }
13
- </style>
14
- <script src="./bundle.js" type="text/javascript"></script>
15
- </head>
16
-
17
- <body>
18
- <a href="/image/index.html">image</a>
19
- <br/>
20
- <a href="/mathquill/index.html">mathquill</a>
21
- <br/>
22
- <a href="/schema-override/index.html">schema-override</a>
23
- <br/>
24
- <a href="/serialization/index.html">serialization</a>
25
- </body>
26
-
27
- </html>
16
+ <body>
17
+ <a href="/image/index.html">image</a>
18
+ <br />
19
+ <a href="/mathquill/index.html">mathquill</a>
20
+ <br />
21
+ <a href="/schema-override/index.html">schema-override</a>
22
+ <br />
23
+ <a href="/serialization/index.html">serialization</a>
24
+ </body>
25
+ </html>
@@ -1,25 +1,22 @@
1
- <!doctype html>
1
+ <!DOCTYPE html>
2
2
  <html>
3
+ <head>
4
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.css" rel="stylesheet" />
5
+ <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
6
+ <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.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
-
6
- <link href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.css" rel="stylesheet">
7
- <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
8
- <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
9
- <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
10
- <style>
11
- body,
12
- span,
13
- div,
14
- p {
15
- font-family: 'Roboto', sans-serif;
16
- }
17
- </style>
18
- <script src="bundle.js" type="text/javascript"></script>
19
- </head>
20
-
21
- <body>
22
- <div id="app"></div>
23
- </body>
24
-
25
- </html>
19
+ <body>
20
+ <div id="app"></div>
21
+ </body>
22
+ </html>
@@ -19,7 +19,7 @@ export default class Editor extends React.Component {
19
19
  latex: PropTypes.string.isRequired,
20
20
  onFocus: PropTypes.func,
21
21
  onBlur: PropTypes.func,
22
- className: PropTypes.string
22
+ className: PropTypes.string,
23
23
  };
24
24
 
25
25
  componentDidMount() {
@@ -28,8 +28,8 @@ export default class Editor extends React.Component {
28
28
  }
29
29
  this.mathField = MQ.MathField(this.input, {
30
30
  handlers: {
31
- edit: this.onInputEdit.bind(this)
32
- }
31
+ edit: this.onInputEdit.bind(this),
32
+ },
33
33
  });
34
34
  this.mathField.latex(this.props.latex);
35
35
  }
@@ -80,7 +80,7 @@ export default class Editor extends React.Component {
80
80
  }
81
81
  }
82
82
 
83
- _onInputEdit = event => {
83
+ _onInputEdit = (event) => {
84
84
  log('[onInputEdit] ...', event);
85
85
 
86
86
  if (!this.mathField) {
@@ -94,7 +94,7 @@ export default class Editor extends React.Component {
94
94
 
95
95
  onInputEdit = debounce(this._onInputEdit, 300, {
96
96
  leading: false,
97
- trailing: true
97
+ trailing: true,
98
98
  });
99
99
 
100
100
  latexIsEqual = (a, b) => {
@@ -108,12 +108,7 @@ export default class Editor extends React.Component {
108
108
  };
109
109
 
110
110
  shouldComponentUpdate(nextProps) {
111
- log(
112
- '[shouldComponentUpdate] nextProps.latex: ',
113
- nextProps.latex,
114
- 'current: ',
115
- this.mathField.latex()
116
- );
111
+ log('[shouldComponentUpdate] nextProps.latex: ', nextProps.latex, 'current: ', this.mathField.latex());
117
112
  const isEqual = this.latexIsEqual(nextProps.latex, this.mathField.latex());
118
113
  log('[shouldComponentUpdate] isEqual? ', isEqual);
119
114
  return !isEqual;
@@ -124,13 +119,7 @@ export default class Editor extends React.Component {
124
119
  const { onClick, onFocus, onBlur, className } = this.props;
125
120
 
126
121
  return (
127
- <span
128
- onClick={onClick}
129
- onFocus={onFocus}
130
- onBlur={onBlur}
131
- className={className}
132
- ref={r => (this.input = r)}
133
- />
122
+ <span onClick={onClick} onFocus={onFocus} onBlur={onBlur} className={className} ref={(r) => (this.input = r)} />
134
123
  );
135
124
  }
136
125
  }
@@ -1,26 +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
-
6
-
7
- <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
8
- <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
9
- <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom-server.browser.production.min.js"></script>
10
- <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
11
- <style>
12
- body,
13
- span,
14
- div,
15
- p {
16
- font-family: 'Roboto', sans-serif;
17
- }
18
- </style>
19
- <script src="bundle.js" type="text/javascript"></script>
20
- </head>
21
-
22
- <body>
23
- <div id="app"></div>
24
- </body>
25
-
26
- </html>
19
+ <body>
20
+ <div id="app"></div>
21
+ </body>
22
+ </html>
@@ -6,7 +6,7 @@ class ProdTest extends React.Component {
6
6
  constructor(props) {
7
7
  super(props);
8
8
  this.state = {
9
- markup: 'hi'
9
+ markup: 'hi',
10
10
  };
11
11
  }
12
12
 
@@ -15,10 +15,7 @@ class ProdTest extends React.Component {
15
15
  <div>
16
16
  EditableHtml and react production
17
17
  <hr />
18
- <EditableHtml
19
- markup={this.state.markup}
20
- onChange={markup => this.setState({ markup })}
21
- />
18
+ <EditableHtml markup={this.state.markup} onChange={(markup) => this.setState({ markup })} />
22
19
  </div>
23
20
  );
24
21
  }
@@ -11,19 +11,19 @@ module.exports = {
11
11
  isVoid: true,
12
12
  data: {
13
13
  src:
14
- 'https://img.washingtonpost.com/wp-apps/imrs.php?src=https://img.washingtonpost.com/news/speaking-of-science/wp-content/uploads/sites/36/2015/10/as12-49-7278-1024x1024.jpg&w=1484'
15
- }
14
+ 'https://img.washingtonpost.com/wp-apps/imrs.php?src=https://img.washingtonpost.com/news/speaking-of-science/wp-content/uploads/sites/36/2015/10/as12-49-7278-1024x1024.jpg&w=1484',
15
+ },
16
16
  },
17
17
  {
18
18
  object: 'text',
19
19
  leaves: [
20
20
  {
21
- text: 'hi'
22
- }
23
- ]
24
- }
25
- ]
26
- }
27
- ]
28
- }
21
+ text: 'hi',
22
+ },
23
+ ],
24
+ },
25
+ ],
26
+ },
27
+ ],
28
+ },
29
29
  };
@@ -11,7 +11,7 @@ class Img extends React.Component {
11
11
 
12
12
  const ImgPlugin = () => {
13
13
  return {
14
- renderNode: props => {
14
+ renderNode: (props) => {
15
15
  if (props.node.type === 'image') {
16
16
  return <Img {...props} />;
17
17
  }
@@ -29,11 +29,11 @@ const ImgPlugin = () => {
29
29
  focusKey: block.key,
30
30
  focusOffset: 0,
31
31
  isFocused: true,
32
- isBackward: false
32
+ isBackward: false,
33
33
  });
34
34
  change.insertBlockAtRange(change.value.selection, block).select(range);
35
35
  }
36
- }
36
+ },
37
37
  };
38
38
  };
39
39
 
@@ -1,23 +1,21 @@
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
+ <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
7
+ <style>
8
+ body,
9
+ span,
10
+ div,
11
+ p {
12
+ font-family: 'Roboto', sans-serif;
13
+ }
14
+ </style>
15
+ <script src="bundle.js" type="text/javascript"></script>
16
+ </head>
3
17
 
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
- <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>
18
-
19
- <body>
20
- <div id="app"></div>
21
- </body>
22
-
23
- </html>
18
+ <body>
19
+ <div id="app"></div>
20
+ </body>
21
+ </html>
@@ -9,24 +9,24 @@ const schema = {
9
9
  document: {
10
10
  nodes: [
11
11
  {
12
- match: [{ type: 'paragraph' }, { type: 'image' }]
13
- }
14
- ]
12
+ match: [{ type: 'paragraph' }, { type: 'image' }],
13
+ },
14
+ ],
15
15
  },
16
16
  blocks: {
17
17
  paragraph: {
18
18
  nodes: [
19
19
  {
20
- match: [{ type: 'image' }, { object: 'text' }]
21
- }
22
- ]
23
- }
20
+ match: [{ type: 'image' }, { object: 'text' }],
21
+ },
22
+ ],
23
+ },
24
24
  },
25
25
  inlines: {
26
26
  image: {
27
- isVoid: true
28
- }
29
- }
27
+ isVoid: true,
28
+ },
29
+ },
30
30
  };
31
31
 
32
32
  // const raw = new Schema();
@@ -71,7 +71,7 @@ class App extends React.Component {
71
71
  constructor(props) {
72
72
  super(props);
73
73
  this.state = {
74
- value: Value.fromJSON(data, { normalize: false })
74
+ value: Value.fromJSON(data, { normalize: false }),
75
75
  };
76
76
  console.log('this.state.value', this.state.value);
77
77
  this.plugins = [ImgPlugin()];
@@ -84,7 +84,7 @@ class App extends React.Component {
84
84
  plugins={this.plugins}
85
85
  schema={schema}
86
86
  renderNode={this.renderNode}
87
- onChange={change => this.setState({ value: change.value })}
87
+ onChange={(change) => this.setState({ value: change.value })}
88
88
  />
89
89
  );
90
90
  }
@@ -11,19 +11,19 @@ module.exports = {
11
11
  isVoid: true,
12
12
  data: {
13
13
  src:
14
- 'https://img.washingtonpost.com/wp-apps/imrs.php?src=https://img.washingtonpost.com/news/speaking-of-science/wp-content/uploads/sites/36/2015/10/as12-49-7278-1024x1024.jpg&w=1484'
15
- }
14
+ 'https://img.washingtonpost.com/wp-apps/imrs.php?src=https://img.washingtonpost.com/news/speaking-of-science/wp-content/uploads/sites/36/2015/10/as12-49-7278-1024x1024.jpg&w=1484',
15
+ },
16
16
  },
17
17
  {
18
18
  object: 'text',
19
19
  leaves: [
20
20
  {
21
- text: 'hi'
22
- }
23
- ]
24
- }
25
- ]
26
- }
27
- ]
28
- }
21
+ text: 'hi',
22
+ },
23
+ ],
24
+ },
25
+ ],
26
+ },
27
+ ],
28
+ },
29
29
  };
@@ -11,7 +11,7 @@ class Img extends React.Component {
11
11
 
12
12
  const ImgPlugin = () => {
13
13
  return {
14
- renderNode: props => {
14
+ renderNode: (props) => {
15
15
  if (props.node.type === 'image') {
16
16
  return <Img {...props} />;
17
17
  }
@@ -29,11 +29,11 @@ const ImgPlugin = () => {
29
29
  focusKey: block.key,
30
30
  focusOffset: 0,
31
31
  isFocused: true,
32
- isBackward: false
32
+ isBackward: false,
33
33
  });
34
34
  change.insertBlockAtRange(change.value.selection, block).select(range);
35
35
  }
36
- }
36
+ },
37
37
  };
38
38
  };
39
39