@pie-lib/editable-html 9.5.13 → 10.0.0-beta.1

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 (144) hide show
  1. package/CHANGELOG.md +0 -302
  2. package/lib/components.js +116 -0
  3. package/lib/components.js.map +1 -0
  4. package/lib/editor.js +418 -103
  5. package/lib/editor.js.map +1 -1
  6. package/lib/index.js +101 -155
  7. package/lib/index.js.map +1 -1
  8. package/lib/new-serialization.js +320 -0
  9. package/lib/new-serialization.js.map +1 -0
  10. package/lib/old-serialization.js +330 -0
  11. package/lib/parse-html.js +1 -1
  12. package/lib/parse-html.js.map +1 -1
  13. package/lib/plugins/characters/custom-popper.js +1 -1
  14. package/lib/plugins/characters/custom-popper.js.map +1 -1
  15. package/lib/plugins/characters/index.js +21 -19
  16. package/lib/plugins/characters/index.js.map +1 -1
  17. package/lib/plugins/characters/utils.js +1 -1
  18. package/lib/plugins/characters/utils.js.map +1 -1
  19. package/lib/plugins/hotKeys/index.js +67 -0
  20. package/lib/plugins/hotKeys/index.js.map +1 -0
  21. package/lib/plugins/image/alt-dialog.js +1 -6
  22. package/lib/plugins/image/alt-dialog.js.map +1 -1
  23. package/lib/plugins/image/component.js +70 -53
  24. package/lib/plugins/image/component.js.map +1 -1
  25. package/lib/plugins/image/image-toolbar.js +7 -9
  26. package/lib/plugins/image/image-toolbar.js.map +1 -1
  27. package/lib/plugins/image/index.js +83 -27
  28. package/lib/plugins/image/index.js.map +1 -1
  29. package/lib/plugins/image/insert-image-handler.js +72 -33
  30. package/lib/plugins/image/insert-image-handler.js.map +1 -1
  31. package/lib/plugins/index.js +23 -41
  32. package/lib/plugins/index.js.map +1 -1
  33. package/lib/plugins/list/index.js +64 -100
  34. package/lib/plugins/list/index.js.map +1 -1
  35. package/lib/plugins/math/index.js +86 -60
  36. package/lib/plugins/math/index.js.map +1 -1
  37. package/lib/plugins/media/index.js +202 -132
  38. package/lib/plugins/media/index.js.map +1 -1
  39. package/lib/plugins/media/media-dialog.js +17 -16
  40. package/lib/plugins/media/media-dialog.js.map +1 -1
  41. package/lib/plugins/media/media-toolbar.js +3 -3
  42. package/lib/plugins/media/media-toolbar.js.map +1 -1
  43. package/lib/plugins/media/media-wrapper.js +21 -58
  44. package/lib/plugins/media/media-wrapper.js.map +1 -1
  45. package/lib/plugins/respArea/drag-in-the-blank/choice.js +3 -3
  46. package/lib/plugins/respArea/drag-in-the-blank/choice.js.map +1 -1
  47. package/lib/plugins/respArea/drag-in-the-blank/index.js +3 -2
  48. package/lib/plugins/respArea/drag-in-the-blank/index.js.map +1 -1
  49. package/lib/plugins/respArea/explicit-constructed-response/index.js +3 -2
  50. package/lib/plugins/respArea/explicit-constructed-response/index.js.map +1 -1
  51. package/lib/plugins/respArea/icons/index.js +13 -15
  52. package/lib/plugins/respArea/icons/index.js.map +1 -1
  53. package/lib/plugins/respArea/index.js +87 -53
  54. package/lib/plugins/respArea/index.js.map +1 -1
  55. package/lib/plugins/respArea/inline-dropdown/index.js +4 -3
  56. package/lib/plugins/respArea/inline-dropdown/index.js.map +1 -1
  57. package/lib/plugins/respArea/utils.js +17 -20
  58. package/lib/plugins/respArea/utils.js.map +1 -1
  59. package/lib/plugins/table/icons/index.js +1 -1
  60. package/lib/plugins/table/icons/index.js.map +1 -1
  61. package/lib/plugins/table/index.js +381 -212
  62. package/lib/plugins/table/index.js.map +1 -1
  63. package/lib/plugins/table/table-toolbar.js +5 -6
  64. package/lib/plugins/table/table-toolbar.js.map +1 -1
  65. package/lib/plugins/toolbar/default-toolbar.js +55 -11
  66. package/lib/plugins/toolbar/default-toolbar.js.map +1 -1
  67. package/lib/plugins/toolbar/done-button.js +1 -1
  68. package/lib/plugins/toolbar/done-button.js.map +1 -1
  69. package/lib/plugins/toolbar/editor-and-toolbar.js +186 -232
  70. package/lib/plugins/toolbar/editor-and-toolbar.js.map +1 -1
  71. package/lib/plugins/toolbar/index.js +1 -2
  72. package/lib/plugins/toolbar/index.js.map +1 -1
  73. package/lib/plugins/toolbar/toolbar-buttons.js +1 -1
  74. package/lib/plugins/toolbar/toolbar-buttons.js.map +1 -1
  75. package/lib/plugins/toolbar/toolbar.js +253 -239
  76. package/lib/plugins/toolbar/toolbar.js.map +1 -1
  77. package/lib/plugins/utils.js +27 -2
  78. package/lib/plugins/utils.js.map +1 -1
  79. package/lib/serialization.js +1 -1
  80. package/lib/serialization.js.map +1 -1
  81. package/lib/slate-editor.js +302 -0
  82. package/lib/test-serializer.js +189 -0
  83. package/lib/test-serializer.js.map +1 -0
  84. package/lib/theme.js +1 -1
  85. package/lib/theme.js.map +1 -1
  86. package/package.json +18 -14
  87. package/playground/image/data.js +20 -20
  88. package/playground/image/index.html +22 -20
  89. package/playground/image/index.jsx +12 -10
  90. package/playground/index.html +25 -23
  91. package/playground/mathquill/index.html +23 -20
  92. package/playground/mathquill/index.jsx +18 -22
  93. package/playground/prod-test/index.html +24 -20
  94. package/playground/prod-test/index.jsx +5 -3
  95. package/playground/schema-override/data.js +10 -10
  96. package/playground/schema-override/image-plugin.jsx +3 -4
  97. package/playground/schema-override/index.html +21 -19
  98. package/playground/schema-override/index.jsx +13 -14
  99. package/playground/serialization/data.js +10 -10
  100. package/playground/serialization/image-plugin.jsx +3 -4
  101. package/playground/serialization/index.html +22 -20
  102. package/playground/table-examples.html +5 -8
  103. package/playground/webpack.config.js +10 -10
  104. package/src/components.js +135 -0
  105. package/src/editor.jsx +478 -141
  106. package/src/index.jsx +71 -95
  107. package/src/new-serialization.jsx +291 -0
  108. package/src/parse-html.js +1 -1
  109. package/src/plugins/characters/custom-popper.js +7 -7
  110. package/src/plugins/characters/index.jsx +33 -34
  111. package/src/plugins/characters/utils.js +81 -81
  112. package/src/plugins/hotKeys/index.js +54 -0
  113. package/src/plugins/image/alt-dialog.jsx +4 -5
  114. package/src/plugins/image/component.jsx +106 -89
  115. package/src/plugins/image/image-toolbar.jsx +27 -19
  116. package/src/plugins/image/index.jsx +75 -43
  117. package/src/plugins/image/insert-image-handler.js +62 -27
  118. package/src/plugins/index.jsx +23 -41
  119. package/src/plugins/list/index.jsx +70 -95
  120. package/src/plugins/math/index.jsx +102 -82
  121. package/src/plugins/media/index.jsx +159 -124
  122. package/src/plugins/media/media-dialog.js +98 -71
  123. package/src/plugins/media/media-toolbar.jsx +8 -8
  124. package/src/plugins/media/media-wrapper.jsx +29 -30
  125. package/src/plugins/respArea/drag-in-the-blank/choice.jsx +21 -19
  126. package/src/plugins/respArea/drag-in-the-blank/index.jsx +14 -11
  127. package/src/plugins/respArea/explicit-constructed-response/index.jsx +7 -6
  128. package/src/plugins/respArea/icons/index.jsx +11 -14
  129. package/src/plugins/respArea/index.jsx +92 -52
  130. package/src/plugins/respArea/inline-dropdown/index.jsx +9 -8
  131. package/src/plugins/respArea/utils.jsx +26 -35
  132. package/src/plugins/table/icons/index.jsx +17 -11
  133. package/src/plugins/table/index.jsx +288 -231
  134. package/src/plugins/table/table-toolbar.jsx +15 -11
  135. package/src/plugins/toolbar/default-toolbar.jsx +65 -19
  136. package/src/plugins/toolbar/done-button.jsx +4 -4
  137. package/src/plugins/toolbar/editor-and-toolbar.jsx +150 -145
  138. package/src/plugins/toolbar/index.jsx +2 -3
  139. package/src/plugins/toolbar/toolbar-buttons.jsx +11 -11
  140. package/src/plugins/toolbar/toolbar.jsx +244 -221
  141. package/src/plugins/utils.js +21 -4
  142. package/src/serialization.jsx +32 -32
  143. package/src/test-serializer.js +139 -0
  144. package/src/test-serializer.js.rej +20 -0
package/playground/image/data.js CHANGED
@@ -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
  };
package/playground/image/index.html CHANGED
@@ -1,22 +1,24 @@
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>
18
3
 
19
- <body>
20
- <div id="app"></div>
21
- </body>
22
- </html>
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>
package/playground/image/index.jsx CHANGED
@@ -9,14 +9,13 @@ class Img extends React.Component {
9
9
  render() {
10
10
  const { data } = this.props.node;
11
11
  const src = data.get('src');
12
-
13
12
  return <img src={src} width={100} />;
14
13
  }
15
14
  }
16
15
 
17
16
  const ImgPlugin = () => {
18
17
  return {
19
- renderNode: (props) => {
18
+ renderNode: props => {
20
19
  if (props.node.type === 'image') {
21
20
  return <Img {...props} />;
22
21
  }
@@ -34,11 +33,11 @@ const ImgPlugin = () => {
34
33
  focusKey: block.key,
35
34
  focusOffset: 0,
36
35
  isFocused: true,
37
- isBackward: false,
36
+ isBackward: false
38
37
  });
39
38
  change.insertBlockAtRange(change.value.selection, block).select(range);
40
39
  }
41
- },
40
+ }
42
41
  };
43
42
  };
44
43
 
@@ -48,7 +47,7 @@ class ImageDemo extends React.Component {
48
47
  constructor(props) {
49
48
  super(props);
50
49
  this.state = {
51
- value: Value.fromJSON(imageData),
50
+ value: Value.fromJSON(imageData)
52
51
  };
53
52
 
54
53
  this.plugins = [ImgPlugin()];
@@ -56,17 +55,21 @@ class ImageDemo extends React.Component {
56
55
 
57
56
  render() {
58
57
  const { value } = this.state;
59
-
60
58
  return (
61
59
  <div>
62
60
  ImageDemo
63
61
  <hr />
64
- This demo tests adding text between images. click on the image and type some text...
62
+ This demo tests adding text between images. click on the image and type
63
+ some text...
65
64
  <hr />
66
- <Editor value={value} onChange={(change) => this.setState({ value: change.value })} plugins={this.plugins} />
65
+ <Editor
66
+ value={value}
67
+ onChange={change => this.setState({ value: change.value })}
68
+ plugins={this.plugins}
69
+ />
67
70
  <EditableEditor
68
71
  value={value}
69
- onChange={(change) => this.setState({ value: change.value })}
72
+ onChange={change => this.setState({ value: change.value })}
70
73
  plugins={this.plugins}
71
74
  />
72
75
  </div>
@@ -76,6 +79,5 @@ class ImageDemo extends React.Component {
76
79
 
77
80
  document.addEventListener('DOMContentLoaded', () => {
78
81
  const el = React.createElement(ImageDemo, {});
79
-
80
82
  ReactDOM.render(el, document.querySelector('#app'));
81
83
  });
package/playground/index.html CHANGED
@@ -1,25 +1,27 @@
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>
15
3
 
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>
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>
package/playground/mathquill/index.html CHANGED
@@ -1,22 +1,25 @@
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>
18
3
 
19
- <body>
20
- <div id="app"></div>
21
- </body>
22
- </html>
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>
package/playground/mathquill/index.jsx CHANGED
@@ -19,25 +19,23 @@ 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() {
26
26
  if (!MQ) {
27
27
  throw new Error('MQ is not defined - but component has mounted?');
28
28
  }
29
-
30
29
  this.mathField = MQ.MathField(this.input, {
31
30
  handlers: {
32
- edit: this.onInputEdit.bind(this),
33
- },
31
+ edit: this.onInputEdit.bind(this)
32
+ }
34
33
  });
35
34
  this.mathField.latex(this.props.latex);
36
35
  }
37
36
 
38
37
  componentDidUpdate() {
39
38
  log('[componentDidUpdate] latex: ', this.props.latex);
40
-
41
39
  if (this.mathField) {
42
40
  this.mathField.latex(this.props.latex);
43
41
  }
@@ -50,34 +48,29 @@ export default class Editor extends React.Component {
50
48
 
51
49
  blur() {
52
50
  log('blur mathfield');
53
-
54
51
  this.mathField.blur();
55
52
  }
56
53
 
57
54
  focus() {
58
55
  log('focus mathfield...');
59
-
60
56
  this.mathField.focus();
61
57
  }
62
58
 
63
59
  command(v) {
64
60
  this.mathField.cmd(v);
65
61
  this.mathField.focus();
66
-
67
62
  return this.mathField.latex();
68
63
  }
69
64
 
70
65
  keystroke(v) {
71
66
  this.mathField.keystroke(v);
72
67
  this.mathField.focus();
73
-
74
68
  return this.mathField.latex();
75
69
  }
76
70
 
77
71
  write(v) {
78
72
  this.mathField.write(v);
79
73
  this.mathField.focus();
80
-
81
74
  return this.mathField.latex();
82
75
  }
83
76
 
@@ -87,44 +80,42 @@ export default class Editor extends React.Component {
87
80
  }
88
81
  }
89
82
 
90
- _onInputEdit = (event) => {
83
+ _onInputEdit = event => {
91
84
  log('[onInputEdit] ...', event);
92
85
 
93
86
  if (!this.mathField) {
94
87
  return;
95
88
  }
96
-
97
89
  if (this.latexIsEqual(this.mathField.latex(), this.props.latex)) {
98
90
  return;
99
91
  }
100
-
101
92
  this.props.onChange(this.mathField.latex());
102
93
  };
103
94
 
104
95
  onInputEdit = debounce(this._onInputEdit, 300, {
105
96
  leading: false,
106
- trailing: true,
97
+ trailing: true
107
98
  });
108
99
 
109
100
  latexIsEqual = (a, b) => {
110
101
  if (!a && !b) {
111
102
  return true;
112
103
  }
113
-
114
104
  if ((a && !b) || (!a && b)) {
115
105
  return false;
116
106
  }
117
-
118
107
  return a.trim().replace(/\s/g, '') === b.trim().replace(/\s/, '');
119
108
  };
120
109
 
121
110
  shouldComponentUpdate(nextProps) {
122
- log('[shouldComponentUpdate] nextProps.latex: ', nextProps.latex, 'current: ', this.mathField.latex());
123
-
111
+ log(
112
+ '[shouldComponentUpdate] nextProps.latex: ',
113
+ nextProps.latex,
114
+ 'current: ',
115
+ this.mathField.latex()
116
+ );
124
117
  const isEqual = this.latexIsEqual(nextProps.latex, this.mathField.latex());
125
-
126
118
  log('[shouldComponentUpdate] isEqual? ', isEqual);
127
-
128
119
  return !isEqual;
129
120
  }
130
121
 
@@ -133,7 +124,13 @@ export default class Editor extends React.Component {
133
124
  const { onClick, onFocus, onBlur, className } = this.props;
134
125
 
135
126
  return (
136
- <span onClick={onClick} onFocus={onFocus} onBlur={onBlur} className={className} ref={(r) => (this.input = r)} />
127
+ <span
128
+ onClick={onClick}
129
+ onFocus={onFocus}
130
+ onBlur={onBlur}
131
+ className={className}
132
+ ref={r => (this.input = r)}
133
+ />
137
134
  );
138
135
  }
139
136
  }
@@ -144,7 +141,6 @@ class Demo extends React.Component {
144
141
  }
145
142
  render() {
146
143
  const latex = '- \\frac{1}{2}';
147
-
148
144
  return <Editor latex={latex} onChange={() => ({})} />;
149
145
  }
150
146
  }
package/playground/prod-test/index.html CHANGED
@@ -1,22 +1,26 @@
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>
18
3
 
19
- <body>
20
- <div id="app"></div>
21
- </body>
22
- </html>
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>
package/playground/prod-test/index.jsx CHANGED
@@ -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,7 +15,10 @@ class ProdTest extends React.Component {
15
15
  <div>
16
16
  EditableHtml and react production
17
17
  <hr />
18
- <EditableHtml markup={this.state.markup} onChange={(markup) => this.setState({ markup })} />
18
+ <EditableHtml
19
+ markup={this.state.markup}
20
+ onChange={markup => this.setState({ markup })}
21
+ />
19
22
  </div>
20
23
  );
21
24
  }
@@ -23,6 +26,5 @@ class ProdTest extends React.Component {
23
26
 
24
27
  document.addEventListener('DOMContentLoaded', () => {
25
28
  const el = React.createElement(ProdTest, {});
26
-
27
29
  ReactDOM.render(el, document.querySelector('#app'));
28
30
  });
package/playground/schema-override/data.js CHANGED
@@ -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
  };
package/playground/schema-override/image-plugin.jsx CHANGED
@@ -5,14 +5,13 @@ class Img extends React.Component {
5
5
  render() {
6
6
  const { data } = this.props.node;
7
7
  const src = data.get('src');
8
-
9
8
  return <img src={src} width={100} />;
10
9
  }
11
10
  }
12
11
 
13
12
  const ImgPlugin = () => {
14
13
  return {
15
- renderNode: (props) => {
14
+ renderNode: props => {
16
15
  if (props.node.type === 'image') {
17
16
  return <Img {...props} />;
18
17
  }
@@ -30,11 +29,11 @@ const ImgPlugin = () => {
30
29
  focusKey: block.key,
31
30
  focusOffset: 0,
32
31
  isFocused: true,
33
- isBackward: false,
32
+ isBackward: false
34
33
  });
35
34
  change.insertBlockAtRange(change.value.selection, block).select(range);
36
35
  }
37
- },
36
+ }
38
37
  };
39
38
  };
40
39
 
package/playground/schema-override/index.html CHANGED
@@ -1,21 +1,23 @@
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>
17
3
 
18
- <body>
19
- <div id="app"></div>
20
- </body>
21
- </html>
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>
package/playground/schema-override/index.jsx CHANGED
@@ -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,9 +71,9 @@ 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()];
78
78
  }
79
79
 
@@ -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
  }
@@ -92,6 +92,5 @@ class App extends React.Component {
92
92
 
93
93
  document.addEventListener('DOMContentLoaded', () => {
94
94
  const el = React.createElement(App, {});
95
-
96
95
  ReactDOM.render(el, document.querySelector('#app'));
97
96
  });