@mirrormedia/lilith-draft-editor 3.0.0 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/lib/draft-js/buttons/youtube.js +19 -8
  2. package/lib/website/mirrordaily/selector/image-selector.js +13 -5
  3. package/lib/website/mirrordaily/selector/video-selector.js +12 -4
  4. package/package.json +1 -1
package/lib/draft-js/buttons/youtube.js CHANGED
@@ -28,6 +28,17 @@ const Label = _styledComponents.default.label`
28
28
  margin: 10px 0;
29
29
  `;
30
30
 
31
+ function getYoutubeId(urlOrId = '') {
32
+ const youtubeIdRegex = /^(?:https?:\/\/(?:www\.)?youtube\.com\/watch\?v=|https?:\/\/youtu.be\/|\/id\/)?([a-zA-Z0-9_-]{11})/i;
33
+ const matches = urlOrId.startsWith('/') ? urlOrId.replace('/', '').match(youtubeIdRegex) : urlOrId.match(youtubeIdRegex);
34
+
35
+ if (matches && matches[1]) {
36
+ return matches[1];
37
+ }
38
+
39
+ return '';
40
+ }
41
+
31
42
  function YoutubeInput(props) {
32
43
  const {
33
44
  isOpen,
@@ -36,7 +47,7 @@ function YoutubeInput(props) {
36
47
  } = props;
37
48
  const initialInputValue = {
38
49
  description: '',
39
- youtubeId: ''
50
+ youtubeIdOrUrl: ''
40
51
  };
41
52
  const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
42
53
 
@@ -61,7 +72,7 @@ function YoutubeInput(props) {
61
72
  action: () => {
62
73
  onChange({
63
74
  description: inputValue.description,
64
- youtubeId: inputValue.youtubeId
75
+ youtubeId: getYoutubeId(inputValue.youtubeIdOrUrl)
65
76
  });
66
77
  clearInputValue();
67
78
  }
@@ -72,7 +83,7 @@ function YoutubeInput(props) {
72
83
  }, "Youtube Description"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
73
84
  onChange: e => setInputValue({
74
85
  description: e.target.value,
75
- youtubeId: inputValue.youtubeId
86
+ youtubeIdOrUrl: inputValue.youtubeIdOrUrl
76
87
  }),
77
88
  type: "text",
78
89
  placeholder: "description",
@@ -80,15 +91,15 @@ function YoutubeInput(props) {
80
91
  value: inputValue.description
81
92
  }), /*#__PURE__*/_react.default.createElement(Label, {
82
93
  htmlFor: "youtubeId"
83
- }, "Youtube Videi Id"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
94
+ }, "Youtube Video Id or Url"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
84
95
  onChange: e => setInputValue({
85
96
  description: inputValue.description,
86
- youtubeId: e.target.value
97
+ youtubeIdOrUrl: e.target.value
87
98
  }),
88
99
  type: "text",
89
- placeholder: "youtubeId",
90
- id: "youtubeId",
91
- value: inputValue.youtubeId
100
+ placeholder: "youtubeId or url",
101
+ id: "youtubeIdOrUrl",
102
+ value: inputValue.youtubeIdOrUrl
92
103
  })));
93
104
  }
94
105
 
package/lib/website/mirrordaily/selector/image-selector.js CHANGED
@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
9
9
 
10
10
  var _debounce = _interopRequireDefault(require("lodash/debounce"));
11
11
 
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
12
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
13
13
 
14
14
  var _fields = require("@keystone-ui/fields");
15
15
 
@@ -67,6 +67,13 @@ const imagesQuery = (0, _apollo.gql)`
67
67
  const _ = {
68
68
  debounce: _debounce.default
69
69
  };
70
+ const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
71
+ form {
72
+ @media (max-width: 575px) {
73
+ width: 100vw !important;
74
+ }
75
+ }
76
+ `;
70
77
  const ImageSearchBox = (0, _styledComponents.default)(_searchBox.SearchBox)`
71
78
  margin-top: 10px;
72
79
  `;
@@ -414,10 +421,10 @@ function ImageSelector(props) {
414
421
  searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `images` 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, imagesQuery === null || imagesQuery === void 0 ? void 0 : (_imagesQuery$loc = imagesQuery.loc) === null || _imagesQuery$loc === void 0 ? void 0 : (_imagesQuery$loc$sour = _imagesQuery$loc.source) === null || _imagesQuery$loc$sour === void 0 ? void 0 : _imagesQuery$loc$sour.body)));
415
422
  }
416
423
 
417
- return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
424
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(GlobalStyle, null), /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
418
425
  isOpen: true
419
426
  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
420
- title: "Select image",
427
+ title: "Select images",
421
428
  actions: {
422
429
  cancel: {
423
430
  label: 'Cancel',
@@ -427,7 +434,8 @@ function ImageSelector(props) {
427
434
  label: 'Confirm',
428
435
  action: onSave
429
436
  }
430
- }
437
+ },
438
+ width: "narrow"
431
439
  }, /*#__PURE__*/_react.default.createElement("div", {
432
440
  ref: contentWrapperRef
433
441
  }, /*#__PURE__*/_react.default.createElement(ImageSearchBox, {
@@ -447,5 +455,5 @@ function ImageSelector(props) {
447
455
  options: options,
448
456
  onChange: onAlignSelectChange,
449
457
  onOpen: onAlignSelectOpen
450
- })))));
458
+ }))))));
451
459
  }
package/lib/website/mirrordaily/selector/video-selector.js CHANGED
@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
9
9
 
10
10
  var _debounce = _interopRequireDefault(require("lodash/debounce"));
11
11
 
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
12
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
13
13
 
14
14
  var _modals = require("@keystone-ui/modals");
15
15
 
@@ -60,6 +60,13 @@ const videosQuery = (0, _apollo.gql)`
60
60
  const _ = {
61
61
  debounce: _debounce.default
62
62
  };
63
+ const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
64
+ form {
65
+ @media (max-width: 575px) {
66
+ width: 100vw !important;
67
+ }
68
+ }
69
+ `;
63
70
  const VideoSearchBox = (0, _styledComponents.default)(_searchBox.SearchBox)`
64
71
  margin-top: 10px;
65
72
  `;
@@ -303,7 +310,7 @@ function VideoSelector(props) {
303
310
  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)));
304
311
  }
305
312
 
306
- return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
313
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(GlobalStyle, null), /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
307
314
  isOpen: true
308
315
  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
309
316
  title: "Select video",
@@ -316,11 +323,12 @@ function VideoSelector(props) {
316
323
  label: 'Confirm',
317
324
  action: onSave
318
325
  }
319
- }
326
+ },
327
+ width: "narrow"
320
328
  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(VideoSearchBox, {
321
329
  onChange: onSearchBoxChange
322
330
  }), /*#__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, {
323
331
  videoMetas: selected,
324
332
  onChange: onVideoMetaChange
325
- })))));
333
+ }))))));
326
334
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirrormedia/lilith-draft-editor",
3
- "version": "3.0.0",
3
+ "version": "3.0.2",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {