@mirrormedia/lilith-draft-editor 1.1.0-alpha.2 → 1.1.0-alpha.3

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.
Files changed (72) hide show
  1. package/lib/draft-js/buttons/annotation.js +0 -22
  2. package/lib/draft-js/buttons/audio.js +3 -16
  3. package/lib/draft-js/buttons/background-color.js +0 -26
  4. package/lib/draft-js/buttons/background-image.js +13 -32
  5. package/lib/draft-js/buttons/background-video.js +13 -32
  6. package/lib/draft-js/buttons/color-box.js +5 -21
  7. package/lib/draft-js/buttons/divider.js +3 -12
  8. package/lib/draft-js/buttons/embedded-code.js +5 -16
  9. package/lib/draft-js/buttons/enlarge.js +0 -3
  10. package/lib/draft-js/buttons/font-color.js +0 -26
  11. package/lib/draft-js/buttons/image.js +5 -16
  12. package/lib/draft-js/buttons/info-box.js +5 -21
  13. package/lib/draft-js/buttons/link.js +0 -19
  14. package/lib/draft-js/buttons/media.js +3 -16
  15. package/lib/draft-js/buttons/related-post.js +3 -14
  16. package/lib/draft-js/buttons/selector/align-selector.js +2 -11
  17. package/lib/draft-js/buttons/selector/audio-selector.js +4 -33
  18. package/lib/draft-js/buttons/selector/image-selector.js +6 -50
  19. package/lib/draft-js/buttons/selector/pagination.js +2 -6
  20. package/lib/draft-js/buttons/selector/post-selector.js +6 -39
  21. package/lib/draft-js/buttons/selector/search-box.js +0 -9
  22. package/lib/draft-js/buttons/selector/video-selector.js +4 -33
  23. package/lib/draft-js/buttons/side-index.js +15 -31
  24. package/lib/draft-js/buttons/slideshow.js +7 -16
  25. package/lib/draft-js/buttons/table.js +5 -11
  26. package/lib/draft-js/buttons/text-align.js +0 -14
  27. package/lib/draft-js/buttons/video.js +3 -16
  28. package/lib/draft-js/const.js +0 -2
  29. package/lib/draft-js/draft-converter/api-data-instance.js +0 -14
  30. package/lib/draft-js/draft-converter/atomic-block-processor.js +12 -41
  31. package/lib/draft-js/draft-converter/entities.js +1 -0
  32. package/lib/draft-js/draft-converter/index.js +10 -29
  33. package/lib/draft-js/draft-converter/inline-styles-processor.js +22 -55
  34. package/lib/draft-js/modifier.js +5 -13
  35. package/lib/index.js +0 -4
  36. package/lib/website/mirrormedia/block-renderer/background-image-block.js +2 -14
  37. package/lib/website/mirrormedia/block-renderer/background-video-block.js +2 -14
  38. package/lib/website/mirrormedia/block-renderer/color-box-block.js +2 -14
  39. package/lib/website/mirrormedia/block-renderer/embedded-code-block.js +3 -12
  40. package/lib/website/mirrormedia/block-renderer/info-box-block.js +2 -14
  41. package/lib/website/mirrormedia/block-renderer/side-index-block.js +2 -13
  42. package/lib/website/mirrormedia/block-renderer/slideshow-block.js +4 -11
  43. package/lib/website/mirrormedia/block-renderer/table-block.js +28 -62
  44. package/lib/website/mirrormedia/block-renderer-fn.js +0 -30
  45. package/lib/website/mirrormedia/draft-editor.js +10 -106
  46. package/lib/website/mirrormedia/entity-decorator.js +0 -4
  47. package/lib/website/mirrormedia/index.js +0 -3
  48. package/lib/website/mirrormedia/selector/align-selector.js +2 -11
  49. package/lib/website/mirrormedia/selector/audio-selector.js +4 -33
  50. package/lib/website/mirrormedia/selector/image-selector.js +6 -49
  51. package/lib/website/mirrormedia/selector/pagination.js +2 -6
  52. package/lib/website/mirrormedia/selector/post-selector.js +6 -39
  53. package/lib/website/mirrormedia/selector/search-box.js +0 -9
  54. package/lib/website/mirrormedia/selector/video-selector.js +4 -32
  55. package/lib/website/readr/block-renderer/background-image-block.js +2 -14
  56. package/lib/website/readr/block-renderer/background-video-block.js +2 -14
  57. package/lib/website/readr/block-renderer/color-box-block.js +2 -14
  58. package/lib/website/readr/block-renderer/info-box-block.js +2 -14
  59. package/lib/website/readr/block-renderer/side-index-block.js +2 -13
  60. package/lib/website/readr/block-renderer/table-block.js +28 -62
  61. package/lib/website/readr/block-renderer-fn.js +4 -27
  62. package/lib/website/readr/draft-editor.js +10 -106
  63. package/lib/website/readr/entity-decorator.js +0 -4
  64. package/lib/website/readr/index.js +0 -3
  65. package/lib/website/readr/selector/align-selector.js +2 -11
  66. package/lib/website/readr/selector/audio-selector.js +4 -33
  67. package/lib/website/readr/selector/image-selector.js +6 -49
  68. package/lib/website/readr/selector/pagination.js +2 -6
  69. package/lib/website/readr/selector/post-selector.js +6 -39
  70. package/lib/website/readr/selector/search-box.js +0 -9
  71. package/lib/website/readr/selector/video-selector.js +4 -32
  72. package/package.json +2 -2
@@ -4,25 +4,15 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.VideoSelector = VideoSelector;
7
-
8
7
  var _react = _interopRequireWildcard(require("react"));
9
-
10
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
11
-
12
9
  var _modals = require("@keystone-ui/modals");
13
-
14
10
  var _apollo = require("@keystone-6/core/admin-ui/apollo");
15
-
16
11
  var _searchBox = require("./search-box");
17
-
18
12
  var _pagination = require("./pagination");
19
-
20
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
-
22
14
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
23
-
24
15
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
25
-
26
16
  const VideoSearchBox = (0, _styledComponents.default)(_searchBox.SearchBox)`
27
17
  margin-top: 10px;
28
18
  `;
@@ -69,7 +59,6 @@ const ErrorWrapper = _styledComponents.default.div`
69
59
  margin: 0;
70
60
  }
71
61
  `;
72
-
73
62
  function VideosGrids(props) {
74
63
  const {
75
64
  videos,
@@ -85,10 +74,8 @@ function VideosGrids(props) {
85
74
  });
86
75
  }));
87
76
  }
88
-
89
77
  function VideoGrid(props) {
90
78
  var _video$videoFile;
91
-
92
79
  const {
93
80
  video,
94
81
  onSelect,
@@ -108,24 +95,20 @@ function VideoGrid(props) {
108
95
  src: video === null || video === void 0 ? void 0 : (_video$videoFile = video.videoFile) === null || _video$videoFile === void 0 ? void 0 : _video$videoFile.url
109
96
  })));
110
97
  }
111
-
112
98
  function VideoMetaGrids(props) {
113
99
  const {
114
100
  videoMetas
115
101
  } = props;
116
102
  return /*#__PURE__*/_react.default.createElement(VideoMetaGridsWrapper, null, videoMetas.map(videoMeta => {
117
103
  var _videoMeta$video;
118
-
119
104
  return /*#__PURE__*/_react.default.createElement(VideoMetaGrid, {
120
105
  key: videoMeta === null || videoMeta === void 0 ? void 0 : (_videoMeta$video = videoMeta.video) === null || _videoMeta$video === void 0 ? void 0 : _videoMeta$video.id,
121
106
  videoMeta: videoMeta
122
107
  });
123
108
  }));
124
109
  }
125
-
126
110
  function VideoMetaGrid(props) {
127
111
  var _video$videoFile2;
128
-
129
112
  const {
130
113
  videoMeta
131
114
  } = props;
@@ -142,7 +125,6 @@ function VideoMetaGrid(props) {
142
125
  src: video === null || video === void 0 ? void 0 : (_video$videoFile2 = video.videoFile) === null || _video$videoFile2 === void 0 ? void 0 : _video$videoFile2.url
143
126
  })));
144
127
  }
145
-
146
128
  const videosQuery = (0, _apollo.gql)`
147
129
  query Videos($searchText: String!, $take: Int, $skip: Int) {
148
130
  videosCount(where: { name: { contains: $searchText } })
@@ -173,7 +155,6 @@ const videosQuery = (0, _apollo.gql)`
173
155
  }
174
156
  }
175
157
  `;
176
-
177
158
  function VideoSelector(props) {
178
159
  const [queryVideos, {
179
160
  loading,
@@ -186,46 +167,40 @@ function VideoSelector(props) {
186
167
  fetchPolicy: 'no-cache'
187
168
  });
188
169
  const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
189
-
190
170
  const [searchText, setSearchText] = (0, _react.useState)('');
191
171
  const [selected, setSelected] = (0, _react.useState)([]);
192
172
  const pageSize = 6;
193
173
  const {
194
174
  onChange
195
175
  } = props;
196
-
197
176
  const onSave = () => {
198
177
  onChange(selected);
199
178
  };
200
-
201
179
  const onCancel = () => {
202
180
  onChange([]);
203
181
  };
204
-
205
182
  const onSearchBoxChange = async searchInput => {
206
183
  setSearchText(searchInput);
207
184
  setCurrentPage(1);
208
185
  };
209
-
210
186
  const onVideosGridSelect = videoEntity => {
211
187
  setSelected(selected => {
212
188
  const filterdSelected = selected.filter(ele => {
213
189
  var _ele$video;
214
-
215
190
  return ((_ele$video = ele.video) === null || _ele$video === void 0 ? void 0 : _ele$video.id) !== videoEntity.id;
216
- }); // deselect the video
191
+ });
217
192
 
193
+ // deselect the video
218
194
  if (filterdSelected.length !== selected.length) {
219
195
  return filterdSelected;
220
- } // single select
221
-
196
+ }
222
197
 
198
+ // single select
223
199
  return [{
224
200
  video: videoEntity
225
201
  }];
226
202
  });
227
203
  };
228
-
229
204
  const selectedVideos = selected.map(ele => {
230
205
  return ele.video;
231
206
  });
@@ -240,7 +215,6 @@ function VideoSelector(props) {
240
215
  });
241
216
  }
242
217
  }, [currentPage, searchText]);
243
-
244
218
  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(VideosGrids, {
245
219
  videos: videos,
246
220
  selected: selectedVideos,
@@ -253,15 +227,12 @@ function VideoSelector(props) {
253
227
  setCurrentPage(pageIndex);
254
228
  }
255
229
  }));
256
-
257
230
  if (loading) {
258
231
  searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
259
232
  }
260
-
261
233
  if (error) {
262
234
  searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `videos` query"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Message:"), /*#__PURE__*/_react.default.createElement("div", null, error.message), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Stack:"), /*#__PURE__*/_react.default.createElement("div", null, error.stack), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Query:"), /*#__PURE__*/_react.default.createElement("pre", null, videosQuery.loc.source.body)));
263
235
  }
264
-
265
236
  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
266
237
  isOpen: true
267
238
  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
@@ -5,27 +5,16 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.SideIndexButton = SideIndexButton;
7
7
  exports.SideIndexInput = SideIndexInput;
8
-
9
8
  var _react = _interopRequireWildcard(require("react"));
10
-
11
9
  var _draftJs = require("draft-js");
12
-
13
10
  var _modals = require("@keystone-ui/modals");
14
-
15
11
  var _button = require("@keystone-ui/button");
16
-
17
12
  var _styledComponents = _interopRequireDefault(require("styled-components"));
18
-
19
13
  var _imageSelector = require("./selector/image-selector");
20
-
21
14
  var _fields = require("@keystone-ui/fields");
22
-
23
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24
-
25
16
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
26
-
27
17
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
28
-
29
18
  const Label = _styledComponents.default.label`
30
19
  display: block;
31
20
  font-weight: 600;
@@ -35,10 +24,8 @@ const ImageInputText = _styledComponents.default.span`
35
24
  display: inline-block;
36
25
  margin-right: 10px;
37
26
  `;
38
-
39
27
  function SideIndexInput(props) {
40
28
  var _inputValue$sideIndex;
41
-
42
29
  const {
43
30
  isOpen,
44
31
  onChange,
@@ -56,23 +43,19 @@ function SideIndexInput(props) {
56
43
  };
57
44
  const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
58
45
  const [toShowImageSelector, setToShowImageSelector] = (0, _react.useState)(false);
59
-
60
46
  const onImageSelectorChange = selectedImagesWithMeta => {
61
47
  var _selectedImagesWithMe;
62
-
63
48
  const image = selectedImagesWithMeta === null || selectedImagesWithMeta === void 0 ? void 0 : (_selectedImagesWithMe = selectedImagesWithMeta[0]) === null || _selectedImagesWithMe === void 0 ? void 0 : _selectedImagesWithMe.image;
64
-
65
49
  if (!image) {
66
50
  setToShowImageSelector(false);
67
51
  return;
68
52
  }
69
-
70
- setInputValue(oldInputValue => ({ ...oldInputValue,
53
+ setInputValue(oldInputValue => ({
54
+ ...oldInputValue,
71
55
  sideIndexImage: image
72
56
  }));
73
57
  setToShowImageSelector(false);
74
58
  };
75
-
76
59
  (0, _react.useEffect)(() => {
77
60
  if (isOpen) {
78
61
  setInputValue(initialInputValue);
@@ -94,27 +77,31 @@ function SideIndexInput(props) {
94
77
  confirm: {
95
78
  label: 'Confirm',
96
79
  action: () => {
97
- onChange({ ...inputValue
80
+ onChange({
81
+ ...inputValue
98
82
  });
99
83
  }
100
84
  }
101
85
  }
102
86
  }, /*#__PURE__*/_react.default.createElement(Label, null, "\u6587\u5167\u6A19\u984C (\u82E5\u586B\u5165\u5916\u90E8\u9023\u7D50\u5247\u4E0D\u6703\u7522\u751F\u6587\u7AE0\u5167h2)"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
103
- onChange: e => setInputValue(oldInputValue => ({ ...oldInputValue,
87
+ onChange: e => setInputValue(oldInputValue => ({
88
+ ...oldInputValue,
104
89
  h2Text: e.target.value
105
90
  })),
106
91
  type: "text",
107
92
  placeholder: "h2 text",
108
93
  value: inputValue.h2Text
109
94
  }), /*#__PURE__*/_react.default.createElement(Label, null, "\u5074\u6B04\u6A19\u984C (Optional, \u82E5\u672A\u8A2D\u5B9A\u6703\u76F4\u63A5\u7528\u6587\u5167\u6A19\u984C)"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
110
- onChange: e => setInputValue(oldInputValue => ({ ...oldInputValue,
95
+ onChange: e => setInputValue(oldInputValue => ({
96
+ ...oldInputValue,
111
97
  sideIndexText: e.target.value
112
98
  })),
113
99
  type: "text",
114
100
  placeholder: "sideindex text",
115
101
  value: inputValue.sideIndexText
116
102
  }), /*#__PURE__*/_react.default.createElement(Label, null, "\u5074\u6B04 Url (Optional, \u5916\u90E8\u9023\u7D50\u624D\u9700\u4F7F\u7528)"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
117
- onChange: e => setInputValue(oldInputValue => ({ ...oldInputValue,
103
+ onChange: e => setInputValue(oldInputValue => ({
104
+ ...oldInputValue,
118
105
  sideIndexUrl: e.target.value
119
106
  })),
120
107
  type: "url",
@@ -126,7 +113,6 @@ function SideIndexInput(props) {
126
113
  tone: "passive"
127
114
  }, "\u6DFB\u52A0\u5716\u7247")))));
128
115
  }
129
-
130
116
  function SideIndexButton(props) {
131
117
  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
132
118
  const {
@@ -134,15 +120,15 @@ function SideIndexButton(props) {
134
120
  editorState,
135
121
  onChange: onEditorStateChange
136
122
  } = props;
137
-
138
123
  const onChange = ({
139
124
  h2Text,
140
125
  sideIndexText,
141
126
  sideIndexUrl,
142
127
  sideIndexImage
143
128
  }) => {
144
- const contentState = editorState.getCurrentContent(); // create an SideIndex entity
129
+ const contentState = editorState.getCurrentContent();
145
130
 
131
+ // create an SideIndex entity
146
132
  const contentStateWithEntity = contentState.createEntity('SIDEINDEX', 'IMMUTABLE', {
147
133
  h2Text,
148
134
  sideIndexText,
@@ -150,17 +136,15 @@ function SideIndexButton(props) {
150
136
  sideIndexImage
151
137
  });
152
138
  const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
153
-
154
139
  const newEditorState = _draftJs.EditorState.set(editorState, {
155
140
  currentContent: contentStateWithEntity
156
- }); //The third parameter here is a space string, not an empty string
157
- //If you set an empty string, you will get an error: Unknown DraftEntity key: null
158
-
141
+ });
159
142
 
143
+ //The third parameter here is a space string, not an empty string
144
+ //If you set an empty string, you will get an error: Unknown DraftEntity key: null
160
145
  onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
161
146
  setToShowInput(false);
162
147
  };
163
-
164
148
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SideIndexInput, {
165
149
  onChange: onChange,
166
150
  onCancel: () => {
@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.SlideshowButton = SlideshowButton;
7
-
8
7
  var _react = _interopRequireWildcard(require("react"));
9
-
10
8
  var _imageSelector = require("./selector/image-selector");
11
-
12
9
  var _draftJs = require("draft-js");
13
-
14
10
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
-
16
11
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
-
18
12
  function SlideshowButton(props) {
19
13
  const {
20
14
  editorState,
@@ -23,40 +17,37 @@ function SlideshowButton(props) {
23
17
  ImageSelector = _imageSelector.ImageSelector
24
18
  } = props;
25
19
  const [toShowImageSelector, setToShowImageSelector] = (0, _react.useState)(false);
26
-
27
20
  const promptForImageSelector = () => {
28
21
  setToShowImageSelector(true);
29
22
  };
30
-
31
23
  const onImageSelectorChange = (selected, align, delay) => {
32
24
  if (selected.length === 0) {
33
25
  setToShowImageSelector(false);
34
26
  return;
35
27
  }
28
+ const contentState = editorState.getCurrentContent();
36
29
 
37
- const contentState = editorState.getCurrentContent(); // since 202206, only slideshow-v2 will be created
38
-
30
+ // since 202206, only slideshow-v2 will be created
39
31
  const contentStateWithEntity = contentState.createEntity('slideshow-v2', 'IMMUTABLE', {
40
32
  alignment: align,
41
33
  delay,
42
34
  images: selected.map(ele => {
43
- return { ...(ele === null || ele === void 0 ? void 0 : ele.image),
35
+ return {
36
+ ...(ele === null || ele === void 0 ? void 0 : ele.image),
44
37
  desc: ele === null || ele === void 0 ? void 0 : ele.desc
45
38
  };
46
39
  })
47
40
  });
48
41
  const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
49
-
50
42
  const newEditorState = _draftJs.EditorState.set(editorState, {
51
43
  currentContent: contentStateWithEntity
52
- }); // The third parameter here is a space string, not an empty string
53
- // If you set an empty string, you will get an error: Unknown DraftEntity key: null
54
-
44
+ });
55
45
 
46
+ // The third parameter here is a space string, not an empty string
47
+ // If you set an empty string, you will get an error: Unknown DraftEntity key: null
56
48
  onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
57
49
  setToShowImageSelector(false);
58
50
  };
59
-
60
51
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowImageSelector && /*#__PURE__*/_react.default.createElement(ImageSelector, {
61
52
  onChange: onImageSelectorChange,
62
53
  enableCaption: true,
@@ -4,20 +4,15 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.TableButton = TableButton;
7
-
8
7
  var _react = _interopRequireDefault(require("react"));
9
-
10
8
  var _draftJs = require("draft-js");
11
-
12
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
10
  function TableButton(props) {
15
11
  const {
16
12
  editorState,
17
13
  onChange,
18
14
  className
19
15
  } = props;
20
-
21
16
  const onClick = () => {
22
17
  const rawDarftContentState = {
23
18
  blocks: [],
@@ -29,7 +24,8 @@ function TableButton(props) {
29
24
  // Therefore, please make sure the style name needs to be camelCase.
30
25
  tableStyles: {
31
26
  // We can customize the inline styles of each row.
32
- rows: [// thead has different background color.
27
+ rows: [
28
+ // thead has different background color.
33
29
  {
34
30
  backgroundColor: '#f2f2f2'
35
31
  }, {}, {}],
@@ -48,16 +44,14 @@ function TableButton(props) {
48
44
  tableData: [[rawDarftContentState, rawDarftContentState], [rawDarftContentState, rawDarftContentState], [rawDarftContentState, rawDarftContentState]]
49
45
  });
50
46
  const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
51
-
52
47
  const newEditorState = _draftJs.EditorState.set(editorState, {
53
48
  currentContent: contentStateWithEntity
54
- }); // The third parameter here is a space string, not an empty string
55
- // If you set an empty string, you will get an error: Unknown DraftEntity key: null
56
-
49
+ });
57
50
 
51
+ // The third parameter here is a space string, not an empty string
52
+ // If you set an empty string, you will get an error: Unknown DraftEntity key: null
58
53
  onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
59
54
  };
60
-
61
55
  return /*#__PURE__*/_react.default.createElement("div", {
62
56
  onClick: onClick,
63
57
  className: className
@@ -6,45 +6,34 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.AlignCenterButton = AlignCenterButton;
7
7
  exports.AlignLeftButton = AlignLeftButton;
8
8
  exports.getSelectionBlockData = void 0;
9
-
10
9
  var _react = _interopRequireDefault(require("react"));
11
-
12
10
  var _draftJs = require("draft-js");
13
-
14
11
  var _modifier = require("../modifier");
15
-
16
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
-
18
13
  const toggleSelectionTextAlign = (editorState, textAlign) => {
19
14
  return setSelectionBlockData(editorState, {
20
15
  textAlign: getSelectionBlockData(editorState, 'textAlign') !== textAlign ? textAlign : undefined
21
16
  });
22
17
  };
23
-
24
18
  const setSelectionBlockData = (editorState, blockData) => {
25
19
  return _modifier.Modifier.setBlockData(editorState.getCurrentContent(), editorState.getSelection(), blockData);
26
20
  };
27
-
28
21
  const getSelectionBlockData = (editorState, name) => {
29
22
  const block = editorState.getCurrentContent().getBlockForKey(editorState.getSelection().getAnchorKey());
30
23
  const blockData = block.getData();
31
24
  return blockData.get(name);
32
25
  };
33
-
34
26
  exports.getSelectionBlockData = getSelectionBlockData;
35
-
36
27
  function AlignCenterButton(props) {
37
28
  const {
38
29
  isActive,
39
30
  editorState,
40
31
  onChange
41
32
  } = props;
42
-
43
33
  const toggleTextAlign = () => {
44
34
  const newContentState = toggleSelectionTextAlign(editorState, 'center');
45
35
  onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-block-style'));
46
36
  };
47
-
48
37
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
49
38
  className: props.className,
50
39
  onMouseDown: toggleTextAlign
@@ -59,19 +48,16 @@ function AlignCenterButton(props) {
59
48
  fill: isActive ? '#ED8B00' : '#6b7280'
60
49
  }))));
61
50
  }
62
-
63
51
  function AlignLeftButton(props) {
64
52
  const {
65
53
  isActive,
66
54
  editorState,
67
55
  onChange
68
56
  } = props;
69
-
70
57
  const toggleTextAlign = () => {
71
58
  const newContentState = toggleSelectionTextAlign(editorState, 'left');
72
59
  onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-block-style'));
73
60
  };
74
-
75
61
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
76
62
  className: props.className,
77
63
  onMouseDown: toggleTextAlign
@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.VideoButton = VideoButton;
7
-
8
7
  var _react = _interopRequireWildcard(require("react"));
9
-
10
8
  var _draftJs = require("draft-js");
11
-
12
9
  var _videoSelector = require("./selector/video-selector");
13
-
14
10
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
-
16
11
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
-
18
12
  function VideoButton(props) {
19
13
  const {
20
14
  editorState,
@@ -23,37 +17,30 @@ function VideoButton(props) {
23
17
  VideoSelector = _videoSelector.VideoSelector
24
18
  } = props;
25
19
  const [toShowVideoSelector, setToShowVideoSelector] = (0, _react.useState)(false);
26
-
27
20
  const promptForVideoSelector = () => {
28
21
  setToShowVideoSelector(true);
29
22
  };
30
-
31
23
  const onVideoSelectorChange = selectedVideosWithMeta => {
32
24
  var _selectedVideosWithMe;
33
-
34
25
  const video = selectedVideosWithMeta === null || selectedVideosWithMeta === void 0 ? void 0 : (_selectedVideosWithMe = selectedVideosWithMeta[0]) === null || _selectedVideosWithMe === void 0 ? void 0 : _selectedVideosWithMe.video;
35
-
36
26
  if (!video) {
37
27
  setToShowVideoSelector(false);
38
28
  return;
39
29
  }
40
-
41
30
  const contentState = editorState.getCurrentContent();
42
31
  const contentStateWithEntity = contentState.createEntity('VIDEO', 'IMMUTABLE', {
43
32
  video
44
33
  });
45
34
  const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
46
-
47
35
  const newEditorState = _draftJs.EditorState.set(editorState, {
48
36
  currentContent: contentStateWithEntity
49
- }); // The third parameter here is a space string, not an empty string
50
- // If you set an empty string, you will get an error: Unknown DraftEntity key: null
51
-
37
+ });
52
38
 
39
+ // The third parameter here is a space string, not an empty string
40
+ // If you set an empty string, you will get an error: Unknown DraftEntity key: null
53
41
  onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
54
42
  setToShowVideoSelector(false);
55
43
  };
56
-
57
44
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowVideoSelector && /*#__PURE__*/_react.default.createElement(VideoSelector, {
58
45
  onChange: onVideoSelectorChange
59
46
  }), /*#__PURE__*/_react.default.createElement("div", {
@@ -3,9 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
6
  var _const = require("@mirrormedia/lilith-draft-renderer/lib/draft-js/const");
8
-
9
7
  Object.keys(_const).forEach(function (key) {
10
8
  if (key === "default" || key === "__esModule") return;
11
9
  if (key in exports && exports[key] === _const[key]) return;
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _immutable = require("immutable");
9
-
10
8
  var _shortid = _interopRequireDefault(require("shortid"));
11
-
12
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
10
  const ApiDataInstanceRecord = (0, _immutable.Record)({
15
11
  id: _shortid.default.generate(),
16
12
  type: 'paragraph',
@@ -19,40 +15,30 @@ const ApiDataInstanceRecord = (0, _immutable.Record)({
19
15
  styles: {},
20
16
  textAlign: undefined
21
17
  });
22
-
23
18
  class ApiDataInstance extends ApiDataInstanceRecord {
24
19
  constructor(props) {
25
20
  let id = props && props.id || _shortid.default.generate();
26
-
27
21
  props.id = id;
28
22
  super(props);
29
23
  }
30
-
31
24
  getId() {
32
25
  return this.get('id');
33
26
  }
34
-
35
27
  getType() {
36
28
  return this.get('type');
37
29
  }
38
-
39
30
  getAlignment() {
40
31
  return this.get('alignment');
41
32
  }
42
-
43
33
  getContent() {
44
34
  return this.get('content');
45
35
  }
46
-
47
36
  getStyles() {
48
37
  return this.get('styles');
49
38
  }
50
-
51
39
  getTextAlign() {
52
40
  return this.get('textAlign');
53
41
  }
54
-
55
42
  }
56
-
57
43
  var _default = ApiDataInstance;
58
44
  exports.default = _default;