@kids-reporter/draft-editor 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-editor",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -23,7 +23,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@kids-reporter/draft-renderer": "1.0.5",
+    "@kids-reporter/draft-renderer": "1.0.7",
     "@twreporter/errors": "^1.1.2",
     "draft-js": "^0.11.7"
   },

package/lib/draft-editor.js

@@ -1,279 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.decorator = exports.RichTextEditor = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _draftJs = require("draft-js");
-var _draftRenderer = require("@kids-reporter/draft-renderer");
-var _btNames = _interopRequireDefault(require("./buttons/bt-names"));
-var _blockRendererFn = require("./block-renderer-fn");
-var _styled = require("./styled");
-var _buttons = require("./buttons");
-var _imageSelector = require("./buttons/selector/image-selector");
-var _annotation = require("./buttons/annotation");
-var _infoBox = require("./buttons/info-box");
-var _bgColor = require("./buttons/bg-color");
-var _fontColor = require("./buttons/font-color");
-var _tocAnchor = require("./entity-decorators/toc-anchor");
-var _anchor = require("./entity-decorators/anchor");
-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 styleSource = ['https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css', 'https://storage.googleapis.com/static-readr-tw-dev/cdn/draft-js/rich-editor.css', 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'].map((src, index) => /*#__PURE__*/_react.default.createElement("link", {
-  key: `style-src-${index}`,
-  href: src,
-  rel: "stylesheet",
-  type: "text/css"
-}));
-const decorator = exports.decorator = new _draftJs.CompositeDecorator([_draftRenderer.annotationDecorator, _draftRenderer.linkDecorator]);
-class RichTextEditor extends _react.default.Component {
-  editorRef = null;
-  constructor(props) {
-    super(props);
-    this.state = {
-      isEnlarged: false,
-      readOnly: false
-    };
-    this.editorDecorator = new _draftJs.CompositeDecorator([_draftRenderer.annotationDecorator, _draftRenderer.linkDecorator, {
-      ..._tocAnchor.editableTOCAnchorDecorator,
-      props: {
-        ...this.customEditProps
-      }
-    }, {
-      ..._anchor.editableAnchorDecorator,
-      props: {
-        ...this.customEditProps
-      }
-    }]);
-  }
-  onChange = editorState => {
-    this.props.onChange(editorState);
-  };
-  handleKeyCommand = (command, editorState) => {
-    const newState = _draftJs.RichUtils.handleKeyCommand(editorState, command);
-    if (newState) {
-      this.onChange(newState);
-      return 'handled';
-    }
-    return 'not-handled';
-  };
-  handleReturn = event => {
-    if (_draftJs.KeyBindingUtil.isSoftNewlineEvent(event)) {
-      const {
-        onChange,
-        editorState
-      } = this.props;
-      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 (newEditorState !== this.props.editorState) {
-        this.onChange(newEditorState);
-      }
-      return null;
-    }
-    return (0, _draftJs.getDefaultKeyBinding)(e);
-  };
-  toggleBlockType = blockType => {
-    this.onChange(_draftJs.RichUtils.toggleBlockType(this.props.editorState, blockType));
-  };
-  toggleInlineStyle = inlineStyle => {
-    this.onChange(_draftJs.RichUtils.toggleInlineStyle(this.props.editorState, inlineStyle));
-  };
-  getEntityType = editorState => {
-    const contentState = editorState.getCurrentContent();
-    const selection = editorState.getSelection();
-    const startOffset = selection.getStartOffset();
-    const startBlock = editorState.getCurrentContent().getBlockForKey(selection.getStartKey());
-    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;
-  };
-  toggleEnlarge = () => {
-    this.setState({
-      isEnlarged: !this.state.isEnlarged
-    });
-  };
-  commonEditProps = {
-    onEditStart: () => {
-      this.setState({
-        // If custom block renderer requires mouse interaction,
-        // [Draft.js document](https://draftjs.org/docs/advanced-topics-block-components#recommendations-and-other-notes)
-        // suggests that we should temporarily set Editor
-        // to readOnly={true} during the interaction.
-        // In readOnly={true} condition, the user does not
-        // trigger any selection changes within the editor
-        // while interacting with custom block.
-        // If we don't set readOnly={true},
-        // it will cause some subtle bugs in InfoBox button.
-        readOnly: true
-      });
-    },
-    onEditFinish: () => {
-      this.setState({
-        readOnly: false
-      });
-    }
-  };
-  customEditProps = {
-    onEditStart: this.commonEditProps.onEditStart,
-    onEditFinish: ({
-      entityKey,
-      entityData
-    } = {}) => {
-      if (entityKey && entityData) {
-        const oldContentState = this.props.editorState.getCurrentContent();
-        const newContentState = oldContentState.replaceEntityData(entityKey, entityData);
-        this.onChange(_draftJs.EditorState.set(this.props.editorState, {
-          currentContent: newContentState
-        }));
-      }
-      this.commonEditProps.onEditFinish();
-    }
-  };
-  blockRendererFn = block => {
-    const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);
-    if (atomicBlockObj) {
-      // `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'] = {
-        ...this.customEditProps,
-        RichTextEditorComponent: RichTextEditor,
-        decorator,
-        getMainEditorReadOnly: () => this.state.readOnly
-      };
-    }
-    return atomicBlockObj;
-  };
-  render() {
-    const {
-      disabledButtons = []
-    } = this.props;
-    let {
-      editorState
-    } = this.props;
-    if (!(editorState instanceof _draftJs.EditorState)) {
-      editorState = _draftJs.EditorState.createEmpty(this.editorDecorator);
-    } else {
-      editorState = _draftJs.EditorState.set(editorState, {
-        decorator: this.editorDecorator
-      });
-    }
-    const {
-      isEnlarged,
-      readOnly
-    } = this.state;
-    const entityType = this.getEntityType(editorState);
-    const commonProps = {
-      editorState: editorState,
-      onChange: this.onChange,
-      readOnly: this.state.readOnly
-    };
-    return /*#__PURE__*/_react.default.createElement(_styled.DraftEditorContainer, {
-      isEnlarged: isEnlarged
-    }, /*#__PURE__*/_react.default.createElement(_styled.DraftEditorWrapper, null, styleSource, /*#__PURE__*/_react.default.createElement(_styled.DraftEditorControls, null, /*#__PURE__*/_react.default.createElement(_styled.DraftEditorControlsWrapper, null, /*#__PURE__*/_react.default.createElement(_buttons.BlockStyleControls, {
-      disabledButtons: disabledButtons,
-      editorState: editorState,
-      onToggle: this.toggleBlockType,
-      readOnly: this.state.readOnly
-    }), /*#__PURE__*/_react.default.createElement(_buttons.InlineStyleControls, {
-      disabledButtons: disabledButtons,
-      editorState: editorState,
-      onToggle: this.toggleInlineStyle,
-      readOnly: this.state.readOnly
-    }), /*#__PURE__*/_react.default.createElement(_styled.EnlargeButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_buttons.CustomEnlargeButton, {
-      onToggle: this.toggleEnlarge,
-      isEnlarged: isEnlarged
-    })), /*#__PURE__*/_react.default.createElement(_buttons.CustomTOCAnchorButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.tocAnchor),
-      isActive: entityType === _draftRenderer.ENTITY.TOCAnchor
-    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomAnchorButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.anchor),
-      isActive: entityType === _draftRenderer.ENTITY.Anchor
-    }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomLinkButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.link),
-      isActive: entityType === _draftRenderer.ENTITY.Link
-    }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomBackgroundColorButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.backgroundColor),
-      isActive: editorState.getCurrentInlineStyle().find(styleName => typeof styleName === 'string' && styleName.startsWith(_bgColor.customStylePrefix)) !== undefined
-    }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomFontColorButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.fontColor),
-      isActive: editorState.getCurrentInlineStyle().find(styleName => typeof styleName === 'string' && styleName.startsWith(_fontColor.customStylePrefix)) !== undefined
-    }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomBlockquoteButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.blockquote)
-    }, commonProps)), /*#__PURE__*/_react.default.createElement(CustomAnnotationButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.annotation),
-      isActive: entityType === _draftRenderer.ENTITY.Annotation
-    }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomImageButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.image),
-      ImageSelector: _imageSelector.ImageSelector
-    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomSlideshowButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.slideshow),
-      ImageSelector: _imageSelector.ImageSelector
-    }, commonProps)), /*#__PURE__*/_react.default.createElement(CustomInfoBoxButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.infoBox)
-    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomEmbeddedCodeButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.embed)
-    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomNewsReadingButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.newsReading)
-    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomDividerButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.divider)
-    }, commonProps)))), /*#__PURE__*/_react.default.createElement(_styled.TextEditorWrapper, {
-      onClick: () => {
-        if (this.editorRef) {
-          var _this$editorRef;
-          // eslint-disable-next-line prettier/prettier
-          (_this$editorRef = this.editorRef) === null || _this$editorRef === void 0 || _this$editorRef.focus();
-        }
-      }
-    }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
-      blockRenderMap: _draftRenderer.blockRenderMap,
-      blockRendererFn: this.blockRendererFn,
-      customStyleFn: _draftRenderer.customStyleFn,
-      editorState: editorState,
-      handleKeyCommand: this.handleKeyCommand,
-      handleReturn: this.handleReturn,
-      keyBindingFn: this.mapKeyToEditorCommand,
-      onChange: this.onChange,
-      placeholder: "Tell a story...",
-      ref: this.editorRef,
-      spellCheck: true,
-      readOnly: readOnly
-    }))));
-  }
-}
-exports.RichTextEditor = RichTextEditor;
-const AnnotationButton = (0, _annotation.createAnnotationButton)({
-  InnerEditor: RichTextEditor,
-  decorator
-});
-const InfoBoxButton = (0, _infoBox.createInfoBoxButton)({
-  InnerEditor: RichTextEditor,
-  decorator
-});
-const CustomAnnotationButton = (0, _buttons.withStyle)(AnnotationButton);
-const CustomInfoBoxButton = (0, _buttons.withStyle)(InfoBoxButton);
-var _default = exports.default = {
-  RichTextEditor,
-  decorator
-};

package/lib/draft-editor.type.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});