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 } from "antd"; import BraftEditor from "braft-editor"; import styles from './index.less'; const stories = storiesOf("Editor", module); stories.addDecorator(storyFn => (
{storyFn()}
)); stories.addDecorator(withKnobs); stories.addDecorator(withInfo); stories.addDecorator(addReadme); stories.add( "BraftEditor", () => { return ; }, { info: { inline: true }, notes: "A very simple example of addon notes" } ); stories.add( "BraftEditorCommon", () => { const [editorState, setEditorState] = useState( BraftEditor.createEditorState("

Hello World!

") ); return ( <> ( { 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("

Hello World!

") ); return ( <> { 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 (
{icon} {text}
) }, }, { 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', }, "bottom")} toolBarContainerStyle={{ display: 'flex', justifyContent: 'space-between', height: '55px', alignItems: 'center', }} appendToolBtn={(
警告
} > Anonymous
Save
Submit
)} /> ); }, { info: { inline: true }, notes: "A very simple example of addon notes" } );