@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.
- package/CHANGELOG.md +16 -0
- package/lib/editor.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/parse-html.js.map +1 -1
- package/lib/plugins/characters/custom-popper.js.map +1 -1
- package/lib/plugins/characters/index.js.map +1 -1
- package/lib/plugins/characters/utils.js.map +1 -1
- package/lib/plugins/image/alt-dialog.js.map +1 -1
- package/lib/plugins/image/component.js.map +1 -1
- package/lib/plugins/image/image-toolbar.js.map +1 -1
- package/lib/plugins/image/index.js.map +1 -1
- package/lib/plugins/index.js.map +1 -1
- package/lib/plugins/list/index.js.map +1 -1
- package/lib/plugins/math/index.js +1 -1
- package/lib/plugins/math/index.js.map +1 -1
- package/lib/plugins/media/index.js.map +1 -1
- package/lib/plugins/media/media-dialog.js.map +1 -1
- package/lib/plugins/media/media-toolbar.js.map +1 -1
- package/lib/plugins/media/media-wrapper.js.map +1 -1
- package/lib/plugins/respArea/drag-in-the-blank/choice.js.map +1 -1
- package/lib/plugins/respArea/drag-in-the-blank/index.js.map +1 -1
- package/lib/plugins/respArea/explicit-constructed-response/index.js.map +1 -1
- package/lib/plugins/respArea/icons/index.js.map +1 -1
- package/lib/plugins/respArea/index.js.map +1 -1
- package/lib/plugins/respArea/inline-dropdown/index.js.map +1 -1
- package/lib/plugins/respArea/utils.js.map +1 -1
- package/lib/plugins/table/icons/index.js.map +1 -1
- package/lib/plugins/table/index.js.map +1 -1
- package/lib/plugins/table/table-toolbar.js.map +1 -1
- package/lib/plugins/toolbar/default-toolbar.js.map +1 -1
- package/lib/plugins/toolbar/done-button.js.map +1 -1
- package/lib/plugins/toolbar/editor-and-toolbar.js.map +1 -1
- package/lib/plugins/toolbar/index.js.map +1 -1
- package/lib/plugins/toolbar/toolbar-buttons.js.map +1 -1
- package/lib/plugins/toolbar/toolbar.js.map +1 -1
- package/lib/plugins/utils.js.map +1 -1
- package/lib/serialization.js.map +1 -1
- package/package.json +6 -6
- package/playground/image/data.js +20 -20
- package/playground/image/index.html +20 -22
- package/playground/image/index.jsx +7 -12
- package/playground/index.html +23 -25
- package/playground/mathquill/index.html +20 -23
- package/playground/mathquill/index.jsx +7 -18
- package/playground/prod-test/index.html +20 -24
- package/playground/prod-test/index.jsx +2 -5
- package/playground/schema-override/data.js +10 -10
- package/playground/schema-override/image-plugin.jsx +3 -3
- package/playground/schema-override/index.html +19 -21
- package/playground/schema-override/index.jsx +12 -12
- package/playground/serialization/data.js +10 -10
- package/playground/serialization/image-plugin.jsx +3 -3
- package/playground/serialization/index.html +20 -22
- package/playground/table-examples.html +8 -5
- package/playground/webpack.config.js +10 -10
- package/src/editor.jsx +77 -101
- package/src/index.jsx +11 -18
- package/src/parse-html.js +1 -1
- package/src/plugins/characters/custom-popper.js +7 -7
- package/src/plugins/characters/index.jsx +19 -25
- package/src/plugins/characters/utils.js +81 -81
- package/src/plugins/image/alt-dialog.jsx +3 -3
- package/src/plugins/image/component.jsx +42 -46
- package/src/plugins/image/image-toolbar.jsx +14 -26
- package/src/plugins/image/index.jsx +21 -23
- package/src/plugins/index.jsx +10 -12
- package/src/plugins/list/index.jsx +10 -10
- package/src/plugins/math/index.jsx +28 -31
- package/src/plugins/media/index.jsx +21 -21
- package/src/plugins/media/media-dialog.js +60 -86
- package/src/plugins/media/media-toolbar.jsx +6 -6
- package/src/plugins/media/media-wrapper.jsx +6 -6
- package/src/plugins/respArea/drag-in-the-blank/choice.jsx +19 -21
- package/src/plugins/respArea/drag-in-the-blank/index.jsx +10 -12
- package/src/plugins/respArea/explicit-constructed-response/index.jsx +5 -5
- package/src/plugins/respArea/icons/index.jsx +8 -8
- package/src/plugins/respArea/index.jsx +21 -31
- package/src/plugins/respArea/inline-dropdown/index.jsx +6 -6
- package/src/plugins/respArea/utils.jsx +12 -12
- package/src/plugins/table/icons/index.jsx +11 -17
- package/src/plugins/table/index.jsx +43 -49
- package/src/plugins/table/table-toolbar.jsx +8 -13
- package/src/plugins/toolbar/default-toolbar.jsx +11 -19
- package/src/plugins/toolbar/done-button.jsx +4 -4
- package/src/plugins/toolbar/editor-and-toolbar.jsx +39 -47
- package/src/plugins/toolbar/index.jsx +2 -2
- package/src/plugins/toolbar/toolbar-buttons.jsx +11 -11
- package/src/plugins/toolbar/toolbar.jsx +34 -47
- package/src/plugins/utils.js +4 -5
- 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.
|
|
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": "^
|
|
14
|
-
"@pie-lib/math-rendering": "^2.5.
|
|
15
|
-
"@pie-lib/math-toolbar": "^1.11.
|
|
16
|
-
"@pie-lib/render-ui": "^4.13.
|
|
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": "
|
|
50
|
+
"gitHead": "f81076118e63884db5f5d65a41cff9aad111137e",
|
|
51
51
|
"scripts": {}
|
|
52
52
|
}
|
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
|
};
|
|
@@ -1,24 +1,22 @@
|
|
|
1
|
-
<!
|
|
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
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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>
|
package/playground/index.html
CHANGED
|
@@ -1,27 +1,25 @@
|
|
|
1
|
-
<!
|
|
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
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
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
|
-
<!
|
|
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
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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
|
-
<!
|
|
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
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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
|
-
<!
|
|
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
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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
|
|