@mirrormedia/lilith-draft-editor 3.0.1 → 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.
@@ -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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirrormedia/lilith-draft-editor",
3
- "version": "3.0.1",
3
+ "version": "3.0.2",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {