@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,12 +4,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.EmbeddedCodeButton = EmbeddedCodeButton;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
8
10
|
var _draftJs = require("draft-js");
|
|
11
|
+
|
|
9
12
|
var _modals = require("@keystone-ui/modals");
|
|
13
|
+
|
|
10
14
|
var _fields = require("@keystone-ui/fields");
|
|
15
|
+
|
|
11
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
|
+
|
|
12
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
|
+
|
|
13
20
|
function EmbeddedCodeButton(props) {
|
|
14
21
|
const {
|
|
15
22
|
editorState,
|
|
@@ -21,6 +28,7 @@ function EmbeddedCodeButton(props) {
|
|
|
21
28
|
caption: '',
|
|
22
29
|
embeddedCode: ''
|
|
23
30
|
});
|
|
31
|
+
|
|
24
32
|
const promptForInput = () => {
|
|
25
33
|
setToShowInput(true);
|
|
26
34
|
setInputValue({
|
|
@@ -28,16 +36,18 @@ function EmbeddedCodeButton(props) {
|
|
|
28
36
|
embeddedCode: ''
|
|
29
37
|
});
|
|
30
38
|
};
|
|
39
|
+
|
|
31
40
|
const confirmInput = () => {
|
|
32
41
|
const contentState = editorState.getCurrentContent();
|
|
33
42
|
const contentStateWithEntity = contentState.createEntity('EMBEDDEDCODE', 'IMMUTABLE', inputValue);
|
|
34
43
|
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
|
|
44
|
+
|
|
35
45
|
const newEditorState = _draftJs.EditorState.set(editorState, {
|
|
36
46
|
currentContent: contentStateWithEntity
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
// The third parameter here is a space string, not an empty string
|
|
47
|
+
}); // The third parameter here is a space string, not an empty string
|
|
40
48
|
// If you set an empty string, you will get an error: Unknown DraftEntity key: null
|
|
49
|
+
|
|
50
|
+
|
|
41
51
|
onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
|
|
42
52
|
setToShowInput(false);
|
|
43
53
|
setInputValue({
|
|
@@ -45,11 +55,11 @@ function EmbeddedCodeButton(props) {
|
|
|
45
55
|
embeddedCode: ''
|
|
46
56
|
});
|
|
47
57
|
};
|
|
58
|
+
|
|
48
59
|
const input = /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
|
|
49
60
|
isOpen: toShowInput
|
|
50
61
|
}, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
|
|
51
|
-
title: `Insert Embedded Code`
|
|
52
|
-
//isOpen={toShowInput}
|
|
62
|
+
title: `Insert Embedded Code` //isOpen={toShowInput}
|
|
53
63
|
,
|
|
54
64
|
actions: {
|
|
55
65
|
cancel: {
|
|
@@ -87,6 +97,7 @@ function EmbeddedCodeButton(props) {
|
|
|
87
97
|
marginBottom: '30px'
|
|
88
98
|
}
|
|
89
99
|
})));
|
|
100
|
+
|
|
90
101
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, input, /*#__PURE__*/_react.default.createElement("div", {
|
|
91
102
|
onClick: () => {
|
|
92
103
|
promptForInput();
|
|
@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.EnlargeButton = EnlargeButton;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
8
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
|
|
9
12
|
function EnlargeButton(props) {
|
|
10
13
|
const {
|
|
11
14
|
onToggle,
|
|
@@ -4,21 +4,33 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.FontColorButton = FontColorButton;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
8
10
|
var _modals = require("@keystone-ui/modals");
|
|
11
|
+
|
|
9
12
|
var _draftJs = require("draft-js");
|
|
13
|
+
|
|
10
14
|
var _fields = require("@keystone-ui/fields");
|
|
15
|
+
|
|
11
16
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
17
|
+
|
|
12
18
|
var _modifier = require("../modifier");
|
|
19
|
+
|
|
13
20
|
var _const = require("../const");
|
|
21
|
+
|
|
14
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
+
|
|
15
24
|
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
|
+
|
|
16
26
|
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
|
+
|
|
17
28
|
const ColorHexInput = (0, _styledComponents.default)(_fields.TextInput)`
|
|
18
29
|
font-family: Georgia, serif;
|
|
19
30
|
margin-right: 10px;
|
|
20
31
|
padding: 10px;
|
|
21
32
|
`;
|
|
33
|
+
|
|
22
34
|
function FontColorButton(props) {
|
|
23
35
|
const {
|
|
24
36
|
isActive,
|
|
@@ -27,40 +39,53 @@ function FontColorButton(props) {
|
|
|
27
39
|
} = props;
|
|
28
40
|
const [toShowColorInput, setToShowColorInput] = (0, _react.useState)(false);
|
|
29
41
|
const [colorValue, setColorValue] = (0, _react.useState)('');
|
|
42
|
+
|
|
30
43
|
const promptForColor = e => {
|
|
31
44
|
e.preventDefault();
|
|
32
45
|
const selection = editorState.getSelection();
|
|
46
|
+
|
|
33
47
|
if (!selection.isCollapsed()) {
|
|
34
48
|
setToShowColorInput(true);
|
|
35
49
|
}
|
|
36
50
|
};
|
|
51
|
+
|
|
37
52
|
const confirmColor = () => {
|
|
38
53
|
const selection = editorState.getSelection();
|
|
39
54
|
const contentState = editorState.getCurrentContent();
|
|
55
|
+
|
|
40
56
|
let newContentState = _modifier.Modifier.removeInlineStyleByPrefix(contentState, selection, _const.CUSTOM_STYLE_PREFIX_FONT_COLOR);
|
|
57
|
+
|
|
41
58
|
if (colorValue) {
|
|
42
59
|
newContentState = _modifier.Modifier.applyInlineStyle(newContentState, selection, _const.CUSTOM_STYLE_PREFIX_FONT_COLOR + colorValue);
|
|
43
60
|
}
|
|
61
|
+
|
|
44
62
|
onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-inline-style'));
|
|
45
63
|
setToShowColorInput(false);
|
|
46
64
|
setColorValue('');
|
|
47
65
|
};
|
|
66
|
+
|
|
48
67
|
const onColorInputKeyDown = e => {
|
|
49
68
|
if (e.which === 13) {
|
|
50
69
|
e.preventDefault();
|
|
51
70
|
confirmColor();
|
|
52
71
|
}
|
|
53
72
|
};
|
|
73
|
+
|
|
54
74
|
const removeColor = () => {
|
|
55
75
|
const selection = editorState.getSelection();
|
|
76
|
+
|
|
56
77
|
if (!selection.isCollapsed()) {
|
|
57
78
|
const contentState = editorState.getCurrentContent();
|
|
79
|
+
|
|
58
80
|
const newContentState = _modifier.Modifier.removeInlineStyleByPrefix(contentState, selection, _const.CUSTOM_STYLE_PREFIX_FONT_COLOR);
|
|
81
|
+
|
|
59
82
|
onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-inline-style'));
|
|
60
83
|
}
|
|
84
|
+
|
|
61
85
|
setToShowColorInput(false);
|
|
62
86
|
setColorValue('');
|
|
63
87
|
};
|
|
88
|
+
|
|
64
89
|
const colorInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
|
|
65
90
|
title: "Hex Color Code (#ffffff)",
|
|
66
91
|
isOpen: toShowColorInput,
|
|
@@ -80,6 +105,7 @@ function FontColorButton(props) {
|
|
|
80
105
|
value: colorValue,
|
|
81
106
|
onKeyDown: onColorInputKeyDown
|
|
82
107
|
}));
|
|
108
|
+
|
|
83
109
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, colorInput, /*#__PURE__*/_react.default.createElement("div", {
|
|
84
110
|
className: props.className,
|
|
85
111
|
onMouseDown: isActive ? removeColor : promptForColor
|
|
@@ -4,11 +4,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.ImageButton = ImageButton;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
8
10
|
var _draftJs = require("draft-js");
|
|
11
|
+
|
|
9
12
|
var _imageSelector = require("./selector/image-selector");
|
|
13
|
+
|
|
10
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); }
|
|
15
|
+
|
|
11
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; }
|
|
17
|
+
|
|
12
18
|
function ImageButton(props) {
|
|
13
19
|
const {
|
|
14
20
|
editorState,
|
|
@@ -17,32 +23,37 @@ function ImageButton(props) {
|
|
|
17
23
|
ImageSelector = _imageSelector.ImageSelector
|
|
18
24
|
} = props;
|
|
19
25
|
const [toShowImageSelector, setToShowImageSelector] = (0, _react.useState)(false);
|
|
26
|
+
|
|
20
27
|
const promptForImageSelector = () => {
|
|
21
28
|
setToShowImageSelector(true);
|
|
22
29
|
};
|
|
30
|
+
|
|
23
31
|
const onImageSelectorChange = (selectedImagesWithMeta, align) => {
|
|
24
32
|
const selected = selectedImagesWithMeta === null || selectedImagesWithMeta === void 0 ? void 0 : selectedImagesWithMeta[0];
|
|
33
|
+
|
|
25
34
|
if (!selected) {
|
|
26
35
|
setToShowImageSelector(false);
|
|
27
36
|
return;
|
|
28
37
|
}
|
|
38
|
+
|
|
29
39
|
const contentState = editorState.getCurrentContent();
|
|
30
|
-
const contentStateWithEntity = contentState.createEntity('image', 'IMMUTABLE', {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
url: selected === null || selected === void 0 ? void 0 : selected.url,
|
|
40
|
+
const contentStateWithEntity = contentState.createEntity('image', 'IMMUTABLE', { ...selected.image,
|
|
41
|
+
desc: selected.desc,
|
|
42
|
+
url: selected.url,
|
|
34
43
|
alignment: align
|
|
35
44
|
});
|
|
36
45
|
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
|
|
46
|
+
|
|
37
47
|
const newEditorState = _draftJs.EditorState.set(editorState, {
|
|
38
48
|
currentContent: contentStateWithEntity
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
// The third parameter here is a space string, not an empty string
|
|
49
|
+
}); // The third parameter here is a space string, not an empty string
|
|
42
50
|
// If you set an empty string, you will get an error: Unknown DraftEntity key: null
|
|
51
|
+
|
|
52
|
+
|
|
43
53
|
onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
|
|
44
54
|
setToShowImageSelector(false);
|
|
45
55
|
};
|
|
56
|
+
|
|
46
57
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowImageSelector && /*#__PURE__*/_react.default.createElement(ImageSelector, {
|
|
47
58
|
onChange: onImageSelectorChange,
|
|
48
59
|
enableCaption: true,
|
|
@@ -5,19 +5,30 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.InfoBoxButton = InfoBoxButton;
|
|
7
7
|
exports.InfoBoxInput = InfoBoxInput;
|
|
8
|
+
|
|
8
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
|
|
9
11
|
var _draftJs = require("draft-js");
|
|
12
|
+
|
|
10
13
|
var _modals = require("@keystone-ui/modals");
|
|
14
|
+
|
|
11
15
|
var _fields = require("@keystone-ui/fields");
|
|
16
|
+
|
|
12
17
|
var _draftConverter = _interopRequireDefault(require("../draft-converter"));
|
|
18
|
+
|
|
13
19
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
20
|
+
|
|
14
21
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
22
|
+
|
|
15
23
|
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
|
+
|
|
16
25
|
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
|
+
|
|
17
27
|
const TitleInput = (0, _styledComponents.default)(_fields.TextInput)`
|
|
18
28
|
margin-top: 30px;
|
|
19
29
|
margin-bottom: 10px;
|
|
20
30
|
`;
|
|
31
|
+
|
|
21
32
|
function InfoBoxInput(props) {
|
|
22
33
|
const {
|
|
23
34
|
isOpen,
|
|
@@ -38,9 +49,11 @@ function InfoBoxInput(props) {
|
|
|
38
49
|
editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(rawContentState), decorators)
|
|
39
50
|
};
|
|
40
51
|
const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
|
|
52
|
+
|
|
41
53
|
const clearInputValue = () => {
|
|
42
54
|
setInputValue(initialInputValue);
|
|
43
55
|
};
|
|
56
|
+
|
|
44
57
|
const basicEditorJsx = renderBasicEditor({
|
|
45
58
|
editorState: inputValue.editorStateOfBasicEditor,
|
|
46
59
|
onChange: editorStateOfBasicEditor => {
|
|
@@ -84,6 +97,7 @@ function InfoBoxInput(props) {
|
|
|
84
97
|
value: inputValue.title
|
|
85
98
|
}), basicEditorJsx));
|
|
86
99
|
}
|
|
100
|
+
|
|
87
101
|
function InfoBoxButton(props) {
|
|
88
102
|
const [toShowInput, setToShowInput] = (0, _react.useState)(false);
|
|
89
103
|
const {
|
|
@@ -92,28 +106,30 @@ function InfoBoxButton(props) {
|
|
|
92
106
|
onChange: onEditorStateChange,
|
|
93
107
|
renderBasicEditor
|
|
94
108
|
} = props;
|
|
109
|
+
|
|
95
110
|
const onChange = ({
|
|
96
111
|
title,
|
|
97
112
|
rawContentState
|
|
98
113
|
}) => {
|
|
99
|
-
const contentState = editorState.getCurrentContent();
|
|
114
|
+
const contentState = editorState.getCurrentContent(); // create an InfoBox entity
|
|
100
115
|
|
|
101
|
-
// create an InfoBox entity
|
|
102
116
|
const contentStateWithEntity = contentState.createEntity('INFOBOX', 'IMMUTABLE', {
|
|
103
117
|
title,
|
|
104
118
|
rawContentState,
|
|
105
119
|
body: _draftConverter.default.convertToHtml(rawContentState)
|
|
106
120
|
});
|
|
107
121
|
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
|
|
122
|
+
|
|
108
123
|
const newEditorState = _draftJs.EditorState.set(editorState, {
|
|
109
124
|
currentContent: contentStateWithEntity
|
|
110
|
-
});
|
|
111
|
-
|
|
112
|
-
//The third parameter here is a space string, not an empty string
|
|
125
|
+
}); //The third parameter here is a space string, not an empty string
|
|
113
126
|
//If you set an empty string, you will get an error: Unknown DraftEntity key: null
|
|
127
|
+
|
|
128
|
+
|
|
114
129
|
onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
|
|
115
130
|
setToShowInput(false);
|
|
116
131
|
};
|
|
132
|
+
|
|
117
133
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(InfoBoxInput, {
|
|
118
134
|
renderBasicEditor: renderBasicEditor,
|
|
119
135
|
onChange: onChange,
|
|
@@ -4,64 +4,104 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.LinkButton = LinkButton;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
+
|
|
8
12
|
var _modals = require("@keystone-ui/modals");
|
|
13
|
+
|
|
9
14
|
var _draftJs = require("draft-js");
|
|
15
|
+
|
|
10
16
|
var _fields = require("@keystone-ui/fields");
|
|
17
|
+
|
|
18
|
+
var _util = require("../util");
|
|
19
|
+
|
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
+
|
|
11
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
|
+
|
|
12
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; }
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
25
|
+
|
|
26
|
+
const StyledTextInput = (0, _styledComponents.default)(_fields.TextInput)`
|
|
27
|
+
fontfamily: Georgia, serif;
|
|
28
|
+
marginright: 10;
|
|
29
|
+
padding: 10;
|
|
30
|
+
`;
|
|
31
|
+
|
|
20
32
|
function LinkButton(props) {
|
|
21
33
|
const {
|
|
22
|
-
isActive,
|
|
23
34
|
editorState,
|
|
24
35
|
onChange
|
|
25
36
|
} = props;
|
|
37
|
+
const entityData = (0, _util.getSelectionEntityData)(editorState);
|
|
38
|
+
const url = (entityData === null || entityData === void 0 ? void 0 : entityData.url) || '';
|
|
39
|
+
(0, _react.useEffect)(() => {
|
|
40
|
+
setLinkUrl(url);
|
|
41
|
+
}, [url]);
|
|
26
42
|
const [toShowUrlInput, setToShowUrlInput] = (0, _react.useState)(false);
|
|
27
|
-
const [
|
|
43
|
+
const [linkUrl, setLinkUrl] = (0, _react.useState)(url || '');
|
|
44
|
+
|
|
28
45
|
const promptForLink = e => {
|
|
29
46
|
e.preventDefault();
|
|
30
47
|
const selection = editorState.getSelection();
|
|
48
|
+
|
|
31
49
|
if (!selection.isCollapsed()) {
|
|
32
50
|
setToShowUrlInput(true);
|
|
33
51
|
}
|
|
34
52
|
};
|
|
53
|
+
|
|
35
54
|
const confirmLink = () => {
|
|
36
55
|
const contentState = editorState.getCurrentContent();
|
|
37
56
|
const contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {
|
|
38
|
-
url:
|
|
57
|
+
url: linkUrl
|
|
39
58
|
});
|
|
40
59
|
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
|
|
60
|
+
|
|
41
61
|
const newEditorState = _draftJs.EditorState.set(editorState, {
|
|
42
62
|
currentContent: contentStateWithEntity
|
|
43
63
|
});
|
|
44
|
-
|
|
64
|
+
|
|
65
|
+
const selection = newEditorState.getSelection(); // RichUtils.toggleLink will reset selection back to first block and cause
|
|
66
|
+
// the editor scroll to top. Use `forceSelection` to hold the selection.
|
|
67
|
+
|
|
68
|
+
onChange(_draftJs.EditorState.forceSelection(_draftJs.RichUtils.toggleLink(newEditorState, selection, entityKey), selection));
|
|
45
69
|
setToShowUrlInput(false);
|
|
46
|
-
setUrlValue('');
|
|
47
70
|
};
|
|
71
|
+
|
|
48
72
|
const onLinkInputKeyDown = e => {
|
|
49
73
|
if (e.which === 13) {
|
|
50
74
|
e.preventDefault();
|
|
51
75
|
confirmLink();
|
|
52
76
|
}
|
|
53
77
|
};
|
|
78
|
+
|
|
54
79
|
const removeLink = () => {
|
|
55
80
|
const selection = editorState.getSelection();
|
|
81
|
+
|
|
56
82
|
if (!selection.isCollapsed()) {
|
|
57
|
-
|
|
83
|
+
// RichUtils.toggleLink will reset selection back to first block and cause
|
|
84
|
+
// the editor scroll to top. Use `forceSelection` to hold the selection.
|
|
85
|
+
onChange(_draftJs.EditorState.forceSelection(_draftJs.RichUtils.toggleLink(editorState, selection, null), selection));
|
|
58
86
|
}
|
|
87
|
+
|
|
59
88
|
setToShowUrlInput(false);
|
|
60
|
-
setUrlValue('');
|
|
61
89
|
};
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
90
|
+
|
|
91
|
+
const alertProps = linkUrl ? {
|
|
92
|
+
title: 'Update Link',
|
|
93
|
+
actions: {
|
|
94
|
+
cancel: {
|
|
95
|
+
label: 'Remove',
|
|
96
|
+
action: removeLink
|
|
97
|
+
},
|
|
98
|
+
confirm: {
|
|
99
|
+
label: 'Update',
|
|
100
|
+
action: confirmLink
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
} : {
|
|
104
|
+
title: 'Insert Link',
|
|
65
105
|
actions: {
|
|
66
106
|
cancel: {
|
|
67
107
|
label: 'Cancel',
|
|
@@ -72,16 +112,22 @@ function LinkButton(props) {
|
|
|
72
112
|
action: confirmLink
|
|
73
113
|
}
|
|
74
114
|
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
const urlInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
|
|
118
|
+
title: alertProps.title,
|
|
119
|
+
isOpen: toShowUrlInput,
|
|
120
|
+
actions: alertProps.actions
|
|
121
|
+
}, /*#__PURE__*/_react.default.createElement(StyledTextInput, {
|
|
122
|
+
onChange: e => setLinkUrl(e.target.value),
|
|
123
|
+
value: linkUrl,
|
|
78
124
|
type: "text",
|
|
79
|
-
value: urlValue,
|
|
80
125
|
onKeyDown: onLinkInputKeyDown
|
|
81
126
|
}));
|
|
127
|
+
|
|
82
128
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, urlInput, /*#__PURE__*/_react.default.createElement("div", {
|
|
83
129
|
className: props.className,
|
|
84
|
-
onMouseDown:
|
|
130
|
+
onMouseDown: promptForLink
|
|
85
131
|
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
86
132
|
className: "fas fa-link"
|
|
87
133
|
})));
|
|
@@ -4,12 +4,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.MediaButton = MediaButton;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
8
10
|
var _modals = require("@keystone-ui/modals");
|
|
11
|
+
|
|
9
12
|
var _draftJs = require("draft-js");
|
|
13
|
+
|
|
10
14
|
var _fields = require("@keystone-ui/fields");
|
|
15
|
+
|
|
11
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
|
+
|
|
12
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
|
+
|
|
13
20
|
const styles = {
|
|
14
21
|
buttons: {
|
|
15
22
|
marginBottom: 10,
|
|
@@ -29,6 +36,7 @@ const styles = {
|
|
|
29
36
|
cursor: 'pointer'
|
|
30
37
|
}
|
|
31
38
|
};
|
|
39
|
+
|
|
32
40
|
function MediaButton(props) {
|
|
33
41
|
const {
|
|
34
42
|
editorState,
|
|
@@ -38,27 +46,31 @@ function MediaButton(props) {
|
|
|
38
46
|
const [toShowUrlInput, setToShowUrlInput] = (0, _react.useState)(false);
|
|
39
47
|
const [urlValue, setUrlValue] = (0, _react.useState)('');
|
|
40
48
|
const [urlType, setUrlType] = (0, _react.useState)('');
|
|
49
|
+
|
|
41
50
|
const promptForMedia = mediaType => {
|
|
42
51
|
setToShowUrlInput(true);
|
|
43
52
|
setUrlValue('');
|
|
44
53
|
setUrlType(mediaType);
|
|
45
54
|
};
|
|
55
|
+
|
|
46
56
|
const confirmMedia = () => {
|
|
47
57
|
const contentState = editorState.getCurrentContent();
|
|
48
58
|
const contentStateWithEntity = contentState.createEntity(urlType, 'IMMUTABLE', {
|
|
49
59
|
src: urlValue
|
|
50
60
|
});
|
|
51
61
|
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
|
|
62
|
+
|
|
52
63
|
const newEditorState = _draftJs.EditorState.set(editorState, {
|
|
53
64
|
currentContent: contentStateWithEntity
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
// The third parameter here is a space string, not an empty string
|
|
65
|
+
}); // The third parameter here is a space string, not an empty string
|
|
57
66
|
// If you set an empty string, you will get an error: Unknown DraftEntity key: null
|
|
67
|
+
|
|
68
|
+
|
|
58
69
|
onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
|
|
59
70
|
setToShowUrlInput(false);
|
|
60
71
|
setUrlType('');
|
|
61
72
|
};
|
|
73
|
+
|
|
62
74
|
const urlInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
|
|
63
75
|
title: `Insert ${urlType.toUpperCase()} LINK`,
|
|
64
76
|
isOpen: toShowUrlInput,
|
|
@@ -81,6 +93,7 @@ function MediaButton(props) {
|
|
|
81
93
|
type: "text",
|
|
82
94
|
value: urlValue
|
|
83
95
|
}));
|
|
96
|
+
|
|
84
97
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, urlInput, /*#__PURE__*/_react.default.createElement("div", {
|
|
85
98
|
style: styles.buttons
|
|
86
99
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -4,11 +4,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.RelatedPostButton = RelatedPostButton;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
8
10
|
var _draftJs = require("draft-js");
|
|
11
|
+
|
|
9
12
|
var _postSelector = require("./selector/post-selector");
|
|
13
|
+
|
|
10
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); }
|
|
15
|
+
|
|
11
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; }
|
|
17
|
+
|
|
12
18
|
function RelatedPostButton(props) {
|
|
13
19
|
const {
|
|
14
20
|
editorState,
|
|
@@ -17,28 +23,33 @@ function RelatedPostButton(props) {
|
|
|
17
23
|
PostSelector = _postSelector.PostSelector
|
|
18
24
|
} = props;
|
|
19
25
|
const [toShowPostSelector, setToShowPostSelector] = (0, _react.useState)(false);
|
|
26
|
+
|
|
20
27
|
const promptForPostSelector = () => {
|
|
21
28
|
setToShowPostSelector(true);
|
|
22
29
|
};
|
|
30
|
+
|
|
23
31
|
const onPostSelectorChange = selected => {
|
|
24
32
|
if (!selected.length) {
|
|
25
33
|
setToShowPostSelector(false);
|
|
26
34
|
return;
|
|
27
35
|
}
|
|
36
|
+
|
|
28
37
|
const contentState = editorState.getCurrentContent();
|
|
29
38
|
const contentStateWithEntity = contentState.createEntity('RELATEDPOST', 'IMMUTABLE', {
|
|
30
39
|
posts: selected.map(ele => ele.post)
|
|
31
40
|
});
|
|
32
41
|
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
|
|
42
|
+
|
|
33
43
|
const newEditorState = _draftJs.EditorState.set(editorState, {
|
|
34
44
|
currentContent: contentStateWithEntity
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
// The third parameter here is a space string, not an empty string
|
|
45
|
+
}); // The third parameter here is a space string, not an empty string
|
|
38
46
|
// If you set an empty string, you will get an error: Unknown DraftEntity key: null
|
|
47
|
+
|
|
48
|
+
|
|
39
49
|
onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
|
|
40
50
|
setToShowPostSelector(false);
|
|
41
51
|
};
|
|
52
|
+
|
|
42
53
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowPostSelector && /*#__PURE__*/_react.default.createElement(PostSelector, {
|
|
43
54
|
onChange: onPostSelectorChange,
|
|
44
55
|
enableMultiSelect: true,
|
|
@@ -4,12 +4,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.AlignSelector = AlignSelector;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
8
10
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
+
|
|
9
12
|
var _fields = require("@keystone-ui/fields");
|
|
13
|
+
|
|
10
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
11
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
|
+
|
|
12
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
|
+
|
|
13
20
|
const Label = _styledComponents.default.label`
|
|
14
21
|
display: block;
|
|
15
22
|
margin: 10px 0;
|
|
@@ -22,6 +29,7 @@ const AlignSelect = (0, _styledComponents.default)(_fields.Select)`
|
|
|
22
29
|
return `margin-bottom: ${menuHeight}px;`;
|
|
23
30
|
}}
|
|
24
31
|
`;
|
|
32
|
+
|
|
25
33
|
function AlignSelector(props) {
|
|
26
34
|
const [isOpen, setIsOpen] = (0, _react.useState)(false);
|
|
27
35
|
const [menuHeight, setMenuHeight] = (0, _react.useState)(0);
|
|
@@ -33,6 +41,7 @@ function AlignSelector(props) {
|
|
|
33
41
|
} = props;
|
|
34
42
|
(0, _react.useEffect)(() => {
|
|
35
43
|
const selectMenu = document.querySelector('.css-nabggt-menu');
|
|
44
|
+
|
|
36
45
|
if (selectMenu) {
|
|
37
46
|
const styles = window.getComputedStyle(selectMenu);
|
|
38
47
|
const margin = parseFloat(styles['marginTop']) + parseFloat(styles['marginBottom']);
|
|
@@ -40,6 +49,7 @@ function AlignSelector(props) {
|
|
|
40
49
|
} else {
|
|
41
50
|
setMenuHeight(0);
|
|
42
51
|
}
|
|
52
|
+
|
|
43
53
|
if (isOpen && onOpen) {
|
|
44
54
|
onOpen();
|
|
45
55
|
}
|
|
@@ -47,8 +57,7 @@ function AlignSelector(props) {
|
|
|
47
57
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
|
|
48
58
|
htmlFor: "alignment"
|
|
49
59
|
}, "\u5C0D\u9F4A"), /*#__PURE__*/_react.default.createElement(AlignSelect, {
|
|
50
|
-
id: "alignment"
|
|
51
|
-
// default align === undefined
|
|
60
|
+
id: "alignment" // default align === undefined
|
|
52
61
|
,
|
|
53
62
|
value: options.find(option => option.value === align),
|
|
54
63
|
options: options,
|