代码编辑器 (CodeEditor) #

interface CodeEditorProps {
  value?: string
  language?: string
  readOnly?: boolean
  onRef?: (ref: EditorRefs) => void
}

interface EditorRefs {
  onChangeValue: (listener: (value: string) => void) => void,
  onChangeModelContent: (listener: (event: {
    changes: {
      range: {
        startLineNumber: number,
        startColumn: number,
        endLineNumber: number,
        endColumn: number,
      },
      rangeOffset: number,
      rangeLength: number,
      text: string,
    }[],
    eol: string,
    versionId: number,
    isUndoing: boolean,
    isRedoing: boolean,
    isFlush: boolean,
  }) => void) => void,
  onChangeModelDecorations: (listener: (event: {
    affectsMinimap: boolean,
    affectsOverviewRuler: boolean,
  }) => void) => void,
  onChangeModelLanguage: (listener: (event: {
    oldLanguage: string,
    newLanguage: string,
  }) => void) => void,
  onChangeCursorPosition: (listener: (event: {
    position: {
      lineNumber: number,
      column: number,
    },
    secondaryPositions: {
      lineNumber: number,
      column: number,
    }[],
    reason: number,
    source: string,
  }) => void) => void,
  onChangeCursorSelection: (listener: (event: {
    selection: {
      selectionStartLineNumber: number,
      selectionStartColumn: number,
      positionLineNumber: number,
      positionColumn: number,
    },
    secondarySelections: {
      selectionStartLineNumber: number,
      selectionStartColumn: number,
      positionLineNumber: number,
      positionColumn: number,
    }[],
    modelVersionId: number,
    oldSelections: {
      selectionStartLineNumber: number,
      selectionStartColumn: number,
      positionLineNumber: number,
      positionColumn: number,
    }[] | null,
    oldModelVersionId: number,
    source: string,
    reason: number,
  }) => void) => void,
  onChangeHiddenAreas: (listener: () => void) => void,
  onBlurEditorText: (listener: () => void) => void,
  onBlurEditorWidget: (listener: () => void) => void,
  onFocusEditorText: (listener: () => void) => void,
  onFocusEditorWidget: (listener: () => void) => void,
  onAttemptReadOnlyEdit: (listener: () => void) => void,
  onCompositionStart: (listener: () => void) => void,
  onCompositionEnd: (listener: () => void) => void,
  onContentSizeChange: (listener: (event: {
    contentWidth: number,
    contentHeight: number,
    contentWidthChanged: boolean,
    contentHeightChanged: boolean,
  }) => void) => void,
  onLayoutChange: (listener: (event: {
    width: number,
    height: number,
    glyphMarginLeft: number,
    glyphMarginWidth: number,
    lineNumbersLeft: number,
    lineNumbersWidth: number,
    decorationsLeft: number,
    decorationsWidth: number,
    contentLeft: number,
    contentWidth: number,
    minimap: {
      renderMinimap: number,
      minimapLeft: number,
      minimapWidth: number,
      minimapHeightIsEditorHeight: boolean,
      minimapIsSampling: boolean,
      minimapScale: number,
      minimapLineHeight: number,
      minimapCanvasInnerWidth: number,
      minimapCanvasInnerHeight: number,
      minimapCanvasOuterWidth: number,
      minimapCanvasOuterHeight: number,
    },
    viewportColumn: number,
    isWordWrapMinified: boolean,
    isViewportWrapping: boolean,
    wrappingColumn: number,
    verticalScrollbarWidth: number,
    horizontalScrollbarHeight: number,
    overviewRuler: {
      width: number,
      height: number,
      top: number,
      right: number,
    },
  }) => void) => void,
  onPaste: (listener: (event: {
    range: {
      startLineNumber: number,
      startColumn: number,
      endLineNumber: number,
      endColumn: number,
    },
    languageId: string | null,
  }) => void) => void,
  onScrollChange: (listener: (event: {
    scrollTop: number,
    scrollLeft: number,
    scrollWidth: number,
    scrollHeight: number,
    scrollTopChanged: boolean,
    scrollLeftChanged: boolean,
    scrollWidthChanged: boolean,
    scrollHeightChanged: boolean,
  }) => void) => void,
  onKeyDown: (listener: (event: {
    _standardKeyboardEventBrand: true,
    browserEvent: KeyboardEvent,
    target: HTMLElement,
    ctrlKey: boolean,
    shiftKey: boolean,
    altKey: boolean,
    metaKey: boolean,
    keyCode: number,
    code: string,
    equals: (keybinding: number) => boolean,
    preventDefault: () => void,
    stopPropagation: () => void,
  }) => void) => void,
  onKeyUp: (listener: (event: {
    _standardKeyboardEventBrand: true,
    browserEvent: KeyboardEvent,
    target: HTMLElement,
    ctrlKey: boolean,
    shiftKey: boolean,
    altKey: boolean,
    metaKey: boolean,
    keyCode: number,
    code: string,
    equals: (keybinding: number) => boolean,
    preventDefault: () => void,
    stopPropagation: () => void,
  }) => void) => void,
  onMouseDown: (listener: (event: {
    event: {
      browserEvent: MouseEvent,
      leftButton: boolean,
      middleButton: boolean,
      rightButton: boolean,
      buttons: number,
      target: HTMLElement,
      detail: number,
      posx: number,
      posy: number,
      ctrlKey: boolean,
      shiftKey: boolean,
      altKey: boolean,
      metaKey: boolean,
      timestamp: number,
      preventDefault: () => void,
      stopPropagation: () => void,
    },
    target: any,
  }) => void) => void,
  onMouseUp: (listener: (event: {
    event: {
      browserEvent: MouseEvent,
      leftButton: boolean,
      middleButton: boolean,
      rightButton: boolean,
      buttons: number,
      target: HTMLElement,
      detail: number,
      posx: number,
      posy: number,
      ctrlKey: boolean,
      shiftKey: boolean,
      altKey: boolean,
      metaKey: boolean,
      timestamp: number,
      preventDefault: () => void,
      stopPropagation: () => void,
    },
    target: any,
  }) => void) => void,
  onMouseMove: (listener: (event: {
    event: {
      browserEvent: MouseEvent,
      leftButton: boolean,
      middleButton: boolean,
      rightButton: boolean,
      buttons: number,
      target: HTMLElement,
      detail: number,
      posx: number,
      posy: number,
      ctrlKey: boolean,
      shiftKey: boolean,
      altKey: boolean,
      metaKey: boolean,
      timestamp: number,
      preventDefault: () => void,
      stopPropagation: () => void,
    },
    target: any,
  }) => void) => void,
  onMouseLeave: (listener: (event: {
    event: {
      browserEvent: MouseEvent,
      leftButton: boolean,
      middleButton: boolean,
      rightButton: boolean,
      buttons: number,
      target: HTMLElement,
      detail: number,
      posx: number,
      posy: number,
      ctrlKey: boolean,
      shiftKey: boolean,
      altKey: boolean,
      metaKey: boolean,
      timestamp: number,
      preventDefault: () => void,
      stopPropagation: () => void,
    },
    target: any | null,
  }) => void) => void,
  onDispose: (listener: () => void) => void,
  focus: () => void,
  setValue: (newValue: string) => void,
  getValue: (options?: {
    preserveBOM: boolean,
    lineEnding: string,
  }) => string,
  getTopForLineNumber: (lineNumber: number) => number,
  getBottomForLineNumber: (lineNumber: number) => number,
  getContentHeight: () => number,
  getContentWidth: () => number,
  getLayoutInfo: () => {
    width: number,
    height: number,
    glyphMarginLeft: number,
    glyphMarginWidth: number,
    lineNumbersLeft: number,
    lineNumbersWidth: number,
    decorationsLeft: number,
    decorationsWidth: number,
    contentLeft: number,
    contentWidth: number,
    minimap: {
      renderMinimap: number,
      minimapLeft: number,
      minimapWidth: number,
      minimapHeightIsEditorHeight: boolean,
      minimapIsSampling: boolean,
      minimapScale: number,
      minimapLineHeight: number,
      minimapCanvasInnerWidth: number,
      minimapCanvasInnerHeight: number,
      minimapCanvasOuterWidth: number,
      minimapCanvasOuterHeight: number,
    },
    viewportColumn: number,
    isWordWrapMinified: boolean,
    isViewportWrapping: boolean,
    wrappingColumn: number,
    verticalScrollbarWidth: number,
    horizontalScrollbarHeight: number,
    overviewRuler: {
      width: number,
      height: number,
      top: number,
      right: number,
    },
  },
  getOffsetForColumn: (lineNumber: number, column: number) => number,
  getPosition: () => {
    lineNumber: number,
    column: number,
  } | null,
  getScrollHeight: () => number,
  getScrollLeft: () => number,
  getScrollTop: () => number,
  getScrollWidth: () => number,
  getScrolledVisiblePosition: (position: {
    lineNumber: number,
    column: number,
  }) => {
    top: number,
    left: number,
    height: number,
  } | null,
  getSelection: () => {
    selectionStartLineNumber: number,
    selectionStartColumn: number,
    positionLineNumber: number,
    positionColumn: number,
  } | null,
  getSelections: () => {
    selectionStartLineNumber: number,
    selectionStartColumn: number,
    positionLineNumber: number,
    positionColumn: number,
  }[] | null,
  getTargetAtClientPoint: (clientX: number, clientY: number) => any,
  getTopForPosition: (lineNumber: number, column: number) => number,
  getVisibleColumnFromPosition: (position: {
    lineNumber: number,
    column: number,
  }) => number,
  getVisibleRanges: () => {
    startLineNumber: number,
    startColumn: number,
    endLineNumber: number,
    endColumn: number,
  }[] | null,
  hasTextFocus: () => boolean,
  hasWidgetFocus: () => boolean,
  layout: () => void,
  popUndoStop: () => boolean,
  pushUndoStop: () => boolean,
  render: (forceRedraw?: boolean) => void,
  restoreViewState: (state: {
    cursorState: {
      inSelectionMode: boolean,
      selectionStart: {
        lineNumber: number,
        column: number,
      },
      position: {
        lineNumber: number,
        column: number,
      },
    }[],
    viewState: {
      scrollTop?: number,
      scrollTopWithoutViewZones?: number,
      scrollLeft: number,
      firstPosition: {
        lineNumber: number,
        column: number,
      },
      firstPositionDeltaTop: number,
    },
    contributionsState: {
      [id: string]: any,
    },
  } | null) => void,
  revealLine: (lineNumber: number, scrollType?: number) => void,
  revealLineInCenter: (lineNumber: number, scrollType?: number) => void,
  revealLineInCenterIfOutsideViewport: (lineNumber: number, scrollType?: number) => void,
  revealLineNearTop: (lineNumber: number, scrollType?: number) => void,
  revealLines: (startLineNumber: number, endLineNumber: number, scrollType?: number) => void,
  revealLinesInCenter: (lineNumber: number, endLineNumber: number, scrollType?: number) => void,
  revealLinesInCenterIfOutsideViewport: (lineNumber: number, endLineNumber: number, scrollType?: number) => void,
  revealLinesNearTop: (lineNumber: number, endLineNumber: number, scrollType?: number) => void,
  revealPosition: (position: {
    lineNumber: number,
    column: number,
  }, scrollType?: number) => void,
  revealPositionInCenter: (position: {
    lineNumber: number,
    column: number,
  }, scrollType?: number) => void,
  revealPositionInCenterIfOutsideViewport: (position: {
    lineNumber: number,
    column: number,
  }, scrollType?: number) => void,
  revealPositionNearTop: (position: {
    lineNumber: number,
    column: number,
  }, scrollType?: number) => void,
  revealRange: (range: {
    startLineNumber: number,
    startColumn: number,
    endLineNumber: number,
    endColumn: number,
  }, scrollType?: number) => void,
  revealRangeAtTop: (range: {
    startLineNumber: number,
    startColumn: number,
    endLineNumber: number,
    endColumn: number,
  }, scrollType?: number) => void,
  revealRangeInCenter: (range: {
    startLineNumber: number,
    startColumn: number,
    endLineNumber: number,
    endColumn: number,
  }, scrollType?: number) => void,
  revealRangeInCenterIfOutsideViewport: (range: {
    startLineNumber: number,
    startColumn: number,
    endLineNumber: number,
    endColumn: number,
  }, scrollType?: number) => void,
  revealRangeNearTop: (range: {
    startLineNumber: number,
    startColumn: number,
    endLineNumber: number,
    endColumn: number,
  }, scrollType?: number) => void,
  revealRangeNearTopIfOutsideViewport: (range: {
    startLineNumber: number,
    startColumn: number,
    endLineNumber: number,
    endColumn: number,
  }, scrollType?: number) => void,
  saveViewState: () => {
    cursorState: {
      inSelectionMode: boolean,
      selectionStart: {
        lineNumber: number,
        column: number,
      },
      position: {
        lineNumber: number,
        column: number,
      },
    }[],
    viewState: {
      scrollTop?: number,
      scrollTopWithoutViewZones?: number,
      scrollLeft: number,
      firstPosition: {
        lineNumber: number,
        column: number,
      },
      firstPositionDeltaTop: number,
    },
    contributionsState: {
      [id: string]: any,
    },
  } | null,
  setBanner: (bannerDomNode: HTMLElement, height: number) => void,
  setPosition: (position: {
    lineNumber: number,
    column: number,
  }, source?: string) => void,
  setScrollLeft: (newScrollLeft: number, scrollType?: number) => void,
  setScrollPosition: (position: {
    scrollTop: number,
    scrollLeft: number,
  }, scrollType?: number) => void,
  setScrollTop: (newScrollTop: number, scrollType?: number) => void,
  setSelection: (range: {
    startLineNumber: number,
    startColumn: number,
    endLineNumber: number,
    endColumn: number,
  }, source?: string) => void,
  setSelections: (ranges: {
    selectionStartLineNumber: number,
    selectionStartColumn: number,
    positionLineNumber: number,
    positionColumn: number,
  }[], source?: string) => void,
}