@entur-partner/rich-text-editor 5.0.0 → 5.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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 +66 -183
- 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 +66 -183
- package/dist/rich-text-editor.esm.js.map +1 -1
- package/dist/withI18n.d.ts +2 -1
- package/package.json +4 -4
|
@@ -31,26 +31,21 @@ function _extends() {
|
|
|
31
31
|
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
32
32
|
for (var i = 1; i < arguments.length; i++) {
|
|
33
33
|
var source = arguments[i];
|
|
34
|
-
|
|
35
34
|
for (var key in source) {
|
|
36
35
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
37
36
|
target[key] = source[key];
|
|
38
37
|
}
|
|
39
38
|
}
|
|
40
39
|
}
|
|
41
|
-
|
|
42
40
|
return target;
|
|
43
41
|
};
|
|
44
42
|
return _extends.apply(this, arguments);
|
|
45
43
|
}
|
|
46
|
-
|
|
47
44
|
function _inheritsLoose(subClass, superClass) {
|
|
48
45
|
subClass.prototype = Object.create(superClass.prototype);
|
|
49
46
|
subClass.prototype.constructor = subClass;
|
|
50
|
-
|
|
51
47
|
_setPrototypeOf(subClass, superClass);
|
|
52
48
|
}
|
|
53
|
-
|
|
54
49
|
function _setPrototypeOf(o, p) {
|
|
55
50
|
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
|
|
56
51
|
o.__proto__ = p;
|
|
@@ -58,34 +53,28 @@ function _setPrototypeOf(o, p) {
|
|
|
58
53
|
};
|
|
59
54
|
return _setPrototypeOf(o, p);
|
|
60
55
|
}
|
|
61
|
-
|
|
62
56
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
63
57
|
if (source == null) return {};
|
|
64
58
|
var target = {};
|
|
65
59
|
var sourceKeys = Object.keys(source);
|
|
66
60
|
var key, i;
|
|
67
|
-
|
|
68
61
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
69
62
|
key = sourceKeys[i];
|
|
70
63
|
if (excluded.indexOf(key) >= 0) continue;
|
|
71
64
|
target[key] = source[key];
|
|
72
65
|
}
|
|
73
|
-
|
|
74
66
|
return target;
|
|
75
67
|
}
|
|
76
68
|
|
|
77
69
|
function useI18N() {
|
|
78
70
|
var _useTranslation = reactI18next.useTranslation(),
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
71
|
+
t = _useTranslation.t,
|
|
72
|
+
language = _useTranslation.i18n.language;
|
|
82
73
|
if (language !== 'nb' && language !== 'en') {
|
|
83
74
|
throw Error('Language must be either nb or en.');
|
|
84
75
|
}
|
|
85
|
-
|
|
86
76
|
return t;
|
|
87
77
|
}
|
|
88
|
-
|
|
89
78
|
function withI18n(Component) {
|
|
90
79
|
return function WrappedComponent(props) {
|
|
91
80
|
var t = useI18N();
|
|
@@ -97,84 +86,66 @@ function withI18n(Component) {
|
|
|
97
86
|
|
|
98
87
|
var BlockTypeDropdown = /*#__PURE__*/function (_Component) {
|
|
99
88
|
_inheritsLoose(BlockTypeDropdown, _Component);
|
|
100
|
-
|
|
101
89
|
function BlockTypeDropdown() {
|
|
102
90
|
var _this;
|
|
103
|
-
|
|
104
91
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
105
92
|
args[_key] = arguments[_key];
|
|
106
93
|
}
|
|
107
|
-
|
|
108
94
|
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
109
|
-
|
|
110
95
|
_this.handleOnClick = function (selectedOption) {
|
|
111
96
|
var onChange = _this.props.onChange;
|
|
112
97
|
onChange(selectedOption);
|
|
113
98
|
};
|
|
114
|
-
|
|
115
99
|
return _this;
|
|
116
100
|
}
|
|
117
|
-
|
|
118
101
|
var _proto = BlockTypeDropdown.prototype;
|
|
119
|
-
|
|
120
102
|
_proto.toItem = function toItem(option) {
|
|
121
103
|
return {
|
|
122
104
|
value: option.style,
|
|
123
105
|
label: this.renderFormattedLabel(option.label)
|
|
124
106
|
};
|
|
125
107
|
};
|
|
126
|
-
|
|
127
108
|
_proto.renderFormattedLabel = function renderFormattedLabel(label) {
|
|
128
109
|
var formattedLabelText = this.props.i18n(label);
|
|
129
|
-
|
|
130
110
|
switch (label) {
|
|
131
111
|
case 'styles.p':
|
|
132
112
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
133
113
|
className: "default-p"
|
|
134
114
|
}, formattedLabelText);
|
|
135
|
-
|
|
136
115
|
case 'styles.h1':
|
|
137
116
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
138
117
|
className: "default-h1"
|
|
139
118
|
}, formattedLabelText);
|
|
140
|
-
|
|
141
119
|
case 'styles.h2':
|
|
142
120
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
143
121
|
className: "default-h2"
|
|
144
122
|
}, formattedLabelText);
|
|
145
|
-
|
|
146
123
|
case 'styles.h3':
|
|
147
124
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
148
125
|
className: "default-h3"
|
|
149
126
|
}, formattedLabelText);
|
|
150
|
-
|
|
151
127
|
case 'styles.h4':
|
|
152
128
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
153
129
|
className: "default-h4"
|
|
154
130
|
}, formattedLabelText);
|
|
155
|
-
|
|
156
131
|
case 'styles.h5':
|
|
157
132
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
158
133
|
className: "default-h5"
|
|
159
134
|
}, formattedLabelText);
|
|
160
|
-
|
|
161
135
|
case 'styles.h6':
|
|
162
136
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
163
137
|
className: "default-h6"
|
|
164
138
|
}, formattedLabelText);
|
|
165
|
-
|
|
166
139
|
default:
|
|
167
140
|
return /*#__PURE__*/React__default["default"].createElement("p", null, formattedLabelText);
|
|
168
141
|
}
|
|
169
142
|
};
|
|
170
|
-
|
|
171
143
|
_proto.render = function render() {
|
|
172
144
|
var _this2 = this;
|
|
173
|
-
|
|
174
145
|
var _this$props = this.props,
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
146
|
+
options = _this$props.options,
|
|
147
|
+
selected = _this$props.selected,
|
|
148
|
+
i18n = _this$props.i18n;
|
|
178
149
|
return /*#__PURE__*/React__default["default"].createElement(dropdown.Dropdown, {
|
|
179
150
|
className: "block-type-dropdown",
|
|
180
151
|
items: options.map(function (option) {
|
|
@@ -187,16 +158,14 @@ var BlockTypeDropdown = /*#__PURE__*/function (_Component) {
|
|
|
187
158
|
}
|
|
188
159
|
});
|
|
189
160
|
};
|
|
190
|
-
|
|
191
161
|
return BlockTypeDropdown;
|
|
192
162
|
}(React.Component);
|
|
193
|
-
|
|
194
163
|
var BlockTypeDropdown$1 = /*#__PURE__*/withI18n(BlockTypeDropdown);
|
|
195
164
|
|
|
196
165
|
var BlockTypeControls = function BlockTypeControls(_ref) {
|
|
197
166
|
var editorState = _ref.editorState,
|
|
198
|
-
|
|
199
|
-
|
|
167
|
+
blockTypes = _ref.blockTypes,
|
|
168
|
+
onToggle = _ref.onToggle;
|
|
200
169
|
var selection = editorState.getSelection();
|
|
201
170
|
var blockTypeStyle = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
|
|
202
171
|
var selectedOption = blockTypes.find(function (option) {
|
|
@@ -218,45 +187,36 @@ function getKey(event) {
|
|
|
218
187
|
|
|
219
188
|
var StyleButton = /*#__PURE__*/function (_Component) {
|
|
220
189
|
_inheritsLoose(StyleButton, _Component);
|
|
221
|
-
|
|
222
190
|
function StyleButton() {
|
|
223
191
|
var _this;
|
|
224
|
-
|
|
225
192
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
226
193
|
args[_key] = arguments[_key];
|
|
227
194
|
}
|
|
228
|
-
|
|
229
195
|
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
230
|
-
|
|
231
196
|
_this.onToggle = function (e) {
|
|
232
197
|
var _this$props = _this.props,
|
|
233
|
-
|
|
234
|
-
|
|
198
|
+
style = _this$props.style,
|
|
199
|
+
onToggle = _this$props.onToggle;
|
|
235
200
|
e.preventDefault();
|
|
236
201
|
onToggle(style);
|
|
237
202
|
};
|
|
238
|
-
|
|
239
203
|
_this.onToggleNoEvent = function () {
|
|
240
204
|
var _this$props2 = _this.props,
|
|
241
|
-
|
|
242
|
-
|
|
205
|
+
style = _this$props2.style,
|
|
206
|
+
onToggle = _this$props2.onToggle;
|
|
243
207
|
onToggle(style);
|
|
244
208
|
};
|
|
245
|
-
|
|
246
209
|
return _this;
|
|
247
210
|
}
|
|
248
|
-
|
|
249
211
|
var _proto = StyleButton.prototype;
|
|
250
|
-
|
|
251
212
|
_proto.render = function render() {
|
|
252
213
|
var _this2 = this;
|
|
253
|
-
|
|
254
214
|
var _this$props3 = this.props,
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
215
|
+
i18n = _this$props3.i18n,
|
|
216
|
+
active = _this$props3.active,
|
|
217
|
+
label = _this$props3.label,
|
|
218
|
+
title = _this$props3.title,
|
|
219
|
+
hotKey = _this$props3.hotKey;
|
|
260
220
|
var classNames = cx__default["default"]('editor-stylebutton', {
|
|
261
221
|
active: active
|
|
262
222
|
});
|
|
@@ -272,16 +232,14 @@ var StyleButton = /*#__PURE__*/function (_Component) {
|
|
|
272
232
|
}
|
|
273
233
|
}, label);
|
|
274
234
|
};
|
|
275
|
-
|
|
276
235
|
return StyleButton;
|
|
277
236
|
}(React.Component);
|
|
278
|
-
|
|
279
237
|
var StyleButton$1 = /*#__PURE__*/withI18n(StyleButton);
|
|
280
238
|
|
|
281
239
|
var BlockTypeButtonControls = function BlockTypeButtonControls(props) {
|
|
282
240
|
var editorState = props.editorState,
|
|
283
|
-
|
|
284
|
-
|
|
241
|
+
blockTypes = props.blockTypes,
|
|
242
|
+
onToggle = props.onToggle;
|
|
285
243
|
var selection = editorState.getSelection();
|
|
286
244
|
var blockTypeStyle = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
|
|
287
245
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
@@ -300,32 +258,26 @@ var BlockTypeButtonControls = function BlockTypeButtonControls(props) {
|
|
|
300
258
|
|
|
301
259
|
var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
|
|
302
260
|
_inheritsLoose(BlockTypeLinkControls, _Component);
|
|
303
|
-
|
|
304
261
|
function BlockTypeLinkControls() {
|
|
305
262
|
var _this;
|
|
306
|
-
|
|
307
263
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
308
264
|
args[_key] = arguments[_key];
|
|
309
265
|
}
|
|
310
|
-
|
|
311
266
|
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
312
267
|
_this.state = {
|
|
313
268
|
urlValue: '',
|
|
314
269
|
showUrlInput: false,
|
|
315
270
|
hasLink: false
|
|
316
271
|
};
|
|
317
|
-
|
|
318
272
|
_this.onUrlChange = function (e) {
|
|
319
273
|
_this.setState({
|
|
320
274
|
urlValue: e.target.value
|
|
321
275
|
});
|
|
322
276
|
};
|
|
323
|
-
|
|
324
277
|
_this.addLink = function (e) {
|
|
325
278
|
e.preventDefault();
|
|
326
279
|
var editorState = _this.props.editorState;
|
|
327
280
|
var selection = editorState.getSelection();
|
|
328
|
-
|
|
329
281
|
if (!selection.isCollapsed()) {
|
|
330
282
|
var currentContent = editorState.getCurrentContent();
|
|
331
283
|
var startKey = selection.getStartKey();
|
|
@@ -333,12 +285,10 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
|
|
|
333
285
|
var blockWithLinkAtBeginning = currentContent.getBlockForKey(startKey);
|
|
334
286
|
var linkKey = blockWithLinkAtBeginning.getEntityAt(startOffset);
|
|
335
287
|
var url = '';
|
|
336
|
-
|
|
337
288
|
if (linkKey) {
|
|
338
289
|
var linkInstance = currentContent.getEntity(linkKey);
|
|
339
290
|
url = linkInstance.getData().url;
|
|
340
291
|
}
|
|
341
|
-
|
|
342
292
|
_this.setState({
|
|
343
293
|
showUrlInput: true,
|
|
344
294
|
urlValue: url,
|
|
@@ -346,13 +296,12 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
|
|
|
346
296
|
});
|
|
347
297
|
}
|
|
348
298
|
};
|
|
349
|
-
|
|
350
299
|
_this.confirmLink = function (e) {
|
|
351
300
|
e.preventDefault();
|
|
352
301
|
var urlValue = _this.state.urlValue;
|
|
353
302
|
var _this$props = _this.props,
|
|
354
|
-
|
|
355
|
-
|
|
303
|
+
editorState = _this$props.editorState,
|
|
304
|
+
onToggle = _this$props.onToggle;
|
|
356
305
|
var contentState = editorState.getCurrentContent();
|
|
357
306
|
var contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {
|
|
358
307
|
url: urlValue
|
|
@@ -362,55 +311,45 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
|
|
|
362
311
|
currentContent: contentStateWithEntity
|
|
363
312
|
});
|
|
364
313
|
onToggle(newEditorState, entityKey);
|
|
365
|
-
|
|
366
314
|
_this.setState({
|
|
367
315
|
showUrlInput: false,
|
|
368
316
|
urlValue: ''
|
|
369
317
|
});
|
|
370
318
|
};
|
|
371
|
-
|
|
372
319
|
_this.cancelLink = function (e) {
|
|
373
320
|
e.preventDefault();
|
|
374
|
-
|
|
375
321
|
_this.setState({
|
|
376
322
|
showUrlInput: false,
|
|
377
323
|
urlValue: ''
|
|
378
324
|
});
|
|
379
325
|
};
|
|
380
|
-
|
|
381
326
|
_this.onLinkInputKeyDown = function (e) {
|
|
382
327
|
if (getKey(e) === Key.ENTER) {
|
|
383
328
|
_this.confirmLink(e);
|
|
384
329
|
}
|
|
385
330
|
};
|
|
386
|
-
|
|
387
331
|
_this.removeLink = function (e) {
|
|
388
332
|
e.preventDefault();
|
|
389
333
|
var _this$props2 = _this.props,
|
|
390
|
-
|
|
391
|
-
|
|
334
|
+
editorState = _this$props2.editorState,
|
|
335
|
+
onToggle = _this$props2.onToggle;
|
|
392
336
|
var hasLink = _this.state.hasLink;
|
|
393
337
|
var selection = editorState.getSelection();
|
|
394
|
-
|
|
395
338
|
if (!selection.isCollapsed() && hasLink) {
|
|
396
339
|
onToggle(editorState, null);
|
|
397
|
-
|
|
398
340
|
_this.setState({
|
|
399
341
|
showUrlInput: false
|
|
400
342
|
});
|
|
401
343
|
}
|
|
402
344
|
};
|
|
403
|
-
|
|
404
345
|
return _this;
|
|
405
346
|
}
|
|
406
|
-
|
|
407
347
|
var _proto = BlockTypeLinkControls.prototype;
|
|
408
|
-
|
|
409
348
|
_proto.render = function render() {
|
|
410
349
|
var i18n = this.props.i18n;
|
|
411
350
|
var _this$state = this.state,
|
|
412
|
-
|
|
413
|
-
|
|
351
|
+
showUrlInput = _this$state.showUrlInput,
|
|
352
|
+
hasLink = _this$state.hasLink;
|
|
414
353
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
415
354
|
className: "controls-group block-editor-controls link-controls"
|
|
416
355
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
@@ -448,10 +387,8 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
|
|
|
448
387
|
title: i18n('styles.unlink')
|
|
449
388
|
}, /*#__PURE__*/React__default["default"].createElement(icons.UnlinkIcon, null), i18n('styles.unlink')))));
|
|
450
389
|
};
|
|
451
|
-
|
|
452
390
|
return BlockTypeLinkControls;
|
|
453
391
|
}(React.Component);
|
|
454
|
-
|
|
455
392
|
BlockTypeLinkControls.propTypes = {
|
|
456
393
|
editorState: PropTypes__default["default"].object,
|
|
457
394
|
onToggle: PropTypes__default["default"].func
|
|
@@ -460,7 +397,7 @@ var BlockTypeLinkControls$1 = /*#__PURE__*/withI18n(BlockTypeLinkControls);
|
|
|
460
397
|
|
|
461
398
|
var InlineStyleControls = function InlineStyleControls(props) {
|
|
462
399
|
var editorState = props.editorState,
|
|
463
|
-
|
|
400
|
+
inlineStyles = props.inlineStyles;
|
|
464
401
|
var currentStyle = editorState.getCurrentInlineStyle();
|
|
465
402
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
466
403
|
className: "controls-group inline-editor-controls"
|
|
@@ -479,20 +416,16 @@ var InlineStyleControls = function InlineStyleControls(props) {
|
|
|
479
416
|
|
|
480
417
|
var TagControls = /*#__PURE__*/function (_Component) {
|
|
481
418
|
_inheritsLoose(TagControls, _Component);
|
|
482
|
-
|
|
483
419
|
function TagControls() {
|
|
484
420
|
var _this;
|
|
485
|
-
|
|
486
421
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
487
422
|
args[_key] = arguments[_key];
|
|
488
423
|
}
|
|
489
|
-
|
|
490
424
|
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
491
425
|
_this.tagControlRef = /*#__PURE__*/React.createRef();
|
|
492
426
|
_this.state = {
|
|
493
427
|
isOpen: false
|
|
494
428
|
};
|
|
495
|
-
|
|
496
429
|
_this.handleClickOutside = function (e) {
|
|
497
430
|
if (_this.tagControlRef && _this.tagControlRef.current && !_this.tagControlRef.current.contains(e.target)) {
|
|
498
431
|
_this.setState({
|
|
@@ -500,36 +433,29 @@ var TagControls = /*#__PURE__*/function (_Component) {
|
|
|
500
433
|
});
|
|
501
434
|
}
|
|
502
435
|
};
|
|
503
|
-
|
|
504
436
|
_this.handleTagClick = function (tag, delimiter) {
|
|
505
437
|
var _this$props = _this.props,
|
|
506
|
-
|
|
507
|
-
|
|
438
|
+
editorState = _this$props.editorState,
|
|
439
|
+
onInsertTag = _this$props.onInsertTag;
|
|
508
440
|
var delimiterStart = delimiter[0];
|
|
509
441
|
var delimiterEnd = delimiter[1];
|
|
510
442
|
var fullTag = "" + delimiterStart + tag + delimiterEnd;
|
|
511
443
|
onInsertTag(editorState, fullTag);
|
|
512
444
|
};
|
|
513
|
-
|
|
514
445
|
return _this;
|
|
515
446
|
}
|
|
516
|
-
|
|
517
447
|
var _proto = TagControls.prototype;
|
|
518
|
-
|
|
519
448
|
_proto.componentDidMount = function componentDidMount() {
|
|
520
449
|
document.addEventListener('mousedown', this.handleClickOutside);
|
|
521
450
|
};
|
|
522
|
-
|
|
523
451
|
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
524
452
|
document.removeEventListener('mousedown', this.handleClickOutside);
|
|
525
453
|
};
|
|
526
|
-
|
|
527
454
|
_proto.render = function render() {
|
|
528
455
|
var _this2 = this;
|
|
529
|
-
|
|
530
456
|
var _this$props2 = this.props,
|
|
531
|
-
|
|
532
|
-
|
|
457
|
+
i18n = _this$props2.i18n,
|
|
458
|
+
tags = _this$props2.tags;
|
|
533
459
|
var isOpen = this.state.isOpen;
|
|
534
460
|
var menuItems = tags.map(function (tag, i) {
|
|
535
461
|
var delimiter = tag.delimiter || '{}';
|
|
@@ -567,10 +493,8 @@ var TagControls = /*#__PURE__*/function (_Component) {
|
|
|
567
493
|
className: "action-menu"
|
|
568
494
|
}, menuItems)));
|
|
569
495
|
};
|
|
570
|
-
|
|
571
496
|
return TagControls;
|
|
572
497
|
}(React.Component);
|
|
573
|
-
|
|
574
498
|
TagControls.propTypes = {
|
|
575
499
|
editorState: PropTypes__default["default"].object,
|
|
576
500
|
tags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object).isRequired,
|
|
@@ -580,21 +504,18 @@ var TagControls$1 = /*#__PURE__*/withI18n(TagControls);
|
|
|
580
504
|
|
|
581
505
|
var HtmlLink = function HtmlLink(_ref) {
|
|
582
506
|
var url = _ref.url,
|
|
583
|
-
|
|
507
|
+
children = _ref.children;
|
|
584
508
|
return /*#__PURE__*/React__default["default"].createElement("a", {
|
|
585
509
|
href: url
|
|
586
510
|
}, children);
|
|
587
511
|
};
|
|
588
|
-
|
|
589
512
|
var Link = function Link(props) {
|
|
590
513
|
var _props$contentState$g = props.contentState.getEntity(props.entityKey).getData(),
|
|
591
|
-
|
|
592
|
-
|
|
514
|
+
url = _props$contentState$g.url;
|
|
593
515
|
return /*#__PURE__*/React__default["default"].createElement(HtmlLink, {
|
|
594
516
|
url: url
|
|
595
517
|
}, props.children);
|
|
596
518
|
};
|
|
597
|
-
|
|
598
519
|
function findLinkEntities(contentBlock, callback, contentState) {
|
|
599
520
|
contentBlock.findEntityRanges(function (character) {
|
|
600
521
|
var entityKey = character.getEntity();
|
|
@@ -704,88 +625,69 @@ var decorator = /*#__PURE__*/new draftJs.CompositeDecorator([{
|
|
|
704
625
|
|
|
705
626
|
var RichTextEditor = /*#__PURE__*/function (_Component) {
|
|
706
627
|
_inheritsLoose(RichTextEditor, _Component);
|
|
707
|
-
|
|
708
628
|
function RichTextEditor() {
|
|
709
629
|
var _this;
|
|
710
|
-
|
|
711
630
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
712
631
|
args[_key] = arguments[_key];
|
|
713
632
|
}
|
|
714
|
-
|
|
715
633
|
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
716
634
|
_this.wrapperRef = /*#__PURE__*/React.createRef();
|
|
717
635
|
_this.editor = /*#__PURE__*/React.createRef();
|
|
718
|
-
|
|
719
636
|
_this.handleKeyCommand = function (command, editorState) {
|
|
720
637
|
var newState = draftJs.RichUtils.handleKeyCommand(editorState, command);
|
|
721
|
-
|
|
722
638
|
if (newState) {
|
|
723
639
|
_this.props.onChange(newState);
|
|
724
|
-
|
|
725
640
|
return true;
|
|
726
641
|
}
|
|
727
|
-
|
|
728
642
|
return false;
|
|
729
643
|
};
|
|
730
|
-
|
|
731
644
|
_this.keyBindingFn = function (evt) {
|
|
732
645
|
switch (evt.keyCode) {
|
|
733
646
|
case 9:
|
|
734
647
|
return _this.onTab(evt);
|
|
735
|
-
|
|
736
648
|
default:
|
|
737
649
|
return draftJs.getDefaultKeyBinding(evt);
|
|
738
650
|
}
|
|
739
651
|
};
|
|
740
|
-
|
|
741
652
|
_this.onTab = function (evt) {
|
|
742
653
|
evt.stopPropagation();
|
|
743
654
|
var _this$props = _this.props,
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
655
|
+
maxTabDepth = _this$props.maxTabDepth,
|
|
656
|
+
editorState = _this$props.editorState,
|
|
657
|
+
onChange = _this$props.onChange;
|
|
747
658
|
onChange(draftJs.RichUtils.onTab(evt, editorState, maxTabDepth));
|
|
748
659
|
};
|
|
749
|
-
|
|
750
660
|
_this.toggleButtonBlockType = function (blockType) {
|
|
751
661
|
var _this$props2 = _this.props,
|
|
752
|
-
|
|
753
|
-
|
|
662
|
+
editorState = _this$props2.editorState,
|
|
663
|
+
onChange = _this$props2.onChange;
|
|
754
664
|
onChange(draftJs.RichUtils.toggleBlockType(editorState, blockType));
|
|
755
665
|
};
|
|
756
|
-
|
|
757
666
|
_this.toggleSelectBlockType = function (blockType) {
|
|
758
667
|
var _this$props3 = _this.props,
|
|
759
|
-
|
|
760
|
-
|
|
668
|
+
editorState = _this$props3.editorState,
|
|
669
|
+
onChange = _this$props3.onChange;
|
|
761
670
|
onChange(draftJs.RichUtils.toggleBlockType(editorState, blockType));
|
|
762
671
|
};
|
|
763
|
-
|
|
764
672
|
_this.toggleInlineStyle = function (inlineStyle) {
|
|
765
673
|
var _this$props4 = _this.props,
|
|
766
|
-
|
|
767
|
-
|
|
674
|
+
editorState = _this$props4.editorState,
|
|
675
|
+
onChange = _this$props4.onChange;
|
|
768
676
|
onChange(draftJs.RichUtils.toggleInlineStyle(editorState, inlineStyle));
|
|
769
677
|
};
|
|
770
|
-
|
|
771
678
|
_this.toggleLink = function (newEditorState, entityKey) {
|
|
772
679
|
_this.props.onChange(draftJs.RichUtils.toggleLink(newEditorState, newEditorState.getSelection(), entityKey));
|
|
773
680
|
};
|
|
774
|
-
|
|
775
681
|
_this.insertText = function (editorState, text) {
|
|
776
682
|
var newContent = draftJs.Modifier.insertText(editorState.getCurrentContent(), editorState.getSelection(), text);
|
|
777
|
-
|
|
778
683
|
_this.props.onChange(draftJs.EditorState.push(editorState, newContent, 'insert-characters'), function () {
|
|
779
684
|
return _this.focusEditor();
|
|
780
685
|
});
|
|
781
686
|
};
|
|
782
|
-
|
|
783
687
|
_this.getFontListConfigForPanelType = function (panelType) {
|
|
784
688
|
var controlConfig = _this.getControlConfigBySet(_this.props.controlConfigSet);
|
|
785
|
-
|
|
786
689
|
return controlConfig[panelType];
|
|
787
690
|
};
|
|
788
|
-
|
|
789
691
|
_this.getControlConfigBySet = function (config) {
|
|
790
692
|
var fontList = (config && config.fontList || Object.keys(FontList)).filter(function (f) {
|
|
791
693
|
return typeof f === 'object' ? FontList[f.type] : FontList[f];
|
|
@@ -808,28 +710,24 @@ var RichTextEditor = /*#__PURE__*/function (_Component) {
|
|
|
808
710
|
inlineStyles: inlineStyles
|
|
809
711
|
};
|
|
810
712
|
};
|
|
811
|
-
|
|
812
713
|
return _this;
|
|
813
714
|
}
|
|
814
|
-
|
|
815
715
|
var _proto = RichTextEditor.prototype;
|
|
816
|
-
|
|
817
716
|
_proto.focusEditor = function focusEditor() {
|
|
818
717
|
this.editor.current && this.editor.current.focus();
|
|
819
718
|
};
|
|
820
|
-
|
|
821
719
|
_proto.render = function render() {
|
|
822
720
|
var _this$props5 = this.props,
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
721
|
+
className = _this$props5.className,
|
|
722
|
+
showFontMenu = _this$props5.showFontMenu,
|
|
723
|
+
showInlineStyleMenu = _this$props5.showInlineStyleMenu,
|
|
724
|
+
showTextFormatMenu = _this$props5.showTextFormatMenu,
|
|
725
|
+
showLinkMenu = _this$props5.showLinkMenu,
|
|
726
|
+
label = _this$props5.label,
|
|
727
|
+
tags = _this$props5.tags,
|
|
728
|
+
editorState = _this$props5.editorState,
|
|
729
|
+
onChange = _this$props5.onChange,
|
|
730
|
+
handleBeforeInput = _this$props5.handleBeforeInput;
|
|
833
731
|
var classNames = cx__default["default"]('editor-root', className);
|
|
834
732
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
835
733
|
ref: this.wrapperRef
|
|
@@ -868,12 +766,9 @@ var RichTextEditor = /*#__PURE__*/function (_Component) {
|
|
|
868
766
|
spellCheck: true
|
|
869
767
|
}))));
|
|
870
768
|
};
|
|
871
|
-
|
|
872
769
|
return RichTextEditor;
|
|
873
770
|
}(React.Component);
|
|
874
|
-
|
|
875
771
|
RichTextEditor.decorator = decorator;
|
|
876
|
-
|
|
877
772
|
var styleShape = function styleShape(configList) {
|
|
878
773
|
return PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf([].concat(Object.values(configList)))), PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
|
|
879
774
|
type: PropTypes__default["default"].oneOf([].concat(Object.values(configList))),
|
|
@@ -883,7 +778,6 @@ var styleShape = function styleShape(configList) {
|
|
|
883
778
|
hotKey: PropTypes__default["default"].string
|
|
884
779
|
}))]);
|
|
885
780
|
};
|
|
886
|
-
|
|
887
781
|
RichTextEditor.propTypes = {
|
|
888
782
|
editorState: PropTypes__default["default"].object.isRequired,
|
|
889
783
|
onChange: PropTypes__default["default"].func.isRequired,
|
|
@@ -919,7 +813,6 @@ var markdownToEditorState = function markdownToEditorState(markdown) {
|
|
|
919
813
|
if (!markdown) {
|
|
920
814
|
return draftJs.EditorState.createEmpty(decorator);
|
|
921
815
|
}
|
|
922
|
-
|
|
923
816
|
var rawState = markdownDraftJs.markdownToDraft(markdown, {
|
|
924
817
|
preserveNewlines: true
|
|
925
818
|
});
|
|
@@ -934,37 +827,30 @@ var markdownToHtml = function markdownToHtml(markdown) {
|
|
|
934
827
|
};
|
|
935
828
|
|
|
936
829
|
var _excluded = ["name", "title", "languages"];
|
|
937
|
-
|
|
938
830
|
var RichTextEditorForLanguage = function RichTextEditorForLanguage(_ref) {
|
|
939
831
|
var _ref$language = _ref.language,
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
832
|
+
langKey = _ref$language.value,
|
|
833
|
+
label = _ref$language.label,
|
|
834
|
+
required = _ref$language.required,
|
|
835
|
+
values = _ref.values,
|
|
836
|
+
onChange = _ref.onChange,
|
|
837
|
+
variant = _ref.variant,
|
|
838
|
+
feedback = _ref.feedback,
|
|
839
|
+
tags = _ref.tags;
|
|
949
840
|
var _useState = React.useState(markdownToEditorState(values[langKey])),
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
841
|
+
editorState = _useState[0],
|
|
842
|
+
setEditorState = _useState[1];
|
|
953
843
|
var handleOnChange = function handleOnChange(changedState) {
|
|
954
844
|
var newValues = _extends({}, values);
|
|
955
|
-
|
|
956
845
|
var content = editorStateToMarkdown(changedState);
|
|
957
|
-
|
|
958
846
|
if (values[langKey] && content === '\n') {
|
|
959
847
|
delete newValues[langKey];
|
|
960
848
|
} else {
|
|
961
849
|
newValues[langKey] = content;
|
|
962
850
|
}
|
|
963
|
-
|
|
964
851
|
setEditorState(changedState);
|
|
965
852
|
onChange(newValues);
|
|
966
853
|
};
|
|
967
|
-
|
|
968
854
|
var feedbackText = feedback && feedback(langKey);
|
|
969
855
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(RichTextEditor, {
|
|
970
856
|
label: required ? label + '*' : label,
|
|
@@ -974,17 +860,15 @@ var RichTextEditorForLanguage = function RichTextEditorForLanguage(_ref) {
|
|
|
974
860
|
},
|
|
975
861
|
controlConfigSet: MinifiedConfigTypes,
|
|
976
862
|
tags: tags
|
|
977
|
-
}), variant && (feedbackText == null ? void 0 : feedbackText.length) > 0 && /*#__PURE__*/React__default["default"].createElement(form.FeedbackText, {
|
|
863
|
+
}), variant && (feedbackText == null ? void 0 : feedbackText.length) > 0 && ( /*#__PURE__*/React__default["default"].createElement(form.FeedbackText, {
|
|
978
864
|
variant: variant(langKey)
|
|
979
|
-
}, feedbackText));
|
|
865
|
+
}, feedbackText)));
|
|
980
866
|
};
|
|
981
|
-
|
|
982
867
|
var ExpandableMultiLanguageRichTextEditor = function ExpandableMultiLanguageRichTextEditor(_ref2) {
|
|
983
868
|
var name = _ref2.name,
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
869
|
+
title = _ref2.title,
|
|
870
|
+
languages = _ref2.languages,
|
|
871
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
|
|
988
872
|
return /*#__PURE__*/React__default["default"].createElement(expand.ExpandablePanel, {
|
|
989
873
|
title: title,
|
|
990
874
|
defaultOpen: true,
|
|
@@ -1014,7 +898,6 @@ var entityToHtml = {
|
|
|
1014
898
|
url: entity.data.url
|
|
1015
899
|
}, originalText);
|
|
1016
900
|
}
|
|
1017
|
-
|
|
1018
901
|
return originalText;
|
|
1019
902
|
}
|
|
1020
903
|
};
|
|
@@ -1027,13 +910,13 @@ var htmlToEntity = {
|
|
|
1027
910
|
}
|
|
1028
911
|
}
|
|
1029
912
|
};
|
|
913
|
+
|
|
1030
914
|
/* eslint-disable react/display-name */
|
|
1031
915
|
|
|
1032
916
|
var htmlToEditorState = function htmlToEditorState(html) {
|
|
1033
917
|
if (!html) {
|
|
1034
918
|
return draftJs.EditorState.createEmpty(decorator);
|
|
1035
919
|
}
|
|
1036
|
-
|
|
1037
920
|
var rawState = draftConvert.convertFromHTML(htmlToEntity)(html);
|
|
1038
921
|
return draftJs.EditorState.createWithContent(rawState, decorator);
|
|
1039
922
|
};
|