dev: 开发图文简单富文本编辑嘴贱

src/components/Editor/BraftEditor/index.tsx

@@ -36,19 +36,19 @@ const emotionOptions = {
 
 BraftEditor.use(Emoticon(emotionOptions));
 
+export interface BaseEditorProps {
+  value: EditorState;
+  onChange: (editorState: EditorState) => void;
+  controls?: ControlType[];
+  FloatControls?: any;
+}
+
 export const BarftEditorPage = ({
-  initValue,
   value,
   onChange,
   controls,
   FloatControls
-}: {
-  initValue?: string;
-  value?: EditorState;
-  onChange?: (editorState: EditorState) => void;
-  controls?: ControlType[];
-  FloatControls?: any;
-}) => {
+}: BaseEditorProps) => {
   const optionsControls = controls
     ? controls
     : [
@@ -63,33 +63,18 @@ export const BarftEditorPage = ({
       ];
   const options: any = {
     controls: optionsControls,
-    uncontrolled: !value && !onChange,
     showControlsBar:
       optionsControls && optionsControls.length > 0 && !FloatControls,
     showFloatControls: FloatControls
   };
 
-  const [insideValue, setInsideValue] = useState(
-    BraftEditor.createEditorState(initValue || "<p>Hello <b>World!</b></p>")
-  );
-
   const [focusState, setFocusState] = useState(false);
 
-  let resultValue: EditorState | undefined;
-  let resultAction: ((editorState: EditorState) => void) | undefined;
-  if (options.uncontrolled) {
-    resultValue = insideValue;
-    resultAction = setInsideValue;
-  } else {
-    resultValue = value;
-    resultAction = onChange;
-  }
-
   return (
     <div className={styles.baseWrapper}>
       <BraftEditor
-        value={resultValue}
-        onChange={resultAction}
+        value={value}
+        onChange={onChange}
         controls={options.controls}
         controlBarClassName={classnames(styles.controlBar, {
           [styles.focus]: focusState
@@ -113,8 +98,8 @@ export const BarftEditorPage = ({
         <div className={classnames(styles.floatControls)}>
           {
             <FloatControls
-              editorState={resultValue}
-              setEditorState={resultAction}
+              editorState={value}
+              setEditorState={onChange}
             />
           }
         </div>

src/components/Editor/CommonTool/ControlsToolBar.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { EditorState } from "braft-editor";
+
+export interface ToolListItem {
+  key: any;
+  color: string;
+  iconClass: string;
+  onClick: any;
+  text?: string;
+};
+interface ControlsToolBarProps {
+  editorState: EditorState;
+  setEditorState: any;
+  toolList: Array<ToolListItem>;
+  injectIconWrapStyle?: any;
+  injectIconStyle?: any;
+}
+
+export const ControlsToolBar = (props: ControlsToolBarProps) => {
+  const {
+    editorState,
+    setEditorState,
+    toolList = [],
+    injectIconWrapStyle = {},
+    injectIconStyle = {},
+  } = props;
+  const IconWrapStyle = {
+    cursor: "pointer",
+    textAlign: "center" as const,
+    width: "42px",
+    ...injectIconWrapStyle,
+  };
+  const IconStyle = { fontSize: "21px", ...injectIconStyle };
+
+  if (toolList.length < 1) {
+    return null;
+  }
+
+  return (
+    <>
+    {
+      toolList.map(i => (
+        <div
+          key={`toolList_${i.key}`}
+          style={{ color: i.color, ...IconWrapStyle }}
+          onClick={i.onClick}
+        >
+          <i className={i.iconClass} style={IconStyle} />
+        </div>
+      ))
+    }
+    </>
+  );
+};

src/components/Editor/QAEditor/SimpleEditor.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { BarftEditorPage, BaseEditorProps } from "@components/Editor/BraftEditor";
+import { ControlsToolBar, ToolListItem } from "@components/Editor/CommonTool/ControlsToolBar";
+import { ContentUtils } from "braft-utils";
+import styles from './index.less';
+
+interface QASimpleEditorProps extends BaseEditorProps {
+  toolAlign?: 'inner' | 'bottom';
+  toolList?: Array<ToolListItem>;
+  toolBarContainerStyle?: any;
+  appendToolBtn?: any;
+}
+
+const QASimpleEditor = (props: QASimpleEditorProps) => {
+  const {
+    value,
+    onChange, 
+    toolAlign = 'inner',
+    toolList = [],
+    toolBarContainerStyle = {},
+    appendToolBtn = null,
+  } = props;
+
+
+  if (toolAlign === 'inner') {
+    return (
+      <BarftEditorPage
+        value={value}
+        onChange={onChange}
+        controls={[]}
+        FloatControls={({ editorState, setEditorState }: any) => (
+          <ControlsToolBar
+            editorState={editorState}
+            setEditorState={setEditorState}
+            toolList={toolList}
+          />)
+        }
+      />
+    )
+  }
+
+  return (
+    <div>
+      <BarftEditorPage
+        value={value}
+        onChange={onChange}
+        controls={[]}
+      />
+      <div style={toolBarContainerStyle}>
+        <div className={styles.bottomToolBarWrapper}>
+          <ControlsToolBar
+            editorState={value}
+            setEditorState={onChange}
+            toolList={toolList}
+          />
+        </div>
+        {appendToolBtn}
+      </div>
+    </div>
+  );
+}
+
+export default QASimpleEditor;

src/components/Editor/QAEditor/index.less

@@ -0,0 +1,3 @@
+.bottomToolBarWrapper {
+  display: flex;
+}

src/components/Editor/TextInputLogic/index.ts

@@ -0,0 +1,2 @@
+import { useState } from 'react';
+import BraftEditor, { ControlType, EditorState } from "braft-editor";

stories/Editor.stories.tsx

@@ -6,12 +6,16 @@ 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/QAEditor/SimpleEditor";
+import { ControlsToolBar } from "@components/Editor/CommonTool/ControlsToolBar";
 import { ContentUtils } from "braft-utils";
 
 import EditorData from "./data/articleData.json";
-import { Divider, Popover } from "antd";
+import { Divider, Popover, Checkbox } 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>
@@ -41,54 +45,162 @@ stories.add(
     );
     return (
       <>
-        <h3>非受控组件</h3>
-        <BarftEditorPage controls={[]} />
-        <Divider />
-        <h3>受控组件</h3>
         <BarftEditorPage
           value={editorState}
           onChange={setEditorState}
           controls={["bold"]}
-          FloatControls={({ editorState, setEditorState }: any) => {
-            const IconWrapStyle = {
-              cursor: "pointer",
-              textAlign: "center" as const,
-              width: "42px"
-            };
-            const IconStyle = { fontSize: "21px" };
-            return (
-              <>
-                <div
-                  style={{ color: "#f07977", ...IconWrapStyle }}
-                  onClick={() => {
+          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")
                     );
-                  }}
-                >
-                  <i
-                    className="schedule schedule-icon_story"
-                    style={IconStyle}
-                  />
-                </div>
-                <div style={{ ...IconWrapStyle, color: "#3d9bfe" }}>
-                  <i
-                    className="schedule schedule-icon_topic"
-                    style={IconStyle}
-                  />
-                </div>
-                <div style={{ ...IconWrapStyle, color: "#ffa405" }}>
-                  <i
-                    className="schedule schedule-icon_emoticon"
-                    style={IconStyle}
-                  />
-                </div>
-                <div style={{ ...IconWrapStyle, color: "#71c135" }}>
-                  <i className="schedule schedule-icon_img" style={IconStyle} />
-                </div>
-              </>
-            );
+                  }
+                },
+                {
+                  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(
+  "QASimpleEditor",
+  () => {
+    const [editorState, setEditorState] = useState(
+      BraftEditor.createEditorState("<p>Hello <b>World!</b></p>")
+    );
+    return (
+      <>
+        <SimpleEditor
+          value={editorState}
+          onChange={setEditorState}
+          controls={[]}
+          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")
+                );
+              }
+            }
+          ]}
+          toolAlign={select("toolAlign", {
+            Inner: 'inner',
+            Bottom: 'bottom',
+          }, "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>
+          )}
         />
       </>
     );
@@ -100,3 +212,4 @@ stories.add(
     notes: "A very simple example of addon notes"
   }
 );
+

stories/index.less

@@ -0,0 +1,28 @@
+.QASubmitBtn {
+  width: 140px;
+  height: 40px;
+  line-height: 40px;
+  background: rgba(113, 193, 53, 1);
+  border-radius: 4px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
+  text-align: center;
+  cursor: pointer;
+}
+
+.QASaveBtn {
+  font-size: 16px;
+  width: 91px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  border-radius: 4px;
+  color: rgba(113, 193, 53, 1);
+  border: 1px solid rgba(113, 193, 53, 1);
+  cursor: pointer;
+}
+
+.QAAnonymous {
+  font-size: 16px;
+}