@mirrormedia/lilith-draft-editor 1.0.0-beta

package/lib/website/readr/draft-editor/index.tsx

@@ -0,0 +1,909 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+import {
+  Editor,
+  EditorState,
+  KeyBindingUtil,
+  RichUtils,
+  getDefaultKeyBinding,
+} from 'draft-js'
+
+import { atomicBlockRenderer } from './block-redender-fn'
+import decorators from './entity-decorator'
+import { AnnotationButton } from '../../../draft-js/buttons/annotation'
+import { EmbeddedCodeButton } from '../../../draft-js/buttons/embedded-code'
+import { EnlargeButton } from '../../../draft-js/buttons/enlarge'
+import { ImageButton } from '../../../draft-js/buttons/image'
+import { InfoBoxButton } from '../../../draft-js/buttons/info-box'
+import { LinkButton } from '../../../draft-js/buttons/link'
+import { SlideshowButton } from '../../../draft-js/buttons/slideshow'
+import { TableButton } from '../../../draft-js/buttons/table'
+import { DividerButton } from '../../../draft-js/buttons/divider'
+import { ColorBoxButton } from '../../../draft-js/buttons/color-box'
+import { BGImageButton } from '../../../draft-js/buttons/background-image'
+import { BGVideoButton } from '../../../draft-js/buttons/background-video'
+import { RelatedPostButton } from '../../../draft-js/buttons/related-post'
+import { SideIndexButton } from '../../../draft-js/buttons/side-index'
+import {
+  AlignCenterButton,
+  AlignLeftButton,
+} from '../../../draft-js/buttons/text-align'
+import { FontColorButton } from '../../../draft-js/buttons/font-color'
+import { BackgroundColorButton } from '../../../draft-js/buttons/background-color'
+
+import { CUSTOM_STYLE_PREFIX_FONT_COLOR } from '../../../draft-js/buttons/font-color'
+import { CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR } from '../../../draft-js/buttons/background-color'
+import { getSelectionBlockData } from '../../../draft-js/buttons/text-align'
+import { ImageSelector } from '../custom/selector/image-selector'
+import { VideoSelector } from '../custom/selector/video-selector'
+import { PostSelector } from '../custom/selector/post-selector'
+
+const buttonStyle = css`
+  border-radius: 6px;
+  text-align: center;
+  font-size: 1rem;
+  padding: 0 12px;
+  margin: 0px 0px 10px 0px;
+  background-color: #fff;
+  border: solid 1px rgb(193, 199, 208);
+  display: inline-flex;
+  align-items: center;
+  height: 40px;
+
+  cursor: ${(props) => {
+    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
+    ${(props) => {
+      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;
+`
+
+const longFormButtonStyle = css`
+  ${buttonStyle}
+  color: ${(props) => {
+    if (props.readOnly) {
+      return '#c1c7d0'
+    }
+    if (props.isActive) {
+      return '#ED8B00'
+    }
+    return '#6b7280'
+  }};
+  border: solid 1px
+    ${(props) => {
+      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'
+  }};
+`
+
+const CustomFontColorButton = styled(FontColorButton)<{
+  isActive: boolean
+  readOnly: boolean
+}>`
+  ${buttonStyle}
+`
+
+const CustomBackgroundColorButton = styled(BackgroundColorButton)<{
+  isActive: boolean
+  readOnly: boolean
+}>`
+  ${longFormButtonStyle}
+`
+
+const CustomButton = styled.div<{ isActive: boolean; readOnly: boolean }>`
+  ${buttonStyle}
+`
+
+const CustomAnnotationButton = styled(AnnotationButton)<{
+  isActive: boolean
+  readOnly: boolean
+}>`
+  ${buttonStyle}
+`
+
+const CustomLinkButton = styled(LinkButton)<{
+  isActive: boolean
+  readOnly: boolean
+}>`
+  ${buttonStyle}
+`
+
+function createButtonWithoutProps(
+  referenceComponent,
+  isLongForm = false,
+  additionalCSS = ``
+) {
+  return isLongForm
+    ? styled(referenceComponent)`
+        ${longFormButtonStyle}
+        ${additionalCSS}
+      `
+    : styled(referenceComponent)`
+        ${buttonStyle}
+        ${additionalCSS}
+      `
+}
+const CustomEnlargeButton = createButtonWithoutProps(
+  EnlargeButton,
+  false,
+  `color: #999`
+)
+const CustomImageButton = createButtonWithoutProps(ImageButton)
+const CustomSlideshowButton = createButtonWithoutProps(SlideshowButton)
+const CustomEmbeddedCodeButton = createButtonWithoutProps(EmbeddedCodeButton)
+const CustomTableButton = createButtonWithoutProps(TableButton)
+const CustomInfoBoxButton = createButtonWithoutProps(InfoBoxButton)
+const CustomDividerButton = createButtonWithoutProps(DividerButton)
+const CustomColorBoxButton = createButtonWithoutProps(ColorBoxButton, true)
+const CustomBGImageButton = createButtonWithoutProps(BGImageButton, true)
+const CustomBGVideoButton = createButtonWithoutProps(BGVideoButton, true)
+const CustomRelatedPostButton = createButtonWithoutProps(
+  RelatedPostButton,
+  true
+)
+const CustomSideIndexButton = createButtonWithoutProps(SideIndexButton, true)
+const CustomAlignCenterButton = createButtonWithoutProps(
+  AlignCenterButton,
+  true
+)
+const CustomAlignLeftButton = createButtonWithoutProps(AlignLeftButton, true)
+
+const DraftEditorWrapper = styled.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;
+
+  /* Draft built-in buttons' style */
+  .public-DraftStyleDefault-header-two {
+  }
+  .public-DraftStyleDefault-header-three {
+  }
+  .public-DraftStyleDefault-header-four {
+  }
+  .public-DraftStyleDefault-blockquote {
+  }
+  .public-DraftStyleDefault-ul {
+  }
+  .public-DraftStyleDefault-unorderedListItem {
+  }
+  .public-DraftStyleDefault-ol {
+  }
+  .public-DraftStyleDefault-orderedListItem {
+  }
+  /* code-block */
+  .public-DraftStyleDefault-pre {
+  }
+  .alignCenter * {
+    text-align: center;
+  }
+  .alignLeft * {
+    text-align: left;
+  }
+`
+
+const DraftEditorControls = styled.div`
+  padding-top: 1rem;
+  width: 100%;
+  background: rgb(255, 255, 255);
+`
+
+const DraftEditorControlsWrapper = styled.div`
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding-right: 45px;
+`
+
+const TextEditorWrapper = styled.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;
+
+  // atimoic block float setting
+  display: flow-root;
+  figure {
+    clear: both;
+    margin: 0;
+  }
+  figure.left {
+    float: left;
+    width: 33%;
+  }
+  figure.right {
+    float: right;
+    width: 33%;
+  }
+`
+
+const DraftEditorContainer = styled.div<{ isEnlarged: boolean }>`
+  position: relative;
+  margin-top: 4px;
+  ${(props) =>
+    props.isEnlarged
+      ? css`
+          position: fixed;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
+          z-index: 30;
+          padding-left: 3em;
+          padding-right: 3em;
+          background: rgba(0, 0, 0, 0.5);
+        `
+      : ''}
+  ${DraftEditorWrapper} {
+    ${(props) =>
+      props.isEnlarged
+        ? css`
+            width: 100%;
+            height: 100%;
+            padding: 0 1rem 0;
+            overflow: scroll;
+          `
+        : ''}
+  }
+  ${DraftEditorControls} {
+    ${(props) =>
+      props.isEnlarged
+        ? css`
+            position: sticky;
+            top: 0;
+            z-index: 12;
+          `
+        : ''}
+  }
+  ${DraftEditorControlsWrapper} {
+    ${(props) =>
+      props.isEnlarged
+        ? css`
+            overflow: auto;
+            padding-bottom: 0;
+          `
+        : ''}
+  }
+  ${TextEditorWrapper} {
+    ${(props) =>
+      props.isEnlarged
+        ? css`
+            max-width: 100%;
+            min-height: 100vh;
+            padding-bottom: 0;
+          `
+        : ''}
+  }
+`
+
+const ButtonGroup = styled.div`
+  margin: 0 10px 0 0;
+`
+const EnlargeButtonWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0;
+`
+
+type RichTextEditorProps = {
+  onChange: (editorState) => void
+  editorState: EditorState
+}
+type State = {
+  isEnlarged?: boolean
+  readOnly?: boolean
+}
+
+class RichTextEditor extends React.Component<RichTextEditorProps, State> {
+  customStyleMap: {
+    CODE: {
+      backgroundColor: string
+      fontFamily: string
+      fontSize: number
+      padding: number
+    }
+  }
+  constructor(props) {
+    super(props)
+    this.state = {
+      isEnlarged: false,
+      readOnly: false,
+    }
+    // Custom overrides for "code" style.
+    this.customStyleMap = {
+      CODE: {
+        backgroundColor: 'rgba(0, 0, 0, 0.05)',
+        fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
+        fontSize: 16,
+        padding: 2,
+      },
+    }
+  }
+  onChange = (editorState) => {
+    this.props.onChange(editorState)
+  }
+
+  handleKeyCommand = (command, editorState) => {
+    const newState = RichUtils.handleKeyCommand(editorState, command)
+    if (newState) {
+      this.onChange(newState)
+      return true
+    }
+    return false
+  }
+
+  handleReturn = (event) => {
+    if (KeyBindingUtil.isSoftNewlineEvent(event)) {
+      const { onChange, editorState } = this.props
+      onChange(RichUtils.insertSoftNewline(editorState))
+      return 'handled'
+    }
+
+    return 'not-handled'
+  }
+
+  mapKeyToEditorCommand = (e) => {
+    if (e.keyCode === 9 /* TAB */) {
+      const newEditorState = RichUtils.onTab(
+        e,
+        this.props.editorState,
+        4 /* maxDepth */
+      )
+      if (newEditorState !== this.props.editorState) {
+        this.onChange(newEditorState)
+      }
+      return
+    }
+    return getDefaultKeyBinding(e)
+  }
+
+  toggleBlockType = (blockType) => {
+    this.onChange(RichUtils.toggleBlockType(this.props.editorState, blockType))
+  }
+
+  toggleInlineStyle = (inlineStyle) => {
+    this.onChange(
+      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?.startsWith(CUSTOM_STYLE_PREFIX_FONT_COLOR)) {
+        styles['color'] = styleName.split(CUSTOM_STYLE_PREFIX_FONT_COLOR)[1]
+      }
+      if (styleName?.startsWith(CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)) {
+        styles['backgroundColor'] = styleName.split(
+          CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR
+        )[1]
+      }
+      return styles
+    }, {})
+  }
+
+  toggleEnlarge = () => {
+    this.setState({ isEnlarged: !this.state.isEnlarged })
+  }
+
+  customStyleFn = (style) => {
+    return this.getCustomStyle(style)
+  }
+
+  blockStyleFn(block) {
+    const { editorState } = this.props
+
+    const entityKey = block.getEntityAt(0)
+    const entity = entityKey
+      ? editorState.getCurrentContent().getEntity(entityKey)
+      : null
+
+    let result = ''
+    const blockData = block.getData()
+    if (blockData) {
+      const textAlign = blockData?.get('textAlign')
+      if (textAlign === 'center') {
+        result += 'alignCenter '
+      } else if (textAlign === 'left') {
+        result += 'alignLeft '
+      }
+    }
+
+    switch (block.getType()) {
+      case 'header-two':
+      case 'header-three':
+      case 'header-four':
+      case 'blockquote':
+        result += 'public-DraftStyleDefault-' + block.getType()
+        break
+      case 'atomic':
+        if (entity.getData()?.alignment) {
+          // support all atomic block to set alignment
+          result += ' ' + entity.getData().alignment
+        }
+        break
+      default:
+        break
+    }
+    return result
+  }
+
+  blockRendererFn = (block) => {
+    const atomicBlockObj = atomicBlockRenderer(block)
+    if (atomicBlockObj) {
+      const 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,
+        })
+      }
+      const onEditFinish = ({
+        entityKey,
+        entityData,
+      }: {
+        entityKey?: string
+        entityData?: Record<string, unknown>
+      }) => {
+        if (entityKey) {
+          const oldContentState = this.props.editorState.getCurrentContent()
+          const newContentState = oldContentState.replaceEntityData(
+            entityKey,
+            entityData
+          )
+          this.onChange(
+            EditorState.set(this.props.editorState, {
+              currentContent: newContentState,
+            })
+          )
+        }
+
+        // Custom block interaction is finished.
+        // Therefore, we set readOnly={false} to
+        // make editor editable.
+        this.setState({
+          readOnly: false,
+        })
+      }
+
+      // `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,
+        getMainEditorReadOnly: () => this.state.readOnly,
+      }
+    }
+    return atomicBlockObj
+  }
+
+  render() {
+    let { editorState } = this.props
+
+    if (!(editorState instanceof EditorState)) {
+      editorState = EditorState.createEmpty(decorators)
+    }
+    const { isEnlarged, readOnly } = this.state
+
+    const entityType = this.getEntityType(editorState)
+    const customStyle = this.getCustomStyle(editorState.getCurrentInlineStyle())
+    return (
+      <DraftEditorContainer isEnlarged={isEnlarged}>
+        <DraftEditorWrapper>
+          <link
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+            rel="stylesheet"
+            type="text/css"
+          />
+          <link
+            href="https://storage.googleapis.com/static-readr-tw-dev/cdn/draft-js/rich-editor.css"
+            rel="stylesheet"
+            type="text/css"
+          />
+          <link
+            href="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.11.7/Draft.css"
+            rel="stylesheet"
+            type="text/css"
+          />
+          <link
+            href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+            rel="stylesheet"
+            type="text/css"
+          />
+          <DraftEditorControls>
+            <DraftEditorControlsWrapper>
+              <ButtonGroup>
+                <BlockStyleControls
+                  editorState={editorState}
+                  onToggle={this.toggleBlockType}
+                  readOnly={this.state.readOnly}
+                />
+              </ButtonGroup>
+              <ButtonGroup>
+                <InlineStyleControls
+                  editorState={editorState}
+                  onToggle={this.toggleInlineStyle}
+                  readOnly={this.state.readOnly}
+                />
+              </ButtonGroup>
+
+              <EnlargeButtonWrapper>
+                <CustomEnlargeButton
+                  onToggle={this.toggleEnlarge}
+                  isEnlarged={isEnlarged}
+                ></CustomEnlargeButton>
+              </EnlargeButtonWrapper>
+            </DraftEditorControlsWrapper>
+            <DraftEditorControlsWrapper>
+              <ButtonGroup>
+                <CustomLinkButton
+                  isActive={entityType === 'LINK'}
+                  editorState={editorState}
+                  onChange={this.onChange}
+                  readOnly={this.state.readOnly}
+                />
+              </ButtonGroup>
+              <ButtonGroup>
+                <CustomFontColorButton
+                  isActive={Object.prototype.hasOwnProperty.call(
+                    customStyle,
+                    'color'
+                  )}
+                  editorState={editorState}
+                  onChange={this.onChange}
+                  readOnly={this.state.readOnly}
+                />
+              </ButtonGroup>
+              <ButtonGroup>
+                <CustomDividerButton
+                  editorState={editorState}
+                  onChange={this.onChange}
+                ></CustomDividerButton>
+              </ButtonGroup>
+              <ButtonGroup>
+                <CustomAnnotationButton
+                  isActive={entityType === 'ANNOTATION'}
+                  editorState={editorState}
+                  onChange={this.onChange}
+                  readOnly={this.state.readOnly}
+                />
+              </ButtonGroup>
+              <ButtonGroup>
+                <CustomImageButton
+                  editorState={editorState}
+                  onChange={this.onChange}
+                  readOnly={this.state.readOnly}
+                  ImageSelector={ImageSelector}
+                />
+              </ButtonGroup>
+              <ButtonGroup>
+                <CustomSlideshowButton
+                  editorState={editorState}
+                  onChange={this.onChange}
+                  readOnly={this.state.readOnly}
+                  ImageSelector={ImageSelector}
+                />
+              </ButtonGroup>
+              <ButtonGroup>
+                <CustomInfoBoxButton
+                  editorState={editorState}
+                  onChange={this.onChange}
+                  readOnly={this.state.readOnly}
+                />
+              </ButtonGroup>
+              <ButtonGroup>
+                <CustomEmbeddedCodeButton
+                  editorState={editorState}
+                  onChange={this.onChange}
+                  readOnly={this.state.readOnly}
+                ></CustomEmbeddedCodeButton>
+              </ButtonGroup>
+              <ButtonGroup>
+                <CustomTableButton
+                  editorState={editorState}
+                  onChange={this.onChange}
+                  readOnly={this.state.readOnly}
+                ></CustomTableButton>
+              </ButtonGroup>
+            </DraftEditorControlsWrapper>
+            <DraftEditorControlsWrapper>
+              <ButtonGroup>
+                <CustomAlignLeftButton
+                  isActive={
+                    getSelectionBlockData(editorState, 'textAlign') === 'left'
+                  }
+                  editorState={editorState}
+                  onChange={this.onChange}
+                  readOnly={this.state.readOnly}
+                />
+              </ButtonGroup>
+              <ButtonGroup>
+                <CustomAlignCenterButton
+                  isActive={
+                    getSelectionBlockData(editorState, 'textAlign') === 'center'
+                  }
+                  editorState={editorState}
+                  onChange={this.onChange}
+                  readOnly={this.state.readOnly}
+                />
+              </ButtonGroup>
+              <ButtonGroup>
+                <CustomColorBoxButton
+                  editorState={editorState}
+                  onChange={this.onChange}
+                  readOnly={this.state.readOnly}
+                />
+              </ButtonGroup>
+              <ButtonGroup>
+                <CustomBackgroundColorButton
+                  isActive={Object.prototype.hasOwnProperty.call(
+                    customStyle,
+                    'backgroundColor'
+                  )}
+                  editorState={editorState}
+                  onChange={this.onChange}
+                  readOnly={this.state.readOnly}
+                />
+              </ButtonGroup>
+              <ButtonGroup>
+                <CustomBGImageButton
+                  editorState={editorState}
+                  onChange={this.onChange}
+                  readOnly={this.state.readOnly}
+                  ImageSelector={ImageSelector}
+                />
+              </ButtonGroup>
+              <ButtonGroup>
+                <CustomBGVideoButton
+                  editorState={editorState}
+                  onChange={this.onChange}
+                  readOnly={this.state.readOnly}
+                  VideoSelector={VideoSelector}
+                />
+              </ButtonGroup>
+              <ButtonGroup>
+                <CustomRelatedPostButton
+                  editorState={editorState}
+                  onChange={this.onChange}
+                  readOnly={this.state.readOnly}
+                  PostSelector={PostSelector}
+                />
+              </ButtonGroup>
+              <ButtonGroup>
+                <CustomSideIndexButton
+                  editorState={editorState}
+                  onChange={this.onChange}
+                  readOnly={this.state.readOnly}
+                />
+              </ButtonGroup>
+            </DraftEditorControlsWrapper>
+          </DraftEditorControls>
+          <TextEditorWrapper
+            onClick={() => {
+              // eslint-disable-next-line prettier/prettier
+              (this.refs.editor as HTMLElement)?.focus()
+            }}
+          >
+            <Editor
+              blockStyleFn={this.blockStyleFn.bind(this)}
+              blockRendererFn={this.blockRendererFn}
+              customStyleMap={this.customStyleMap}
+              customStyleFn={this.customStyleFn}
+              editorState={editorState}
+              handleKeyCommand={this.handleKeyCommand}
+              handleReturn={this.handleReturn}
+              keyBindingFn={this.mapKeyToEditorCommand}
+              onChange={this.onChange}
+              placeholder="Tell a story..."
+              ref="editor"
+              spellCheck={true}
+              readOnly={readOnly}
+            />
+          </TextEditorWrapper>
+        </DraftEditorWrapper>
+      </DraftEditorContainer>
+    )
+  }
+}
+
+type StyleButtonProps = {
+  active: boolean
+  label: string
+  onToggle: (string) => void
+  style: string
+  icon: string
+  readOnly: boolean
+}
+
+class StyleButton extends React.Component<StyleButtonProps> {
+  onToggle = (e) => {
+    e.preventDefault()
+    this.props.onToggle(this.props.style)
+  }
+
+  render() {
+    return (
+      <CustomButton
+        isActive={this.props.active}
+        onMouseDown={this.onToggle}
+        readOnly={this.props.readOnly}
+      >
+        {this.props.icon && <i className={this.props.icon}></i>}
+        <span>{!this.props.icon ? this.props.label : ''}</span>
+      </CustomButton>
+    )
+  }
+}
+
+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' },
+  { label: 'Code Block', style: 'code-block', icon: 'fas fa-code' },
+]
+
+const BlockStyleControls = (props) => {
+  const { editorState } = props
+  const selection = editorState.getSelection()
+  const blockType = editorState
+    .getCurrentContent()
+    .getBlockForKey(selection.getStartKey())
+    .getType()
+  return (
+    <React.Fragment>
+      {blockStyles.map((type) => (
+        <StyleButton
+          key={type.label}
+          active={type.style === blockType}
+          label={type.label}
+          onToggle={props.onToggle}
+          style={type.style}
+          icon={type.icon}
+          readOnly={props.readOnly}
+        />
+      ))}
+    </React.Fragment>
+  )
+}
+
+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 (
+    <React.Fragment>
+      {inlineStyles.map((type) => (
+        <StyleButton
+          key={type.label}
+          active={currentStyle.has(type.style)}
+          label={type.label}
+          onToggle={props.onToggle}
+          style={type.style}
+          icon={type.icon}
+          readOnly={props.readOnly}
+        />
+      ))}
+    </React.Fragment>
+  )
+}
+
+const DraftEditor = {
+  RichTextEditor,
+  decorators,
+}
+export default DraftEditor