@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,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.AnnotationButton = AnnotationButton;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
8
|
var _draftJs = require("draft-js");
|
|
11
|
-
|
|
12
9
|
var _modals = require("@keystone-ui/modals");
|
|
13
|
-
|
|
14
10
|
var _draftConverter = _interopRequireDefault(require("../draft-converter"));
|
|
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
|
function escapeHTML(s) {
|
|
23
15
|
return s.replace(/&/g, '&').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>').replace(/'/g, ''');
|
|
24
16
|
}
|
|
25
|
-
|
|
26
17
|
function AnnotationButton(props) {
|
|
27
18
|
const toggleEntity = _draftJs.RichUtils.toggleLink;
|
|
28
19
|
const {
|
|
@@ -36,53 +27,42 @@ function AnnotationButton(props) {
|
|
|
36
27
|
const [inputValue, setInputValue] = (0, _react.useState)({
|
|
37
28
|
editorStateOfBasicEditor: _draftJs.EditorState.createEmpty(decorators)
|
|
38
29
|
});
|
|
39
|
-
|
|
40
30
|
const promptForAnnotation = e => {
|
|
41
31
|
e.preventDefault();
|
|
42
32
|
const selection = editorState.getSelection();
|
|
43
|
-
|
|
44
33
|
if (!selection.isCollapsed()) {
|
|
45
34
|
setToShowInput(true);
|
|
46
35
|
}
|
|
47
36
|
};
|
|
48
|
-
|
|
49
37
|
const confirmAnnotation = () => {
|
|
50
38
|
const contentState = editorState.getCurrentContent();
|
|
51
39
|
const rawContentState = (0, _draftJs.convertToRaw)(inputValue.editorStateOfBasicEditor.getCurrentContent());
|
|
52
|
-
|
|
53
40
|
const bodyHTML = _draftConverter.default.convertToHtml(rawContentState);
|
|
54
|
-
|
|
55
41
|
const contentStateWithEntity = contentState.createEntity('ANNOTATION', 'MUTABLE', {
|
|
56
42
|
rawContentState,
|
|
57
43
|
bodyHTML,
|
|
58
44
|
bodyEscapedHTML: escapeHTML(bodyHTML)
|
|
59
45
|
});
|
|
60
46
|
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
|
|
61
|
-
|
|
62
47
|
const newEditorState = _draftJs.EditorState.set(editorState, {
|
|
63
48
|
currentContent: contentStateWithEntity
|
|
64
49
|
});
|
|
65
|
-
|
|
66
50
|
onChange(toggleEntity(newEditorState, newEditorState.getSelection(), entityKey));
|
|
67
51
|
setToShowInput(false);
|
|
68
52
|
setInputValue({
|
|
69
53
|
editorStateOfBasicEditor: _draftJs.EditorState.createEmpty(decorators)
|
|
70
54
|
});
|
|
71
55
|
};
|
|
72
|
-
|
|
73
56
|
const removeAnnotation = () => {
|
|
74
57
|
const selection = editorState.getSelection();
|
|
75
|
-
|
|
76
58
|
if (!selection.isCollapsed()) {
|
|
77
59
|
onChange(toggleEntity(editorState, selection, null));
|
|
78
60
|
}
|
|
79
|
-
|
|
80
61
|
setToShowInput(false);
|
|
81
62
|
setInputValue({
|
|
82
63
|
editorStateOfBasicEditor: _draftJs.EditorState.createEmpty(decorators)
|
|
83
64
|
});
|
|
84
65
|
};
|
|
85
|
-
|
|
86
66
|
const basicEditorJsx = renderBasicEditor({
|
|
87
67
|
editorState: inputValue.editorStateOfBasicEditor,
|
|
88
68
|
onChange: editorStateOfBasicEditor => {
|
|
@@ -91,7 +71,6 @@ function AnnotationButton(props) {
|
|
|
91
71
|
});
|
|
92
72
|
}
|
|
93
73
|
});
|
|
94
|
-
|
|
95
74
|
const urlInput = /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
|
|
96
75
|
isOpen: toShowInput
|
|
97
76
|
}, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
|
|
@@ -107,7 +86,6 @@ function AnnotationButton(props) {
|
|
|
107
86
|
}
|
|
108
87
|
}
|
|
109
88
|
}, basicEditorJsx));
|
|
110
|
-
|
|
111
89
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, urlInput, /*#__PURE__*/_react.default.createElement("div", {
|
|
112
90
|
className: props.className,
|
|
113
91
|
onMouseDown: isActive ? removeAnnotation : promptForAnnotation
|
|
@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.AudioButton = AudioButton;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
8
|
var _draftJs = require("draft-js");
|
|
11
|
-
|
|
12
9
|
var _audioSelector = require("./selector/audio-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 AudioButton(props) {
|
|
19
13
|
const {
|
|
20
14
|
editorState,
|
|
@@ -23,37 +17,30 @@ function AudioButton(props) {
|
|
|
23
17
|
AudioSelector = _audioSelector.AudioSelector
|
|
24
18
|
} = props;
|
|
25
19
|
const [toShowAudioSelector, setToShowAudioSelector] = (0, _react.useState)(false);
|
|
26
|
-
|
|
27
20
|
const promptForAudioSelector = () => {
|
|
28
21
|
setToShowAudioSelector(true);
|
|
29
22
|
};
|
|
30
|
-
|
|
31
23
|
const onAudioSelectorChange = selectedAudiosWithMeta => {
|
|
32
24
|
var _selectedAudiosWithMe;
|
|
33
|
-
|
|
34
25
|
const audio = selectedAudiosWithMeta === null || selectedAudiosWithMeta === void 0 ? void 0 : (_selectedAudiosWithMe = selectedAudiosWithMeta[0]) === null || _selectedAudiosWithMe === void 0 ? void 0 : _selectedAudiosWithMe.audio;
|
|
35
|
-
|
|
36
26
|
if (!audio) {
|
|
37
27
|
setToShowAudioSelector(false);
|
|
38
28
|
return;
|
|
39
29
|
}
|
|
40
|
-
|
|
41
30
|
const contentState = editorState.getCurrentContent();
|
|
42
31
|
const contentStateWithEntity = contentState.createEntity('AUDIO', 'IMMUTABLE', {
|
|
43
32
|
audio
|
|
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
|
setToShowAudioSelector(false);
|
|
55
43
|
};
|
|
56
|
-
|
|
57
44
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowAudioSelector && /*#__PURE__*/_react.default.createElement(AudioSelector, {
|
|
58
45
|
onChange: onAudioSelectorChange
|
|
59
46
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -4,33 +4,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.BackgroundColorButton = BackgroundColorButton;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
8
|
var _modals = require("@keystone-ui/modals");
|
|
11
|
-
|
|
12
9
|
var _draftJs = require("draft-js");
|
|
13
|
-
|
|
14
10
|
var _fields = require("@keystone-ui/fields");
|
|
15
|
-
|
|
16
11
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
17
|
-
|
|
18
12
|
var _modifier = require("../modifier");
|
|
19
|
-
|
|
20
13
|
var _const = require("../const");
|
|
21
|
-
|
|
22
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
-
|
|
24
15
|
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); }
|
|
25
|
-
|
|
26
16
|
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; }
|
|
27
|
-
|
|
28
17
|
const ColorHexInput = (0, _styledComponents.default)(_fields.TextInput)`
|
|
29
18
|
font-family: Georgia, serif;
|
|
30
19
|
margin-right: 10px;
|
|
31
20
|
padding: 10px;
|
|
32
21
|
`;
|
|
33
|
-
|
|
34
22
|
function BackgroundColorButton(props) {
|
|
35
23
|
const {
|
|
36
24
|
isActive,
|
|
@@ -39,53 +27,40 @@ function BackgroundColorButton(props) {
|
|
|
39
27
|
} = props;
|
|
40
28
|
const [toShowColorInput, setToShowColorInput] = (0, _react.useState)(false);
|
|
41
29
|
const [colorValue, setColorValue] = (0, _react.useState)('');
|
|
42
|
-
|
|
43
30
|
const promptForColor = e => {
|
|
44
31
|
e.preventDefault();
|
|
45
32
|
const selection = editorState.getSelection();
|
|
46
|
-
|
|
47
33
|
if (!selection.isCollapsed()) {
|
|
48
34
|
setToShowColorInput(true);
|
|
49
35
|
}
|
|
50
36
|
};
|
|
51
|
-
|
|
52
37
|
const confirmColor = () => {
|
|
53
38
|
const selection = editorState.getSelection();
|
|
54
39
|
const contentState = editorState.getCurrentContent();
|
|
55
|
-
|
|
56
40
|
let newContentState = _modifier.Modifier.removeInlineStyleByPrefix(contentState, selection, _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR);
|
|
57
|
-
|
|
58
41
|
if (colorValue) {
|
|
59
42
|
newContentState = _modifier.Modifier.applyInlineStyle(newContentState, selection, _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR + colorValue);
|
|
60
43
|
}
|
|
61
|
-
|
|
62
44
|
onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-inline-style'));
|
|
63
45
|
setToShowColorInput(false);
|
|
64
46
|
setColorValue('');
|
|
65
47
|
};
|
|
66
|
-
|
|
67
48
|
const onColorInputKeyDown = e => {
|
|
68
49
|
if (e.which === 13) {
|
|
69
50
|
e.preventDefault();
|
|
70
51
|
confirmColor();
|
|
71
52
|
}
|
|
72
53
|
};
|
|
73
|
-
|
|
74
54
|
const removeColor = () => {
|
|
75
55
|
const selection = editorState.getSelection();
|
|
76
|
-
|
|
77
56
|
if (!selection.isCollapsed()) {
|
|
78
57
|
const contentState = editorState.getCurrentContent();
|
|
79
|
-
|
|
80
58
|
const newContentState = _modifier.Modifier.removeInlineStyleByPrefix(contentState, selection, _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR);
|
|
81
|
-
|
|
82
59
|
onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-inline-style'));
|
|
83
60
|
}
|
|
84
|
-
|
|
85
61
|
setToShowColorInput(false);
|
|
86
62
|
setColorValue('');
|
|
87
63
|
};
|
|
88
|
-
|
|
89
64
|
const colorInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
|
|
90
65
|
title: "Hex Color Code (#ffffff)",
|
|
91
66
|
isOpen: toShowColorInput,
|
|
@@ -105,7 +80,6 @@ function BackgroundColorButton(props) {
|
|
|
105
80
|
value: colorValue,
|
|
106
81
|
onKeyDown: onColorInputKeyDown
|
|
107
82
|
}));
|
|
108
|
-
|
|
109
83
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, colorInput, /*#__PURE__*/_react.default.createElement("div", {
|
|
110
84
|
className: props.className,
|
|
111
85
|
onMouseDown: isActive ? removeColor : promptForColor
|
|
@@ -5,29 +5,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.BGImageButton = BGImageButton;
|
|
7
7
|
exports.BGImageInput = BGImageInput;
|
|
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 _draftConverter = _interopRequireDefault(require("../draft-converter"));
|
|
18
|
-
|
|
19
13
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
20
|
-
|
|
21
14
|
var _imageSelector = require("./selector/image-selector");
|
|
22
|
-
|
|
23
15
|
var _alignSelector = require("./selector/align-selector");
|
|
24
|
-
|
|
25
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
26
|
-
|
|
27
17
|
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); }
|
|
28
|
-
|
|
29
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; }
|
|
30
|
-
|
|
31
19
|
const Label = _styledComponents.default.label`
|
|
32
20
|
display: block;
|
|
33
21
|
font-weight: 600;
|
|
@@ -37,10 +25,8 @@ const ImageInputText = _styledComponents.default.span`
|
|
|
37
25
|
display: inline-block;
|
|
38
26
|
margin-right: 10px;
|
|
39
27
|
`;
|
|
40
|
-
|
|
41
28
|
function BGImageInput(props) {
|
|
42
29
|
var _inputValue$image;
|
|
43
|
-
|
|
44
30
|
const {
|
|
45
31
|
isOpen,
|
|
46
32
|
onChange,
|
|
@@ -81,36 +67,33 @@ function BGImageInput(props) {
|
|
|
81
67
|
};
|
|
82
68
|
const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
|
|
83
69
|
const [toShowImageSelector, setToShowImageSelector] = (0, _react.useState)(false);
|
|
84
|
-
|
|
85
70
|
const clearInputValue = () => {
|
|
86
|
-
setInputValue(oldInputValue => ({
|
|
71
|
+
setInputValue(oldInputValue => ({
|
|
72
|
+
...oldInputValue,
|
|
87
73
|
editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)({
|
|
88
74
|
blocks: [],
|
|
89
75
|
entityMap: {}
|
|
90
76
|
}), decorators)
|
|
91
77
|
}));
|
|
92
78
|
};
|
|
93
|
-
|
|
94
79
|
const onImageSelectorChange = selectedImagesWithMeta => {
|
|
95
80
|
var _selectedImagesWithMe;
|
|
96
|
-
|
|
97
81
|
const image = selectedImagesWithMeta === null || selectedImagesWithMeta === void 0 ? void 0 : (_selectedImagesWithMe = selectedImagesWithMeta[0]) === null || _selectedImagesWithMe === void 0 ? void 0 : _selectedImagesWithMe.image;
|
|
98
|
-
|
|
99
82
|
if (!image) {
|
|
100
83
|
setToShowImageSelector(false);
|
|
101
84
|
return;
|
|
102
85
|
}
|
|
103
|
-
|
|
104
|
-
|
|
86
|
+
setInputValue(oldInputValue => ({
|
|
87
|
+
...oldInputValue,
|
|
105
88
|
image: image
|
|
106
89
|
}));
|
|
107
90
|
setToShowImageSelector(false);
|
|
108
91
|
};
|
|
109
|
-
|
|
110
92
|
const basicEditorJsx = renderBasicEditor({
|
|
111
93
|
editorState: inputValue.editorStateOfBasicEditor,
|
|
112
94
|
onChange: editorStateOfBasicEditor => {
|
|
113
|
-
setInputValue(oldInputValue => ({
|
|
95
|
+
setInputValue(oldInputValue => ({
|
|
96
|
+
...oldInputValue,
|
|
114
97
|
editorStateOfBasicEditor
|
|
115
98
|
}));
|
|
116
99
|
}
|
|
@@ -155,13 +138,13 @@ function BGImageInput(props) {
|
|
|
155
138
|
align: inputValue.textBlockAlign,
|
|
156
139
|
options: options,
|
|
157
140
|
onChange: textBlockAlign => {
|
|
158
|
-
setInputValue(oldInputValue => ({
|
|
141
|
+
setInputValue(oldInputValue => ({
|
|
142
|
+
...oldInputValue,
|
|
159
143
|
textBlockAlign
|
|
160
144
|
}));
|
|
161
145
|
}
|
|
162
146
|
}), /*#__PURE__*/_react.default.createElement(Label, null, "\u5167\u6587"), basicEditorJsx)));
|
|
163
147
|
}
|
|
164
|
-
|
|
165
148
|
function BGImageButton(props) {
|
|
166
149
|
const [toShowInput, setToShowInput] = (0, _react.useState)(false);
|
|
167
150
|
const {
|
|
@@ -171,14 +154,14 @@ function BGImageButton(props) {
|
|
|
171
154
|
ImageSelector,
|
|
172
155
|
renderBasicEditor
|
|
173
156
|
} = props;
|
|
174
|
-
|
|
175
157
|
const onChange = ({
|
|
176
158
|
textBlockAlign,
|
|
177
159
|
image,
|
|
178
160
|
rawContentState
|
|
179
161
|
}) => {
|
|
180
|
-
const contentState = editorState.getCurrentContent();
|
|
162
|
+
const contentState = editorState.getCurrentContent();
|
|
181
163
|
|
|
164
|
+
// create an BGImage entity
|
|
182
165
|
const contentStateWithEntity = contentState.createEntity('BACKGROUNDIMAGE', 'IMMUTABLE', {
|
|
183
166
|
textBlockAlign,
|
|
184
167
|
image,
|
|
@@ -186,17 +169,15 @@ function BGImageButton(props) {
|
|
|
186
169
|
body: _draftConverter.default.convertToHtml(rawContentState)
|
|
187
170
|
});
|
|
188
171
|
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
|
|
189
|
-
|
|
190
172
|
const newEditorState = _draftJs.EditorState.set(editorState, {
|
|
191
173
|
currentContent: contentStateWithEntity
|
|
192
|
-
});
|
|
193
|
-
//If you set an empty string, you will get an error: Unknown DraftEntity key: null
|
|
194
|
-
|
|
174
|
+
});
|
|
195
175
|
|
|
176
|
+
//The third parameter here is a space string, not an empty string
|
|
177
|
+
//If you set an empty string, you will get an error: Unknown DraftEntity key: null
|
|
196
178
|
onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
|
|
197
179
|
setToShowInput(false);
|
|
198
180
|
};
|
|
199
|
-
|
|
200
181
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BGImageInput, {
|
|
201
182
|
renderBasicEditor: renderBasicEditor,
|
|
202
183
|
onChange: onChange,
|
|
@@ -5,29 +5,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.BGVideoButton = BGVideoButton;
|
|
7
7
|
exports.BGVideoInput = BGVideoInput;
|
|
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 _draftConverter = _interopRequireDefault(require("../draft-converter"));
|
|
18
|
-
|
|
19
13
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
20
|
-
|
|
21
14
|
var _videoSelector = require("./selector/video-selector");
|
|
22
|
-
|
|
23
15
|
var _alignSelector = require("./selector/align-selector");
|
|
24
|
-
|
|
25
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
26
|
-
|
|
27
17
|
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); }
|
|
28
|
-
|
|
29
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; }
|
|
30
|
-
|
|
31
19
|
const Label = _styledComponents.default.label`
|
|
32
20
|
display: block;
|
|
33
21
|
font-weight: 600;
|
|
@@ -37,10 +25,8 @@ const VideoInputText = _styledComponents.default.span`
|
|
|
37
25
|
display: inline-block;
|
|
38
26
|
margin-right: 10px;
|
|
39
27
|
`;
|
|
40
|
-
|
|
41
28
|
function BGVideoInput(props) {
|
|
42
29
|
var _inputValue$video;
|
|
43
|
-
|
|
44
30
|
const {
|
|
45
31
|
isOpen,
|
|
46
32
|
onChange,
|
|
@@ -81,36 +67,33 @@ function BGVideoInput(props) {
|
|
|
81
67
|
};
|
|
82
68
|
const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
|
|
83
69
|
const [toShowVideoSelector, setToShowVideoSelector] = (0, _react.useState)(false);
|
|
84
|
-
|
|
85
70
|
const clearInputValue = () => {
|
|
86
|
-
setInputValue(oldInputValue => ({
|
|
71
|
+
setInputValue(oldInputValue => ({
|
|
72
|
+
...oldInputValue,
|
|
87
73
|
editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)({
|
|
88
74
|
blocks: [],
|
|
89
75
|
entityMap: {}
|
|
90
76
|
}), decorators)
|
|
91
77
|
}));
|
|
92
78
|
};
|
|
93
|
-
|
|
94
79
|
const onVideoSelectorChange = selectedVideosWithMeta => {
|
|
95
80
|
var _selectedVideosWithMe;
|
|
96
|
-
|
|
97
81
|
const video = selectedVideosWithMeta === null || selectedVideosWithMeta === void 0 ? void 0 : (_selectedVideosWithMe = selectedVideosWithMeta[0]) === null || _selectedVideosWithMe === void 0 ? void 0 : _selectedVideosWithMe.video;
|
|
98
|
-
|
|
99
82
|
if (!video) {
|
|
100
83
|
setToShowVideoSelector(false);
|
|
101
84
|
return;
|
|
102
85
|
}
|
|
103
|
-
|
|
104
|
-
|
|
86
|
+
setInputValue(oldInputValue => ({
|
|
87
|
+
...oldInputValue,
|
|
105
88
|
video: video
|
|
106
89
|
}));
|
|
107
90
|
setToShowVideoSelector(false);
|
|
108
91
|
};
|
|
109
|
-
|
|
110
92
|
const basicEditorJsx = renderBasicEditor({
|
|
111
93
|
editorState: inputValue.editorStateOfBasicEditor,
|
|
112
94
|
onChange: editorStateOfBasicEditor => {
|
|
113
|
-
setInputValue(oldInputValue => ({
|
|
95
|
+
setInputValue(oldInputValue => ({
|
|
96
|
+
...oldInputValue,
|
|
114
97
|
editorStateOfBasicEditor
|
|
115
98
|
}));
|
|
116
99
|
}
|
|
@@ -155,13 +138,13 @@ function BGVideoInput(props) {
|
|
|
155
138
|
align: inputValue.textBlockAlign,
|
|
156
139
|
options: options,
|
|
157
140
|
onChange: textBlockAlign => {
|
|
158
|
-
setInputValue(oldInputValue => ({
|
|
141
|
+
setInputValue(oldInputValue => ({
|
|
142
|
+
...oldInputValue,
|
|
159
143
|
textBlockAlign
|
|
160
144
|
}));
|
|
161
145
|
}
|
|
162
146
|
}), /*#__PURE__*/_react.default.createElement(Label, null, "\u5167\u6587"), basicEditorJsx)));
|
|
163
147
|
}
|
|
164
|
-
|
|
165
148
|
function BGVideoButton(props) {
|
|
166
149
|
const [toShowInput, setToShowInput] = (0, _react.useState)(false);
|
|
167
150
|
const {
|
|
@@ -171,14 +154,14 @@ function BGVideoButton(props) {
|
|
|
171
154
|
VideoSelector,
|
|
172
155
|
renderBasicEditor
|
|
173
156
|
} = props;
|
|
174
|
-
|
|
175
157
|
const onChange = ({
|
|
176
158
|
textBlockAlign,
|
|
177
159
|
video,
|
|
178
160
|
rawContentState
|
|
179
161
|
}) => {
|
|
180
|
-
const contentState = editorState.getCurrentContent();
|
|
162
|
+
const contentState = editorState.getCurrentContent();
|
|
181
163
|
|
|
164
|
+
// create an BGVideo entity
|
|
182
165
|
const contentStateWithEntity = contentState.createEntity('BACKGROUNDVIDEO', 'IMMUTABLE', {
|
|
183
166
|
textBlockAlign,
|
|
184
167
|
video,
|
|
@@ -186,17 +169,15 @@ function BGVideoButton(props) {
|
|
|
186
169
|
body: _draftConverter.default.convertToHtml(rawContentState)
|
|
187
170
|
});
|
|
188
171
|
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
|
|
189
|
-
|
|
190
172
|
const newEditorState = _draftJs.EditorState.set(editorState, {
|
|
191
173
|
currentContent: contentStateWithEntity
|
|
192
|
-
});
|
|
193
|
-
//If you set an empty string, you will get an error: Unknown DraftEntity key: null
|
|
194
|
-
|
|
174
|
+
});
|
|
195
175
|
|
|
176
|
+
//The third parameter here is a space string, not an empty string
|
|
177
|
+
//If you set an empty string, you will get an error: Unknown DraftEntity key: null
|
|
196
178
|
onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
|
|
197
179
|
setToShowInput(false);
|
|
198
180
|
};
|
|
199
|
-
|
|
200
181
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BGVideoInput, {
|
|
201
182
|
renderBasicEditor: renderBasicEditor,
|
|
202
183
|
onChange: onChange,
|
|
@@ -5,25 +5,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.ColorBoxButton = ColorBoxButton;
|
|
7
7
|
exports.ColorBoxInput = ColorBoxInput;
|
|
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 _fields = require("@keystone-ui/fields");
|
|
16
|
-
|
|
17
12
|
var _draftConverter = _interopRequireDefault(require("../draft-converter"));
|
|
18
|
-
|
|
19
13
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
20
|
-
|
|
21
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
22
|
-
|
|
23
15
|
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); }
|
|
24
|
-
|
|
25
16
|
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; }
|
|
26
|
-
|
|
27
17
|
const Label = _styledComponents.default.label`
|
|
28
18
|
display: block;
|
|
29
19
|
font-weight: 600;
|
|
@@ -32,7 +22,6 @@ const Label = _styledComponents.default.label`
|
|
|
32
22
|
const ColorHexInput = (0, _styledComponents.default)(_fields.TextInput)`
|
|
33
23
|
margin-bottom: 10px;
|
|
34
24
|
`;
|
|
35
|
-
|
|
36
25
|
function ColorBoxInput(props) {
|
|
37
26
|
const {
|
|
38
27
|
isOpen,
|
|
@@ -53,7 +42,6 @@ function ColorBoxInput(props) {
|
|
|
53
42
|
editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(rawContentState), decorators)
|
|
54
43
|
};
|
|
55
44
|
const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
|
|
56
|
-
|
|
57
45
|
const clearInputValue = () => {
|
|
58
46
|
setInputValue({
|
|
59
47
|
color: '',
|
|
@@ -63,7 +51,6 @@ function ColorBoxInput(props) {
|
|
|
63
51
|
}), decorators)
|
|
64
52
|
});
|
|
65
53
|
};
|
|
66
|
-
|
|
67
54
|
(0, _react.useEffect)(() => {
|
|
68
55
|
if (isOpen) {
|
|
69
56
|
setInputValue(initialInputValue);
|
|
@@ -112,7 +99,6 @@ function ColorBoxInput(props) {
|
|
|
112
99
|
value: inputValue.color
|
|
113
100
|
}), /*#__PURE__*/_react.default.createElement(Label, null, "\u5167\u6587"), basicEditorJsx));
|
|
114
101
|
}
|
|
115
|
-
|
|
116
102
|
function ColorBoxButton(props) {
|
|
117
103
|
const [toShowInput, setToShowInput] = (0, _react.useState)(false);
|
|
118
104
|
const {
|
|
@@ -121,30 +107,28 @@ function ColorBoxButton(props) {
|
|
|
121
107
|
onChange: onEditorStateChange,
|
|
122
108
|
renderBasicEditor
|
|
123
109
|
} = props;
|
|
124
|
-
|
|
125
110
|
const onChange = ({
|
|
126
111
|
color,
|
|
127
112
|
rawContentState
|
|
128
113
|
}) => {
|
|
129
|
-
const contentState = editorState.getCurrentContent();
|
|
114
|
+
const contentState = editorState.getCurrentContent();
|
|
130
115
|
|
|
116
|
+
// create an ColorBox entity
|
|
131
117
|
const contentStateWithEntity = contentState.createEntity('COLORBOX', 'IMMUTABLE', {
|
|
132
118
|
color,
|
|
133
119
|
rawContentState,
|
|
134
120
|
body: _draftConverter.default.convertToHtml(rawContentState)
|
|
135
121
|
});
|
|
136
122
|
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
|
|
137
|
-
|
|
138
123
|
const newEditorState = _draftJs.EditorState.set(editorState, {
|
|
139
124
|
currentContent: contentStateWithEntity
|
|
140
|
-
});
|
|
141
|
-
//If you set an empty string, you will get an error: Unknown DraftEntity key: null
|
|
142
|
-
|
|
125
|
+
});
|
|
143
126
|
|
|
127
|
+
//The third parameter here is a space string, not an empty string
|
|
128
|
+
//If you set an empty string, you will get an error: Unknown DraftEntity key: null
|
|
144
129
|
onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
|
|
145
130
|
setToShowInput(false);
|
|
146
131
|
};
|
|
147
|
-
|
|
148
132
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ColorBoxInput, {
|
|
149
133
|
renderBasicEditor: renderBasicEditor,
|
|
150
134
|
onChange: onChange,
|
|
@@ -4,42 +4,33 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.DividerButton = DividerButton;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
8
|
var _draftJs = require("draft-js");
|
|
11
|
-
|
|
12
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
-
|
|
14
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
11
|
const IconWrapper = _styledComponents.default.span`
|
|
17
12
|
display: inline-block;
|
|
18
13
|
position: relative;
|
|
19
14
|
top: 2px;
|
|
20
15
|
`;
|
|
21
|
-
|
|
22
16
|
function DividerButton(props) {
|
|
23
17
|
const {
|
|
24
18
|
editorState,
|
|
25
19
|
onChange,
|
|
26
20
|
className
|
|
27
21
|
} = props;
|
|
28
|
-
|
|
29
22
|
const onClick = () => {
|
|
30
23
|
const contentState = editorState.getCurrentContent();
|
|
31
24
|
const contentStateWithEntity = contentState.createEntity('DIVIDER', 'IMMUTABLE', {});
|
|
32
25
|
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
|
|
33
|
-
|
|
34
26
|
const newEditorState = _draftJs.EditorState.set(editorState, {
|
|
35
27
|
currentContent: contentStateWithEntity
|
|
36
|
-
});
|
|
37
|
-
// If you set an empty string, you will get an error: Unknown DraftEntity key: null
|
|
38
|
-
|
|
28
|
+
});
|
|
39
29
|
|
|
30
|
+
// The third parameter here is a space string, not an empty string
|
|
31
|
+
// If you set an empty string, you will get an error: Unknown DraftEntity key: null
|
|
40
32
|
onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
|
|
41
33
|
};
|
|
42
|
-
|
|
43
34
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
44
35
|
onClick: onClick,
|
|
45
36
|
className: className
|