|
- import * as React from 'react'
- import * as PropTypes from 'prop-types'
- import {
- Container,
- MarkupButton,
- LinkButton,
- SectionSelect,
- AttributeSelect,
- 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 />
- </Container>
- )
- }
-
- return null
- }
-
- Editor.propTypes = propTypes
-
- export default Editor
|