bilingo-ui/stories/Editor.stories.tsx

import React, { useState } from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { withInfo } from "@storybook/addon-info";
import { withKnobs, number, boolean, select } from "@storybook/addon-knobs";
import { addReadme } from "storybook-readme";

import { BarftEditorPage } from "@components/Editor/BraftEditor";
import SimpleEditor from "@/components/Editor/ImgTxtEditor/SimpleEditor";
import { ControlsToolBar } from "@components/Editor/CommonTool/ControlsToolBar";
import { ContentUtils } from "braft-utils";

import EditorData from "./data/articleData.json";
import { Divider, Popover, Checkbox, Tooltip } from "antd";
import BraftEditor from "braft-editor";

import styles from './index.less';

const stories = storiesOf("Editor", module);
stories.addDecorator(storyFn => (
  <div style={{ padding: "0px 40px" }}>{storyFn()}</div>
));
stories.addDecorator(withKnobs);
stories.addDecorator(withInfo);
stories.addDecorator(addReadme);

stories.add(
  "BraftEditor",
  () => {
    return <BarftEditorPage initValue={EditorData.text} />;
  },
  {
    info: {
      inline: true
    },
    notes: "A very simple example of addon notes"
  }
);

stories.add(
  "BraftEditorCommon",
  () => {
    const [editorState, setEditorState] = useState(
      BraftEditor.createEditorState("<p>Hello <b>World!</b></p>")
    );
    return (
      <>
        <BarftEditorPage
          value={editorState}
          onChange={setEditorState}
          controls={["bold"]}
          FloatControls={({ editorState, setEditorState }: any) => (
            <ControlsToolBar
              editorState={editorState}
              setEditorState={setEditorState}
              toolList={[
                {
                  key: 1,
                  color: "#f07977",
                  iconClass: "schedule schedule-icon_story",
                  onClick: () => {
                    setEditorState(
                      ContentUtils.insertText(editorState, "Hello World")
                    );
                  }
                },
                {
                  key: 2,
                  color: "#3d9bfe",
                  iconClass: "schedule schedule-icon_topic",
                  onClick: () => {
                    setEditorState(
                      ContentUtils.insertText(editorState, "Hello World")
                    );
                  }
                },
                {
                  key: 3,
                  color: "#ffa405",
                  iconClass: "schedule schedule-icon_emoticon",
                  onClick: () => {
                    setEditorState(
                      ContentUtils.insertText(editorState, "Hello World")
                    );
                  }
                },
                {
                  key: 4,
                  color: "#71c135",
                  iconClass: "schedule schedule-icon_img",
                  onClick: () => {
                    setEditorState(
                      ContentUtils.insertText(editorState, "Hello World")
                    );
                  }
                }
              ]}
            />
          )}
        />
      </>
    );
  },
  {
    info: {
      inline: true
    },
    notes: "A very simple example of addon notes"
  }
);

stories.add(
  "SimpleEditor",
  () => {
    const [editorState, setEditorState] = useState(
      BraftEditor.createEditorState("<p>Hello <b>World!</b></p>")
    );
    return (
      <>
        <SimpleEditor
          value={editorState}
          onChange={setEditorState}
          controls={[]}
          injectBraftEditorProps={{
            contentStyle: {
              height: '130px'
            },
          }}
          toolList={[
            {
              key: 1,
              color: "#f07977",
              text: "长文",
              iconClass: "schedule schedule-icon_story",
              onClick: () => {
                setEditorState(
                  ContentUtils.insertText(editorState, "Hello World")
                );
              },
            },
            {
              key: 2,
              color: "#3d9bfe",
              text: "话题",
              iconClass: "schedule schedule-icon_topic",
              onClick: () => {
                setEditorState(
                  ContentUtils.insertText(editorState, "Hello World")
                );
              }
            },
            {
              key: 3,
              color: "#ffa405",
              text: "表情",
              iconClass: "schedule schedule-icon_emoticon",
              onClick: () => {
                setEditorState(
                  ContentUtils.insertText(editorState, "Hello World")
                );
              },
              render: (i, icon, text, style) => {
                return (
                  <Popover
                    trigger="click"
                    content="123"
                  >
                    <div style={style}>
                      {icon}
                      {text}
                    </div>
                  </Popover>
                )
              },
            },
            {
              key: 4,
              color: "#71c135",
              text: "图片",
              iconClass: "schedule schedule-icon_img",
              onClick: () => {
                setEditorState(
                  ContentUtils.insertText(editorState, "Hello World")
                );
              }
            }
          ]}
          injectControlsToolBar={{
            injectIconWrapStyle: {
              marginRight: "4px"
            }
          }}
          toolAlign={select("toolAlign", {
            Inner: 'inner',
            Bottom: 'bottom',
            Both: 'both',
          }, "bottom")}
          toolBarContainerStyle={{
            display: 'flex',
            justifyContent: 'space-between',
            height: '55px',
            alignItems: 'center',
          }}
          appendToolBtn={(
            <div style={{ display: 'flex', alignItems: 'center', width: '400px', justifyContent: 'space-between'}}>
              <div className={styles.QAAnonymous}>
                <Popover
                  trigger="hover"
                  content={
                    <div>
                      警告
                    </div>
                  }
                >
                  <Checkbox>
                    Anonymous
                  </Checkbox>
                </Popover>
              </div>
              <div
                className={styles.QASaveBtn}
              >
                Save
              </div>
              <div
                className={styles.QASubmitBtn}
              >
                Submit
              </div>
            </div>
          )}
          appendInnderBar={(
            <div><Tooltip visible={true} title="123">123</Tooltip></div>
          )}
        />
      </>
    );
  },
  {
    info: {
      inline: true
    },
    notes: "A very simple example of addon notes"
  }
);