@kids-reporter/draft-editor 0.3.0 → 0.4.1

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 (11) hide show
  1. package/lib/block-renderer-fn.js +2 -2
  2. package/lib/buttons/annotation.js +85 -77
  3. package/lib/buttons/blockquote.js +23 -49
  4. package/lib/buttons/bt-names.js +29 -0
  5. package/lib/buttons/info-box.js +110 -89
  6. package/lib/buttons/select.js +40 -0
  7. package/lib/draft-editor.js +39 -71
  8. package/lib/draft-editor.type.js +5 -0
  9. package/lib/index.js +6 -2
  10. package/package.json +2 -2
  11. /package/lib/{block-renderers/atomic-block.js → block-renderer-fn.type.js} +0 -0
package/lib/block-renderer-fn.js CHANGED
@@ -12,7 +12,7 @@ var _draftRenderer = require("@kids-reporter/draft-renderer");
12
12
  const {
13
13
  EmbeddedCodeInArticleBody,
14
14
  ImageInArticleBody,
15
- InfoBoxBlock,
15
+ InfoBoxInArticleBody,
16
16
  SlideshowInArticleBody
17
17
  } = _draftRenderer.blockRenderers;
18
18
 
@@ -50,7 +50,7 @@ const AtomicBlock = props => {
50
50
 
51
51
  case 'INFOBOX':
52
52
  {
53
- return InfoBoxBlock({
53
+ return InfoBoxInArticleBody({
54
54
  data: entityData
55
55
  });
56
56
  }
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 CHANGED
@@ -8,58 +8,31 @@ exports.BlockquoteInput = BlockquoteInput;
8
8
 
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
 
11
- var _styledComponents = _interopRequireDefault(require("styled-components"));
12
-
13
11
  var _draftJs = require("draft-js");
14
12
 
15
13
  var _modals = require("@keystone-ui/modals");
16
14
 
17
- var _fields = require("@keystone-ui/fields");
15
+ var _select = require("./select");
18
16
 
19
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+ var _fields = require("@keystone-ui/fields");
20
18
 
21
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); }
22
20
 
23
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; }
24
22
 
25
- const Label = _styledComponents.default.label`
26
- display: block;
27
- margin: 10px 0;
28
- font-weight: 600;
29
- `;
30
- var BlockquoteType;
31
-
32
- (function (BlockquoteType) {
33
- BlockquoteType["borderLeft"] = "border_left";
34
- BlockquoteType["quoteLeft"] = "quote_left";
35
- })(BlockquoteType || (BlockquoteType = {}));
36
-
37
- var BlockquoteLabel;
38
-
39
- (function (BlockquoteLabel) {
40
- BlockquoteLabel["borderLeft"] = "\u5DE6\u908A\u6846";
41
- BlockquoteLabel["quoteLeft"] = "\u5DE6\u5F15\u865F";
42
- })(BlockquoteLabel || (BlockquoteLabel = {}));
43
-
44
- const TypeSelectBlock = _styledComponents.default.div`
45
- margin: 10px 0;
46
- `;
47
-
48
- function TypeSelect({
49
- type,
50
- options,
51
- onChange
52
- }) {
53
- return /*#__PURE__*/_react.default.createElement(TypeSelectBlock, null, /*#__PURE__*/_react.default.createElement(Label, {
54
- htmlFor: "blockquoteType"
55
- }, "\u7248\u578B"), /*#__PURE__*/_react.default.createElement(_fields.Select, {
56
- value: options.find(option => option.value === type) || null,
57
- options: options,
58
- onChange: option => {
59
- onChange(option.value);
60
- }
61
- }));
62
- }
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 = {}));
63
36
 
64
37
  function BlockquoteInput({
65
38
  isOpen,
@@ -88,14 +61,15 @@ function BlockquoteInput({
88
61
  action: confirmInput
89
62
  }
90
63
  }
91
- }, /*#__PURE__*/_react.default.createElement(TypeSelect, {
92
- type: inputValueState.type,
64
+ }, /*#__PURE__*/_react.default.createElement(_select.Select, {
65
+ title: "\u7248\u578B",
66
+ value: inputValueState.type,
93
67
  options: [{
94
- label: BlockquoteLabel.borderLeft,
95
- value: BlockquoteType.borderLeft
68
+ label: BlockquoteLabelEnum.borderLeft,
69
+ value: BlockquoteTypeEnum.borderLeft
96
70
  }, {
97
- label: BlockquoteLabel.quoteLeft,
98
- value: BlockquoteType.quoteLeft
71
+ label: BlockquoteLabelEnum.quoteLeft,
72
+ value: BlockquoteTypeEnum.quoteLeft
99
73
  }],
100
74
  onChange: blockquoteType => {
101
75
  setInputValueState({
@@ -153,7 +127,7 @@ function BlockquoteButton(props) {
153
127
  onConfirm: onInputChange,
154
128
  onCancel: onInputCancel,
155
129
  inputValue: {
156
- type: BlockquoteType.borderLeft,
130
+ type: BlockquoteTypeEnum.borderLeft,
157
131
  text: ''
158
132
  }
159
133
  }), /*#__PURE__*/_react.default.createElement("div", {
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/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/draft-editor.js CHANGED
@@ -3,27 +3,23 @@
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 _blockRendererFn = require("./block-renderer-fn");
22
-
23
- var _draftRenderer = require("@kids-reporter/draft-renderer");
24
-
25
- var _annotation = require("./buttons/annotation");
26
-
27
23
  var _blockquote = require("./buttons/blockquote");
28
24
 
29
25
  var _embeddedCode = require("./buttons/embedded-code");
@@ -32,46 +28,26 @@ var _enlarge = require("./buttons/enlarge");
32
28
 
33
29
  var _image = require("./buttons/image");
34
30
 
35
- var _infoBox = require("./buttons/info-box");
36
-
37
31
  var _link = require("./buttons/link");
38
32
 
39
33
  var _slideshow = require("./buttons/slideshow");
40
34
 
41
35
  var _imageSelector = require("./buttons/selector/image-selector");
42
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
+
43
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); }
44
46
 
45
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; }
46
48
 
47
49
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
48
50
 
49
- 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); }
50
-
51
- const buttonNames = {
52
- // inline styles
53
- bold: 'bold',
54
- italic: 'italic',
55
- underline: 'underline',
56
- code: 'code',
57
- // block styles
58
- h2: 'header-two',
59
- h3: 'header-three',
60
- h4: 'header-four',
61
- blockquote: 'blockquote',
62
- ul: 'unordered-list-item',
63
- ol: 'ordered-list-item',
64
- codeBlock: 'code-block',
65
- // custom styles
66
- annotation: 'annotation',
67
- embed: 'embed',
68
- image: 'image',
69
- infoBox: 'info-box',
70
- link: 'link',
71
- slideshow: 'slideshow'
72
- };
73
- exports.buttonNames = buttonNames;
74
- const disabledButtonsOnBasicEditor = [buttonNames.h2, buttonNames.h3, buttonNames.code, buttonNames.codeBlock, buttonNames.blockquote, buttonNames.annotation, buttonNames.embed, buttonNames.image, buttonNames.infoBox, buttonNames.slideshow];
75
51
  const buttonStyle = (0, _styledComponents.css)`
76
52
  cursor: pointer;
77
53
  border-radius: 6px;
@@ -132,9 +108,6 @@ const buttonStyle = (0, _styledComponents.css)`
132
108
  const CustomButton = _styledComponents.default.div`
133
109
  ${buttonStyle}
134
110
  `;
135
- const CustomAnnotationButton = (0, _styledComponents.default)(_annotation.AnnotationButton)`
136
- ${buttonStyle}
137
- `;
138
111
  const CustomBlockquoteButton = (0, _styledComponents.default)(_blockquote.BlockquoteButton)`
139
112
  ${buttonStyle}
140
113
  `;
@@ -154,9 +127,6 @@ const CustomSlideshowButton = (0, _styledComponents.default)(_slideshow.Slidesho
154
127
  const CustomEmbeddedCodeButton = (0, _styledComponents.default)(_embeddedCode.EmbeddedCodeButton)`
155
128
  ${buttonStyle}
156
129
  `;
157
- const CustomInfoBoxButton = (0, _styledComponents.default)(_infoBox.InfoBoxButton)`
158
- ${buttonStyle}
159
- `;
160
130
  const DraftEditorWrapper = _styledComponents.default.div`
161
131
  /* Rich-editor default setting (.RichEditor-root)*/
162
132
  background: #fff;
@@ -383,12 +353,7 @@ class RichTextEditor extends _react.default.Component {
383
353
  atomicBlockObj['props'] = {
384
354
  onEditStart,
385
355
  onEditFinish,
386
- getMainEditorReadOnly: () => this.state.readOnly,
387
- renderBasicEditor: propsOfBasicEditor => {
388
- return /*#__PURE__*/_react.default.createElement(RichTextEditor, _extends({}, propsOfBasicEditor, {
389
- disabledButtons: disabledButtonsOnBasicEditor
390
- }));
391
- }
356
+ getMainEditorReadOnly: () => this.state.readOnly
392
357
  };
393
358
  }
394
359
 
@@ -404,7 +369,7 @@ class RichTextEditor extends _react.default.Component {
404
369
  } = this.props;
405
370
 
406
371
  if (!(editorState instanceof _draftJs.EditorState)) {
407
- editorState = _draftJs.EditorState.createEmpty(_draftRenderer.decorators);
372
+ editorState = _draftJs.EditorState.createEmpty(_draftRenderer.decorator);
408
373
  }
409
374
 
410
375
  const {
@@ -412,13 +377,6 @@ class RichTextEditor extends _react.default.Component {
412
377
  readOnly
413
378
  } = this.state;
414
379
  const entityType = this.getEntityType(editorState);
415
-
416
- const renderBasicEditor = propsOfBasicEditor => {
417
- return /*#__PURE__*/_react.default.createElement(RichTextEditor, _extends({}, propsOfBasicEditor, {
418
- disabledButtons: disabledButtonsOnBasicEditor
419
- }));
420
- };
421
-
422
380
  return /*#__PURE__*/_react.default.createElement(DraftEditorContainer, {
423
381
  isEnlarged: isEnlarged
424
382
  }, /*#__PURE__*/_react.default.createElement(DraftEditorWrapper, null, /*#__PURE__*/_react.default.createElement("link", {
@@ -447,45 +405,41 @@ class RichTextEditor extends _react.default.Component {
447
405
  onToggle: this.toggleEnlarge,
448
406
  isEnlarged: isEnlarged
449
407
  })), /*#__PURE__*/_react.default.createElement(CustomLinkButton, {
450
- isDisabled: disabledButtons.includes(buttonNames.link),
408
+ isDisabled: disabledButtons.includes(_btNames.default.link),
451
409
  isActive: entityType === 'LINK',
452
410
  editorState: editorState,
453
411
  onChange: this.onChange,
454
412
  readOnly: this.state.readOnly
455
413
  }), /*#__PURE__*/_react.default.createElement(CustomBlockquoteButton, {
456
- isDisabled: disabledButtons.includes(buttonNames.blockquote),
414
+ isDisabled: disabledButtons.includes(_btNames.default.blockquote),
457
415
  editorState: editorState,
458
416
  onChange: this.onChange,
459
417
  readOnly: this.state.readOnly
460
418
  }), /*#__PURE__*/_react.default.createElement(CustomAnnotationButton, {
461
- isDisabled: disabledButtons.includes(buttonNames.annotation),
419
+ isDisabled: disabledButtons.includes(_btNames.default.annotation),
462
420
  isActive: entityType === 'ANNOTATION',
463
421
  editorState: editorState,
464
422
  onChange: this.onChange,
465
- readOnly: this.state.readOnly,
466
- renderBasicEditor: renderBasicEditor,
467
- decorators: _draftRenderer.decorators
423
+ readOnly: this.state.readOnly
468
424
  }), /*#__PURE__*/_react.default.createElement(CustomImageButton, {
469
- isDisabled: disabledButtons.includes(buttonNames.image),
425
+ isDisabled: disabledButtons.includes(_btNames.default.image),
470
426
  editorState: editorState,
471
427
  onChange: this.onChange,
472
428
  readOnly: this.state.readOnly,
473
429
  ImageSelector: _imageSelector.ImageSelector
474
430
  }), /*#__PURE__*/_react.default.createElement(CustomSlideshowButton, {
475
- isDisabled: disabledButtons.includes(buttonNames.slideshow),
431
+ isDisabled: disabledButtons.includes(_btNames.default.slideshow),
476
432
  editorState: editorState,
477
433
  onChange: this.onChange,
478
434
  readOnly: this.state.readOnly,
479
435
  ImageSelector: _imageSelector.ImageSelector
480
436
  }), /*#__PURE__*/_react.default.createElement(CustomInfoBoxButton, {
481
- isDisabled: disabledButtons.includes(buttonNames.infoBox),
437
+ isDisabled: disabledButtons.includes(_btNames.default.infoBox),
482
438
  editorState: editorState,
483
439
  onChange: this.onChange,
484
- readOnly: this.state.readOnly,
485
- renderBasicEditor: renderBasicEditor,
486
- decorators: _draftRenderer.decorators
440
+ readOnly: this.state.readOnly
487
441
  }), /*#__PURE__*/_react.default.createElement(CustomEmbeddedCodeButton, {
488
- isDisabled: disabledButtons.includes(buttonNames.embed),
442
+ isDisabled: disabledButtons.includes(_btNames.default.embed),
489
443
  editorState: editorState,
490
444
  onChange: this.onChange,
491
445
  readOnly: this.state.readOnly
@@ -613,8 +567,22 @@ const InlineStyleControls = props => {
613
567
  })));
614
568
  };
615
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
+ `;
616
584
  var _default = {
617
585
  RichTextEditor,
618
- decorators: _draftRenderer.decorators
586
+ decorator: _draftRenderer.decorator
619
587
  };
620
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/lib/index.js CHANGED
@@ -5,11 +5,15 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
 
8
- var _draftEditor = _interopRequireDefault(require("./draft-editor"));
8
+ var _draftEditor = require("./draft-editor");
9
+
10
+ var _btNames = _interopRequireDefault(require("./buttons/bt-names"));
9
11
 
10
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
13
 
12
14
  var _default = {
13
- DraftEditor: _draftEditor.default
15
+ RichTextEditor: _draftEditor.RichTextEditor,
16
+ buttonNames: _btNames.default,
17
+ decorator: _draftEditor.decorator
14
18
  };
15
19
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kids-reporter/draft-editor",
3
- "version": "0.3.0",
3
+ "version": "0.4.1",
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.3.0",
26
+ "@kids-reporter/draft-renderer": "0.4.0",
27
27
  "draft-js": "^0.11.7"
28
28
  },
29
29
  "peerDependencies": {