@mirrormedia/lilith-draft-editor 1.3.3 → 2.0.0
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/README.md +7 -7
- package/lib/draft-js/buttons/annotation.js +4 -3
- package/lib/draft-js/buttons/audio.js +5 -9
- package/lib/draft-js/buttons/background-color.js +4 -3
- package/lib/draft-js/buttons/background-image.js +5 -3
- package/lib/draft-js/buttons/background-video.js +5 -3
- package/lib/draft-js/buttons/color-box.js +11 -15
- package/lib/draft-js/buttons/divider.js +6 -6
- package/lib/draft-js/buttons/embedded-code.js +8 -13
- package/lib/draft-js/buttons/enlarge.js +2 -6
- package/lib/draft-js/buttons/font-color.js +4 -3
- package/lib/draft-js/buttons/image.js +5 -9
- package/lib/draft-js/buttons/info-box.js +1 -1
- package/lib/draft-js/buttons/link.js +3 -2
- package/lib/draft-js/buttons/related-post.js +6 -10
- package/lib/draft-js/buttons/selector/align-selector.js +5 -9
- package/lib/draft-js/buttons/selector/audio-selector.js +17 -13
- package/lib/draft-js/buttons/selector/image-selector.js +29 -21
- package/lib/draft-js/buttons/selector/pagination.js +6 -8
- package/lib/draft-js/buttons/selector/post-selector.js +17 -13
- package/lib/draft-js/buttons/selector/video-selector.js +15 -10
- package/lib/draft-js/buttons/side-index.js +18 -22
- package/lib/draft-js/buttons/slideshow.js +5 -9
- package/lib/draft-js/buttons/table.js +3 -7
- package/lib/draft-js/buttons/text-align.js +17 -15
- package/lib/draft-js/buttons/type.js +5 -0
- package/lib/draft-js/buttons/video.js +5 -9
- package/lib/draft-js/buttons/youtube.js +12 -16
- package/lib/draft-js/draft-converter/api-data-instance.js +16 -2
- package/lib/draft-js/draft-converter/atomic-block-processor.js +24 -14
- package/lib/draft-js/draft-converter/index.js +68 -17
- package/lib/draft-js/draft-converter/inline-styles-processor.js +74 -26
- package/lib/draft-js/draft-converter/jsdoc.js +24 -0
- package/lib/draft-js/modifier.js +7 -7
- package/lib/draft-js/util.js +3 -1
- package/lib/website/mirrormedia/draft-editor.js +129 -93
- package/lib/website/mirrormedia/selector/align-selector.js +5 -9
- package/lib/website/mirrormedia/selector/audio-selector.js +4 -2
- package/lib/website/mirrormedia/selector/image-selector.js +16 -9
- package/lib/website/mirrormedia/selector/pagination.js +6 -8
- package/lib/website/mirrormedia/selector/post-selector.js +5 -3
- package/lib/website/mirrormedia/selector/video-selector.js +1 -1
- package/package.json +2 -2
- package/lib/draft-js/buttons/media.js +0 -121
|
@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.Pagination = Pagination;
|
|
7
7
|
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
9
|
|
|
12
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -46,12 +44,12 @@ function Pagination({
|
|
|
46
44
|
const prevPage = currentPage - 1; // Don't render the pagiantion component if the pageSize is greater than the total number of items in the list.
|
|
47
45
|
|
|
48
46
|
if (total <= pageSize) return null;
|
|
49
|
-
return /*#__PURE__*/
|
|
47
|
+
return /*#__PURE__*/React.createElement(PaginationWrapper, null, /*#__PURE__*/React.createElement("div", null, currentPage, " of ", limit, " pages"), /*#__PURE__*/React.createElement(Arrows, null, /*#__PURE__*/React.createElement(ArrowButtonWrapper, {
|
|
50
48
|
onClick: () => {
|
|
51
49
|
onChange(prevPage);
|
|
52
50
|
},
|
|
53
51
|
disable: prevPage < minPage
|
|
54
|
-
}, /*#__PURE__*/
|
|
52
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
55
53
|
"aria-hidden": "true",
|
|
56
54
|
focusable: "false",
|
|
57
55
|
height: "24px",
|
|
@@ -60,14 +58,14 @@ function Pagination({
|
|
|
60
58
|
viewBox: "0 0 24 24",
|
|
61
59
|
xmlns: "http://www.w3.org/2000/svg",
|
|
62
60
|
className: "css-bztyua"
|
|
63
|
-
}, /*#__PURE__*/
|
|
61
|
+
}, /*#__PURE__*/React.createElement("polyline", {
|
|
64
62
|
points: "15 18 9 12 15 6"
|
|
65
|
-
}), ' ')), /*#__PURE__*/
|
|
63
|
+
}), ' ')), /*#__PURE__*/React.createElement(ArrowButtonWrapper, {
|
|
66
64
|
onClick: () => {
|
|
67
65
|
onChange(nextPage);
|
|
68
66
|
},
|
|
69
67
|
disable: nextPage > limit
|
|
70
|
-
}, /*#__PURE__*/
|
|
68
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
71
69
|
"aria-hidden": "true",
|
|
72
70
|
focusable: "false",
|
|
73
71
|
height: "24px",
|
|
@@ -76,7 +74,7 @@ function Pagination({
|
|
|
76
74
|
viewBox: "0 0 24 24",
|
|
77
75
|
xmlns: "http://www.w3.org/2000/svg",
|
|
78
76
|
className: "css-bztyua"
|
|
79
|
-
}, /*#__PURE__*/
|
|
77
|
+
}, /*#__PURE__*/React.createElement("polyline", {
|
|
80
78
|
points: "9 18 15 12 9 6"
|
|
81
79
|
})))));
|
|
82
80
|
}
|
|
@@ -184,7 +184,7 @@ function PostMetaGrid(props) {
|
|
|
184
184
|
|
|
185
185
|
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;
|
|
186
186
|
}
|
|
187
|
-
}), /*#__PURE__*/_react.default.createElement(PostTitle, null, post === null || post === void 0 ? void 0 : post.
|
|
187
|
+
}), /*#__PURE__*/_react.default.createElement(PostTitle, null, post === null || post === void 0 ? void 0 : post.title)));
|
|
188
188
|
}
|
|
189
189
|
|
|
190
190
|
function PostSelector(props) {
|
|
@@ -276,7 +276,7 @@ function PostSelector(props) {
|
|
|
276
276
|
}
|
|
277
277
|
}, [currentPage, searchText]);
|
|
278
278
|
|
|
279
|
-
let searchResult = /*#__PURE__*/_react.default.createElement(_react.
|
|
279
|
+
let searchResult = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(PostGrids, {
|
|
280
280
|
posts: posts,
|
|
281
281
|
selected: selectedPosts,
|
|
282
282
|
onSelect: onPostsGridSelect
|
|
@@ -294,7 +294,9 @@ function PostSelector(props) {
|
|
|
294
294
|
}
|
|
295
295
|
|
|
296
296
|
if (error) {
|
|
297
|
-
|
|
297
|
+
var _postsQuery$loc;
|
|
298
|
+
|
|
299
|
+
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 === null || postsQuery === void 0 ? void 0 : (_postsQuery$loc = postsQuery.loc) === null || _postsQuery$loc === void 0 ? void 0 : _postsQuery$loc.source.body)));
|
|
298
300
|
}
|
|
299
301
|
|
|
300
302
|
return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
|
|
@@ -280,7 +280,7 @@ function VideoSelector(props) {
|
|
|
280
280
|
}
|
|
281
281
|
}, [currentPage, searchText]);
|
|
282
282
|
|
|
283
|
-
let searchResult = /*#__PURE__*/_react.default.createElement(_react.
|
|
283
|
+
let searchResult = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(VideosGrids, {
|
|
284
284
|
videos: videos,
|
|
285
285
|
selected: selectedVideos,
|
|
286
286
|
onSelect: onVideosGridSelect
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirrormedia/lilith-draft-editor",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
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.2
|
|
26
|
+
"@mirrormedia/lilith-draft-renderer": "1.3.2"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"react": "18.2.0",
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.MediaButton = MediaButton;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
|
-
var _modals = require("@keystone-ui/modals");
|
|
11
|
-
|
|
12
|
-
var _draftJs = require("draft-js");
|
|
13
|
-
|
|
14
|
-
var _fields = require("@keystone-ui/fields");
|
|
15
|
-
|
|
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); }
|
|
17
|
-
|
|
18
|
-
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; }
|
|
19
|
-
|
|
20
|
-
const styles = {
|
|
21
|
-
buttons: {
|
|
22
|
-
marginBottom: 10,
|
|
23
|
-
display: 'flex'
|
|
24
|
-
},
|
|
25
|
-
urlInputContainer: {
|
|
26
|
-
marginBottom: 10
|
|
27
|
-
},
|
|
28
|
-
urlInput: {
|
|
29
|
-
fontFamily: "'Georgia', serif",
|
|
30
|
-
marginRight: 10,
|
|
31
|
-
padding: 3
|
|
32
|
-
},
|
|
33
|
-
button: {
|
|
34
|
-
marginTop: '10px',
|
|
35
|
-
marginRight: '10px',
|
|
36
|
-
cursor: 'pointer'
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
function MediaButton(props) {
|
|
41
|
-
const {
|
|
42
|
-
editorState,
|
|
43
|
-
onChange,
|
|
44
|
-
customStyles
|
|
45
|
-
} = props;
|
|
46
|
-
const [toShowUrlInput, setToShowUrlInput] = (0, _react.useState)(false);
|
|
47
|
-
const [urlValue, setUrlValue] = (0, _react.useState)('');
|
|
48
|
-
const [urlType, setUrlType] = (0, _react.useState)('');
|
|
49
|
-
|
|
50
|
-
const promptForMedia = mediaType => {
|
|
51
|
-
setToShowUrlInput(true);
|
|
52
|
-
setUrlValue('');
|
|
53
|
-
setUrlType(mediaType);
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
const confirmMedia = () => {
|
|
57
|
-
const contentState = editorState.getCurrentContent();
|
|
58
|
-
const contentStateWithEntity = contentState.createEntity(urlType, 'IMMUTABLE', {
|
|
59
|
-
src: urlValue
|
|
60
|
-
});
|
|
61
|
-
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
|
|
62
|
-
|
|
63
|
-
const newEditorState = _draftJs.EditorState.set(editorState, {
|
|
64
|
-
currentContent: contentStateWithEntity
|
|
65
|
-
}); // The third parameter here is a space string, not an empty string
|
|
66
|
-
// If you set an empty string, you will get an error: Unknown DraftEntity key: null
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
|
|
70
|
-
setToShowUrlInput(false);
|
|
71
|
-
setUrlType('');
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
const urlInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
|
|
75
|
-
title: `Insert ${urlType.toUpperCase()} LINK`,
|
|
76
|
-
isOpen: toShowUrlInput,
|
|
77
|
-
actions: {
|
|
78
|
-
confirm: {
|
|
79
|
-
label: 'Confirm',
|
|
80
|
-
action: confirmMedia
|
|
81
|
-
},
|
|
82
|
-
cancel: {
|
|
83
|
-
label: 'Cancel',
|
|
84
|
-
action: () => {
|
|
85
|
-
setToShowUrlInput(false);
|
|
86
|
-
setUrlValue('');
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
}, /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
|
|
91
|
-
onChange: e => setUrlValue(e.target.value),
|
|
92
|
-
style: styles.urlInput,
|
|
93
|
-
type: "text",
|
|
94
|
-
value: urlValue
|
|
95
|
-
}));
|
|
96
|
-
|
|
97
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, urlInput, /*#__PURE__*/_react.default.createElement("div", {
|
|
98
|
-
style: styles.buttons
|
|
99
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
100
|
-
onClick: () => {
|
|
101
|
-
promptForMedia('imageLink');
|
|
102
|
-
},
|
|
103
|
-
style: customStyles || styles.button
|
|
104
|
-
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
105
|
-
className: "fas fa-arrow-up-right-from-square"
|
|
106
|
-
}), /*#__PURE__*/_react.default.createElement("span", null, " Image Link")), /*#__PURE__*/_react.default.createElement("div", {
|
|
107
|
-
onClick: () => {
|
|
108
|
-
promptForMedia('audioLink');
|
|
109
|
-
},
|
|
110
|
-
style: customStyles || styles.button
|
|
111
|
-
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
112
|
-
className: "far fa-file-audio"
|
|
113
|
-
}), /*#__PURE__*/_react.default.createElement("span", null, " Audio Link")), /*#__PURE__*/_react.default.createElement("div", {
|
|
114
|
-
onClick: () => {
|
|
115
|
-
promptForMedia('videoLink');
|
|
116
|
-
},
|
|
117
|
-
style: customStyles || styles.button
|
|
118
|
-
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
119
|
-
className: "far fa-file-video"
|
|
120
|
-
}), /*#__PURE__*/_react.default.createElement("span", null, " Video Link"))));
|
|
121
|
-
}
|