@mirrormedia/lilith-draft-editor 1.3.2 → 1.3.3

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

@@ -29,11 +29,9 @@ function VideoButton(props) {
   };
 
   const onVideoSelectorChange = selectedVideosWithMeta => {
-    var _selectedVideosWithMe;
+    const selected = selectedVideosWithMeta === null || selectedVideosWithMeta === void 0 ? void 0 : selectedVideosWithMeta[0];
 
-    const video = selectedVideosWithMeta === null || selectedVideosWithMeta === void 0 ? void 0 : (_selectedVideosWithMe = selectedVideosWithMeta[0]) === null || _selectedVideosWithMe === void 0 ? void 0 : _selectedVideosWithMe.video;
-
-    if (!video) {
+    if (!selected) {
       setToShowVideoSelector(false);
       return;
     }
@@ -41,7 +39,8 @@ function VideoButton(props) {
     const contentState = editorState.getCurrentContent(); // since 202310, only VIDEO-V2 will be created
 
     const contentStateWithEntity = contentState.createEntity('VIDEO-V2', 'IMMUTABLE', {
-      video
+      video: selected.video,
+      desc: selected.desc
     });
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
 

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: ''
       }];
     });
   };
@@ -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": "1.3.3",
   "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-beta.1"
   },
   "peerDependencies": {
     "react": "18.2.0",