@kids-reporter/draft-editor 0.4.8 → 0.4.10

package/lib/block-renderer-fn.js

@@ -10,7 +10,8 @@ var _draftRenderer = require("@kids-reporter/draft-renderer");
 const {
   EmbeddedCodeInArticleBody,
   ImageInArticleBody,
-  SlideshowInArticleBody
+  SlideshowInArticleBody,
+  NewsReading
 } = _draftRenderer.blockRenderers;
 const AtomicBlock = props => {
   const entity = props.contentState.getEntity(props.block.getEntityAt(0));
@@ -43,6 +44,12 @@ const AtomicBlock = props => {
       {
         return (0, _infoBox.EditableInfoBox)(props);
       }
+    case 'NEWS_READING':
+      {
+        return NewsReading({
+          data: entityData
+        });
+      }
   }
   return null;
 };

package/lib/block-renderers/embed-code.js

@@ -0,0 +1 @@
+"use strict";

package/lib/buttons/blockquote.js

@@ -8,7 +8,7 @@ exports.BlockquoteInput = BlockquoteInput;
 var _react = _interopRequireWildcard(require("react"));
 var _draftJs = require("draft-js");
 var _modals = require("@keystone-ui/modals");
-var _select = require("./select");
+var _select = require("./form/select");
 var _fields = require("@keystone-ui/fields");
 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); }
 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; }

package/lib/buttons/bt-names.js

@@ -25,6 +25,7 @@ var _default = {
   image: 'image',
   infoBox: 'info-box',
   link: 'link',
-  slideshow: 'slideshow'
+  slideshow: 'slideshow',
+  newsReading: 'news-reading'
 };
 exports.default = _default;

package/lib/buttons/form/array-field.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ArrayField = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _button = require("@keystone-ui/button");
+var _fields = require("@keystone-ui/fields");
+var _PlusCircleIcon = require("@keystone-ui/icons/icons/PlusCircleIcon");
+var _core = require("@keystone-ui/core");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ArrayField = function ({
+  label
+}) {
+  return /*#__PURE__*/_react.default.createElement(_core.Stack, {
+    gap: "medium"
+  }, label && /*#__PURE__*/_react.default.createElement(_fields.FieldLabel, null, label), /*#__PURE__*/_react.default.createElement(_fields.TextInput, null), /*#__PURE__*/_react.default.createElement(_fields.TextInput, null), /*#__PURE__*/_react.default.createElement(_button.Button, {
+    onClick: () => {
+      //props.onChange([...props.elements.map(x => ({ key: x.key })), { key: undefined }]);
+    },
+    tone: "active"
+  }, /*#__PURE__*/_react.default.createElement(_core.Stack, {
+    gap: "small",
+    across: true
+  }, /*#__PURE__*/_react.default.createElement(_PlusCircleIcon.PlusCircleIcon, {
+    size: "smallish"
+  }), " ", /*#__PURE__*/_react.default.createElement("span", null, "Add"))));
+};
+exports.ArrayField = ArrayField;

package/lib/buttons/{select.js → form/select.js}

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _fields = require("@keystone-ui/fields");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const TypeSelectBlock = _styledComponents.default.div`
+const SelectBlock = _styledComponents.default.div`
   margin: 10px 0;
 `;
 const Label = _styledComponents.default.label`
@@ -22,8 +22,8 @@ function Select({
   options,
   onChange
 }) {
-  return /*#__PURE__*/_react.default.createElement(TypeSelectBlock, null, /*#__PURE__*/_react.default.createElement(Label, {
-    htmlFor: "infoBoxType"
+  return /*#__PURE__*/_react.default.createElement(SelectBlock, null, /*#__PURE__*/_react.default.createElement(Label, {
+    htmlFor: title
   }, title), /*#__PURE__*/_react.default.createElement(_fields.Select, {
     value: options.find(option => option.value === value) || null,
     options: options,

package/lib/buttons/image.js

@@ -45,7 +45,7 @@ function ImageButton(props) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowImageSelector && /*#__PURE__*/_react.default.createElement(ImageSelector, {
     onChange: onImageSelectorChange,
     enableCaption: true,
-    enableUrl: true,
+    enableUrl: false,
     enableAlignment: true
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: className,

package/lib/buttons/info-box.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _btNames = _interopRequireDefault(require("./bt-names"));
 var _draftJs = require("draft-js");
 var _modals = require("@keystone-ui/modals");
-var _select = require("./select");
+var _select = require("./form/select");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 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; }

package/lib/buttons/news-reading.js

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NewsReadingButton = NewsReadingButton;
+exports.NewsReadingInput = NewsReadingInput;
+var _react = _interopRequireWildcard(require("react"));
+var _axios = _interopRequireDefault(require("axios"));
+var _errors = _interopRequireDefault(require("@twreporter/errors"));
+var _draftJs = require("draft-js");
+var _modals = require("@keystone-ui/modals");
+var _fields = require("@keystone-ui/fields");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+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; }
+// @ts-ignore pkg does not have definition
+
+async function fetchNewsReadingGroup(itemId) {
+  var _res$data, _res$data2;
+  const query = `
+query GetNewsReadingGroup($itemId: ID!){
+  newsReadingGroup(where: {id: $itemId}) {
+    items {
+      name
+      embedCode
+    }
+  }
+}
+  `;
+  let res;
+  try {
+    res = await _axios.default.post('/api/graphql', {
+      query,
+      variables: {
+        itemId
+      }
+    });
+  } catch (err) {
+    const annotatedErr = _errors.default.helpers.annotateAxiosError(err);
+    throw annotatedErr;
+  }
+  if ((_res$data = res.data) !== null && _res$data !== void 0 && _res$data.errors) {
+    const annotatingError = _errors.default.helpers.wrap(new Error('Errors occured while executing `GetNewsReadingGroup` query'), 'GraphQLError', '`errors` returned in the GQL query response', {
+      errors: res.data.errors
+    });
+    throw annotatingError;
+  }
+  return (_res$data2 = res.data) === null || _res$data2 === void 0 || (_res$data2 = _res$data2.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.newsReadingGroup;
+}
+function NewsReadingInput({
+  isOpen,
+  onConfirm,
+  onCancel,
+  inputValue
+}) {
+  const [inputValueState, setInputValueState] = (0, _react.useState)(inputValue);
+  const [warning, setWarning] = (0, _react.useState)('');
+  const confirmInput = async () => {
+    try {
+      const newsReadingGroup = await fetchNewsReadingGroup(inputValueState);
+      onConfirm({
+        newsReadingGroupId: inputValueState,
+        newsReadingGroup
+      });
+    } catch (err) {
+      if (err instanceof Error) {
+        setWarning(_errors.default.helpers.printAll(err));
+        return;
+      }
+      setWarning(err);
+    }
+  };
+  let warningJsx = null;
+  if (warning) {
+    warningJsx = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
+      isOpen: warning !== '',
+      title: `Something went wrong`,
+      actions: {
+        confirm: {
+          action: () => {
+            setWarning('');
+          },
+          label: 'Done'
+        }
+      }
+    }, /*#__PURE__*/_react.default.createElement(_fields.TextArea, {
+      readOnly: true
+    }, warning));
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, warningJsx, /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
+    isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
+    title: "\u8B80\u5831\u4E3B\u984C",
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: onCancel
+      },
+      confirm: {
+        label: 'Confirm',
+        action: confirmInput
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+    onChange: e => {
+      setInputValueState(e.target.value);
+    },
+    placeholder: "News-readings-groups Item ID",
+    type: "text",
+    value: inputValueState
+  }))));
+}
+function NewsReadingButton(props) {
+  const {
+    onChange,
+    className,
+    editorState
+  } = props;
+  const [isInputOpen, setIsInputOpen] = (0, _react.useState)(false);
+  const promptForInput = () => {
+    setIsInputOpen(true);
+  };
+  const onInputChange = inputValue => {
+    var _inputValue$newsReadi;
+    const contentState = editorState.getCurrentContent();
+    const contentStateWithEntity = contentState.createEntity('NEWS_READING', 'IMMUTABLE', {
+      newsReadingGroupId: inputValue.newsReadingGroupId,
+      readings: (inputValue === null || inputValue === void 0 || (_inputValue$newsReadi = inputValue.newsReadingGroup) === null || _inputValue$newsReadi === void 0 ? void 0 : _inputValue$newsReadi.items) || []
+    });
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+    const newEditorState = _draftJs.EditorState.set(editorState, {
+      currentContent: contentStateWithEntity
+    });
+
+    // The third parameter here is a space string, not an empty string
+    // If you set an empty string, you will get an error: Unknown DraftEntity key: null
+    onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
+    setIsInputOpen(false);
+  };
+  const onInputCancel = () => {
+    setIsInputOpen(false);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isInputOpen && /*#__PURE__*/_react.default.createElement(NewsReadingInput, {
+    isOpen: isInputOpen,
+    onConfirm: onInputChange,
+    onCancel: onInputCancel,
+    inputValue: ""
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: () => {
+      promptForInput();
+    },
+    className: className
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "far"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "\u8B80\u5831")));
+}

package/lib/buttons/slideshow.js

@@ -49,7 +49,7 @@ function SlideshowButton(props) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowImageSelector && /*#__PURE__*/_react.default.createElement(ImageSelector, {
     onChange: onImageSelectorChange,
     enableCaption: true,
-    enableDelay: true,
+    enableDelay: false,
     enableMultiSelect: true
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: className,

package/lib/draft-editor.js

@@ -22,6 +22,7 @@ var _image = require("./buttons/image");
 var _link = require("./buttons/link");
 var _slideshow = require("./buttons/slideshow");
 var _imageSelector = require("./buttons/selector/image-selector");
+var _newsReading = require("./buttons/news-reading");
 var _blockRendererFn = require("./block-renderer-fn");
 var _draftRenderer = require("@kids-reporter/draft-renderer");
 var _annotation = require("./buttons/annotation");
@@ -79,6 +80,10 @@ const buttonStyle = (0, _styledComponents.css)`
   return 'inline-flex';
 }};
 `;
+
+// TODO: refactor custom button
+// Refactoring goal is to avoid `styled()` on every button,
+// which is tedious and duplicate.
 const CustomButton = _styledComponents.default.div`
   ${buttonStyle}
 `;
@@ -101,6 +106,9 @@ const CustomSlideshowButton = (0, _styledComponents.default)(_slideshow.Slidesho
 const CustomEmbeddedCodeButton = (0, _styledComponents.default)(_embeddedCode.EmbeddedCodeButton)`
   ${buttonStyle}
 `;
+const CustomNewsReadingButton = (0, _styledComponents.default)(_newsReading.NewsReadingButton)`
+  ${buttonStyle}
+`;
 const DraftEditorWrapper = _styledComponents.default.div`
   /* Rich-editor default setting (.RichEditor-root)*/
   background: #fff;
@@ -396,6 +404,11 @@ class RichTextEditor extends _react.default.Component {
       editorState: editorState,
       onChange: this.onChange,
       readOnly: this.state.readOnly
+    }), /*#__PURE__*/_react.default.createElement(CustomNewsReadingButton, {
+      isDisabled: disabledButtons.includes(_btNames.default.newsReading),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly
     }))), /*#__PURE__*/_react.default.createElement(TextEditorWrapper, {
       onClick: () => {
         if (this.editorRef) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-editor",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -23,7 +23,8 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@kids-reporter/draft-renderer": "^0.4.6",
+    "@kids-reporter/draft-renderer": "^0.4.8",
+    "@twreporter/errors": "^1.1.2",
     "draft-js": "^0.11.7"
   },
   "peerDependencies": {