@mirrormedia/lilith-draft-editor 1.1.0-alpha.9 → 1.2.0

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':

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

@@ -145,6 +145,7 @@ const AudiosQuery = (0, _apollo.gql)`
     audioFilesCount(where: { name: { contains: $searchText } })
     audioFiles(
       where: { name: { contains: $searchText } }
+      orderBy: { id: desc }
       take: $take
       skip: $skip
     ) {

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

@@ -34,6 +34,7 @@ const imagesQuery = (0, _apollo.gql)`
     photosCount(where: { name: { contains: $searchText } })
     photos(
       where: { name: { contains: $searchText } }
+      orderBy: { id: desc }
       take: $take
       skip: $skip
     ) {
@@ -242,6 +243,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 +266,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 +284,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

@@ -28,6 +28,7 @@ const postsQuery = (0, _apollo.gql)`
     postsCount(where: { name: { contains: $searchText } })
     posts(
       where: { name: { contains: $searchText } }
+      orderBy: { id: desc }
       take: $take
       skip: $skip
     ) {
@@ -206,8 +207,7 @@ function PostSelector(props) {
   const {
     onChange,
     enableMultiSelect = false,
-    minSelectCount = 1,
-    maxSelectCount = 3
+    minSelectCount = 1
   } = props;
 
   const onSave = () => {
@@ -242,15 +242,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/selector/video-selector.js

@@ -28,6 +28,7 @@ const videosQuery = (0, _apollo.gql)`
     videosCount(where: { name: { contains: $searchText } })
     videos(
       where: { name: { contains: $searchText } }
+      orderBy: { id: desc }
       take: $take
       skip: $skip
     ) {

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

@@ -21,6 +21,17 @@ const theme = {
     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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirrormedia/lilith-draft-editor",
-  "version": "1.1.0-alpha.9",
+  "version": "1.2.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -23,18 +23,18 @@
   "license": "MIT",
   "dependencies": {
     "draft-js": "^0.11.7",
-    "@mirrormedia/lilith-draft-renderer": "1.1.0-alpha.17"
+    "@mirrormedia/lilith-draft-renderer": "1.3.0-alpha.26"
   },
   "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"
   ]
-}
+}