@mirrormedia/lilith-draft-editor 2.2.1 → 3.0.0

package/lib/website/mirrordaily/shared-style/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultMarginTop = exports.defaultMarginBottom = void 0;
+
+var _styledComponents = require("styled-components");
+
+const defaultMarginTop = (0, _styledComponents.css)`
+  margin-top: 32px;
+`;
+exports.defaultMarginTop = defaultMarginTop;
+const defaultMarginBottom = (0, _styledComponents.css)`
+  margin-bottom: 32px;
+`;
+exports.defaultMarginBottom = defaultMarginBottom;

package/lib/website/mirrordaily/theme/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.theme = exports.mediaSize = exports.default = void 0;
+const mediaSize = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 960,
+  xl: 1200,
+  xxl: 1400
+};
+exports.mediaSize = mediaSize;
+const theme = {
+  breakpoint: {
+    xs: `@media (min-width: ${mediaSize.xs}px)`,
+    sm: `@media (min-width: ${mediaSize.sm}px)`,
+    md: `@media (min-width: ${mediaSize.md}px)`,
+    lg: `@media (min-width: ${mediaSize.lg}px)`,
+    xl: `@media (min-width: ${mediaSize.xl}px)`,
+    xxl: `@media (min-width: ${mediaSize.xxl}px)`
+  }
+};
+exports.theme = theme;
+var _default = theme;
+exports.default = _default;

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

@@ -547,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 = () => {
@@ -697,10 +697,6 @@ class RichTextEditor extends _react.default.Component {
       href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css",
       rel: "stylesheet",
       type: "text/css"
-    }), /*#__PURE__*/_react.default.createElement("link", {
-      href: "https://storage.googleapis.com/static-readr-tw-dev/cdn/draft-js/rich-editor.css",
-      rel: "stylesheet",
-      type: "text/css"
     }), /*#__PURE__*/_react.default.createElement("link", {
       href: "https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.11.7/Draft.css",
       rel: "stylesheet",

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,15 +673,11 @@ 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",
       type: "text/css"
-    }), /*#__PURE__*/_react.default.createElement("link", {
-      href: "https://storage.googleapis.com/static-readr-tw-dev/cdn/draft-js/rich-editor.css",
-      rel: "stylesheet",
-      type: "text/css"
     }), /*#__PURE__*/_react.default.createElement("link", {
       href: "https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.11.7/Draft.css",
       rel: "stylesheet",
@@ -655,30 +687,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 +718,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 +894,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 +905,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, {