@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
@@ -1,668 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = exports.MediaDialog = void 0;
9
-
10
- var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
11
-
12
- var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
13
-
14
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
15
-
16
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
17
-
18
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
19
-
20
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
21
-
22
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
23
-
24
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
25
-
26
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
27
-
28
- var _react = _interopRequireDefault(require("react"));
29
-
30
- var _propTypes = _interopRequireDefault(require("prop-types"));
31
-
32
- var _debug = _interopRequireDefault(require("debug"));
33
-
34
- var _renderUi = require("@pie-lib/render-ui");
35
-
36
- var _styles = require("@material-ui/core/styles");
37
-
38
- var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
39
-
40
- var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
41
-
42
- var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
43
-
44
- var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
45
-
46
- var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
47
-
48
- var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
49
-
50
- var _DialogContentText = _interopRequireDefault(require("@material-ui/core/DialogContentText"));
51
-
52
- var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
53
-
54
- var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
55
-
56
- var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
57
-
58
- var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
59
-
60
- var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
61
-
62
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
63
-
64
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
65
-
66
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
67
-
68
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
69
-
70
- var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:media:dialog');
71
-
72
- var matchYoutubeUrl = function matchYoutubeUrl(url) {
73
- if (!url) {
74
- return false;
75
- }
76
-
77
- var p = /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
78
-
79
- if (url.match(p)) {
80
- return url.match(p)[1];
81
- }
82
-
83
- return false;
84
- };
85
-
86
- var matchVimeoUrl = function matchVimeoUrl(url) {
87
- return url && /(http|https)?:\/\/(www\.)?(player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|)(video\/)?(\d+)(?:|\/\?)/.test(url);
88
- };
89
-
90
- var matchSoundCloudUrl = function matchSoundCloudUrl(url) {
91
- if (!url) {
92
- return false;
93
- }
94
-
95
- var regexp = /^https?:\/\/(soundcloud\.com|snd\.sc)\/(.*)$/;
96
- return url.match(regexp) && url.match(regexp)[2];
97
- };
98
-
99
- var makeApiRequest = function makeApiRequest(url) {
100
- return new Promise(function (resolve) {
101
- try {
102
- fetch("https://soundcloud.com/oembed?format=json&url=".concat(url)).then(function (response) {
103
- return response.json();
104
- }).then(function (json) {
105
- var d = document.createElement('div');
106
- d.innerHTML = json.html;
107
- var iframe = d.querySelector('iframe');
108
- resolve(iframe.src);
109
- })["catch"](function (err) {
110
- resolve('');
111
- log(err);
112
- });
113
- } catch (err) {
114
- resolve('');
115
- }
116
- });
117
- };
118
-
119
- var typeMap = {
120
- video: 'Video',
121
- audio: 'Audio'
122
- };
123
-
124
- var MediaDialog = /*#__PURE__*/function (_React$Component) {
125
- (0, _inherits2["default"])(MediaDialog, _React$Component);
126
-
127
- var _super = _createSuper(MediaDialog);
128
-
129
- function MediaDialog(props) {
130
- var _this;
131
-
132
- (0, _classCallCheck2["default"])(this, MediaDialog);
133
- _this = _super.call(this, props);
134
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "formatUrl", function () {
135
- var _this$state = _this.state,
136
- url = _this$state.url,
137
- urlToUse = _this$state.urlToUse,
138
- starts = _this$state.starts,
139
- ends = _this$state.ends;
140
- var isYoutube = matchYoutubeUrl(url);
141
- var isVimeo = matchVimeoUrl(url);
142
- var formattedUrl = urlToUse;
143
-
144
- if ((isYoutube || isVimeo) && urlToUse) {
145
- var params = [];
146
- var paramName;
147
- var paramStart;
148
-
149
- switch (true) {
150
- case isVimeo:
151
- paramName = 't';
152
- paramStart = '#';
153
- break;
154
-
155
- case isYoutube:
156
- paramName = 'start';
157
- paramStart = '?';
158
- break;
159
-
160
- default:
161
- paramName = 'start';
162
- paramStart = '?';
163
- }
164
-
165
- if (starts) {
166
- params.push("".concat(paramName, "=").concat(starts));
167
- }
168
-
169
- if (ends) {
170
- params.push("end=".concat(ends));
171
- }
172
-
173
- formattedUrl = "".concat(urlToUse).concat(params.length ? paramStart : '').concat(params.join('&'));
174
- }
175
-
176
- var callback = function callback() {
177
- return _this.setState({
178
- formattedUrl: formattedUrl,
179
- updating: false
180
- });
181
- };
182
-
183
- _this.setState({
184
- formattedUrl: null,
185
- updating: true
186
- }, callback);
187
- });
188
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleStateChange", function (newState) {
189
- return _this.setState(newState, _this.formatUrl);
190
- });
191
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "urlChange", function (e) {
192
- var _ref = e.target || {},
193
- value = _ref.value;
194
-
195
- var type = _this.props.type;
196
-
197
- if (type && type === 'audio') {
198
- if (matchSoundCloudUrl(value)) {
199
- makeApiRequest(value).then(function (urlToUse) {
200
- _this.handleStateChange({
201
- urlToUse: urlToUse,
202
- invalid: !urlToUse,
203
- url: value
204
- });
205
- })["catch"](log);
206
- return;
207
- }
208
- } else if (type && type === 'video') {
209
- if (matchYoutubeUrl(value)) {
210
- var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
211
- var match = value.match(regExp);
212
- var id = match[2];
213
- var urlToUse = "https://youtube.com/embed/".concat(id);
214
- log('is youtube');
215
-
216
- _this.handleStateChange({
217
- urlToUse: urlToUse,
218
- url: value,
219
- invalid: false
220
- });
221
-
222
- return;
223
- }
224
-
225
- if (matchVimeoUrl(value)) {
226
- var _id = value.replace(/.*vimeo.com\/(.*)/g, '$1');
227
-
228
- var _urlToUse2 = "https://player.vimeo.com/video/".concat(_id);
229
-
230
- log('is vimeo');
231
-
232
- _this.handleStateChange({
233
- urlToUse: _urlToUse2,
234
- url: value,
235
- ends: null,
236
- invalid: false
237
- });
238
-
239
- return;
240
- }
241
- }
242
-
243
- _this.handleStateChange({
244
- urlToUse: null,
245
- url: null,
246
- invalid: true
247
- });
248
- });
249
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeHandler", function (type) {
250
- return function (e) {
251
- return _this.handleStateChange((0, _defineProperty2["default"])({}, type, e.target.value));
252
- };
253
- });
254
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDone", function (val) {
255
- var handleClose = _this.props.handleClose;
256
- var _this$state2 = _this.state,
257
- tabValue = _this$state2.tabValue,
258
- fileUpload = _this$state2.fileUpload;
259
- var isInsertURL = tabValue === 0;
260
-
261
- if (!val) {
262
- if (fileUpload.url) {
263
- _this.handleRemoveFile();
264
- }
265
-
266
- handleClose(val);
267
- return;
268
- }
269
-
270
- if (isInsertURL) {
271
- var _this$state3 = _this.state,
272
- ends = _this$state3.ends,
273
- height = _this$state3.height,
274
- url = _this$state3.url,
275
- urlToUse = _this$state3.urlToUse,
276
- formattedUrl = _this$state3.formattedUrl,
277
- starts = _this$state3.starts,
278
- width = _this$state3.width;
279
- handleClose(val, {
280
- tag: 'iframe',
281
- ends: ends,
282
- height: height,
283
- starts: starts,
284
- width: width,
285
- url: url,
286
- urlToUse: urlToUse,
287
- src: formattedUrl
288
- });
289
- return;
290
- }
291
-
292
- if (!fileUpload.loading) {
293
- handleClose(val, {
294
- tag: 'audio',
295
- src: fileUpload.url
296
- });
297
- return;
298
- }
299
-
300
- _this.setState({
301
- fileUpload: _objectSpread(_objectSpread({}, fileUpload), {}, {
302
- scheduled: true
303
- })
304
- });
305
- });
306
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleUploadFile", /*#__PURE__*/function () {
307
- var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
308
- var fileChosen, reader;
309
- return _regenerator["default"].wrap(function _callee$(_context) {
310
- while (1) {
311
- switch (_context.prev = _context.next) {
312
- case 0:
313
- e.preventDefault();
314
-
315
- _this.setState({
316
- fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
317
- error: null,
318
- loading: true
319
- })
320
- });
321
-
322
- fileChosen = e.target.files[0];
323
- reader = new FileReader();
324
-
325
- reader.onload = function () {
326
- var dataURL = reader.result;
327
-
328
- _this.setState({
329
- fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
330
- url: dataURL
331
- })
332
- });
333
- };
334
-
335
- reader.readAsDataURL(fileChosen);
336
-
337
- _this.props.uploadSoundSupport.add({
338
- fileChosen: fileChosen,
339
- done: function done(err, src) {
340
- log('done: err:', err);
341
-
342
- if (err) {
343
- //eslint-disable-next-line
344
- console.log(err);
345
-
346
- _this.setState({
347
- fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
348
- scheduled: false,
349
- loading: false,
350
- error: err
351
- })
352
- });
353
-
354
- return;
355
- }
356
-
357
- var fileUpload = _this.state.fileUpload;
358
- var callback = fileUpload && fileUpload.scheduled ? _this.handleDone.bind((0, _assertThisInitialized2["default"])(_this), true) : undefined;
359
-
360
- _this.setState({
361
- fileUpload: _objectSpread(_objectSpread({}, fileUpload), {}, {
362
- scheduled: false,
363
- loading: false,
364
- url: src
365
- })
366
- }, callback);
367
- }
368
- });
369
-
370
- case 7:
371
- case "end":
372
- return _context.stop();
373
- }
374
- }
375
- }, _callee);
376
- }));
377
-
378
- return function (_x) {
379
- return _ref2.apply(this, arguments);
380
- };
381
- }());
382
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleRemoveFile", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
383
- return _regenerator["default"].wrap(function _callee2$(_context2) {
384
- while (1) {
385
- switch (_context2.prev = _context2.next) {
386
- case 0:
387
- _this.props.uploadSoundSupport["delete"](_this.state.fileUpload.url, function (err) {
388
- if (err) {
389
- //eslint-disable-next-line
390
- console.log(err);
391
-
392
- _this.setState({
393
- fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
394
- error: err
395
- })
396
- });
397
- }
398
- }); // we should put it inside uploadSoundSupport.delete but we can leave it here for testing purposes
399
-
400
-
401
- _this.setState({
402
- fileUpload: _objectSpread(_objectSpread({}, _this.state.fileUpload), {}, {
403
- loading: false,
404
- url: ''
405
- })
406
- });
407
-
408
- case 2:
409
- case "end":
410
- return _context2.stop();
411
- }
412
- }
413
- }, _callee2);
414
- })));
415
- var _src = props.src,
416
- _starts = props.starts,
417
- _ends = props.ends,
418
- _height = props.height,
419
- _url = props.url,
420
- _urlToUse = props.urlToUse,
421
- _width = props.width;
422
- _this.state = {
423
- ends: _ends || 0,
424
- url: _url,
425
- urlToUse: _urlToUse,
426
- formattedUrl: _src,
427
- height: _height || 315,
428
- invalid: false,
429
- starts: _starts || 0,
430
- width: _width || 560,
431
- tabValue: 0,
432
- fileUpload: {
433
- error: null,
434
- loading: false,
435
- scheduled: false,
436
- url: ''
437
- }
438
- };
439
- return _this;
440
- }
441
-
442
- (0, _createClass2["default"])(MediaDialog, [{
443
- key: "componentDidMount",
444
- value: function componentDidMount() {
445
- if (this.props.url) {
446
- this.urlChange({
447
- target: {
448
- value: this.props.url
449
- }
450
- });
451
- }
452
- }
453
- }, {
454
- key: "render",
455
- value: function render() {
456
- var _this2 = this;
457
-
458
- var _this$props = this.props,
459
- classes = _this$props.classes,
460
- open = _this$props.open,
461
- disablePortal = _this$props.disablePortal,
462
- type = _this$props.type,
463
- edit = _this$props.edit,
464
- uploadSoundSupport = _this$props.uploadSoundSupport;
465
- var _this$state4 = this.state,
466
- ends = _this$state4.ends,
467
- height = _this$state4.height,
468
- invalid = _this$state4.invalid,
469
- starts = _this$state4.starts,
470
- width = _this$state4.width,
471
- url = _this$state4.url,
472
- formattedUrl = _this$state4.formattedUrl,
473
- updating = _this$state4.updating,
474
- tabValue = _this$state4.tabValue,
475
- fileUpload = _this$state4.fileUpload;
476
- var isYoutube = matchYoutubeUrl(url);
477
- var isInsertURL = tabValue === 0;
478
- var isUploadMedia = tabValue === 1;
479
- var submitIsDisabled = isInsertURL ? invalid || url === null || url === undefined : !fileUpload.url || fileUpload.scheduled;
480
- return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
481
- classes: {
482
- paper: classes.paper
483
- },
484
- disablePortal: disablePortal,
485
- open: open,
486
- onClose: function onClose() {
487
- return _this2.handleDone(false);
488
- },
489
- "aria-labelledby": "form-dialog-title"
490
- }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
491
- id: "form-dialog-title"
492
- }, "Insert ", typeMap[type]), /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
493
- className: classes.row
494
- }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
495
- indicatorColor: "primary",
496
- value: tabValue,
497
- onChange: function onChange(event, value) {
498
- _this2.setState({
499
- tabValue: value
500
- });
501
- }
502
- }, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
503
- label: type === 'video' ? 'Insert YouTube or Vimeo URL' : 'Insert SoundCloud URL'
504
- }), uploadSoundSupport !== null && uploadSoundSupport !== void 0 && uploadSoundSupport.add && uploadSoundSupport !== null && uploadSoundSupport !== void 0 && uploadSoundSupport["delete"] && type !== 'video' ? /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
505
- label: "Upload file"
506
- }) : null)), isInsertURL && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
507
- autoFocus: true,
508
- error: invalid,
509
- helperText: invalid ? 'Invalid URL' : '',
510
- margin: "dense",
511
- id: "name",
512
- label: "URL",
513
- placeholder: "Paste URL of ".concat(type, "..."),
514
- type: "text",
515
- onChange: this.urlChange,
516
- value: url,
517
- fullWidth: true
518
- }), type === 'video' && /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
519
- classes: {
520
- root: classes.properties
521
- }
522
- }, /*#__PURE__*/_react["default"].createElement(_DialogContentText["default"], null, "Video Properties"), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
523
- autoFocus: true,
524
- margin: "dense",
525
- id: "width",
526
- label: "Width",
527
- type: "number",
528
- placeholder: "Width",
529
- value: width,
530
- onChange: this.changeHandler('width')
531
- }), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
532
- autoFocus: true,
533
- margin: "dense",
534
- id: "height",
535
- label: "Height",
536
- type: "number",
537
- placeholder: "Height",
538
- value: height,
539
- onChange: this.changeHandler('height')
540
- })), formattedUrl && /*#__PURE__*/_react["default"].createElement("iframe", {
541
- width: width,
542
- height: height,
543
- src: formattedUrl,
544
- frameBorder: "0",
545
- allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
546
- allowFullScreen: true
547
- }), type === 'video' && (formattedUrl || updating) && !invalid && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
548
- classes: {
549
- root: classes.properties
550
- }
551
- }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
552
- autoFocus: true,
553
- margin: "dense",
554
- id: "starts",
555
- label: "Starts",
556
- type: "number",
557
- placeholder: "Starts",
558
- value: starts,
559
- onChange: this.changeHandler('starts')
560
- }), isYoutube && /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
561
- autoFocus: true,
562
- margin: "dense",
563
- id: "ends",
564
- label: "Ends",
565
- type: "number",
566
- placeholder: "Ends",
567
- value: ends,
568
- onChange: this.changeHandler('ends')
569
- })))), isUploadMedia && /*#__PURE__*/_react["default"].createElement("div", {
570
- className: classes.uploadInput
571
- }, /*#__PURE__*/_react["default"].createElement("div", null, fileUpload.url ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
572
- className: classes.row
573
- }, /*#__PURE__*/_react["default"].createElement("audio", {
574
- controls: "controls"
575
- }, /*#__PURE__*/_react["default"].createElement("source", {
576
- type: "audio/mp3",
577
- src: fileUpload.url
578
- })), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
579
- "aria-label": "delete",
580
- className: classes.deleteIcon,
581
- onClick: this.handleRemoveFile
582
- }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null))), !fileUpload.scheduled && fileUpload.loading ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
583
- variant: "subheading"
584
- }, "Loading...") : null, fileUpload.scheduled ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
585
- variant: "subheading"
586
- }, "Waiting for Upload to finish, then inserting item...") : null) : !fileUpload.loading ? /*#__PURE__*/_react["default"].createElement("input", {
587
- accept: "audio/*",
588
- className: classes.input,
589
- onChange: this.handleUploadFile,
590
- type: "file"
591
- }) : null, !!fileUpload.error && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
592
- className: classes.error,
593
- variant: "caption"
594
- }, fileUpload.error))))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
595
- onClick: function onClick() {
596
- return _this2.handleDone(false);
597
- },
598
- color: "primary"
599
- }, "Cancel"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
600
- disabled: submitIsDisabled,
601
- onClick: function onClick() {
602
- return _this2.handleDone(true);
603
- },
604
- color: "primary"
605
- }, edit ? 'Update' : 'Insert')));
606
- }
607
- }]);
608
- return MediaDialog;
609
- }(_react["default"].Component);
610
-
611
- exports.MediaDialog = MediaDialog;
612
- (0, _defineProperty2["default"])(MediaDialog, "propTypes", {
613
- classes: _propTypes["default"].object.isRequired,
614
- open: _propTypes["default"].bool,
615
- edit: _propTypes["default"].bool,
616
- disablePortal: _propTypes["default"].bool,
617
- handleClose: _propTypes["default"].func,
618
- uploadSoundSupport: _propTypes["default"].shape({
619
- add: _propTypes["default"].func,
620
- "delete": _propTypes["default"].func
621
- }),
622
- type: _propTypes["default"].string,
623
- src: _propTypes["default"].string,
624
- url: _propTypes["default"].string,
625
- urlToUse: _propTypes["default"].string,
626
- starts: _propTypes["default"].number,
627
- ends: _propTypes["default"].number,
628
- height: _propTypes["default"].number,
629
- width: _propTypes["default"].number
630
- });
631
-
632
- var styles = function styles(theme) {
633
- return {
634
- paper: {
635
- minWidth: '500px'
636
- },
637
- properties: {
638
- padding: 0
639
- },
640
- row: {
641
- display: 'flex',
642
- flexDirection: 'space-between'
643
- },
644
- rowItem: {
645
- marginRight: theme.spacing.unit * 1.5,
646
- cursor: 'pointer'
647
- },
648
- active: {
649
- color: _renderUi.color.primary(),
650
- borderBottom: "2px solid ".concat(_renderUi.color.primary())
651
- },
652
- uploadInput: {
653
- marginTop: theme.spacing.unit * 1.5
654
- },
655
- error: {
656
- marginTop: theme.spacing.unit * 1.5,
657
- color: theme.palette.error.main
658
- },
659
- deleteIcon: {
660
- marginLeft: theme.spacing.unit * 1.5
661
- }
662
- };
663
- };
664
-
665
- var _default = (0, _styles.withStyles)(styles)(MediaDialog);
666
-
667
- exports["default"] = _default;
668
- //# sourceMappingURL=media-dialog.js.map