sts
    window.codeMirrorSourceEditorTestInstance = this.editor;
  }

  async updateEditor() {
    const { mimeType, text, url } = this.props;
    if (this?.editor?.hasCodeMirror) {
      const mode = this.getSourceEditorModeForMimetype(mimeType);
      await this.editor.setMode(mode);
      await this.editor.setText(text, { documentId: url });
      // When navigating from the netmonitor search, find and highlight the
      // the current search result.
      await this.findSearchResult();
    }
  }

  unloadEditor() {
    if (this.editor) {
      this.editor.destroy();
      this.editor = null;
    }
  }

  async findSearchResult() {
    const { targetSearchResult, resetTargetSearchResult } = this.props;
    if (targetSearchResult?.line) {
      const { line } = targetSearchResult;
      // scroll the editor to center the line
      // with the target search result
      if (this.editor) {
        await this.editor.setCursorAt(line, 0);

        // Highlight line
        this.editor.setLineContentMarker({
          id: this.editor.markerTypes.HIGHLIGHT_LINE_MARKER,
          lineClassName: "highlight-line",
          lines: [{ line }],
        });
        this.clearHighlightLineAfterDuration();
      }
    }

    resetTargetSearchResult();
  }

  clearHighlightLineAfterDuration() {
    const editorContainer = document.querySelector(".editor-row-container");

    if (editorContainer === null) {
      return;
    }

    const duration = parseInt(
      getComputedStyle(editorContainer).getPropertyValue(
        "--highlight-line-duration"
      ),
      10
    );

    const highlightTimeout = setTimeout(() => {
      if (!this.editor) {
        return;
      }
      clearTimeout(highlightTimeout);
      this.editor.removeLineContentMarker("highlight-line-marker");
    }, duration);
  }

  render() {
    return div(
      { className: "editor-row-container" },
      div({
        ref: "editorElement",
        className: "source-editor-mount devtools-monospace",
      })
    );
  }
}

module.exports = connect(
  state => {
    if (!state.search) {
      return null;
    }
    return {
      targetSearchResult: state.search.targetSearchResult,
    };
  },
  dispatch => ({
    resetTargetSearchResult: () => dispatch(setTargetSearchResult(null)),
  })
)(SourcePreview);
PK