@mirrormedia/lilith-draft-editor 1.3.2 → 2.0.0

package/lib/website/mirrormedia/selector/pagination.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Pagination = Pagination;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -46,12 +44,12 @@ function Pagination({
   const prevPage = currentPage - 1; // Don't render the pagiantion component if the pageSize is greater than the total number of items in the list.
 
   if (total <= pageSize) return null;
-  return /*#__PURE__*/_react.default.createElement(PaginationWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, currentPage, " of ", limit, " pages"), /*#__PURE__*/_react.default.createElement(Arrows, null, /*#__PURE__*/_react.default.createElement(ArrowButtonWrapper, {
+  return /*#__PURE__*/React.createElement(PaginationWrapper, null, /*#__PURE__*/React.createElement("div", null, currentPage, " of ", limit, " pages"), /*#__PURE__*/React.createElement(Arrows, null, /*#__PURE__*/React.createElement(ArrowButtonWrapper, {
     onClick: () => {
       onChange(prevPage);
     },
     disable: prevPage < minPage
-  }, /*#__PURE__*/_react.default.createElement("svg", {
+  }, /*#__PURE__*/React.createElement("svg", {
     "aria-hidden": "true",
     focusable: "false",
     height: "24px",
@@ -60,14 +58,14 @@ function Pagination({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     className: "css-bztyua"
-  }, /*#__PURE__*/_react.default.createElement("polyline", {
+  }, /*#__PURE__*/React.createElement("polyline", {
     points: "15 18 9 12 15 6"
-  }), ' ')), /*#__PURE__*/_react.default.createElement(ArrowButtonWrapper, {
+  }), ' ')), /*#__PURE__*/React.createElement(ArrowButtonWrapper, {
     onClick: () => {
       onChange(nextPage);
     },
     disable: nextPage > limit
-  }, /*#__PURE__*/_react.default.createElement("svg", {
+  }, /*#__PURE__*/React.createElement("svg", {
     "aria-hidden": "true",
     focusable: "false",
     height: "24px",
@@ -76,7 +74,7 @@ function Pagination({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     className: "css-bztyua"
-  }, /*#__PURE__*/_react.default.createElement("polyline", {
+  }, /*#__PURE__*/React.createElement("polyline", {
     points: "9 18 15 12 9 6"
   })))));
 }

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

@@ -184,7 +184,7 @@ function PostMetaGrid(props) {
 
       return e.currentTarget.src = post === null || post === void 0 ? void 0 : (_post$heroImage4 = post.heroImage) === null || _post$heroImage4 === void 0 ? void 0 : (_post$heroImage4$imag = _post$heroImage4.imageFile) === null || _post$heroImage4$imag === void 0 ? void 0 : _post$heroImage4$imag.url;
     }
-  }), /*#__PURE__*/_react.default.createElement(PostTitle, null, post === null || post === void 0 ? void 0 : post.name)));
+  }), /*#__PURE__*/_react.default.createElement(PostTitle, null, post === null || post === void 0 ? void 0 : post.title)));
 }
 
 function PostSelector(props) {
@@ -276,7 +276,7 @@ function PostSelector(props) {
     }
   }, [currentPage, searchText]);
 
-  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(PostGrids, {
+  let searchResult = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(PostGrids, {
     posts: posts,
     selected: selectedPosts,
     onSelect: onPostsGridSelect
@@ -294,7 +294,9 @@ function PostSelector(props) {
   }
 
   if (error) {
-    searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `posts` query"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Message:"), /*#__PURE__*/_react.default.createElement("div", null, error.message), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Stack:"), /*#__PURE__*/_react.default.createElement("div", null, error.stack), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Query:"), /*#__PURE__*/_react.default.createElement("pre", null, postsQuery.loc.source.body)));
+    var _postsQuery$loc;
+
+    searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `posts` query"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Message:"), /*#__PURE__*/_react.default.createElement("div", null, error.message), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Stack:"), /*#__PURE__*/_react.default.createElement("div", null, error.stack), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Query:"), /*#__PURE__*/_react.default.createElement("pre", null, postsQuery === null || postsQuery === void 0 ? void 0 : (_postsQuery$loc = postsQuery.loc) === null || _postsQuery$loc === void 0 ? void 0 : _postsQuery$loc.source.body)));
   }
 
   return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {

package/lib/website/mirrormedia/selector/search-box.js

@@ -26,7 +26,7 @@ const SearchBoxWrapper = _styledComponents.default.div`
 function SearchBox(props) {
   const {
     onChange,
-    className
+    className = ''
   } = props;
   const [searchInput, setSearchInput] = (0, _react.useState)('');
   return /*#__PURE__*/_react.default.createElement(SearchBoxWrapper, {

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

@@ -7,6 +7,8 @@ exports.VideoSelector = VideoSelector;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _modals = require("@keystone-ui/modals");
@@ -17,6 +19,8 @@ var _searchBox = require("./search-box");
 
 var _pagination = require("./pagination");
 
+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); }
@@ -53,6 +57,9 @@ const videosQuery = (0, _apollo.gql)`
     }
   }
 `;
+const _ = {
+  debounce: _debounce.default
+};
 const VideoSearchBox = (0, _styledComponents.default)(_searchBox.SearchBox)`
   margin-top: 10px;
 `;
@@ -102,6 +109,11 @@ const ErrorWrapper = _styledComponents.default.div`
 const VideoName = _styledComponents.default.p`
   text-align: center;
 `;
+const Label = _styledComponents.default.label`
+  display: block;
+  margin: 10px 0;
+  font-weight: 600;
+`;
 
 function VideosGrids(props) {
   const {
@@ -144,14 +156,16 @@ function VideoGrid(props) {
 
 function VideoMetaGrids(props) {
   const {
-    videoMetas
+    videoMetas,
+    onChange
   } = props;
   return /*#__PURE__*/_react.default.createElement(VideoMetaGridsWrapper, null, videoMetas.map(videoMeta => {
     var _videoMeta$video;
 
     return /*#__PURE__*/_react.default.createElement(VideoMetaGrid, {
       key: videoMeta === null || videoMeta === void 0 ? void 0 : (_videoMeta$video = videoMeta.video) === null || _videoMeta$video === void 0 ? void 0 : _videoMeta$video.id,
-      videoMeta: videoMeta
+      videoMeta: videoMeta,
+      onChange: onChange
     });
   }));
 }
@@ -160,11 +174,21 @@ function VideoMetaGrid(props) {
   var _video$file2;
 
   const {
-    videoMeta
+    videoMeta,
+    onChange
   } = props;
   const {
-    video
+    video,
+    desc
   } = videoMeta;
+
+  const onVideoDescriptionChange = e => {
+    onChange({
+      video,
+      desc: e.target.value
+    });
+  };
+
   return /*#__PURE__*/_react.default.createElement(VideoMetaGridWrapper, null, /*#__PURE__*/_react.default.createElement(Video, {
     muted: true,
     autoPlay: true,
@@ -173,7 +197,15 @@ function VideoMetaGrid(props) {
     src: video === null || video === void 0 ? void 0 : video.videoSrc
   }), /*#__PURE__*/_react.default.createElement("source", {
     src: video === null || video === void 0 ? void 0 : (_video$file2 = video.file) === null || _video$file2 === void 0 ? void 0 : _video$file2.url
-  })), /*#__PURE__*/_react.default.createElement(VideoName, null, video === null || video === void 0 ? void 0 : video.name));
+  })), /*#__PURE__*/_react.default.createElement(Label, null, "Video Name"), /*#__PURE__*/_react.default.createElement(VideoName, null, video === null || video === void 0 ? void 0 : video.name), /*#__PURE__*/_react.default.createElement(Label, {
+    htmlFor: "description"
+  }, "Video Description"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+    id: "description",
+    type: "text",
+    placeholder: "(Optional)",
+    defaultValue: desc,
+    onChange: _.debounce(onVideoDescriptionChange)
+  }));
 }
 
 function VideoSelector(props) {
@@ -209,6 +241,10 @@ function VideoSelector(props) {
     setCurrentPage(1);
   };
 
+  const onVideoMetaChange = videoEntityWithMeta => {
+    setSelected([videoEntityWithMeta]);
+  };
+
   const onVideosGridSelect = videoEntity => {
     setSelected(selected => {
       const filterdSelected = selected.filter(ele => {
@@ -223,7 +259,8 @@ function VideoSelector(props) {
 
 
       return [{
-        video: videoEntity
+        video: videoEntity,
+        desc: ''
       }];
     });
   };
@@ -243,7 +280,7 @@ function VideoSelector(props) {
     }
   }, [currentPage, searchText]);
 
-  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(VideosGrids, {
+  let searchResult = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(VideosGrids, {
     videos: videos,
     selected: selectedVideos,
     onSelect: onVideosGridSelect
@@ -261,7 +298,9 @@ function VideoSelector(props) {
   }
 
   if (error) {
-    searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `videos` query"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Message:"), /*#__PURE__*/_react.default.createElement("div", null, error.message), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Stack:"), /*#__PURE__*/_react.default.createElement("div", null, error.stack), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Query:"), /*#__PURE__*/_react.default.createElement("pre", null, videosQuery.loc.source.body)));
+    var _videosQuery$loc;
+
+    searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `videos` query"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Message:"), /*#__PURE__*/_react.default.createElement("div", null, error.message), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Stack:"), /*#__PURE__*/_react.default.createElement("div", null, error.stack), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Query:"), /*#__PURE__*/_react.default.createElement("pre", null, (_videosQuery$loc = videosQuery.loc) === null || _videosQuery$loc === void 0 ? void 0 : _videosQuery$loc.source.body)));
   }
 
   return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
@@ -281,6 +320,7 @@ function VideoSelector(props) {
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(VideoSearchBox, {
     onChange: onSearchBoxChange
   }), /*#__PURE__*/_react.default.createElement(VideoSelectionWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, searchResult), !!selected.length && /*#__PURE__*/_react.default.createElement(SeparationLine, null), /*#__PURE__*/_react.default.createElement(VideoMetaGrids, {
-    videoMetas: selected
+    videoMetas: selected,
+    onChange: onVideoMetaChange
   })))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirrormedia/lilith-draft-editor",
-  "version": "1.3.2",
+  "version": "2.0.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -23,7 +23,7 @@
   "license": "MIT",
   "dependencies": {
     "draft-js": "^0.11.7",
-    "@mirrormedia/lilith-draft-renderer": "1.3.1"
+    "@mirrormedia/lilith-draft-renderer": "1.3.2"
   },
   "peerDependencies": {
     "react": "18.2.0",

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

@@ -1,121 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MediaButton = MediaButton;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _modals = require("@keystone-ui/modals");
-
-var _draftJs = require("draft-js");
-
-var _fields = require("@keystone-ui/fields");
-
-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 styles = {
-  buttons: {
-    marginBottom: 10,
-    display: 'flex'
-  },
-  urlInputContainer: {
-    marginBottom: 10
-  },
-  urlInput: {
-    fontFamily: "'Georgia', serif",
-    marginRight: 10,
-    padding: 3
-  },
-  button: {
-    marginTop: '10px',
-    marginRight: '10px',
-    cursor: 'pointer'
-  }
-};
-
-function MediaButton(props) {
-  const {
-    editorState,
-    onChange,
-    customStyles
-  } = props;
-  const [toShowUrlInput, setToShowUrlInput] = (0, _react.useState)(false);
-  const [urlValue, setUrlValue] = (0, _react.useState)('');
-  const [urlType, setUrlType] = (0, _react.useState)('');
-
-  const promptForMedia = mediaType => {
-    setToShowUrlInput(true);
-    setUrlValue('');
-    setUrlType(mediaType);
-  };
-
-  const confirmMedia = () => {
-    const contentState = editorState.getCurrentContent();
-    const contentStateWithEntity = contentState.createEntity(urlType, 'IMMUTABLE', {
-      src: urlValue
-    });
-    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
-
-
-    onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
-    setToShowUrlInput(false);
-    setUrlType('');
-  };
-
-  const urlInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
-    title: `Insert ${urlType.toUpperCase()} LINK`,
-    isOpen: toShowUrlInput,
-    actions: {
-      confirm: {
-        label: 'Confirm',
-        action: confirmMedia
-      },
-      cancel: {
-        label: 'Cancel',
-        action: () => {
-          setToShowUrlInput(false);
-          setUrlValue('');
-        }
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
-    onChange: e => setUrlValue(e.target.value),
-    style: styles.urlInput,
-    type: "text",
-    value: urlValue
-  }));
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, urlInput, /*#__PURE__*/_react.default.createElement("div", {
-    style: styles.buttons
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    onClick: () => {
-      promptForMedia('imageLink');
-    },
-    style: customStyles || styles.button
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "fas fa-arrow-up-right-from-square"
-  }), /*#__PURE__*/_react.default.createElement("span", null, " Image Link")), /*#__PURE__*/_react.default.createElement("div", {
-    onClick: () => {
-      promptForMedia('audioLink');
-    },
-    style: customStyles || styles.button
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "far fa-file-audio"
-  }), /*#__PURE__*/_react.default.createElement("span", null, " Audio Link")), /*#__PURE__*/_react.default.createElement("div", {
-    onClick: () => {
-      promptForMedia('videoLink');
-    },
-    style: customStyles || styles.button
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "far fa-file-video"
-  }), /*#__PURE__*/_react.default.createElement("span", null, " Video Link"))));
-}