@kids-reporter/draft-editor 0.2.1 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/lib/block-renderer-fn.js +72 -0
  2. package/lib/block-renderer-fn.type.js +5 -0
  3. package/lib/block-renderers/blockquote.js +94 -0
  4. package/lib/buttons/annotation.js +85 -77
  5. package/lib/buttons/blockquote.js +141 -0
  6. package/lib/buttons/bt-names.js +29 -0
  7. package/lib/buttons/image.js +1 -1
  8. package/lib/buttons/info-box.js +110 -89
  9. package/lib/buttons/select.js +40 -0
  10. package/lib/buttons/selector/align-selector.js +1 -1
  11. package/lib/buttons/slideshow.js +1 -1
  12. package/lib/draft-editor.js +48 -76
  13. package/lib/draft-editor.type.js +5 -0
  14. package/package.json +2 -2
package/lib/block-renderer-fn.js ADDED
@@ -0,0 +1,72 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.atomicBlockRenderer = atomicBlockRenderer;
7
+
8
+ var _blockquote = require("./block-renderers/blockquote");
9
+
10
+ var _draftRenderer = require("@kids-reporter/draft-renderer");
11
+
12
+ const {
13
+ EmbeddedCodeInArticleBody,
14
+ ImageInArticleBody,
15
+ InfoBoxInArticleBody,
16
+ SlideshowInArticleBody
17
+ } = _draftRenderer.blockRenderers;
18
+
19
+ const AtomicBlock = props => {
20
+ const entity = props.contentState.getEntity(props.block.getEntityAt(0));
21
+ const entityType = entity.getType();
22
+ const entityData = entity.getData();
23
+
24
+ switch (entityType) {
25
+ case 'BLOCKQUOTE':
26
+ {
27
+ return (0, _blockquote.EditableBlockquote)(props);
28
+ }
29
+
30
+ case 'IMAGE':
31
+ {
32
+ return ImageInArticleBody({
33
+ data: entityData
34
+ });
35
+ }
36
+
37
+ case 'SLIDESHOW':
38
+ {
39
+ return SlideshowInArticleBody({
40
+ data: entityData
41
+ });
42
+ }
43
+
44
+ case 'EMBEDDEDCODE':
45
+ {
46
+ return EmbeddedCodeInArticleBody({
47
+ data: entityData
48
+ });
49
+ }
50
+
51
+ case 'INFOBOX':
52
+ {
53
+ return InfoBoxInArticleBody({
54
+ data: entityData
55
+ });
56
+ }
57
+ }
58
+
59
+ return null;
60
+ };
61
+
62
+ function atomicBlockRenderer(block) {
63
+ if (block.getType() === 'atomic') {
64
+ return {
65
+ component: AtomicBlock,
66
+ editable: false,
67
+ props: {}
68
+ };
69
+ }
70
+
71
+ return null;
72
+ }
package/lib/block-renderer-fn.type.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
package/lib/block-renderers/blockquote.js ADDED
@@ -0,0 +1,94 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.EditableBlockquote = EditableBlockquote;
7
+
8
+ var _react = _interopRequireWildcard(require("react"));
9
+
10
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
11
+
12
+ var _blockquote = require("../buttons/blockquote");
13
+
14
+ var _draftRenderer = require("@kids-reporter/draft-renderer");
15
+
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+
18
+ 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
+ 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
+ const {
23
+ BlockquoteInArticleBody
24
+ } = _draftRenderer.blockRenderers;
25
+ const StyledBlockquote = (0, _styledComponents.default)(BlockquoteInArticleBody)``;
26
+ const EditButton = _styledComponents.default.div`
27
+ cursor: pointer;
28
+ display: none;
29
+ position: absolute;
30
+ top: 50%;
31
+ left: 50%;
32
+ transform: translate(-50%, -50%);
33
+ `;
34
+ const EditableBlock = _styledComponents.default.div`
35
+ position: relative;
36
+
37
+ &:hover {
38
+ ${StyledBlockquote} {
39
+ background-color: #f0f0f0;
40
+ opacity: 0.3;
41
+ }
42
+
43
+ ${EditButton} {
44
+ opacity: 1;
45
+ display: block;
46
+ }
47
+ }
48
+ `;
49
+
50
+ function EditableBlockquote(props) {
51
+ const [isInputOpen, setIsInputOpen] = (0, _react.useState)(false);
52
+ const {
53
+ block,
54
+ blockProps,
55
+ contentState
56
+ } = props;
57
+ const {
58
+ onEditStart,
59
+ onEditFinish
60
+ } = blockProps;
61
+ const entityKey = block.getEntityAt(0);
62
+ const entity = contentState.getEntity(entityKey);
63
+ const data = entity.getData();
64
+
65
+ const onInputChange = inputValue => {
66
+ // close `BlockquoteInput`
67
+ setIsInputOpen(false);
68
+ onEditFinish({
69
+ entityKey,
70
+ entityData: inputValue
71
+ });
72
+ };
73
+
74
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_blockquote.BlockquoteInput, {
75
+ isOpen: isInputOpen,
76
+ onCancel: () => {
77
+ setIsInputOpen(false);
78
+ onEditFinish();
79
+ },
80
+ onConfirm: onInputChange,
81
+ inputValue: data
82
+ }), /*#__PURE__*/_react.default.createElement(EditableBlock, null, /*#__PURE__*/_react.default.createElement(StyledBlockquote, {
83
+ data: data
84
+ }), /*#__PURE__*/_react.default.createElement(EditButton, {
85
+ onClick: () => {
86
+ // call `onEditStart` prop as we are trying to update the blockquote entity
87
+ onEditStart(); // open `BlockquoteInput`
88
+
89
+ setIsInputOpen(true);
90
+ }
91
+ }, /*#__PURE__*/_react.default.createElement("i", {
92
+ className: "fa-solid fa-pen"
93
+ }), /*#__PURE__*/_react.default.createElement("span", null, "Modify"))));
94
+ }
package/lib/buttons/annotation.js CHANGED
@@ -3,102 +3,110 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.AnnotationButton = AnnotationButton;
6
+ exports.createAnnotationButton = createAnnotationButton;
7
7
 
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
 
10
+ var _btNames = _interopRequireDefault(require("./bt-names"));
11
+
10
12
  var _draftJs = require("draft-js");
11
13
 
12
14
  var _modals = require("@keystone-ui/modals");
13
15
 
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+
14
18
  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
19
 
16
20
  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
21
 
18
- function AnnotationButton(props) {
19
- const toggleEntity = _draftJs.RichUtils.toggleLink;
20
- const {
21
- isActive,
22
- editorState,
23
- onChange,
24
- renderBasicEditor,
25
- decorators
26
- } = props;
27
- const [toShowInput, setToShowInput] = (0, _react.useState)(false);
28
- const [inputValue, setInputValue] = (0, _react.useState)({
29
- editorStateOfBasicEditor: _draftJs.EditorState.createEmpty(decorators)
30
- });
31
-
32
- const promptForAnnotation = e => {
33
- e.preventDefault();
34
- const selection = editorState.getSelection();
35
-
36
- if (!selection.isCollapsed()) {
37
- setToShowInput(true);
38
- }
39
- };
40
-
41
- const confirmAnnotation = () => {
42
- const contentState = editorState.getCurrentContent();
43
- const rawContentState = (0, _draftJs.convertToRaw)(inputValue.editorStateOfBasicEditor.getCurrentContent());
44
- const contentStateWithEntity = contentState.createEntity('ANNOTATION', 'MUTABLE', {
45
- rawContentState
22
+ 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];
23
+
24
+ function createAnnotationButton({
25
+ InnerEditor,
26
+ decorator
27
+ }) {
28
+ return function AnnotationButton(props) {
29
+ const toggleEntity = _draftJs.RichUtils.toggleLink;
30
+ const {
31
+ isActive,
32
+ editorState: editorStateOfOuterEditor,
33
+ onChange
34
+ } = props;
35
+ const [toShowInput, setToShowInput] = (0, _react.useState)(false);
36
+ const [inputValue, setInputValue] = (0, _react.useState)({
37
+ editorStateOfInnerEditor: _draftJs.EditorState.createEmpty(decorator)
46
38
  });
47
- const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
48
39
 
49
- const newEditorState = _draftJs.EditorState.set(editorState, {
50
- currentContent: contentStateWithEntity
51
- });
40
+ const promptForAnnotation = e => {
41
+ e.preventDefault();
42
+ const selection = editorStateOfOuterEditor.getSelection();
52
43
 
53
- onChange(toggleEntity(newEditorState, newEditorState.getSelection(), entityKey));
54
- setToShowInput(false);
55
- setInputValue({
56
- editorStateOfBasicEditor: _draftJs.EditorState.createEmpty(decorators)
57
- });
58
- };
44
+ if (!selection.isCollapsed()) {
45
+ setToShowInput(true);
46
+ }
47
+ };
59
48
 
60
- const removeAnnotation = () => {
61
- const selection = editorState.getSelection();
49
+ const confirmAnnotation = () => {
50
+ const contentState = editorStateOfOuterEditor.getCurrentContent();
51
+ const rawContentState = (0, _draftJs.convertToRaw)(inputValue.editorStateOfInnerEditor.getCurrentContent());
52
+ const contentStateWithEntity = contentState.createEntity('ANNOTATION', 'MUTABLE', {
53
+ rawContentState
54
+ });
55
+ const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
62
56
 
63
- if (!selection.isCollapsed()) {
64
- onChange(toggleEntity(editorState, selection, null));
65
- }
57
+ const newEditorState = _draftJs.EditorState.set(editorStateOfOuterEditor, {
58
+ currentContent: contentStateWithEntity
59
+ });
66
60
 
67
- setToShowInput(false);
68
- setInputValue({
69
- editorStateOfBasicEditor: _draftJs.EditorState.createEmpty(decorators)
70
- });
71
- };
61
+ onChange(toggleEntity(newEditorState, newEditorState.getSelection(), entityKey));
62
+ setToShowInput(false);
63
+ setInputValue({
64
+ editorStateOfInnerEditor: _draftJs.EditorState.createEmpty(decorator)
65
+ });
66
+ };
67
+
68
+ const removeAnnotation = () => {
69
+ const selection = editorStateOfOuterEditor.getSelection();
72
70
 
73
- const basicEditorJsx = renderBasicEditor({
74
- editorState: inputValue.editorStateOfBasicEditor,
75
- onChange: editorStateOfBasicEditor => {
71
+ if (!selection.isCollapsed()) {
72
+ onChange(toggleEntity(editorStateOfOuterEditor, selection, null));
73
+ }
74
+
75
+ setToShowInput(false);
76
76
  setInputValue({
77
- editorStateOfBasicEditor
77
+ editorStateOfInnerEditor: _draftJs.EditorState.createEmpty(decorator)
78
78
  });
79
- }
80
- });
81
-
82
- const urlInput = /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
83
- isOpen: toShowInput
84
- }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
85
- title: "Insert Annotation",
86
- actions: {
87
- cancel: {
88
- label: 'Cancel',
89
- action: removeAnnotation
90
- },
91
- confirm: {
92
- label: 'Confirm',
93
- action: confirmAnnotation
79
+ };
80
+
81
+ const input = /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
82
+ isOpen: toShowInput
83
+ }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
84
+ title: "Insert Annotation",
85
+ actions: {
86
+ cancel: {
87
+ label: 'Cancel',
88
+ action: removeAnnotation
89
+ },
90
+ confirm: {
91
+ label: 'Confirm',
92
+ action: confirmAnnotation
93
+ }
94
94
  }
95
- }
96
- }, basicEditorJsx));
97
-
98
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, urlInput, /*#__PURE__*/_react.default.createElement("div", {
99
- className: props.className,
100
- onMouseDown: isActive ? removeAnnotation : promptForAnnotation
101
- }, /*#__PURE__*/_react.default.createElement("i", {
102
- className: "far"
103
- }), /*#__PURE__*/_react.default.createElement("span", null, "Annotation")));
95
+ }, /*#__PURE__*/_react.default.createElement(InnerEditor, {
96
+ disabledButtons: disabledButtons,
97
+ editorState: inputValue.editorStateOfInnerEditor,
98
+ onChange: editorState => {
99
+ setInputValue({
100
+ editorStateOfInnerEditor: editorState
101
+ });
102
+ }
103
+ })));
104
+
105
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, input, /*#__PURE__*/_react.default.createElement("div", {
106
+ className: props.className,
107
+ onMouseDown: isActive ? removeAnnotation : promptForAnnotation
108
+ }, /*#__PURE__*/_react.default.createElement("i", {
109
+ className: "far"
110
+ }), /*#__PURE__*/_react.default.createElement("span", null, "Annotation")));
111
+ };
104
112
  }
package/lib/buttons/blockquote.js ADDED
@@ -0,0 +1,141 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.BlockquoteButton = BlockquoteButton;
7
+ exports.BlockquoteInput = BlockquoteInput;
8
+
9
+ var _react = _interopRequireWildcard(require("react"));
10
+
11
+ var _draftJs = require("draft-js");
12
+
13
+ var _modals = require("@keystone-ui/modals");
14
+
15
+ var _select = require("./select");
16
+
17
+ var _fields = require("@keystone-ui/fields");
18
+
19
+ 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); }
20
+
21
+ 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; }
22
+
23
+ var BlockquoteTypeEnum;
24
+
25
+ (function (BlockquoteTypeEnum) {
26
+ BlockquoteTypeEnum["borderLeft"] = "border_left";
27
+ BlockquoteTypeEnum["quoteLeft"] = "quote_left";
28
+ })(BlockquoteTypeEnum || (BlockquoteTypeEnum = {}));
29
+
30
+ var BlockquoteLabelEnum;
31
+
32
+ (function (BlockquoteLabelEnum) {
33
+ BlockquoteLabelEnum["borderLeft"] = "\u5DE6\u908A\u6846";
34
+ BlockquoteLabelEnum["quoteLeft"] = "\u5DE6\u5F15\u865F";
35
+ })(BlockquoteLabelEnum || (BlockquoteLabelEnum = {}));
36
+
37
+ function BlockquoteInput({
38
+ isOpen,
39
+ onConfirm,
40
+ onCancel,
41
+ inputValue
42
+ }) {
43
+ const [inputValueState, setInputValueState] = (0, _react.useState)(inputValue);
44
+
45
+ const confirmInput = () => {
46
+ onConfirm(inputValueState);
47
+ };
48
+
49
+ return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
50
+ isOpen: isOpen
51
+ }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
52
+ title: `Insert Embedded Code` //isOpen={toShowInput}
53
+ ,
54
+ actions: {
55
+ cancel: {
56
+ label: 'Cancel',
57
+ action: onCancel
58
+ },
59
+ confirm: {
60
+ label: 'Confirm',
61
+ action: confirmInput
62
+ }
63
+ }
64
+ }, /*#__PURE__*/_react.default.createElement(_select.Select, {
65
+ title: "\u7248\u578B",
66
+ value: inputValueState.type,
67
+ options: [{
68
+ label: BlockquoteLabelEnum.borderLeft,
69
+ value: BlockquoteTypeEnum.borderLeft
70
+ }, {
71
+ label: BlockquoteLabelEnum.quoteLeft,
72
+ value: BlockquoteTypeEnum.quoteLeft
73
+ }],
74
+ onChange: blockquoteType => {
75
+ setInputValueState({
76
+ type: blockquoteType,
77
+ text: inputValueState.text
78
+ });
79
+ }
80
+ }), /*#__PURE__*/_react.default.createElement(_fields.TextArea, {
81
+ onChange: e => setInputValueState({
82
+ type: inputValueState.type,
83
+ text: e.target.value
84
+ }),
85
+ placeholder: "\u5F15\u8A00\u6587\u5B57",
86
+ type: "text",
87
+ value: inputValueState.text,
88
+ style: {
89
+ marginBottom: '30px'
90
+ }
91
+ })));
92
+ }
93
+
94
+ function BlockquoteButton(props) {
95
+ const {
96
+ editorState,
97
+ onChange,
98
+ className
99
+ } = props;
100
+ const [isInputOpen, setIsInputOpen] = (0, _react.useState)(false);
101
+
102
+ const promptForInput = () => {
103
+ setIsInputOpen(true);
104
+ };
105
+
106
+ const onInputChange = inputValue => {
107
+ const contentState = editorState.getCurrentContent();
108
+ const contentStateWithEntity = contentState.createEntity('BLOCKQUOTE', 'IMMUTABLE', inputValue);
109
+ const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
110
+
111
+ const newEditorState = _draftJs.EditorState.set(editorState, {
112
+ currentContent: contentStateWithEntity
113
+ }); // The third parameter here is a space string, not an empty string
114
+ // If you set an empty string, you will get an error: Unknown DraftEntity key: null
115
+
116
+
117
+ onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
118
+ setIsInputOpen(false);
119
+ };
120
+
121
+ const onInputCancel = () => {
122
+ setIsInputOpen(false);
123
+ };
124
+
125
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isInputOpen && /*#__PURE__*/_react.default.createElement(BlockquoteInput, {
126
+ isOpen: isInputOpen,
127
+ onConfirm: onInputChange,
128
+ onCancel: onInputCancel,
129
+ inputValue: {
130
+ type: BlockquoteTypeEnum.borderLeft,
131
+ text: ''
132
+ }
133
+ }), /*#__PURE__*/_react.default.createElement("div", {
134
+ onClick: () => {
135
+ promptForInput();
136
+ },
137
+ className: className
138
+ }, /*#__PURE__*/_react.default.createElement("i", {
139
+ className: "fas fa-quote-left"
140
+ })));
141
+ }
package/lib/buttons/bt-names.js ADDED
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _default = {
8
+ // inline styles
9
+ bold: 'bold',
10
+ italic: 'italic',
11
+ underline: 'underline',
12
+ code: 'code',
13
+ // block styles
14
+ h2: 'header-two',
15
+ h3: 'header-three',
16
+ h4: 'header-four',
17
+ blockquote: 'blockquote',
18
+ ul: 'unordered-list-item',
19
+ ol: 'ordered-list-item',
20
+ codeBlock: 'code-block',
21
+ // custom styles
22
+ annotation: 'annotation',
23
+ embed: 'embed',
24
+ image: 'image',
25
+ infoBox: 'info-box',
26
+ link: 'link',
27
+ slideshow: 'slideshow'
28
+ };
29
+ exports.default = _default;
package/lib/buttons/image.js CHANGED
@@ -37,7 +37,7 @@ function ImageButton(props) {
37
37
  }
38
38
 
39
39
  const contentState = editorState.getCurrentContent();
40
- const contentStateWithEntity = contentState.createEntity('image', 'IMMUTABLE', { ...(selected === null || selected === void 0 ? void 0 : selected.image),
40
+ const contentStateWithEntity = contentState.createEntity('IMAGE', 'IMMUTABLE', { ...(selected === null || selected === void 0 ? void 0 : selected.image),
41
41
  desc: selected === null || selected === void 0 ? void 0 : selected.desc,
42
42
  alignment: align
43
43
  });
package/lib/buttons/info-box.js CHANGED
@@ -3,18 +3,18 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.InfoBoxButton = InfoBoxButton;
7
6
  exports.InfoBoxInput = InfoBoxInput;
7
+ exports.createInfoBoxButton = createInfoBoxButton;
8
8
 
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
 
11
+ var _btNames = _interopRequireDefault(require("./bt-names"));
12
+
11
13
  var _draftJs = require("draft-js");
12
14
 
13
15
  var _modals = require("@keystone-ui/modals");
14
16
 
15
- var _fields = require("@keystone-ui/fields");
16
-
17
- var _styledComponents = _interopRequireDefault(require("styled-components"));
17
+ var _select = require("./select");
18
18
 
19
19
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20
20
 
@@ -22,44 +22,36 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
22
22
 
23
23
  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; }
24
24
 
25
- const TitleInput = (0, _styledComponents.default)(_fields.TextInput)`
26
- margin-top: 30px;
27
- margin-bottom: 10px;
28
- `;
25
+ 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.infoBox, _btNames.default.slideshow];
26
+ var InfoBoxTypeEnum;
27
+
28
+ (function (InfoBoxTypeEnum) {
29
+ InfoBoxTypeEnum["newsChargeStation"] = "news-charge-station";
30
+ InfoBoxTypeEnum["headerBorder"] = "header-border";
31
+ InfoBoxTypeEnum["boxBorder"] = "box-border";
32
+ })(InfoBoxTypeEnum || (InfoBoxTypeEnum = {}));
33
+
34
+ var InfoBoxLabelEnum;
35
+
36
+ (function (InfoBoxLabelEnum) {
37
+ InfoBoxLabelEnum["newsChargeStation"] = "\u65B0\u805E\u5145\u96FB\u5668";
38
+ InfoBoxLabelEnum["headerBorder"] = "\u7121\u7DDA\u6846\u7248";
39
+ InfoBoxLabelEnum["boxBorder"] = "\u6709\u7DDA\u6846\u7248";
40
+ })(InfoBoxLabelEnum || (InfoBoxLabelEnum = {}));
29
41
 
30
42
  function InfoBoxInput(props) {
31
43
  const {
32
44
  isOpen,
33
45
  onChange,
34
46
  onCancel,
35
- title,
36
- rawContentStateForInfoBoxEditor,
37
- renderBasicEditor,
38
- decorators
47
+ Editor,
48
+ decorator,
49
+ inputValue
39
50
  } = props;
40
- const rawContentState = rawContentStateForInfoBoxEditor || {
41
- blocks: [],
42
- entityMap: {}
43
- };
44
- const initialInputValue = {
45
- title: title || '',
46
- // create an `editorState` from raw content state object
47
- editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(rawContentState), decorators)
48
- };
49
- const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
50
-
51
- const clearInputValue = () => {
52
- setInputValue(initialInputValue);
53
- };
54
-
55
- const basicEditorJsx = renderBasicEditor({
56
- editorState: inputValue.editorStateOfBasicEditor,
57
- onChange: editorStateOfBasicEditor => {
58
- setInputValue({
59
- title: inputValue.title,
60
- editorStateOfBasicEditor
61
- });
62
- }
51
+ const contentState = (0, _draftJs.convertFromRaw)(inputValue.rawContentState);
52
+ const [inputValueState, setInputValueState] = (0, _react.useState)({
53
+ type: inputValue.type,
54
+ editorState: _draftJs.EditorState.createWithContent(contentState, decorator)
63
55
  });
64
56
  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
65
57
  isOpen: isOpen
@@ -69,7 +61,6 @@ function InfoBoxInput(props) {
69
61
  cancel: {
70
62
  label: 'Cancel',
71
63
  action: () => {
72
- clearInputValue();
73
64
  onCancel();
74
65
  }
75
66
  },
@@ -77,69 +68,99 @@ function InfoBoxInput(props) {
77
68
  label: 'Confirm',
78
69
  action: () => {
79
70
  onChange({
80
- title: inputValue.title,
81
- // convert `contentState` of the `editorState` into raw content state object
82
- rawContentState: (0, _draftJs.convertToRaw)(inputValue.editorStateOfBasicEditor.getCurrentContent())
71
+ type: inputValueState.type,
72
+ rawContentState: (0, _draftJs.convertToRaw)(inputValueState.editorState.getCurrentContent())
83
73
  });
84
- clearInputValue();
85
74
  }
86
75
  }
87
76
  }
88
- }, /*#__PURE__*/_react.default.createElement(TitleInput, {
89
- onChange: e => setInputValue({
90
- title: e.target.value,
91
- editorStateOfBasicEditor: inputValue.editorStateOfBasicEditor
92
- }),
93
- type: "text",
94
- placeholder: "Title",
95
- value: inputValue.title
96
- }), basicEditorJsx));
77
+ }, /*#__PURE__*/_react.default.createElement(_select.Select, {
78
+ title: "\u7248\u578B",
79
+ value: inputValueState.type,
80
+ options: [{
81
+ label: InfoBoxLabelEnum.newsChargeStation,
82
+ value: InfoBoxTypeEnum.newsChargeStation
83
+ }, {
84
+ label: InfoBoxLabelEnum.headerBorder,
85
+ value: InfoBoxTypeEnum.headerBorder
86
+ }, {
87
+ label: InfoBoxLabelEnum.boxBorder,
88
+ value: InfoBoxTypeEnum.boxBorder
89
+ }],
90
+ onChange: infoBoxType => {
91
+ setInputValueState({
92
+ type: infoBoxType,
93
+ editorState: inputValueState.editorState
94
+ });
95
+ }
96
+ }), /*#__PURE__*/_react.default.createElement(Editor, {
97
+ disabledButtons: disabledButtons,
98
+ editorState: inputValueState.editorState,
99
+ onChange: editorState => {
100
+ setInputValueState({
101
+ type: inputValueState.type,
102
+ editorState
103
+ });
104
+ }
105
+ })));
97
106
  }
98
107
 
99
- function InfoBoxButton(props) {
100
- const [toShowInput, setToShowInput] = (0, _react.useState)(false);
101
- const {
102
- className,
103
- editorState,
104
- onChange: onEditorStateChange,
105
- renderBasicEditor
106
- } = props;
107
-
108
- const onChange = ({
109
- title,
110
- rawContentState
111
- }) => {
112
- const contentState = editorState.getCurrentContent(); // create an InfoBox entity
113
-
114
- const contentStateWithEntity = contentState.createEntity('INFOBOX', 'IMMUTABLE', {
115
- title,
108
+ function createInfoBoxButton({
109
+ InnerEditor,
110
+ decorator
111
+ }) {
112
+ return function InfoBoxButton(props) {
113
+ const [toShowInput, setToShowInput] = (0, _react.useState)(false);
114
+ const {
115
+ className,
116
+ editorState,
117
+ onChange: onEditorStateChange
118
+ } = props;
119
+
120
+ const onChange = ({
121
+ type,
116
122
  rawContentState
117
- });
118
- const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
123
+ }) => {
124
+ const contentState = editorState.getCurrentContent(); // create an InfoBox entity
119
125
 
120
- const newEditorState = _draftJs.EditorState.set(editorState, {
121
- currentContent: contentStateWithEntity
122
- }); //The third parameter here is a space string, not an empty string
123
- //If you set an empty string, you will get an error: Unknown DraftEntity key: null
126
+ const contentStateWithEntity = contentState.createEntity('INFOBOX', 'IMMUTABLE', {
127
+ type,
128
+ rawContentState
129
+ });
130
+ const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
124
131
 
132
+ const newEditorState = _draftJs.EditorState.set(editorState, {
133
+ currentContent: contentStateWithEntity
134
+ }); //The third parameter here is a space string, not an empty string
135
+ //If you set an empty string, you will get an error: Unknown DraftEntity key: null
125
136
 
126
- onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
127
- setToShowInput(false);
128
- };
129
137
 
130
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(InfoBoxInput, {
131
- renderBasicEditor: renderBasicEditor,
132
- onChange: onChange,
133
- onCancel: () => {
138
+ onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
134
139
  setToShowInput(false);
135
- },
136
- isOpen: toShowInput
137
- }), /*#__PURE__*/_react.default.createElement("div", {
138
- className: className,
139
- onClick: () => {
140
- setToShowInput(true);
141
- }
142
- }, /*#__PURE__*/_react.default.createElement("i", {
143
- className: "far"
144
- }), /*#__PURE__*/_react.default.createElement("span", null, "InfoBox")));
140
+ };
141
+
142
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowInput && /*#__PURE__*/_react.default.createElement(InfoBoxInput, {
143
+ Editor: InnerEditor,
144
+ decorator: decorator,
145
+ onChange: onChange,
146
+ onCancel: () => {
147
+ setToShowInput(false);
148
+ },
149
+ isOpen: toShowInput,
150
+ inputValue: {
151
+ type: InfoBoxTypeEnum.newsChargeStation,
152
+ rawContentState: {
153
+ blocks: [],
154
+ entityMap: {}
155
+ }
156
+ }
157
+ }), /*#__PURE__*/_react.default.createElement("div", {
158
+ className: className,
159
+ onClick: () => {
160
+ setToShowInput(true);
161
+ }
162
+ }, /*#__PURE__*/_react.default.createElement("i", {
163
+ className: "far"
164
+ }), /*#__PURE__*/_react.default.createElement("span", null, "InfoBox")));
165
+ };
145
166
  }
package/lib/buttons/select.js ADDED
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Select = Select;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
11
+
12
+ var _fields = require("@keystone-ui/fields");
13
+
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+
16
+ const TypeSelectBlock = _styledComponents.default.div`
17
+ margin: 10px 0;
18
+ `;
19
+ const Label = _styledComponents.default.label`
20
+ display: block;
21
+ margin: 10px 0;
22
+ font-weight: 600;
23
+ `;
24
+
25
+ function Select({
26
+ title,
27
+ value,
28
+ options,
29
+ onChange
30
+ }) {
31
+ return /*#__PURE__*/_react.default.createElement(TypeSelectBlock, null, /*#__PURE__*/_react.default.createElement(Label, {
32
+ htmlFor: "infoBoxType"
33
+ }, title), /*#__PURE__*/_react.default.createElement(_fields.Select, {
34
+ value: options.find(option => option.value === value) || null,
35
+ options: options,
36
+ onChange: option => {
37
+ onChange(option.value);
38
+ }
39
+ }));
40
+ }
package/lib/buttons/selector/align-selector.js CHANGED
@@ -59,7 +59,7 @@ function AlignSelector(props) {
59
59
  }, "\u5C0D\u9F4A"), /*#__PURE__*/_react.default.createElement(AlignSelect, {
60
60
  id: "alignment" // default align === undefined
61
61
  ,
62
- value: options.find(option => option.value === align),
62
+ value: options.find(option => option.value === align) || null,
63
63
  options: options,
64
64
  onChange: option => {
65
65
  onChange(option.value);
package/lib/buttons/slideshow.js CHANGED
@@ -35,7 +35,7 @@ function SlideshowButton(props) {
35
35
  }
36
36
 
37
37
  const contentState = editorState.getCurrentContent();
38
- const contentStateWithEntity = contentState.createEntity('slideshow', 'IMMUTABLE', {
38
+ const contentStateWithEntity = contentState.createEntity('SLIDESHOW', 'IMMUTABLE', {
39
39
  alignment: align,
40
40
  delay,
41
41
  images: selected.map(ele => {
package/lib/draft-editor.js CHANGED
@@ -3,24 +3,24 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.buttonNames = exports.RichTextEditor = void 0;
7
- Object.defineProperty(exports, "decorators", {
6
+ exports.RichTextEditor = void 0;
7
+ Object.defineProperty(exports, "decorator", {
8
8
  enumerable: true,
9
9
  get: function () {
10
- return _draftRenderer.decorators;
10
+ return _draftRenderer.decorator;
11
11
  }
12
12
  });
13
13
  exports.default = void 0;
14
14
 
15
15
  var _react = _interopRequireDefault(require("react"));
16
16
 
17
+ var _btNames = _interopRequireDefault(require("./buttons/bt-names"));
18
+
17
19
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
18
20
 
19
21
  var _draftJs = require("draft-js");
20
22
 
21
- var _draftRenderer = require("@kids-reporter/draft-renderer");
22
-
23
- var _annotation = require("./buttons/annotation");
23
+ var _blockquote = require("./buttons/blockquote");
24
24
 
25
25
  var _embeddedCode = require("./buttons/embedded-code");
26
26
 
@@ -28,46 +28,26 @@ var _enlarge = require("./buttons/enlarge");
28
28
 
29
29
  var _image = require("./buttons/image");
30
30
 
31
- var _infoBox = require("./buttons/info-box");
32
-
33
31
  var _link = require("./buttons/link");
34
32
 
35
33
  var _slideshow = require("./buttons/slideshow");
36
34
 
37
35
  var _imageSelector = require("./buttons/selector/image-selector");
38
36
 
37
+ var _blockRendererFn = require("./block-renderer-fn");
38
+
39
+ var _draftRenderer = require("@kids-reporter/draft-renderer");
40
+
41
+ var _annotation = require("./buttons/annotation");
42
+
43
+ var _infoBox = require("./buttons/info-box");
44
+
39
45
  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); }
40
46
 
41
47
  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; }
42
48
 
43
49
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
44
50
 
45
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
46
-
47
- const buttonNames = {
48
- // inline styles
49
- bold: 'bold',
50
- italic: 'italic',
51
- underline: 'underline',
52
- code: 'code',
53
- // block styles
54
- h2: 'header-two',
55
- h3: 'header-three',
56
- h4: 'header-four',
57
- blockquote: 'blockquote',
58
- ul: 'unordered-list-item',
59
- ol: 'ordered-list-item',
60
- codeBlock: 'code-block',
61
- // custom styles
62
- annotation: 'annotation',
63
- embed: 'embed',
64
- image: 'image',
65
- infoBox: 'info-box',
66
- link: 'link',
67
- slideshow: 'slideshow'
68
- };
69
- exports.buttonNames = buttonNames;
70
- const disabledButtonsOnBasicEditor = [buttonNames.h2, buttonNames.h3, buttonNames.code, buttonNames.codeBlock, buttonNames.blockquote, buttonNames.annotation, buttonNames.embed, buttonNames.image, buttonNames.infoBox, buttonNames.slideshow];
71
51
  const buttonStyle = (0, _styledComponents.css)`
72
52
  cursor: pointer;
73
53
  border-radius: 6px;
@@ -128,7 +108,7 @@ const buttonStyle = (0, _styledComponents.css)`
128
108
  const CustomButton = _styledComponents.default.div`
129
109
  ${buttonStyle}
130
110
  `;
131
- const CustomAnnotationButton = (0, _styledComponents.default)(_annotation.AnnotationButton)`
111
+ const CustomBlockquoteButton = (0, _styledComponents.default)(_blockquote.BlockquoteButton)`
132
112
  ${buttonStyle}
133
113
  `;
134
114
  const CustomLinkButton = (0, _styledComponents.default)(_link.LinkButton)`
@@ -147,9 +127,6 @@ const CustomSlideshowButton = (0, _styledComponents.default)(_slideshow.Slidesho
147
127
  const CustomEmbeddedCodeButton = (0, _styledComponents.default)(_embeddedCode.EmbeddedCodeButton)`
148
128
  ${buttonStyle}
149
129
  `;
150
- const CustomInfoBoxButton = (0, _styledComponents.default)(_infoBox.InfoBoxButton)`
151
- ${buttonStyle}
152
- `;
153
130
  const DraftEditorWrapper = _styledComponents.default.div`
154
131
  /* Rich-editor default setting (.RichEditor-root)*/
155
132
  background: #fff;
@@ -331,7 +308,7 @@ class RichTextEditor extends _react.default.Component {
331
308
  });
332
309
  };
333
310
  blockRendererFn = block => {
334
- const atomicBlockObj = (0, _draftRenderer.atomicBlockRenderer)(block);
311
+ const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);
335
312
 
336
313
  if (atomicBlockObj) {
337
314
  const onEditStart = () => {
@@ -352,8 +329,8 @@ class RichTextEditor extends _react.default.Component {
352
329
  const onEditFinish = ({
353
330
  entityKey,
354
331
  entityData
355
- }) => {
356
- if (entityKey) {
332
+ } = {}) => {
333
+ if (entityKey && entityData) {
357
334
  const oldContentState = this.props.editorState.getCurrentContent();
358
335
  const newContentState = oldContentState.replaceEntityData(entityKey, entityData);
359
336
  this.onChange(_draftJs.EditorState.set(this.props.editorState, {
@@ -376,12 +353,7 @@ class RichTextEditor extends _react.default.Component {
376
353
  atomicBlockObj['props'] = {
377
354
  onEditStart,
378
355
  onEditFinish,
379
- getMainEditorReadOnly: () => this.state.readOnly,
380
- renderBasicEditor: propsOfBasicEditor => {
381
- return /*#__PURE__*/_react.default.createElement(RichTextEditor, _extends({}, propsOfBasicEditor, {
382
- disabledButtons: disabledButtonsOnBasicEditor
383
- }));
384
- }
356
+ getMainEditorReadOnly: () => this.state.readOnly
385
357
  };
386
358
  }
387
359
 
@@ -397,7 +369,7 @@ class RichTextEditor extends _react.default.Component {
397
369
  } = this.props;
398
370
 
399
371
  if (!(editorState instanceof _draftJs.EditorState)) {
400
- editorState = _draftJs.EditorState.createEmpty(_draftRenderer.decorators);
372
+ editorState = _draftJs.EditorState.createEmpty(_draftRenderer.decorator);
401
373
  }
402
374
 
403
375
  const {
@@ -405,13 +377,6 @@ class RichTextEditor extends _react.default.Component {
405
377
  readOnly
406
378
  } = this.state;
407
379
  const entityType = this.getEntityType(editorState);
408
-
409
- const renderBasicEditor = propsOfBasicEditor => {
410
- return /*#__PURE__*/_react.default.createElement(RichTextEditor, _extends({}, propsOfBasicEditor, {
411
- disabledButtons: disabledButtonsOnBasicEditor
412
- }));
413
- };
414
-
415
380
  return /*#__PURE__*/_react.default.createElement(DraftEditorContainer, {
416
381
  isEnlarged: isEnlarged
417
382
  }, /*#__PURE__*/_react.default.createElement(DraftEditorWrapper, null, /*#__PURE__*/_react.default.createElement("link", {
@@ -422,10 +387,6 @@ class RichTextEditor extends _react.default.Component {
422
387
  href: "https://storage.googleapis.com/static-readr-tw-dev/cdn/draft-js/rich-editor.css",
423
388
  rel: "stylesheet",
424
389
  type: "text/css"
425
- }), /*#__PURE__*/_react.default.createElement("link", {
426
- href: "https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.11.7/Draft.css",
427
- rel: "stylesheet",
428
- type: "text/css"
429
390
  }), /*#__PURE__*/_react.default.createElement("link", {
430
391
  href: "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css",
431
392
  rel: "stylesheet",
@@ -444,40 +405,41 @@ class RichTextEditor extends _react.default.Component {
444
405
  onToggle: this.toggleEnlarge,
445
406
  isEnlarged: isEnlarged
446
407
  })), /*#__PURE__*/_react.default.createElement(CustomLinkButton, {
447
- isDisabled: disabledButtons.includes(buttonNames.link),
408
+ isDisabled: disabledButtons.includes(_btNames.default.link),
448
409
  isActive: entityType === 'LINK',
449
410
  editorState: editorState,
450
411
  onChange: this.onChange,
451
412
  readOnly: this.state.readOnly
413
+ }), /*#__PURE__*/_react.default.createElement(CustomBlockquoteButton, {
414
+ isDisabled: disabledButtons.includes(_btNames.default.blockquote),
415
+ editorState: editorState,
416
+ onChange: this.onChange,
417
+ readOnly: this.state.readOnly
452
418
  }), /*#__PURE__*/_react.default.createElement(CustomAnnotationButton, {
453
- isDisabled: disabledButtons.includes(buttonNames.annotation),
419
+ isDisabled: disabledButtons.includes(_btNames.default.annotation),
454
420
  isActive: entityType === 'ANNOTATION',
455
421
  editorState: editorState,
456
422
  onChange: this.onChange,
457
- readOnly: this.state.readOnly,
458
- renderBasicEditor: renderBasicEditor,
459
- decorators: _draftRenderer.decorators
423
+ readOnly: this.state.readOnly
460
424
  }), /*#__PURE__*/_react.default.createElement(CustomImageButton, {
461
- isDisabled: disabledButtons.includes(buttonNames.image),
425
+ isDisabled: disabledButtons.includes(_btNames.default.image),
462
426
  editorState: editorState,
463
427
  onChange: this.onChange,
464
428
  readOnly: this.state.readOnly,
465
429
  ImageSelector: _imageSelector.ImageSelector
466
430
  }), /*#__PURE__*/_react.default.createElement(CustomSlideshowButton, {
467
- isDisabled: disabledButtons.includes(buttonNames.slideshow),
431
+ isDisabled: disabledButtons.includes(_btNames.default.slideshow),
468
432
  editorState: editorState,
469
433
  onChange: this.onChange,
470
434
  readOnly: this.state.readOnly,
471
435
  ImageSelector: _imageSelector.ImageSelector
472
436
  }), /*#__PURE__*/_react.default.createElement(CustomInfoBoxButton, {
473
- isDisabled: disabledButtons.includes(buttonNames.infoBox),
437
+ isDisabled: disabledButtons.includes(_btNames.default.infoBox),
474
438
  editorState: editorState,
475
439
  onChange: this.onChange,
476
- readOnly: this.state.readOnly,
477
- renderBasicEditor: renderBasicEditor,
478
- decorators: _draftRenderer.decorators
440
+ readOnly: this.state.readOnly
479
441
  }), /*#__PURE__*/_react.default.createElement(CustomEmbeddedCodeButton, {
480
- isDisabled: disabledButtons.includes(buttonNames.embed),
442
+ isDisabled: disabledButtons.includes(_btNames.default.embed),
481
443
  editorState: editorState,
482
444
  onChange: this.onChange,
483
445
  readOnly: this.state.readOnly
@@ -540,10 +502,6 @@ const blockStyles = [{
540
502
  label: 'H4',
541
503
  style: 'header-four',
542
504
  icon: ''
543
- }, {
544
- label: 'Blockquote',
545
- style: 'blockquote',
546
- icon: 'fas fa-quote-right'
547
505
  }, {
548
506
  label: 'UL',
549
507
  style: 'unordered-list-item',
@@ -609,8 +567,22 @@ const InlineStyleControls = props => {
609
567
  })));
610
568
  };
611
569
 
570
+ const AnnotationButton = (0, _annotation.createAnnotationButton)({
571
+ InnerEditor: RichTextEditor,
572
+ decorator: _draftRenderer.decorator
573
+ });
574
+ const CustomAnnotationButton = (0, _styledComponents.default)(AnnotationButton)`
575
+ ${buttonStyle}
576
+ `;
577
+ const InfoBoxButton = (0, _infoBox.createInfoBoxButton)({
578
+ InnerEditor: RichTextEditor,
579
+ decorator: _draftRenderer.decorator
580
+ });
581
+ const CustomInfoBoxButton = (0, _styledComponents.default)(InfoBoxButton)`
582
+ ${buttonStyle}
583
+ `;
612
584
  var _default = {
613
585
  RichTextEditor,
614
- decorators: _draftRenderer.decorators
586
+ decorator: _draftRenderer.decorator
615
587
  };
616
588
  exports.default = _default;
package/lib/draft-editor.type.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kids-reporter/draft-editor",
3
- "version": "0.2.1",
3
+ "version": "0.4.0",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
@@ -23,7 +23,7 @@
23
23
  ],
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
- "@kids-reporter/draft-renderer": "0.2.1",
26
+ "@kids-reporter/draft-renderer": "0.4.0",
27
27
  "draft-js": "^0.11.7"
28
28
  },
29
29
  "peerDependencies": {