addon.ts

    1. // 需要引入的插件
    2. import "codemirror/addon/search/searchcursor.js";
    3. import "codemirror/addon/search/search.js";
    4. import "codemirror/addon/scroll/annotatescrollbar.js";
    5. import "codemirror/addon/search/matchesonscrollbar.js";
    6. import "codemirror/addon/search/jump-to-line.js";
    7. import "codemirror/addon/dialog/dialog.js";
    8. import "codemirror/mode/groovy/groovy";
    9. import "codemirror/mode/javascript/javascript";
    10. import "codemirror/addon/dialog/dialog.css";
    11. import "codemirror/addon/search/matchesonscrollbar.css";
    13. /** 主题 */
    14. import "codemirror/theme/eclipse.css";

    variable.less

    1. @color: #f9fafc;
    2. @nz-code-prefix-cls: ~"nz-code";
    4. @nz-code-content-prefix-cls: ~"@{nz-code-prefix-cls}-content";
    5. @nz-code-toolbar-prefix-cls: ~"@{nz-code-prefix-cls}-toolbar";
    7. @toolbar-default-height: 32px;
    8. @default-font-size: 12px;

    index.less

    1. @import './codemirror.less';
    2. @import './toolbar.less';
    3. // @import './eclipse.less';
    4. // @import './default.less';

    .toolbar.less

    1. @import "./variable.less";
    3. .@{nz-code-toolbar-prefix-cls} {
    4.   position: absolute;
    5.   top: 0;
    6.   right: 0;
    7.   bottom: 0;
    8.   left: 0;
    9.   z-index: 10;
    10.   display: flex;
    11.   align-items: center;
    12.   width: 100%;
    13.   height: @toolbar-default-height;
    14.   padding: 0 12px;
    15.   line-height: @toolbar-default-height;
    16.   background-color: @color;
    17.   border: 1px solid rgba(216, 216, 216, 1);
    19.   &-both {
    20.     justify-content: space-between;
    22.     .ant-space {
    23.       justify-content: flex-end;
    24.     }
    25.   }
    27.   &-extra {
    28.     display: inline-block;
    29.   }
    31.   .ant-space {
    32.     flex: 0 0 100px;
    33.   }
    35.   .anticon {
    36.     cursor: pointer;
    37.   }
    38. }

    config.ts

    1. export default {
    2.   lineNumbers: true,
    3.   styleActiveLine: true,
    4.   lineWrapping: true,
    5.   value: "",
    6.   theme: "eclipse",
    7.   foldGutter: true,
    8.   readOnly: false,
    9.   smartIndent: true,
    10.   mode: "text/x-groovy",
    11.   matchBrackets: true,
    12.   autoCloseBrackets: true,
    13.   showCursorWhenSelecting: true,
    14.   highlightSelectionMatches: {
    15.     showToken: /\w/,
    16.     annotateScrollbar: true,
    17.   },
    18.   indentUnit: 2,
    19.   tabSize: 2,
    20.   autofocus: true,
    21. } as CodeMirror.EditorConfiguration;
    1. // context.ts
    2. import { useContext, createContext } from '@alipay/bigfish/react';
    3. import { CodeEditorContextProps } from './interface';
    5. export const CodeEditorContext = createContext<CodeEditorContextProps>({
    6.   ints: null,
    7. });
    9. export const useCodeEditor = () => useContext(CodeEditorContext);
    1. // index.tsx
    2. import React, {
    3.   FC,
    4.   useRef,
    5.   useMemo,
    6.   useState,
    7.   useEffect,
    8.   useCallback,
    9. } from "@alipay/bigfish/react";
    10. import { Spin } from "@alipay/bigfish/antd";
    11. import cs from "@alipay/bigfish/util/classnames";
    12. import { useFullscreen } from "ahooks";
    13. import CodeMirror from "codemirror";
    14. import { ErrorBoundary } from "@alipay/360-components";
    16. import ToolBar from "./component/ToolBar";
    18. import "./addon";
    19. import baseConfig from "./config";
    20. import { CodeEditorProps } from "./interface";
    21. import { CodeEditorContext } from "./context";
    23. import "./style/index.less";
    25. const CodeEditor: FC<CodeEditorProps> = React.memo<CodeEditorProps>((props) => {
    26.   const textRef = useRef<HTMLTextAreaElement>(null);
    27.   const fullRef = useRef<HTMLDivElement | null>(null);
    28.   const [ints, setInts] = useState<CodeMirror.Editor | null>(null);
    29.   const intsRef = useRef<CodeMirror.Editor | null>(null);
    30.   const [isFullscreen, { toggleFull }] = useFullscreen(fullRef);
    32.   const {
    33.     style,
    34.     onLoaded,
    35.     toolbar,
    36.     className,
    37.     spinning,
    38.     value,
    39.     extra,
    40.     options,
    41.     onChange,
    42.   } = props;
    44.   const config = useMemo(() => {
    45.     return {
    46.       ...baseConfig,
    47.       value,
    48.     };
    49.   }, [value]);
    51.   const onTextChange = useCallback(
    52.     (cm: CodeMirror.Editor, _changeObj: CodeMirror.EditorChangeLinkedList) => {
    53.       const localValue = cm.getDoc().getValue();
    55.       if (typeof onChange === "function" && "value" in props) {
    56.         onChange(localValue);
    57.       }
    58.     },
    59.     [onChange]
    60.   );
    62.   const initCodeInts = useCallback(() => {
    63.     if (textRef.current) {
    64.       const codeInts = CodeMirror.fromTextArea(
    65.         textRef.current as HTMLTextAreaElement,
    66.         config
    67.       );
    68.       if (typeof onLoaded === "function") {
    69.         onLoaded(codeInts);
    70.       }
    71.       setInts(codeInts);
    72.       intsRef.current = codeInts;
    73.       intsRef.current.defaultTextHeight();
    74.       intsRef.current.on("change", onTextChange);
    75.     }
    76.   }, [textRef, config]);
    78.   useEffect(() => {
    79.     const localValue = ints?.getDoc()?.getValue();
    80.     const cursor: any = ints?.getDoc().getCursor();
    81.     if (value && value !== localValue) {
    82.       ints?.setValue(value);
    83.       ints?.setCursor(cursor);
    84.     }
    85.   }, [value]);
    87.   useEffect(() => {
    88.     if (textRef.current) {
    89.       initCodeInts();
    90.     }
    92.     return () => {
    93.       intsRef.current?.off("change", onTextChange);
    94.     };
    95.   }, [textRef, intsRef]);
    97.   /** options merge */
    98.   useEffect(() => {
    99.     if (
    100.       ints &&
    101.       options &&
    102.       Object.prototype.toString.call(options) === "[object Object]"
    103.     ) {
    104.       (Object.keys(
    105.         options
    106.       ) as (keyof CodeMirror.EditorConfiguration)[]).forEach((key) => {
    107.         if (ints?.getOption(key) !== options[key]) {
    108.           ints.setOption(key, options[key]);
    109.         }
    110.       });
    111.     }
    112.   }, [props.options, ints]);
    114.   const backToTop = useCallback(() => {
    115.     if (intsRef.current) {
    116.       intsRef.current?.scrollTo?.(0, 0);
    117.     }
    118.   }, [intsRef]);
    120.   const cls = useMemo(() => cs("nz-code", className), [className]);
    122.   const renderToolBar = useCallback(() => {
    123.     if (!toolbar && !extra) return null;
    124.     if (typeof toolbar === "boolean" && toolbar) {
    125.       const toolbarCls = extra
    126.         ? "nz-code-toolbar nz-code-toolbar-both"
    127.         : "nz-code-toolbar";
    128.       return (
    129.         <div className={toolbarCls}>
    130.           {extra && <div className="nz-code-toolbar-extra">{extra}</div>}
    131.           <ToolBar
    132.             backToTop={backToTop}
    133.             toggleFull={toggleFull}
    134.             isFullscreen={isFullscreen}
    135.           />
    136.         </div>
    137.       );
    138.     }
    139.     return (
    140.       <div className="nz-code-toolbar">
    141.         <ToolBar toggleFull={toggleFull} isFullscreen={isFullscreen} />
    142.       </div>
    143.     );
    144.   }, [toolbar, extra]);
    146.   return (
    147.     <ErrorBoundary title="代码编辑有误!">
    148.       <CodeEditorContext.Provider value={{ ints }}>
    149.         <div className={cls} style={style} ref={fullRef}>
    150.           <Spin className="nz-code-content" spinning={spinning}>
    151.             <textarea ref={textRef} autoComplete="off" defaultValue={value} />
    152.           </Spin>
    153.           {renderToolBar()}
    154.           {props.children}
    155.         </div>
    156.       </CodeEditorContext.Provider>
    157.     </ErrorBoundary>
    158.   );
    159. });
    161. CodeEditor.defaultProps = {
    162.   spinning: false,
    163.   toolbar: true,
    164. };
    165. export { useCodeEditor } from "./context";
    167. export default CodeEditor;
    1. // interface.ts
    2. import { ReactNode } from '@alipay/bigfish/react';
    3. export interface CodeEditorContextProps {
    4.   ints: CodeMirror.Editor | null;
    5. }
    7. export interface RenderToolbar {
    8.   (): JSX.Element;
    9. }
    11. export interface ToolbarConfig {
    12.   /** 全屏 */
    13.   fullScreen?: boolean;
    14.   /** 切换主题 */
    15.   theme?: boolean;
    16.   /** 简单配置 */
    17.   setting?: boolean;
    18.   /** 回到顶部 */
    19.   top?: boolean;
    20. }
    22. export interface CodeEditorProps {
    23.   spinning?: boolean;
    24.   className?: string;
    25.   value?: string;
    26.   style?: React.CSSProperties;
    27.   /** 自定义配置 */
    28.   options?: CodeMirror.EditorConfiguration;
    29.   onChange?(val?: string): void;
    30.   /** 初始化完成 */
    31.   onLoaded?(editor: CodeMirror.Editor): void;
    32.   children?: JSX.Element | JSX.Element[];
    33.   toolbar?: boolean | RenderToolbar | ToolbarConfig;
    34.   /** 工具栏其他辅助操作 */
    35.   extra?: ReactNode;
    36. }