@mirrormedia/lilith-draft-editor 1.1.0-alpha.2 → 1.1.0-alpha.21

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

@@ -37,9 +37,9 @@ function ImageButton(props) {
     }
 
     const contentState = editorState.getCurrentContent();
-    const contentStateWithEntity = contentState.createEntity('image', 'IMMUTABLE', { ...(selected === null || selected === void 0 ? void 0 : selected.image),
-      desc: selected === null || selected === void 0 ? void 0 : selected.desc,
-      url: selected === null || selected === void 0 ? void 0 : selected.url,
+    const contentStateWithEntity = contentState.createEntity('image', 'IMMUTABLE', { ...selected.image,
+      desc: selected.desc,
+      url: selected.url,
       alignment: align
     });
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();

package/lib/draft-js/buttons/selector/audio-selector.js

@@ -94,7 +94,6 @@ function AudioGrid(props) {
     onSelect,
     isSelected
   } = props;
-  console.log('audio', audio);
   return /*#__PURE__*/_react.default.createElement(AudioGridWrapper, {
     key: audio === null || audio === void 0 ? void 0 : audio.id,
     onClick: () => onSelect(audio)

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

@@ -240,6 +240,16 @@ const imagesQuery = (0, _apollo.gql)`
 `;
 
 function ImageSelector(props) {
+  const {
+    enableMultiSelect = false,
+    enableCaption = false,
+    enableUrl = false,
+    enableAlignment = false,
+    enableDelay = false,
+    onChange,
+    initialSelected = [],
+    initialAlign
+  } = props;
   const [queryImages, {
     loading,
     error,
@@ -253,9 +263,9 @@ 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 [selected, setSelected] = (0, _react.useState)(initialSelected);
   const [delay, setDelay] = (0, _react.useState)('5');
-  const [align, setAlign] = (0, _react.useState)(undefined);
+  const [align, setAlign] = (0, _react.useState)(initialAlign);
   const contentWrapperRef = (0, _react.useRef)();
   const pageSize = 6;
   const options = [{
@@ -271,14 +281,6 @@ function ImageSelector(props) {
     label: 'right',
     isDisabled: false
   }];
-  const {
-    enableMultiSelect = false,
-    enableCaption = false,
-    enableUrl = false,
-    enableAlignment = false,
-    enableDelay = false,
-    onChange
-  } = props;
 
   const onSave = () => {
     let adjustedDelay = +delay;

package/lib/draft-js/buttons/youtube.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.YoutubeButton = YoutubeButton;
+exports.YoutubeInput = YoutubeInput;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _draftJs = require("draft-js");
+
+var _modals = require("@keystone-ui/modals");
+
+var _fields = require("@keystone-ui/fields");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+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;
+  font-weight: 600;
+  margin: 10px 0;
+`;
+
+function YoutubeInput(props) {
+  const {
+    isOpen,
+    onChange,
+    onCancel
+  } = props;
+  const initialInputValue = {
+    description: '',
+    youtubeId: ''
+  };
+  const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
+
+  const clearInputValue = () => {
+    setInputValue(initialInputValue);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
+    isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
+    title: `Insert Youtube video`,
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: () => {
+          clearInputValue();
+          onCancel();
+        }
+      },
+      confirm: {
+        label: 'Confirm',
+        action: () => {
+          onChange({
+            description: inputValue.description,
+            youtubeId: inputValue.youtubeId
+          });
+          clearInputValue();
+        }
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(Label, {
+    htmlFor: "description"
+  }, "Youtube Description"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+    onChange: e => setInputValue({
+      description: e.target.value,
+      youtubeId: inputValue.youtubeId
+    }),
+    type: "text",
+    placeholder: "description",
+    id: "description",
+    value: inputValue.description
+  }), /*#__PURE__*/_react.default.createElement(Label, {
+    htmlFor: "youtubeId"
+  }, "Youtube Videi Id"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+    onChange: e => setInputValue({
+      description: inputValue.description,
+      youtubeId: e.target.value
+    }),
+    type: "text",
+    placeholder: "youtubeId",
+    id: "youtubeId",
+    value: inputValue.youtubeId
+  })));
+}
+
+function YoutubeButton(props) {
+  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
+  const {
+    className,
+    editorState,
+    onChange: onEditorStateChange
+  } = props;
+
+  const onChange = ({
+    description,
+    youtubeId
+  }) => {
+    const contentState = editorState.getCurrentContent(); // create an InfoBox entity
+
+    const contentStateWithEntity = contentState.createEntity('YOUTUBE', 'IMMUTABLE', {
+      description,
+      youtubeId
+    });
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+
+    const newEditorState = _draftJs.EditorState.set(editorState, {
+      currentContent: contentStateWithEntity
+    }); //The third parameter here is a space string, not an empty string
+    //If you set an empty string, you will get an error: Unknown DraftEntity key: null
+
+
+    onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
+    setToShowInput(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(YoutubeInput, {
+    onChange: onChange,
+    onCancel: () => {
+      setToShowInput(false);
+    },
+    isOpen: toShowInput
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: className,
+    onClick: () => {
+      setToShowInput(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    height: "16px",
+    width: "14px",
+    version: "1.1",
+    id: "Layer_1",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 461.001 461.001"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fill: "#6b7280",
+    d: "M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728 c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137 C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607 c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"
+  })), /*#__PURE__*/_react.default.createElement("span", null, "Youtube")));
+}

package/lib/website/mirrormedia/block-renderer/image-block.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageEditorBlock = ImageEditorBlock;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _mirrormedia = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/mirrormedia"));
+
+var _imageSelector = require("../selector/image-selector");
+
+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 {
+  ImageBlock
+} = _mirrormedia.default.blockRenderers;
+const ImageBlockWrapper = _styledComponents.default.div`
+  img {
+    min-width: 300px;
+    max-width: 600px;
+  }
+`;
+const ImageEditButton = _styledComponents.default.span`
+  cursor: pointer;
+  background-color: white;
+  padding: 6px;
+  border-radius: 6px;
+`;
+
+function ImageEditorBlock(props) {
+  const [toShowImageSelector, setToShowImageSelector] = (0, _react.useState)(false);
+  const {
+    block,
+    blockProps,
+    contentState
+  } = props;
+  const {
+    onEditStart,
+    onEditFinish
+  } = blockProps;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    id,
+    name,
+    imageFile,
+    resized,
+    resizedWebp,
+    desc,
+    url,
+    alignment
+  } = entity.getData();
+  const imageWithMeta = {
+    image: {
+      id,
+      name,
+      imageFile,
+      resized,
+      resizedWebp
+    },
+    desc,
+    url
+  };
+
+  const onImageSelectorChange = (params, align) => {
+    if (params.length === 0) {
+      onEditFinish({});
+    } else {
+      const imageEntity = params[0];
+      onEditFinish({
+        entityKey,
+        entityData: { ...imageEntity.image,
+          desc: imageEntity.desc,
+          url: imageEntity.url,
+          alignment: align
+        }
+      });
+    }
+
+    setToShowImageSelector(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowImageSelector && /*#__PURE__*/_react.default.createElement(_imageSelector.ImageSelector, {
+    onChange: onImageSelectorChange,
+    enableCaption: true,
+    enableUrl: true,
+    enableAlignment: true,
+    initialAlign: alignment,
+    initialSelected: [imageWithMeta]
+  }), /*#__PURE__*/_react.default.createElement(ImageBlockWrapper, null, /*#__PURE__*/_react.default.createElement(ImageBlock, props)), /*#__PURE__*/_react.default.createElement(ImageEditButton, {
+    onClick: () => {
+      // call `onEditStart` prop as we are trying to update the BGImage entity
+      onEditStart(); // open `BGImageInput`
+
+      setToShowImageSelector(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa-solid fa-pen"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify")));
+}

package/lib/website/mirrormedia/block-renderer-fn.js

@@ -21,17 +21,19 @@ var _embeddedCodeBlock = require("./block-renderer/embedded-code-block");
 
 var _slideshowBlock = require("./block-renderer/slideshow-block");
 
+var _imageBlock = require("./block-renderer/image-block");
+
 var _mirrormedia = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/mirrormedia"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const {
   MediaBlock,
-  ImageBlock,
   DividerBlock,
   RelatedPostBlock,
   VideoBlock,
-  AudioBlock
+  AudioBlock,
+  YoutubeBlock
 } = _mirrormedia.default.blockRenderers;
 
 const AtomicBlock = props => {
@@ -48,7 +50,7 @@ const AtomicBlock = props => {
 
     case 'image':
       {
-        return ImageBlock(entity);
+        return (0, _imageBlock.ImageEditorBlock)(props);
       }
 
     case 'slideshow':
@@ -115,6 +117,11 @@ const AtomicBlock = props => {
       {
         return AudioBlock(entity);
       }
+
+    case 'YOUTUBE':
+      {
+        return YoutubeBlock(entity);
+      }
   }
 
   return null;

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

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _theme = _interopRequireDefault(require("./theme"));
+
 var _draftJs = require("draft-js");
 
 var _blockRendererFn = require("./block-renderer-fn");
@@ -53,6 +55,8 @@ var _video = require("../../draft-js/buttons/video");
 
 var _audio = require("../../draft-js/buttons/audio");
 
+var _youtube = require("../../draft-js/buttons/youtube");
+
 var _const = require("../../draft-js/const");
 
 var _imageSelector = require("./selector/image-selector");
@@ -103,10 +107,11 @@ const buttonNames = {
   relatedPost: 'related-post',
   sideIndex: 'side-index',
   video: 'video',
-  audio: 'audio'
+  audio: 'audio',
+  youtube: 'youtube'
 };
 exports.buttonNames = buttonNames;
-const disabledButtonsOnBasicEditor = [buttonNames.annotation, buttonNames.divider, buttonNames.embed, buttonNames.image, buttonNames.infoBox, buttonNames.slideshow, buttonNames.table, buttonNames.textAlign, buttonNames.colorBox, buttonNames.backgroundColor, buttonNames.backgroundImage, buttonNames.backgroundVideo, buttonNames.relatedPost, buttonNames.sideIndex, buttonNames.video, buttonNames.audio];
+const disabledButtonsOnBasicEditor = [buttonNames.annotation, buttonNames.divider, buttonNames.embed, buttonNames.image, buttonNames.infoBox, buttonNames.slideshow, buttonNames.table, buttonNames.textAlign, buttonNames.colorBox, buttonNames.backgroundColor, buttonNames.backgroundImage, buttonNames.backgroundVideo, buttonNames.relatedPost, buttonNames.sideIndex, buttonNames.video, buttonNames.audio, buttonNames.youtube];
 const buttonStyle = (0, _styledComponents.css)`
   border-radius: 6px;
   text-align: center;
@@ -248,6 +253,7 @@ const CustomAlignCenterButton = createButtonWithoutProps(_textAlign.AlignCenterB
 const CustomAlignLeftButton = createButtonWithoutProps(_textAlign.AlignLeftButton, true);
 const CustomVideoButton = createButtonWithoutProps(_video.VideoButton);
 const CustomAudioButton = createButtonWithoutProps(_audio.AudioButton);
+const CustomYoutubeButton = createButtonWithoutProps(_youtube.YoutubeButton);
 const DraftEditorWrapper = _styledComponents.default.div`
   /* Rich-editor default setting (.RichEditor-root)*/
   background: #fff;
@@ -265,11 +271,16 @@ const DraftEditorWrapper = _styledComponents.default.div`
   background: rgb(255, 255, 255);
   border-radius: 6px;
   padding: 0 1rem 1rem;
-
+  font-size: 18px;
+  line-height: 2;
   /* Draft built-in buttons' style */
   .public-DraftStyleDefault-header-two {
+    font-size: 36px;
+    line-height: 1.5;
   }
   .public-DraftStyleDefault-header-three {
+    font-size: 30px;
+    line-height: 1.5;
   }
   .public-DraftStyleDefault-header-four {
   }
@@ -632,7 +643,9 @@ class RichTextEditor extends _react.default.Component {
       }));
     };
 
-    return /*#__PURE__*/_react.default.createElement(DraftEditorContainer, {
+    return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
+      theme: _theme.default
+    }, /*#__PURE__*/_react.default.createElement(DraftEditorContainer, {
       isEnlarged: 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",
@@ -699,6 +712,11 @@ class RichTextEditor extends _react.default.Component {
       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),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomAudioButton, {
       isDisabled: disabledButtons.includes(buttonNames.audio),
       editorState: editorState,
@@ -801,7 +819,7 @@ class RichTextEditor extends _react.default.Component {
       ref: "editor",
       spellCheck: true,
       readOnly: readOnly
-    }))));
+    })))));
   }
 
 }

package/lib/website/mirrormedia/entity-decorator.js

@@ -11,10 +11,17 @@ var _mirrormedia = _interopRequireDefault(require("@mirrormedia/lilith-draft-ren
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+//Because `annotationDecorator` and `linkDecorator` is generated by different `contentLayout`,
+//so it is needed to generate decorators by using function `decoratorsGenerator`.
 const {
   annotationDecorator,
   linkDecorator
 } = _mirrormedia.default.entityDecorators;
-const decorators = new _draftJs.CompositeDecorator([annotationDecorator, linkDecorator]);
+
+const decoratorsGenerator = (contentLayout = 'normal') => {
+  return new _draftJs.CompositeDecorator([annotationDecorator(contentLayout), linkDecorator(contentLayout)]);
+};
+
+const decorators = decoratorsGenerator('normal');
 var _default = decorators;
 exports.default = _default;

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

@@ -94,7 +94,6 @@ function AudioGrid(props) {
     onSelect,
     isSelected
   } = props;
-  console.log('audio', audio);
   return /*#__PURE__*/_react.default.createElement(AudioGridWrapper, {
     key: audio === null || audio === void 0 ? void 0 : audio.id,
     onClick: () => onSelect(audio)

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

@@ -50,6 +50,14 @@ const imagesQuery = (0, _apollo.gql)`
         w1600
         w2400
       }
+      resizedWebp {
+        original
+        w480
+        w800
+        w1200
+        w1600
+        w2400
+      }
     }
   }
 `;
@@ -242,6 +250,16 @@ function DelayInput(props) {
 }
 
 function ImageSelector(props) {
+  const {
+    enableMultiSelect = false,
+    enableCaption = false,
+    enableUrl = false,
+    enableAlignment = false,
+    enableDelay = false,
+    onChange,
+    initialSelected = [],
+    initialAlign
+  } = props;
   const [queryImages, {
     loading,
     error,
@@ -255,9 +273,9 @@ 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 [selected, setSelected] = (0, _react.useState)(initialSelected);
   const [delay, setDelay] = (0, _react.useState)('5');
-  const [align, setAlign] = (0, _react.useState)(undefined);
+  const [align, setAlign] = (0, _react.useState)(initialAlign);
   const contentWrapperRef = (0, _react.useRef)();
   const pageSize = 6;
   const options = [{
@@ -273,14 +291,6 @@ function ImageSelector(props) {
     label: 'right',
     isDisabled: false
   }];
-  const {
-    enableMultiSelect = false,
-    enableCaption = false,
-    enableUrl = false,
-    enableAlignment = false,
-    enableDelay = false,
-    onChange
-  } = props;
 
   const onSave = () => {
     let adjustedDelay = +delay;

package/lib/website/mirrormedia/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/readr/block-renderer/background-image-block.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.BGImageBlock = BGImageBlock;
 exports.BGImageEditorBlock = BGImageEditorBlock;
 
 var _react = _interopRequireWildcard(require("react"));
@@ -13,17 +14,64 @@ var _draftConverter = _interopRequireDefault(require("../../../draft-js/draft-co
 
 var _backgroundImage = require("../../../draft-js/buttons/background-image");
 
-var _readr = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/readr"));
-
 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 {
-  BGImageBlock
-} = _readr.default.blockRenderers;
+const BGImageRenderWrapper = _styledComponents.default.div`
+  padding: 30px;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-image: url(${({
+  image
+}) => image});
+  background-size: cover;
+  background-position: center center;
+  ${({
+  textBlockAlign
+}) => {
+  if (textBlockAlign === 'left') {
+    return `padding-right: 50%;`;
+  } else if (textBlockAlign === 'right') {
+    return `padding-left: 50%;`;
+  } else if (textBlockAlign === 'bottom') {
+    return `padding-top: 50%;`;
+  }
+}}
+`;
+const BGImageRenderBody = _styledComponents.default.div`
+  background: rgba(0, 0, 0, 0.5);
+  padding: 4px 20px;
+  margin-bottom: 10px;
+`;
+
+function BGImageBlock(props) {
+  var _image$imageFile, _image$resized, _image$resized2;
+
+  const {
+    block,
+    contentState
+  } = props;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    textBlockAlign,
+    image,
+    body
+  } = entity.getData();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BGImageRenderWrapper, {
+    image: (image === null || image === void 0 ? void 0 : (_image$imageFile = image.imageFile) === null || _image$imageFile === void 0 ? void 0 : _image$imageFile.url) || (image === null || image === void 0 ? void 0 : (_image$resized = image.resized) === null || _image$resized === void 0 ? void 0 : _image$resized.w800) || (image === null || image === void 0 ? void 0 : (_image$resized2 = image.resized) === null || _image$resized2 === void 0 ? void 0 : _image$resized2.original),
+    textBlockAlign: textBlockAlign
+  }, /*#__PURE__*/_react.default.createElement(BGImageRenderBody, {
+    dangerouslySetInnerHTML: {
+      __html: body
+    }
+  })));
+}
+
 const BGImageRenderButton = _styledComponents.default.span`
   cursor: pointer;
   background-color: white;

package/lib/website/readr/block-renderer/background-video-block.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.BGVideoBlock = BGVideoBlock;
 exports.BGVideoEditorBlock = BGVideoEditorBlock;
 
 var _react = _interopRequireWildcard(require("react"));
@@ -13,17 +14,74 @@ var _draftConverter = _interopRequireDefault(require("../../../draft-js/draft-co
 
 var _backgroundVideo = require("../../../draft-js/buttons/background-video");
 
-var _readr = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/readr"));
-
 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 {
-  BGVideoBlock
-} = _readr.default.blockRenderers;
+const BGVideoRenderWrapper = _styledComponents.default.div`
+  position: relative;
+  padding: 30px;
+  width: 100%;
+  ${({
+  textBlockAlign
+}) => {
+  if (textBlockAlign === 'left') {
+    return `padding-right: 50%;`;
+  } else if (textBlockAlign === 'right') {
+    return `padding-left: 50%;`;
+  } else if (textBlockAlign === 'bottom') {
+    return `padding-top: 50%;`;
+  }
+}}
+`;
+const BGVideoRednerVideo = _styledComponents.default.video`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  background-color: black;
+`;
+const BGVideoRenderBody = _styledComponents.default.div`
+  background: rgba(0, 0, 0, 0.5);
+  padding: 4px 20px;
+  margin-bottom: 10px;
+`;
+
+function BGVideoBlock(props) {
+  var _video$file;
+
+  const {
+    block,
+    contentState
+  } = props;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    textBlockAlign,
+    video,
+    body
+  } = entity.getData();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BGVideoRenderWrapper, {
+    textBlockAlign: textBlockAlign
+  }, /*#__PURE__*/_react.default.createElement(BGVideoRednerVideo, {
+    muted: true,
+    autoPlay: true,
+    loop: true
+  }, /*#__PURE__*/_react.default.createElement("source", {
+    src: video === null || video === void 0 ? void 0 : video.url
+  }), /*#__PURE__*/_react.default.createElement("source", {
+    src: video === null || video === void 0 ? void 0 : (_video$file = video.file) === null || _video$file === void 0 ? void 0 : _video$file.url
+  })), /*#__PURE__*/_react.default.createElement(BGVideoRenderBody, {
+    dangerouslySetInnerHTML: {
+      __html: body
+    }
+  })));
+}
+
 const BGVideoRenderButton = _styledComponents.default.span`
   cursor: pointer;
   background-color: white;

package/lib/website/readr/block-renderer/image-block.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageEditorBlock = ImageEditorBlock;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _readr = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/readr"));
+
+var _imageSelector = require("../selector/image-selector");
+
+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 {
+  ImageBlock
+} = _readr.default.blockRenderers;
+const ImageBlockWrapper = _styledComponents.default.div`
+  img {
+    min-width: 300px;
+    max-width: 600px;
+  }
+`;
+const ImageEditButton = _styledComponents.default.span`
+  cursor: pointer;
+  background-color: white;
+  padding: 6px;
+  border-radius: 6px;
+`;
+
+function ImageEditorBlock(props) {
+  const [toShowImageSelector, setToShowImageSelector] = (0, _react.useState)(false);
+  const {
+    block,
+    blockProps,
+    contentState
+  } = props;
+  const {
+    onEditStart,
+    onEditFinish
+  } = blockProps;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    id,
+    name,
+    imageFile,
+    resized,
+    desc,
+    url,
+    alignment
+  } = entity.getData();
+  const imageWithMeta = {
+    image: {
+      id,
+      name,
+      imageFile,
+      resized
+    },
+    desc,
+    url
+  };
+
+  const onImageSelectorChange = (params, align) => {
+    if (params.length === 0) {
+      onEditFinish({});
+    } else {
+      const imageEntity = params[0];
+      onEditFinish({
+        entityKey,
+        entityData: { ...imageEntity.image,
+          desc: imageEntity.desc,
+          url: imageEntity.url,
+          alignment: align
+        }
+      });
+    }
+
+    setToShowImageSelector(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowImageSelector && /*#__PURE__*/_react.default.createElement(_imageSelector.ImageSelector, {
+    onChange: onImageSelectorChange,
+    enableCaption: true,
+    enableUrl: true,
+    enableAlignment: true,
+    initialAlign: alignment,
+    initialSelected: [imageWithMeta]
+  }), /*#__PURE__*/_react.default.createElement(ImageBlockWrapper, null, /*#__PURE__*/_react.default.createElement(ImageBlock, props)), /*#__PURE__*/_react.default.createElement(ImageEditButton, {
+    onClick: () => {
+      // call `onEditStart` prop as we are trying to update the BGImage entity
+      onEditStart(); // open `BGImageInput`
+
+      setToShowImageSelector(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa-solid fa-pen"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify")));
+}

package/lib/website/readr/block-renderer-fn.js

@@ -17,6 +17,8 @@ var _backgroundVideoBlock = require("./block-renderer/background-video-block");
 
 var _sideIndexBlock = require("./block-renderer/side-index-block");
 
+var _imageBlock = require("./block-renderer/image-block");
+
 var _readr = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/readr"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -24,7 +26,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const {
   EmbeddedCodeBlock,
   MediaBlock,
-  ImageBlock,
   SlideshowBlock,
   SlideshowBlockV2,
   DividerBlock,
@@ -47,7 +48,7 @@ const AtomicBlock = props => {
 
     case 'image':
       {
-        return ImageBlock(entity);
+        return (0, _imageBlock.ImageEditorBlock)(props);
       }
 
     case 'slideshow':
@@ -109,6 +110,11 @@ const AtomicBlock = props => {
       {
         return VideoBlock(entity);
       }
+
+    case 'AUDIO':
+      {
+        return AudioBlock(entity);
+      }
   }
 
   return null;

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

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _theme = _interopRequireDefault(require("./theme"));
+
 var _draftJs = require("draft-js");
 
 var _blockRendererFn = require("./block-renderer-fn");
@@ -632,7 +634,9 @@ class RichTextEditor extends _react.default.Component {
       }));
     };
 
-    return /*#__PURE__*/_react.default.createElement(DraftEditorContainer, {
+    return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
+      theme: _theme.default
+    }, /*#__PURE__*/_react.default.createElement(DraftEditorContainer, {
       isEnlarged: 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",
@@ -801,7 +805,7 @@ class RichTextEditor extends _react.default.Component {
       ref: "editor",
       spellCheck: true,
       readOnly: readOnly
-    }))));
+    })))));
   }
 
 }

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

@@ -94,7 +94,6 @@ function AudioGrid(props) {
     onSelect,
     isSelected
   } = props;
-  console.log('audio', audio);
   return /*#__PURE__*/_react.default.createElement(AudioGridWrapper, {
     key: audio === null || audio === void 0 ? void 0 : audio.id,
     onClick: () => onSelect(audio)
@@ -155,18 +154,6 @@ const AudiosQuery = (0, _apollo.gql)`
       file {
         url
       }
-      heroImage {
-        imageFile {
-          url
-        }
-        resized {
-          w480
-          w800
-          w1200
-          w1600
-          w2400
-        }
-      }
     }
   }
 `;

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

@@ -242,6 +242,16 @@ function DelayInput(props) {
 }
 
 function ImageSelector(props) {
+  const {
+    enableMultiSelect = false,
+    enableCaption = false,
+    enableUrl = false,
+    enableAlignment = false,
+    enableDelay = false,
+    onChange,
+    initialSelected = [],
+    initialAlign
+  } = props;
   const [queryImages, {
     loading,
     error,
@@ -255,9 +265,9 @@ 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 [selected, setSelected] = (0, _react.useState)(initialSelected);
   const [delay, setDelay] = (0, _react.useState)('5');
-  const [align, setAlign] = (0, _react.useState)(undefined);
+  const [align, setAlign] = (0, _react.useState)(initialAlign);
   const contentWrapperRef = (0, _react.useRef)();
   const pageSize = 6;
   const options = [{
@@ -273,14 +283,6 @@ function ImageSelector(props) {
     label: 'right',
     isDisabled: false
   }];
-  const {
-    enableMultiSelect = false,
-    enableCaption = false,
-    enableUrl = false,
-    enableAlignment = false,
-    enableDelay = false,
-    onChange
-  } = props;
 
   const onSave = () => {
     let adjustedDelay = +delay;

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

@@ -206,8 +206,7 @@ function PostSelector(props) {
   const {
     onChange,
     enableMultiSelect = false,
-    minSelectCount = 1,
-    maxSelectCount = 3
+    minSelectCount = 1
   } = props;
 
   const onSave = () => {
@@ -242,15 +241,9 @@ function PostSelector(props) {
 
 
       if (enableMultiSelect) {
-        let newSelected = selected.concat([{
+        return selected.concat([{
           post: postEntity
         }]);
-
-        if (maxSelectCount && newSelected.length >= maxSelectCount) {
-          newSelected = newSelected.slice(-maxSelectCount);
-        }
-
-        return newSelected;
       } // single select
 
 

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

@@ -0,0 +1,39 @@
+"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)`
+  },
+  fontSize: {
+    xs: 'font-size: 14px;',
+    sm: 'font-size: 16px;',
+    md: 'font-size: 18px;',
+    lg: 'font-size: 24px;',
+    xl: 'font-size: 28px;'
+  },
+  margin: {
+    default: 'margin: 32px auto;',
+    narrow: 'margin: 16px auto;'
+  }
+};
+exports.theme = theme;
+var _default = theme;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirrormedia/lilith-draft-editor",
-  "version": "1.1.0-alpha.2",
+  "version": "1.1.0-alpha.21",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -23,16 +23,16 @@
   "license": "MIT",
   "dependencies": {
     "draft-js": "^0.11.7",
-    "@mirrormedia/lilith-draft-renderer": "1.1.0-alpha.5"
+    "@mirrormedia/lilith-draft-renderer": "1.3.0-alpha.3"
   },
   "peerDependencies": {
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "styled-components": "5.3.5",
-    "@keystone-6/core": "1.1.1",
-    "@keystone-ui/button": "^6.0.0",
-    "@keystone-ui/fields": "^6.0.0",
-    "@keystone-ui/modals": "^5.0.0"
+    "@keystone-6/core": "5.2.0",
+    "@keystone-ui/button": "^7.0.2",
+    "@keystone-ui/fields": "^7.2.0",
+    "@keystone-ui/modals": "^6.0.3"
   },
   "files": [
     "lib"