@pie-lib/editable-html 11.1.1 → 11.2.1-beta.0

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 (166) hide show
  1. package/CHANGELOG.md +43 -167
  2. package/NEXT.CHANGELOG.json +1 -0
  3. package/package.json +10 -6
  4. package/src/__tests__/editor.test.jsx +363 -0
  5. package/src/__tests__/serialization.test.js +291 -0
  6. package/src/__tests__/utils.js +36 -0
  7. package/src/block-tags.js +17 -0
  8. package/src/constants.js +7 -0
  9. package/src/editor.jsx +303 -49
  10. package/src/index.jsx +19 -10
  11. package/src/plugins/characters/index.jsx +11 -3
  12. package/src/plugins/characters/utils.js +12 -12
  13. package/src/plugins/css/icons/index.jsx +17 -0
  14. package/src/plugins/css/index.jsx +346 -0
  15. package/src/plugins/customPlugin/index.jsx +85 -0
  16. package/src/plugins/html/index.jsx +9 -6
  17. package/src/plugins/image/__tests__/__snapshots__/component.test.jsx.snap +51 -0
  18. package/src/plugins/image/__tests__/__snapshots__/image-toolbar-logic.test.jsx.snap +27 -0
  19. package/src/plugins/image/__tests__/__snapshots__/image-toolbar.test.jsx.snap +44 -0
  20. package/src/plugins/image/__tests__/component.test.jsx +41 -0
  21. package/src/plugins/image/__tests__/image-toolbar-logic.test.jsx +42 -0
  22. package/src/plugins/image/__tests__/image-toolbar.test.jsx +11 -0
  23. package/src/plugins/image/__tests__/index.test.js +95 -0
  24. package/src/plugins/image/__tests__/insert-image-handler.test.js +113 -0
  25. package/src/plugins/image/__tests__/mock-change.js +15 -0
  26. package/src/plugins/image/index.jsx +2 -1
  27. package/src/plugins/image/insert-image-handler.js +13 -6
  28. package/src/plugins/index.jsx +248 -5
  29. package/src/plugins/list/__tests__/index.test.js +54 -0
  30. package/src/plugins/list/index.jsx +130 -0
  31. package/src/plugins/math/__tests__/__snapshots__/index.test.jsx.snap +48 -0
  32. package/src/plugins/math/__tests__/index.test.jsx +245 -0
  33. package/src/plugins/math/index.jsx +87 -56
  34. package/src/plugins/media/__tests__/index.test.js +75 -0
  35. package/src/plugins/media/index.jsx +3 -2
  36. package/src/plugins/media/media-dialog.js +106 -57
  37. package/src/plugins/rendering/index.js +31 -0
  38. package/src/plugins/respArea/drag-in-the-blank/choice.jsx +4 -1
  39. package/src/plugins/respArea/explicit-constructed-response/index.jsx +10 -8
  40. package/src/plugins/respArea/index.jsx +53 -7
  41. package/src/plugins/respArea/inline-dropdown/index.jsx +13 -6
  42. package/src/plugins/respArea/math-templated/index.jsx +104 -0
  43. package/src/plugins/respArea/utils.jsx +11 -0
  44. package/src/plugins/table/CustomTablePlugin.js +113 -0
  45. package/src/plugins/table/__tests__/__snapshots__/table-toolbar.test.jsx.snap +44 -0
  46. package/src/plugins/table/__tests__/index.test.jsx +401 -0
  47. package/src/plugins/table/__tests__/table-toolbar.test.jsx +42 -0
  48. package/src/plugins/table/index.jsx +46 -59
  49. package/src/plugins/table/table-toolbar.jsx +39 -2
  50. package/src/plugins/textAlign/icons/index.jsx +139 -0
  51. package/src/plugins/textAlign/index.jsx +23 -0
  52. package/src/plugins/toolbar/__tests__/__snapshots__/default-toolbar.test.jsx.snap +923 -0
  53. package/src/plugins/toolbar/__tests__/__snapshots__/editor-and-toolbar.test.jsx.snap +20 -0
  54. package/src/plugins/toolbar/__tests__/__snapshots__/toolbar-buttons.test.jsx.snap +36 -0
  55. package/src/plugins/toolbar/__tests__/__snapshots__/toolbar.test.jsx.snap +46 -0
  56. package/src/plugins/toolbar/__tests__/default-toolbar.test.jsx +94 -0
  57. package/src/plugins/toolbar/__tests__/editor-and-toolbar.test.jsx +37 -0
  58. package/src/plugins/toolbar/__tests__/toolbar-buttons.test.jsx +51 -0
  59. package/src/plugins/toolbar/__tests__/toolbar.test.jsx +106 -0
  60. package/src/plugins/toolbar/default-toolbar.jsx +82 -20
  61. package/src/plugins/toolbar/done-button.jsx +3 -1
  62. package/src/plugins/toolbar/editor-and-toolbar.jsx +18 -13
  63. package/src/plugins/toolbar/toolbar-buttons.jsx +52 -11
  64. package/src/plugins/toolbar/toolbar.jsx +31 -8
  65. package/src/serialization.jsx +213 -38
  66. package/README.md +0 -45
  67. package/deploy.sh +0 -16
  68. package/lib/editor.js +0 -1094
  69. package/lib/editor.js.map +0 -1
  70. package/lib/index.js +0 -253
  71. package/lib/index.js.map +0 -1
  72. package/lib/parse-html.js +0 -16
  73. package/lib/parse-html.js.map +0 -1
  74. package/lib/plugins/characters/custom-popper.js +0 -73
  75. package/lib/plugins/characters/custom-popper.js.map +0 -1
  76. package/lib/plugins/characters/index.js +0 -300
  77. package/lib/plugins/characters/index.js.map +0 -1
  78. package/lib/plugins/characters/utils.js +0 -381
  79. package/lib/plugins/characters/utils.js.map +0 -1
  80. package/lib/plugins/html/icons/index.js +0 -38
  81. package/lib/plugins/html/icons/index.js.map +0 -1
  82. package/lib/plugins/html/index.js +0 -76
  83. package/lib/plugins/html/index.js.map +0 -1
  84. package/lib/plugins/image/alt-dialog.js +0 -129
  85. package/lib/plugins/image/alt-dialog.js.map +0 -1
  86. package/lib/plugins/image/component.js +0 -419
  87. package/lib/plugins/image/component.js.map +0 -1
  88. package/lib/plugins/image/image-toolbar.js +0 -177
  89. package/lib/plugins/image/image-toolbar.js.map +0 -1
  90. package/lib/plugins/image/index.js +0 -262
  91. package/lib/plugins/image/index.js.map +0 -1
  92. package/lib/plugins/image/insert-image-handler.js +0 -152
  93. package/lib/plugins/image/insert-image-handler.js.map +0 -1
  94. package/lib/plugins/index.js +0 -143
  95. package/lib/plugins/index.js.map +0 -1
  96. package/lib/plugins/list/index.js +0 -204
  97. package/lib/plugins/list/index.js.map +0 -1
  98. package/lib/plugins/math/index.js +0 -419
  99. package/lib/plugins/math/index.js.map +0 -1
  100. package/lib/plugins/media/index.js +0 -384
  101. package/lib/plugins/media/index.js.map +0 -1
  102. package/lib/plugins/media/media-dialog.js +0 -668
  103. package/lib/plugins/media/media-dialog.js.map +0 -1
  104. package/lib/plugins/media/media-toolbar.js +0 -101
  105. package/lib/plugins/media/media-toolbar.js.map +0 -1
  106. package/lib/plugins/media/media-wrapper.js +0 -93
  107. package/lib/plugins/media/media-wrapper.js.map +0 -1
  108. package/lib/plugins/respArea/drag-in-the-blank/choice.js +0 -251
  109. package/lib/plugins/respArea/drag-in-the-blank/choice.js.map +0 -1
  110. package/lib/plugins/respArea/drag-in-the-blank/index.js +0 -97
  111. package/lib/plugins/respArea/drag-in-the-blank/index.js.map +0 -1
  112. package/lib/plugins/respArea/explicit-constructed-response/index.js +0 -55
  113. package/lib/plugins/respArea/explicit-constructed-response/index.js.map +0 -1
  114. package/lib/plugins/respArea/icons/index.js +0 -95
  115. package/lib/plugins/respArea/icons/index.js.map +0 -1
  116. package/lib/plugins/respArea/index.js +0 -293
  117. package/lib/plugins/respArea/index.js.map +0 -1
  118. package/lib/plugins/respArea/inline-dropdown/index.js +0 -70
  119. package/lib/plugins/respArea/inline-dropdown/index.js.map +0 -1
  120. package/lib/plugins/respArea/utils.js +0 -110
  121. package/lib/plugins/respArea/utils.js.map +0 -1
  122. package/lib/plugins/table/icons/index.js +0 -69
  123. package/lib/plugins/table/icons/index.js.map +0 -1
  124. package/lib/plugins/table/index.js +0 -499
  125. package/lib/plugins/table/index.js.map +0 -1
  126. package/lib/plugins/table/table-toolbar.js +0 -158
  127. package/lib/plugins/table/table-toolbar.js.map +0 -1
  128. package/lib/plugins/toolbar/default-toolbar.js +0 -174
  129. package/lib/plugins/toolbar/default-toolbar.js.map +0 -1
  130. package/lib/plugins/toolbar/done-button.js +0 -50
  131. package/lib/plugins/toolbar/done-button.js.map +0 -1
  132. package/lib/plugins/toolbar/editor-and-toolbar.js +0 -287
  133. package/lib/plugins/toolbar/editor-and-toolbar.js.map +0 -1
  134. package/lib/plugins/toolbar/index.js +0 -34
  135. package/lib/plugins/toolbar/index.js.map +0 -1
  136. package/lib/plugins/toolbar/toolbar-buttons.js +0 -161
  137. package/lib/plugins/toolbar/toolbar-buttons.js.map +0 -1
  138. package/lib/plugins/toolbar/toolbar.js +0 -352
  139. package/lib/plugins/toolbar/toolbar.js.map +0 -1
  140. package/lib/plugins/utils.js +0 -62
  141. package/lib/plugins/utils.js.map +0 -1
  142. package/lib/serialization.js +0 -488
  143. package/lib/serialization.js.map +0 -1
  144. package/lib/theme.js +0 -9
  145. package/lib/theme.js.map +0 -1
  146. package/playground/image/data.js +0 -59
  147. package/playground/image/index.html +0 -22
  148. package/playground/image/index.jsx +0 -81
  149. package/playground/index.html +0 -25
  150. package/playground/mathquill/index.html +0 -22
  151. package/playground/mathquill/index.jsx +0 -155
  152. package/playground/package.json +0 -15
  153. package/playground/prod-test/index.html +0 -22
  154. package/playground/prod-test/index.jsx +0 -28
  155. package/playground/schema-override/data.js +0 -29
  156. package/playground/schema-override/image-plugin.jsx +0 -41
  157. package/playground/schema-override/index.html +0 -21
  158. package/playground/schema-override/index.jsx +0 -97
  159. package/playground/serialization/data.js +0 -29
  160. package/playground/serialization/image-plugin.jsx +0 -41
  161. package/playground/serialization/index.html +0 -22
  162. package/playground/serialization/index.jsx +0 -12
  163. package/playground/static.json +0 -3
  164. package/playground/table-examples.html +0 -70
  165. package/playground/webpack.config.js +0 -42
  166. package/static.json +0 -1
package/playground/image/index.jsx DELETED
@@ -1,81 +0,0 @@
1
- import imageData from './data';
2
-
3
- import React from 'react';
4
- import ReactDOM from 'react-dom';
5
- import { Editor } from 'slate-react';
6
- import { Range, Block, Value } from 'slate';
7
- import EditableEditor from '../../src/backup-editor';
8
- class Img extends React.Component {
9
- render() {
10
- const { data } = this.props.node;
11
- const src = data.get('src');
12
-
13
- return <img src={src} width={100} />;
14
- }
15
- }
16
-
17
- const ImgPlugin = () => {
18
- return {
19
- renderNode: (props) => {
20
- if (props.node.type === 'image') {
21
- return <Img {...props} />;
22
- }
23
- },
24
- onKeyDown(event, change, editor) {
25
- const { startKey } = change.value.selection;
26
- const n = change.value.document.getDescendant(startKey);
27
- const p = change.value.document.getParent(n.key);
28
-
29
- if (p.type === 'image') {
30
- const block = Block.fromJSON({ type: 'div' });
31
- const range = Range.fromJSON({
32
- anchorKey: block.key,
33
- anchorOffset: 0,
34
- focusKey: block.key,
35
- focusOffset: 0,
36
- isFocused: true,
37
- isBackward: false,
38
- });
39
- change.insertBlockAtRange(change.value.selection, block).select(range);
40
- }
41
- },
42
- };
43
- };
44
-
45
- export default ImgPlugin;
46
-
47
- class ImageDemo extends React.Component {
48
- constructor(props) {
49
- super(props);
50
- this.state = {
51
- value: Value.fromJSON(imageData),
52
- };
53
-
54
- this.plugins = [ImgPlugin()];
55
- }
56
-
57
- render() {
58
- const { value } = this.state;
59
-
60
- return (
61
- <div>
62
- ImageDemo
63
- <hr />
64
- This demo tests adding text between images. click on the image and type some text...
65
- <hr />
66
- <Editor value={value} onChange={(change) => this.setState({ value: change.value })} plugins={this.plugins} />
67
- <EditableEditor
68
- value={value}
69
- onChange={(change) => this.setState({ value: change.value })}
70
- plugins={this.plugins}
71
- />
72
- </div>
73
- );
74
- }
75
- }
76
-
77
- document.addEventListener('DOMContentLoaded', () => {
78
- const el = React.createElement(ImageDemo, {});
79
-
80
- ReactDOM.render(el, document.querySelector('#app'));
81
- });
package/playground/index.html DELETED
@@ -1,25 +0,0 @@
1
- <!DOCTYPE html>
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
-
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>
package/playground/mathquill/index.html DELETED
@@ -1,22 +0,0 @@
1
- <!DOCTYPE html>
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
-
19
- <body>
20
- <div id="app"></div>
21
- </body>
22
- </html>
package/playground/mathquill/index.jsx DELETED
@@ -1,155 +0,0 @@
1
- import React from 'react';
2
- import ReactDOM from 'react-dom';
3
- import PropTypes from 'prop-types';
4
- import debug from 'debug';
5
- import { debounce } from 'lodash';
6
-
7
- let MQ;
8
- if (typeof window !== 'undefined') {
9
- const MathQuill = require('@pie-framework/mathquill');
10
- MQ = MathQuill.getInterface(2);
11
- }
12
-
13
- const log = debug('@pie-lib:editable-html:plugins:math:mathquill:editor');
14
-
15
- export default class Editor extends React.Component {
16
- static propTypes = {
17
- onClick: PropTypes.func,
18
- onChange: PropTypes.func.isRequired,
19
- latex: PropTypes.string.isRequired,
20
- onFocus: PropTypes.func,
21
- onBlur: PropTypes.func,
22
- className: PropTypes.string,
23
- };
24
-
25
- componentDidMount() {
26
- if (!MQ) {
27
- throw new Error('MQ is not defined - but component has mounted?');
28
- }
29
-
30
- this.mathField = MQ.MathField(this.input, {
31
- handlers: {
32
- edit: this.onInputEdit.bind(this),
33
- },
34
- });
35
- this.mathField.latex(this.props.latex);
36
- }
37
-
38
- componentDidUpdate() {
39
- log('[componentDidUpdate] latex: ', this.props.latex);
40
-
41
- if (this.mathField) {
42
- this.mathField.latex(this.props.latex);
43
- }
44
- }
45
-
46
- clear() {
47
- this.mathField.latex('');
48
- return '';
49
- }
50
-
51
- blur() {
52
- log('blur mathfield');
53
-
54
- this.mathField.blur();
55
- }
56
-
57
- focus() {
58
- log('focus mathfield...');
59
-
60
- this.mathField.focus();
61
- }
62
-
63
- command(v) {
64
- this.mathField.cmd(v);
65
- this.mathField.focus();
66
-
67
- return this.mathField.latex();
68
- }
69
-
70
- keystroke(v) {
71
- this.mathField.keystroke(v);
72
- this.mathField.focus();
73
-
74
- return this.mathField.latex();
75
- }
76
-
77
- write(v) {
78
- this.mathField.write(v);
79
- this.mathField.focus();
80
-
81
- return this.mathField.latex();
82
- }
83
-
84
- latex() {
85
- if (this.mathField) {
86
- return this.mathField.latex();
87
- }
88
- }
89
-
90
- _onInputEdit = (event) => {
91
- log('[onInputEdit] ...', event);
92
-
93
- if (!this.mathField) {
94
- return;
95
- }
96
-
97
- if (this.latexIsEqual(this.mathField.latex(), this.props.latex)) {
98
- return;
99
- }
100
-
101
- this.props.onChange(this.mathField.latex());
102
- };
103
-
104
- onInputEdit = debounce(this._onInputEdit, 300, {
105
- leading: false,
106
- trailing: true,
107
- });
108
-
109
- latexIsEqual = (a, b) => {
110
- if (!a && !b) {
111
- return true;
112
- }
113
-
114
- if ((a && !b) || (!a && b)) {
115
- return false;
116
- }
117
-
118
- return a.trim().replace(/\s/g, '') === b.trim().replace(/\s/, '');
119
- };
120
-
121
- shouldComponentUpdate(nextProps) {
122
- log('[shouldComponentUpdate] nextProps.latex: ', nextProps.latex, 'current: ', this.mathField.latex());
123
-
124
- const isEqual = this.latexIsEqual(nextProps.latex, this.mathField.latex());
125
-
126
- log('[shouldComponentUpdate] isEqual? ', isEqual);
127
-
128
- return !isEqual;
129
- }
130
-
131
- render() {
132
- log('[render] this.props.latex:', this.props.latex);
133
- const { onClick, onFocus, onBlur, className } = this.props;
134
-
135
- return (
136
- <span onClick={onClick} onFocus={onFocus} onBlur={onBlur} className={className} ref={(r) => (this.input = r)} />
137
- );
138
- }
139
- }
140
-
141
- class Demo extends React.Component {
142
- constructor(props) {
143
- super(props);
144
- }
145
- render() {
146
- const latex = '- \\frac{1}{2}';
147
-
148
- return <Editor latex={latex} onChange={() => ({})} />;
149
- }
150
- }
151
-
152
- document.addEventListener('DOMContentLoaded', () => {
153
- const el = React.createElement(Demo, {});
154
- ReactDOM.render(el, document.querySelector('#app'));
155
- });
package/playground/package.json DELETED
@@ -1,15 +0,0 @@
1
- {
2
- "name": "editable-html-playground",
3
- "private": true,
4
- "devDependencies": {
5
- "webpack": "^4.6.0",
6
- "webpack-cli": "^2.0.15",
7
- "babel-core": "^6.26.0",
8
- "webpack-dev-server": "^3.1.3",
9
- "babel-preset-react": "^6.24.1",
10
- "babel-preset-env": "^1.6.1",
11
- "babel-preset-stage-0": "^6.24.1",
12
- "babel-loader": "^7.1.4",
13
- "url-loader": "^1.0.1"
14
- }
15
- }
package/playground/prod-test/index.html DELETED
@@ -1,22 +0,0 @@
1
- <!DOCTYPE html>
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
-
19
- <body>
20
- <div id="app"></div>
21
- </body>
22
- </html>
package/playground/prod-test/index.jsx DELETED
@@ -1,28 +0,0 @@
1
- import React from 'react';
2
- import ReactDOM from 'react-dom';
3
- import EditableHtml from '../../src/index';
4
-
5
- class ProdTest extends React.Component {
6
- constructor(props) {
7
- super(props);
8
- this.state = {
9
- markup: 'hi',
10
- };
11
- }
12
-
13
- render() {
14
- return (
15
- <div>
16
- EditableHtml and react production
17
- <hr />
18
- <EditableHtml markup={this.state.markup} onChange={(markup) => this.setState({ markup })} />
19
- </div>
20
- );
21
- }
22
- }
23
-
24
- document.addEventListener('DOMContentLoaded', () => {
25
- const el = React.createElement(ProdTest, {});
26
-
27
- ReactDOM.render(el, document.querySelector('#app'));
28
- });
package/playground/schema-override/data.js DELETED
@@ -1,29 +0,0 @@
1
- module.exports = {
2
- document: {
3
- nodes: [
4
- {
5
- object: 'block',
6
- type: 'paragraph',
7
- nodes: [
8
- {
9
- object: 'inline',
10
- type: 'image',
11
- isVoid: true,
12
- data: {
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
- },
16
- },
17
- {
18
- object: 'text',
19
- leaves: [
20
- {
21
- text: 'hi',
22
- },
23
- ],
24
- },
25
- ],
26
- },
27
- ],
28
- },
29
- };
package/playground/schema-override/image-plugin.jsx DELETED
@@ -1,41 +0,0 @@
1
- import React from 'react';
2
- import { Block, Range } from 'slate';
3
-
4
- class Img extends React.Component {
5
- render() {
6
- const { data } = this.props.node;
7
- const src = data.get('src');
8
-
9
- return <img src={src} width={100} />;
10
- }
11
- }
12
-
13
- const ImgPlugin = () => {
14
- return {
15
- renderNode: (props) => {
16
- if (props.node.type === 'image') {
17
- return <Img {...props} />;
18
- }
19
- },
20
- onKeyDown(event, change, editor) {
21
- const { startKey } = change.value.selection;
22
- const n = change.value.document.getDescendant(startKey);
23
- const p = change.value.document.getParent(n.key);
24
-
25
- if (p.type === 'image') {
26
- const block = Block.fromJSON({ type: 'div' });
27
- const range = Range.fromJSON({
28
- anchorKey: block.key,
29
- anchorOffset: 0,
30
- focusKey: block.key,
31
- focusOffset: 0,
32
- isFocused: true,
33
- isBackward: false,
34
- });
35
- change.insertBlockAtRange(change.value.selection, block).select(range);
36
- }
37
- },
38
- };
39
- };
40
-
41
- export default ImgPlugin;
package/playground/schema-override/index.html DELETED
@@ -1,21 +0,0 @@
1
- <!DOCTYPE html>
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
-
18
- <body>
19
- <div id="app"></div>
20
- </body>
21
- </html>
package/playground/schema-override/index.jsx DELETED
@@ -1,97 +0,0 @@
1
- import React from 'react';
2
- import ReactDOM from 'react-dom';
3
- import { Value, Schema } from 'slate';
4
- import data from './data';
5
- import { Editor } from 'slate-react';
6
- import ImgPlugin from './image-plugin';
7
-
8
- const schema = {
9
- document: {
10
- nodes: [
11
- {
12
- match: [{ type: 'paragraph' }, { type: 'image' }],
13
- },
14
- ],
15
- },
16
- blocks: {
17
- paragraph: {
18
- nodes: [
19
- {
20
- match: [{ type: 'image' }, { object: 'text' }],
21
- },
22
- ],
23
- },
24
- },
25
- inlines: {
26
- image: {
27
- isVoid: true,
28
- },
29
- },
30
- };
31
-
32
- // const raw = new Schema();
33
-
34
- // raw.rules.push({
35
- // match: {
36
- // object: 'block',
37
- // first: { object: 'block' }
38
- // },
39
- // nodes: [
40
- // {
41
- // match: { object: 'block' }
42
- // }
43
- // ],
44
- // normalize: error => {
45
- // console.log('override the defaults! where we force only blocks');
46
- // }
47
- // });
48
-
49
- // raw.rules.push({
50
- // match: {
51
- // object: 'block',
52
- // first: [{ object: 'inline' }, { object: 'text' }]
53
- // },
54
- // nodes: [
55
- // {
56
- // match: [{ object: 'inline' }, { object: 'text' }]
57
- // }
58
- // ],
59
- // normalize: error => {
60
- // console.log('override the defaults! where we force only inline/text');
61
- // }
62
- // });
63
-
64
- // const s = Schema.fromJSON(schema);
65
- // const v = Value.fromJSON(data, { normalize: false });
66
- // const error = s.validateNode(v.document.nodes.get(0));
67
- // const rawError = raw.validateNode(v.document.nodes.get(0));
68
- // console.log('error: ', error, 'rawError', rawError);
69
-
70
- class App extends React.Component {
71
- constructor(props) {
72
- super(props);
73
- this.state = {
74
- value: Value.fromJSON(data, { normalize: false }),
75
- };
76
-
77
- this.plugins = [ImgPlugin()];
78
- }
79
-
80
- render() {
81
- return (
82
- <Editor
83
- value={this.state.value}
84
- plugins={this.plugins}
85
- schema={schema}
86
- renderNode={this.renderNode}
87
- onChange={(change) => this.setState({ value: change.value })}
88
- />
89
- );
90
- }
91
- }
92
-
93
- document.addEventListener('DOMContentLoaded', () => {
94
- const el = React.createElement(App, {});
95
-
96
- ReactDOM.render(el, document.querySelector('#app'));
97
- });
package/playground/serialization/data.js DELETED
@@ -1,29 +0,0 @@
1
- module.exports = {
2
- document: {
3
- nodes: [
4
- {
5
- object: 'block',
6
- type: 'paragraph',
7
- nodes: [
8
- {
9
- object: 'inline',
10
- type: 'image',
11
- isVoid: true,
12
- data: {
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
- },
16
- },
17
- {
18
- object: 'text',
19
- leaves: [
20
- {
21
- text: 'hi',
22
- },
23
- ],
24
- },
25
- ],
26
- },
27
- ],
28
- },
29
- };
package/playground/serialization/image-plugin.jsx DELETED
@@ -1,41 +0,0 @@
1
- import React from 'react';
2
- import { Block, Range } from 'slate';
3
-
4
- class Img extends React.Component {
5
- render() {
6
- const { data } = this.props.node;
7
- const src = data.get('src');
8
-
9
- return <img src={src} width={100} />;
10
- }
11
- }
12
-
13
- const ImgPlugin = () => {
14
- return {
15
- renderNode: (props) => {
16
- if (props.node.type === 'image') {
17
- return <Img {...props} />;
18
- }
19
- },
20
- onKeyDown(event, change, editor) {
21
- const { startKey } = change.value.selection;
22
- const n = change.value.document.getDescendant(startKey);
23
- const p = change.value.document.getParent(n.key);
24
-
25
- if (p.type === 'image') {
26
- const block = Block.fromJSON({ type: 'div' });
27
- const range = Range.fromJSON({
28
- anchorKey: block.key,
29
- anchorOffset: 0,
30
- focusKey: block.key,
31
- focusOffset: 0,
32
- isFocused: true,
33
- isBackward: false,
34
- });
35
- change.insertBlockAtRange(change.value.selection, block).select(range);
36
- }
37
- },
38
- };
39
- };
40
-
41
- export default ImgPlugin;
package/playground/serialization/index.html DELETED
@@ -1,22 +0,0 @@
1
- <!DOCTYPE html>
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
-
19
- <body>
20
- <div id="app"></div>
21
- </body>
22
- </html>
package/playground/serialization/index.jsx DELETED
@@ -1,12 +0,0 @@
1
- import { htmlToValue } from '../../src/serialization';
2
-
3
- const html = `<div>
4
- <p>
5
- foo
6
- <img src="img.jpg"/>
7
- bar
8
- </p>
9
- </div>`;
10
- const v = htmlToValue(html);
11
-
12
- console.log('v: ', JSON.stringify(v.toJSON(), null, ' '));
package/playground/static.json DELETED
@@ -1,3 +0,0 @@
1
- {
2
- "root": "."
3
- }