@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
|
@@ -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();
|
|
@@ -96,85 +85,67 @@ function withI18n(Component) {
|
|
|
96
85
|
}
|
|
97
86
|
|
|
98
87
|
var BlockTypeDropdown = /*#__PURE__*/function (_Component) {
|
|
99
|
-
_inheritsLoose(BlockTypeDropdown, _Component);
|
|
100
|
-
|
|
101
88
|
function BlockTypeDropdown() {
|
|
102
89
|
var _this;
|
|
103
|
-
|
|
104
90
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
105
91
|
args[_key] = arguments[_key];
|
|
106
92
|
}
|
|
107
|
-
|
|
108
93
|
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
109
|
-
|
|
110
94
|
_this.handleOnClick = function (selectedOption) {
|
|
111
95
|
var onChange = _this.props.onChange;
|
|
112
96
|
onChange(selectedOption);
|
|
113
97
|
};
|
|
114
|
-
|
|
115
98
|
return _this;
|
|
116
99
|
}
|
|
117
|
-
|
|
100
|
+
_inheritsLoose(BlockTypeDropdown, _Component);
|
|
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) {
|
|
@@ -217,46 +186,37 @@ function getKey(event) {
|
|
|
217
186
|
}
|
|
218
187
|
|
|
219
188
|
var StyleButton = /*#__PURE__*/function (_Component) {
|
|
220
|
-
_inheritsLoose(StyleButton, _Component);
|
|
221
|
-
|
|
222
189
|
function StyleButton() {
|
|
223
190
|
var _this;
|
|
224
|
-
|
|
225
191
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
226
192
|
args[_key] = arguments[_key];
|
|
227
193
|
}
|
|
228
|
-
|
|
229
194
|
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
230
|
-
|
|
231
195
|
_this.onToggle = function (e) {
|
|
232
196
|
var _this$props = _this.props,
|
|
233
|
-
|
|
234
|
-
|
|
197
|
+
style = _this$props.style,
|
|
198
|
+
onToggle = _this$props.onToggle;
|
|
235
199
|
e.preventDefault();
|
|
236
200
|
onToggle(style);
|
|
237
201
|
};
|
|
238
|
-
|
|
239
202
|
_this.onToggleNoEvent = function () {
|
|
240
203
|
var _this$props2 = _this.props,
|
|
241
|
-
|
|
242
|
-
|
|
204
|
+
style = _this$props2.style,
|
|
205
|
+
onToggle = _this$props2.onToggle;
|
|
243
206
|
onToggle(style);
|
|
244
207
|
};
|
|
245
|
-
|
|
246
208
|
return _this;
|
|
247
209
|
}
|
|
248
|
-
|
|
210
|
+
_inheritsLoose(StyleButton, _Component);
|
|
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", {
|
|
@@ -299,33 +257,26 @@ var BlockTypeButtonControls = function BlockTypeButtonControls(props) {
|
|
|
299
257
|
};
|
|
300
258
|
|
|
301
259
|
var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
|
|
302
|
-
_inheritsLoose(BlockTypeLinkControls, _Component);
|
|
303
|
-
|
|
304
260
|
function BlockTypeLinkControls() {
|
|
305
261
|
var _this;
|
|
306
|
-
|
|
307
262
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
308
263
|
args[_key] = arguments[_key];
|
|
309
264
|
}
|
|
310
|
-
|
|
311
265
|
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
312
266
|
_this.state = {
|
|
313
267
|
urlValue: '',
|
|
314
268
|
showUrlInput: false,
|
|
315
269
|
hasLink: false
|
|
316
270
|
};
|
|
317
|
-
|
|
318
271
|
_this.onUrlChange = function (e) {
|
|
319
272
|
_this.setState({
|
|
320
273
|
urlValue: e.target.value
|
|
321
274
|
});
|
|
322
275
|
};
|
|
323
|
-
|
|
324
276
|
_this.addLink = function (e) {
|
|
325
277
|
e.preventDefault();
|
|
326
278
|
var editorState = _this.props.editorState;
|
|
327
279
|
var selection = editorState.getSelection();
|
|
328
|
-
|
|
329
280
|
if (!selection.isCollapsed()) {
|
|
330
281
|
var currentContent = editorState.getCurrentContent();
|
|
331
282
|
var startKey = selection.getStartKey();
|
|
@@ -333,12 +284,10 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
|
|
|
333
284
|
var blockWithLinkAtBeginning = currentContent.getBlockForKey(startKey);
|
|
334
285
|
var linkKey = blockWithLinkAtBeginning.getEntityAt(startOffset);
|
|
335
286
|
var url = '';
|
|
336
|
-
|
|
337
287
|
if (linkKey) {
|
|
338
288
|
var linkInstance = currentContent.getEntity(linkKey);
|
|
339
289
|
url = linkInstance.getData().url;
|
|
340
290
|
}
|
|
341
|
-
|
|
342
291
|
_this.setState({
|
|
343
292
|
showUrlInput: true,
|
|
344
293
|
urlValue: url,
|
|
@@ -346,13 +295,12 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
|
|
|
346
295
|
});
|
|
347
296
|
}
|
|
348
297
|
};
|
|
349
|
-
|
|
350
298
|
_this.confirmLink = function (e) {
|
|
351
299
|
e.preventDefault();
|
|
352
300
|
var urlValue = _this.state.urlValue;
|
|
353
301
|
var _this$props = _this.props,
|
|
354
|
-
|
|
355
|
-
|
|
302
|
+
editorState = _this$props.editorState,
|
|
303
|
+
onToggle = _this$props.onToggle;
|
|
356
304
|
var contentState = editorState.getCurrentContent();
|
|
357
305
|
var contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {
|
|
358
306
|
url: urlValue
|
|
@@ -362,55 +310,46 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
|
|
|
362
310
|
currentContent: contentStateWithEntity
|
|
363
311
|
});
|
|
364
312
|
onToggle(newEditorState, entityKey);
|
|
365
|
-
|
|
366
313
|
_this.setState({
|
|
367
314
|
showUrlInput: false,
|
|
368
315
|
urlValue: ''
|
|
369
316
|
});
|
|
370
317
|
};
|
|
371
|
-
|
|
372
318
|
_this.cancelLink = function (e) {
|
|
373
319
|
e.preventDefault();
|
|
374
|
-
|
|
375
320
|
_this.setState({
|
|
376
321
|
showUrlInput: false,
|
|
377
322
|
urlValue: ''
|
|
378
323
|
});
|
|
379
324
|
};
|
|
380
|
-
|
|
381
325
|
_this.onLinkInputKeyDown = function (e) {
|
|
382
326
|
if (getKey(e) === Key.ENTER) {
|
|
383
327
|
_this.confirmLink(e);
|
|
384
328
|
}
|
|
385
329
|
};
|
|
386
|
-
|
|
387
330
|
_this.removeLink = function (e) {
|
|
388
331
|
e.preventDefault();
|
|
389
332
|
var _this$props2 = _this.props,
|
|
390
|
-
|
|
391
|
-
|
|
333
|
+
editorState = _this$props2.editorState,
|
|
334
|
+
onToggle = _this$props2.onToggle;
|
|
392
335
|
var hasLink = _this.state.hasLink;
|
|
393
336
|
var selection = editorState.getSelection();
|
|
394
|
-
|
|
395
337
|
if (!selection.isCollapsed() && hasLink) {
|
|
396
338
|
onToggle(editorState, null);
|
|
397
|
-
|
|
398
339
|
_this.setState({
|
|
399
340
|
showUrlInput: false
|
|
400
341
|
});
|
|
401
342
|
}
|
|
402
343
|
};
|
|
403
|
-
|
|
404
344
|
return _this;
|
|
405
345
|
}
|
|
406
|
-
|
|
346
|
+
_inheritsLoose(BlockTypeLinkControls, _Component);
|
|
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"
|
|
@@ -478,21 +415,16 @@ var InlineStyleControls = function InlineStyleControls(props) {
|
|
|
478
415
|
};
|
|
479
416
|
|
|
480
417
|
var TagControls = /*#__PURE__*/function (_Component) {
|
|
481
|
-
_inheritsLoose(TagControls, _Component);
|
|
482
|
-
|
|
483
418
|
function TagControls() {
|
|
484
419
|
var _this;
|
|
485
|
-
|
|
486
420
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
487
421
|
args[_key] = arguments[_key];
|
|
488
422
|
}
|
|
489
|
-
|
|
490
423
|
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
491
424
|
_this.tagControlRef = /*#__PURE__*/React.createRef();
|
|
492
425
|
_this.state = {
|
|
493
426
|
isOpen: false
|
|
494
427
|
};
|
|
495
|
-
|
|
496
428
|
_this.handleClickOutside = function (e) {
|
|
497
429
|
if (_this.tagControlRef && _this.tagControlRef.current && !_this.tagControlRef.current.contains(e.target)) {
|
|
498
430
|
_this.setState({
|
|
@@ -500,36 +432,30 @@ var TagControls = /*#__PURE__*/function (_Component) {
|
|
|
500
432
|
});
|
|
501
433
|
}
|
|
502
434
|
};
|
|
503
|
-
|
|
504
435
|
_this.handleTagClick = function (tag, delimiter) {
|
|
505
436
|
var _this$props = _this.props,
|
|
506
|
-
|
|
507
|
-
|
|
437
|
+
editorState = _this$props.editorState,
|
|
438
|
+
onInsertTag = _this$props.onInsertTag;
|
|
508
439
|
var delimiterStart = delimiter[0];
|
|
509
440
|
var delimiterEnd = delimiter[1];
|
|
510
441
|
var fullTag = "" + delimiterStart + tag + delimiterEnd;
|
|
511
442
|
onInsertTag(editorState, fullTag);
|
|
512
443
|
};
|
|
513
|
-
|
|
514
444
|
return _this;
|
|
515
445
|
}
|
|
516
|
-
|
|
446
|
+
_inheritsLoose(TagControls, _Component);
|
|
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();
|
|
@@ -703,89 +624,69 @@ var decorator = /*#__PURE__*/new draftJs.CompositeDecorator([{
|
|
|
703
624
|
}]);
|
|
704
625
|
|
|
705
626
|
var RichTextEditor = /*#__PURE__*/function (_Component) {
|
|
706
|
-
_inheritsLoose(RichTextEditor, _Component);
|
|
707
|
-
|
|
708
627
|
function RichTextEditor() {
|
|
709
628
|
var _this;
|
|
710
|
-
|
|
711
629
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
712
630
|
args[_key] = arguments[_key];
|
|
713
631
|
}
|
|
714
|
-
|
|
715
632
|
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
716
633
|
_this.wrapperRef = /*#__PURE__*/React.createRef();
|
|
717
634
|
_this.editor = /*#__PURE__*/React.createRef();
|
|
718
|
-
|
|
719
635
|
_this.handleKeyCommand = function (command, editorState) {
|
|
720
636
|
var newState = draftJs.RichUtils.handleKeyCommand(editorState, command);
|
|
721
|
-
|
|
722
637
|
if (newState) {
|
|
723
638
|
_this.props.onChange(newState);
|
|
724
|
-
|
|
725
639
|
return true;
|
|
726
640
|
}
|
|
727
|
-
|
|
728
641
|
return false;
|
|
729
642
|
};
|
|
730
|
-
|
|
731
643
|
_this.keyBindingFn = function (evt) {
|
|
732
644
|
switch (evt.keyCode) {
|
|
733
645
|
case 9:
|
|
734
646
|
return _this.onTab(evt);
|
|
735
|
-
|
|
736
647
|
default:
|
|
737
648
|
return draftJs.getDefaultKeyBinding(evt);
|
|
738
649
|
}
|
|
739
650
|
};
|
|
740
|
-
|
|
741
651
|
_this.onTab = function (evt) {
|
|
742
652
|
evt.stopPropagation();
|
|
743
653
|
var _this$props = _this.props,
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
654
|
+
maxTabDepth = _this$props.maxTabDepth,
|
|
655
|
+
editorState = _this$props.editorState,
|
|
656
|
+
onChange = _this$props.onChange;
|
|
747
657
|
onChange(draftJs.RichUtils.onTab(evt, editorState, maxTabDepth));
|
|
748
658
|
};
|
|
749
|
-
|
|
750
659
|
_this.toggleButtonBlockType = function (blockType) {
|
|
751
660
|
var _this$props2 = _this.props,
|
|
752
|
-
|
|
753
|
-
|
|
661
|
+
editorState = _this$props2.editorState,
|
|
662
|
+
onChange = _this$props2.onChange;
|
|
754
663
|
onChange(draftJs.RichUtils.toggleBlockType(editorState, blockType));
|
|
755
664
|
};
|
|
756
|
-
|
|
757
665
|
_this.toggleSelectBlockType = function (blockType) {
|
|
758
666
|
var _this$props3 = _this.props,
|
|
759
|
-
|
|
760
|
-
|
|
667
|
+
editorState = _this$props3.editorState,
|
|
668
|
+
onChange = _this$props3.onChange;
|
|
761
669
|
onChange(draftJs.RichUtils.toggleBlockType(editorState, blockType));
|
|
762
670
|
};
|
|
763
|
-
|
|
764
671
|
_this.toggleInlineStyle = function (inlineStyle) {
|
|
765
672
|
var _this$props4 = _this.props,
|
|
766
|
-
|
|
767
|
-
|
|
673
|
+
editorState = _this$props4.editorState,
|
|
674
|
+
onChange = _this$props4.onChange;
|
|
768
675
|
onChange(draftJs.RichUtils.toggleInlineStyle(editorState, inlineStyle));
|
|
769
676
|
};
|
|
770
|
-
|
|
771
677
|
_this.toggleLink = function (newEditorState, entityKey) {
|
|
772
678
|
_this.props.onChange(draftJs.RichUtils.toggleLink(newEditorState, newEditorState.getSelection(), entityKey));
|
|
773
679
|
};
|
|
774
|
-
|
|
775
680
|
_this.insertText = function (editorState, text) {
|
|
776
681
|
var newContent = draftJs.Modifier.insertText(editorState.getCurrentContent(), editorState.getSelection(), text);
|
|
777
|
-
|
|
778
682
|
_this.props.onChange(draftJs.EditorState.push(editorState, newContent, 'insert-characters'), function () {
|
|
779
683
|
return _this.focusEditor();
|
|
780
684
|
});
|
|
781
685
|
};
|
|
782
|
-
|
|
783
686
|
_this.getFontListConfigForPanelType = function (panelType) {
|
|
784
687
|
var controlConfig = _this.getControlConfigBySet(_this.props.controlConfigSet);
|
|
785
|
-
|
|
786
688
|
return controlConfig[panelType];
|
|
787
689
|
};
|
|
788
|
-
|
|
789
690
|
_this.getControlConfigBySet = function (config) {
|
|
790
691
|
var fontList = (config && config.fontList || Object.keys(FontList)).filter(function (f) {
|
|
791
692
|
return typeof f === 'object' ? FontList[f.type] : FontList[f];
|
|
@@ -808,28 +709,25 @@ var RichTextEditor = /*#__PURE__*/function (_Component) {
|
|
|
808
709
|
inlineStyles: inlineStyles
|
|
809
710
|
};
|
|
810
711
|
};
|
|
811
|
-
|
|
812
712
|
return _this;
|
|
813
713
|
}
|
|
814
|
-
|
|
714
|
+
_inheritsLoose(RichTextEditor, _Component);
|
|
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
|
};
|