@mirrormedia/lilith-draft-editor 3.0.9 → 3.0.11

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

@@ -14,9 +14,7 @@ var _modals = require("@keystone-ui/modals");
 
 var _fields = require("@keystone-ui/fields");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 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); }
 
@@ -26,6 +24,40 @@ const Label = _styledComponents.default.label`
   display: block;
   font-weight: 600;
   margin: 10px 0;
+`; // Global styles for Drawer on mobile devices
+
+const DrawerMobileStyles = (0, _styledComponents.createGlobalStyle)`
+  @media (max-width: 767px) {
+    /* Target all possible Drawer containers - emotion may generate different class names */
+    div[role="dialog"][aria-modal="true"],
+    form[role="dialog"][aria-modal="true"],
+    [role="dialog"][aria-modal="true"] {
+      width: 100vw !important;
+      max-width: 100vw !important;
+      min-width: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+    }
+
+    /* Ensure content doesn't overflow */
+    [role="dialog"][aria-modal="true"] > * {
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+    }
+
+    [role="dialog"][aria-modal="true"] * {
+      max-width: 100% !important;
+      box-sizing: border-box !important;
+    }
+
+    /* Input fields */
+    [role="dialog"][aria-modal="true"] input {
+      width: 100% !important;
+      max-width: 100% !important;
+    }
+  }
 `;
 
 function getYoutubeId(urlOrId = '') {
@@ -53,9 +85,37 @@ function YoutubeInput(props) {
 
   const clearInputValue = () => {
     setInputValue(initialInputValue);
-  };
+  }; // Apply mobile styles dynamically when drawer is open
+  // This ensures we override emotion's inline styles
+
 
-  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
+  (0, _react.useEffect)(() => {
+    if (!isOpen) return;
+
+    const applyMobileStyles = () => {
+      const drawer = document.querySelector('[role="dialog"][aria-modal="true"]');
+
+      if (drawer && window.innerWidth <= 767) {
+        // Use setProperty with important flag
+        drawer.style.setProperty('width', '100vw', 'important');
+        drawer.style.setProperty('max-width', '100vw', 'important');
+        drawer.style.setProperty('min-width', '0', 'important');
+        drawer.style.setProperty('left', '0', 'important');
+        drawer.style.setProperty('right', '0', 'important');
+        drawer.style.setProperty('margin', '0', 'important');
+      }
+    }; // Apply immediately and after delays to ensure drawer is fully rendered
+
+
+    applyMobileStyles();
+    const timeout1 = setTimeout(applyMobileStyles, 10);
+    const timeout2 = setTimeout(applyMobileStyles, 50);
+    return () => {
+      clearTimeout(timeout1);
+      clearTimeout(timeout2);
+    };
+  }, [isOpen]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(DrawerMobileStyles, null), /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
     isOpen: isOpen
   }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
     title: `Insert Youtube video`,
@@ -100,7 +160,7 @@ function YoutubeInput(props) {
     placeholder: "youtubeId or url",
     id: "youtubeIdOrUrl",
     value: inputValue.youtubeIdOrUrl
-  })));
+  }))));
 }
 
 function YoutubeButton(props) {

package/lib/website/mirrormedia/draft-editor.js

@@ -352,6 +352,10 @@ const DraftEditorControlsWrapper = _styledComponents.default.div`
   flex-wrap: wrap;
   padding-right: 45px;
   column-gap: 5px;
+
+  @media (max-width: 767px) {
+    padding-right: 10px;
+  }
 `;
 const TextEditorWrapper = _styledComponents.default.div`
   /* Rich-editor default setting (.RichEditor-editor)*/
@@ -438,7 +442,7 @@ const DraftEditorContainer = _styledComponents.default.div`
   }
 `;
 const ButtonGroup = _styledComponents.default.div`
-  margin: 0 10px 0 0;
+  margin: 0;
   ${({
   isDisabled
 }) => isDisabled ? (0, _styledComponents.css)`

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

@@ -106,7 +106,7 @@ const ImageMetaGridsWrapper = _styledComponents.default.div`
   overflow: auto;
 `;
 const ImageMetaGridWrapper = _styledComponents.default.div`
-  width: 33.3333%;
+  width: 100%;
   cursor: pointer;
   padding: 0 10px 10px;
 `;
@@ -121,6 +121,9 @@ const Label = _styledComponents.default.label`
   margin: 10px 0;
   font-weight: 600;
 `;
+const StyledTextInput = (0, _styledComponents.default)(_fields.TextInput)`
+  width: 100%;
+`;
 const SeparationLine = _styledComponents.default.div`
   border: #e1e5e9 1px solid;
   margin-top: 10px;
@@ -220,7 +223,7 @@ function ImageMetaGrid(props) {
     }
   }), /*#__PURE__*/_react.default.createElement(ImageName, null, image === null || image === void 0 ? void 0 : image.name), enableCaption && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
     htmlFor: "caption"
-  }, "Image Caption:"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+  }, "Image Caption:"), /*#__PURE__*/_react.default.createElement(StyledTextInput, {
     id: "caption",
     type: "text",
     placeholder: image === null || image === void 0 ? void 0 : image.name,
@@ -234,7 +237,7 @@ function ImageMetaGrid(props) {
     })
   })), enableUrl && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
     htmlFor: "url"
-  }, "Url:"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+  }, "Url:"), /*#__PURE__*/_react.default.createElement(StyledTextInput, {
     id: "url",
     type: "text",
     placeholder: "(Optional)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirrormedia/lilith-draft-editor",
-  "version": "3.0.9",
+  "version": "3.0.11",
   "description": "",
   "main": "lib/index.js",
   "scripts": {