@mirrormedia/lilith-draft-editor 1.0.0-beta → 1.0.0-beta2

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

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnnotationButton = AnnotationButton;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _basicEditor = require("../editor/basic-editor");
+
+var _draftJs = require("draft-js");
+
+var _modals = require("@keystone-ui/modals");
+
+var _entityDecorator = _interopRequireDefault(require("../editor/entity-decorator"));
+
+var _draftConverter = _interopRequireDefault(require("../editor/draft-converter"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+function escapeHTML(s) {
+  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;');
+}
+
+function AnnotationButton(props) {
+  const toggleEntity = _draftJs.RichUtils.toggleLink;
+  const {
+    isActive,
+    editorState,
+    onChange
+  } = props;
+  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
+  const [inputValue, setInputValue] = (0, _react.useState)({
+    editorStateOfBasicEditor: _draftJs.EditorState.createEmpty(_entityDecorator.default)
+  });
+
+  const promptForAnnotation = e => {
+    e.preventDefault();
+    const selection = editorState.getSelection();
+
+    if (!selection.isCollapsed()) {
+      setToShowInput(true);
+    }
+  };
+
+  const confirmAnnotation = () => {
+    const contentState = editorState.getCurrentContent();
+    const rawContentState = (0, _draftJs.convertToRaw)(inputValue.editorStateOfBasicEditor.getCurrentContent());
+
+    const bodyHTML = _draftConverter.default.convertToHtml(rawContentState);
+
+    const contentStateWithEntity = contentState.createEntity('ANNOTATION', 'MUTABLE', {
+      rawContentState,
+      bodyHTML,
+      bodyEscapedHTML: escapeHTML(bodyHTML)
+    });
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+
+    const newEditorState = _draftJs.EditorState.set(editorState, {
+      currentContent: contentStateWithEntity
+    });
+
+    onChange(toggleEntity(newEditorState, newEditorState.getSelection(), entityKey));
+    setToShowInput(false);
+    setInputValue({
+      editorStateOfBasicEditor: _draftJs.EditorState.createEmpty(_entityDecorator.default)
+    });
+  };
+
+  const removeAnnotation = () => {
+    const selection = editorState.getSelection();
+
+    if (!selection.isCollapsed()) {
+      onChange(toggleEntity(editorState, selection, null));
+    }
+
+    setToShowInput(false);
+    setInputValue({
+      editorStateOfBasicEditor: _draftJs.EditorState.createEmpty(_entityDecorator.default)
+    });
+  };
+
+  const urlInput = /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
+    isOpen: toShowInput
+  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
+    title: "Insert Annotation",
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: removeAnnotation
+      },
+      confirm: {
+        label: 'Confirm',
+        action: confirmAnnotation
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_basicEditor.BasicEditor, {
+    editorState: inputValue.editorStateOfBasicEditor,
+    onChange: editorStateOfBasicEditor => {
+      setInputValue({
+        editorStateOfBasicEditor
+      });
+    }
+  })));
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, urlInput, /*#__PURE__*/_react.default.createElement("div", {
+    className: props.className,
+    onMouseDown: isActive ? removeAnnotation : promptForAnnotation
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "far"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Annotation")));
+}

package/lib/draft-js/buttons/background-color.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BackgroundColorButton = BackgroundColorButton;
+exports.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _modals = require("@keystone-ui/modals");
+
+var _draftJs = require("draft-js");
+
+var _fields = require("@keystone-ui/fields");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _modifier = require("../editor/modifier");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 ColorHexInput = (0, _styledComponents.default)(_fields.TextInput)`
+  font-family: Georgia, serif;
+  margin-right: 10px;
+  padding: 10px;
+`;
+const CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR = 'BACKGROUND_COLOR_';
+exports.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR = CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR;
+
+function BackgroundColorButton(props) {
+  const {
+    isActive,
+    editorState,
+    onChange
+  } = props;
+  const [toShowColorInput, setToShowColorInput] = (0, _react.useState)(false);
+  const [colorValue, setColorValue] = (0, _react.useState)('');
+
+  const promptForColor = e => {
+    e.preventDefault();
+    const selection = editorState.getSelection();
+
+    if (!selection.isCollapsed()) {
+      setToShowColorInput(true);
+    }
+  };
+
+  const confirmColor = () => {
+    const selection = editorState.getSelection();
+    const contentState = editorState.getCurrentContent();
+
+    let newContentState = _modifier.Modifier.removeInlineStyleByPrefix(contentState, selection, CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR);
+
+    if (colorValue) {
+      newContentState = _modifier.Modifier.applyInlineStyle(newContentState, selection, CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR + colorValue);
+    }
+
+    onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-inline-style'));
+    setToShowColorInput(false);
+    setColorValue('');
+  };
+
+  const onColorInputKeyDown = e => {
+    if (e.which === 13) {
+      e.preventDefault();
+      confirmColor();
+    }
+  };
+
+  const removeColor = () => {
+    const selection = editorState.getSelection();
+
+    if (!selection.isCollapsed()) {
+      const contentState = editorState.getCurrentContent();
+
+      const newContentState = _modifier.Modifier.removeInlineStyleByPrefix(contentState, selection, CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR);
+
+      onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-inline-style'));
+    }
+
+    setToShowColorInput(false);
+    setColorValue('');
+  };
+
+  const colorInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
+    title: "Hex Color Code (#ffffff)",
+    isOpen: toShowColorInput,
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: removeColor
+      },
+      confirm: {
+        label: 'Confirm',
+        action: confirmColor
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(ColorHexInput, {
+    onChange: e => setColorValue(e.target.value),
+    type: "text",
+    value: colorValue,
+    onKeyDown: onColorInputKeyDown
+  }));
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, colorInput, /*#__PURE__*/_react.default.createElement("div", {
+    className: props.className,
+    onMouseDown: isActive ? removeColor : promptForColor
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "14",
+    viewBox: "0 0 16 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M3.74443 8.75V6.78945C3.74443 6.37109 3.98306 5.98008 4.34542 5.73125L12.3911 0.229633C12.6091 0.0804726 12.8477 0 13.1453 0C13.4811 0 13.8022 0.124113 14.0409 0.345078L15.6553 1.84242C15.8939 2.06336 16 2.36305 16 2.67531C16 2.92578 15.9411 3.14727 15.779 3.37422L9.85159 10.8418C9.5835 11.1781 9.1357 11.375 8.71147 11.375H6.57264L5.85086 12.0695C5.4826 12.4113 4.8875 12.4113 4.51924 12.0695L3.02265 10.6805C2.65439 10.3387 2.65439 9.78633 3.02265 9.44453L3.74443 8.75ZM13.9466 2.73219L13.0834 1.9302L6.74646 6.26172L9.25354 8.58867L13.9466 2.73219ZM0.207107 12.7504L2.064 11.0277L4.14509 12.9582L3.23182 13.784C3.09925 13.9316 2.91954 14 2.73099 14H0.707052C0.3167 14 0 13.7074 0 13.3438V13.2152C0 13.0184 0.0745351 12.8734 0.207107 12.7504Z",
+    fill: isActive ? '#ED8B00' : '#6b7280'
+  })), /*#__PURE__*/_react.default.createElement("span", null, " Highlight")));
+}

package/lib/draft-js/buttons/background-image.js

@@ -0,0 +1,222 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BGImageButton = BGImageButton;
+exports.BGImageInput = BGImageInput;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _entityDecorator = _interopRequireDefault(require("../editor/entity-decorator"));
+
+var _draftJs = require("draft-js");
+
+var _basicEditor = require("../editor/basic-editor");
+
+var _modals = require("@keystone-ui/modals");
+
+var _button = require("@keystone-ui/button");
+
+var _draftConverter = _interopRequireDefault(require("../editor/draft-converter"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _imageSelector = require("./selector/image-selector");
+
+var _alignSelector = require("./selector/align-selector");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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;
+`;
+const ImageInputText = _styledComponents.default.span`
+  display: inline-block;
+  margin-right: 10px;
+`;
+
+function BGImageInput(props) {
+  var _inputValue$image;
+
+  const {
+    isOpen,
+    onChange,
+    onCancel,
+    textBlockAlign,
+    image,
+    rawContentStateForBGImageEditor,
+    ImageSelector = _imageSelector.ImageSelector
+  } = props;
+  const rawContentState = rawContentStateForBGImageEditor || {
+    blocks: [],
+    entityMap: {}
+  };
+  const options = [{
+    value: 'fixed',
+    label: 'fixed (default)',
+    isDisabled: false
+  }, {
+    value: 'bottom',
+    label: 'bottom',
+    isDisabled: false
+  }, {
+    value: 'left',
+    label: 'left',
+    isDisabled: false
+  }, {
+    value: 'right',
+    label: 'right',
+    isDisabled: false
+  }];
+  const initialInputValue = {
+    textBlockAlign: textBlockAlign || 'fixed',
+    image: image || undefined,
+    // create an `editorState` from raw content state object
+    editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(rawContentState), _entityDecorator.default)
+  };
+  const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
+  const [toShowImageSelector, setToShowImageSelector] = (0, _react.useState)(false);
+
+  const clearInputValue = () => {
+    setInputValue(oldInputValue => ({ ...oldInputValue,
+      editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)({
+        blocks: [],
+        entityMap: {}
+      }), _entityDecorator.default)
+    }));
+  };
+
+  const onImageSelectorChange = selectedImagesWithMeta => {
+    var _selectedImagesWithMe;
+
+    const image = selectedImagesWithMeta === null || selectedImagesWithMeta === void 0 ? void 0 : (_selectedImagesWithMe = selectedImagesWithMeta[0]) === null || _selectedImagesWithMe === void 0 ? void 0 : _selectedImagesWithMe.image;
+
+    if (!image) {
+      setToShowImageSelector(false);
+      return;
+    }
+
+    setInputValue(oldInputValue => ({ ...oldInputValue,
+      image: image
+    }));
+    setToShowImageSelector(false);
+  };
+
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      setInputValue(initialInputValue);
+    }
+  }, [isOpen]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowImageSelector && /*#__PURE__*/_react.default.createElement(ImageSelector, {
+    onChange: onImageSelectorChange
+  }), /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
+    isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
+    title: `Insert Background Image`,
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: () => {
+          clearInputValue();
+          onCancel();
+        }
+      },
+      confirm: {
+        label: 'Confirm',
+        action: () => {
+          onChange({
+            textBlockAlign: inputValue.textBlockAlign,
+            image: inputValue.image,
+            // convert `contentState` of the `editorState` into raw content state object
+            rawContentState: (0, _draftJs.convertToRaw)(inputValue.editorStateOfBasicEditor.getCurrentContent())
+          });
+          clearInputValue();
+        }
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(Label, null, "\u5716\u7247"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ImageInputText, null, (_inputValue$image = inputValue.image) !== null && _inputValue$image !== void 0 && _inputValue$image.name ? inputValue.image.name : '尚未選取圖片'), /*#__PURE__*/_react.default.createElement(_button.Button, {
+    type: "button",
+    onClick: () => setToShowImageSelector(true),
+    tone: "passive"
+  }, "\u6DFB\u52A0\u5716\u7247")), /*#__PURE__*/_react.default.createElement(_alignSelector.AlignSelector, {
+    align: inputValue.textBlockAlign,
+    options: options,
+    onChange: textBlockAlign => {
+      setInputValue(oldInputValue => ({ ...oldInputValue,
+        textBlockAlign
+      }));
+    }
+  }), /*#__PURE__*/_react.default.createElement(Label, null, "\u5167\u6587"), /*#__PURE__*/_react.default.createElement(_basicEditor.BasicEditor, {
+    editorState: inputValue.editorStateOfBasicEditor,
+    onChange: editorStateOfBasicEditor => {
+      setInputValue(oldInputValue => ({ ...oldInputValue,
+        editorStateOfBasicEditor
+      }));
+    }
+  }))));
+}
+
+function BGImageButton(props) {
+  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
+  const {
+    className,
+    editorState,
+    onChange: onEditorStateChange,
+    ImageSelector
+  } = props;
+
+  const onChange = ({
+    textBlockAlign,
+    image,
+    rawContentState
+  }) => {
+    const contentState = editorState.getCurrentContent(); // create an BGImage entity
+
+    const contentStateWithEntity = contentState.createEntity('BACKGROUNDIMAGE', 'IMMUTABLE', {
+      textBlockAlign,
+      image,
+      rawContentState,
+      body: _draftConverter.default.convertToHtml(rawContentState)
+    });
+    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.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BGImageInput, {
+    onChange: onChange,
+    onCancel: () => {
+      setToShowInput(false);
+    },
+    isOpen: toShowInput,
+    ImageSelector: ImageSelector
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: className,
+    onClick: () => {
+      setToShowInput(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "14",
+    viewBox: "0 0 16 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M7.42974 10.2188C7.01697 9.80208 6.81059 9.29167 6.81059 8.6875C6.81059 8.08333 7.02783 7.57292 7.46232 7.15625C7.89681 6.73958 8.41819 6.53125 9.02648 6.53125C9.65648 6.53125 10.1887 6.73958 10.6232 7.15625C11.0577 7.57292 11.2749 8.08333 11.2749 8.6875C11.2749 9.27083 11.0577 9.77083 10.6232 10.1875C10.1887 10.6042 9.65648 10.8125 9.02648 10.8125C8.39647 10.8125 7.86422 10.6146 7.42974 10.2188ZM6.58248 11.0312C7.25594 11.6771 8.0706 12 9.02648 12C9.98235 12 10.797 11.6771 11.4705 11.0312C12.1656 10.3854 12.5132 9.60417 12.5132 8.6875C12.5132 7.77083 12.1656 6.98958 11.4705 6.34375C10.797 5.67708 9.98235 5.34375 9.02648 5.34375C8.0706 5.34375 7.25594 5.67708 6.58248 6.34375C5.90903 6.98958 5.5723 7.77083 5.5723 8.6875C5.5723 9.60417 5.90903 10.3854 6.58248 11.0312ZM4.17108 6V4H6.25662V2H11.112L12.3829 3.34375H14.5988C14.9681 3.34375 15.294 3.47917 15.5764 3.75C15.8588 4.02083 16 4.33333 16 4.6875V12.6875C16 13.0417 15.8588 13.3542 15.5764 13.625C15.294 13.875 14.9681 14 14.5988 14H3.48676C3.11745 14 2.79158 13.875 2.50916 13.625C2.22675 13.3542 2.08554 13.0417 2.08554 12.6875V6H4.17108ZM2.08554 2V0H3.48676V2H5.5723V3.34375H3.48676V5.34375H2.08554V3.34375H0V2H2.08554Z",
+    fill: "#6b7280"
+  })), /*#__PURE__*/_react.default.createElement("span", null, "Background Image")));
+}

package/lib/draft-js/buttons/background-video.js

@@ -0,0 +1,222 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BGVideoButton = BGVideoButton;
+exports.BGVideoInput = BGVideoInput;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _entityDecorator = _interopRequireDefault(require("../editor/entity-decorator"));
+
+var _draftJs = require("draft-js");
+
+var _basicEditor = require("../editor/basic-editor");
+
+var _modals = require("@keystone-ui/modals");
+
+var _button = require("@keystone-ui/button");
+
+var _draftConverter = _interopRequireDefault(require("../editor/draft-converter"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _videoSelector = require("./selector/video-selector");
+
+var _alignSelector = require("./selector/align-selector");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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;
+`;
+const VideoInputText = _styledComponents.default.span`
+  display: inline-block;
+  margin-right: 10px;
+`;
+
+function BGVideoInput(props) {
+  var _inputValue$video;
+
+  const {
+    isOpen,
+    onChange,
+    onCancel,
+    textBlockAlign,
+    video,
+    rawContentStateForBGVideoEditor,
+    VideoSelector = _videoSelector.VideoSelector
+  } = props;
+  const rawContentState = rawContentStateForBGVideoEditor || {
+    blocks: [],
+    entityMap: {}
+  };
+  const options = [{
+    value: 'fixed',
+    label: 'fixed (default)',
+    isDisabled: false
+  }, {
+    value: 'bottom',
+    label: 'bottom',
+    isDisabled: false
+  }, {
+    value: 'left',
+    label: 'left',
+    isDisabled: false
+  }, {
+    value: 'right',
+    label: 'right',
+    isDisabled: false
+  }];
+  const initialInputValue = {
+    textBlockAlign: textBlockAlign || 'fixed',
+    video: video || undefined,
+    // create an `editorState` from raw content state object
+    editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)(rawContentState), _entityDecorator.default)
+  };
+  const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
+  const [toShowVideoSelector, setToShowVideoSelector] = (0, _react.useState)(false);
+
+  const clearInputValue = () => {
+    setInputValue(oldInputValue => ({ ...oldInputValue,
+      editorStateOfBasicEditor: _draftJs.EditorState.createWithContent((0, _draftJs.convertFromRaw)({
+        blocks: [],
+        entityMap: {}
+      }), _entityDecorator.default)
+    }));
+  };
+
+  const onVideoSelectorChange = selectedVideosWithMeta => {
+    var _selectedVideosWithMe;
+
+    const video = selectedVideosWithMeta === null || selectedVideosWithMeta === void 0 ? void 0 : (_selectedVideosWithMe = selectedVideosWithMeta[0]) === null || _selectedVideosWithMe === void 0 ? void 0 : _selectedVideosWithMe.video;
+
+    if (!video) {
+      setToShowVideoSelector(false);
+      return;
+    }
+
+    setInputValue(oldInputValue => ({ ...oldInputValue,
+      video: video
+    }));
+    setToShowVideoSelector(false);
+  };
+
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      setInputValue(initialInputValue);
+    }
+  }, [isOpen]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowVideoSelector && /*#__PURE__*/_react.default.createElement(VideoSelector, {
+    onChange: onVideoSelectorChange
+  }), /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
+    isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
+    title: `Insert Background Video`,
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: () => {
+          clearInputValue();
+          onCancel();
+        }
+      },
+      confirm: {
+        label: 'Confirm',
+        action: () => {
+          onChange({
+            textBlockAlign: inputValue.textBlockAlign,
+            video: inputValue.video,
+            // convert `contentState` of the `editorState` into raw content state object
+            rawContentState: (0, _draftJs.convertToRaw)(inputValue.editorStateOfBasicEditor.getCurrentContent())
+          });
+          clearInputValue();
+        }
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(Label, null, "\u5F71\u7247"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(VideoInputText, null, (_inputValue$video = inputValue.video) !== null && _inputValue$video !== void 0 && _inputValue$video.name ? inputValue.video.name : '尚未選取影片'), /*#__PURE__*/_react.default.createElement(_button.Button, {
+    type: "button",
+    onClick: () => setToShowVideoSelector(true),
+    tone: "passive"
+  }, "\u6DFB\u52A0\u5F71\u7247")), /*#__PURE__*/_react.default.createElement(_alignSelector.AlignSelector, {
+    align: inputValue.textBlockAlign,
+    options: options,
+    onChange: textBlockAlign => {
+      setInputValue(oldInputValue => ({ ...oldInputValue,
+        textBlockAlign
+      }));
+    }
+  }), /*#__PURE__*/_react.default.createElement(Label, null, "\u5167\u6587"), /*#__PURE__*/_react.default.createElement(_basicEditor.BasicEditor, {
+    editorState: inputValue.editorStateOfBasicEditor,
+    onChange: editorStateOfBasicEditor => {
+      setInputValue(oldInputValue => ({ ...oldInputValue,
+        editorStateOfBasicEditor
+      }));
+    }
+  }))));
+}
+
+function BGVideoButton(props) {
+  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
+  const {
+    className,
+    editorState,
+    onChange: onEditorStateChange,
+    VideoSelector
+  } = props;
+
+  const onChange = ({
+    textBlockAlign,
+    video,
+    rawContentState
+  }) => {
+    const contentState = editorState.getCurrentContent(); // create an BGVideo entity
+
+    const contentStateWithEntity = contentState.createEntity('BACKGROUNDVIDEO', 'IMMUTABLE', {
+      textBlockAlign,
+      video,
+      rawContentState,
+      body: _draftConverter.default.convertToHtml(rawContentState)
+    });
+    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.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BGVideoInput, {
+    onChange: onChange,
+    onCancel: () => {
+      setToShowInput(false);
+    },
+    isOpen: toShowInput,
+    VideoSelector: VideoSelector
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: className,
+    onClick: () => {
+      setToShowInput(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "10",
+    viewBox: "0 0 16 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M10.6667 1.25V8.75C10.6667 9.44036 10.0697 10 9.33333 10H1.33333C0.596944 10 0 9.44036 0 8.75V1.25C0 0.559635 0.596944 0 1.33333 0H9.33333C10.0694 0 10.6667 0.559635 10.6667 1.25ZM16 1.65365V8.34375C16 9.00781 15.1897 9.39557 14.6003 9.01536L11.5556 7.04948V2.95052L14.6 0.982812C15.1917 0.602344 16 0.992188 16 1.65365Z",
+    fill: "#6b7280"
+  })), /*#__PURE__*/_react.default.createElement("span", null, "Background Video")));
+}