@mirrormedia/lilith-draft-editor
Version:
## Installation
218 lines (187 loc) • 8.15 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.YoutubeButton = YoutubeButton;
exports.YoutubeInput = YoutubeInput;
var _react = _interopRequireWildcard(require("react"));
var _draftJs = require("draft-js");
var _modals = require("@keystone-ui/modals");
var _fields = require("@keystone-ui/fields");
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); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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 = '') {
const youtubeIdRegex = /^(?:https?:\/\/(?:www\.)?youtube\.com\/watch\?v=|https?:\/\/youtu.be\/|\/id\/)?([a-zA-Z0-9_-]{11})/i;
const matches = urlOrId.startsWith('/') ? urlOrId.replace('/', '').match(youtubeIdRegex) : urlOrId.match(youtubeIdRegex);
if (matches && matches[1]) {
return matches[1];
}
return '';
}
function YoutubeInput(props) {
const {
isOpen,
onChange,
onCancel
} = props;
const initialInputValue = {
description: '',
youtubeIdOrUrl: ''
};
const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
const clearInputValue = () => {
setInputValue(initialInputValue);
}; // Apply mobile styles dynamically when drawer is open
// This ensures we override emotion's inline styles
(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`,
actions: {
cancel: {
label: 'Cancel',
action: () => {
clearInputValue();
onCancel();
}
},
confirm: {
label: 'Confirm',
action: () => {
onChange({
description: inputValue.description,
youtubeId: getYoutubeId(inputValue.youtubeIdOrUrl)
});
clearInputValue();
}
}
}
}, /*#__PURE__*/_react.default.createElement(Label, {
htmlFor: "description"
}, "Youtube Description"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
onChange: e => setInputValue({
description: e.target.value,
youtubeIdOrUrl: inputValue.youtubeIdOrUrl
}),
type: "text",
placeholder: "description",
id: "description",
value: inputValue.description
}), /*#__PURE__*/_react.default.createElement(Label, {
htmlFor: "youtubeId"
}, "Youtube Video Id or Url"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
onChange: e => setInputValue({
description: inputValue.description,
youtubeIdOrUrl: e.target.value
}),
type: "text",
placeholder: "youtubeId or url",
id: "youtubeIdOrUrl",
value: inputValue.youtubeIdOrUrl
}))));
}
function YoutubeButton(props) {
const [toShowInput, setToShowInput] = (0, _react.useState)(false);
const {
className,
editorState,
onChange: onEditorStateChange
} = props;
const onChange = ({
description,
youtubeId
}) => {
const contentState = editorState.getCurrentContent(); // create an InfoBox entity
const contentStateWithEntity = contentState.createEntity('YOUTUBE', 'IMMUTABLE', {
description,
youtubeId
});
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const newEditorState = _draftJs.EditorState.set(editorState, {
currentContent: contentStateWithEntity
}); //The third parameter here is a space string, not an empty string
//If you set an empty string, you will get an error: Unknown DraftEntity key: null
onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
setToShowInput(false);
};
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(YoutubeInput, {
onChange: onChange,
onCancel: () => {
setToShowInput(false);
},
isOpen: toShowInput
}), /*#__PURE__*/_react.default.createElement("div", {
className: className,
onClick: () => {
setToShowInput(true);
}
}, /*#__PURE__*/_react.default.createElement("svg", {
height: "16px",
width: "14px",
version: "1.1",
id: "Layer_1",
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 461.001 461.001"
}, /*#__PURE__*/_react.default.createElement("path", {
fill: "#6b7280",
d: "M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728 c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137 C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607 c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"
})), /*#__PURE__*/_react.default.createElement("span", null, "Youtube")));
}