@kids-reporter/draft-editor 1.0.17 → 1.0.19
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 +23 -21
- package/lib/block-renderers/embedded-code.js +33 -28
- package/lib/block-renderers/image-link.js +80 -74
- package/lib/block-renderers/image.js +24 -22
- package/lib/block-renderers/info-box.js +25 -22
- package/lib/block-renderers/slideshow.js +24 -22
- package/lib/block-renderers/styled.js +13 -9
- package/lib/buttons/anchor.js +18 -14
- package/lib/buttons/annotation.js +19 -15
- package/lib/buttons/bg-color.js +33 -26
- package/lib/buttons/blockquote.js +69 -64
- package/lib/buttons/control-buttons.js +33 -28
- package/lib/buttons/divider.js +30 -22
- package/lib/buttons/embedded-code.js +86 -79
- package/lib/buttons/enlarge.js +8 -6
- package/lib/buttons/font-color.js +23 -19
- package/lib/buttons/form/checkbox.js +42 -0
- package/lib/buttons/form/select.js +15 -11
- package/lib/buttons/image-link.js +26 -22
- package/lib/buttons/image.js +19 -14
- package/lib/buttons/index.js +7 -7
- package/lib/buttons/info-box.js +102 -81
- package/lib/buttons/link.js +17 -15
- package/lib/buttons/news-reading.js +66 -58
- package/lib/buttons/selector/align-selector.js +22 -19
- package/lib/buttons/selector/image-selector.js +120 -90
- package/lib/buttons/selector/pagination.js +46 -34
- package/lib/buttons/selector/search-box.js +20 -19
- package/lib/buttons/slideshow.js +19 -14
- package/lib/buttons/toc-anchor.js +10 -6
- package/lib/entity-decorators/anchor.js +48 -36
- package/lib/entity-decorators/annotation.js +54 -53
- package/lib/entity-decorators/link.js +38 -36
- package/lib/entity-decorators/toc-anchor.js +43 -38
- package/lib/entity-decorators/wrapper.js +10 -7
- package/lib/index.js +8 -7
- package/lib/local-types/kids-reporter__draft-renderer.d.js +1 -0
- package/lib/rich-text-editor.js +111 -85
- package/lib/styled.js +15 -5
- package/package.json +26 -13
- package/lib/buttons/form/array-field.js +0 -30
|
@@ -4,17 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.editableAnnotationDecorator = exports.AnnotationEditor = void 0;
|
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _draftJs = require("draft-js");
|
|
9
7
|
var _modals = require("@keystone-ui/modals");
|
|
10
8
|
var _draftRenderer = require("@kids-reporter/draft-renderer");
|
|
9
|
+
var _draftJs = require("draft-js");
|
|
10
|
+
var _react = require("react");
|
|
11
11
|
var _btNames = _interopRequireDefault(require("../buttons/bt-names"));
|
|
12
12
|
var _richTextEditor = require("../rich-text-editor");
|
|
13
|
-
var _wrapper = require("./wrapper");
|
|
14
13
|
var _link = require("./link");
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
function
|
|
14
|
+
var _wrapper = require("./wrapper");
|
|
15
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
18
17
|
const disabledButtons = [_btNames.default.h2, _btNames.default.h3, _btNames.default.code, _btNames.default.codeBlock, _btNames.default.blockquote, _btNames.default.annotation, _btNames.default.embed, _btNames.default.image, _btNames.default.infoBox, _btNames.default.slideshow, _btNames.default.newsReading, _btNames.default.tocAnchor, _btNames.default.anchor];
|
|
19
18
|
const AnnotationEditor = props => {
|
|
20
19
|
const {
|
|
@@ -26,34 +25,35 @@ const AnnotationEditor = props => {
|
|
|
26
25
|
const [editorState, setEditorState] = (0, _react.useState)({
|
|
27
26
|
value: editorStateValue
|
|
28
27
|
});
|
|
29
|
-
return /*#__PURE__*/
|
|
30
|
-
isOpen: isOpen
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
28
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_modals.DrawerController, {
|
|
29
|
+
isOpen: isOpen,
|
|
30
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_modals.Drawer, {
|
|
31
|
+
title: "\u8A3B\u89E3",
|
|
32
|
+
actions: {
|
|
33
|
+
cancel: {
|
|
34
|
+
label: 'Cancel',
|
|
35
|
+
action: () => onCancel()
|
|
36
|
+
},
|
|
37
|
+
confirm: {
|
|
38
|
+
label: 'Confirm',
|
|
39
|
+
action: () => onConfirm(editorState.value)
|
|
40
|
+
}
|
|
37
41
|
},
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
})));
|
|
42
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_richTextEditor.RichTextEditor, {
|
|
43
|
+
decorators: [_link.editableLinkDecorator],
|
|
44
|
+
disabledButtons: disabledButtons,
|
|
45
|
+
editorState: editorState.value,
|
|
46
|
+
onChange: editorState => {
|
|
47
|
+
setEditorState({
|
|
48
|
+
value: editorState
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
})
|
|
52
|
+
})
|
|
53
|
+
});
|
|
53
54
|
};
|
|
54
55
|
exports.AnnotationEditor = AnnotationEditor;
|
|
55
56
|
const EditableAnnotation = props => {
|
|
56
|
-
var _contentState$getEnti;
|
|
57
57
|
const {
|
|
58
58
|
children,
|
|
59
59
|
contentState,
|
|
@@ -61,12 +61,11 @@ const EditableAnnotation = props => {
|
|
|
61
61
|
} = props;
|
|
62
62
|
const [isModalOpen, setIsModalOpen] = (0, _react.useState)(false);
|
|
63
63
|
const [editorState, setEditorState] = (0, _react.useState)({
|
|
64
|
-
value: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(contentState
|
|
64
|
+
value: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(contentState?.getEntity(entityKey).getData()?.rawContentState))
|
|
65
65
|
});
|
|
66
66
|
(0, _react.useEffect)(() => {
|
|
67
|
-
var _contentState$getEnti2;
|
|
68
67
|
setEditorState({
|
|
69
|
-
value: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(contentState
|
|
68
|
+
value: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(contentState?.getEntity(entityKey).getData()?.rawContentState))
|
|
70
69
|
});
|
|
71
70
|
}, [contentState, entityKey]);
|
|
72
71
|
const onEditorStateChange = editorState => {
|
|
@@ -81,26 +80,28 @@ const EditableAnnotation = props => {
|
|
|
81
80
|
}
|
|
82
81
|
});
|
|
83
82
|
};
|
|
84
|
-
return /*#__PURE__*/
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
e
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
83
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
84
|
+
children: [isModalOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(AnnotationEditor, {
|
|
85
|
+
isOpen: isModalOpen,
|
|
86
|
+
editorStateValue: editorState.value,
|
|
87
|
+
onConfirm: onEditorStateChange,
|
|
88
|
+
onCancel: () => {
|
|
89
|
+
setIsModalOpen(false);
|
|
90
|
+
props.onEditFinish();
|
|
91
|
+
}
|
|
92
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_wrapper.EditableWrapper, {
|
|
93
|
+
component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_draftRenderer.annotationDecorator.component, {
|
|
94
|
+
children,
|
|
95
|
+
contentState,
|
|
96
|
+
entityKey
|
|
97
|
+
}),
|
|
98
|
+
onClick: e => {
|
|
99
|
+
e.preventDefault();
|
|
100
|
+
setIsModalOpen(true);
|
|
101
|
+
props.onEditStart();
|
|
102
|
+
}
|
|
103
|
+
})]
|
|
104
|
+
});
|
|
104
105
|
};
|
|
105
106
|
const editableAnnotationDecorator = exports.editableAnnotationDecorator = {
|
|
106
107
|
strategy: _draftRenderer.annotationDecorator.strategy,
|
|
@@ -4,13 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.editableLinkDecorator = exports.LinkEditor = void 0;
|
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _modals = require("@keystone-ui/modals");
|
|
9
7
|
var _fields = require("@keystone-ui/fields");
|
|
8
|
+
var _modals = require("@keystone-ui/modals");
|
|
10
9
|
var _draftRenderer = require("@kids-reporter/draft-renderer");
|
|
10
|
+
var _react = require("react");
|
|
11
11
|
var _wrapper = require("./wrapper");
|
|
12
|
-
|
|
13
|
-
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; }
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
13
|
const LinkEditor = props => {
|
|
15
14
|
const {
|
|
16
15
|
isOpen,
|
|
@@ -19,7 +18,7 @@ const LinkEditor = props => {
|
|
|
19
18
|
onCancel
|
|
20
19
|
} = props;
|
|
21
20
|
const [url, setURL] = (0, _react.useState)(urlValue);
|
|
22
|
-
return /*#__PURE__*/
|
|
21
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_modals.AlertDialog, {
|
|
23
22
|
title: "\u7DE8\u8F2F\u5916\u90E8\u9023\u7D50\u6216\u5167\u90E8\u9328\u9EDE(ID)",
|
|
24
23
|
isOpen: isOpen,
|
|
25
24
|
actions: {
|
|
@@ -31,27 +30,28 @@ const LinkEditor = props => {
|
|
|
31
30
|
label: 'Confirm',
|
|
32
31
|
action: () => onConfirm(url)
|
|
33
32
|
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
33
|
+
},
|
|
34
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
|
|
35
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "\u5916\u90E8\u9023\u7D50\u7BC4\u4F8B:", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "https://kids.twreporter.org/article/article1#part1", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "\u5167\u90E8\u9328\u9EDE\u7BC4\u4F8B:", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "#part1"]
|
|
36
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_fields.TextInput, {
|
|
37
|
+
placeholder: "\u9023\u7D50",
|
|
38
|
+
type: "text",
|
|
39
|
+
value: url,
|
|
40
|
+
onChange: e => setURL(e.target.value)
|
|
41
|
+
})]
|
|
42
|
+
});
|
|
41
43
|
};
|
|
42
44
|
exports.LinkEditor = LinkEditor;
|
|
43
45
|
const EditableLink = props => {
|
|
44
|
-
var _contentState$getEnti;
|
|
45
46
|
const {
|
|
46
47
|
children,
|
|
47
48
|
contentState,
|
|
48
49
|
entityKey
|
|
49
50
|
} = props;
|
|
50
51
|
const [isModalOpen, setIsModalOpen] = (0, _react.useState)(false);
|
|
51
|
-
const [url, setURL] = (0, _react.useState)(contentState
|
|
52
|
+
const [url, setURL] = (0, _react.useState)(contentState?.getEntity(entityKey)?.getData()?.url);
|
|
52
53
|
(0, _react.useEffect)(() => {
|
|
53
|
-
|
|
54
|
-
setURL(contentState === null || contentState === void 0 || (_contentState$getEnti2 = contentState.getEntity(entityKey).getData()) === null || _contentState$getEnti2 === void 0 ? void 0 : _contentState$getEnti2.url);
|
|
54
|
+
setURL(contentState?.getEntity(entityKey).getData()?.url);
|
|
55
55
|
});
|
|
56
56
|
const onURLChange = url => {
|
|
57
57
|
setIsModalOpen(false);
|
|
@@ -63,26 +63,28 @@ const EditableLink = props => {
|
|
|
63
63
|
}
|
|
64
64
|
});
|
|
65
65
|
};
|
|
66
|
-
return /*#__PURE__*/
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
e
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
66
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
67
|
+
children: [isModalOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkEditor, {
|
|
68
|
+
isOpen: isModalOpen,
|
|
69
|
+
urlValue: url,
|
|
70
|
+
onConfirm: onURLChange,
|
|
71
|
+
onCancel: () => {
|
|
72
|
+
setIsModalOpen(false);
|
|
73
|
+
props.onEditFinish();
|
|
74
|
+
}
|
|
75
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_wrapper.EditableWrapper, {
|
|
76
|
+
component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_draftRenderer.linkDecorator.component, {
|
|
77
|
+
children,
|
|
78
|
+
contentState,
|
|
79
|
+
entityKey
|
|
80
|
+
}),
|
|
81
|
+
onClick: e => {
|
|
82
|
+
e.preventDefault();
|
|
83
|
+
setIsModalOpen(true);
|
|
84
|
+
props.onEditStart();
|
|
85
|
+
}
|
|
86
|
+
})]
|
|
87
|
+
});
|
|
86
88
|
};
|
|
87
89
|
const editableLinkDecorator = exports.editableLinkDecorator = {
|
|
88
90
|
strategy: _draftRenderer.linkDecorator.strategy,
|
|
@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.editableTOCAnchorDecorator = 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");
|
|
8
|
+
var _modals = require("@keystone-ui/modals");
|
|
11
9
|
var _draftRenderer = require("@kids-reporter/draft-renderer");
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
15
15
|
const AnchorWrapper = _styledComponents.default.span`
|
|
16
16
|
display: inline;
|
|
17
17
|
color: #8e8e8e;
|
|
@@ -40,7 +40,7 @@ const AnchorLabelEditor = props => {
|
|
|
40
40
|
onCancel
|
|
41
41
|
} = props;
|
|
42
42
|
const [anchorLabel, setTOCLabel] = (0, _react.useState)(anchorLabelValue);
|
|
43
|
-
return /*#__PURE__*/
|
|
43
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_modals.AlertDialog, {
|
|
44
44
|
title: "\u7DE8\u8F2F\u7D22\u5F15\u986F\u793A\u6587\u5B57",
|
|
45
45
|
isOpen: isOpen,
|
|
46
46
|
actions: {
|
|
@@ -52,16 +52,16 @@ const AnchorLabelEditor = props => {
|
|
|
52
52
|
label: 'Confirm',
|
|
53
53
|
action: () => onConfirm(anchorLabel)
|
|
54
54
|
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
55
|
+
},
|
|
56
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTextInput, {
|
|
57
|
+
placeholder: "\u7D22\u5F15\u5728\u76EE\u9304\u5167\u986F\u793A\u6587\u5B57",
|
|
58
|
+
type: "text",
|
|
59
|
+
value: anchorLabel,
|
|
60
|
+
onChange: e => setTOCLabel(e.target.value)
|
|
61
|
+
})
|
|
62
|
+
});
|
|
62
63
|
};
|
|
63
64
|
const EditableTOCAnchor = props => {
|
|
64
|
-
var _contentState$getEnti;
|
|
65
65
|
const {
|
|
66
66
|
children,
|
|
67
67
|
contentState,
|
|
@@ -69,41 +69,46 @@ const EditableTOCAnchor = props => {
|
|
|
69
69
|
} = props;
|
|
70
70
|
const tocContent = props.decoratedText;
|
|
71
71
|
const [isModalOpen, setIsModalOpen] = (0, _react.useState)(false);
|
|
72
|
-
const [anchorLabel, setTOCLabel] = (0, _react.useState)(contentState
|
|
72
|
+
const [anchorLabel, setTOCLabel] = (0, _react.useState)(contentState?.getEntity(entityKey)?.getData()?.anchorLabel);
|
|
73
73
|
(0, _react.useEffect)(() => {
|
|
74
|
-
|
|
75
|
-
setTOCLabel((_contentState$getEnti2 = contentState.getEntity(entityKey).getData()) === null || _contentState$getEnti2 === void 0 ? void 0 : _contentState$getEnti2.anchorLabel);
|
|
74
|
+
setTOCLabel(contentState.getEntity(entityKey).getData()?.anchorLabel);
|
|
76
75
|
});
|
|
77
76
|
const onTOCLabelChange = labelValue => {
|
|
78
|
-
var _contentState$getEnti3;
|
|
79
77
|
setIsModalOpen(false);
|
|
80
78
|
setTOCLabel(labelValue);
|
|
81
79
|
props.onEditFinish({
|
|
82
80
|
entityKey,
|
|
83
81
|
entityData: {
|
|
84
|
-
anchorKey: contentState
|
|
82
|
+
anchorKey: contentState?.getEntity(entityKey)?.getData()?.anchorKey,
|
|
85
83
|
anchorLabel: labelValue
|
|
86
84
|
}
|
|
87
85
|
});
|
|
88
86
|
};
|
|
89
|
-
return /*#__PURE__*/
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
87
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
|
|
88
|
+
children: [isModalOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(AnchorLabelEditor, {
|
|
89
|
+
isOpen: isModalOpen,
|
|
90
|
+
anchorLabelValue: anchorLabel,
|
|
91
|
+
onConfirm: onTOCLabelChange,
|
|
92
|
+
onCancel: () => {
|
|
93
|
+
setIsModalOpen(false);
|
|
94
|
+
props.onEditFinish();
|
|
95
|
+
}
|
|
96
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(AnchorWrapper, {
|
|
97
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AnchorEditButton, {
|
|
98
|
+
anchorLabel: anchorLabel !== tocContent ? anchorLabel : undefined,
|
|
99
|
+
onClick: e => {
|
|
100
|
+
e.preventDefault();
|
|
101
|
+
setIsModalOpen(true);
|
|
102
|
+
props.onEditStart();
|
|
103
|
+
},
|
|
104
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
|
|
105
|
+
className: "fas fa-pen"
|
|
106
|
+
})
|
|
107
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
108
|
+
children: children
|
|
109
|
+
})]
|
|
110
|
+
})]
|
|
111
|
+
});
|
|
107
112
|
};
|
|
108
113
|
const editableTOCAnchorDecorator = exports.editableTOCAnchorDecorator = {
|
|
109
114
|
strategy: (0, _draftRenderer.findEntitiesByType)(_draftRenderer.ENTITY.TOCAnchor),
|
|
@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.EditableWrapper = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
-
|
|
8
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
10
|
const Wrapper = _styledComponents.default.span`
|
|
11
11
|
display: inline;
|
|
12
12
|
color: #8e8e8e;
|
|
@@ -18,10 +18,13 @@ const EditButton = _styledComponents.default.div`
|
|
|
18
18
|
padding-right: 2px;
|
|
19
19
|
`;
|
|
20
20
|
const EditableWrapper = props => {
|
|
21
|
-
return /*#__PURE__*/
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
|
|
22
|
+
children: [props.component, /*#__PURE__*/(0, _jsxRuntime.jsx)(EditButton, {
|
|
23
|
+
onClick: props.onClick,
|
|
24
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
|
|
25
|
+
className: "fas fa-pen"
|
|
26
|
+
})
|
|
27
|
+
})]
|
|
28
|
+
});
|
|
26
29
|
};
|
|
27
30
|
exports.EditableWrapper = EditableWrapper;
|
package/lib/index.js
CHANGED
|
@@ -12,18 +12,19 @@ Object.defineProperty(exports, "buttonNames", {
|
|
|
12
12
|
});
|
|
13
13
|
exports.default = void 0;
|
|
14
14
|
var _react = _interopRequireDefault(require("react"));
|
|
15
|
-
var _richTextEditor = require("./rich-text-editor");
|
|
16
15
|
var _btNames = _interopRequireDefault(require("./buttons/bt-names"));
|
|
16
|
+
var _anchor = require("./entity-decorators/anchor");
|
|
17
17
|
var _annotation = require("./entity-decorators/annotation");
|
|
18
18
|
var _link = require("./entity-decorators/link");
|
|
19
19
|
var _tocAnchor = require("./entity-decorators/toc-anchor");
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
function
|
|
20
|
+
var _richTextEditor = require("./rich-text-editor");
|
|
21
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
22
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
23
23
|
const RichTextEditor = props => {
|
|
24
|
-
return /*#__PURE__*/
|
|
25
|
-
decorators: [_annotation.editableAnnotationDecorator, _link.editableLinkDecorator, _tocAnchor.editableTOCAnchorDecorator, _anchor.editableAnchorDecorator]
|
|
26
|
-
|
|
24
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_richTextEditor.RichTextEditor, {
|
|
25
|
+
decorators: [_annotation.editableAnnotationDecorator, _link.editableLinkDecorator, _tocAnchor.editableTOCAnchorDecorator, _anchor.editableAnchorDecorator],
|
|
26
|
+
...props
|
|
27
|
+
});
|
|
27
28
|
};
|
|
28
29
|
exports.RichTextEditor = RichTextEditor;
|
|
29
30
|
var _default = exports.default = {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|