// https://www.yuque.com/braft-editor/be/lzwpnr#ecff77a8    富文本编辑器 简介说明

import React, { ReactElement } from 'react';
// 引入编辑器组件
import BraftEditor, { BraftEditorProps, EditorState } from 'braft-editor';
import 'braft-editor/dist/index.css';
import cx from 'classnames';
import './index.less';
import { FormItem } from '@formily/antd-v5';
import { Field } from '@formily/react';
import { IFieldProps } from '@formily/core';

interface Props extends BraftEditorProps {
  contentStyle?: { [props: string]: string | number };
  changeEditor?: (editorState: EditorState) => void;
}

const Editor: React.FC<Props> = (props) => {
  const {
    value = null,
    changeEditor,
    controls = [],
    excludeControls = [],
    extendControls = [],
    contentStyle = { width: 600, height: 120 },
    placeholder,
  } = props;

  const { width, height } = contentStyle;
  let myContentStyle = contentStyle
    ? contentStyle
    : {
        height: '120px',
        fontSize: '14px',
      };

  return (
    <div
      className={cx('editor')}
      style={{
        width,
        height,
      }}
    >
      <BraftEditor
        value={BraftEditor.createEditorState(value)}
        stripPastedStyles={true}
        contentStyle={myContentStyle}
        onBlur={(event: EditorState) => {
          if (changeEditor) {
            changeEditor(event.toHTML());
          }
        }}
        placeholder={placeholder}
        controls={controls} //控件列表
        excludeControls={excludeControls} //不展示的 控件列表
        extendControls={extendControls} //自定义控件
      />
    </div>
  );
};

interface P extends IFieldProps {
  name: string | [string, string];
  title?: string | ReactElement;
  validator?: any;
  [props: string]: any;
  decoratorProps?: {
    [props: string]: any;
  };
  componentProps?: {
    [props: string]: any;
  };
}

const BraftDeitor: React.FC<P> = (props) => {
  const { name, title, validator, decoratorProps, componentProps } = props;

  return (
    <div className={cx('editor_warp')}>
      <Field
        name={name}
        title={title}
        validator={validator}
        decorator={[FormItem, decoratorProps]}
        component={[Editor, componentProps]}
      />
    </div>
  );
};

export default BraftDeitor;