@mirrormedia/lilith-draft-editor 1.3.3 → 2.1.0

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.buttonNames = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -69,12 +69,12 @@ var _audioSelector = require("./selector/audio-selector");
 
 var _sharedStyle = require("./shared-style");
 
+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; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 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); }
 
 const buttonNames = {
@@ -125,42 +125,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 ';
   }
 
@@ -168,8 +179,10 @@ const buttonStyle = (0, _styledComponents.css)`
 }};
   transition: box-shadow 100ms linear;
 
-  display: ${props => {
-  if (props.isDisabled) {
+  display: ${({
+  isDisabled
+}) => {
+  if (isDisabled) {
     return 'none';
   }
 
@@ -178,35 +191,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';
   }
 
@@ -230,13 +252,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`);
@@ -361,7 +384,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%;
@@ -373,7 +398,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;
@@ -381,20 +408,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;
@@ -437,10 +470,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)) {
@@ -466,7 +499,7 @@ class RichTextEditor extends _react.default.Component {
         this.onChange(newEditorState);
       }
 
-      return;
+      return null;
     }
 
     return (0, _draftJs.getDefaultKeyBinding)(e);
@@ -514,7 +547,7 @@ class RichTextEditor extends _react.default.Component {
         styles['backgroundColor'] = styleName.split(_const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)[1];
       }
 
-      return styles;
+      return styles ?? {};
     }, {});
   };
   toggleEnlarge = () => {
@@ -556,7 +589,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;
         }
@@ -593,7 +626,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, {
@@ -613,19 +646,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() {
@@ -656,7 +692,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",
@@ -674,30 +710,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,
@@ -705,109 +741,109 @@ 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(CustomYoutubeButton, {
       isDisabled: disabledButtons.includes(buttonNames.youtube),
+      readOnly: readOnly,
       editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly
+      onChange: this.onChange
     })), /*#__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;
@@ -890,7 +926,7 @@ const BlockStyleControls = props => {
   } = props;
   const selection = editorState.getSelection();
   const blockType = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, blockStyles.map(type => /*#__PURE__*/_react.default.createElement(StyleButton, {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, blockStyles.map(type => /*#__PURE__*/_react.default.createElement(StyleButton, {
     isDisabled: disabledButtons.includes(type.style),
     key: type.label,
     active: type.style === blockType,
@@ -922,7 +958,7 @@ const inlineStyles = [{
 
 const InlineStyleControls = props => {
   const currentStyle = props.editorState.getCurrentInlineStyle();
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, inlineStyles.map(type => /*#__PURE__*/_react.default.createElement(StyleButton, {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, inlineStyles.map(type => /*#__PURE__*/_react.default.createElement(StyleButton, {
     isDisabled: props.disabledButtons.includes(type.style.toLowerCase()),
     key: type.label,
     active: currentStyle.has(type.style),

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AlignSelector = AlignSelector;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -13,10 +13,6 @@ 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;
@@ -54,15 +50,15 @@ function AlignSelector(props) {
       onOpen();
     }
   }, [isOpen]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
+  return /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(Label, {
     htmlFor: "alignment"
-  }, "\u5C0D\u9F4A"), /*#__PURE__*/_react.default.createElement(AlignSelect, {
+  }, "\u5C0D\u9F4A"), /*#__PURE__*/React.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/mirrormedia/selector/audio-selector.js

@@ -238,7 +238,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
@@ -256,7 +256,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 === null || AudiosQuery === void 0 ? void 0 : (_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/mirrormedia/selector/image-selector.js

@@ -204,7 +204,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",
@@ -218,7 +218,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",
@@ -240,7 +240,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",
@@ -280,7 +280,7 @@ function ImageSelector(props) {
   const [selected, setSelected] = (0, _react.useState)(initialSelected);
   const [delay, setDelay] = (0, _react.useState)(initialDelay ?? '5');
   const [align, setAlign] = (0, _react.useState)(initialAlign);
-  const contentWrapperRef = (0, _react.useRef)();
+  const contentWrapperRef = (0, _react.useRef)(null);
   const pageSize = 18;
   const options = [{
     value: undefined,
@@ -323,7 +323,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 => {
@@ -388,7 +391,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
@@ -406,7 +409,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, _imagesQuery$loc$sour;
+
+    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$sour = _imagesQuery$loc.source) === null || _imagesQuery$loc$sour === void 0 ? void 0 : _imagesQuery$loc$sour.body)));
   }
 
   return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
@@ -435,8 +440,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