@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.
- package/lib/draft-js/buttons/annotation.js +0 -22
- package/lib/draft-js/buttons/audio.js +3 -16
- package/lib/draft-js/buttons/background-color.js +0 -26
- package/lib/draft-js/buttons/background-image.js +13 -32
- package/lib/draft-js/buttons/background-video.js +13 -32
- package/lib/draft-js/buttons/color-box.js +5 -21
- package/lib/draft-js/buttons/divider.js +3 -12
- package/lib/draft-js/buttons/embedded-code.js +5 -16
- package/lib/draft-js/buttons/enlarge.js +0 -3
- package/lib/draft-js/buttons/font-color.js +0 -26
- package/lib/draft-js/buttons/image.js +5 -16
- package/lib/draft-js/buttons/info-box.js +5 -21
- package/lib/draft-js/buttons/link.js +0 -19
- package/lib/draft-js/buttons/media.js +3 -16
- package/lib/draft-js/buttons/related-post.js +3 -14
- package/lib/draft-js/buttons/selector/align-selector.js +2 -11
- package/lib/draft-js/buttons/selector/audio-selector.js +4 -33
- package/lib/draft-js/buttons/selector/image-selector.js +6 -50
- package/lib/draft-js/buttons/selector/pagination.js +2 -6
- package/lib/draft-js/buttons/selector/post-selector.js +6 -39
- package/lib/draft-js/buttons/selector/search-box.js +0 -9
- package/lib/draft-js/buttons/selector/video-selector.js +4 -33
- package/lib/draft-js/buttons/side-index.js +15 -31
- package/lib/draft-js/buttons/slideshow.js +7 -16
- package/lib/draft-js/buttons/table.js +5 -11
- package/lib/draft-js/buttons/text-align.js +0 -14
- package/lib/draft-js/buttons/video.js +3 -16
- package/lib/draft-js/const.js +0 -2
- package/lib/draft-js/draft-converter/api-data-instance.js +0 -14
- package/lib/draft-js/draft-converter/atomic-block-processor.js +12 -41
- package/lib/draft-js/draft-converter/entities.js +1 -0
- package/lib/draft-js/draft-converter/index.js +10 -29
- package/lib/draft-js/draft-converter/inline-styles-processor.js +22 -55
- package/lib/draft-js/modifier.js +5 -13
- package/lib/index.js +0 -4
- package/lib/website/mirrormedia/block-renderer/background-image-block.js +2 -14
- package/lib/website/mirrormedia/block-renderer/background-video-block.js +2 -14
- package/lib/website/mirrormedia/block-renderer/color-box-block.js +2 -14
- package/lib/website/mirrormedia/block-renderer/embedded-code-block.js +3 -12
- package/lib/website/mirrormedia/block-renderer/info-box-block.js +2 -14
- package/lib/website/mirrormedia/block-renderer/side-index-block.js +2 -13
- package/lib/website/mirrormedia/block-renderer/slideshow-block.js +4 -11
- package/lib/website/mirrormedia/block-renderer/table-block.js +28 -62
- package/lib/website/mirrormedia/block-renderer-fn.js +0 -30
- package/lib/website/mirrormedia/draft-editor.js +10 -106
- package/lib/website/mirrormedia/entity-decorator.js +0 -4
- package/lib/website/mirrormedia/index.js +0 -3
- package/lib/website/mirrormedia/selector/align-selector.js +2 -11
- package/lib/website/mirrormedia/selector/audio-selector.js +4 -33
- package/lib/website/mirrormedia/selector/image-selector.js +6 -49
- package/lib/website/mirrormedia/selector/pagination.js +2 -6
- package/lib/website/mirrormedia/selector/post-selector.js +6 -39
- package/lib/website/mirrormedia/selector/search-box.js +0 -9
- package/lib/website/mirrormedia/selector/video-selector.js +4 -32
- package/lib/website/readr/block-renderer/background-image-block.js +2 -14
- package/lib/website/readr/block-renderer/background-video-block.js +2 -14
- package/lib/website/readr/block-renderer/color-box-block.js +2 -14
- package/lib/website/readr/block-renderer/info-box-block.js +2 -14
- package/lib/website/readr/block-renderer/side-index-block.js +2 -13
- package/lib/website/readr/block-renderer/table-block.js +28 -62
- package/lib/website/readr/block-renderer-fn.js +4 -27
- package/lib/website/readr/draft-editor.js +10 -106
- package/lib/website/readr/entity-decorator.js +0 -4
- package/lib/website/readr/index.js +0 -3
- package/lib/website/readr/selector/align-selector.js +2 -11
- package/lib/website/readr/selector/audio-selector.js +4 -33
- package/lib/website/readr/selector/image-selector.js +6 -49
- package/lib/website/readr/selector/pagination.js +2 -6
- package/lib/website/readr/selector/post-selector.js +6 -39
- package/lib/website/readr/selector/search-box.js +0 -9
- package/lib/website/readr/selector/video-selector.js +4 -32
- 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
|
-
});
|
|
191
|
+
});
|
|
217
192
|
|
|
193
|
+
// deselect the video
|
|
218
194
|
if (filterdSelected.length !== selected.length) {
|
|
219
195
|
return filterdSelected;
|
|
220
|
-
}
|
|
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
|
-
|
|
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({
|
|
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 => ({
|
|
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 => ({
|
|
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 => ({
|
|
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();
|
|
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
|
-
});
|
|
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
|
-
|
|
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 {
|
|
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
|
-
});
|
|
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: [
|
|
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
|
-
});
|
|
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
|
-
});
|
|
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", {
|
package/lib/draft-js/const.js
CHANGED
|
@@ -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;
|