@kids-reporter/draft-editor 0.4.21 → 0.4.22

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 (5) hide show
  1. package/lib/buttons/bg-color.js +105 -1
  2. package/lib/buttons/bt-names.js +3 -0
  3. package/lib/buttons/font-color.js +95 -0
  4. package/lib/draft-editor.js +41 -0
  5. package/package.json +2 -2
package/lib/buttons/bg-color.js CHANGED
@@ -1 +1,105 @@
1
- "use strict";
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.BackgroundColorButton = BackgroundColorButton;
7
+ exports.customStylePrefix = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _modals = require("@keystone-ui/modals");
10
+ var _draftJs = require("draft-js");
11
+ var _fields = require("@keystone-ui/fields");
12
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
+ 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; }
16
+ const customStylePrefix = 'BACKGROUND_COLOR_';
17
+ exports.customStylePrefix = customStylePrefix;
18
+ const ColorHexInput = (0, _styledComponents.default)(_fields.TextInput)`
19
+ margin-right: 10px;
20
+ padding: 10px;
21
+ `;
22
+ function BackgroundColorButton(props) {
23
+ const {
24
+ isActive,
25
+ editorState,
26
+ onChange
27
+ } = props;
28
+ const [toShowColorInput, setToShowColorInput] = (0, _react.useState)(false);
29
+ const [colorValue, setColorValue] = (0, _react.useState)('');
30
+ const promptForColor = e => {
31
+ e.preventDefault();
32
+ props.onEditStart();
33
+ const selection = editorState.getSelection();
34
+ if (!selection.isCollapsed()) {
35
+ setToShowColorInput(true);
36
+ }
37
+ };
38
+ const confirmColor = () => {
39
+ const selection = editorState.getSelection();
40
+ let contentState = editorState.getCurrentContent();
41
+ const bgColorInlineStyle = editorState.getCurrentInlineStyle().find(styleName => typeof styleName === 'string' && styleName.startsWith(customStylePrefix));
42
+ if (bgColorInlineStyle) {
43
+ contentState = _draftJs.Modifier.removeInlineStyle(contentState, selection, bgColorInlineStyle);
44
+ }
45
+ if (colorValue) {
46
+ contentState = _draftJs.Modifier.applyInlineStyle(contentState, selection, customStylePrefix + colorValue);
47
+ }
48
+ onChange(_draftJs.EditorState.push(editorState, contentState, 'change-inline-style'));
49
+ setToShowColorInput(false);
50
+ setColorValue('');
51
+ props.onEditFinish();
52
+ };
53
+ const onColorInputKeyDown = e => {
54
+ if (e.which === 13) {
55
+ e.preventDefault();
56
+ confirmColor();
57
+ }
58
+ };
59
+ const removeColor = () => {
60
+ const selection = editorState.getSelection();
61
+ if (!selection.isCollapsed()) {
62
+ const bgColorInlineStyle = editorState.getCurrentInlineStyle().find(styleName => typeof styleName === 'string' && styleName.startsWith(customStylePrefix));
63
+ let contentState = editorState.getCurrentContent();
64
+ if (bgColorInlineStyle) {
65
+ contentState = _draftJs.Modifier.removeInlineStyle(contentState, selection, bgColorInlineStyle);
66
+ }
67
+ onChange(_draftJs.EditorState.push(editorState, contentState, 'change-inline-style'));
68
+ }
69
+ setToShowColorInput(false);
70
+ setColorValue('');
71
+ props.onEditFinish();
72
+ };
73
+ const colorInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
74
+ title: "Hex Color Code (#ffffff)",
75
+ isOpen: toShowColorInput,
76
+ actions: {
77
+ cancel: {
78
+ label: 'Cancel',
79
+ action: removeColor
80
+ },
81
+ confirm: {
82
+ label: 'Confirm',
83
+ action: confirmColor
84
+ }
85
+ }
86
+ }, /*#__PURE__*/_react.default.createElement(ColorHexInput, {
87
+ onChange: e => setColorValue(e.target.value),
88
+ type: "text",
89
+ value: colorValue,
90
+ onKeyDown: onColorInputKeyDown
91
+ }));
92
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, colorInput, /*#__PURE__*/_react.default.createElement("div", {
93
+ className: props.className,
94
+ onMouseDown: isActive ? removeColor : promptForColor
95
+ }, /*#__PURE__*/_react.default.createElement("svg", {
96
+ width: "16",
97
+ height: "14",
98
+ viewBox: "0 0 16 14",
99
+ fill: "none",
100
+ xmlns: "http://www.w3.org/2000/svg"
101
+ }, /*#__PURE__*/_react.default.createElement("path", {
102
+ d: "M3.74443 8.75V6.78945C3.74443 6.37109 3.98306 5.98008 4.34542 5.73125L12.3911 0.229633C12.6091 0.0804726 12.8477 0 13.1453 0C13.4811 0 13.8022 0.124113 14.0409 0.345078L15.6553 1.84242C15.8939 2.06336 16 2.36305 16 2.67531C16 2.92578 15.9411 3.14727 15.779 3.37422L9.85159 10.8418C9.5835 11.1781 9.1357 11.375 8.71147 11.375H6.57264L5.85086 12.0695C5.4826 12.4113 4.8875 12.4113 4.51924 12.0695L3.02265 10.6805C2.65439 10.3387 2.65439 9.78633 3.02265 9.44453L3.74443 8.75ZM13.9466 2.73219L13.0834 1.9302L6.74646 6.26172L9.25354 8.58867L13.9466 2.73219ZM0.207107 12.7504L2.064 11.0277L4.14509 12.9582L3.23182 13.784C3.09925 13.9316 2.91954 14 2.73099 14H0.707052C0.3167 14 0 13.7074 0 13.3438V13.2152C0 13.0184 0.0745351 12.8734 0.207107 12.7504Z",
103
+ fill: isActive ? '#ED8B00' : '#6b7280'
104
+ })), /*#__PURE__*/_react.default.createElement("span", null, " Highlight")));
105
+ }
package/lib/buttons/bt-names.js CHANGED
@@ -10,6 +10,9 @@ var _default = {
10
10
  italic: 'italic',
11
11
  underline: 'underline',
12
12
  code: 'code',
13
+ // custom inline styles
14
+ backgroundColor: 'background-color',
15
+ fontColor: 'font-color',
13
16
  // block styles
14
17
  h2: 'header-two',
15
18
  h3: 'header-three',
package/lib/buttons/font-color.js ADDED
@@ -0,0 +1,95 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.FontColorButton = FontColorButton;
7
+ exports.customStylePrefix = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _modals = require("@keystone-ui/modals");
10
+ var _draftJs = require("draft-js");
11
+ var _fields = require("@keystone-ui/fields");
12
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
+ 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; }
16
+ const customStylePrefix = 'FONT_COLOR_';
17
+ exports.customStylePrefix = customStylePrefix;
18
+ const ColorHexInput = (0, _styledComponents.default)(_fields.TextInput)`
19
+ margin-right: 10px;
20
+ padding: 10px;
21
+ `;
22
+ function FontColorButton(props) {
23
+ const {
24
+ isActive,
25
+ editorState,
26
+ onChange
27
+ } = props;
28
+ const [toShowColorInput, setToShowColorInput] = (0, _react.useState)(false);
29
+ const [colorValue, setColorValue] = (0, _react.useState)('');
30
+ const promptForColor = e => {
31
+ e.preventDefault();
32
+ const selection = editorState.getSelection();
33
+ if (!selection.isCollapsed()) {
34
+ setToShowColorInput(true);
35
+ }
36
+ };
37
+ const confirmColor = () => {
38
+ const selection = editorState.getSelection();
39
+ let contentState = editorState.getCurrentContent();
40
+ const fontColorInlineStyle = editorState.getCurrentInlineStyle().find(styleName => typeof styleName === 'string' && styleName.startsWith(customStylePrefix));
41
+ if (fontColorInlineStyle) {
42
+ contentState = _draftJs.Modifier.removeInlineStyle(contentState, selection, fontColorInlineStyle);
43
+ }
44
+ if (colorValue) {
45
+ contentState = _draftJs.Modifier.applyInlineStyle(contentState, selection, customStylePrefix + colorValue);
46
+ }
47
+ onChange(_draftJs.EditorState.push(editorState, contentState, 'change-inline-style'));
48
+ setToShowColorInput(false);
49
+ setColorValue('');
50
+ };
51
+ const onColorInputKeyDown = e => {
52
+ if (e.which === 13) {
53
+ e.preventDefault();
54
+ confirmColor();
55
+ }
56
+ };
57
+ const removeColor = () => {
58
+ const selection = editorState.getSelection();
59
+ if (!selection.isCollapsed()) {
60
+ const fontColorInlineStyle = editorState.getCurrentInlineStyle().find(styleName => typeof styleName === 'string' && styleName.startsWith(customStylePrefix));
61
+ let contentState = editorState.getCurrentContent();
62
+ if (fontColorInlineStyle) {
63
+ contentState = _draftJs.Modifier.removeInlineStyle(contentState, selection, fontColorInlineStyle);
64
+ }
65
+ onChange(_draftJs.EditorState.push(editorState, contentState, 'change-inline-style'));
66
+ }
67
+ setToShowColorInput(false);
68
+ setColorValue('');
69
+ };
70
+ const colorInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
71
+ title: "Hex Color Code (#ffffff)",
72
+ isOpen: toShowColorInput,
73
+ actions: {
74
+ cancel: {
75
+ label: 'Cancel',
76
+ action: removeColor
77
+ },
78
+ confirm: {
79
+ label: 'Confirm',
80
+ action: confirmColor
81
+ }
82
+ }
83
+ }, /*#__PURE__*/_react.default.createElement(ColorHexInput, {
84
+ onChange: e => setColorValue(e.target.value),
85
+ type: "text",
86
+ value: colorValue,
87
+ onKeyDown: onColorInputKeyDown
88
+ }));
89
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, colorInput, /*#__PURE__*/_react.default.createElement("div", {
90
+ className: props.className,
91
+ onMouseDown: isActive ? removeColor : promptForColor
92
+ }, /*#__PURE__*/_react.default.createElement("i", {
93
+ className: "fas fa-palette"
94
+ })));
95
+ }
package/lib/draft-editor.js CHANGED
@@ -15,9 +15,11 @@ var _react = _interopRequireDefault(require("react"));
15
15
  var _btNames = _interopRequireDefault(require("./buttons/bt-names"));
16
16
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
17
17
  var _draftJs = require("draft-js");
18
+ var _bgColor = require("./buttons/bg-color");
18
19
  var _blockquote = require("./buttons/blockquote");
19
20
  var _embeddedCode = require("./buttons/embedded-code");
20
21
  var _enlarge = require("./buttons/enlarge");
22
+ var _fontColor = require("./buttons/font-color");
21
23
  var _image = require("./buttons/image");
22
24
  var _link = require("./buttons/link");
23
25
  var _slideshow = require("./buttons/slideshow");
@@ -109,6 +111,12 @@ const CustomEmbeddedCodeButton = (0, _styledComponents.default)(_embeddedCode.Em
109
111
  const CustomNewsReadingButton = (0, _styledComponents.default)(_newsReading.NewsReadingButton)`
110
112
  ${buttonStyle}
111
113
  `;
114
+ const CustomBackgroundColorButton = (0, _styledComponents.default)(_bgColor.BackgroundColorButton)`
115
+ ${buttonStyle}
116
+ `;
117
+ const CustomFontColorButton = (0, _styledComponents.default)(_fontColor.FontColorButton)`
118
+ ${buttonStyle}
119
+ `;
112
120
  const DraftEditorWrapper = _styledComponents.default.div`
113
121
  /* Rich-editor default setting (.RichEditor-root)*/
114
122
  background: #fff;
@@ -381,6 +389,38 @@ class RichTextEditor extends _react.default.Component {
381
389
  readOnly: false
382
390
  });
383
391
  }
392
+ }), /*#__PURE__*/_react.default.createElement(CustomBackgroundColorButton, {
393
+ isDisabled: disabledButtons.includes(_btNames.default.backgroundColor),
394
+ isActive: editorState.getCurrentInlineStyle().find(styleName => typeof styleName === 'string' && styleName.startsWith(_bgColor.customStylePrefix)) !== undefined,
395
+ editorState: editorState,
396
+ onChange: this.onChange,
397
+ readOnly: this.state.readOnly,
398
+ onEditStart: () => {
399
+ this.setState({
400
+ readOnly: true
401
+ });
402
+ },
403
+ onEditFinish: () => {
404
+ this.setState({
405
+ readOnly: false
406
+ });
407
+ }
408
+ }), /*#__PURE__*/_react.default.createElement(CustomFontColorButton, {
409
+ isDisabled: disabledButtons.includes(_btNames.default.fontColor),
410
+ isActive: editorState.getCurrentInlineStyle().find(styleName => typeof styleName === 'string' && styleName.startsWith(_fontColor.customStylePrefix)) !== undefined,
411
+ editorState: editorState,
412
+ onChange: this.onChange,
413
+ readOnly: this.state.readOnly,
414
+ onEditStart: () => {
415
+ this.setState({
416
+ readOnly: true
417
+ });
418
+ },
419
+ onEditFinish: () => {
420
+ this.setState({
421
+ readOnly: false
422
+ });
423
+ }
384
424
  }), /*#__PURE__*/_react.default.createElement(CustomBlockquoteButton, {
385
425
  isDisabled: disabledButtons.includes(_btNames.default.blockquote),
386
426
  editorState: editorState,
@@ -442,6 +482,7 @@ class RichTextEditor extends _react.default.Component {
442
482
  }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
443
483
  blockRenderMap: _draftRenderer.blockRenderMap,
444
484
  blockRendererFn: this.blockRendererFn,
485
+ customStyleFn: _draftRenderer.customStyleFn,
445
486
  editorState: editorState,
446
487
  handleKeyCommand: this.handleKeyCommand,
447
488
  handleReturn: this.handleReturn,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kids-reporter/draft-editor",
3
- "version": "0.4.21",
3
+ "version": "0.4.22",
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.4.20",
26
+ "@kids-reporter/draft-renderer": "^0.4.22",
27
27
  "@twreporter/errors": "^1.1.2",
28
28
  "draft-js": "^0.11.7"
29
29
  },