{"size": 5636, "ext": "js", "max_stars_repo_path": "src/index.js", "max_stars_repo_name": "ahai3840/slate-editor", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/index.js", "max_issues_repo_name": "ahai3840/slate-editor", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/index.js", "max_forks_repo_name": "ahai3840/slate-editor", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.3982683983, "max_line_length": 107, "alphanum_fraction": 0.6195883605}
// @flow
import * as React from "react";
import { Editor } from "slate-react";
import type {Value, Change} from 'slate';
import styled from 'styled-components';
import Toolbar from './menuToolbar';
import toolbar from './plugins/slate-toolbar/index';
import {BLOCKS} from './plugins/slate-constant/src/index';
import Bold, {BoldPlugin} from './plugins/slate-icon-bold/src/index';
import Clean from './plugins/slate-icon-clean/src/index';
import {TablePlugin} from './plugins/slate-icon-table/src/index';
import { HeaderOnePlugin, HeaderTwoPlugin, HeaderThreePlugin} from './plugins/slate-icon-header/src/index';
import {ImagePlugin} from './plugins/slate-icon-image/src/index';
import {ListPlugin} from './plugins/slate-icon-list/src/index';
import Underline, {UnderlinePlugin} from './plugins/slate-icon-underline/src/index';
import {ParagraphPlugin} from './plugins/slate-icon-shared/src/index';

import { AlignCenter, AlignLeft, AlignRight } from './plugins/slate-icon-align/src/index';
import EditList from 'slate-edit-list';
import TrailingBlock from 'slate-trailing-block'
// default value
import {DEFAULT as DEFAULTLIST} from './plugins/slate-helper-block-list/src/index';

import "github-markdown-css";

const plugins = [
  TrailingBlock(),
  EditList(DEFAULTLIST),
  ParagraphPlugin(),
  BoldPlugin(),
  UnderlinePlugin(),
  HeaderOnePlugin(),
  HeaderTwoPlugin(),
  HeaderThreePlugin(),
  TablePlugin(),
  ImagePlugin(),
  ListPlugin(),
];

type Props = {
  readOnly: boolean,
  autoFocus: boolean,
  menuToolbarOption: {[string]: any}[],
  value: Value,
  onChange: (change: Change) => void,
  className: string,
  placeholderClassName: string,
  placeholder?: any,
  serviceConfig?: any,
  galleryConfig?: any
}

type EditorProps = {
  readOnly: boolean,
  autoFocus: boolean,
  value: Value,
  className: string,
  placeholderClassName: string,
  placeholder?: any,
  onChange: (change: Change) => void,
  serviceConfig?: any,
  galleryConfig?: any
}

type State = {
  isFull: boolean
}

const Container = styled.div`
  ${props => props.isFull && (`
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 99000
  `)}
  background-color: #FFF;
  height: 430px;
  padding-top: 40px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 1px 1px rgba(0,0,0,0.16);
  overflow-y: ${props => props.isFull ? 'scroll' : 'auto'};
  overflow-x: auto;
`

const EditorContainer = styled.div`
  padding: 25px;
  margin-top: ${props => props.isFull ? '60px' : '10px'};
`

const FixedToolbar = styled.div`
  position: fixed;
  top: 10px;
  z-index: 10;
  width: 100%;
`

const toolbarOptions = {
  icons: [
    Bold,
    Underline,
    AlignLeft, 
    AlignCenter,
    AlignRight,
    Clean,
  ],
  position: 'top',
  disabledTypes: [
    BLOCKS.CODE,
    BLOCKS.CODE_LINE,
    BLOCKS.HEADING_1,
    BLOCKS.HEADING_2,
    BLOCKS.HEADING_3,
    BLOCKS.HEADING_4,
    BLOCKS.HEADING_5,
    BLOCKS.HEADING_6
  ]
}


export default class EditorComponent extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);

    this.state = {
      isFull: false,
    };
  }

  goFull = () => {
    this.setState({ isFull: !this.state.isFull });
  }

  render() {
    const {
      value, 
      onChange, 
      serviceConfig, 
      galleryConfig, 
      menuToolbarOption, 
      readOnly, 
      placeholder,
      placeholderClassName,
      className,
      autoFocus,
      ...rest
    } = this.props;
    const {isFull} = this.state;
    return readOnly ? (
      <CannerEditor
        className={className}
        value={value} 
        onChange={arg => arg} 
        readOnly={readOnly} 
        placeholder={placeholder}
        autoFocus={autoFocus}
        placeholderClassName={placeholderClassName} />
      ) : (
      <Container isFull={isFull} {...rest}>
        {
          isFull ? (
            <FixedToolbar>
              <Toolbar
                isFull={true}
                value={value}
                serviceConfig={serviceConfig}
                galleryConfig={galleryConfig}
                menuToolbarOption={menuToolbarOption}
                onChange={onChange}
                goFull={this.goFull}/>
            </FixedToolbar>
          ) : (
            <Toolbar
              serviceConfig={serviceConfig}
              galleryConfig={galleryConfig}
              menuToolbarOption={menuToolbarOption}
              value={value}
              onChange={onChange}
              goFull={this.goFull}/>
          )
        }
        <EditorContainer isFull={isFull}>
          <CannerEditor
            className={className}
            value={value} 
            onChange={onChange} 
            readOnly={readOnly}
            placeholder={placeholder}
            autoFocus={autoFocus}
            placeholderClassName={placeholderClassName}
           />
        </EditorContainer>
      </Container>
    );
  }
}

@toolbar(toolbarOptions)
class CannerEditor extends React.Component<EditorProps> {

  shouldComponentUpdate(nextProps: EditorProps) {
    if (this.props.value === nextProps.value)
      return false
    return true
  }

  render() {
    const {
      value, 
      onChange, 
      readOnly, 
      placeholder,
      className,
      placeholderClassName,
      autoFocus
    } = this.props;
    return (
      <Editor 
        className={className?`markdown-body ${className}` :"markdown-body"}
        value={value}
        readOnly={readOnly}
        onChange={onChange}
        plugins={plugins}
        placeholder={placeholder}
        autoFocus={autoFocus}
        placeholderClassName={placeholderClassName}
        />
    )
  }
}
