Function MonacoDiffEditor

src/diff.tsx:7–223

(
  {
    width = "100%",
    height = "100%",
    value = null,
    defaultValue = "",
    language = "javascript",
    theme = null,
    options = {},
    overrideServices = {},
    editorWillMount = noop,
    editorDidMount = noop,
    editorWillUnmount = noop,
    onChange = noop,
    className = null,
    original = null,
    originalUri,
    modifiedUri,
  }: MonacoDiffEditorProps,
  ref: React.ForwardedRef<MonacoDiffEditorHandle>,
)

import { noop, processSize } from "./utils";

function MonacoDiffEditor(
  {
    width = "100%",
    height = "100%",
    value = null,
    defaultValue = "",
    language = "javascript",
    theme = null,
    options = {},
    overrideServices = {},
    editorWillMount = noop,
    editorDidMount = noop,
    editorWillUnmount = noop,
    onChange = noop,
    className = null,
    original = null,
    originalUri,
    modifiedUri,
  }: MonacoDiffEditorProps,
  ref: React.ForwardedRef<MonacoDiffEditorHandle>,
) {
  const containerElement = useRef<HTMLDivElement | null>(null);

  const editor = useRef<monaco.editor.IStandaloneDiffEditor | null>(null);

  const _subscription = useRef<monaco.IDisposable | null>(null);

  const __prevent_trigger_change_event = useRef<boolean | null>(null);

  const fixedWidth = processSize(width);

  const fixedHeight = processSize(height);

  const style = useMemo(
    () => ({
      width: fixedWidth,
      height: fixedHeight,
    }),
    [fixedWidth, fixedHeight],
  );

  React.useImperativeHandle(ref, () => ({
    get editor() {
      return editor.current;
    },
  }));

  const handleEditorWillMount = () => {
    const finalOptions = editorWillMount(monaco);
    return finalOptions || {};
  };

  const handleEditorDidMount = () => {
    editorDidMount(editor.current, monaco);

    const { modified } = editor.current.getModel();
    _subscription.current = modified.onDidChangeContent((event) => {
      if (!__prevent_trigger_change_event.current) {