@mirrormedia/lilith-draft-editor 1.3.1 → 1.3.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.
|
@@ -29,11 +29,9 @@ function VideoButton(props) {
|
|
|
29
29
|
};
|
|
30
30
|
|
|
31
31
|
const onVideoSelectorChange = selectedVideosWithMeta => {
|
|
32
|
-
|
|
32
|
+
const selected = selectedVideosWithMeta === null || selectedVideosWithMeta === void 0 ? void 0 : selectedVideosWithMeta[0];
|
|
33
33
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
if (!video) {
|
|
34
|
+
if (!selected) {
|
|
37
35
|
setToShowVideoSelector(false);
|
|
38
36
|
return;
|
|
39
37
|
}
|
|
@@ -41,7 +39,8 @@ function VideoButton(props) {
|
|
|
41
39
|
const contentState = editorState.getCurrentContent(); // since 202310, only VIDEO-V2 will be created
|
|
42
40
|
|
|
43
41
|
const contentStateWithEntity = contentState.createEntity('VIDEO-V2', 'IMMUTABLE', {
|
|
44
|
-
video
|
|
42
|
+
video: selected.video,
|
|
43
|
+
desc: selected.desc
|
|
45
44
|
});
|
|
46
45
|
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
|
|
47
46
|
|
|
@@ -26,7 +26,7 @@ const SearchBoxWrapper = _styledComponents.default.div`
|
|
|
26
26
|
function SearchBox(props) {
|
|
27
27
|
const {
|
|
28
28
|
onChange,
|
|
29
|
-
className
|
|
29
|
+
className = ''
|
|
30
30
|
} = props;
|
|
31
31
|
const [searchInput, setSearchInput] = (0, _react.useState)('');
|
|
32
32
|
return /*#__PURE__*/_react.default.createElement(SearchBoxWrapper, {
|
|
@@ -7,6 +7,8 @@ exports.VideoSelector = VideoSelector;
|
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
10
|
+
var _debounce = _interopRequireDefault(require("lodash/debounce"));
|
|
11
|
+
|
|
10
12
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
13
|
|
|
12
14
|
var _modals = require("@keystone-ui/modals");
|
|
@@ -17,6 +19,8 @@ var _searchBox = require("./search-box");
|
|
|
17
19
|
|
|
18
20
|
var _pagination = require("./pagination");
|
|
19
21
|
|
|
22
|
+
var _fields = require("@keystone-ui/fields");
|
|
23
|
+
|
|
20
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
25
|
|
|
22
26
|
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); }
|
|
@@ -53,6 +57,9 @@ const videosQuery = (0, _apollo.gql)`
|
|
|
53
57
|
}
|
|
54
58
|
}
|
|
55
59
|
`;
|
|
60
|
+
const _ = {
|
|
61
|
+
debounce: _debounce.default
|
|
62
|
+
};
|
|
56
63
|
const VideoSearchBox = (0, _styledComponents.default)(_searchBox.SearchBox)`
|
|
57
64
|
margin-top: 10px;
|
|
58
65
|
`;
|
|
@@ -102,6 +109,11 @@ const ErrorWrapper = _styledComponents.default.div`
|
|
|
102
109
|
const VideoName = _styledComponents.default.p`
|
|
103
110
|
text-align: center;
|
|
104
111
|
`;
|
|
112
|
+
const Label = _styledComponents.default.label`
|
|
113
|
+
display: block;
|
|
114
|
+
margin: 10px 0;
|
|
115
|
+
font-weight: 600;
|
|
116
|
+
`;
|
|
105
117
|
|
|
106
118
|
function VideosGrids(props) {
|
|
107
119
|
const {
|
|
@@ -144,14 +156,16 @@ function VideoGrid(props) {
|
|
|
144
156
|
|
|
145
157
|
function VideoMetaGrids(props) {
|
|
146
158
|
const {
|
|
147
|
-
videoMetas
|
|
159
|
+
videoMetas,
|
|
160
|
+
onChange
|
|
148
161
|
} = props;
|
|
149
162
|
return /*#__PURE__*/_react.default.createElement(VideoMetaGridsWrapper, null, videoMetas.map(videoMeta => {
|
|
150
163
|
var _videoMeta$video;
|
|
151
164
|
|
|
152
165
|
return /*#__PURE__*/_react.default.createElement(VideoMetaGrid, {
|
|
153
166
|
key: videoMeta === null || videoMeta === void 0 ? void 0 : (_videoMeta$video = videoMeta.video) === null || _videoMeta$video === void 0 ? void 0 : _videoMeta$video.id,
|
|
154
|
-
videoMeta: videoMeta
|
|
167
|
+
videoMeta: videoMeta,
|
|
168
|
+
onChange: onChange
|
|
155
169
|
});
|
|
156
170
|
}));
|
|
157
171
|
}
|
|
@@ -160,11 +174,21 @@ function VideoMetaGrid(props) {
|
|
|
160
174
|
var _video$file2;
|
|
161
175
|
|
|
162
176
|
const {
|
|
163
|
-
videoMeta
|
|
177
|
+
videoMeta,
|
|
178
|
+
onChange
|
|
164
179
|
} = props;
|
|
165
180
|
const {
|
|
166
|
-
video
|
|
181
|
+
video,
|
|
182
|
+
desc
|
|
167
183
|
} = videoMeta;
|
|
184
|
+
|
|
185
|
+
const onVideoDescriptionChange = e => {
|
|
186
|
+
onChange({
|
|
187
|
+
video,
|
|
188
|
+
desc: e.target.value
|
|
189
|
+
});
|
|
190
|
+
};
|
|
191
|
+
|
|
168
192
|
return /*#__PURE__*/_react.default.createElement(VideoMetaGridWrapper, null, /*#__PURE__*/_react.default.createElement(Video, {
|
|
169
193
|
muted: true,
|
|
170
194
|
autoPlay: true,
|
|
@@ -173,7 +197,15 @@ function VideoMetaGrid(props) {
|
|
|
173
197
|
src: video === null || video === void 0 ? void 0 : video.videoSrc
|
|
174
198
|
}), /*#__PURE__*/_react.default.createElement("source", {
|
|
175
199
|
src: video === null || video === void 0 ? void 0 : (_video$file2 = video.file) === null || _video$file2 === void 0 ? void 0 : _video$file2.url
|
|
176
|
-
})), /*#__PURE__*/_react.default.createElement(VideoName, null, video === null || video === void 0 ? void 0 : video.name)
|
|
200
|
+
})), /*#__PURE__*/_react.default.createElement(Label, null, "Video Name"), /*#__PURE__*/_react.default.createElement(VideoName, null, video === null || video === void 0 ? void 0 : video.name), /*#__PURE__*/_react.default.createElement(Label, {
|
|
201
|
+
htmlFor: "description"
|
|
202
|
+
}, "Video Description"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
|
|
203
|
+
id: "description",
|
|
204
|
+
type: "text",
|
|
205
|
+
placeholder: "(Optional)",
|
|
206
|
+
defaultValue: desc,
|
|
207
|
+
onChange: _.debounce(onVideoDescriptionChange)
|
|
208
|
+
}));
|
|
177
209
|
}
|
|
178
210
|
|
|
179
211
|
function VideoSelector(props) {
|
|
@@ -209,6 +241,10 @@ function VideoSelector(props) {
|
|
|
209
241
|
setCurrentPage(1);
|
|
210
242
|
};
|
|
211
243
|
|
|
244
|
+
const onVideoMetaChange = videoEntityWithMeta => {
|
|
245
|
+
setSelected([videoEntityWithMeta]);
|
|
246
|
+
};
|
|
247
|
+
|
|
212
248
|
const onVideosGridSelect = videoEntity => {
|
|
213
249
|
setSelected(selected => {
|
|
214
250
|
const filterdSelected = selected.filter(ele => {
|
|
@@ -223,7 +259,8 @@ function VideoSelector(props) {
|
|
|
223
259
|
|
|
224
260
|
|
|
225
261
|
return [{
|
|
226
|
-
video: videoEntity
|
|
262
|
+
video: videoEntity,
|
|
263
|
+
desc: ''
|
|
227
264
|
}];
|
|
228
265
|
});
|
|
229
266
|
};
|
|
@@ -261,7 +298,9 @@ function VideoSelector(props) {
|
|
|
261
298
|
}
|
|
262
299
|
|
|
263
300
|
if (error) {
|
|
264
|
-
|
|
301
|
+
var _videosQuery$loc;
|
|
302
|
+
|
|
303
|
+
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 = videosQuery.loc) === null || _videosQuery$loc === void 0 ? void 0 : _videosQuery$loc.source.body)));
|
|
265
304
|
}
|
|
266
305
|
|
|
267
306
|
return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
|
|
@@ -281,6 +320,7 @@ function VideoSelector(props) {
|
|
|
281
320
|
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(VideoSearchBox, {
|
|
282
321
|
onChange: onSearchBoxChange
|
|
283
322
|
}), /*#__PURE__*/_react.default.createElement(VideoSelectionWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, searchResult), !!selected.length && /*#__PURE__*/_react.default.createElement(SeparationLine, null), /*#__PURE__*/_react.default.createElement(VideoMetaGrids, {
|
|
284
|
-
videoMetas: selected
|
|
323
|
+
videoMetas: selected,
|
|
324
|
+
onChange: onVideoMetaChange
|
|
285
325
|
})))));
|
|
286
326
|
}
|
|
@@ -53,7 +53,7 @@ function ImageEditorBlock(props) {
|
|
|
53
53
|
name,
|
|
54
54
|
imageFile,
|
|
55
55
|
resized,
|
|
56
|
-
|
|
56
|
+
resizedWebp,
|
|
57
57
|
desc,
|
|
58
58
|
url,
|
|
59
59
|
alignment
|
|
@@ -64,7 +64,7 @@ function ImageEditorBlock(props) {
|
|
|
64
64
|
name,
|
|
65
65
|
imageFile,
|
|
66
66
|
resized,
|
|
67
|
-
|
|
67
|
+
resizedWebp
|
|
68
68
|
},
|
|
69
69
|
desc,
|
|
70
70
|
url
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirrormedia/lilith-draft-editor",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"license": "MIT",
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"draft-js": "^0.11.7",
|
|
26
|
-
"@mirrormedia/lilith-draft-renderer": "1.3.
|
|
26
|
+
"@mirrormedia/lilith-draft-renderer": "1.3.2-beta.1"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"react": "18.2.0",
|