@kids-reporter/draft-editor 0.4.1 → 0.4.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.
- package/lib/.selector/align-selector.js +2 -11
- package/lib/.selector/audio-selector.js +7 -36
- package/lib/.selector/image-selector.js +12 -55
- package/lib/.selector/pagination.js +2 -6
- package/lib/.selector/post-selector.js +15 -46
- package/lib/.selector/search-box.js +0 -9
- package/lib/.selector/video-selector.js +7 -35
- package/lib/block-renderer-fn.js +0 -12
- package/lib/block-renderers/blockquote.js +2 -13
- package/lib/buttons/annotation.js +1 -20
- package/lib/buttons/blockquote.js +11 -30
- package/lib/buttons/bt-names.js +1 -0
- package/lib/buttons/embedded-code.js +5 -16
- package/lib/buttons/enlarge.js +0 -3
- package/lib/buttons/image.js +5 -16
- package/lib/buttons/info-box.js +12 -28
- package/lib/buttons/link.js +0 -19
- package/lib/buttons/select.js +0 -6
- package/lib/buttons/selector/align-selector.js +2 -11
- package/lib/buttons/selector/image-selector.js +10 -52
- package/lib/buttons/selector/pagination.js +2 -6
- package/lib/buttons/selector/search-box.js +0 -9
- package/lib/buttons/slideshow.js +5 -15
- package/lib/draft-editor.js +12 -68
- package/lib/index.js +18 -4
- package/package.json +2 -2
|
@@ -4,25 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.PostSelector = PostSelector;
|
|
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 postsQuery = (0, _apollo.gql)`
|
|
27
17
|
query Posts($searchText: String!, $take: Int, $skip: Int) {
|
|
28
18
|
postsCount(where: { name: { contains: $searchText } })
|
|
@@ -113,7 +103,6 @@ const ErrorWrapper = _styledComponents.default.div`
|
|
|
113
103
|
margin: 0;
|
|
114
104
|
}
|
|
115
105
|
`;
|
|
116
|
-
|
|
117
106
|
function PostGrids(props) {
|
|
118
107
|
const {
|
|
119
108
|
posts,
|
|
@@ -129,10 +118,8 @@ function PostGrids(props) {
|
|
|
129
118
|
});
|
|
130
119
|
}));
|
|
131
120
|
}
|
|
132
|
-
|
|
133
121
|
function PostGrid(props) {
|
|
134
|
-
var _post$heroImage
|
|
135
|
-
|
|
122
|
+
var _post$heroImage;
|
|
136
123
|
const {
|
|
137
124
|
post,
|
|
138
125
|
onSelect,
|
|
@@ -144,32 +131,27 @@ function PostGrid(props) {
|
|
|
144
131
|
}, /*#__PURE__*/_react.default.createElement(PostSelected, null, isSelected ? /*#__PURE__*/_react.default.createElement("i", {
|
|
145
132
|
className: "fas fa-check-circle"
|
|
146
133
|
}) : null), /*#__PURE__*/_react.default.createElement(Post, null, /*#__PURE__*/_react.default.createElement(PostImage, {
|
|
147
|
-
src: (_post$heroImage = post.heroImage) === null || _post$heroImage === void 0
|
|
134
|
+
src: (_post$heroImage = post.heroImage) === null || _post$heroImage === void 0 || (_post$heroImage = _post$heroImage.resized) === null || _post$heroImage === void 0 ? void 0 : _post$heroImage.original,
|
|
148
135
|
onError: e => {
|
|
149
|
-
var _post$heroImage2
|
|
150
|
-
|
|
151
|
-
return e.currentTarget.src = (_post$heroImage2 = post.heroImage) === null || _post$heroImage2 === void 0 ? void 0 : (_post$heroImage2$imag = _post$heroImage2.imageFile) === null || _post$heroImage2$imag === void 0 ? void 0 : _post$heroImage2$imag.url;
|
|
136
|
+
var _post$heroImage2;
|
|
137
|
+
return e.currentTarget.src = (_post$heroImage2 = post.heroImage) === null || _post$heroImage2 === void 0 || (_post$heroImage2 = _post$heroImage2.imageFile) === null || _post$heroImage2 === void 0 ? void 0 : _post$heroImage2.url;
|
|
152
138
|
}
|
|
153
139
|
}), /*#__PURE__*/_react.default.createElement(PostTitle, null, post.name)));
|
|
154
140
|
}
|
|
155
|
-
|
|
156
141
|
function PostMetaGrids(props) {
|
|
157
142
|
const {
|
|
158
143
|
postMetas
|
|
159
144
|
} = props;
|
|
160
145
|
return /*#__PURE__*/_react.default.createElement(PostMetaGridsWrapper, null, postMetas.map(postMetas => {
|
|
161
146
|
var _postMetas$post;
|
|
162
|
-
|
|
163
147
|
return /*#__PURE__*/_react.default.createElement(PostMetaGrid, {
|
|
164
|
-
key: postMetas === null || postMetas === void 0
|
|
148
|
+
key: postMetas === null || postMetas === void 0 || (_postMetas$post = postMetas.post) === null || _postMetas$post === void 0 ? void 0 : _postMetas$post.id,
|
|
165
149
|
postMeta: postMetas
|
|
166
150
|
});
|
|
167
151
|
}));
|
|
168
152
|
}
|
|
169
|
-
|
|
170
153
|
function PostMetaGrid(props) {
|
|
171
|
-
var _post$heroImage3
|
|
172
|
-
|
|
154
|
+
var _post$heroImage3;
|
|
173
155
|
const {
|
|
174
156
|
postMeta
|
|
175
157
|
} = props;
|
|
@@ -177,15 +159,13 @@ function PostMetaGrid(props) {
|
|
|
177
159
|
post
|
|
178
160
|
} = postMeta;
|
|
179
161
|
return /*#__PURE__*/_react.default.createElement(PostMetaGridWrapper, null, /*#__PURE__*/_react.default.createElement(Post, null, /*#__PURE__*/_react.default.createElement(PostImage, {
|
|
180
|
-
src: post === null || post === void 0
|
|
162
|
+
src: post === null || post === void 0 || (_post$heroImage3 = post.heroImage) === null || _post$heroImage3 === void 0 || (_post$heroImage3 = _post$heroImage3.resized) === null || _post$heroImage3 === void 0 ? void 0 : _post$heroImage3.original,
|
|
181
163
|
onError: e => {
|
|
182
|
-
var _post$heroImage4
|
|
183
|
-
|
|
184
|
-
return e.currentTarget.src = post === null || post === void 0 ? void 0 : (_post$heroImage4 = post.heroImage) === null || _post$heroImage4 === void 0 ? void 0 : (_post$heroImage4$imag = _post$heroImage4.imageFile) === null || _post$heroImage4$imag === void 0 ? void 0 : _post$heroImage4$imag.url;
|
|
164
|
+
var _post$heroImage4;
|
|
165
|
+
return e.currentTarget.src = post === null || post === void 0 || (_post$heroImage4 = post.heroImage) === null || _post$heroImage4 === void 0 || (_post$heroImage4 = _post$heroImage4.imageFile) === null || _post$heroImage4 === void 0 ? void 0 : _post$heroImage4.url;
|
|
185
166
|
}
|
|
186
167
|
}), /*#__PURE__*/_react.default.createElement(PostTitle, null, post === null || post === void 0 ? void 0 : post.name)));
|
|
187
168
|
}
|
|
188
|
-
|
|
189
169
|
function PostSelector(props) {
|
|
190
170
|
const [queryPosts, {
|
|
191
171
|
loading,
|
|
@@ -198,7 +178,6 @@ function PostSelector(props) {
|
|
|
198
178
|
fetchPolicy: 'no-cache'
|
|
199
179
|
});
|
|
200
180
|
const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
|
|
201
|
-
|
|
202
181
|
const [searchText, setSearchText] = (0, _react.useState)('');
|
|
203
182
|
const [selected, setSelected] = (0, _react.useState)([]);
|
|
204
183
|
const [showErrorHint, setShowErrorHint] = (0, _react.useState)(false);
|
|
@@ -208,51 +187,45 @@ function PostSelector(props) {
|
|
|
208
187
|
enableMultiSelect = false,
|
|
209
188
|
minSelectCount = 1
|
|
210
189
|
} = props;
|
|
211
|
-
|
|
212
190
|
const onSave = () => {
|
|
213
191
|
if (enableMultiSelect && minSelectCount && selected.length < minSelectCount) {
|
|
214
192
|
setShowErrorHint(true);
|
|
215
193
|
return;
|
|
216
194
|
}
|
|
217
|
-
|
|
218
195
|
onChange(selected);
|
|
219
196
|
};
|
|
220
|
-
|
|
221
197
|
const onCancel = () => {
|
|
222
198
|
onChange([]);
|
|
223
199
|
};
|
|
224
|
-
|
|
225
200
|
const onSearchBoxChange = async searchInput => {
|
|
226
201
|
setSearchText(searchInput);
|
|
227
202
|
setCurrentPage(1);
|
|
228
203
|
};
|
|
229
|
-
|
|
230
204
|
const onPostsGridSelect = postEntity => {
|
|
231
205
|
setSelected(selected => {
|
|
232
206
|
const filterdSelected = selected.filter(ele => {
|
|
233
207
|
var _ele$post;
|
|
234
|
-
|
|
235
208
|
return ((_ele$post = ele.post) === null || _ele$post === void 0 ? void 0 : _ele$post.id) !== postEntity.id;
|
|
236
|
-
});
|
|
209
|
+
});
|
|
237
210
|
|
|
211
|
+
// deselect the post
|
|
238
212
|
if (filterdSelected.length !== selected.length) {
|
|
239
213
|
return filterdSelected;
|
|
240
|
-
}
|
|
241
|
-
|
|
214
|
+
}
|
|
242
215
|
|
|
216
|
+
// add new selected one and check shrink the array if there is a limit
|
|
243
217
|
if (enableMultiSelect) {
|
|
244
218
|
return selected.concat([{
|
|
245
219
|
post: postEntity
|
|
246
220
|
}]);
|
|
247
|
-
}
|
|
248
|
-
|
|
221
|
+
}
|
|
249
222
|
|
|
223
|
+
// single select
|
|
250
224
|
return [{
|
|
251
225
|
post: postEntity
|
|
252
226
|
}];
|
|
253
227
|
});
|
|
254
228
|
};
|
|
255
|
-
|
|
256
229
|
const selectedPosts = selected.map(ele => {
|
|
257
230
|
return ele.post;
|
|
258
231
|
});
|
|
@@ -267,7 +240,6 @@ function PostSelector(props) {
|
|
|
267
240
|
});
|
|
268
241
|
}
|
|
269
242
|
}, [currentPage, searchText]);
|
|
270
|
-
|
|
271
243
|
let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(PostGrids, {
|
|
272
244
|
posts: posts,
|
|
273
245
|
selected: selectedPosts,
|
|
@@ -280,15 +252,12 @@ function PostSelector(props) {
|
|
|
280
252
|
setCurrentPage(pageIndex);
|
|
281
253
|
}
|
|
282
254
|
}));
|
|
283
|
-
|
|
284
255
|
if (loading) {
|
|
285
256
|
searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
|
|
286
257
|
}
|
|
287
|
-
|
|
288
258
|
if (error) {
|
|
289
259
|
searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `posts` 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, postsQuery.loc.source.body)));
|
|
290
260
|
}
|
|
291
|
-
|
|
292
261
|
return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
|
|
293
262
|
isOpen: true
|
|
294
263
|
}, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
|
|
@@ -4,25 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.SearchBox = SearchBox;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
-
|
|
12
9
|
var _button = require("@keystone-ui/button");
|
|
13
|
-
|
|
14
10
|
var _fields = require("@keystone-ui/fields");
|
|
15
|
-
|
|
16
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
-
|
|
18
12
|
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); }
|
|
19
|
-
|
|
20
13
|
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; }
|
|
21
|
-
|
|
22
14
|
const SearchBoxWrapper = _styledComponents.default.div`
|
|
23
15
|
display: flex;
|
|
24
16
|
`;
|
|
25
|
-
|
|
26
17
|
function SearchBox(props) {
|
|
27
18
|
const {
|
|
28
19
|
onChange,
|
|
@@ -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 videosQuery = (0, _apollo.gql)`
|
|
27
17
|
query Videos($searchText: String!, $take: Int, $skip: Int) {
|
|
28
18
|
videosCount(where: { name: { contains: $searchText } })
|
|
@@ -101,7 +91,6 @@ const ErrorWrapper = _styledComponents.default.div`
|
|
|
101
91
|
const VideoName = _styledComponents.default.p`
|
|
102
92
|
text-align: center;
|
|
103
93
|
`;
|
|
104
|
-
|
|
105
94
|
function VideosGrids(props) {
|
|
106
95
|
const {
|
|
107
96
|
videos,
|
|
@@ -117,10 +106,8 @@ function VideosGrids(props) {
|
|
|
117
106
|
});
|
|
118
107
|
}));
|
|
119
108
|
}
|
|
120
|
-
|
|
121
109
|
function VideoGrid(props) {
|
|
122
110
|
var _video$file;
|
|
123
|
-
|
|
124
111
|
const {
|
|
125
112
|
video,
|
|
126
113
|
onSelect,
|
|
@@ -137,27 +124,23 @@ function VideoGrid(props) {
|
|
|
137
124
|
}, /*#__PURE__*/_react.default.createElement("source", {
|
|
138
125
|
src: video === null || video === void 0 ? void 0 : video.url
|
|
139
126
|
}), /*#__PURE__*/_react.default.createElement("source", {
|
|
140
|
-
src: video === null || video === void 0
|
|
127
|
+
src: video === null || video === void 0 || (_video$file = video.file) === null || _video$file === void 0 ? void 0 : _video$file.url
|
|
141
128
|
})));
|
|
142
129
|
}
|
|
143
|
-
|
|
144
130
|
function VideoMetaGrids(props) {
|
|
145
131
|
const {
|
|
146
132
|
videoMetas
|
|
147
133
|
} = props;
|
|
148
134
|
return /*#__PURE__*/_react.default.createElement(VideoMetaGridsWrapper, null, videoMetas.map(videoMeta => {
|
|
149
135
|
var _videoMeta$video;
|
|
150
|
-
|
|
151
136
|
return /*#__PURE__*/_react.default.createElement(VideoMetaGrid, {
|
|
152
|
-
key: videoMeta === null || videoMeta === void 0
|
|
137
|
+
key: videoMeta === null || videoMeta === void 0 || (_videoMeta$video = videoMeta.video) === null || _videoMeta$video === void 0 ? void 0 : _videoMeta$video.id,
|
|
153
138
|
videoMeta: videoMeta
|
|
154
139
|
});
|
|
155
140
|
}));
|
|
156
141
|
}
|
|
157
|
-
|
|
158
142
|
function VideoMetaGrid(props) {
|
|
159
143
|
var _video$file2;
|
|
160
|
-
|
|
161
144
|
const {
|
|
162
145
|
videoMeta
|
|
163
146
|
} = props;
|
|
@@ -171,10 +154,9 @@ function VideoMetaGrid(props) {
|
|
|
171
154
|
}, /*#__PURE__*/_react.default.createElement("source", {
|
|
172
155
|
src: video === null || video === void 0 ? void 0 : video.url
|
|
173
156
|
}), /*#__PURE__*/_react.default.createElement("source", {
|
|
174
|
-
src: video === null || video === void 0
|
|
157
|
+
src: video === null || video === void 0 || (_video$file2 = video.file) === null || _video$file2 === void 0 ? void 0 : _video$file2.url
|
|
175
158
|
})), /*#__PURE__*/_react.default.createElement(VideoName, null, video === null || video === void 0 ? void 0 : video.name));
|
|
176
159
|
}
|
|
177
|
-
|
|
178
160
|
function VideoSelector(props) {
|
|
179
161
|
const [queryVideos, {
|
|
180
162
|
loading,
|
|
@@ -187,46 +169,40 @@ function VideoSelector(props) {
|
|
|
187
169
|
fetchPolicy: 'no-cache'
|
|
188
170
|
});
|
|
189
171
|
const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
|
|
190
|
-
|
|
191
172
|
const [searchText, setSearchText] = (0, _react.useState)('');
|
|
192
173
|
const [selected, setSelected] = (0, _react.useState)([]);
|
|
193
174
|
const pageSize = 6;
|
|
194
175
|
const {
|
|
195
176
|
onChange
|
|
196
177
|
} = props;
|
|
197
|
-
|
|
198
178
|
const onSave = () => {
|
|
199
179
|
onChange(selected);
|
|
200
180
|
};
|
|
201
|
-
|
|
202
181
|
const onCancel = () => {
|
|
203
182
|
onChange([]);
|
|
204
183
|
};
|
|
205
|
-
|
|
206
184
|
const onSearchBoxChange = async searchInput => {
|
|
207
185
|
setSearchText(searchInput);
|
|
208
186
|
setCurrentPage(1);
|
|
209
187
|
};
|
|
210
|
-
|
|
211
188
|
const onVideosGridSelect = videoEntity => {
|
|
212
189
|
setSelected(selected => {
|
|
213
190
|
const filterdSelected = selected.filter(ele => {
|
|
214
191
|
var _ele$video;
|
|
215
|
-
|
|
216
192
|
return ((_ele$video = ele.video) === null || _ele$video === void 0 ? void 0 : _ele$video.id) !== videoEntity.id;
|
|
217
|
-
});
|
|
193
|
+
});
|
|
218
194
|
|
|
195
|
+
// deselect the video
|
|
219
196
|
if (filterdSelected.length !== selected.length) {
|
|
220
197
|
return filterdSelected;
|
|
221
|
-
}
|
|
222
|
-
|
|
198
|
+
}
|
|
223
199
|
|
|
200
|
+
// single select
|
|
224
201
|
return [{
|
|
225
202
|
video: videoEntity
|
|
226
203
|
}];
|
|
227
204
|
});
|
|
228
205
|
};
|
|
229
|
-
|
|
230
206
|
const selectedVideos = selected.map(ele => {
|
|
231
207
|
return ele.video;
|
|
232
208
|
});
|
|
@@ -241,7 +217,6 @@ function VideoSelector(props) {
|
|
|
241
217
|
});
|
|
242
218
|
}
|
|
243
219
|
}, [currentPage, searchText]);
|
|
244
|
-
|
|
245
220
|
let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(VideosGrids, {
|
|
246
221
|
videos: videos,
|
|
247
222
|
selected: selectedVideos,
|
|
@@ -254,15 +229,12 @@ function VideoSelector(props) {
|
|
|
254
229
|
setCurrentPage(pageIndex);
|
|
255
230
|
}
|
|
256
231
|
}));
|
|
257
|
-
|
|
258
232
|
if (loading) {
|
|
259
233
|
searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
|
|
260
234
|
}
|
|
261
|
-
|
|
262
235
|
if (error) {
|
|
263
236
|
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)));
|
|
264
237
|
}
|
|
265
|
-
|
|
266
238
|
return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
|
|
267
239
|
isOpen: true
|
|
268
240
|
}, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
|
package/lib/block-renderer-fn.js
CHANGED
|
@@ -4,50 +4,41 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.atomicBlockRenderer = atomicBlockRenderer;
|
|
7
|
-
|
|
8
7
|
var _blockquote = require("./block-renderers/blockquote");
|
|
9
|
-
|
|
10
8
|
var _draftRenderer = require("@kids-reporter/draft-renderer");
|
|
11
|
-
|
|
12
9
|
const {
|
|
13
10
|
EmbeddedCodeInArticleBody,
|
|
14
11
|
ImageInArticleBody,
|
|
15
12
|
InfoBoxInArticleBody,
|
|
16
13
|
SlideshowInArticleBody
|
|
17
14
|
} = _draftRenderer.blockRenderers;
|
|
18
|
-
|
|
19
15
|
const AtomicBlock = props => {
|
|
20
16
|
const entity = props.contentState.getEntity(props.block.getEntityAt(0));
|
|
21
17
|
const entityType = entity.getType();
|
|
22
18
|
const entityData = entity.getData();
|
|
23
|
-
|
|
24
19
|
switch (entityType) {
|
|
25
20
|
case 'BLOCKQUOTE':
|
|
26
21
|
{
|
|
27
22
|
return (0, _blockquote.EditableBlockquote)(props);
|
|
28
23
|
}
|
|
29
|
-
|
|
30
24
|
case 'IMAGE':
|
|
31
25
|
{
|
|
32
26
|
return ImageInArticleBody({
|
|
33
27
|
data: entityData
|
|
34
28
|
});
|
|
35
29
|
}
|
|
36
|
-
|
|
37
30
|
case 'SLIDESHOW':
|
|
38
31
|
{
|
|
39
32
|
return SlideshowInArticleBody({
|
|
40
33
|
data: entityData
|
|
41
34
|
});
|
|
42
35
|
}
|
|
43
|
-
|
|
44
36
|
case 'EMBEDDEDCODE':
|
|
45
37
|
{
|
|
46
38
|
return EmbeddedCodeInArticleBody({
|
|
47
39
|
data: entityData
|
|
48
40
|
});
|
|
49
41
|
}
|
|
50
|
-
|
|
51
42
|
case 'INFOBOX':
|
|
52
43
|
{
|
|
53
44
|
return InfoBoxInArticleBody({
|
|
@@ -55,10 +46,8 @@ const AtomicBlock = props => {
|
|
|
55
46
|
});
|
|
56
47
|
}
|
|
57
48
|
}
|
|
58
|
-
|
|
59
49
|
return null;
|
|
60
50
|
};
|
|
61
|
-
|
|
62
51
|
function atomicBlockRenderer(block) {
|
|
63
52
|
if (block.getType() === 'atomic') {
|
|
64
53
|
return {
|
|
@@ -67,6 +56,5 @@ function atomicBlockRenderer(block) {
|
|
|
67
56
|
props: {}
|
|
68
57
|
};
|
|
69
58
|
}
|
|
70
|
-
|
|
71
59
|
return null;
|
|
72
60
|
}
|
|
@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.EditableBlockquote = EditableBlockquote;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
-
|
|
12
9
|
var _blockquote = require("../buttons/blockquote");
|
|
13
|
-
|
|
14
10
|
var _draftRenderer = require("@kids-reporter/draft-renderer");
|
|
15
|
-
|
|
16
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
-
|
|
18
12
|
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); }
|
|
19
|
-
|
|
20
13
|
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; }
|
|
21
|
-
|
|
22
14
|
const {
|
|
23
15
|
BlockquoteInArticleBody
|
|
24
16
|
} = _draftRenderer.blockRenderers;
|
|
@@ -46,7 +38,6 @@ const EditableBlock = _styledComponents.default.div`
|
|
|
46
38
|
}
|
|
47
39
|
}
|
|
48
40
|
`;
|
|
49
|
-
|
|
50
41
|
function EditableBlockquote(props) {
|
|
51
42
|
const [isInputOpen, setIsInputOpen] = (0, _react.useState)(false);
|
|
52
43
|
const {
|
|
@@ -61,7 +52,6 @@ function EditableBlockquote(props) {
|
|
|
61
52
|
const entityKey = block.getEntityAt(0);
|
|
62
53
|
const entity = contentState.getEntity(entityKey);
|
|
63
54
|
const data = entity.getData();
|
|
64
|
-
|
|
65
55
|
const onInputChange = inputValue => {
|
|
66
56
|
// close `BlockquoteInput`
|
|
67
57
|
setIsInputOpen(false);
|
|
@@ -70,7 +60,6 @@ function EditableBlockquote(props) {
|
|
|
70
60
|
entityData: inputValue
|
|
71
61
|
});
|
|
72
62
|
};
|
|
73
|
-
|
|
74
63
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_blockquote.BlockquoteInput, {
|
|
75
64
|
isOpen: isInputOpen,
|
|
76
65
|
onCancel: () => {
|
|
@@ -84,8 +73,8 @@ function EditableBlockquote(props) {
|
|
|
84
73
|
}), /*#__PURE__*/_react.default.createElement(EditButton, {
|
|
85
74
|
onClick: () => {
|
|
86
75
|
// call `onEditStart` prop as we are trying to update the blockquote entity
|
|
87
|
-
onEditStart();
|
|
88
|
-
|
|
76
|
+
onEditStart();
|
|
77
|
+
// open `BlockquoteInput`
|
|
89
78
|
setIsInputOpen(true);
|
|
90
79
|
}
|
|
91
80
|
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
@@ -4,23 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.createAnnotationButton = createAnnotationButton;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
8
|
var _btNames = _interopRequireDefault(require("./bt-names"));
|
|
11
|
-
|
|
12
9
|
var _draftJs = require("draft-js");
|
|
13
|
-
|
|
14
10
|
var _modals = require("@keystone-ui/modals");
|
|
15
|
-
|
|
16
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
-
|
|
18
12
|
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); }
|
|
19
|
-
|
|
20
13
|
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; }
|
|
21
|
-
|
|
22
14
|
const disabledButtons = [_btNames.default.h2, _btNames.default.h3, _btNames.default.code, _btNames.default.codeBlock, _btNames.default.blockquote, _btNames.default.annotation, _btNames.default.embed, _btNames.default.image, _btNames.default.infoBox, _btNames.default.slideshow];
|
|
23
|
-
|
|
24
15
|
function createAnnotationButton({
|
|
25
16
|
InnerEditor,
|
|
26
17
|
decorator
|
|
@@ -36,16 +27,13 @@ function createAnnotationButton({
|
|
|
36
27
|
const [inputValue, setInputValue] = (0, _react.useState)({
|
|
37
28
|
editorStateOfInnerEditor: _draftJs.EditorState.createEmpty(decorator)
|
|
38
29
|
});
|
|
39
|
-
|
|
40
30
|
const promptForAnnotation = e => {
|
|
41
31
|
e.preventDefault();
|
|
42
32
|
const selection = editorStateOfOuterEditor.getSelection();
|
|
43
|
-
|
|
44
33
|
if (!selection.isCollapsed()) {
|
|
45
34
|
setToShowInput(true);
|
|
46
35
|
}
|
|
47
36
|
};
|
|
48
|
-
|
|
49
37
|
const confirmAnnotation = () => {
|
|
50
38
|
const contentState = editorStateOfOuterEditor.getCurrentContent();
|
|
51
39
|
const rawContentState = (0, _draftJs.convertToRaw)(inputValue.editorStateOfInnerEditor.getCurrentContent());
|
|
@@ -53,35 +41,29 @@ function createAnnotationButton({
|
|
|
53
41
|
rawContentState
|
|
54
42
|
});
|
|
55
43
|
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
|
|
56
|
-
|
|
57
44
|
const newEditorState = _draftJs.EditorState.set(editorStateOfOuterEditor, {
|
|
58
45
|
currentContent: contentStateWithEntity
|
|
59
46
|
});
|
|
60
|
-
|
|
61
47
|
onChange(toggleEntity(newEditorState, newEditorState.getSelection(), entityKey));
|
|
62
48
|
setToShowInput(false);
|
|
63
49
|
setInputValue({
|
|
64
50
|
editorStateOfInnerEditor: _draftJs.EditorState.createEmpty(decorator)
|
|
65
51
|
});
|
|
66
52
|
};
|
|
67
|
-
|
|
68
53
|
const removeAnnotation = () => {
|
|
69
54
|
const selection = editorStateOfOuterEditor.getSelection();
|
|
70
|
-
|
|
71
55
|
if (!selection.isCollapsed()) {
|
|
72
56
|
onChange(toggleEntity(editorStateOfOuterEditor, selection, null));
|
|
73
57
|
}
|
|
74
|
-
|
|
75
58
|
setToShowInput(false);
|
|
76
59
|
setInputValue({
|
|
77
60
|
editorStateOfInnerEditor: _draftJs.EditorState.createEmpty(decorator)
|
|
78
61
|
});
|
|
79
62
|
};
|
|
80
|
-
|
|
81
63
|
const input = /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
|
|
82
64
|
isOpen: toShowInput
|
|
83
65
|
}, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
|
|
84
|
-
title: "
|
|
66
|
+
title: "\u8A3B\u89E3",
|
|
85
67
|
actions: {
|
|
86
68
|
cancel: {
|
|
87
69
|
label: 'Cancel',
|
|
@@ -101,7 +83,6 @@ function createAnnotationButton({
|
|
|
101
83
|
});
|
|
102
84
|
}
|
|
103
85
|
})));
|
|
104
|
-
|
|
105
86
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, input, /*#__PURE__*/_react.default.createElement("div", {
|
|
106
87
|
className: props.className,
|
|
107
88
|
onMouseDown: isActive ? removeAnnotation : promptForAnnotation
|