@kids-reporter/draft-editor 0.4.11 → 0.4.13

package/lib/buttons/selector/image-selector.js

@@ -19,36 +19,25 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const _ = {
   debounce: _debounce.default
 };
-const ImageSearchBox = (0, _styledComponents.default)(_searchBox.SearchBox)`
+const SearchBox = (0, _styledComponents.default)(_searchBox.SearchBox)`
   margin-top: 10px;
 `;
-const ImageSelectionWrapper = _styledComponents.default.div`
+const MainBlock = _styledComponents.default.div`
   overflow: auto;
   margin-top: 10px;
 `;
-const ImageBlockMetaWrapper = _styledComponents.default.div``;
-const ImageGridsWrapper = _styledComponents.default.div`
+const GridsBlock = _styledComponents.default.div`
   display: flex;
   flex-wrap: wrap;
   overflow: auto;
   margin-top: 5px;
 `;
-const ImageGridWrapper = _styledComponents.default.div`
+const GridBlock = _styledComponents.default.div`
   flex: 0 0 33.3333%;
   cursor: pointer;
   padding: 0 10px 10px;
 `;
-const ImageMetaGridsWrapper = _styledComponents.default.div`
-  display: flex;
-  flex-wrap: wrap;
-  overflow: auto;
-`;
-const ImageMetaGridWrapper = _styledComponents.default.div`
-  flex: 0 0 33.3333%;
-  cursor: pointer;
-  padding: 0 10px 10px;
-`;
-const Image = _styledComponents.default.img`
+const Img = _styledComponents.default.img`
   display: block;
   width: 100%;
   aspect-ratio: 2;
@@ -64,9 +53,6 @@ const SeparationLine = _styledComponents.default.div`
   margin-top: 10px;
   margin-bottom: 10px;
 `;
-const ImageSelected = _styledComponents.default.div`
-  height: 1.4rem;
-`;
 const ErrorWrapper = _styledComponents.default.div`
   & * {
     margin: 0;
@@ -75,32 +61,16 @@ const ErrorWrapper = _styledComponents.default.div`
 function ImageGrids(props) {
   const {
     images,
-    selected,
     onSelect
   } = props;
-  return /*#__PURE__*/_react.default.createElement(ImageGridsWrapper, null, images.map(image => {
-    return /*#__PURE__*/_react.default.createElement(ImageGrid, {
+  return /*#__PURE__*/_react.default.createElement(GridsBlock, null, images.map(image => {
+    var _image$imageFile;
+    return /*#__PURE__*/_react.default.createElement(GridBlock, {
       key: image.id,
-      isSelected: selected === null || selected === void 0 ? void 0 : selected.includes(image),
-      onSelect: () => onSelect(image),
-      image: image
-    });
-  }));
-}
-function ImageGrid(props) {
-  var _image$imageFile;
-  const {
-    image,
-    onSelect,
-    isSelected
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(ImageGridWrapper, {
-    key: image === null || image === void 0 ? void 0 : image.id,
-    onClick: () => onSelect(image)
-  }, /*#__PURE__*/_react.default.createElement(ImageSelected, null, isSelected ? /*#__PURE__*/_react.default.createElement("i", {
-    className: "fas fa-check-circle"
-  }) : null), /*#__PURE__*/_react.default.createElement(Image, {
-    src: image === null || image === void 0 || (_image$imageFile = image.imageFile) === null || _image$imageFile === void 0 ? void 0 : _image$imageFile.url
+      onClick: () => onSelect(image)
+    }, /*#__PURE__*/_react.default.createElement(Img, {
+      src: image === null || image === void 0 || (_image$imageFile = image.imageFile) === null || _image$imageFile === void 0 ? void 0 : _image$imageFile.url
+    }));
   }));
 }
 function ImageMetaGrids(props) {
@@ -108,78 +78,37 @@ function ImageMetaGrids(props) {
     imageMetas,
     onChange,
     enableCaption,
-    enableUrl
+    enableDelete
   } = props;
-  return /*#__PURE__*/_react.default.createElement(ImageMetaGridsWrapper, null, imageMetas.map(imageMeta => {
-    var _imageMeta$image;
-    return /*#__PURE__*/_react.default.createElement(ImageMetaGrid, {
-      key: imageMeta === null || imageMeta === void 0 || (_imageMeta$image = imageMeta.image) === null || _imageMeta$image === void 0 ? void 0 : _imageMeta$image.id,
-      imageMeta: imageMeta,
-      enableCaption: enableCaption,
-      enableUrl: enableUrl,
-      onChange: onChange
-    });
-  }));
-}
-function ImageMetaGrid(props) {
-  var _image$imageFile2;
-  const {
-    imageMeta,
-    enableCaption,
-    enableUrl,
-    onChange
-  } = props;
-  const {
-    image,
-    desc,
-    url
-  } = imageMeta;
-  return /*#__PURE__*/_react.default.createElement(ImageMetaGridWrapper, null, /*#__PURE__*/_react.default.createElement(Image, {
-    src: image === null || image === void 0 || (_image$imageFile2 = image.imageFile) === null || _image$imageFile2 === void 0 ? void 0 : _image$imageFile2.url
-  }), enableCaption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
-    htmlFor: "caption"
-  }, "Image Caption:"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
-    id: "caption",
-    type: "text",
-    placeholder: image === null || image === void 0 ? void 0 : image.name,
-    defaultValue: desc,
-    onChange: _.debounce(e => {
-      onChange({
-        image,
-        desc: e.target.value,
-        url
-      });
-    })
-  })), enableUrl && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
-    htmlFor: "url"
-  }, "Url:"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
-    id: "url",
-    type: "text",
-    placeholder: "(Optional)",
-    defaultValue: url,
-    onChange: _.debounce(e => {
-      onChange({
-        image,
-        desc,
-        url: e.target.value
-      });
-    })
-  })));
-}
-function DelayInput(props) {
-  const {
-    delay,
-    onChange
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, null, "Slideshow delay:"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
-    type: "number",
-    placeholder: "\u8ACB\u8F38\u5165\u81EA\u52D5\u5207\u63DB\u79D2\u6578",
-    step: "0.5",
-    min: "1",
-    value: delay,
-    onChange: e => {
-      onChange(e.target.value);
-    }
+  return /*#__PURE__*/_react.default.createElement(GridsBlock, null, imageMetas.map((imageMeta, idx) => {
+    var _imageMeta$imageFile;
+    const {
+      desc,
+      url
+    } = imageMeta;
+    return /*#__PURE__*/_react.default.createElement(GridBlock, {
+      key: idx
+    }, enableDelete && /*#__PURE__*/_react.default.createElement("i", {
+      onClick: () => {
+        onChange(imageMeta, 'delete');
+      },
+      className: "fas fa-check-circle"
+    }), /*#__PURE__*/_react.default.createElement(Img, {
+      src: imageMeta === null || imageMeta === void 0 || (_imageMeta$imageFile = imageMeta.imageFile) === null || _imageMeta$imageFile === void 0 ? void 0 : _imageMeta$imageFile.url
+    }), enableCaption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
+      htmlFor: "caption"
+    }, "Image Caption:"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+      id: "caption",
+      type: "text",
+      placeholder: imageMeta === null || imageMeta === void 0 ? void 0 : imageMeta.name,
+      defaultValue: desc,
+      onChange: _.debounce(e => {
+        onChange(Object.assign({}, imageMeta, {
+          desc: e.target.value,
+          url
+        }), 'modify');
+      })
+    })));
   }));
 }
 const imagesQuery = (0, _apollo.gql)`
@@ -208,6 +137,7 @@ const imagesQuery = (0, _apollo.gql)`
   }
 `;
 function ImageSelector(props) {
+  const alignment = props.alignment || 'default';
   const [queryImages, {
     loading,
     error,
@@ -220,13 +150,12 @@ function ImageSelector(props) {
   });
   const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
   const [searchText, setSearchText] = (0, _react.useState)('');
-  const [selected, setSelected] = (0, _react.useState)([]);
-  const [delay, setDelay] = (0, _react.useState)('5');
-  const [align, setAlign] = (0, _react.useState)(undefined);
-  const contentWrapperRef = (0, _react.useRef)();
+  const [selected, setSelected] = (0, _react.useState)(props.selected || []);
+  const [align, setAlign] = (0, _react.useState)(alignment);
+  const contentWrapperRef = (0, _react.useRef)(null);
   const pageSize = 6;
   const options = [{
-    value: undefined,
+    value: 'default',
     label: 'default',
     isDisabled: false
   }, {
@@ -245,15 +174,11 @@ function ImageSelector(props) {
   const {
     enableMultiSelect = false,
     enableCaption = false,
-    enableUrl = false,
     enableAlignment = false,
-    enableDelay = false,
     onChange
   } = props;
   const onSave = () => {
-    let adjustedDelay = +delay;
-    adjustedDelay = adjustedDelay < 1 ? 1 : adjustedDelay;
-    onChange(selected, align, adjustedDelay);
+    onChange(selected, align);
   };
   const onCancel = () => {
     onChange([]);
@@ -262,61 +187,47 @@ function ImageSelector(props) {
     setSearchText(searchInput);
     setCurrentPage(1);
   };
-  const onDealyChange = delay => {
-    setDelay(delay);
-  };
   const onAlignSelectChange = align => {
     setAlign(align);
   };
   const onAlignSelectOpen = () => {
     var _contentWrapperRef$cu;
     const scrollWrapper = (_contentWrapperRef$cu = contentWrapperRef.current) === null || _contentWrapperRef$cu === void 0 ? void 0 : _contentWrapperRef$cu.parentElement;
-    scrollWrapper.scrollTop = scrollWrapper.scrollHeight;
+    if (scrollWrapper) {
+      scrollWrapper.scrollTop = scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.scrollHeight;
+    }
+  };
+  const changeSelectedImage = (imageEntityWithMeta, actionType) => {
+    switch (actionType) {
+      case 'delete':
+        {
+          setSelected(selected.filter(s => s.idForImageSelectorOnly !== imageEntityWithMeta.idForImageSelectorOnly));
+          break;
+        }
+      case 'modify':
+        {
+          const foundIndex = selected.findIndex(ele => ele.idForImageSelectorOnly === imageEntityWithMeta.idForImageSelectorOnly);
+          if (foundIndex !== -1) {
+            const newSelected = [...selected];
+            newSelected[foundIndex] = imageEntityWithMeta;
+            setSelected(newSelected);
+          }
+          break;
+        }
+    }
   };
-  const onImageMetaChange = imageEntityWithMeta => {
+  const selectImage = imageEntity => {
+    const newImageEntity = Object.assign({
+      // `idForImageSelectorOnly` is designed for selecting one image multiple times
+      idForImageSelectorOnly: `${imageEntity.id}_${selected.length + 1}`,
+      desc: ''
+    }, imageEntity);
     if (enableMultiSelect) {
-      const foundIndex = selected.findIndex(ele => {
-        var _ele$image, _imageEntityWithMeta$;
-        return (ele === null || ele === void 0 || (_ele$image = ele.image) === null || _ele$image === void 0 ? void 0 : _ele$image.id) === (imageEntityWithMeta === null || imageEntityWithMeta === void 0 || (_imageEntityWithMeta$ = imageEntityWithMeta.image) === null || _imageEntityWithMeta$ === void 0 ? void 0 : _imageEntityWithMeta$.id);
-      });
-      if (foundIndex !== -1) {
-        selected[foundIndex] = imageEntityWithMeta;
-        setSelected(selected);
-      }
+      setSelected(selected.concat(newImageEntity));
       return;
     }
-    setSelected([imageEntityWithMeta]);
+    setSelected([newImageEntity]);
   };
-  const onImagesGridSelect = imageEntity => {
-    setSelected(selected => {
-      const filterdSelected = selected.filter(ele => {
-        var _ele$image2;
-        return ((_ele$image2 = ele.image) === null || _ele$image2 === void 0 ? void 0 : _ele$image2.id) !== imageEntity.id;
-      });
-
-      // deselect the image
-      if (filterdSelected.length !== selected.length) {
-        return filterdSelected;
-      }
-
-      // add new selected one
-      if (enableMultiSelect) {
-        return selected.concat([{
-          image: imageEntity,
-          desc: ''
-        }]);
-      }
-
-      // single select
-      return [{
-        image: imageEntity,
-        desc: ''
-      }];
-    });
-  };
-  const selectedImages = selected.map(ele => {
-    return ele.image;
-  });
   (0, _react.useEffect)(() => {
     if (currentPage !== 0) {
       queryImages({
@@ -328,10 +239,9 @@ function ImageSelector(props) {
       });
     }
   }, [currentPage, searchText]);
-  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ImageGrids, {
+  let searchResult = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ImageGrids, {
     images: images,
-    selected: selectedImages,
-    onSelect: onImagesGridSelect
+    onSelect: selectImage
   }), /*#__PURE__*/_react.default.createElement(_pagination.Pagination, {
     currentPage: currentPage,
     total: imagesCount,
@@ -344,7 +254,8 @@ function ImageSelector(props) {
     searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
   }
   if (error) {
-    searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `images` query"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Message:"), /*#__PURE__*/_react.default.createElement("div", null, error.message), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Stack:"), /*#__PURE__*/_react.default.createElement("div", null, error.stack), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Query:"), /*#__PURE__*/_react.default.createElement("pre", null, imagesQuery.loc.source.body)));
+    var _imagesQuery$loc;
+    searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `images` query"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Message:"), /*#__PURE__*/_react.default.createElement("div", null, error.message), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Stack:"), /*#__PURE__*/_react.default.createElement("div", null, error.stack), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Query:"), /*#__PURE__*/_react.default.createElement("pre", null, (_imagesQuery$loc = imagesQuery.loc) === null || _imagesQuery$loc === void 0 ? void 0 : _imagesQuery$loc.source.body)));
   }
   return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
     isOpen: true
@@ -362,20 +273,17 @@ function ImageSelector(props) {
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: contentWrapperRef
-  }, /*#__PURE__*/_react.default.createElement(ImageSearchBox, {
+  }, /*#__PURE__*/_react.default.createElement(SearchBox, {
     onChange: onSearchBoxChange
-  }), /*#__PURE__*/_react.default.createElement(ImageSelectionWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, searchResult), !!selected.length && /*#__PURE__*/_react.default.createElement(SeparationLine, null), /*#__PURE__*/_react.default.createElement(ImageMetaGrids, {
+  }), /*#__PURE__*/_react.default.createElement(MainBlock, null, searchResult, selected.length > 0 && /*#__PURE__*/_react.default.createElement(SeparationLine, null), /*#__PURE__*/_react.default.createElement(ImageMetaGrids, {
     imageMetas: selected,
-    onChange: onImageMetaChange,
+    onChange: changeSelectedImage,
     enableCaption: enableCaption,
-    enableUrl: enableUrl
-  })), /*#__PURE__*/_react.default.createElement(ImageBlockMetaWrapper, null, (enableDelay || enableAlignment) && /*#__PURE__*/_react.default.createElement(SeparationLine, null), enableDelay && /*#__PURE__*/_react.default.createElement(DelayInput, {
-    delay: delay,
-    onChange: onDealyChange
-  }), enableAlignment && /*#__PURE__*/_react.default.createElement(_alignSelector.AlignSelector, {
+    enableDelete: enableMultiSelect
+  })), enableAlignment && /*#__PURE__*/_react.default.createElement(_alignSelector.AlignSelector, {
     align: align,
     options: options,
     onChange: onAlignSelectChange,
     onOpen: onAlignSelectOpen
-  })))));
+  }))));
 }

package/lib/buttons/slideshow.js

@@ -20,21 +20,16 @@ function SlideshowButton(props) {
   const promptForImageSelector = () => {
     setToShowImageSelector(true);
   };
-  const onImageSelectorChange = (selected, align, delay) => {
+  const onImageSelectorChange = (selected, alignment, delay) => {
     if (selected.length === 0) {
       setToShowImageSelector(false);
       return;
     }
     const contentState = editorState.getCurrentContent();
     const contentStateWithEntity = contentState.createEntity('SLIDESHOW', 'IMMUTABLE', {
-      alignment: align,
+      alignment,
       delay,
-      images: selected.map(ele => {
-        return {
-          ...(ele === null || ele === void 0 ? void 0 : ele.image),
-          desc: ele === null || ele === void 0 ? void 0 : ele.desc
-        };
-      })
+      images: selected
     });
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
     const newEditorState = _draftJs.EditorState.set(editorState, {
@@ -49,8 +44,8 @@ function SlideshowButton(props) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowImageSelector && /*#__PURE__*/_react.default.createElement(ImageSelector, {
     onChange: onImageSelectorChange,
     enableCaption: true,
-    enableDelay: false,
-    enableMultiSelect: true
+    enableMultiSelect: true,
+    enableAlignment: false
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: className,
     onClick: promptForImageSelector

package/package.json

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

package/lib/.selector/align-selector.js

@@ -1,62 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AlignSelector = AlignSelector;
-var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-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; }
-const Label = _styledComponents.default.label`
-  display: block;
-  margin: 10px 0;
-  font-weight: 600;
-`;
-const AlignSelect = (0, _styledComponents.default)(_fields.Select)`
-  ${({
-  menuHeight
-}) => {
-  return `margin-bottom: ${menuHeight}px;`;
-}}
-`;
-function AlignSelector(props) {
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  const [menuHeight, setMenuHeight] = (0, _react.useState)(0);
-  const {
-    align,
-    options,
-    onChange,
-    onOpen
-  } = props;
-  (0, _react.useEffect)(() => {
-    const selectMenu = document.querySelector('.css-nabggt-menu');
-    if (selectMenu) {
-      const styles = window.getComputedStyle(selectMenu);
-      const margin = parseFloat(styles['marginTop']) + parseFloat(styles['marginBottom']);
-      setMenuHeight(selectMenu.offsetHeight + margin);
-    } else {
-      setMenuHeight(0);
-    }
-    if (isOpen && onOpen) {
-      onOpen();
-    }
-  }, [isOpen]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
-    htmlFor: "alignment"
-  }, "\u5C0D\u9F4A"), /*#__PURE__*/_react.default.createElement(AlignSelect, {
-    id: "alignment"
-    // default align === undefined
-    ,
-    value: options.find(option => option.value === align),
-    options: options,
-    onChange: option => {
-      onChange(option.value);
-    },
-    onMenuOpen: () => setIsOpen(true),
-    onMenuClose: () => setIsOpen(false),
-    menuHeight: menuHeight
-  }));
-}