@mirrormedia/lilith-draft-editor 2.2.0 → 2.3.0

package/lib/website/readr/draft-editor.js

@@ -120,42 +120,53 @@ const buttonStyle = (0, _styledComponents.css)`
   align-items: center;
   height: 40px;
 
-  cursor: ${props => {
-  if (props.readOnly) {
+  cursor: ${({
+  readOnly
+}) => {
+  if (readOnly) {
     return 'not-allowed';
   }
 
   return 'pointer';
 }};
-  color: ${props => {
-  if (props.readOnly) {
+  color: ${({
+  readOnly,
+  isActive
+}) => {
+  if (readOnly) {
     return '#c1c7d0';
   }
 
-  if (props.isActive) {
+  if (isActive) {
     return '#3b82f6';
   }
 
   return '#6b7280';
 }};
   border: solid 1px
-    ${props => {
-  if (props.readOnly) {
+    ${({
+  readOnly,
+  isActive
+}) => {
+  if (readOnly) {
     return '#c1c7d0';
   }
 
-  if (props.isActive) {
+  if (isActive) {
     return '#3b82f6';
   }
 
   return '#6b7280';
 }};
-  box-shadow: ${props => {
-  if (props.readOnly) {
+  box-shadow: ${({
+  readOnly,
+  isActive
+}) => {
+  if (readOnly) {
     return 'unset';
   }
 
-  if (props.isActive) {
+  if (isActive) {
     return 'rgba(38, 132, 255, 20%)  0px 1px 4px ';
   }
 
@@ -163,8 +174,10 @@ const buttonStyle = (0, _styledComponents.css)`
 }};
   transition: box-shadow 100ms linear;
 
-  display: ${props => {
-  if (props.isDisabled) {
+  display: ${({
+  isDisabled
+}) => {
+  if (isDisabled) {
     return 'none';
   }
 
@@ -173,35 +186,44 @@ const buttonStyle = (0, _styledComponents.css)`
 `;
 const longFormButtonStyle = (0, _styledComponents.css)`
   ${buttonStyle}
-  color: ${props => {
-  if (props.readOnly) {
+  color: ${({
+  readOnly,
+  isActive
+}) => {
+  if (readOnly) {
     return '#c1c7d0';
   }
 
-  if (props.isActive) {
+  if (isActive) {
     return '#ED8B00';
   }
 
   return '#6b7280';
 }};
   border: solid 1px
-    ${props => {
-  if (props.readOnly) {
+    ${({
+  readOnly,
+  isActive
+}) => {
+  if (readOnly) {
     return '#c1c7d0';
   }
 
-  if (props.isActive) {
+  if (isActive) {
     return '#ED8B00';
   }
 
   return '#FECC85';
 }};
-  box-shadow: ${props => {
-  if (props.readOnly) {
+  box-shadow: ${({
+  readOnly,
+  isActive
+}) => {
+  if (readOnly) {
     return 'unset';
   }
 
-  if (props.isActive) {
+  if (isActive) {
     return 'rgba(237, 139, 0, 0.5) 0px 1px 4px';
   }
 
@@ -225,13 +247,14 @@ const CustomLinkButton = (0, _styledComponents.default)(_link.LinkButton)`
 `;
 
 function createButtonWithoutProps(referenceComponent, isLongForm = false, additionalCSS = ``) {
-  return isLongForm ? (0, _styledComponents.default)(referenceComponent)`
-        ${longFormButtonStyle}
-        ${additionalCSS}
-      ` : (0, _styledComponents.default)(referenceComponent)`
-        ${buttonStyle}
-        ${additionalCSS}
-      `;
+  const component = referenceComponent;
+  return isLongForm ? (0, _styledComponents.default)(component)`
+          ${longFormButtonStyle}
+          ${additionalCSS}
+        ` : (0, _styledComponents.default)(component)`
+          ${buttonStyle}
+          ${additionalCSS}
+        `;
 }
 
 const CustomEnlargeButton = createButtonWithoutProps(_enlarge.EnlargeButton, false, `color: #999`);
@@ -342,7 +365,9 @@ const TextEditorWrapper = _styledComponents.default.div`
 const DraftEditorContainer = _styledComponents.default.div`
   position: relative;
   margin-top: 4px;
-  ${props => props.isEnlarged ? (0, _styledComponents.css)`
+  ${({
+  isEnlarged
+}) => isEnlarged ? (0, _styledComponents.css)`
           position: fixed;
           width: 100%;
           height: 100%;
@@ -354,7 +379,9 @@ const DraftEditorContainer = _styledComponents.default.div`
           background: rgba(0, 0, 0, 0.5);
         ` : ''}
   ${DraftEditorWrapper} {
-    ${props => props.isEnlarged ? (0, _styledComponents.css)`
+    ${({
+  isEnlarged
+}) => isEnlarged ? (0, _styledComponents.css)`
             width: 100%;
             height: 100%;
             padding: 0 1rem 0;
@@ -362,20 +389,26 @@ const DraftEditorContainer = _styledComponents.default.div`
           ` : ''}
   }
   ${DraftEditorControls} {
-    ${props => props.isEnlarged ? (0, _styledComponents.css)`
+    ${({
+  isEnlarged
+}) => isEnlarged ? (0, _styledComponents.css)`
             position: sticky;
             top: 0;
             z-index: 12;
           ` : ''}
   }
   ${DraftEditorControlsWrapper} {
-    ${props => props.isEnlarged ? (0, _styledComponents.css)`
+    ${({
+  isEnlarged
+}) => isEnlarged ? (0, _styledComponents.css)`
             overflow: auto;
             padding-bottom: 0;
           ` : ''}
   }
   ${TextEditorWrapper} {
-    ${props => props.isEnlarged ? (0, _styledComponents.css)`
+    ${({
+  isEnlarged
+}) => isEnlarged ? (0, _styledComponents.css)`
             max-width: 100%;
             min-height: 100vh;
             padding-bottom: 0;
@@ -418,10 +451,10 @@ class RichTextEditor extends _react.default.Component {
 
     if (newState) {
       this.onChange(newState);
-      return true;
+      return 'handled';
     }
 
-    return false;
+    return 'not-handled';
   };
   handleReturn = event => {
     if (_draftJs.KeyBindingUtil.isSoftNewlineEvent(event)) {
@@ -447,7 +480,7 @@ class RichTextEditor extends _react.default.Component {
         this.onChange(newEditorState);
       }
 
-      return;
+      return null;
     }
 
     return (0, _draftJs.getDefaultKeyBinding)(e);
@@ -537,7 +570,7 @@ class RichTextEditor extends _react.default.Component {
         break;
 
       case 'atomic':
-        if ((_entity$getData = entity.getData()) !== null && _entity$getData !== void 0 && _entity$getData.alignment) {
+        if (entity !== null && entity !== void 0 && (_entity$getData = entity.getData()) !== null && _entity$getData !== void 0 && _entity$getData.alignment) {
           // support all atomic block to set alignment
           result += ' ' + entity.getData().alignment;
         }
@@ -574,7 +607,7 @@ class RichTextEditor extends _react.default.Component {
         entityKey,
         entityData
       }) => {
-        if (entityKey) {
+        if (entityKey && entityData) {
           const oldContentState = this.props.editorState.getCurrentContent();
           const newContentState = oldContentState.replaceEntityData(entityKey, entityData);
           this.onChange(_draftJs.EditorState.set(this.props.editorState, {
@@ -594,19 +627,22 @@ class RichTextEditor extends _react.default.Component {
       // and `props.blockProps.onEditFinish` in the custom block components.
 
 
-      atomicBlockObj['props'] = {
-        onEditStart,
-        onEditFinish,
-        getMainEditorReadOnly: () => this.state.readOnly,
-        renderBasicEditor: propsOfBasicEditor => {
-          return /*#__PURE__*/_react.default.createElement(RichTextEditor, _extends({}, propsOfBasicEditor, {
-            disabledButtons: disabledButtonsOnBasicEditor
-          }));
+      const extendedAtomicBlockObj = Object.assign({}, atomicBlockObj, {
+        props: {
+          onEditStart,
+          onEditFinish,
+          getMainEditorReadOnly: () => this.state.readOnly,
+          renderBasicEditor: propsOfBasicEditor => {
+            return /*#__PURE__*/_react.default.createElement(RichTextEditor, _extends({}, propsOfBasicEditor, {
+              disabledButtons: disabledButtonsOnBasicEditor
+            }));
+          }
         }
-      };
+      });
+      return extendedAtomicBlockObj;
+    } else {
+      return atomicBlockObj;
     }
-
-    return atomicBlockObj;
   };
 
   render() {
@@ -637,7 +673,7 @@ class RichTextEditor extends _react.default.Component {
     return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
       theme: _theme.default
     }, /*#__PURE__*/_react.default.createElement(DraftEditorContainer, {
-      isEnlarged: isEnlarged
+      isEnlarged: Boolean(isEnlarged)
     }, /*#__PURE__*/_react.default.createElement(DraftEditorWrapper, null, /*#__PURE__*/_react.default.createElement("link", {
       href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css",
       rel: "stylesheet",
@@ -655,30 +691,30 @@ class RichTextEditor extends _react.default.Component {
       rel: "stylesheet",
       type: "text/css"
     }), /*#__PURE__*/_react.default.createElement(DraftEditorControls, null, /*#__PURE__*/_react.default.createElement(DraftEditorControlsWrapper, null, /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(BlockStyleControls, {
+      readOnly: readOnly,
       disabledButtons: disabledButtons,
       editorState: editorState,
-      onToggle: this.toggleBlockType,
-      readOnly: this.state.readOnly
+      onToggle: this.toggleBlockType
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(InlineStyleControls, {
+      readOnly: readOnly,
       disabledButtons: disabledButtons,
       editorState: editorState,
-      onToggle: this.toggleInlineStyle,
-      readOnly: this.state.readOnly
+      onToggle: this.toggleInlineStyle
     })), /*#__PURE__*/_react.default.createElement(EnlargeButtonWrapper, null, /*#__PURE__*/_react.default.createElement(CustomEnlargeButton, {
       onToggle: this.toggleEnlarge,
       isEnlarged: isEnlarged
     }))), /*#__PURE__*/_react.default.createElement(DraftEditorControlsWrapper, null, /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomLinkButton, {
       isDisabled: disabledButtons.includes(buttonNames.link),
       isActive: entityType === 'LINK',
+      readOnly: readOnly,
       editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly
+      onChange: this.onChange
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomFontColorButton, {
       isDisabled: disabledButtons.includes(buttonNames.fontColor),
       isActive: Object.prototype.hasOwnProperty.call(customStyle, 'color'),
+      readOnly: readOnly,
       editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly
+      onChange: this.onChange
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomDividerButton, {
       isDisabled: disabledButtons.includes(buttonNames.divider),
       editorState: editorState,
@@ -686,104 +722,104 @@ class RichTextEditor extends _react.default.Component {
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomAnnotationButton, {
       isDisabled: disabledButtons.includes(buttonNames.annotation),
       isActive: entityType === 'ANNOTATION',
+      readOnly: readOnly,
       editorState: editorState,
       onChange: this.onChange,
-      readOnly: this.state.readOnly,
       renderBasicEditor: renderBasicEditor,
       decorators: _entityDecorator.default
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomImageButton, {
       isDisabled: disabledButtons.includes(buttonNames.image),
+      readOnly: readOnly,
       editorState: editorState,
       onChange: this.onChange,
-      readOnly: this.state.readOnly,
       ImageSelector: _imageSelector.ImageSelector
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomVideoButton, {
       isDisabled: disabledButtons.includes(buttonNames.video),
+      readOnly: readOnly,
       editorState: editorState,
       onChange: this.onChange,
-      readOnly: this.state.readOnly,
       VideoSelector: _videoSelector.VideoSelector
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomAudioButton, {
       isDisabled: disabledButtons.includes(buttonNames.audio),
+      readOnly: readOnly,
       editorState: editorState,
       onChange: this.onChange,
-      readOnly: this.state.readOnly,
       AudioSelector: _audioSelector.AudioSelector
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomSlideshowButton, {
       isDisabled: disabledButtons.includes(buttonNames.slideshow),
+      readOnly: readOnly,
       editorState: editorState,
       onChange: this.onChange,
-      readOnly: this.state.readOnly,
       ImageSelector: _imageSelector.ImageSelector
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomInfoBoxButton, {
       isDisabled: disabledButtons.includes(buttonNames.infoBox),
+      readOnly: readOnly,
       editorState: editorState,
       onChange: this.onChange,
-      readOnly: this.state.readOnly,
-      renderBasicEditor: renderBasicEditor,
-      decorators: _entityDecorator.default
+      renderBasicEditor: renderBasicEditor // decorators={decorators}
+
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomEmbeddedCodeButton, {
       isDisabled: disabledButtons.includes(buttonNames.embed),
+      readOnly: readOnly,
       editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly
+      onChange: this.onChange
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomTableButton, {
       isDisabled: disabledButtons.includes(buttonNames.table),
+      readOnly: readOnly,
       editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly
+      onChange: this.onChange
     }))), /*#__PURE__*/_react.default.createElement(DraftEditorControlsWrapper, null, /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomAlignLeftButton, {
       isDisabled: disabledButtons.includes(buttonNames.textAlign),
       isActive: (0, _textAlign.getSelectionBlockData)(editorState, 'textAlign') === 'left',
+      readOnly: readOnly,
       editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly
+      onChange: this.onChange
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomAlignCenterButton, {
       isDisabled: disabledButtons.includes(buttonNames.textAlign),
       isActive: (0, _textAlign.getSelectionBlockData)(editorState, 'textAlign') === 'center',
+      readOnly: readOnly,
       editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly
+      onChange: this.onChange
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomColorBoxButton, {
       isDisabled: disabledButtons.includes(buttonNames.colorBox),
+      readOnly: readOnly,
       editorState: editorState,
       onChange: this.onChange,
-      readOnly: this.state.readOnly,
-      renderBasicEditor: renderBasicEditor,
-      decorators: _entityDecorator.default
+      renderBasicEditor: renderBasicEditor // decorators={decorators}
+
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomBackgroundColorButton, {
       isDisabled: disabledButtons.includes(buttonNames.backgroundColor),
       isActive: Object.prototype.hasOwnProperty.call(customStyle, 'backgroundColor'),
+      readOnly: readOnly,
       editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly
+      onChange: this.onChange
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomBGImageButton, {
       isDisabled: disabledButtons.includes(buttonNames.backgroundImage),
+      readOnly: readOnly,
       editorState: editorState,
       onChange: this.onChange,
-      readOnly: this.state.readOnly,
       ImageSelector: _imageSelector.ImageSelector,
       renderBasicEditor: renderBasicEditor,
       decorators: _entityDecorator.default
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomBGVideoButton, {
       isDisabled: disabledButtons.includes(buttonNames.backgroundVideo),
+      readOnly: readOnly,
       editorState: editorState,
       onChange: this.onChange,
-      readOnly: this.state.readOnly,
       VideoSelector: _videoSelector.VideoSelector,
       renderBasicEditor: renderBasicEditor,
       decorators: _entityDecorator.default
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomRelatedPostButton, {
       isDisabled: disabledButtons.includes(buttonNames.relatedPost),
+      readOnly: readOnly,
       editorState: editorState,
       onChange: this.onChange,
-      readOnly: this.state.readOnly,
       PostSelector: _postSelector.PostSelector
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomSideIndexButton, {
       isDisabled: disabledButtons.includes(buttonNames.sideIndex),
+      readOnly: readOnly,
       editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly
+      onChange: this.onChange
     })))), /*#__PURE__*/_react.default.createElement(TextEditorWrapper, {
       onClick: () => {
         var _this$refs$editor;
@@ -862,7 +898,9 @@ const blockStyles = [{
 const BlockStyleControls = props => {
   const {
     editorState,
-    disabledButtons
+    disabledButtons,
+    onToggle,
+    readOnly
   } = props;
   const selection = editorState.getSelection();
   const blockType = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
@@ -871,10 +909,10 @@ const BlockStyleControls = props => {
     key: type.label,
     active: type.style === blockType,
     label: type.label,
-    onToggle: props.onToggle,
+    onToggle: onToggle,
     style: type.style,
     icon: type.icon,
-    readOnly: props.readOnly
+    readOnly: readOnly
   })));
 };
 

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

@@ -54,15 +54,15 @@ function AlignSelector(props) {
       onOpen();
     }
   }, [isOpen]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
+  return /*#__PURE__*/_react.default.createElement(_react.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),
+    value: options.find(option => option.value === align) ?? null,
     options: options,
     onChange: option => {
-      onChange(option.value);
+      onChange((option === null || option === void 0 ? void 0 : option.value) ?? '');
     },
     onMenuOpen: () => setIsOpen(true),
     onMenuClose: () => setIsOpen(false),

package/lib/website/readr/selector/audio-selector.js

@@ -226,7 +226,7 @@ function AudioSelector(props) {
     }
   }, [currentPage, searchText]);
 
-  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AudiosGrids, {
+  let searchResult = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(AudiosGrids, {
     audios: audioFiles,
     selected: selectedAudios,
     onSelect: onAudiosGridSelect
@@ -244,7 +244,9 @@ function AudioSelector(props) {
   }
 
   if (error) {
-    searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `audios` 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, AudiosQuery.loc.source.body)));
+    var _AudiosQuery$loc;
+
+    searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `audios` 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, (_AudiosQuery$loc = AudiosQuery.loc) === null || _AudiosQuery$loc === void 0 ? void 0 : _AudiosQuery$loc.source.body)));
   }
 
   return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {

package/lib/website/readr/selector/image-selector.js

@@ -202,7 +202,7 @@ function ImageMetaGrid(props) {
 
       return e.currentTarget.src = image === null || image === void 0 ? void 0 : (_image$imageFile2 = image.imageFile) === null || _image$imageFile2 === void 0 ? void 0 : _image$imageFile2.url;
     }
-  }), /*#__PURE__*/_react.default.createElement(ImageName, null, image === null || image === void 0 ? void 0 : image.name), enableCaption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
+  }), /*#__PURE__*/_react.default.createElement(ImageName, null, image === null || image === void 0 ? void 0 : image.name), enableCaption && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
     htmlFor: "caption"
   }, "Image Caption:"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
     id: "caption",
@@ -216,7 +216,7 @@ function ImageMetaGrid(props) {
         url
       });
     })
-  })), enableUrl && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
+  })), enableUrl && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
     htmlFor: "url"
   }, "Url:"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
     id: "url",
@@ -238,7 +238,7 @@ function DelayInput(props) {
     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, {
+  return /*#__PURE__*/_react.default.createElement(_react.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",
@@ -277,7 +277,7 @@ function ImageSelector(props) {
   const [selected, setSelected] = (0, _react.useState)(initialSelected);
   const [delay, setDelay] = (0, _react.useState)('5');
   const [align, setAlign] = (0, _react.useState)(initialAlign);
-  const contentWrapperRef = (0, _react.useRef)();
+  const contentWrapperRef = (0, _react.useRef)(null);
   const pageSize = 6;
   const options = [{
     value: undefined,
@@ -320,7 +320,10 @@ function ImageSelector(props) {
     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.scrollHeight;
+    }
   };
 
   const onImageMetaChange = imageEntityWithMeta => {
@@ -385,7 +388,7 @@ 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(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(ImageGrids, {
     images: images,
     selected: selectedImages,
     onSelect: onImagesGridSelect
@@ -403,7 +406,9 @@ function ImageSelector(props) {
   }
 
   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 === null || imagesQuery === void 0 ? void 0 : (_imagesQuery$loc = imagesQuery.loc) === null || _imagesQuery$loc === void 0 ? void 0 : _imagesQuery$loc.source.body)));
   }
 
   return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
@@ -432,8 +437,10 @@ function ImageSelector(props) {
   })), /*#__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, {
-    align: align,
+  }), enableAlignment && /*#__PURE__*/_react.default.createElement(_alignSelector.AlignSelector // @ts-ignore: align could be undefined
+  , {
+    align: align // @ts-ignore: option with undefined value
+    ,
     options: options,
     onChange: onAlignSelectChange,
     onOpen: onAlignSelectOpen

package/lib/website/readr/selector/post-selector.js

@@ -269,7 +269,7 @@ function PostSelector(props) {
     }
   }, [currentPage, searchText]);
 
-  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(PostGrids, {
+  let searchResult = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(PostGrids, {
     posts: posts,
     selected: selectedPosts,
     onSelect: onPostsGridSelect
@@ -287,7 +287,9 @@ function PostSelector(props) {
   }
 
   if (error) {
-    searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `posts` 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, postsQuery.loc.source.body)));
+    var _postsQuery$loc;
+
+    searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `posts` 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, (_postsQuery$loc = postsQuery.loc) === null || _postsQuery$loc === void 0 ? void 0 : _postsQuery$loc.source.body)));
   }
 
   return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {

package/lib/website/readr/selector/video-selector.js

@@ -243,7 +243,7 @@ function VideoSelector(props) {
     }
   }, [currentPage, searchText]);
 
-  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(VideosGrids, {
+  let searchResult = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(VideosGrids, {
     videos: videos,
     selected: selectedVideos,
     onSelect: onVideosGridSelect
@@ -261,7 +261,9 @@ function VideoSelector(props) {
   }
 
   if (error) {
-    searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `videos` 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, videosQuery.loc.source.body)));
+    var _videosQuery$loc;
+
+    searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `videos` 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, (_videosQuery$loc = videosQuery.loc) === null || _videosQuery$loc === void 0 ? void 0 : _videosQuery$loc.source.body)));
   }
 
   return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {