@entur-partner/rich-text-editor 6.2.3 → 6.2.4-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.
@@ -1,17 +1,17 @@
1
+ import { ExpandablePanel } from '@entur/expand';
2
+ import { TextField, FeedbackText } from '@entur/form';
3
+ import { Unbutton, Stack } from '@entur-partner/common';
1
4
  import React, { Component, createRef, useState } from 'react';
5
+ import { Label } from '@entur/typography';
6
+ import cx from 'classnames';
2
7
  import { EditorState, CompositeDecorator, Editor, RichUtils, getDefaultKeyBinding, Modifier, convertToRaw, convertFromRaw } from 'draft-js';
3
8
  import PropTypes from 'prop-types';
4
- import cx from 'classnames';
5
- import { Label } from '@entur/typography';
6
- import { Dropdown } from '@entur/dropdown';
7
9
  import { useTranslation } from 'react-i18next';
8
- import { TextField, FeedbackText } from '@entur/form';
9
- import { LinkIcon, CloseIcon, CheckIcon, UnlinkIcon, DownArrowIcon, BulletListIcon, NumberListIcon, BoldIcon, ItalicIcon, UnderlineIcon } from '@entur/icons';
10
- import { Unbutton, Stack } from '@entur-partner/common';
11
10
  import { SecondarySquareButton } from '@entur/button';
12
- import { Popover } from '@entur/tooltip';
11
+ import { LinkIcon, CloseIcon, CheckIcon, UnlinkIcon, DownArrowIcon, BulletListIcon, NumberListIcon, BoldIcon, ItalicIcon, UnderlineIcon } from '@entur/icons';
12
+ import { Dropdown } from '@entur/dropdown';
13
13
  import { OverflowMenuItem, OverflowMenu } from '@entur/menu';
14
- import { ExpandablePanel } from '@entur/expand';
14
+ import { Popover } from '@entur/tooltip';
15
15
  import { draftToMarkdown, markdownToDraft } from 'markdown-draft-js';
16
16
  import showdown from 'showdown';
17
17
  import { convertFromHTML, convertToHTML } from 'draft-convert';
@@ -55,12 +55,19 @@ function _objectWithoutPropertiesLoose(source, excluded) {
55
55
  return target;
56
56
  }
57
57
 
58
+ var Key = /*#__PURE__*/Object.freeze({
59
+ ENTER: 13
60
+ });
61
+ function getKey(event) {
62
+ return event.keyCode || event.which;
63
+ }
64
+
58
65
  function useI18N() {
59
66
  var _useTranslation = useTranslation(),
60
67
  t = _useTranslation.t,
61
68
  language = _useTranslation.i18n.language;
62
- if (language !== 'nb' && language !== 'en' && language !== 'nb-NO' && language !== 'en-GB') {
63
- throw Error('Language must be either nb or en.');
69
+ if (language !== "nb" && language !== "en" && language !== "nb-NO" && language !== "en-GB") {
70
+ throw Error("Language must be either nb or en.");
64
71
  }
65
72
  return t;
66
73
  }
@@ -73,107 +80,6 @@ function withI18n(Component) {
73
80
  };
74
81
  }
75
82
 
76
- var BlockTypeDropdown = /*#__PURE__*/function (_Component) {
77
- function BlockTypeDropdown() {
78
- var _this;
79
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
80
- args[_key] = arguments[_key];
81
- }
82
- _this = _Component.call.apply(_Component, [this].concat(args)) || this;
83
- _this.handleOnClick = function (selectedOption) {
84
- var onChange = _this.props.onChange;
85
- onChange(selectedOption);
86
- };
87
- return _this;
88
- }
89
- _inheritsLoose(BlockTypeDropdown, _Component);
90
- var _proto = BlockTypeDropdown.prototype;
91
- _proto.toItem = function toItem(option) {
92
- return {
93
- value: option.style,
94
- label: this.renderFormattedLabel(option.label)
95
- };
96
- };
97
- _proto.renderFormattedLabel = function renderFormattedLabel(label) {
98
- var formattedLabelText = this.props.i18n(label);
99
- switch (label) {
100
- case 'styles.p':
101
- return /*#__PURE__*/React.createElement("div", {
102
- className: "default-p"
103
- }, formattedLabelText);
104
- case 'styles.h1':
105
- return /*#__PURE__*/React.createElement("div", {
106
- className: "default-h1"
107
- }, formattedLabelText);
108
- case 'styles.h2':
109
- return /*#__PURE__*/React.createElement("div", {
110
- className: "default-h2"
111
- }, formattedLabelText);
112
- case 'styles.h3':
113
- return /*#__PURE__*/React.createElement("div", {
114
- className: "default-h3"
115
- }, formattedLabelText);
116
- case 'styles.h4':
117
- return /*#__PURE__*/React.createElement("div", {
118
- className: "default-h4"
119
- }, formattedLabelText);
120
- case 'styles.h5':
121
- return /*#__PURE__*/React.createElement("div", {
122
- className: "default-h5"
123
- }, formattedLabelText);
124
- case 'styles.h6':
125
- return /*#__PURE__*/React.createElement("div", {
126
- className: "default-h6"
127
- }, formattedLabelText);
128
- default:
129
- return /*#__PURE__*/React.createElement("p", null, formattedLabelText);
130
- }
131
- };
132
- _proto.render = function render() {
133
- var _this2 = this;
134
- var _this$props = this.props,
135
- options = _this$props.options,
136
- selected = _this$props.selected,
137
- i18n = _this$props.i18n;
138
- return /*#__PURE__*/React.createElement(Dropdown, {
139
- className: "block-type-dropdown",
140
- items: options.map(function (option) {
141
- return _this2.toItem(option);
142
- }),
143
- selectedItem: this.toItem(selected),
144
- label: i18n('styles.style'),
145
- onChange: function onChange(selectedItem) {
146
- return _this2.handleOnClick(selectedItem.value);
147
- }
148
- });
149
- };
150
- return BlockTypeDropdown;
151
- }(Component);
152
- var BlockTypeDropdown$1 = /*#__PURE__*/withI18n(BlockTypeDropdown);
153
-
154
- var BlockTypeControls = function BlockTypeControls(_ref) {
155
- var editorState = _ref.editorState,
156
- blockTypes = _ref.blockTypes,
157
- onToggle = _ref.onToggle;
158
- var selection = editorState.getSelection();
159
- var blockTypeStyle = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
160
- var selectedOption = blockTypes.find(function (option) {
161
- return option.style === blockTypeStyle;
162
- }) || blockTypes[0];
163
- return /*#__PURE__*/React.createElement(BlockTypeDropdown$1, {
164
- options: blockTypes,
165
- selected: selectedOption,
166
- onChange: onToggle
167
- });
168
- };
169
-
170
- var Key = /*#__PURE__*/Object.freeze({
171
- ENTER: 13
172
- });
173
- function getKey(event) {
174
- return event.keyCode || event.which;
175
- }
176
-
177
83
  var StyleButton = /*#__PURE__*/function (_Component) {
178
84
  function StyleButton() {
179
85
  var _this;
@@ -206,20 +112,26 @@ var StyleButton = /*#__PURE__*/function (_Component) {
206
112
  label = _this$props3.label,
207
113
  title = _this$props3.title,
208
114
  hotKey = _this$props3.hotKey;
209
- var classNames = cx('editor-stylebutton', {
115
+ var classNames = cx("editor-stylebutton", {
210
116
  active: active
211
117
  });
212
- return /*#__PURE__*/React.createElement("div", {
213
- className: classNames,
214
- onMouseDown: this.onToggle,
215
- title: i18n(title) + hotKey,
216
- tabIndex: 0,
217
- onKeyPress: function onKeyPress(event) {
218
- if (getKey(event) === Key.ENTER) {
219
- _this2.onToggleNoEvent();
118
+ return (
119
+ /*#__PURE__*/
120
+ // biome-ignore lint/a11y/noStaticElementInteractions: Ignore for now.
121
+ React.createElement("div", {
122
+ className: classNames,
123
+ onMouseDown: this.onToggle,
124
+ title: i18n(title) + hotKey
125
+ // biome-ignore lint/a11y/noNoninteractiveTabindex: Ignore for now.
126
+ ,
127
+ tabIndex: 0,
128
+ onKeyPress: function onKeyPress(event) {
129
+ if (getKey(event) === Key.ENTER) {
130
+ _this2.onToggleNoEvent();
131
+ }
220
132
  }
221
- }
222
- }, label);
133
+ }, label)
134
+ );
223
135
  };
224
136
  return StyleButton;
225
137
  }(Component);
@@ -233,9 +145,9 @@ var BlockTypeButtonControls = function BlockTypeButtonControls(props) {
233
145
  var blockTypeStyle = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
234
146
  return /*#__PURE__*/React.createElement("div", {
235
147
  className: "controls-group block-editor-controls"
236
- }, blockTypes.map(function (type, i) {
148
+ }, blockTypes.map(function (type) {
237
149
  return /*#__PURE__*/React.createElement(StyleButton$1, {
238
- key: i,
150
+ key: type.style + type.label,
239
151
  active: type.style === blockTypeStyle,
240
152
  label: type.label,
241
153
  onToggle: onToggle,
@@ -253,7 +165,7 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
253
165
  }
254
166
  _this = _Component.call.apply(_Component, [this].concat(args)) || this;
255
167
  _this.state = {
256
- urlValue: '',
168
+ urlValue: "",
257
169
  showUrlInput: false,
258
170
  hasLink: false
259
171
  };
@@ -272,7 +184,7 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
272
184
  var startOffset = selection.getStartOffset();
273
185
  var blockWithLinkAtBeginning = currentContent.getBlockForKey(startKey);
274
186
  var linkKey = blockWithLinkAtBeginning.getEntityAt(startOffset);
275
- var url = '';
187
+ var url = "";
276
188
  if (linkKey) {
277
189
  var linkInstance = currentContent.getEntity(linkKey);
278
190
  url = linkInstance.getData().url;
@@ -291,7 +203,7 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
291
203
  editorState = _this$props.editorState,
292
204
  onToggle = _this$props.onToggle;
293
205
  var contentState = editorState.getCurrentContent();
294
- var contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {
206
+ var contentStateWithEntity = contentState.createEntity("LINK", "MUTABLE", {
295
207
  url: urlValue
296
208
  });
297
209
  var entityKey = contentStateWithEntity.getLastCreatedEntityKey();
@@ -301,14 +213,14 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
301
213
  onToggle(newEditorState, entityKey);
302
214
  _this.setState({
303
215
  showUrlInput: false,
304
- urlValue: ''
216
+ urlValue: ""
305
217
  });
306
218
  };
307
219
  _this.cancelLink = function (e) {
308
220
  e.preventDefault();
309
221
  _this.setState({
310
222
  showUrlInput: false,
311
- urlValue: ''
223
+ urlValue: ""
312
224
  });
313
225
  };
314
226
  _this.onLinkInputKeyDown = function (e) {
@@ -343,7 +255,7 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
343
255
  className: "controls-group block-editor-controls link-controls"
344
256
  }, /*#__PURE__*/React.createElement("div", {
345
257
  className: "editor-stylebutton",
346
- title: i18n('styles.link'),
258
+ title: i18n("styles.link"),
347
259
  onClick: this.addLink,
348
260
  tabIndex: 0
349
261
  }, /*#__PURE__*/React.createElement(LinkIcon, null)), showUrlInput && /*#__PURE__*/React.createElement("div", {
@@ -353,7 +265,7 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
353
265
  onMouseDown: this.cancelLink
354
266
  }, /*#__PURE__*/React.createElement(CloseIcon, null)), /*#__PURE__*/React.createElement("div", {
355
267
  className: "link-label"
356
- }, i18n('common.from')), /*#__PURE__*/React.createElement("div", {
268
+ }, i18n("common.from")), /*#__PURE__*/React.createElement("div", {
357
269
  className: "url-input-form"
358
270
  }, /*#__PURE__*/React.createElement(TextField, {
359
271
  style: {
@@ -373,8 +285,8 @@ var BlockTypeLinkControls = /*#__PURE__*/function (_Component) {
373
285
  className: "remove-link"
374
286
  }, /*#__PURE__*/React.createElement(Unbutton, {
375
287
  onClick: this.removeLink,
376
- title: i18n('styles.unlink')
377
- }, /*#__PURE__*/React.createElement(UnlinkIcon, null), i18n('styles.unlink')))));
288
+ title: i18n("styles.unlink")
289
+ }, /*#__PURE__*/React.createElement(UnlinkIcon, null), i18n("styles.unlink")))));
378
290
  };
379
291
  return BlockTypeLinkControls;
380
292
  }(Component);
@@ -384,15 +296,109 @@ BlockTypeLinkControls.propTypes = {
384
296
  };
385
297
  var BlockTypeLinkControls$1 = /*#__PURE__*/withI18n(BlockTypeLinkControls);
386
298
 
299
+ var BlockTypeDropdown = /*#__PURE__*/function (_Component) {
300
+ function BlockTypeDropdown() {
301
+ var _this;
302
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
303
+ args[_key] = arguments[_key];
304
+ }
305
+ _this = _Component.call.apply(_Component, [this].concat(args)) || this;
306
+ _this.handleOnClick = function (selectedOption) {
307
+ var onChange = _this.props.onChange;
308
+ onChange(selectedOption);
309
+ };
310
+ return _this;
311
+ }
312
+ _inheritsLoose(BlockTypeDropdown, _Component);
313
+ var _proto = BlockTypeDropdown.prototype;
314
+ _proto.toItem = function toItem(option) {
315
+ return {
316
+ value: option.style,
317
+ label: this.renderFormattedLabel(option.label)
318
+ };
319
+ };
320
+ _proto.renderFormattedLabel = function renderFormattedLabel(label) {
321
+ var formattedLabelText = this.props.i18n(label);
322
+ switch (label) {
323
+ case "styles.p":
324
+ return /*#__PURE__*/React.createElement("div", {
325
+ className: "default-p"
326
+ }, formattedLabelText);
327
+ case "styles.h1":
328
+ return /*#__PURE__*/React.createElement("div", {
329
+ className: "default-h1"
330
+ }, formattedLabelText);
331
+ case "styles.h2":
332
+ return /*#__PURE__*/React.createElement("div", {
333
+ className: "default-h2"
334
+ }, formattedLabelText);
335
+ case "styles.h3":
336
+ return /*#__PURE__*/React.createElement("div", {
337
+ className: "default-h3"
338
+ }, formattedLabelText);
339
+ case "styles.h4":
340
+ return /*#__PURE__*/React.createElement("div", {
341
+ className: "default-h4"
342
+ }, formattedLabelText);
343
+ case "styles.h5":
344
+ return /*#__PURE__*/React.createElement("div", {
345
+ className: "default-h5"
346
+ }, formattedLabelText);
347
+ case "styles.h6":
348
+ return /*#__PURE__*/React.createElement("div", {
349
+ className: "default-h6"
350
+ }, formattedLabelText);
351
+ default:
352
+ return /*#__PURE__*/React.createElement("p", null, formattedLabelText);
353
+ }
354
+ };
355
+ _proto.render = function render() {
356
+ var _this2 = this;
357
+ var _this$props = this.props,
358
+ options = _this$props.options,
359
+ selected = _this$props.selected,
360
+ i18n = _this$props.i18n;
361
+ return /*#__PURE__*/React.createElement(Dropdown, {
362
+ className: "block-type-dropdown",
363
+ items: options.map(function (option) {
364
+ return _this2.toItem(option);
365
+ }),
366
+ selectedItem: this.toItem(selected),
367
+ label: i18n("styles.style"),
368
+ onChange: function onChange(selectedItem) {
369
+ return _this2.handleOnClick(selectedItem.value);
370
+ }
371
+ });
372
+ };
373
+ return BlockTypeDropdown;
374
+ }(Component);
375
+ var BlockTypeDropdown$1 = /*#__PURE__*/withI18n(BlockTypeDropdown);
376
+
377
+ var BlockTypeControls = function BlockTypeControls(_ref) {
378
+ var editorState = _ref.editorState,
379
+ blockTypes = _ref.blockTypes,
380
+ onToggle = _ref.onToggle;
381
+ var selection = editorState.getSelection();
382
+ var blockTypeStyle = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
383
+ var selectedOption = blockTypes.find(function (option) {
384
+ return option.style === blockTypeStyle;
385
+ }) || blockTypes[0];
386
+ return /*#__PURE__*/React.createElement(BlockTypeDropdown$1, {
387
+ options: blockTypes,
388
+ selected: selectedOption,
389
+ onChange: onToggle
390
+ });
391
+ };
392
+
387
393
  var InlineStyleControls = function InlineStyleControls(props) {
388
394
  var editorState = props.editorState,
389
395
  inlineStyles = props.inlineStyles;
390
396
  var currentStyle = editorState.getCurrentInlineStyle();
391
397
  return /*#__PURE__*/React.createElement("div", {
392
398
  className: "controls-group inline-editor-controls"
393
- }, inlineStyles.map(function (type, i) {
399
+ }, inlineStyles.map(function (type) {
394
400
  return /*#__PURE__*/React.createElement(StyleButton$1, {
395
- key: i,
401
+ key: type.style + type.label,
396
402
  active: currentStyle.has(type.style),
397
403
  label: type.label,
398
404
  onToggle: props.onToggle,
@@ -415,7 +421,7 @@ var TagControls = /*#__PURE__*/function (_Component) {
415
421
  isOpen: false
416
422
  };
417
423
  _this.handleClickOutside = function (e) {
418
- if (_this.tagControlRef && _this.tagControlRef.current && !_this.tagControlRef.current.contains(e.target)) {
424
+ if (_this.tagControlRef.current && !_this.tagControlRef.current.contains(e.target)) {
419
425
  _this.setState({
420
426
  isOpen: false
421
427
  });
@@ -435,10 +441,10 @@ var TagControls = /*#__PURE__*/function (_Component) {
435
441
  _inheritsLoose(TagControls, _Component);
436
442
  var _proto = TagControls.prototype;
437
443
  _proto.componentDidMount = function componentDidMount() {
438
- document.addEventListener('mousedown', this.handleClickOutside);
444
+ document.addEventListener("mousedown", this.handleClickOutside);
439
445
  };
440
446
  _proto.componentWillUnmount = function componentWillUnmount() {
441
- document.removeEventListener('mousedown', this.handleClickOutside);
447
+ document.removeEventListener("mousedown", this.handleClickOutside);
442
448
  };
443
449
  _proto.render = function render() {
444
450
  var _this2 = this;
@@ -446,12 +452,12 @@ var TagControls = /*#__PURE__*/function (_Component) {
446
452
  i18n = _this$props2.i18n,
447
453
  tags = _this$props2.tags;
448
454
  var isOpen = this.state.isOpen;
449
- var menuItems = tags.map(function (tag, i) {
450
- var delimiter = tag.delimiter || '{}';
455
+ var menuItems = tags.map(function (tag) {
456
+ var delimiter = tag.delimiter || "{}";
451
457
  return /*#__PURE__*/React.createElement(OverflowMenuItem, {
452
- key: i,
458
+ key: tag.tag,
453
459
  className: "tag-control",
454
- id: 'tag-control-' + tag.tag,
460
+ id: "tag-control-" + tag.tag,
455
461
  onClick: function onClick() {
456
462
  return _this2.handleTagClick(tag.tag, delimiter);
457
463
  }
@@ -472,7 +478,7 @@ var TagControls = /*#__PURE__*/function (_Component) {
472
478
  };
473
479
  });
474
480
  }
475
- }, i18n('common.insert'), /*#__PURE__*/React.createElement(DownArrowIcon, {
481
+ }, i18n("common.insert"), /*#__PURE__*/React.createElement(DownArrowIcon, {
476
482
  className: "tag-control-chevron",
477
483
  inline: true
478
484
  })), /*#__PURE__*/React.createElement(Popover, {
@@ -508,101 +514,101 @@ var Link = function Link(props) {
508
514
  function findLinkEntities(contentBlock, callback, contentState) {
509
515
  contentBlock.findEntityRanges(function (character) {
510
516
  var entityKey = character.getEntity();
511
- return entityKey !== null && contentState.getEntity(entityKey).getType() === 'LINK';
517
+ return entityKey !== null && contentState.getEntity(entityKey).getType() === "LINK";
512
518
  }, callback);
513
519
  }
514
520
 
515
521
  var EditorConfigTypes = /*#__PURE__*/Object.freeze({
516
522
  FONT_LIST: {
517
- UNSTYLED: 'unstyled',
518
- HEADER_ONE: 'header-one',
519
- HEADER_TWO: 'header-two',
520
- HEADER_THREE: 'header-three',
521
- HEADER_FOUR: 'header-four',
522
- HEADER_FIVE: 'header-five',
523
- HEADER_SIX: 'header-six'
523
+ UNSTYLED: "unstyled",
524
+ HEADER_ONE: "header-one",
525
+ HEADER_TWO: "header-two",
526
+ HEADER_THREE: "header-three",
527
+ HEADER_FOUR: "header-four",
528
+ HEADER_FIVE: "header-five",
529
+ HEADER_SIX: "header-six"
524
530
  },
525
531
  BLOCK_TYPES: {
526
- UNORDERED_LIST: 'unordered-list',
527
- ORDERED_LIST: 'ordered-list'
532
+ UNORDERED_LIST: "unordered-list",
533
+ ORDERED_LIST: "ordered-list"
528
534
  },
529
535
  INLINE_STYLES: {
530
- BOLD: 'bold',
531
- ITALIC: 'italic',
532
- UNDERLINE: 'underline'
536
+ BOLD: "bold",
537
+ ITALIC: "italic",
538
+ UNDERLINE: "underline"
533
539
  }
534
540
  });
535
541
  var FontList = /*#__PURE__*/Object.freeze({
536
542
  unstyled: {
537
- label: 'styles.p',
538
- style: 'unstyled'
543
+ label: "styles.p",
544
+ style: "unstyled"
539
545
  },
540
- 'header-one': {
541
- label: 'styles.h1',
542
- style: 'header-one'
546
+ "header-one": {
547
+ label: "styles.h1",
548
+ style: "header-one"
543
549
  },
544
- 'header-two': {
545
- label: 'styles.h2',
546
- style: 'header-two'
550
+ "header-two": {
551
+ label: "styles.h2",
552
+ style: "header-two"
547
553
  },
548
- 'header-three': {
549
- label: 'styles.h3',
550
- style: 'header-three'
554
+ "header-three": {
555
+ label: "styles.h3",
556
+ style: "header-three"
551
557
  },
552
- 'header-four': {
553
- label: 'styles.h4',
554
- style: 'header-four'
558
+ "header-four": {
559
+ label: "styles.h4",
560
+ style: "header-four"
555
561
  },
556
- 'header-five': {
557
- label: 'styles.h5',
558
- style: 'header-five'
562
+ "header-five": {
563
+ label: "styles.h5",
564
+ style: "header-five"
559
565
  },
560
- 'header-six': {
561
- label: 'styles.h6',
562
- style: 'header-six'
566
+ "header-six": {
567
+ label: "styles.h6",
568
+ style: "header-six"
563
569
  }
564
570
  });
565
571
  var BlockTypeList = /*#__PURE__*/Object.freeze({
566
- 'unordered-list': {
572
+ "unordered-list": {
567
573
  label: /*#__PURE__*/React.createElement(BulletListIcon, null),
568
- style: 'unordered-list-item',
569
- tooltip: 'styles.unordered_list_item'
574
+ style: "unordered-list-item",
575
+ tooltip: "styles.unordered_list_item"
570
576
  },
571
- 'ordered-list': {
577
+ "ordered-list": {
572
578
  label: /*#__PURE__*/React.createElement(NumberListIcon, null),
573
- style: 'ordered-list-item',
574
- tooltip: 'styles.ordered_list_item'
579
+ style: "ordered-list-item",
580
+ tooltip: "styles.ordered_list_item"
575
581
  }
576
582
  });
577
583
  var InlineStylesList = /*#__PURE__*/Object.freeze({
578
584
  bold: {
579
585
  label: /*#__PURE__*/React.createElement(BoldIcon, null),
580
- style: 'BOLD',
581
- tooltip: 'styles.bold',
582
- hotKey: '(Ctrl+B)'
586
+ style: "BOLD",
587
+ tooltip: "styles.bold",
588
+ hotKey: "(Ctrl+B)"
583
589
  },
584
590
  italic: {
585
591
  label: /*#__PURE__*/React.createElement(ItalicIcon, null),
586
- style: 'ITALIC',
587
- tooltip: 'styles.italic',
588
- hotKey: '(Ctrl+I)'
592
+ style: "ITALIC",
593
+ tooltip: "styles.italic",
594
+ hotKey: "(Ctrl+I)"
589
595
  },
590
596
  underline: {
591
597
  label: /*#__PURE__*/React.createElement(UnderlineIcon, null),
592
- style: 'UNDERLINE',
593
- tooltip: 'styles.underline',
594
- hotKey: '(Ctrl+U)'
598
+ style: "UNDERLINE",
599
+ tooltip: "styles.underline",
600
+ hotKey: "(Ctrl+U)"
595
601
  }
596
602
  });
597
603
  var MinifiedConfigTypes = /*#__PURE__*/Object.freeze({
598
604
  fontList: [{
599
- type: 'unstyled',
600
- label: 'styles.p',
601
- style: 'unstyled'
605
+ type: "unstyled",
606
+ label: "styles.p",
607
+ style: "unstyled"
602
608
  }, {
603
- type: 'header-two',
604
- label: 'styles.h1',
605
- style: 'header-two'
609
+ type: "header-two",
610
+ label: "styles.h1",
611
+ style: "header-two"
606
612
  }],
607
613
  blockTypes: /*#__PURE__*/Object.values(EditorConfigTypes.BLOCK_TYPES),
608
614
  inlineStyles: [EditorConfigTypes.INLINE_STYLES.BOLD, EditorConfigTypes.INLINE_STYLES.ITALIC]
@@ -668,7 +674,7 @@ var RichTextEditor = /*#__PURE__*/function (_Component) {
668
674
  };
669
675
  _this.insertText = function (editorState, text) {
670
676
  var newContent = Modifier.insertText(editorState.getCurrentContent(), editorState.getSelection(), text);
671
- _this.props.onChange(EditorState.push(editorState, newContent, 'insert-characters'), function () {
677
+ _this.props.onChange(EditorState.push(editorState, newContent, "insert-characters"), function () {
672
678
  return _this.focusEditor();
673
679
  });
674
680
  };
@@ -677,18 +683,18 @@ var RichTextEditor = /*#__PURE__*/function (_Component) {
677
683
  return controlConfig[panelType];
678
684
  };
679
685
  _this.getControlConfigBySet = function (config) {
680
- var fontList = (config && config.fontList || Object.keys(FontList)).filter(function (f) {
681
- return typeof f === 'object' ? FontList[f.type] : FontList[f];
686
+ var fontList = ((config == null ? void 0 : config.fontList) || Object.keys(FontList)).filter(function (f) {
687
+ return typeof f === "object" ? FontList[f.type] : FontList[f];
682
688
  }).map(function (f) {
683
689
  return f.label && f.style ? f : FontList[f];
684
690
  });
685
- var blockTypes = (config && config.blockTypes || Object.keys(BlockTypeList)).filter(function (f) {
686
- return typeof f === 'object' ? BlockTypeList[f.type] : BlockTypeList[f];
691
+ var blockTypes = ((config == null ? void 0 : config.blockTypes) || Object.keys(BlockTypeList)).filter(function (f) {
692
+ return typeof f === "object" ? BlockTypeList[f.type] : BlockTypeList[f];
687
693
  }).map(function (f) {
688
694
  return f.label && f.style ? f : BlockTypeList[f];
689
695
  });
690
- var inlineStyles = (config && config.inlineStyles || Object.keys(InlineStylesList)).filter(function (f) {
691
- return typeof f === 'object' ? InlineStylesList[f.type] : InlineStylesList[f];
696
+ var inlineStyles = ((config == null ? void 0 : config.inlineStyles) || Object.keys(InlineStylesList)).filter(function (f) {
697
+ return typeof f === "object" ? InlineStylesList[f.type] : InlineStylesList[f];
692
698
  }).map(function (f) {
693
699
  return f.label && f.style ? f : InlineStylesList[f];
694
700
  });
@@ -703,7 +709,8 @@ var RichTextEditor = /*#__PURE__*/function (_Component) {
703
709
  _inheritsLoose(RichTextEditor, _Component);
704
710
  var _proto = RichTextEditor.prototype;
705
711
  _proto.focusEditor = function focusEditor() {
706
- this.editor.current && this.editor.current.focus();
712
+ var _this$editor$current;
713
+ (_this$editor$current = this.editor.current) == null || _this$editor$current.focus();
707
714
  };
708
715
  _proto.render = function render() {
709
716
  var _this$props5 = this.props,
@@ -717,7 +724,7 @@ var RichTextEditor = /*#__PURE__*/function (_Component) {
717
724
  editorState = _this$props5.editorState,
718
725
  onChange = _this$props5.onChange,
719
726
  handleBeforeInput = _this$props5.handleBeforeInput;
720
- var classNames = cx('editor-root', className);
727
+ var classNames = cx("editor-root", className);
721
728
  return /*#__PURE__*/React.createElement("div", {
722
729
  ref: this.wrapperRef
723
730
  }, label && /*#__PURE__*/React.createElement(Label, null, label), /*#__PURE__*/React.createElement("div", {
@@ -727,15 +734,15 @@ var RichTextEditor = /*#__PURE__*/function (_Component) {
727
734
  }, showFontMenu && /*#__PURE__*/React.createElement(BlockTypeControls, {
728
735
  editorState: editorState,
729
736
  onToggle: this.toggleSelectBlockType,
730
- blockTypes: this.getFontListConfigForPanelType('fontList')
737
+ blockTypes: this.getFontListConfigForPanelType("fontList")
731
738
  }), showInlineStyleMenu && /*#__PURE__*/React.createElement(InlineStyleControls, {
732
739
  editorState: editorState,
733
740
  onToggle: this.toggleInlineStyle,
734
- inlineStyles: this.getFontListConfigForPanelType('inlineStyles')
741
+ inlineStyles: this.getFontListConfigForPanelType("inlineStyles")
735
742
  }), showTextFormatMenu && /*#__PURE__*/React.createElement(BlockTypeButtonControls, {
736
743
  editorState: editorState,
737
744
  onToggle: this.toggleButtonBlockType,
738
- blockTypes: this.getFontListConfigForPanelType('blockTypes')
745
+ blockTypes: this.getFontListConfigForPanelType("blockTypes")
739
746
  }), showLinkMenu && /*#__PURE__*/React.createElement(BlockTypeLinkControls$1, {
740
747
  editorState: editorState,
741
748
  onToggle: this.toggleLink
@@ -789,7 +796,7 @@ RichTextEditor.defaultProps = {
789
796
  showInlineStyleMenu: true,
790
797
  showTextFormatMenu: true,
791
798
  showLinkMenu: true,
792
- label: ''
799
+ label: ""
793
800
  };
794
801
 
795
802
  var editorStateToMarkdown = function editorStateToMarkdown(editorState) {
@@ -832,7 +839,7 @@ var RichTextEditorForLanguage = function RichTextEditorForLanguage(_ref) {
832
839
  var handleOnChange = function handleOnChange(changedState) {
833
840
  var newValues = _extends({}, values);
834
841
  var content = editorStateToMarkdown(changedState);
835
- if (values[langKey] && content === '\n') {
842
+ if (values[langKey] && content === "\n") {
836
843
  delete newValues[langKey];
837
844
  } else {
838
845
  newValues[langKey] = content;
@@ -840,16 +847,16 @@ var RichTextEditorForLanguage = function RichTextEditorForLanguage(_ref) {
840
847
  setEditorState(changedState);
841
848
  onChange(newValues);
842
849
  };
843
- var feedbackText = feedback && feedback(langKey);
850
+ var feedbackText = feedback == null ? void 0 : feedback(langKey);
844
851
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RichTextEditor, {
845
- label: required ? label + '*' : label,
852
+ label: required ? label + "*" : label,
846
853
  editorState: editorState,
847
854
  onChange: function onChange(changedState) {
848
855
  return handleOnChange(changedState);
849
856
  },
850
857
  controlConfigSet: MinifiedConfigTypes,
851
858
  tags: tags
852
- }), variant && (feedbackText == null ? void 0 : feedbackText.length) > 0 && ( /*#__PURE__*/React.createElement(FeedbackText, {
859
+ }), variant && feedbackText && feedbackText.length > 0 && ( /*#__PURE__*/React.createElement(FeedbackText, {
853
860
  variant: variant(langKey)
854
861
  }, feedbackText)));
855
862
  };
@@ -862,9 +869,9 @@ var ExpandableMultiLanguageRichTextEditor = function ExpandableMultiLanguageRich
862
869
  title: title,
863
870
  defaultOpen: true,
864
871
  contentStyle: {
865
- padding: '4px 4px 4px 4px',
866
- marginTop: '16px',
867
- marginBottom: '16px'
872
+ padding: "4px 4px 4px 4px",
873
+ marginTop: "16px",
874
+ marginBottom: "16px"
868
875
  }
869
876
  }, /*#__PURE__*/React.createElement(Stack, {
870
877
  space: "medium"
@@ -878,11 +885,9 @@ var ExpandableMultiLanguageRichTextEditor = function ExpandableMultiLanguageRich
878
885
  })));
879
886
  };
880
887
 
881
- /* eslint-disable react/display-name */
882
-
883
888
  var entityToHtml = {
884
889
  entityToHTML: function entityToHTML(entity, originalText) {
885
- if (entity.type === 'LINK') {
890
+ if (entity.type === "LINK") {
886
891
  return /*#__PURE__*/React.createElement(HtmlLink, {
887
892
  url: entity.data.url
888
893
  }, originalText);
@@ -892,16 +897,13 @@ var entityToHtml = {
892
897
  };
893
898
  var htmlToEntity = {
894
899
  htmlToEntity: function htmlToEntity(nodeName, node, createEntity) {
895
- if (nodeName === 'a') {
896
- return createEntity('LINK', 'MUTABLE', {
900
+ if (nodeName === "a") {
901
+ return createEntity("LINK", "MUTABLE", {
897
902
  url: node.href
898
903
  });
899
904
  }
900
905
  }
901
906
  };
902
-
903
- /* eslint-disable react/display-name */
904
-
905
907
  var htmlToEditorState = function htmlToEditorState(html) {
906
908
  if (!html) {
907
909
  return EditorState.createEmpty(decorator);