refactor(admin): extract editor sidebar

apps/admin/src/common/wangeditor-customer/shell/EditorSidebar.jsx

+import { Button } from 'antd'
+import { Toolbar } from '@wangeditor/editor-for-react'
+
+const tabs = [
+  { key: 'text', title: '文本设置' },
+  { key: 'style', title: '样式模版' },
+]
+
+export const EditorSidebar = ({ editor, toolbarConfig, toolbarRef, tabKey, onTabChange, colorList, onApplyColor }) => <div className="menu-tabs-key">
+  <div className="tabs">
+    {tabs.map(item => <div className={`tabs-item ${item.key === tabKey ? 'active' : ''}`} key={item.key} onClick={() => onTabChange(item.key)}>{item.title}<span /></div>)}
+  </div>
+  <div className="menu-tabs-content">
+    {tabKey === 'text' && <div ref={toolbarRef} className="toolbox-parent"><Toolbar editor={editor} defaultConfig={toolbarConfig} mode="default" className="editor-toolbar-container" /></div>}
+    {tabKey === 'style' && <div className="styletem"><p>样式模板</p><ul>{colorList.map(item => <li key={item.color}><div className="left"><span className="color" style={{ backgroundColor: item.color }} /><b className="type">{item.name}</b></div><Button type="link" className="use" onClick={() => onApplyColor(item.color)}>使用</Button></li>)}</ul></div>}
+  </div>
+</div>

apps/admin/src/common/wangeditor-customer/shell/WangEditorCustomer.jsx

@@ -40,16 +40,12 @@ import PracticeSettingModal from "../features/practice/PracticeSettingsDialog";
 import PreviewModal from "../features/preview/PreviewDialog";
 import HistoryModal from "../features/history/HistoryDialog";
 import { EditorHeader } from './EditorHeader'
+import { EditorSidebar } from './EditorSidebar'
 
 import "../index.less";
 
 registerEditorFeatures(Boot);
 
-const tabsMenu = [
-  { key: "text", title: "文本设置" },
-  { key: "style", title: "样式模版" },
-];
-
 
 const WangEditorCustomer = (props, ref) => {
   const {
@@ -590,58 +586,7 @@ const WangEditorCustomer = (props, ref) => {
           style={{ height: "calc(100vh - 250px)", overflowY: "hidden" }}
         />
       </div>
-      {!isView && (
-        <div className="menu-tabs-key">
-          <div className="tabs">
-            {tabsMenu &&
-              tabsMenu.length &&
-              tabsMenu.map((item) => {
-                return (
-                  <div
-                    className={`tabs-item ${item.key === tabKey ? "active" : ""}`}
-                    key={item.key}
-                    onClick={() => tabKeyChange(item.key)}
-                  >
-                    {item.title}
-                    <span></span>
-                  </div>
-                );
-              })}
-          </div>
-          <div className="menu-tabs-content">
-            {tabKey === "text" && (
-              <div ref={toolbarRef} className="toolbox-parent">
-                <Toolbar
-                  editor={editor}
-                  defaultConfig={toolbarConfig}
-                  mode="default"
-                  className="editor-toolbar-container"
-                ></Toolbar>
-              </div>
-            )}
-            {tabKey === "style" && (
-              <div className="styletem">
-                <p>样式模板</p>
-                <ul>
-                  {colorList.map((item) => {
-                    return (
-                      <li key={item.color}>
-                        <div className="left">
-                          <span className="color" style={{ backgroundColor: item.color }}></span>
-                          <b className="type">{item.name}</b>
-                        </div>
-                        <Button type="link" className="use" onClick={() => setColor(item.color)}>
-                          使用
-                        </Button>
-                      </li>
-                    );
-                  })}
-                </ul>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
+      {!isView && <EditorSidebar editor={editor} toolbarConfig={toolbarConfig} toolbarRef={toolbarRef} tabKey={tabKey} onTabChange={tabKeyChange} colorList={colorList} onApplyColor={setColor} />}
       <Modal
         open={imageVisible}
         footer={null}