@entur-partner/rich-text-editor 5.0.0 → 6.0.1-alpha.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.
- package/dist/ExpandableMultiLanguageRichTextEditor.d.ts +4 -3
- package/dist/RichTextEditor/BlockTypeDropdown/index.d.ts +2 -1
- package/dist/RichTextEditor/Controls/BlockTypeButtonControls.d.ts +2 -1
- package/dist/RichTextEditor/Controls/BlockTypeLinkControls.d.ts +2 -1
- package/dist/RichTextEditor/Controls/BlockTypeSelectControls.d.ts +2 -1
- package/dist/RichTextEditor/Controls/InlineStyleControls.d.ts +2 -1
- package/dist/RichTextEditor/Controls/TagControls.d.ts +2 -1
- package/dist/RichTextEditor/Link/index.d.ts +3 -2
- package/dist/RichTextEditor/StyleButton/index.d.ts +2 -1
- package/dist/RichTextEditor/constants.d.ts +6 -5
- package/dist/RichTextEditor/index.d.ts +1 -1
- package/dist/events.d.ts +1 -1
- package/dist/rich-text-editor.cjs.development.js +71 -188
- package/dist/rich-text-editor.cjs.development.js.map +1 -1
- package/dist/rich-text-editor.cjs.production.min.js.map +1 -1
- package/dist/rich-text-editor.esm.js +71 -188
- package/dist/rich-text-editor.esm.js.map +1 -1
- package/dist/styles.css +14 -14
- package/dist/withI18n.d.ts +2 -1
- package/package.json +4 -4
|
@@ -20,26 +20,21 @@ function _extends() {
|
|
|
20
20
|
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
21
21
|
for (var i = 1; i < arguments.length; i++) {
|
|
22
22
|
var source = arguments[i];
|
|
23
|
-
|
|
24
23
|
for (var key in source) {
|
|
25
24
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
26
25
|
target[key] = source[key];
|
|
27
26
|
}
|
|
28
27
|
}
|
|
29
28
|
}
|
|
30
|
-
|
|
31
29
|
return target;
|
|
32
30
|
};
|
|
33
31
|
return _extends.apply(this, arguments);
|
|
34
32
|
}
|
|
35
|
-
|
|
36
33
|
function _inheritsLoose(subClass, superClass) {
|
|
37
34
|
subClass.prototype = Object.create(superClass.prototype);
|
|
38
35
|
subClass.prototype.constructor = subClass;
|
|
39
|
-
|
|
40
36
|
_setPrototypeOf(subClass, superClass);
|
|
41
37
|
}
|
|
42
|
-
|
|
43
38
|
function _setPrototypeOf(o, p) {
|
|
44
39
|
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
|
|
45
40
|
o.__proto__ = p;
|
|
@@ -47,34 +42,28 @@ function _setPrototypeOf(o, p) {
|
|
|
47
42
|
};
|
|
48
43
|
return _setPrototypeOf(o, p);
|
|
49
44
|
}
|
|
50
|
-
|
|
51
45
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
52
46
|
if (source == null) return {};
|
|
53
47
|
var target = {};
|
|
54
48
|
var sourceKeys = Object.keys(source);
|
|
55
49
|
var key, i;
|
|
56
|
-
|
|
57
50
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
58
51
|
key = sourceKeys[i];
|
|
59
52
|
if (excluded.indexOf(key) >= 0) continue;
|
|
60
53
|
target[key] = source[key];
|
|
61
54
|
}
|
|
62
|
-
|
|
63
55
|
return target;
|
|
64
56
|
}
|
|
65
57
|
|
|
66
58
|
function useI18N() {
|
|
67
59
|
var _useTranslation = useTranslation(),
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
60
|
+
t = _useTranslation.t,
|
|
61
|
+
language = _useTranslation.i18n.language;
|
|
71
62
|
if (language !== 'nb' && language !== 'en') {
|
|
72
63
|
throw Error('Language must be either nb or en.');
|
|
73
64
|
}
|
|
74
|
-
|
|
75
65
|
return t;
|
|
76
66
|
}
|
|
77
|
-
|
|
78
67
|
function withI18n(Component) {
|
|
79
68
|
return function WrappedComponent(props) {
|
|
80
69
|
var t = useI18N();
|
|
@@ -85,85 +74,67 @@ function withI18n(Component) {
|
|
|
85
74
|
}
|
|
86
75
|
|
|
87
76
|
var BlockTypeDropdown = /*#__PURE__*/function (_Component) {
|
|
88
|
-
_inheritsLoose(BlockTypeDropdown, _Component);
|
|
89
|
-
|
|
90
77
|
function BlockTypeDropdown() {
|
|
91
78
|
var _this;
|
|
92
|
-
|
|
93
79
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
94
80
|
args[_key] = arguments[_key];
|
|
95
81
|
}
|
|
96
|
-
|
|
97
82
|
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
98
|
-
|
|
99
83
|
_this.handleOnClick = function (selectedOption) {
|
|
100
84
|
var onChange = _this.props.onChange;
|
|
101
85
|
onChange(selectedOption);
|
|
102
86
|
};
|
|
103
|
-
|
|
104
87
|
return _this;
|
|
105
88
|
}
|
|
106
|
-
|
|
89
|
+
_inheritsLoose(BlockTypeDropdown, _Component);
|
|
107
90
|
var _proto = BlockTypeDropdown.prototype;
|
|
108
|
-
|
|
109
91
|
_proto.toItem = function toItem(option) {
|
|
110
92
|
return {
|
|
111
93
|
value: option.style,
|
|
112
94
|
label: this.renderFormattedLabel(option.label)
|
|
113
95
|
};
|
|
114
96
|
};
|
|
115
|
-
|
|
116
97
|
_proto.renderFormattedLabel = function renderFormattedLabel(label) {
|
|
117
98
|
var formattedLabelText = this.props.i18n(label);
|
|
118
|
-
|
|
119
99
|
switch (label) {
|
|
120
100
|
case 'styles.p':
|
|
121
101
|
return /*#__PURE__*/React.createElement("div", {
|
|
122
102
|
className: "default-p"
|
|
123
103
|
}, formattedLabelText);
|
|
124
|
-
|
|
125
104
|
case 'styles.h1':
|
|
126
105
|
return /*#__PURE__*/React.createElement("div", {
|
|
127
106
|
className: "default-h1"
|
|
128
107
|
}, formattedLabelText);
|
|
129
|
-
|
|
130
108
|
case 'styles.h2':
|
|
131
109
|
return /*#__PURE__*/React.createElement("div", {
|
|
132
110
|
className: "default-h2"
|
|
133
111
|
}, formattedLabelText);
|
|
134
|
-
|
|
135
112
|
case 'styles.h3':
|
|
136
113
|
return /*#__PURE__*/React.createElement("div", {
|
|
137
114
|
className: "default-h3"
|
|
138
115
|
}, formattedLabelText);
|
|
139
|
-
|
|
140
116
|
case 'styles.h4':
|
|
141
117
|
return /*#__PURE__*/React.createElement("div", {
|
|
142
118
|
className: "default-h4"
|
|
143
119
|
}, formattedLabelText);
|
|
144
|
-
|
|
145
120
|
case 'styles.h5':
|
|
146
121
|
return /*#__PURE__*/React.createElement("div", {
|
|
147
122
|
className: "default-h5"
|
|
148
123
|
}, formattedLabelText);
|
|
149
|
-
|
|
150
124
|
case 'styles.h6':
|
|
151
125
|
return /*#__PURE__*/React.createElement("div", {
|
|
152
126
|
className: "default-h6"
|
|
153
127
|
}, formattedLabelText);
|
|
154
|
-
|
|
155
128
|
default:
|
|
156
129
|
return /*#__PURE__*/React.createElement("p", null, formattedLabelText);
|
|
157
130
|
}
|
|
158
131
|
};
|
|
159
|
-
|
|
160
132
|
_proto.render = function render() {
|
|
161
133
|
var _this2 = this;
|
|
162
|
-
|
|
163
134
|
var _this$props = this.props,
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
135
|
+
options = _this$props.options,
|
|
136
|
+
selected = _this$props.selected,
|
|
137
|
+
i18n = _this$props.i18n;
|
|
167
138
|
return /*#__PURE__*/React.createElement(Dropdown, {
|
|
168
139
|
className: "block-type-dropdown",
|
|
169
140
|
items: options.map(function (option) {
|
|
@@ -176,16 +147,14 @@ var BlockTypeDropdown = /*#__PURE__*/function (_Component) {
|
|
|
176
147
|
}
|
|
177
148
|
});
|
|
178
149
|
};
|
|
179
|
-
|
|
180
150
|
return BlockTypeDropdown;
|
|
181
151
|
}(Component);
|
|
182
|
-
|
|
183
152
|
var BlockTypeDropdown$1 = /*#__PURE__*/withI18n(BlockTypeDropdown);
|
|
184
153
|
|
|
185
154
|
var BlockTypeControls = function BlockTypeControls(_ref) {
|
|
186
155
|
var editorState = _ref.editorState,
|
|
187
|
-
|
|
188
|
-
|
|
156
|
+
blockTypes = _ref.blockTypes,
|
|
157
|
+
onToggle = _ref.onToggle;
|
|
189
158
|
var selection = editorState.getSelection();
|
|
190
159
|
var blockTypeStyle = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
|
|
191
160
|
var selectedOption = blockTypes.find(function (option) {
|
|
@@ -206,46 +175,37 @@ function getKey(event) {
|
|
|
206
175
|
}
|
|
207
176
|
|
|
208
177
|
var StyleButton = /*#__PURE__*/function (_Component) {
|
|
209
|
-
_inheritsLoose(StyleButton, _Component);
|
|
210
|
-
|
|
211
178
|
function StyleButton() {
|
|
212
179
|
var _this;
|
|
213
|
-
|
|
214
180
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
215
181
|
args[_key] = arguments[_key];
|
|
216
182
|
}
|
|
217
|
-
|
|
218
183
|
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
219
|
-
|
|
220
184
|
_this.onToggle = function (e) {
|
|
221
185
|
var _this$props = _this.props,
|
|
222
|
-
|
|
223
|
-
|
|
186
|
+
style = _this$props.style,
|
|
187
|
+
onToggle = _this$props.onToggle;
|
|
224
188
|
e.preventDefault();
|
|
225
189
|
onToggle(style);
|
|
226
190
|
};
|
|
227
|
-
|
|
228
191
|
_this.onToggleNoEvent = function () {
|
|
229
192
|
var _this$props2 = _this.props,
|
|
230
|
-
|
|
231
|
-
|
|
193
|
+
style = _this$props2.style,
|
|
194
|
+
onToggle = _this$props2.onToggle;
|
|
232
195
|
onToggle(style);
|
|
233
196
|
};
|
|
234
|
-
|
|
235
197
|
return _this;
|
|
236
198
|
}
|
|
237
|
-
|
|
199
|
+
_inheritsLoose(StyleButton, _Component);
|
|
238
200
|
var _proto = StyleButton.prototype;
|
|
239
|
-
|
|
240
201
|
_proto.render = function render() {
|
|
241
202
|
var _this2 = this;
|
|
242
|
-
|
|
243
203
|
var _this$props3 = this.props,
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
204
|
+
i18n = _this$props3.i18n,
|
|
205
|
+
active = _this$props3.active,
|
|
206
|
+
label = _this$props3.label,
|
|
207
|
+
title = _this$props3.title,
|
|
208
|
+
hotKey = _this$props3.hotKey;
|
|
249
209
|
var classNames = cx('editor-stylebutton', {
|
|
250
210
|
active: active
|
|
251
211
|
});
|
|
@@ -261,16 +221,14 @@ var StyleButton = /*#__PURE__*/function (_Component) {
|
|
|
261
221
|
}
|
|
262
222
|
}, label);
|
|
263
223
|
};
|
|
264
|
-
|
|
265
224
|
return StyleButton;
|
|
266
225
|
}(Component);
|
|
267
|
-
|
|
268
226
|
var StyleButton$1 = /*#__PURE__*/withI18n(StyleButton);
|
|
269
227
|
|
|
270
228
|
var BlockTypeButtonControls = function BlockTypeButtonControls(props) {
|
|
271
229
|
var editorState = props.editorState,
|
|
272
|
-
|
|
273
|
-
|
|
230
|
+
blockTypes = props.blockTypes,
|
|
231
|
+
onToggle = props.onToggle;
|
|
274
232
|
var selection = editorState.getSelection();
|
|
275
233
|
var blockTypeStyle = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
|
|
276
234
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -288,33 +246,26 @@ var BlockTypeButtonControls = function BlockTypeButtonControls(props) {
|
|
|
288
246
|
};
|
|
289
247
|
|
|
290
248
|
var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
|
|
291
|
-
_inheritsLoose(BlockTypeLinkControls, _Component);
|
|
292
|
-
|
|
293
249
|
function BlockTypeLinkControls() {
|
|
294
250
|
var _this;
|
|
295
|
-
|
|
296
251
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
297
252
|
args[_key] = arguments[_key];
|
|
298
253
|
}
|
|
299
|
-
|
|
300
254
|
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
301
255
|
_this.state = {
|
|
302
256
|
urlValue: '',
|
|
303
257
|
showUrlInput: false,
|
|
304
258
|
hasLink: false
|
|
305
259
|
};
|
|
306
|
-
|
|
307
260
|
_this.onUrlChange = function (e) {
|
|
308
261
|
_this.setState({
|
|
309
262
|
urlValue: e.target.value
|
|
310
263
|
});
|
|
311
264
|
};
|
|
312
|
-
|
|
313
265
|
_this.addLink = function (e) {
|
|
314
266
|
e.preventDefault();
|
|
315
267
|
var editorState = _this.props.editorState;
|
|
316
268
|
var selection = editorState.getSelection();
|
|
317
|
-
|
|
318
269
|
if (!selection.isCollapsed()) {
|
|
319
270
|
var currentContent = editorState.getCurrentContent();
|
|
320
271
|
var startKey = selection.getStartKey();
|
|
@@ -322,12 +273,10 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
|
|
|
322
273
|
var blockWithLinkAtBeginning = currentContent.getBlockForKey(startKey);
|
|
323
274
|
var linkKey = blockWithLinkAtBeginning.getEntityAt(startOffset);
|
|
324
275
|
var url = '';
|
|
325
|
-
|
|
326
276
|
if (linkKey) {
|
|
327
277
|
var linkInstance = currentContent.getEntity(linkKey);
|
|
328
278
|
url = linkInstance.getData().url;
|
|
329
279
|
}
|
|
330
|
-
|
|
331
280
|
_this.setState({
|
|
332
281
|
showUrlInput: true,
|
|
333
282
|
urlValue: url,
|
|
@@ -335,13 +284,12 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
|
|
|
335
284
|
});
|
|
336
285
|
}
|
|
337
286
|
};
|
|
338
|
-
|
|
339
287
|
_this.confirmLink = function (e) {
|
|
340
288
|
e.preventDefault();
|
|
341
289
|
var urlValue = _this.state.urlValue;
|
|
342
290
|
var _this$props = _this.props,
|
|
343
|
-
|
|
344
|
-
|
|
291
|
+
editorState = _this$props.editorState,
|
|
292
|
+
onToggle = _this$props.onToggle;
|
|
345
293
|
var contentState = editorState.getCurrentContent();
|
|
346
294
|
var contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {
|
|
347
295
|
url: urlValue
|
|
@@ -351,55 +299,46 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
|
|
|
351
299
|
currentContent: contentStateWithEntity
|
|
352
300
|
});
|
|
353
301
|
onToggle(newEditorState, entityKey);
|
|
354
|
-
|
|
355
302
|
_this.setState({
|
|
356
303
|
showUrlInput: false,
|
|
357
304
|
urlValue: ''
|
|
358
305
|
});
|
|
359
306
|
};
|
|
360
|
-
|
|
361
307
|
_this.cancelLink = function (e) {
|
|
362
308
|
e.preventDefault();
|
|
363
|
-
|
|
364
309
|
_this.setState({
|
|
365
310
|
showUrlInput: false,
|
|
366
311
|
urlValue: ''
|
|
367
312
|
});
|
|
368
313
|
};
|
|
369
|
-
|
|
370
314
|
_this.onLinkInputKeyDown = function (e) {
|
|
371
315
|
if (getKey(e) === Key.ENTER) {
|
|
372
316
|
_this.confirmLink(e);
|
|
373
317
|
}
|
|
374
318
|
};
|
|
375
|
-
|
|
376
319
|
_this.removeLink = function (e) {
|
|
377
320
|
e.preventDefault();
|
|
378
321
|
var _this$props2 = _this.props,
|
|
379
|
-
|
|
380
|
-
|
|
322
|
+
editorState = _this$props2.editorState,
|
|
323
|
+
onToggle = _this$props2.onToggle;
|
|
381
324
|
var hasLink = _this.state.hasLink;
|
|
382
325
|
var selection = editorState.getSelection();
|
|
383
|
-
|
|
384
326
|
if (!selection.isCollapsed() && hasLink) {
|
|
385
327
|
onToggle(editorState, null);
|
|
386
|
-
|
|
387
328
|
_this.setState({
|
|
388
329
|
showUrlInput: false
|
|
389
330
|
});
|
|
390
331
|
}
|
|
391
332
|
};
|
|
392
|
-
|
|
393
333
|
return _this;
|
|
394
334
|
}
|
|
395
|
-
|
|
335
|
+
_inheritsLoose(BlockTypeLinkControls, _Component);
|
|
396
336
|
var _proto = BlockTypeLinkControls.prototype;
|
|
397
|
-
|
|
398
337
|
_proto.render = function render() {
|
|
399
338
|
var i18n = this.props.i18n;
|
|
400
339
|
var _this$state = this.state,
|
|
401
|
-
|
|
402
|
-
|
|
340
|
+
showUrlInput = _this$state.showUrlInput,
|
|
341
|
+
hasLink = _this$state.hasLink;
|
|
403
342
|
return /*#__PURE__*/React.createElement("div", {
|
|
404
343
|
className: "controls-group block-editor-controls link-controls"
|
|
405
344
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -437,10 +376,8 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
|
|
|
437
376
|
title: i18n('styles.unlink')
|
|
438
377
|
}, /*#__PURE__*/React.createElement(UnlinkIcon, null), i18n('styles.unlink')))));
|
|
439
378
|
};
|
|
440
|
-
|
|
441
379
|
return BlockTypeLinkControls;
|
|
442
380
|
}(Component);
|
|
443
|
-
|
|
444
381
|
BlockTypeLinkControls.propTypes = {
|
|
445
382
|
editorState: PropTypes.object,
|
|
446
383
|
onToggle: PropTypes.func
|
|
@@ -449,7 +386,7 @@ var BlockTypeLinkControls$1 = /*#__PURE__*/withI18n(BlockTypeLinkControls);
|
|
|
449
386
|
|
|
450
387
|
var InlineStyleControls = function InlineStyleControls(props) {
|
|
451
388
|
var editorState = props.editorState,
|
|
452
|
-
|
|
389
|
+
inlineStyles = props.inlineStyles;
|
|
453
390
|
var currentStyle = editorState.getCurrentInlineStyle();
|
|
454
391
|
return /*#__PURE__*/React.createElement("div", {
|
|
455
392
|
className: "controls-group inline-editor-controls"
|
|
@@ -467,21 +404,16 @@ var InlineStyleControls = function InlineStyleControls(props) {
|
|
|
467
404
|
};
|
|
468
405
|
|
|
469
406
|
var TagControls = /*#__PURE__*/function (_Component) {
|
|
470
|
-
_inheritsLoose(TagControls, _Component);
|
|
471
|
-
|
|
472
407
|
function TagControls() {
|
|
473
408
|
var _this;
|
|
474
|
-
|
|
475
409
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
476
410
|
args[_key] = arguments[_key];
|
|
477
411
|
}
|
|
478
|
-
|
|
479
412
|
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
480
413
|
_this.tagControlRef = /*#__PURE__*/createRef();
|
|
481
414
|
_this.state = {
|
|
482
415
|
isOpen: false
|
|
483
416
|
};
|
|
484
|
-
|
|
485
417
|
_this.handleClickOutside = function (e) {
|
|
486
418
|
if (_this.tagControlRef && _this.tagControlRef.current && !_this.tagControlRef.current.contains(e.target)) {
|
|
487
419
|
_this.setState({
|
|
@@ -489,36 +421,30 @@ var TagControls = /*#__PURE__*/function (_Component) {
|
|
|
489
421
|
});
|
|
490
422
|
}
|
|
491
423
|
};
|
|
492
|
-
|
|
493
424
|
_this.handleTagClick = function (tag, delimiter) {
|
|
494
425
|
var _this$props = _this.props,
|
|
495
|
-
|
|
496
|
-
|
|
426
|
+
editorState = _this$props.editorState,
|
|
427
|
+
onInsertTag = _this$props.onInsertTag;
|
|
497
428
|
var delimiterStart = delimiter[0];
|
|
498
429
|
var delimiterEnd = delimiter[1];
|
|
499
430
|
var fullTag = "" + delimiterStart + tag + delimiterEnd;
|
|
500
431
|
onInsertTag(editorState, fullTag);
|
|
501
432
|
};
|
|
502
|
-
|
|
503
433
|
return _this;
|
|
504
434
|
}
|
|
505
|
-
|
|
435
|
+
_inheritsLoose(TagControls, _Component);
|
|
506
436
|
var _proto = TagControls.prototype;
|
|
507
|
-
|
|
508
437
|
_proto.componentDidMount = function componentDidMount() {
|
|
509
438
|
document.addEventListener('mousedown', this.handleClickOutside);
|
|
510
439
|
};
|
|
511
|
-
|
|
512
440
|
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
513
441
|
document.removeEventListener('mousedown', this.handleClickOutside);
|
|
514
442
|
};
|
|
515
|
-
|
|
516
443
|
_proto.render = function render() {
|
|
517
444
|
var _this2 = this;
|
|
518
|
-
|
|
519
445
|
var _this$props2 = this.props,
|
|
520
|
-
|
|
521
|
-
|
|
446
|
+
i18n = _this$props2.i18n,
|
|
447
|
+
tags = _this$props2.tags;
|
|
522
448
|
var isOpen = this.state.isOpen;
|
|
523
449
|
var menuItems = tags.map(function (tag, i) {
|
|
524
450
|
var delimiter = tag.delimiter || '{}';
|
|
@@ -556,10 +482,8 @@ var TagControls = /*#__PURE__*/function (_Component) {
|
|
|
556
482
|
className: "action-menu"
|
|
557
483
|
}, menuItems)));
|
|
558
484
|
};
|
|
559
|
-
|
|
560
485
|
return TagControls;
|
|
561
486
|
}(Component);
|
|
562
|
-
|
|
563
487
|
TagControls.propTypes = {
|
|
564
488
|
editorState: PropTypes.object,
|
|
565
489
|
tags: PropTypes.arrayOf(PropTypes.object).isRequired,
|
|
@@ -569,21 +493,18 @@ var TagControls$1 = /*#__PURE__*/withI18n(TagControls);
|
|
|
569
493
|
|
|
570
494
|
var HtmlLink = function HtmlLink(_ref) {
|
|
571
495
|
var url = _ref.url,
|
|
572
|
-
|
|
496
|
+
children = _ref.children;
|
|
573
497
|
return /*#__PURE__*/React.createElement("a", {
|
|
574
498
|
href: url
|
|
575
499
|
}, children);
|
|
576
500
|
};
|
|
577
|
-
|
|
578
501
|
var Link = function Link(props) {
|
|
579
502
|
var _props$contentState$g = props.contentState.getEntity(props.entityKey).getData(),
|
|
580
|
-
|
|
581
|
-
|
|
503
|
+
url = _props$contentState$g.url;
|
|
582
504
|
return /*#__PURE__*/React.createElement(HtmlLink, {
|
|
583
505
|
url: url
|
|
584
506
|
}, props.children);
|
|
585
507
|
};
|
|
586
|
-
|
|
587
508
|
function findLinkEntities(contentBlock, callback, contentState) {
|
|
588
509
|
contentBlock.findEntityRanges(function (character) {
|
|
589
510
|
var entityKey = character.getEntity();
|
|
@@ -692,89 +613,69 @@ var decorator = /*#__PURE__*/new CompositeDecorator([{
|
|
|
692
613
|
}]);
|
|
693
614
|
|
|
694
615
|
var RichTextEditor = /*#__PURE__*/function (_Component) {
|
|
695
|
-
_inheritsLoose(RichTextEditor, _Component);
|
|
696
|
-
|
|
697
616
|
function RichTextEditor() {
|
|
698
617
|
var _this;
|
|
699
|
-
|
|
700
618
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
701
619
|
args[_key] = arguments[_key];
|
|
702
620
|
}
|
|
703
|
-
|
|
704
621
|
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
705
622
|
_this.wrapperRef = /*#__PURE__*/createRef();
|
|
706
623
|
_this.editor = /*#__PURE__*/createRef();
|
|
707
|
-
|
|
708
624
|
_this.handleKeyCommand = function (command, editorState) {
|
|
709
625
|
var newState = RichUtils.handleKeyCommand(editorState, command);
|
|
710
|
-
|
|
711
626
|
if (newState) {
|
|
712
627
|
_this.props.onChange(newState);
|
|
713
|
-
|
|
714
628
|
return true;
|
|
715
629
|
}
|
|
716
|
-
|
|
717
630
|
return false;
|
|
718
631
|
};
|
|
719
|
-
|
|
720
632
|
_this.keyBindingFn = function (evt) {
|
|
721
633
|
switch (evt.keyCode) {
|
|
722
634
|
case 9:
|
|
723
635
|
return _this.onTab(evt);
|
|
724
|
-
|
|
725
636
|
default:
|
|
726
637
|
return getDefaultKeyBinding(evt);
|
|
727
638
|
}
|
|
728
639
|
};
|
|
729
|
-
|
|
730
640
|
_this.onTab = function (evt) {
|
|
731
641
|
evt.stopPropagation();
|
|
732
642
|
var _this$props = _this.props,
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
643
|
+
maxTabDepth = _this$props.maxTabDepth,
|
|
644
|
+
editorState = _this$props.editorState,
|
|
645
|
+
onChange = _this$props.onChange;
|
|
736
646
|
onChange(RichUtils.onTab(evt, editorState, maxTabDepth));
|
|
737
647
|
};
|
|
738
|
-
|
|
739
648
|
_this.toggleButtonBlockType = function (blockType) {
|
|
740
649
|
var _this$props2 = _this.props,
|
|
741
|
-
|
|
742
|
-
|
|
650
|
+
editorState = _this$props2.editorState,
|
|
651
|
+
onChange = _this$props2.onChange;
|
|
743
652
|
onChange(RichUtils.toggleBlockType(editorState, blockType));
|
|
744
653
|
};
|
|
745
|
-
|
|
746
654
|
_this.toggleSelectBlockType = function (blockType) {
|
|
747
655
|
var _this$props3 = _this.props,
|
|
748
|
-
|
|
749
|
-
|
|
656
|
+
editorState = _this$props3.editorState,
|
|
657
|
+
onChange = _this$props3.onChange;
|
|
750
658
|
onChange(RichUtils.toggleBlockType(editorState, blockType));
|
|
751
659
|
};
|
|
752
|
-
|
|
753
660
|
_this.toggleInlineStyle = function (inlineStyle) {
|
|
754
661
|
var _this$props4 = _this.props,
|
|
755
|
-
|
|
756
|
-
|
|
662
|
+
editorState = _this$props4.editorState,
|
|
663
|
+
onChange = _this$props4.onChange;
|
|
757
664
|
onChange(RichUtils.toggleInlineStyle(editorState, inlineStyle));
|
|
758
665
|
};
|
|
759
|
-
|
|
760
666
|
_this.toggleLink = function (newEditorState, entityKey) {
|
|
761
667
|
_this.props.onChange(RichUtils.toggleLink(newEditorState, newEditorState.getSelection(), entityKey));
|
|
762
668
|
};
|
|
763
|
-
|
|
764
669
|
_this.insertText = function (editorState, text) {
|
|
765
670
|
var newContent = Modifier.insertText(editorState.getCurrentContent(), editorState.getSelection(), text);
|
|
766
|
-
|
|
767
671
|
_this.props.onChange(EditorState.push(editorState, newContent, 'insert-characters'), function () {
|
|
768
672
|
return _this.focusEditor();
|
|
769
673
|
});
|
|
770
674
|
};
|
|
771
|
-
|
|
772
675
|
_this.getFontListConfigForPanelType = function (panelType) {
|
|
773
676
|
var controlConfig = _this.getControlConfigBySet(_this.props.controlConfigSet);
|
|
774
|
-
|
|
775
677
|
return controlConfig[panelType];
|
|
776
678
|
};
|
|
777
|
-
|
|
778
679
|
_this.getControlConfigBySet = function (config) {
|
|
779
680
|
var fontList = (config && config.fontList || Object.keys(FontList)).filter(function (f) {
|
|
780
681
|
return typeof f === 'object' ? FontList[f.type] : FontList[f];
|
|
@@ -797,28 +698,25 @@ var RichTextEditor = /*#__PURE__*/function (_Component) {
|
|
|
797
698
|
inlineStyles: inlineStyles
|
|
798
699
|
};
|
|
799
700
|
};
|
|
800
|
-
|
|
801
701
|
return _this;
|
|
802
702
|
}
|
|
803
|
-
|
|
703
|
+
_inheritsLoose(RichTextEditor, _Component);
|
|
804
704
|
var _proto = RichTextEditor.prototype;
|
|
805
|
-
|
|
806
705
|
_proto.focusEditor = function focusEditor() {
|
|
807
706
|
this.editor.current && this.editor.current.focus();
|
|
808
707
|
};
|
|
809
|
-
|
|
810
708
|
_proto.render = function render() {
|
|
811
709
|
var _this$props5 = this.props,
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
710
|
+
className = _this$props5.className,
|
|
711
|
+
showFontMenu = _this$props5.showFontMenu,
|
|
712
|
+
showInlineStyleMenu = _this$props5.showInlineStyleMenu,
|
|
713
|
+
showTextFormatMenu = _this$props5.showTextFormatMenu,
|
|
714
|
+
showLinkMenu = _this$props5.showLinkMenu,
|
|
715
|
+
label = _this$props5.label,
|
|
716
|
+
tags = _this$props5.tags,
|
|
717
|
+
editorState = _this$props5.editorState,
|
|
718
|
+
onChange = _this$props5.onChange,
|
|
719
|
+
handleBeforeInput = _this$props5.handleBeforeInput;
|
|
822
720
|
var classNames = cx('editor-root', className);
|
|
823
721
|
return /*#__PURE__*/React.createElement("div", {
|
|
824
722
|
ref: this.wrapperRef
|
|
@@ -857,12 +755,9 @@ var RichTextEditor = /*#__PURE__*/function (_Component) {
|
|
|
857
755
|
spellCheck: true
|
|
858
756
|
}))));
|
|
859
757
|
};
|
|
860
|
-
|
|
861
758
|
return RichTextEditor;
|
|
862
759
|
}(Component);
|
|
863
|
-
|
|
864
760
|
RichTextEditor.decorator = decorator;
|
|
865
|
-
|
|
866
761
|
var styleShape = function styleShape(configList) {
|
|
867
762
|
return PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOf([].concat(Object.values(configList)))), PropTypes.arrayOf(PropTypes.shape({
|
|
868
763
|
type: PropTypes.oneOf([].concat(Object.values(configList))),
|
|
@@ -872,7 +767,6 @@ var styleShape = function styleShape(configList) {
|
|
|
872
767
|
hotKey: PropTypes.string
|
|
873
768
|
}))]);
|
|
874
769
|
};
|
|
875
|
-
|
|
876
770
|
RichTextEditor.propTypes = {
|
|
877
771
|
editorState: PropTypes.object.isRequired,
|
|
878
772
|
onChange: PropTypes.func.isRequired,
|
|
@@ -908,7 +802,6 @@ var markdownToEditorState = function markdownToEditorState(markdown) {
|
|
|
908
802
|
if (!markdown) {
|
|
909
803
|
return EditorState.createEmpty(decorator);
|
|
910
804
|
}
|
|
911
|
-
|
|
912
805
|
var rawState = markdownToDraft(markdown, {
|
|
913
806
|
preserveNewlines: true
|
|
914
807
|
});
|
|
@@ -923,37 +816,30 @@ var markdownToHtml = function markdownToHtml(markdown) {
|
|
|
923
816
|
};
|
|
924
817
|
|
|
925
818
|
var _excluded = ["name", "title", "languages"];
|
|
926
|
-
|
|
927
819
|
var RichTextEditorForLanguage = function RichTextEditorForLanguage(_ref) {
|
|
928
820
|
var _ref$language = _ref.language,
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
821
|
+
langKey = _ref$language.value,
|
|
822
|
+
label = _ref$language.label,
|
|
823
|
+
required = _ref$language.required,
|
|
824
|
+
values = _ref.values,
|
|
825
|
+
onChange = _ref.onChange,
|
|
826
|
+
variant = _ref.variant,
|
|
827
|
+
feedback = _ref.feedback,
|
|
828
|
+
tags = _ref.tags;
|
|
938
829
|
var _useState = useState(markdownToEditorState(values[langKey])),
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
830
|
+
editorState = _useState[0],
|
|
831
|
+
setEditorState = _useState[1];
|
|
942
832
|
var handleOnChange = function handleOnChange(changedState) {
|
|
943
833
|
var newValues = _extends({}, values);
|
|
944
|
-
|
|
945
834
|
var content = editorStateToMarkdown(changedState);
|
|
946
|
-
|
|
947
835
|
if (values[langKey] && content === '\n') {
|
|
948
836
|
delete newValues[langKey];
|
|
949
837
|
} else {
|
|
950
838
|
newValues[langKey] = content;
|
|
951
839
|
}
|
|
952
|
-
|
|
953
840
|
setEditorState(changedState);
|
|
954
841
|
onChange(newValues);
|
|
955
842
|
};
|
|
956
|
-
|
|
957
843
|
var feedbackText = feedback && feedback(langKey);
|
|
958
844
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RichTextEditor, {
|
|
959
845
|
label: required ? label + '*' : label,
|
|
@@ -963,17 +849,15 @@ var RichTextEditorForLanguage = function RichTextEditorForLanguage(_ref) {
|
|
|
963
849
|
},
|
|
964
850
|
controlConfigSet: MinifiedConfigTypes,
|
|
965
851
|
tags: tags
|
|
966
|
-
}), variant && (feedbackText == null ? void 0 : feedbackText.length) > 0 && /*#__PURE__*/React.createElement(FeedbackText, {
|
|
852
|
+
}), variant && (feedbackText == null ? void 0 : feedbackText.length) > 0 && ( /*#__PURE__*/React.createElement(FeedbackText, {
|
|
967
853
|
variant: variant(langKey)
|
|
968
|
-
}, feedbackText));
|
|
854
|
+
}, feedbackText)));
|
|
969
855
|
};
|
|
970
|
-
|
|
971
856
|
var ExpandableMultiLanguageRichTextEditor = function ExpandableMultiLanguageRichTextEditor(_ref2) {
|
|
972
857
|
var name = _ref2.name,
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
858
|
+
title = _ref2.title,
|
|
859
|
+
languages = _ref2.languages,
|
|
860
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
|
|
977
861
|
return /*#__PURE__*/React.createElement(ExpandablePanel, {
|
|
978
862
|
title: title,
|
|
979
863
|
defaultOpen: true,
|
|
@@ -1003,7 +887,6 @@ var entityToHtml = {
|
|
|
1003
887
|
url: entity.data.url
|
|
1004
888
|
}, originalText);
|
|
1005
889
|
}
|
|
1006
|
-
|
|
1007
890
|
return originalText;
|
|
1008
891
|
}
|
|
1009
892
|
};
|
|
@@ -1016,13 +899,13 @@ var htmlToEntity = {
|
|
|
1016
899
|
}
|
|
1017
900
|
}
|
|
1018
901
|
};
|
|
902
|
+
|
|
1019
903
|
/* eslint-disable react/display-name */
|
|
1020
904
|
|
|
1021
905
|
var htmlToEditorState = function htmlToEditorState(html) {
|
|
1022
906
|
if (!html) {
|
|
1023
907
|
return EditorState.createEmpty(decorator);
|
|
1024
908
|
}
|
|
1025
|
-
|
|
1026
909
|
var rawState = convertFromHTML(htmlToEntity)(html);
|
|
1027
910
|
return EditorState.createWithContent(rawState, decorator);
|
|
1028
911
|
};
|