@mirrormedia/lilith-draft-editor 1.1.0-alpha.3 → 1.1.0-alpha.30
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/draft-js/buttons/annotation.js +22 -0
- package/lib/draft-js/buttons/audio.js +16 -3
- package/lib/draft-js/buttons/background-color.js +26 -0
- package/lib/draft-js/buttons/background-image.js +32 -13
- package/lib/draft-js/buttons/background-video.js +32 -13
- package/lib/draft-js/buttons/color-box.js +21 -5
- package/lib/draft-js/buttons/divider.js +12 -3
- package/lib/draft-js/buttons/embedded-code.js +16 -5
- package/lib/draft-js/buttons/enlarge.js +3 -0
- package/lib/draft-js/buttons/font-color.js +26 -0
- package/lib/draft-js/buttons/image.js +18 -7
- package/lib/draft-js/buttons/info-box.js +21 -5
- package/lib/draft-js/buttons/link.js +68 -22
- package/lib/draft-js/buttons/media.js +16 -3
- package/lib/draft-js/buttons/related-post.js +14 -3
- package/lib/draft-js/buttons/selector/align-selector.js +11 -2
- package/lib/draft-js/buttons/selector/audio-selector.js +33 -5
- package/lib/draft-js/buttons/selector/image-selector.js +64 -16
- package/lib/draft-js/buttons/selector/pagination.js +6 -2
- package/lib/draft-js/buttons/selector/post-selector.js +39 -6
- package/lib/draft-js/buttons/selector/search-box.js +9 -0
- package/lib/draft-js/buttons/selector/video-selector.js +33 -4
- package/lib/draft-js/buttons/side-index.js +31 -15
- package/lib/draft-js/buttons/slideshow.js +16 -7
- package/lib/draft-js/buttons/table.js +11 -5
- package/lib/draft-js/buttons/text-align.js +14 -0
- package/lib/draft-js/buttons/video.js +19 -5
- package/lib/draft-js/buttons/youtube.js +147 -0
- package/lib/draft-js/const.js +2 -0
- package/lib/draft-js/draft-converter/api-data-instance.js +14 -0
- package/lib/draft-js/draft-converter/atomic-block-processor.js +42 -12
- package/lib/draft-js/draft-converter/entities.js +3 -1
- package/lib/draft-js/draft-converter/index.js +29 -10
- package/lib/draft-js/draft-converter/inline-styles-processor.js +55 -22
- package/lib/draft-js/modifier.js +13 -5
- package/lib/draft-js/util.js +32 -0
- package/lib/index.js +4 -0
- package/lib/website/mirrormedia/block-renderer/background-image-block.js +14 -2
- package/lib/website/mirrormedia/block-renderer/background-video-block.js +14 -2
- package/lib/website/mirrormedia/block-renderer/color-box-block.js +14 -2
- package/lib/website/mirrormedia/block-renderer/embedded-code-block.js +12 -3
- package/lib/website/mirrormedia/block-renderer/image-block.js +108 -0
- package/lib/website/mirrormedia/block-renderer/info-box-block.js +14 -2
- package/lib/website/mirrormedia/block-renderer/side-index-block.js +13 -2
- package/lib/website/mirrormedia/block-renderer/slideshow-block.js +93 -7
- package/lib/website/mirrormedia/block-renderer/table-block.js +62 -28
- package/lib/website/mirrormedia/block-renderer-fn.js +48 -5
- package/lib/website/mirrormedia/draft-editor.js +138 -14
- package/lib/website/mirrormedia/entity-decorator.js +12 -1
- package/lib/website/mirrormedia/index.js +3 -0
- package/lib/website/mirrormedia/selector/align-selector.js +11 -2
- package/lib/website/mirrormedia/selector/audio-selector.js +34 -5
- package/lib/website/mirrormedia/selector/image-selector.js +75 -18
- package/lib/website/mirrormedia/selector/pagination.js +6 -2
- package/lib/website/mirrormedia/selector/post-selector.js +40 -6
- package/lib/website/mirrormedia/selector/search-box.js +9 -0
- package/lib/website/mirrormedia/selector/video-selector.js +36 -7
- package/lib/website/mirrormedia/shared-style/index.js +17 -0
- package/lib/website/mirrormedia/theme/index.js +28 -0
- package/lib/website/readr/block-renderer/background-image-block.js +66 -6
- package/lib/website/readr/block-renderer/background-video-block.js +76 -6
- package/lib/website/readr/block-renderer/color-box-block.js +14 -2
- package/lib/website/readr/block-renderer/image-block.js +106 -0
- package/lib/website/readr/block-renderer/info-box-block.js +14 -2
- package/lib/website/readr/block-renderer/side-index-block.js +13 -2
- package/lib/website/readr/block-renderer/table-block.js +62 -28
- package/lib/website/readr/block-renderer-fn.js +32 -3
- package/lib/website/readr/draft-editor.js +112 -12
- package/lib/website/readr/entity-decorator.js +4 -0
- package/lib/website/readr/index.js +3 -0
- package/lib/website/readr/selector/align-selector.js +11 -2
- package/lib/website/readr/selector/audio-selector.js +34 -17
- package/lib/website/readr/selector/image-selector.js +62 -16
- package/lib/website/readr/selector/pagination.js +6 -2
- package/lib/website/readr/selector/post-selector.js +40 -13
- package/lib/website/readr/selector/search-box.js +9 -0
- package/lib/website/readr/selector/video-selector.js +33 -4
- package/lib/website/readr/theme/index.js +39 -0
- package/package.json +8 -8
|
@@ -4,16 +4,25 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.SearchBox = SearchBox;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
8
10
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
+
|
|
9
12
|
var _button = require("@keystone-ui/button");
|
|
13
|
+
|
|
10
14
|
var _fields = require("@keystone-ui/fields");
|
|
15
|
+
|
|
11
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
|
|
12
18
|
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
|
+
|
|
13
20
|
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
|
+
|
|
14
22
|
const SearchBoxWrapper = _styledComponents.default.div`
|
|
15
23
|
display: flex;
|
|
16
24
|
`;
|
|
25
|
+
|
|
17
26
|
function SearchBox(props) {
|
|
18
27
|
const {
|
|
19
28
|
onChange,
|
|
@@ -4,20 +4,31 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.VideoSelector = VideoSelector;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
8
10
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
+
|
|
9
12
|
var _modals = require("@keystone-ui/modals");
|
|
13
|
+
|
|
10
14
|
var _apollo = require("@keystone-6/core/admin-ui/apollo");
|
|
15
|
+
|
|
11
16
|
var _searchBox = require("./search-box");
|
|
17
|
+
|
|
12
18
|
var _pagination = require("./pagination");
|
|
19
|
+
|
|
13
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
+
|
|
14
22
|
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
|
+
|
|
15
24
|
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
|
+
|
|
16
26
|
const videosQuery = (0, _apollo.gql)`
|
|
17
27
|
query Videos($searchText: String!, $take: Int, $skip: Int) {
|
|
18
28
|
videosCount(where: { name: { contains: $searchText } })
|
|
19
29
|
videos(
|
|
20
30
|
where: { name: { contains: $searchText } }
|
|
31
|
+
orderBy: { id: desc }
|
|
21
32
|
take: $take
|
|
22
33
|
skip: $skip
|
|
23
34
|
) {
|
|
@@ -91,6 +102,7 @@ const ErrorWrapper = _styledComponents.default.div`
|
|
|
91
102
|
const VideoName = _styledComponents.default.p`
|
|
92
103
|
text-align: center;
|
|
93
104
|
`;
|
|
105
|
+
|
|
94
106
|
function VideosGrids(props) {
|
|
95
107
|
const {
|
|
96
108
|
videos,
|
|
@@ -106,8 +118,10 @@ function VideosGrids(props) {
|
|
|
106
118
|
});
|
|
107
119
|
}));
|
|
108
120
|
}
|
|
121
|
+
|
|
109
122
|
function VideoGrid(props) {
|
|
110
123
|
var _video$file;
|
|
124
|
+
|
|
111
125
|
const {
|
|
112
126
|
video,
|
|
113
127
|
onSelect,
|
|
@@ -127,20 +141,24 @@ function VideoGrid(props) {
|
|
|
127
141
|
src: video === null || video === void 0 ? void 0 : (_video$file = video.file) === null || _video$file === void 0 ? void 0 : _video$file.url
|
|
128
142
|
})));
|
|
129
143
|
}
|
|
144
|
+
|
|
130
145
|
function VideoMetaGrids(props) {
|
|
131
146
|
const {
|
|
132
147
|
videoMetas
|
|
133
148
|
} = props;
|
|
134
149
|
return /*#__PURE__*/_react.default.createElement(VideoMetaGridsWrapper, null, videoMetas.map(videoMeta => {
|
|
135
150
|
var _videoMeta$video;
|
|
151
|
+
|
|
136
152
|
return /*#__PURE__*/_react.default.createElement(VideoMetaGrid, {
|
|
137
153
|
key: videoMeta === null || videoMeta === void 0 ? void 0 : (_videoMeta$video = videoMeta.video) === null || _videoMeta$video === void 0 ? void 0 : _videoMeta$video.id,
|
|
138
154
|
videoMeta: videoMeta
|
|
139
155
|
});
|
|
140
156
|
}));
|
|
141
157
|
}
|
|
158
|
+
|
|
142
159
|
function VideoMetaGrid(props) {
|
|
143
160
|
var _video$file2;
|
|
161
|
+
|
|
144
162
|
const {
|
|
145
163
|
videoMeta
|
|
146
164
|
} = props;
|
|
@@ -157,6 +175,7 @@ function VideoMetaGrid(props) {
|
|
|
157
175
|
src: video === null || video === void 0 ? void 0 : (_video$file2 = video.file) === null || _video$file2 === void 0 ? void 0 : _video$file2.url
|
|
158
176
|
})), /*#__PURE__*/_react.default.createElement(VideoName, null, video === null || video === void 0 ? void 0 : video.name));
|
|
159
177
|
}
|
|
178
|
+
|
|
160
179
|
function VideoSelector(props) {
|
|
161
180
|
const [queryVideos, {
|
|
162
181
|
loading,
|
|
@@ -169,40 +188,46 @@ function VideoSelector(props) {
|
|
|
169
188
|
fetchPolicy: 'no-cache'
|
|
170
189
|
});
|
|
171
190
|
const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
|
|
191
|
+
|
|
172
192
|
const [searchText, setSearchText] = (0, _react.useState)('');
|
|
173
193
|
const [selected, setSelected] = (0, _react.useState)([]);
|
|
174
194
|
const pageSize = 6;
|
|
175
195
|
const {
|
|
176
196
|
onChange
|
|
177
197
|
} = props;
|
|
198
|
+
|
|
178
199
|
const onSave = () => {
|
|
179
200
|
onChange(selected);
|
|
180
201
|
};
|
|
202
|
+
|
|
181
203
|
const onCancel = () => {
|
|
182
204
|
onChange([]);
|
|
183
205
|
};
|
|
206
|
+
|
|
184
207
|
const onSearchBoxChange = async searchInput => {
|
|
185
208
|
setSearchText(searchInput);
|
|
186
209
|
setCurrentPage(1);
|
|
187
210
|
};
|
|
211
|
+
|
|
188
212
|
const onVideosGridSelect = videoEntity => {
|
|
189
213
|
setSelected(selected => {
|
|
190
214
|
const filterdSelected = selected.filter(ele => {
|
|
191
215
|
var _ele$video;
|
|
216
|
+
|
|
192
217
|
return ((_ele$video = ele.video) === null || _ele$video === void 0 ? void 0 : _ele$video.id) !== videoEntity.id;
|
|
193
|
-
});
|
|
218
|
+
}); // deselect the video
|
|
194
219
|
|
|
195
|
-
// deselect the video
|
|
196
220
|
if (filterdSelected.length !== selected.length) {
|
|
197
221
|
return filterdSelected;
|
|
198
|
-
}
|
|
222
|
+
} // single select
|
|
223
|
+
|
|
199
224
|
|
|
200
|
-
// single select
|
|
201
225
|
return [{
|
|
202
226
|
video: videoEntity
|
|
203
227
|
}];
|
|
204
228
|
});
|
|
205
229
|
};
|
|
230
|
+
|
|
206
231
|
const selectedVideos = selected.map(ele => {
|
|
207
232
|
return ele.video;
|
|
208
233
|
});
|
|
@@ -217,6 +242,7 @@ function VideoSelector(props) {
|
|
|
217
242
|
});
|
|
218
243
|
}
|
|
219
244
|
}, [currentPage, searchText]);
|
|
245
|
+
|
|
220
246
|
let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(VideosGrids, {
|
|
221
247
|
videos: videos,
|
|
222
248
|
selected: selectedVideos,
|
|
@@ -229,12 +255,15 @@ function VideoSelector(props) {
|
|
|
229
255
|
setCurrentPage(pageIndex);
|
|
230
256
|
}
|
|
231
257
|
}));
|
|
258
|
+
|
|
232
259
|
if (loading) {
|
|
233
260
|
searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
|
|
234
261
|
}
|
|
262
|
+
|
|
235
263
|
if (error) {
|
|
236
264
|
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)));
|
|
237
265
|
}
|
|
266
|
+
|
|
238
267
|
return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
|
|
239
268
|
isOpen: true
|
|
240
269
|
}, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.theme = exports.mediaSize = exports.default = void 0;
|
|
7
|
+
const mediaSize = {
|
|
8
|
+
xs: 0,
|
|
9
|
+
sm: 576,
|
|
10
|
+
md: 768,
|
|
11
|
+
lg: 960,
|
|
12
|
+
xl: 1200,
|
|
13
|
+
xxl: 1400
|
|
14
|
+
};
|
|
15
|
+
exports.mediaSize = mediaSize;
|
|
16
|
+
const theme = {
|
|
17
|
+
breakpoint: {
|
|
18
|
+
xs: `@media (min-width: ${mediaSize.xs}px)`,
|
|
19
|
+
sm: `@media (min-width: ${mediaSize.sm}px)`,
|
|
20
|
+
md: `@media (min-width: ${mediaSize.md}px)`,
|
|
21
|
+
lg: `@media (min-width: ${mediaSize.lg}px)`,
|
|
22
|
+
xl: `@media (min-width: ${mediaSize.xl}px)`,
|
|
23
|
+
xxl: `@media (min-width: ${mediaSize.xxl}px)`
|
|
24
|
+
},
|
|
25
|
+
fontSize: {
|
|
26
|
+
xs: 'font-size: 14px;',
|
|
27
|
+
sm: 'font-size: 16px;',
|
|
28
|
+
md: 'font-size: 18px;',
|
|
29
|
+
lg: 'font-size: 24px;',
|
|
30
|
+
xl: 'font-size: 28px;'
|
|
31
|
+
},
|
|
32
|
+
margin: {
|
|
33
|
+
default: 'margin: 32px auto;',
|
|
34
|
+
narrow: 'margin: 16px auto;'
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
exports.theme = theme;
|
|
38
|
+
var _default = theme;
|
|
39
|
+
exports.default = _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirrormedia/lilith-draft-editor",
|
|
3
|
-
"version": "1.1.0-alpha.
|
|
3
|
+
"version": "1.1.0-alpha.30",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -23,16 +23,16 @@
|
|
|
23
23
|
"license": "MIT",
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"draft-js": "^0.11.7",
|
|
26
|
-
"@mirrormedia/lilith-draft-renderer": "1.
|
|
26
|
+
"@mirrormedia/lilith-draft-renderer": "1.3.0-alpha.16"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
|
-
"react": "18.
|
|
30
|
-
"react-dom": "18.
|
|
29
|
+
"react": "18.2.0",
|
|
30
|
+
"react-dom": "18.2.0",
|
|
31
31
|
"styled-components": "5.3.5",
|
|
32
|
-
"@keystone-6/core": "
|
|
33
|
-
"@keystone-ui/button": "^
|
|
34
|
-
"@keystone-ui/fields": "^
|
|
35
|
-
"@keystone-ui/modals": "^
|
|
32
|
+
"@keystone-6/core": "5.2.0",
|
|
33
|
+
"@keystone-ui/button": "^7.0.2",
|
|
34
|
+
"@keystone-ui/fields": "^7.2.0",
|
|
35
|
+
"@keystone-ui/modals": "^6.0.3"
|
|
36
36
|
},
|
|
37
37
|
"files": [
|
|
38
38
|
"lib"
|