@kids-reporter/draft-editor 0.1.0 → 0.2.0

package/lib/buttons/background-color.js

@@ -1,122 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BackgroundColorButton = BackgroundColorButton;
-
-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("../modifier");
-
-var _const = require("../const");
-
-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;
-`;
-
-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, _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR);
-
-    if (colorValue) {
-      newContentState = _modifier.Modifier.applyInlineStyle(newContentState, selection, _const.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, _const.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/buttons/background-image.js

@@ -1,223 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BGImageButton = BGImageButton;
-exports.BGImageInput = BGImageInput;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _draftJs = require("draft-js");
-
-var _modals = require("@keystone-ui/modals");
-
-var _button = require("@keystone-ui/button");
-
-var _draftConverter = _interopRequireDefault(require("../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,
-    renderBasicEditor,
-    decorators
-  } = 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), decorators)
-  };
-  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: {}
-      }), decorators)
-    }));
-  };
-
-  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);
-  };
-
-  const basicEditorJsx = renderBasicEditor({
-    editorState: inputValue.editorStateOfBasicEditor,
-    onChange: editorStateOfBasicEditor => {
-      setInputValue(oldInputValue => ({ ...oldInputValue,
-        editorStateOfBasicEditor
-      }));
-    }
-  });
-  (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"), basicEditorJsx)));
-}
-
-function BGImageButton(props) {
-  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
-  const {
-    className,
-    editorState,
-    onChange: onEditorStateChange,
-    ImageSelector,
-    renderBasicEditor
-  } = 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, {
-    renderBasicEditor: renderBasicEditor,
-    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/buttons/background-video.js

@@ -1,223 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BGVideoButton = BGVideoButton;
-exports.BGVideoInput = BGVideoInput;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _draftJs = require("draft-js");
-
-var _modals = require("@keystone-ui/modals");
-
-var _button = require("@keystone-ui/button");
-
-var _draftConverter = _interopRequireDefault(require("../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,
-    renderBasicEditor,
-    decorators
-  } = 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), decorators)
-  };
-  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: {}
-      }), decorators)
-    }));
-  };
-
-  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);
-  };
-
-  const basicEditorJsx = renderBasicEditor({
-    editorState: inputValue.editorStateOfBasicEditor,
-    onChange: editorStateOfBasicEditor => {
-      setInputValue(oldInputValue => ({ ...oldInputValue,
-        editorStateOfBasicEditor
-      }));
-    }
-  });
-  (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"), basicEditorJsx)));
-}
-
-function BGVideoButton(props) {
-  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
-  const {
-    className,
-    editorState,
-    onChange: onEditorStateChange,
-    VideoSelector,
-    renderBasicEditor
-  } = 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, {
-    renderBasicEditor: renderBasicEditor,
-    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")));
-}