@mirrormedia/lilith-draft-editor 1.1.0-alpha.1 → 1.1.0-alpha.3

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

@@ -4,67 +4,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.buttonNames = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _draftJs = require("draft-js");
-
 var _blockRendererFn = require("./block-renderer-fn");
-
 var _entityDecorator = _interopRequireDefault(require("./entity-decorator"));
-
 var _annotation = require("../../draft-js/buttons/annotation");
-
 var _embeddedCode = require("../../draft-js/buttons/embedded-code");
-
 var _enlarge = require("../../draft-js/buttons/enlarge");
-
 var _image = require("../../draft-js/buttons/image");
-
 var _infoBox = require("../../draft-js/buttons/info-box");
-
 var _link = require("../../draft-js/buttons/link");
-
 var _slideshow = require("../../draft-js/buttons/slideshow");
-
 var _table = require("../../draft-js/buttons/table");
-
 var _divider = require("../../draft-js/buttons/divider");
-
 var _colorBox = require("../../draft-js/buttons/color-box");
-
 var _backgroundImage = require("../../draft-js/buttons/background-image");
-
 var _backgroundVideo = require("../../draft-js/buttons/background-video");
-
 var _relatedPost = require("../../draft-js/buttons/related-post");
-
 var _sideIndex = require("../../draft-js/buttons/side-index");
-
 var _textAlign = require("../../draft-js/buttons/text-align");
-
 var _fontColor = require("../../draft-js/buttons/font-color");
-
 var _backgroundColor = require("../../draft-js/buttons/background-color");
-
+var _video = require("../../draft-js/buttons/video");
+var _audio = require("../../draft-js/buttons/audio");
 var _const = require("../../draft-js/const");
-
 var _imageSelector = require("./selector/image-selector");
-
 var _videoSelector = require("./selector/video-selector");
-
 var _postSelector = require("./selector/post-selector");
-
+var _audioSelector = require("./selector/audio-selector");
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 const buttonNames = {
   // inline styles
   bold: 'bold',
@@ -95,10 +67,12 @@ const buttonNames = {
   backgroundImage: 'background-image',
   backgroundVideo: 'background-video',
   relatedPost: 'related-post',
-  sideIndex: 'side-index'
+  sideIndex: 'side-index',
+  video: 'video',
+  audio: 'audio'
 };
 exports.buttonNames = buttonNames;
-const disabledButtonsOnBasicEditor = [buttonNames.annotation, buttonNames.divider, buttonNames.embed, buttonNames.image, buttonNames.infoBox, buttonNames.slideshow, buttonNames.table, buttonNames.textAlign, buttonNames.colorBox, buttonNames.backgroundColor, buttonNames.backgroundImage, buttonNames.backgroundVideo, buttonNames.relatedPost, buttonNames.sideIndex];
+const disabledButtonsOnBasicEditor = [buttonNames.annotation, buttonNames.divider, buttonNames.embed, buttonNames.image, buttonNames.infoBox, buttonNames.slideshow, buttonNames.table, buttonNames.textAlign, buttonNames.colorBox, buttonNames.backgroundColor, buttonNames.backgroundImage, buttonNames.backgroundVideo, buttonNames.relatedPost, buttonNames.sideIndex, buttonNames.video, buttonNames.audio];
 const buttonStyle = (0, _styledComponents.css)`
   border-radius: 6px;
   text-align: center;
@@ -114,18 +88,15 @@ const buttonStyle = (0, _styledComponents.css)`
   if (props.readOnly) {
     return 'not-allowed';
   }
-
   return 'pointer';
 }};
   color: ${props => {
   if (props.readOnly) {
     return '#c1c7d0';
   }
-
   if (props.isActive) {
     return '#3b82f6';
   }
-
   return '#6b7280';
 }};
   border: solid 1px
@@ -133,22 +104,18 @@ const buttonStyle = (0, _styledComponents.css)`
   if (props.readOnly) {
     return '#c1c7d0';
   }
-
   if (props.isActive) {
     return '#3b82f6';
   }
-
   return '#6b7280';
 }};
   box-shadow: ${props => {
   if (props.readOnly) {
     return 'unset';
   }
-
   if (props.isActive) {
     return 'rgba(38, 132, 255, 20%)  0px 1px 4px ';
   }
-
   return 'unset';
 }};
   transition: box-shadow 100ms linear;
@@ -157,7 +124,6 @@ const buttonStyle = (0, _styledComponents.css)`
   if (props.isDisabled) {
     return 'none';
   }
-
   return 'inline-flex';
 }};
 `;
@@ -167,11 +133,9 @@ const longFormButtonStyle = (0, _styledComponents.css)`
   if (props.readOnly) {
     return '#c1c7d0';
   }
-
   if (props.isActive) {
     return '#ED8B00';
   }
-
   return '#6b7280';
 }};
   border: solid 1px
@@ -179,22 +143,18 @@ const longFormButtonStyle = (0, _styledComponents.css)`
   if (props.readOnly) {
     return '#c1c7d0';
   }
-
   if (props.isActive) {
     return '#ED8B00';
   }
-
   return '#FECC85';
 }};
   box-shadow: ${props => {
   if (props.readOnly) {
     return 'unset';
   }
-
   if (props.isActive) {
     return 'rgba(237, 139, 0, 0.5) 0px 1px 4px';
   }
-
   return 'unset';
 }};
 `;
@@ -213,7 +173,6 @@ const CustomAnnotationButton = (0, _styledComponents.default)(_annotation.Annota
 const CustomLinkButton = (0, _styledComponents.default)(_link.LinkButton)`
   ${buttonStyle}
 `;
-
 function createButtonWithoutProps(referenceComponent, isLongForm = false, additionalCSS = ``) {
   return isLongForm ? (0, _styledComponents.default)(referenceComponent)`
         ${longFormButtonStyle}
@@ -223,7 +182,6 @@ function createButtonWithoutProps(referenceComponent, isLongForm = false, additi
         ${additionalCSS}
       `;
 }
-
 const CustomEnlargeButton = createButtonWithoutProps(_enlarge.EnlargeButton, false, `color: #999`);
 const CustomImageButton = createButtonWithoutProps(_image.ImageButton);
 const CustomSlideshowButton = createButtonWithoutProps(_slideshow.SlideshowButton);
@@ -238,6 +196,8 @@ const CustomRelatedPostButton = createButtonWithoutProps(_relatedPost.RelatedPos
 const CustomSideIndexButton = createButtonWithoutProps(_sideIndex.SideIndexButton, true);
 const CustomAlignCenterButton = createButtonWithoutProps(_textAlign.AlignCenterButton, true);
 const CustomAlignLeftButton = createButtonWithoutProps(_textAlign.AlignLeftButton, true);
+const CustomVideoButton = createButtonWithoutProps(_video.VideoButton);
+const CustomAudioButton = createButtonWithoutProps(_audio.AudioButton);
 const DraftEditorWrapper = _styledComponents.default.div`
   /* Rich-editor default setting (.RichEditor-root)*/
   background: #fff;
@@ -379,15 +339,14 @@ const EnlargeButtonWrapper = _styledComponents.default.div`
   right: 0;
   margin: 0;
 `;
-
 class RichTextEditor extends _react.default.Component {
   constructor(props) {
     super(props);
     this.state = {
       isEnlarged: false,
       readOnly: false
-    }; // Custom overrides for "code" style.
-
+    };
+    // Custom overrides for "code" style.
     this.customStyleMap = {
       CODE: {
         backgroundColor: 'rgba(0, 0, 0, 0.05)',
@@ -397,18 +356,15 @@ class RichTextEditor extends _react.default.Component {
       }
     };
   }
-
   onChange = editorState => {
     this.props.onChange(editorState);
   };
   handleKeyCommand = (command, editorState) => {
     const newState = _draftJs.RichUtils.handleKeyCommand(editorState, command);
-
     if (newState) {
       this.onChange(newState);
       return true;
     }
-
     return false;
   };
   handleReturn = event => {
@@ -420,24 +376,17 @@ class RichTextEditor extends _react.default.Component {
       onChange(_draftJs.RichUtils.insertSoftNewline(editorState));
       return 'handled';
     }
-
     return 'not-handled';
   };
   mapKeyToEditorCommand = e => {
-    if (e.keyCode === 9
-    /* TAB */
-    ) {
-      const newEditorState = _draftJs.RichUtils.onTab(e, this.props.editorState, 4
-      /* maxDepth */
-      );
+    if (e.keyCode === 9 /* TAB */) {
+      const newEditorState = _draftJs.RichUtils.onTab(e, this.props.editorState, 4 /* maxDepth */);
 
       if (newEditorState !== this.props.editorState) {
         this.onChange(newEditorState);
       }
-
       return;
     }
-
     return (0, _draftJs.getDefaultKeyBinding)(e);
   };
   toggleBlockType = blockType => {
@@ -454,23 +403,18 @@ class RichTextEditor extends _react.default.Component {
     const endOffset = selection.getEndOffset();
     let entityInstance;
     let entityKey;
-
     if (!selection.isCollapsed()) {
       entityKey = startBlock.getEntityAt(startOffset);
     } else {
       entityKey = startBlock.getEntityAt(endOffset);
     }
-
     if (entityKey !== null) {
       entityInstance = contentState.getEntity(entityKey);
     }
-
     let entityType = '';
-
     if (entityInstance) {
       entityType = entityInstance.getType();
     }
-
     return entityType;
   };
   getCustomStyle = style => {
@@ -478,11 +422,9 @@ class RichTextEditor extends _react.default.Component {
       if (styleName !== null && styleName !== void 0 && styleName.startsWith(_const.CUSTOM_STYLE_PREFIX_FONT_COLOR)) {
         styles['color'] = styleName.split(_const.CUSTOM_STYLE_PREFIX_FONT_COLOR)[1];
       }
-
       if (styleName !== null && styleName !== void 0 && styleName.startsWith(_const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)) {
         styles['backgroundColor'] = styleName.split(_const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)[1];
       }
-
       return styles;
     }, {});
   };
@@ -494,10 +436,8 @@ class RichTextEditor extends _react.default.Component {
   customStyleFn = style => {
     return this.getCustomStyle(style);
   };
-
   blockStyleFn(block) {
     var _entity$getData;
-
     const {
       editorState
     } = this.props;
@@ -505,17 +445,14 @@ class RichTextEditor extends _react.default.Component {
     const entity = entityKey ? editorState.getCurrentContent().getEntity(entityKey) : null;
     let result = '';
     const blockData = block.getData();
-
     if (blockData) {
       const textAlign = blockData === null || blockData === void 0 ? void 0 : blockData.get('textAlign');
-
       if (textAlign === 'center') {
         result += 'alignCenter ';
       } else if (textAlign === 'left') {
         result += 'alignLeft ';
       }
     }
-
     switch (block.getType()) {
       case 'header-two':
       case 'header-three':
@@ -523,25 +460,19 @@ class RichTextEditor extends _react.default.Component {
       case 'blockquote':
         result += 'public-DraftStyleDefault-' + block.getType();
         break;
-
       case 'atomic':
         if ((_entity$getData = entity.getData()) !== null && _entity$getData !== void 0 && _entity$getData.alignment) {
           // support all atomic block to set alignment
           result += ' ' + entity.getData().alignment;
         }
-
         break;
-
       default:
         break;
     }
-
     return result;
   }
-
   blockRendererFn = block => {
     const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);
-
     if (atomicBlockObj) {
       const onEditStart = () => {
         this.setState({
@@ -557,7 +488,6 @@ class RichTextEditor extends _react.default.Component {
           readOnly: true
         });
       };
-
       const onEditFinish = ({
         entityKey,
         entityData
@@ -568,20 +498,20 @@ class RichTextEditor extends _react.default.Component {
           this.onChange(_draftJs.EditorState.set(this.props.editorState, {
             currentContent: newContentState
           }));
-        } // Custom block interaction is finished.
+        }
+
+        // Custom block interaction is finished.
         // Therefore, we set readOnly={false} to
         // make editor editable.
-
-
         this.setState({
           readOnly: false
         });
-      }; // `onEditStart` and `onEditFinish` will be passed
+      };
+
+      // `onEditStart` and `onEditFinish` will be passed
       // into custom block component.
       // We can get them via `props.blockProps.onEditStart`
       // and `props.blockProps.onEditFinish` in the custom block components.
-
-
       atomicBlockObj['props'] = {
         onEditStart,
         onEditFinish,
@@ -593,10 +523,8 @@ class RichTextEditor extends _react.default.Component {
         }
       };
     }
-
     return atomicBlockObj;
   };
-
   render() {
     const {
       disabledButtons = []
@@ -604,24 +532,20 @@ class RichTextEditor extends _react.default.Component {
     let {
       editorState
     } = this.props;
-
     if (!(editorState instanceof _draftJs.EditorState)) {
       editorState = _draftJs.EditorState.createEmpty(_entityDecorator.default);
     }
-
     const {
       isEnlarged,
       readOnly
     } = this.state;
     const entityType = this.getEntityType(editorState);
     const customStyle = this.getCustomStyle(editorState.getCurrentInlineStyle());
-
     const renderBasicEditor = propsOfBasicEditor => {
       return /*#__PURE__*/_react.default.createElement(RichTextEditor, _extends({}, propsOfBasicEditor, {
         disabledButtons: disabledButtonsOnBasicEditor
       }));
     };
-
     return /*#__PURE__*/_react.default.createElement(DraftEditorContainer, {
       isEnlarged: isEnlarged
     }, /*#__PURE__*/_react.default.createElement(DraftEditorWrapper, null, /*#__PURE__*/_react.default.createElement("link", {
@@ -683,6 +607,18 @@ class RichTextEditor extends _react.default.Component {
       onChange: this.onChange,
       readOnly: this.state.readOnly,
       ImageSelector: _imageSelector.ImageSelector
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomVideoButton, {
+      isDisabled: disabledButtons.includes(buttonNames.video),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly,
+      VideoSelector: _videoSelector.VideoSelector
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomAudioButton, {
+      isDisabled: disabledButtons.includes(buttonNames.audio),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly,
+      AudioSelector: _audioSelector.AudioSelector
     })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomSlideshowButton, {
       isDisabled: disabledButtons.includes(buttonNames.slideshow),
       editorState: editorState,
@@ -761,7 +697,6 @@ class RichTextEditor extends _react.default.Component {
     })))), /*#__PURE__*/_react.default.createElement(TextEditorWrapper, {
       onClick: () => {
         var _this$refs$editor;
-
         // eslint-disable-next-line prettier/prettier
         (_this$refs$editor = this.refs.editor) === null || _this$refs$editor === void 0 ? void 0 : _this$refs$editor.focus();
       }
@@ -781,15 +716,12 @@ class RichTextEditor extends _react.default.Component {
       readOnly: readOnly
     }))));
   }
-
 }
-
 class StyleButton extends _react.default.Component {
   onToggle = e => {
     e.preventDefault();
     this.props.onToggle(this.props.style);
   };
-
   render() {
     return /*#__PURE__*/_react.default.createElement(CustomButton, {
       isDisabled: this.props.isDisabled,
@@ -800,9 +732,7 @@ class StyleButton extends _react.default.Component {
       className: this.props.icon
     }), /*#__PURE__*/_react.default.createElement("span", null, !this.props.icon ? this.props.label : ''));
   }
-
 }
-
 const blockStyles = [{
   label: 'H2',
   style: 'header-two',
@@ -832,7 +762,6 @@ const blockStyles = [{
   style: 'code-block',
   icon: 'fas fa-code'
 }];
-
 const BlockStyleControls = props => {
   const {
     editorState,
@@ -851,7 +780,6 @@ const BlockStyleControls = props => {
     readOnly: props.readOnly
   })));
 };
-
 const inlineStyles = [{
   label: 'Bold',
   style: 'BOLD',
@@ -869,7 +797,6 @@ const inlineStyles = [{
   style: 'CODE',
   icon: 'fas fa-terminal'
 }];
-
 const InlineStyleControls = props => {
   const currentStyle = props.editorState.getCurrentInlineStyle();
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, inlineStyles.map(type => /*#__PURE__*/_react.default.createElement(StyleButton, {
@@ -883,7 +810,6 @@ const InlineStyleControls = props => {
     readOnly: props.readOnly
   })));
 };
-
 const DraftEditor = {
   RichTextEditor,
   decorators: _entityDecorator.default

package/lib/website/readr/entity-decorator.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _draftJs = require("draft-js");
-
 var _readr = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/readr"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const {
   annotationDecorator,
   linkDecorator

package/lib/website/readr/index.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _draftEditor = _interopRequireDefault(require("./draft-editor"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const Readr = {
   DraftEditor: _draftEditor.default
 };

package/lib/website/readr/selector/align-selector.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AlignSelector = AlignSelector;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _fields = require("@keystone-ui/fields");
-
 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;
   margin: 10px 0;
@@ -29,7 +22,6 @@ const AlignSelect = (0, _styledComponents.default)(_fields.Select)`
   return `margin-bottom: ${menuHeight}px;`;
 }}
 `;
-
 function AlignSelector(props) {
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const [menuHeight, setMenuHeight] = (0, _react.useState)(0);
@@ -41,7 +33,6 @@ function AlignSelector(props) {
   } = props;
   (0, _react.useEffect)(() => {
     const selectMenu = document.querySelector('.css-nabggt-menu');
-
     if (selectMenu) {
       const styles = window.getComputedStyle(selectMenu);
       const margin = parseFloat(styles['marginTop']) + parseFloat(styles['marginBottom']);
@@ -49,7 +40,6 @@ function AlignSelector(props) {
     } else {
       setMenuHeight(0);
     }
-
     if (isOpen && onOpen) {
       onOpen();
     }
@@ -57,7 +47,8 @@ function AlignSelector(props) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
     htmlFor: "alignment"
   }, "\u5C0D\u9F4A"), /*#__PURE__*/_react.default.createElement(AlignSelect, {
-    id: "alignment" // default align === undefined
+    id: "alignment"
+    // default align === undefined
     ,
     value: options.find(option => option.value === align),
     options: options,