zeichen-legacy/packages/app/src/components/Editor/Editor.tsx

import * as React from 'react'
import * as PropTypes from 'prop-types'
import {
  Container,
  MarkupButton,
  LinkButton,
  SectionButton,
  Editor as MobileDocEditor,
} from 'react-mobiledoc-editor'
import { Bold, Italic, Code, List, Link, MessageCircle, } from 'react-feather'
import styled from 'styled-components'

const ToolbarWrapper = styled('div')({
  display: 'flex',
  gap: '1rem',
})

const ToolbarItem = styled('div')({
  display: 'block',
})

const StyledMarkupButton = styled(MarkupButton)({
  border: 0,
  background: 'transparent',
  width: '2rem',
  height: '2rem',
  font: 'inherit',
  padding: 0,
  outline: 0,
})

const StyledLinkButton = styled(LinkButton)({
  border: 0,
  background: 'transparent',
  width: '2rem',
  height: '2rem',
  font: 'inherit',
  padding: 0,
  outline: 0,
})

const StyledSectionButton = styled(SectionButton)({
  border: 0,
  background: 'transparent',
  width: '2rem',
  height: '2rem',
  font: 'inherit',
  fontFamily: 'monospace',
  fontSize: '1.75rem',
  lineHeight: 0,
  padding: 0,
  outline: 0,
})

const propTypes = {
  onChange: PropTypes.func,
  cards: PropTypes.array,
  atoms: PropTypes.array,
  content: PropTypes.object,
  placeholder: PropTypes.string,
  autoFocus: PropTypes.bool,
}

type Props = PropTypes.InferProps<typeof propTypes>

const Editor: React.FC<Props> = ({
  onChange,
  cards = [],
  atoms = [],
  content,
  placeholder,
  autoFocus,
}) => {
  const [isClient, setIsClient, ] = React.useState(false)
  const editorRef = React.useRef(null)

  const handleInitialize = e => {
    editorRef.current = e
  }

  React.useEffect(() => {
    setIsClient(true)
  }, [])

  if (isClient) {
    return (
      <Container
        autofocus={autoFocus}
        onChange={onChange}
        cards={[
          ...cards,
        ]}
        atoms={[
          ...atoms,
        ]}
        mobiledoc={content}
        placeholder={placeholder}
        didCreateEditor={handleInitialize}
      >
        <ToolbarWrapper>
          <ToolbarItem>
            <StyledMarkupButton tag="strong">
              <Bold />
            </StyledMarkupButton>
          </ToolbarItem>
          <ToolbarItem>
            <StyledMarkupButton tag="em">
              <Italic />
            </StyledMarkupButton>
          </ToolbarItem>
          <ToolbarItem>
            <StyledMarkupButton tag="code">
              <Code />
            </StyledMarkupButton>
          </ToolbarItem>
          <ToolbarItem>
            <StyledLinkButton>
              <Link />
            </StyledLinkButton>
          </ToolbarItem>
          {/*<ToolbarItem><SectionSelect tags={["h1", "h2", "h3"]} /></ToolbarItem>*/}
          {/*<ToolbarItem><AttributeSelect attribute="text-align" values={["left", "center", "right"]} /></ToolbarItem>*/}
          <ToolbarItem>
            <StyledSectionButton tag="blockquote">
              <MessageCircle />
            </StyledSectionButton>
          </ToolbarItem>
          <ToolbarItem>
            <StyledSectionButton tag="ul">
              <List />
            </StyledSectionButton>
          </ToolbarItem>
          <ToolbarItem><StyledSectionButton tag="ol">1.</StyledSectionButton></ToolbarItem>
        </ToolbarWrapper>
        <MobileDocEditor
          style={{
            color: 'inherit',
          }}
        />
      </Container>
    )
  }

  return null
}

Editor.propTypes = propTypes

export default Editor