@kids-reporter/draft-editor 1.0.17 → 1.0.18
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/block-renderer-fn.js +1 -1
- package/lib/block-renderers/blockquote.js +21 -18
- package/lib/block-renderers/embedded-code.js +31 -25
- package/lib/block-renderers/image-link.js +78 -73
- package/lib/block-renderers/image.js +23 -21
- package/lib/block-renderers/info-box.js +22 -19
- package/lib/block-renderers/slideshow.js +22 -19
- package/lib/block-renderers/styled.js +12 -8
- package/lib/buttons/anchor.js +18 -14
- package/lib/buttons/annotation.js +19 -15
- package/lib/buttons/bg-color.js +31 -23
- package/lib/buttons/blockquote.js +68 -62
- package/lib/buttons/control-buttons.js +31 -25
- package/lib/buttons/divider.js +29 -21
- package/lib/buttons/embedded-code.js +84 -76
- package/lib/buttons/enlarge.js +7 -5
- package/lib/buttons/font-color.js +21 -16
- package/lib/buttons/form/select.js +14 -10
- package/lib/buttons/image-link.js +26 -22
- package/lib/buttons/image.js +18 -12
- package/lib/buttons/index.js +6 -6
- package/lib/buttons/info-box.js +79 -73
- package/lib/buttons/link.js +17 -15
- package/lib/buttons/news-reading.js +65 -56
- package/lib/buttons/selector/align-selector.js +20 -16
- package/lib/buttons/selector/image-selector.js +119 -88
- package/lib/buttons/selector/pagination.js +45 -33
- package/lib/buttons/selector/search-box.js +19 -18
- package/lib/buttons/slideshow.js +18 -12
- package/lib/buttons/toc-anchor.js +9 -5
- package/lib/entity-decorators/anchor.js +46 -33
- package/lib/entity-decorators/annotation.js +53 -52
- package/lib/entity-decorators/link.js +38 -36
- package/lib/entity-decorators/toc-anchor.js +41 -35
- package/lib/entity-decorators/wrapper.js +9 -6
- package/lib/index.js +7 -6
- package/lib/local-types/kids-reporter__draft-renderer.d.js +1 -0
- package/lib/rich-text-editor.js +110 -84
- package/lib/styled.js +14 -3
- package/package.json +12 -10
- package/lib/buttons/form/array-field.js +0 -30
package/lib/block-renderer-fn.js
CHANGED
|
@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.atomicBlockRenderer = atomicBlockRenderer;
|
|
7
|
+
var _draftRenderer = require("@kids-reporter/draft-renderer");
|
|
7
8
|
var _blockquote = require("./block-renderers/blockquote");
|
|
8
9
|
var _embeddedCode = require("./block-renderers/embedded-code");
|
|
9
10
|
var _image = require("./block-renderers/image");
|
|
10
11
|
var _imageLink = require("./block-renderers/image-link");
|
|
11
12
|
var _infoBox = require("./block-renderers/info-box");
|
|
12
13
|
var _slideshow = require("./block-renderers/slideshow");
|
|
13
|
-
var _draftRenderer = require("@kids-reporter/draft-renderer");
|
|
14
14
|
const {
|
|
15
15
|
Divider,
|
|
16
16
|
NewsReading
|
|
@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.EditableBlockquote = EditableBlockquote;
|
|
7
|
+
var _draftRenderer = require("@kids-reporter/draft-renderer");
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
10
|
var _blockquote = require("../buttons/blockquote");
|
|
10
11
|
var _styled = require("./styled");
|
|
11
|
-
var
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
14
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
15
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -45,21 +46,23 @@ function EditableBlockquote(props) {
|
|
|
45
46
|
entityData: inputValue
|
|
46
47
|
});
|
|
47
48
|
};
|
|
48
|
-
return /*#__PURE__*/
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
49
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
|
|
50
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockquote.BlockquoteInput, {
|
|
51
|
+
isOpen: isInputOpen,
|
|
52
|
+
onCancel: () => {
|
|
53
|
+
setIsInputOpen(false);
|
|
54
|
+
onEditFinish();
|
|
55
|
+
},
|
|
56
|
+
onConfirm: onInputChange,
|
|
57
|
+
inputValue: data
|
|
58
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableBlock, {
|
|
59
|
+
component: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledBlockquote, {
|
|
60
|
+
data: data
|
|
61
|
+
}),
|
|
62
|
+
onClick: () => {
|
|
63
|
+
onEditStart();
|
|
64
|
+
setIsInputOpen(true);
|
|
65
|
+
}
|
|
66
|
+
})]
|
|
67
|
+
});
|
|
65
68
|
}
|
|
@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.EditableEmbeddedCode = EditableEmbeddedCode;
|
|
7
|
+
var _fields = require("@keystone-ui/fields");
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
10
|
var _embeddedCode = require("../buttons/embedded-code");
|
|
10
11
|
var _styled = require("./styled");
|
|
11
|
-
var
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
14
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
15
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -16,13 +17,16 @@ function EmbeddedCode({
|
|
|
16
17
|
className,
|
|
17
18
|
embeddedCode
|
|
18
19
|
}) {
|
|
19
|
-
return /*#__PURE__*/
|
|
20
|
-
className: className
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
20
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
21
|
+
className: className,
|
|
22
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
23
|
+
children: "Embedded Code:"
|
|
24
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_fields.TextArea, {
|
|
25
|
+
disabled: true,
|
|
26
|
+
type: "text",
|
|
27
|
+
value: embeddedCode
|
|
28
|
+
})]
|
|
29
|
+
});
|
|
26
30
|
}
|
|
27
31
|
const StyledEmbeddedCode = (0, _styledComponents.default)(EmbeddedCode)`
|
|
28
32
|
max-width: 700px;
|
|
@@ -58,21 +62,23 @@ function EditableEmbeddedCode(props) {
|
|
|
58
62
|
entityData: inputValue
|
|
59
63
|
});
|
|
60
64
|
};
|
|
61
|
-
return /*#__PURE__*/
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
65
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
|
|
66
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_embeddedCode.EmbeddedCodeInput, {
|
|
67
|
+
isOpen: isInputOpen,
|
|
68
|
+
onCancel: () => {
|
|
69
|
+
setIsInputOpen(false);
|
|
70
|
+
onEditFinish();
|
|
71
|
+
},
|
|
72
|
+
onConfirm: onInputChange,
|
|
73
|
+
inputValue: data
|
|
74
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableBlock, {
|
|
75
|
+
component: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledEmbeddedCode, {
|
|
76
|
+
embeddedCode: data?.embeddedCode
|
|
77
|
+
}),
|
|
78
|
+
onClick: () => {
|
|
79
|
+
onEditStart();
|
|
80
|
+
setIsInputOpen(true);
|
|
81
|
+
}
|
|
82
|
+
})]
|
|
83
|
+
});
|
|
78
84
|
}
|
|
@@ -4,21 +4,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.ImageLinkEditor = exports.EditableImageLink = void 0;
|
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
-
var _modals = require("@keystone-ui/modals");
|
|
10
7
|
var _fields = require("@keystone-ui/fields");
|
|
11
|
-
var
|
|
8
|
+
var _modals = require("@keystone-ui/modals");
|
|
12
9
|
var _draftRenderer = require("@kids-reporter/draft-renderer");
|
|
13
|
-
var
|
|
10
|
+
var _draftJs = require("draft-js");
|
|
11
|
+
var _react = require("react");
|
|
12
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
+
var _btNames = _interopRequireDefault(require("../buttons/bt-names"));
|
|
14
14
|
var _alignSelector = require("../buttons/selector/align-selector");
|
|
15
|
-
var
|
|
16
|
-
var _richTextEditor = require("../rich-text-editor");
|
|
15
|
+
var _imageSelector = require("../buttons/selector/image-selector");
|
|
17
16
|
var _link = require("../entity-decorators/link");
|
|
18
|
-
var
|
|
17
|
+
var _richTextEditor = require("../rich-text-editor");
|
|
18
|
+
var _styled = require("./styled");
|
|
19
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
19
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
20
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
21
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
22
21
|
const disabledButtons = [_btNames.default.bold, _btNames.default.italic, _btNames.default.underline, _btNames.default.fontColor, _btNames.default.backgroundColor, _btNames.default.ol, _btNames.default.ul, _btNames.default.divider, _btNames.default.h2, _btNames.default.h3, _btNames.default.h4, _btNames.default.h5, _btNames.default.code, _btNames.default.codeBlock, _btNames.default.blockquote, _btNames.default.infoBox, _btNames.default.slideshow, _btNames.default.newsReading, _btNames.default.tocAnchor, _btNames.default.anchor, _btNames.default.embed, _btNames.default.annotation, _btNames.default.image, _btNames.default.imageLink];
|
|
23
22
|
const {
|
|
24
23
|
ImageLinkInArticleBody
|
|
@@ -54,50 +53,55 @@ const ImageLinkEditor = props => {
|
|
|
54
53
|
setAlign(align);
|
|
55
54
|
};
|
|
56
55
|
const onAlignSelectOpen = () => {
|
|
57
|
-
|
|
58
|
-
const scrollWrapper = (_contentWrapperRef$cu = contentWrapperRef.current) === null || _contentWrapperRef$cu === void 0 ? void 0 : _contentWrapperRef$cu.parentElement;
|
|
56
|
+
const scrollWrapper = contentWrapperRef.current?.parentElement;
|
|
59
57
|
if (scrollWrapper) {
|
|
60
|
-
scrollWrapper.scrollTop = scrollWrapper
|
|
58
|
+
scrollWrapper.scrollTop = scrollWrapper?.scrollHeight;
|
|
61
59
|
}
|
|
62
60
|
};
|
|
63
|
-
return /*#__PURE__*/
|
|
64
|
-
isOpen: isOpen
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
61
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_modals.DrawerController, {
|
|
62
|
+
isOpen: isOpen,
|
|
63
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_modals.Drawer, {
|
|
64
|
+
title: "Image Link",
|
|
65
|
+
actions: {
|
|
66
|
+
cancel: {
|
|
67
|
+
label: 'Cancel',
|
|
68
|
+
action: () => onCancel()
|
|
69
|
+
},
|
|
70
|
+
confirm: {
|
|
71
|
+
label: 'Confirm',
|
|
72
|
+
action: () => onConfirm({
|
|
73
|
+
url: url,
|
|
74
|
+
alignment: align,
|
|
75
|
+
rawContentState: (0, _draftJs.convertToRaw)(description.value.getCurrentContent())
|
|
76
|
+
})
|
|
77
|
+
}
|
|
71
78
|
},
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
});
|
|
99
|
-
}
|
|
100
|
-
})));
|
|
79
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
|
|
80
|
+
children: "\u9023\u7D50"
|
|
81
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_fields.TextInput, {
|
|
82
|
+
placeholder: "\u5716\u7247\u9023\u7D50",
|
|
83
|
+
type: "text",
|
|
84
|
+
value: url,
|
|
85
|
+
onChange: e => setURL(e.target.value)
|
|
86
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignSelector.AlignSelector, {
|
|
87
|
+
align: align,
|
|
88
|
+
options: _imageSelector.ImageAlignOptions,
|
|
89
|
+
onChange: onAlignSelectChange,
|
|
90
|
+
onOpen: onAlignSelectOpen
|
|
91
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
|
|
92
|
+
children: "\u5716\u8AAA"
|
|
93
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_richTextEditor.RichTextEditor, {
|
|
94
|
+
decorators: [_link.editableLinkDecorator],
|
|
95
|
+
disabledButtons: disabledButtons,
|
|
96
|
+
editorState: description.value,
|
|
97
|
+
onChange: editorState => {
|
|
98
|
+
setDescription({
|
|
99
|
+
value: editorState
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
})]
|
|
103
|
+
})
|
|
104
|
+
});
|
|
101
105
|
};
|
|
102
106
|
exports.ImageLinkEditor = ImageLinkEditor;
|
|
103
107
|
const EditableImageLink = props => {
|
|
@@ -118,8 +122,7 @@ const EditableImageLink = props => {
|
|
|
118
122
|
url,
|
|
119
123
|
alignment,
|
|
120
124
|
rawContentState
|
|
121
|
-
} = data;
|
|
122
|
-
|
|
125
|
+
} = data;
|
|
123
126
|
const onChange = inputValue => {
|
|
124
127
|
setIsEditorOpen(false);
|
|
125
128
|
onEditFinish({
|
|
@@ -127,26 +130,28 @@ const EditableImageLink = props => {
|
|
|
127
130
|
entityData: inputValue
|
|
128
131
|
});
|
|
129
132
|
};
|
|
130
|
-
return /*#__PURE__*/
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
133
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
134
|
+
children: [isEditorOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageLinkEditor, {
|
|
135
|
+
isOpen: isEditorOpen,
|
|
136
|
+
inputValue: {
|
|
137
|
+
url: url,
|
|
138
|
+
alignment: alignment,
|
|
139
|
+
rawContentState: rawContentState
|
|
140
|
+
},
|
|
141
|
+
onConfirm: onChange,
|
|
142
|
+
onCancel: () => {
|
|
143
|
+
setIsEditorOpen(false);
|
|
144
|
+
onEditFinish();
|
|
145
|
+
}
|
|
146
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableBlock, {
|
|
147
|
+
component: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImage, {
|
|
148
|
+
data: data
|
|
149
|
+
}),
|
|
150
|
+
onClick: () => {
|
|
151
|
+
onEditStart();
|
|
152
|
+
setIsEditorOpen(true);
|
|
153
|
+
}
|
|
154
|
+
})]
|
|
155
|
+
});
|
|
151
156
|
};
|
|
152
157
|
exports.EditableImageLink = EditableImageLink;
|
|
@@ -4,14 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.EditableImage = EditableImage;
|
|
7
|
-
var
|
|
7
|
+
var _draftRenderer = require("@kids-reporter/draft-renderer");
|
|
8
|
+
var _react = require("react");
|
|
8
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
10
|
var _imageSelector = require("../buttons/selector/image-selector");
|
|
10
11
|
var _styled = require("./styled");
|
|
11
|
-
var
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
14
|
const {
|
|
16
15
|
ImageInArticleBody
|
|
17
16
|
} = _draftRenderer.blockRenderers;
|
|
@@ -22,6 +21,7 @@ const EditableBlock = (0, _styledComponents.default)(_styled.EditableBlock)`
|
|
|
22
21
|
background-color: #f0f0f0;
|
|
23
22
|
opacity: 0.3;
|
|
24
23
|
}
|
|
24
|
+
}
|
|
25
25
|
`;
|
|
26
26
|
function EditableImage(props) {
|
|
27
27
|
const [isSelectorOpen, setIsSelectorOpen] = (0, _react.useState)(false);
|
|
@@ -45,11 +45,11 @@ function EditableImage(props) {
|
|
|
45
45
|
const onChange = (selectedImages, alignment) => {
|
|
46
46
|
// close `ImageSelector`
|
|
47
47
|
setIsSelectorOpen(false);
|
|
48
|
-
if (
|
|
48
|
+
if (selectedImages?.length === 0) {
|
|
49
49
|
onEditFinish();
|
|
50
50
|
return;
|
|
51
51
|
}
|
|
52
|
-
const selectedImage = selectedImages
|
|
52
|
+
const selectedImage = selectedImages?.[0];
|
|
53
53
|
onEditFinish({
|
|
54
54
|
entityKey,
|
|
55
55
|
entityData: Object.assign({
|
|
@@ -57,19 +57,21 @@ function EditableImage(props) {
|
|
|
57
57
|
}, selectedImage)
|
|
58
58
|
});
|
|
59
59
|
};
|
|
60
|
-
return /*#__PURE__*/
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
60
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
61
|
+
children: [isSelectorOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_imageSelector.ImageSelector, {
|
|
62
|
+
onChange: onChange,
|
|
63
|
+
enableCaption: true,
|
|
64
|
+
enableAlignment: true,
|
|
65
|
+
alignment: data.alignment,
|
|
66
|
+
selected: [imageWithMeta]
|
|
67
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableBlock, {
|
|
68
|
+
component: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImage, {
|
|
69
|
+
data: data
|
|
70
|
+
}),
|
|
71
|
+
onClick: () => {
|
|
72
|
+
onEditStart();
|
|
73
|
+
setIsSelectorOpen(true);
|
|
74
|
+
}
|
|
75
|
+
})]
|
|
76
|
+
});
|
|
75
77
|
}
|
|
@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.EditableInfoBox = EditableInfoBox;
|
|
7
|
+
var _draftRenderer = require("@kids-reporter/draft-renderer");
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
-
var _styled = require("./styled");
|
|
10
10
|
var _infoBox = require("../buttons/info-box");
|
|
11
|
-
var
|
|
11
|
+
var _styled = require("./styled");
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
14
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
15
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -45,21 +46,23 @@ function EditableInfoBox(props) {
|
|
|
45
46
|
entityData: inputValue
|
|
46
47
|
});
|
|
47
48
|
};
|
|
48
|
-
return /*#__PURE__*/
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
49
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
|
|
50
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_infoBox.InfoBoxInput, {
|
|
51
|
+
isOpen: isInputOpen,
|
|
52
|
+
onCancel: () => {
|
|
53
|
+
setIsInputOpen(false);
|
|
54
|
+
onEditFinish();
|
|
55
|
+
},
|
|
56
|
+
onConfirm: onInputChange,
|
|
57
|
+
inputValue: data
|
|
58
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableBlock, {
|
|
59
|
+
component: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInfoBox, {
|
|
60
|
+
data: data
|
|
61
|
+
}),
|
|
62
|
+
onClick: () => {
|
|
63
|
+
onEditStart();
|
|
64
|
+
setIsInputOpen(true);
|
|
65
|
+
}
|
|
66
|
+
})]
|
|
67
|
+
});
|
|
65
68
|
}
|
|
@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.EditableSlideshow = EditableSlideshow;
|
|
7
|
+
var _draftRenderer = require("@kids-reporter/draft-renderer");
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
10
|
var _imageSelector = require("../buttons/selector/image-selector");
|
|
10
11
|
var _styled = require("./styled");
|
|
11
|
-
var
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
14
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
15
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -22,6 +23,7 @@ const EditableBlock = (0, _styledComponents.default)(_styled.EditableBlock)`
|
|
|
22
23
|
background-color: #f0f0f0;
|
|
23
24
|
opacity: 0.3;
|
|
24
25
|
}
|
|
26
|
+
}
|
|
25
27
|
`;
|
|
26
28
|
function EditableSlideshow(props) {
|
|
27
29
|
const [isSelectorOpen, setIsSelectorOpen] = (0, _react.useState)(false);
|
|
@@ -40,7 +42,7 @@ function EditableSlideshow(props) {
|
|
|
40
42
|
const onChange = (selectedImages, alignment) => {
|
|
41
43
|
// close `ImageSelector`
|
|
42
44
|
setIsSelectorOpen(false);
|
|
43
|
-
if (
|
|
45
|
+
if (selectedImages?.length === 0) {
|
|
44
46
|
onEditFinish();
|
|
45
47
|
return;
|
|
46
48
|
}
|
|
@@ -52,21 +54,22 @@ function EditableSlideshow(props) {
|
|
|
52
54
|
}
|
|
53
55
|
});
|
|
54
56
|
};
|
|
55
|
-
return /*#__PURE__*/
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
57
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
|
|
58
|
+
children: [isSelectorOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_imageSelector.ImageSelector, {
|
|
59
|
+
onChange: onChange,
|
|
60
|
+
enableCaption: true,
|
|
61
|
+
enableAlignment: false,
|
|
62
|
+
enableMultiSelect: true,
|
|
63
|
+
alignment: data.alignment,
|
|
64
|
+
selected: data.images
|
|
65
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableBlock, {
|
|
66
|
+
component: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSlideshow, {
|
|
67
|
+
data: data
|
|
68
|
+
}),
|
|
69
|
+
onClick: () => {
|
|
70
|
+
onEditStart();
|
|
71
|
+
setIsSelectorOpen(true);
|
|
72
|
+
}
|
|
73
|
+
})]
|
|
74
|
+
});
|
|
72
75
|
}
|
|
@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.EditableBlock = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
10
|
const EditButton = _styledComponents.default.div`
|
|
11
11
|
cursor: pointer;
|
|
@@ -26,12 +26,16 @@ const _EditableBlock = _styledComponents.default.div`
|
|
|
26
26
|
}
|
|
27
27
|
`;
|
|
28
28
|
const EditableBlock = props => {
|
|
29
|
-
return /*#__PURE__*/
|
|
30
|
-
className: props.className
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
29
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_EditableBlock, {
|
|
30
|
+
className: props.className,
|
|
31
|
+
children: [props.component, /*#__PURE__*/(0, _jsxRuntime.jsxs)(EditButton, {
|
|
32
|
+
onClick: props.onClick,
|
|
33
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
|
|
34
|
+
className: "fa-solid fa-pen"
|
|
35
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
36
|
+
children: "Modify"
|
|
37
|
+
})]
|
|
38
|
+
})]
|
|
39
|
+
});
|
|
36
40
|
};
|
|
37
41
|
exports.EditableBlock = EditableBlock;
|
package/lib/buttons/anchor.js
CHANGED
|
@@ -4,12 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.AnchorButton = void 0;
|
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _draftJs = require("draft-js");
|
|
9
7
|
var _draftRenderer = require("@kids-reporter/draft-renderer");
|
|
8
|
+
var _draftJs = require("draft-js");
|
|
9
|
+
var _react = require("react");
|
|
10
10
|
var _anchor = require("../entity-decorators/anchor");
|
|
11
|
-
|
|
12
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
11
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
12
|
const AnchorButton = props => {
|
|
14
13
|
const toggleEntity = _draftJs.RichUtils.toggleLink;
|
|
15
14
|
const {
|
|
@@ -47,15 +46,20 @@ const AnchorButton = props => {
|
|
|
47
46
|
setIsEditorOpen(false);
|
|
48
47
|
props.onEditFinish();
|
|
49
48
|
};
|
|
50
|
-
return /*#__PURE__*/
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
49
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
50
|
+
children: [isEditorOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_anchor.AnchorIDEditor, {
|
|
51
|
+
isOpen: isEditorOpen,
|
|
52
|
+
anchorIDValue: '',
|
|
53
|
+
onConfirm: confirmAnchor,
|
|
54
|
+
onCancel: removeAnchor
|
|
55
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
56
|
+
className: props.className,
|
|
57
|
+
onMouseDown: isActive ? removeAnchor : promptForAnchor,
|
|
58
|
+
title: "\u9328\u9EDE",
|
|
59
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
60
|
+
children: "\u9328"
|
|
61
|
+
})
|
|
62
|
+
})]
|
|
63
|
+
});
|
|
60
64
|
};
|
|
61
65
|
exports.AnchorButton = AnchorButton;
|