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

package/lib/draft-js/editor/basic-editor.js

@@ -0,0 +1,366 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BasicEditor = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _entityDecorator = _interopRequireDefault(require("./entity-decorator"));
+
+var _draftJs = require("draft-js");
+
+var _link = require("../buttons/link");
+
+var _fontColor = require("../buttons/font-color");
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const DraftEditor = _styledComponents.default.div`
+  position: relative;
+  margin-top: 4px;
+`;
+const DraftEditorWrapper = _styledComponents.default.div`
+  /* Rich-editor default setting (.RichEditor-root)*/
+  background: #fff;
+  border: 1px solid #ddd;
+  font-family: 'Georgia', serif;
+  font-size: 14px;
+  padding: 15px;
+
+  /* Custom setting */
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  width: 100%;
+  height: 100%;
+  background: rgb(255, 255, 255);
+  border-radius: 6px;
+  padding: 0 1rem 1rem;
+`;
+const DraftEditorControls = _styledComponents.default.div`
+  padding-top: 1rem;
+  width: 100%;
+  background: rgb(255, 255, 255);
+`;
+const DraftEditorControlsWrapper = _styledComponents.default.div`
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding-right: 45px;
+`;
+const ButtonGroup = _styledComponents.default.div`
+  margin: 0 10px 0 0;
+`;
+const buttonStyle = (0, _styledComponents.css)`
+  /* Rich-editor default setting (.RichEditor-styleButton)*/
+  cursor: pointer;
+  margin-right: 16px;
+  padding: 2px 0;
+  display: inline-block;
+  /* Custom Setting */
+  border-radius: 6px;
+  font-size: 1rem;
+  padding: 8px 12px;
+  margin: 0px 0px 10px 0px;
+  border: solid 1px rgb(193, 199, 208);
+`;
+const CustomButton = _styledComponents.default.div`
+  ${buttonStyle}
+  border: solid 1px
+  ${props => props.isActive ? 'rgb(38,132,255)' : 'rgb(193, 199, 208)'};
+  box-shadow: ${props => props.isActive ? 'rgba(38, 132, 255, 20%)  0px 0px 0px 3px  ' : 'unset'};
+  transition: box-shadow 100ms linear;
+  color: ${props => props.isActive ? 'rgb(23, 43, 77)' : '#999'};
+`;
+const CustomLinkButton = (0, _styledComponents.default)(_link.LinkButton)`
+  ${buttonStyle}
+  color: ${props => props.isActive ? '#5890ff' : '#999'};
+`;
+const CustomFontColorButton = (0, _styledComponents.default)(_fontColor.FontColorButton)`
+  ${buttonStyle}
+  color: ${props => props.isActive ? '#5890ff' : '#999'};
+`;
+const TextEditorWrapper = _styledComponents.default.div`
+  /* Rich-editor default setting (.RichEditor-editor)*/
+  border-top: 1px solid #ddd;
+  cursor: text;
+  font-size: 16px;
+  margin-top: 10px;
+  /* Custom setting */
+  h2 {
+    font-size: 22px;
+  }
+  h3 {
+    font-size: 17.5px;
+  }
+  font-weight: normal;
+  max-width: 800px;
+`;
+
+class BasicEditor 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 => {
+    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;
+    }
+
+    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;
+  };
+  getCustomStyle = style => {
+    return style.reduce((styles, styleName) => {
+      if (styleName !== null && styleName !== void 0 && styleName.startsWith(_fontColor.CUSTOM_STYLE_PREFIX_FONT_COLOR)) {
+        styles['color'] = styleName.split(_fontColor.CUSTOM_STYLE_PREFIX_FONT_COLOR)[1];
+      }
+
+      return styles;
+    }, {});
+  };
+  customStyleFn = style => {
+    return this.getCustomStyle(style);
+  };
+
+  render() {
+    let {
+      editorState
+    } = this.props;
+
+    if (!(editorState instanceof _draftJs.EditorState)) {
+      editorState = _draftJs.EditorState.createEmpty(_entityDecorator.default);
+    }
+
+    const entityType = this.getEntityType(editorState);
+    const customStyle = this.getCustomStyle(editorState.getCurrentInlineStyle());
+    return /*#__PURE__*/_react.default.createElement(DraftEditor, null, /*#__PURE__*/_react.default.createElement(DraftEditorWrapper, null, /*#__PURE__*/_react.default.createElement("link", {
+      href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css",
+      rel: "stylesheet",
+      type: "text/css"
+    }), /*#__PURE__*/_react.default.createElement("link", {
+      href: "https://storage.googleapis.com/static-readr-tw-dev/cdn/draft-js/rich-editor.css",
+      rel: "stylesheet",
+      type: "text/css"
+    }), /*#__PURE__*/_react.default.createElement("link", {
+      href: "https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.11.7/Draft.css",
+      rel: "stylesheet",
+      type: "text/css"
+    }), /*#__PURE__*/_react.default.createElement("link", {
+      href: "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css",
+      rel: "stylesheet",
+      type: "text/css"
+    }), /*#__PURE__*/_react.default.createElement(DraftEditorControls, null, /*#__PURE__*/_react.default.createElement(DraftEditorControlsWrapper, null, /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(BlockStyleControls, {
+      editorState: editorState,
+      onToggle: this.toggleBlockType
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(InlineStyleControls, {
+      editorState: editorState,
+      onToggle: this.toggleInlineStyle
+    })), /*#__PURE__*/_react.default.createElement(ButtonGroup, null, /*#__PURE__*/_react.default.createElement(CustomLinkButton, {
+      isActive: entityType === 'LINK',
+      editorState: editorState,
+      onChange: this.onChange
+    }), /*#__PURE__*/_react.default.createElement(CustomFontColorButton, {
+      isActive: Object.prototype.hasOwnProperty.call(customStyle, 'color'),
+      editorState: editorState,
+      onChange: this.onChange
+    })))), /*#__PURE__*/_react.default.createElement(TextEditorWrapper, {
+      onClick: () => {
+        var _this$refs$basicEdito;
+
+        // eslint-disable-next-line prettier/prettier
+        (_this$refs$basicEdito = this.refs.basicEditor) === null || _this$refs$basicEdito === void 0 ? void 0 : _this$refs$basicEdito.focus();
+      }
+    }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
+      blockStyleFn: getBlockStyle,
+      customStyleFn: this.customStyleFn,
+      editorState: editorState,
+      handleKeyCommand: this.handleKeyCommand,
+      handleReturn: this.handleReturn,
+      keyBindingFn: this.mapKeyToEditorCommand,
+      onChange: this.onChange,
+      placeholder: "Tell a story...",
+      ref: "basicEditor",
+      spellCheck: true
+    }))));
+  }
+
+}
+
+exports.BasicEditor = BasicEditor;
+
+function getBlockStyle(block) {
+  switch (block.getType()) {
+    case 'blockquote':
+      return 'RichEditor-blockquote';
+
+    default:
+      return null;
+  }
+}
+
+class StyleButton extends _react.default.Component {
+  onToggle = e => {
+    e.preventDefault();
+    this.props.onToggle(this.props.style);
+  };
+
+  render() {
+    return /*#__PURE__*/_react.default.createElement(CustomButton, {
+      isActive: this.props.active,
+      onMouseDown: this.onToggle
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: this.props.icon
+    }), /*#__PURE__*/_react.default.createElement("span", null, !this.props.icon ? this.props.label : ''));
+  }
+
+}
+
+const blockStyles = [{
+  label: 'H2',
+  style: 'header-two',
+  icon: ''
+}, {
+  label: 'H3',
+  style: 'header-three',
+  icon: ''
+}, {
+  label: 'H4',
+  style: 'header-four',
+  icon: ''
+}, {
+  label: 'Blockquote',
+  style: 'blockquote',
+  icon: 'fas fa-quote-right'
+}, {
+  label: 'UL',
+  style: 'unordered-list-item',
+  icon: 'fas fa-list-ul'
+}, {
+  label: 'OL',
+  style: 'ordered-list-item',
+  icon: 'fas fa-list-ol'
+}];
+
+const BlockStyleControls = props => {
+  const {
+    editorState
+  } = props;
+  const selection = editorState.getSelection();
+  const blockType = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "RichEditor-controls"
+  }, blockStyles.map(type => /*#__PURE__*/_react.default.createElement(StyleButton, {
+    key: type.label,
+    active: type.style === blockType,
+    label: type.label,
+    onToggle: props.onToggle,
+    style: type.style,
+    icon: type.icon
+  })));
+};
+
+const inlineStyles = [{
+  label: 'Bold',
+  style: 'BOLD',
+  icon: 'fas fa-bold'
+}, {
+  label: 'Italic',
+  style: 'ITALIC',
+  icon: 'fas fa-italic'
+}, {
+  label: 'Underline',
+  style: 'UNDERLINE',
+  icon: 'fas fa-underline'
+}, {
+  label: 'Monospace',
+  style: 'CODE',
+  icon: 'fas fa-terminal'
+}];
+
+const InlineStyleControls = props => {
+  const currentStyle = props.editorState.getCurrentInlineStyle();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "RichEditor-controls"
+  }, inlineStyles.map(type => /*#__PURE__*/_react.default.createElement(StyleButton, {
+    key: type.label,
+    active: currentStyle.has(type.style),
+    label: type.label,
+    onToggle: props.onToggle,
+    style: type.style,
+    icon: type.icon
+  })));
+};

package/lib/draft-js/editor/block-renderer-fn.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.atomicBlockRenderer = atomicBlockRenderer;
+
+var _embeddedCodeBlock = require("../block-renderer/embedded-code-block");
+
+var _mediaBlock = require("../block-renderer/media-block");
+
+var _imageBlock = require("../block-renderer/image-block");
+
+var _infoBoxBlock = require("../block-renderer/info-box-block");
+
+var _slideshowBlock = require("../block-renderer/slideshow-block");
+
+var _dividerBlock = require("../block-renderer/divider-block");
+
+var _tableBlock = require("../block-renderer/table-block");
+
+var _colorBoxBlock = require("../block-renderer/color-box-block");
+
+var _backgroundImageBlock = require("../block-renderer/background-image-block");
+
+var _backgroundVideoBlock = require("../block-renderer/background-video-block");
+
+var _relatedPostBlock = require("../block-renderer/related-post-block");
+
+var _sideIndexBlock = require("../block-renderer/side-index-block");
+
+const AtomicBlock = props => {
+  const entity = props.contentState.getEntity(props.block.getEntityAt(0));
+  const entityType = entity.getType();
+
+  switch (entityType) {
+    case 'audioLink':
+    case 'imageLink':
+    case 'videoLink':
+      {
+        return (0, _mediaBlock.MediaBlock)(entity);
+      }
+
+    case 'image':
+      {
+        return (0, _imageBlock.ImageBlock)(entity);
+      }
+
+    case 'slideshow':
+      {
+        return (0, _slideshowBlock.SlideshowBlock)(entity);
+      }
+
+    case 'slideshow-v2':
+      {
+        return (0, _slideshowBlock.SlideshowBlockV2)(entity);
+      }
+
+    case 'EMBEDDEDCODE':
+      {
+        return (0, _embeddedCodeBlock.EmbeddedCodeBlock)(entity);
+      }
+
+    case 'INFOBOX':
+      {
+        return (0, _infoBoxBlock.InfoBoxBlock)(props);
+      }
+
+    case 'DIVIDER':
+      {
+        return (0, _dividerBlock.DividerBlock)();
+      }
+
+    case 'TABLE':
+      {
+        return (0, _tableBlock.TableBlock)(props);
+      }
+
+    case 'COLORBOX':
+      {
+        return (0, _colorBoxBlock.ColorBoxBlock)(props);
+      }
+
+    case 'BACKGROUNDIMAGE':
+      {
+        return (0, _backgroundImageBlock.BGImageBlock)(props);
+      }
+
+    case 'BACKGROUNDVIDEO':
+      {
+        return (0, _backgroundVideoBlock.BGVideoBlock)(props);
+      }
+
+    case 'RELATEDPOST':
+      {
+        return (0, _relatedPostBlock.RelatedPostBlock)(entity);
+      }
+
+    case 'SIDEINDEX':
+      {
+        return (0, _sideIndexBlock.SideIndexBlock)(props);
+      }
+  }
+
+  return null;
+};
+
+function atomicBlockRenderer(block) {
+  if (block.getType() === 'atomic') {
+    return {
+      component: AtomicBlock,
+      editable: false
+    };
+  }
+
+  return null;
+}

package/lib/draft-js/editor/entity-decorator.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _draftJs = require("draft-js");
+
+var _annotationDecorator = require("../entity-decorator/annotation-decorator");
+
+var _linkDecorator = require("../entity-decorator/link-decorator");
+
+const decorators = new _draftJs.CompositeDecorator([_annotationDecorator.annotationDecorator, _linkDecorator.linkDecorator]);
+var _default = decorators;
+exports.default = _default;

package/lib/draft-js/editor/modifier.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Modifier = void 0;
+
+var _draftJs = require("draft-js");
+
+var _immutable = require("immutable");
+
+const Modifier = { ..._draftJs.Modifier
+};
+/* 
+    This method is specified for custom inline style such as 'FONT_COLOR_#ffffff'.
+    For this kind of inline style there may be more than one style name 'FONT_COLOR_#ffffff', 'FONT_COLOR_#000000'.
+    To prevent any nested specific inline style got rendered after the outer inline style being removed, 
+    clear all specific inline styles when custom inline style is applied or removed.
+
+    Since getCurrentInlineStyle only return the inline style the starting position contains,
+    loop through all char of blocks to remove all nested inline styles.
+
+    Reference: https://github.com/facebook/draft-js/blob/main/src/model/transaction/ContentStateInlineStyle.js#L39-L88
+  */
+
+exports.Modifier = Modifier;
+
+Modifier.removeInlineStyleByPrefix = (contentState, selectionState, inlineStylePrefix) => {
+  const blockMap = contentState.getBlockMap();
+  const startKey = selectionState.getStartKey();
+  const startOffset = selectionState.getStartOffset();
+  const endKey = selectionState.getEndKey();
+  const endOffset = selectionState.getEndOffset(); // loop through all selected blocks and every block chars to remove specific inline style
+
+  const newBlocks = blockMap.skipUntil((_, k) => k === startKey).takeUntil((_, k) => k === endKey).concat((0, _immutable.Map)([[endKey, blockMap.get(endKey)]])).map((block, blockKey) => {
+    let sliceStart;
+    let sliceEnd;
+
+    if (startKey === endKey) {
+      sliceStart = startOffset;
+      sliceEnd = endOffset;
+    } else {
+      sliceStart = blockKey === startKey ? startOffset : 0;
+      sliceEnd = blockKey === endKey ? endOffset : block.getLength();
+    }
+
+    let chars = block.getCharacterList();
+    let current;
+
+    while (sliceStart < sliceEnd) {
+      current = chars.get(sliceStart);
+      const inlineStyle = current.getStyle().find(styleName => styleName.startsWith(inlineStylePrefix));
+
+      if (inlineStyle) {
+        chars = chars.set(sliceStart, _draftJs.CharacterMetadata.removeStyle(current, inlineStyle));
+      }
+
+      sliceStart++;
+    }
+
+    return block.set('characterList', chars);
+  });
+  return contentState.merge({
+    blockMap: blockMap.merge(newBlocks),
+    selectionBefore: selectionState,
+    selectionAfter: selectionState
+  });
+};

package/lib/draft-js/entity-decorator/annotation-decorator.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.annotationDecorator = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+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 AnnotatedText = _styledComponents.default.span`
+  vertical-align: middle;
+  color: #d0a67d;
+
+  svg {
+    vertical-align: middle;
+    margin-left: 5px;
+  }
+`;
+const AnnotationBody = _styledComponents.default.div`
+  background-color: #f1f1f1;
+  padding: 10px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+`;
+
+function indicatorSvg(shouldRotate) {
+  const transform = shouldRotate ? 'rotate(180 10 10)' : '';
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "10",
+    cy: "10",
+    r: "10",
+    fill: "#f1f1f1"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M10 15L5.66987 7.5L14.3301 7.5L10 15Z",
+    fill: "#D0A67D",
+    transform: transform
+  }));
+}
+
+function AnnotationBlock(props) {
+  const {
+    children: annotated
+  } = props;
+  const [toShowAnnotation, setToShowAnnotation] = (0, _react.useState)(false);
+  const {
+    bodyHTML
+  } = props.contentState.getEntity(props.entityKey).getData();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AnnotatedText, null, annotated, /*#__PURE__*/_react.default.createElement("span", {
+    onClick: e => {
+      e.preventDefault();
+      setToShowAnnotation(!toShowAnnotation);
+    }
+  }, toShowAnnotation ? indicatorSvg(false) : indicatorSvg(true))), toShowAnnotation ? /*#__PURE__*/_react.default.createElement(AnnotationBody, {
+    contentEditable: false,
+    dangerouslySetInnerHTML: {
+      __html: bodyHTML
+    }
+  }) : null);
+}
+
+function findAnnotationEntities(contentBlock, callback, contentState) {
+  contentBlock.findEntityRanges(character => {
+    const entityKey = character.getEntity();
+    return entityKey !== null && contentState.getEntity(entityKey).getType() === 'ANNOTATION';
+  }, callback);
+}
+
+const annotationDecorator = {
+  strategy: findAnnotationEntities,
+  component: AnnotationBlock
+};
+exports.annotationDecorator = annotationDecorator;

package/lib/draft-js/entity-decorator/link-decorator.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.linkDecorator = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const LinkWrapper = _styledComponents.default.a`
+  color: #3b5998;
+  text-decoration: underline;
+`;
+
+function findLinkEntities(contentBlock, callback, contentState) {
+  contentBlock.findEntityRanges(character => {
+    const entityKey = character.getEntity();
+    return entityKey !== null && contentState.getEntity(entityKey).getType() === 'LINK';
+  }, callback);
+}
+
+const linkDecorator = {
+  strategy: findLinkEntities,
+  component: Link
+};
+exports.linkDecorator = linkDecorator;
+
+function Link(props) {
+  const {
+    url
+  } = props.contentState.getEntity(props.entityKey).getData();
+  return /*#__PURE__*/_react.default.createElement(LinkWrapper, {
+    href: url
+  }, props.children);
+}