@mirrormedia/lilith-draft-editor 3.0.10 → 3.0.11
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.
|
@@ -14,9 +14,7 @@ var _modals = require("@keystone-ui/modals");
|
|
|
14
14
|
|
|
15
15
|
var _fields = require("@keystone-ui/fields");
|
|
16
16
|
|
|
17
|
-
var _styledComponents =
|
|
18
|
-
|
|
19
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
20
18
|
|
|
21
19
|
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); }
|
|
22
20
|
|
|
@@ -26,6 +24,40 @@ const Label = _styledComponents.default.label`
|
|
|
26
24
|
display: block;
|
|
27
25
|
font-weight: 600;
|
|
28
26
|
margin: 10px 0;
|
|
27
|
+
`; // Global styles for Drawer on mobile devices
|
|
28
|
+
|
|
29
|
+
const DrawerMobileStyles = (0, _styledComponents.createGlobalStyle)`
|
|
30
|
+
@media (max-width: 767px) {
|
|
31
|
+
/* Target all possible Drawer containers - emotion may generate different class names */
|
|
32
|
+
div[role="dialog"][aria-modal="true"],
|
|
33
|
+
form[role="dialog"][aria-modal="true"],
|
|
34
|
+
[role="dialog"][aria-modal="true"] {
|
|
35
|
+
width: 100vw !important;
|
|
36
|
+
max-width: 100vw !important;
|
|
37
|
+
min-width: 0 !important;
|
|
38
|
+
left: 0 !important;
|
|
39
|
+
right: 0 !important;
|
|
40
|
+
margin-left: 0 !important;
|
|
41
|
+
margin-right: 0 !important;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Ensure content doesn't overflow */
|
|
45
|
+
[role="dialog"][aria-modal="true"] > * {
|
|
46
|
+
max-width: 100% !important;
|
|
47
|
+
box-sizing: border-box !important;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
[role="dialog"][aria-modal="true"] * {
|
|
51
|
+
max-width: 100% !important;
|
|
52
|
+
box-sizing: border-box !important;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Input fields */
|
|
56
|
+
[role="dialog"][aria-modal="true"] input {
|
|
57
|
+
width: 100% !important;
|
|
58
|
+
max-width: 100% !important;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
29
61
|
`;
|
|
30
62
|
|
|
31
63
|
function getYoutubeId(urlOrId = '') {
|
|
@@ -53,9 +85,37 @@ function YoutubeInput(props) {
|
|
|
53
85
|
|
|
54
86
|
const clearInputValue = () => {
|
|
55
87
|
setInputValue(initialInputValue);
|
|
56
|
-
};
|
|
88
|
+
}; // Apply mobile styles dynamically when drawer is open
|
|
89
|
+
// This ensures we override emotion's inline styles
|
|
90
|
+
|
|
57
91
|
|
|
58
|
-
|
|
92
|
+
(0, _react.useEffect)(() => {
|
|
93
|
+
if (!isOpen) return;
|
|
94
|
+
|
|
95
|
+
const applyMobileStyles = () => {
|
|
96
|
+
const drawer = document.querySelector('[role="dialog"][aria-modal="true"]');
|
|
97
|
+
|
|
98
|
+
if (drawer && window.innerWidth <= 767) {
|
|
99
|
+
// Use setProperty with important flag
|
|
100
|
+
drawer.style.setProperty('width', '100vw', 'important');
|
|
101
|
+
drawer.style.setProperty('max-width', '100vw', 'important');
|
|
102
|
+
drawer.style.setProperty('min-width', '0', 'important');
|
|
103
|
+
drawer.style.setProperty('left', '0', 'important');
|
|
104
|
+
drawer.style.setProperty('right', '0', 'important');
|
|
105
|
+
drawer.style.setProperty('margin', '0', 'important');
|
|
106
|
+
}
|
|
107
|
+
}; // Apply immediately and after delays to ensure drawer is fully rendered
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
applyMobileStyles();
|
|
111
|
+
const timeout1 = setTimeout(applyMobileStyles, 10);
|
|
112
|
+
const timeout2 = setTimeout(applyMobileStyles, 50);
|
|
113
|
+
return () => {
|
|
114
|
+
clearTimeout(timeout1);
|
|
115
|
+
clearTimeout(timeout2);
|
|
116
|
+
};
|
|
117
|
+
}, [isOpen]);
|
|
118
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(DrawerMobileStyles, null), /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
|
|
59
119
|
isOpen: isOpen
|
|
60
120
|
}, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
|
|
61
121
|
title: `Insert Youtube video`,
|
|
@@ -100,7 +160,7 @@ function YoutubeInput(props) {
|
|
|
100
160
|
placeholder: "youtubeId or url",
|
|
101
161
|
id: "youtubeIdOrUrl",
|
|
102
162
|
value: inputValue.youtubeIdOrUrl
|
|
103
|
-
})));
|
|
163
|
+
}))));
|
|
104
164
|
}
|
|
105
165
|
|
|
106
166
|
function YoutubeButton(props) {
|