@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.
- package/dist/ExpandableMultiLanguageRichTextEditor.d.ts +3 -3
- package/dist/RichTextEditor/constants.d.ts +8 -8
- package/dist/index.d.ts +5 -5
- package/dist/rich-text-editor.cjs.development.js +228 -226
- package/dist/rich-text-editor.cjs.development.js.map +1 -1
- package/dist/rich-text-editor.cjs.production.min.js +1 -1
- package/dist/rich-text-editor.cjs.production.min.js.map +1 -1
- package/dist/rich-text-editor.esm.js +227 -225
- package/dist/rich-text-editor.esm.js.map +1 -1
- package/dist/styles.css +14 -14
- package/package.json +60 -60
|
@@ -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 {
|
|
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 {
|
|
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 !==
|
|
63
|
-
throw Error(
|
|
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(
|
|
115
|
+
var classNames = cx("editor-stylebutton", {
|
|
210
116
|
active: active
|
|
211
117
|
});
|
|
212
|
-
return
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
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
|
-
|
|
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
|
|
148
|
+
}, blockTypes.map(function (type) {
|
|
237
149
|
return /*#__PURE__*/React.createElement(StyleButton$1, {
|
|
238
|
-
key:
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
377
|
-
}, /*#__PURE__*/React.createElement(UnlinkIcon, null), i18n(
|
|
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
|
|
399
|
+
}, inlineStyles.map(function (type) {
|
|
394
400
|
return /*#__PURE__*/React.createElement(StyleButton$1, {
|
|
395
|
-
key:
|
|
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
|
|
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(
|
|
444
|
+
document.addEventListener("mousedown", this.handleClickOutside);
|
|
439
445
|
};
|
|
440
446
|
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
441
|
-
document.removeEventListener(
|
|
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
|
|
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:
|
|
458
|
+
key: tag.tag,
|
|
453
459
|
className: "tag-control",
|
|
454
|
-
id:
|
|
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(
|
|
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() ===
|
|
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:
|
|
518
|
-
HEADER_ONE:
|
|
519
|
-
HEADER_TWO:
|
|
520
|
-
HEADER_THREE:
|
|
521
|
-
HEADER_FOUR:
|
|
522
|
-
HEADER_FIVE:
|
|
523
|
-
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:
|
|
527
|
-
ORDERED_LIST:
|
|
532
|
+
UNORDERED_LIST: "unordered-list",
|
|
533
|
+
ORDERED_LIST: "ordered-list"
|
|
528
534
|
},
|
|
529
535
|
INLINE_STYLES: {
|
|
530
|
-
BOLD:
|
|
531
|
-
ITALIC:
|
|
532
|
-
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:
|
|
538
|
-
style:
|
|
543
|
+
label: "styles.p",
|
|
544
|
+
style: "unstyled"
|
|
539
545
|
},
|
|
540
|
-
|
|
541
|
-
label:
|
|
542
|
-
style:
|
|
546
|
+
"header-one": {
|
|
547
|
+
label: "styles.h1",
|
|
548
|
+
style: "header-one"
|
|
543
549
|
},
|
|
544
|
-
|
|
545
|
-
label:
|
|
546
|
-
style:
|
|
550
|
+
"header-two": {
|
|
551
|
+
label: "styles.h2",
|
|
552
|
+
style: "header-two"
|
|
547
553
|
},
|
|
548
|
-
|
|
549
|
-
label:
|
|
550
|
-
style:
|
|
554
|
+
"header-three": {
|
|
555
|
+
label: "styles.h3",
|
|
556
|
+
style: "header-three"
|
|
551
557
|
},
|
|
552
|
-
|
|
553
|
-
label:
|
|
554
|
-
style:
|
|
558
|
+
"header-four": {
|
|
559
|
+
label: "styles.h4",
|
|
560
|
+
style: "header-four"
|
|
555
561
|
},
|
|
556
|
-
|
|
557
|
-
label:
|
|
558
|
-
style:
|
|
562
|
+
"header-five": {
|
|
563
|
+
label: "styles.h5",
|
|
564
|
+
style: "header-five"
|
|
559
565
|
},
|
|
560
|
-
|
|
561
|
-
label:
|
|
562
|
-
style:
|
|
566
|
+
"header-six": {
|
|
567
|
+
label: "styles.h6",
|
|
568
|
+
style: "header-six"
|
|
563
569
|
}
|
|
564
570
|
});
|
|
565
571
|
var BlockTypeList = /*#__PURE__*/Object.freeze({
|
|
566
|
-
|
|
572
|
+
"unordered-list": {
|
|
567
573
|
label: /*#__PURE__*/React.createElement(BulletListIcon, null),
|
|
568
|
-
style:
|
|
569
|
-
tooltip:
|
|
574
|
+
style: "unordered-list-item",
|
|
575
|
+
tooltip: "styles.unordered_list_item"
|
|
570
576
|
},
|
|
571
|
-
|
|
577
|
+
"ordered-list": {
|
|
572
578
|
label: /*#__PURE__*/React.createElement(NumberListIcon, null),
|
|
573
|
-
style:
|
|
574
|
-
tooltip:
|
|
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:
|
|
581
|
-
tooltip:
|
|
582
|
-
hotKey:
|
|
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:
|
|
587
|
-
tooltip:
|
|
588
|
-
hotKey:
|
|
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:
|
|
593
|
-
tooltip:
|
|
594
|
-
hotKey:
|
|
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:
|
|
600
|
-
label:
|
|
601
|
-
style:
|
|
605
|
+
type: "unstyled",
|
|
606
|
+
label: "styles.p",
|
|
607
|
+
style: "unstyled"
|
|
602
608
|
}, {
|
|
603
|
-
type:
|
|
604
|
-
label:
|
|
605
|
-
style:
|
|
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,
|
|
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
|
|
681
|
-
return typeof 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
|
|
686
|
-
return typeof 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
|
|
691
|
-
return typeof 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
|
-
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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 ===
|
|
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
|
|
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 +
|
|
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 &&
|
|
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:
|
|
866
|
-
marginTop:
|
|
867
|
-
marginBottom:
|
|
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 ===
|
|
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 ===
|
|
896
|
-
return createEntity(
|
|
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);
|