text-editor-component.js

/* global ResizeObserver */

const etch = require('etch');
const { Point, Range } = require('text-buffer');
const LineTopIndex = require('line-top-index');
const TextEditor = require('./text-editor');
const { isPairedCharacter } = require('./text-utils');
const electron = require('electron');
const clipboard = electron.clipboard;
const $ = etch.dom;

let TextEditorElement;

const DEFAULT_ROWS_PER_TILE = 6;
const NORMAL_WIDTH_CHARACTER = 'x';
const DOUBLE_WIDTH_CHARACTER = '我';
const HALF_WIDTH_CHARACTER = 'ﾊ';
const KOREAN_CHARACTER = '세';
const NBSP_CHARACTER = '\u00a0';
const ZERO_WIDTH_NBSP_CHARACTER = '\ufeff';
const MOUSE_DRAG_AUTOSCROLL_MARGIN = 40;
const CURSOR_BLINK_RESUME_DELAY = 300;
const CURSOR_BLINK_PERIOD = 800;

function scaleMouseDragAutoscrollDelta(delta) {
  return Math.pow(delta / 3, 3) / 280;
}

module.exports = class TextEditorComponent {
  static setScheduler(scheduler) {
    etch.setScheduler(scheduler);
  }

  static getScheduler() {
    return etch.getScheduler();
  }

  static didUpdateStyles() {
    if (this.attachedComponents) {
      this.attachedComponents.forEach(component => {
        component.didUpdateStyles();
      });
    }
  }

  static didUpdateScrollbarStyles() {
    if (this.attachedComponents) {
      this.attachedComponents.forEach(component => {
        component.didUpdateScrollbarStyles();
      });
    }
  }

  constructor(props) {
    this.props = props;

    if (!props.model) {
      props.model = new TextEditor({
        mini: props.mini,
        readOnly: props.readOnly
      });
    }
    this.props.model.component = this;

    if (props.element) {
      this.element = props.element;
    } else {
      if (!TextEditorElement)
        TextEditorElement = require('./text-editor-element');
      this.element = new TextEditorElement();
    }
    this.element.initialize(this);
    this.virtualNode = $('atom-text-editor');
    this.virtualNode.domNode = this.element;
    this.refs = {};

    this.updateSync = this.updateSync.bind(this);
    this.didBlurHiddenInput = this.didBlurHiddenInput.bind(this);
    this.didFocusHiddenInput = this.didFocusHiddenInput.bind(this);
    this.didPaste = this.didPaste.bind(this);
    this.didTextInput = this.didTextInput.bind(this);
    this.didKeydown = this.didKeydown.bind(this);
    this.didKeyup = this.didKeyup.bind(this);
    this.didKeypress = this.didKeypress.bind(this);
    this.didCompositionStart = this.didCompositionStart.bind(this);
    this.didCompositionUpdate = this.didCompositionUpdate.bind(this);
    this.didCompositionEnd = this.didCompositionEnd.bind(this);

    this.updatedSynchronously = this.props.updatedSynchronously;
    this.didScrollDummyScrollbar = this.didScrollDummyScrollbar.bind(this);
    this.didMouseDownOnContent = this.didMouseDownOnContent.bind(this);
    this.debouncedResumeCursorBlinking = debounce(
      this.resumeCursorBlinking.bind(this),
      this.props.cursorBlinkResumeDelay || CURSOR_BLINK_RESUME_DELAY
    );
    this.lineTopIndex = new LineTopIndex();
    this.lineNodesPool = new NodePool();
    this.updateScheduled = false;
    this.suppressUpdates = false;
    this.hasInitialMeasurements = false;
    this.measurements = {
      lineHeight: 0,
      baseCharacterWidth: 0,
      doubleWidthCharacterWidth: 0,
      halfWidthCharacterWidth: 0,
      koreanCharacterWidth: 0,
      gutterContainerWidth: 0,
      lineNumberGutterWidth: 0,
      clientContainerHeight: 0,
      clientContainerWidth: 0,
      verticalScrollbarWidth: 0,
      horizontalScrollbarHeight: 0,
      longestLineWidth: 0
    };
    this.derivedDimensionsCache = {};
    this.visible = false;
    this.cursorsBlinking = false;
    this.cursorsBlinkedOff = false;
    this.nextUpdateOnlyBlinksCursors = null;
    this.linesToMeasure = new Map();
    this.extraRenderedScreenLines = new Map();
    this.horizontalPositionsToMeasure = new Map(); // Keys are rows with positions we want to measure, values are arrays of columns to measure
    this.horizontalPixelPositionsByScreenLineId = new Map(); // Values are maps from column to horizontal pixel positions
    this.blockDecorationsToMeasure = new Set();
    this.blockDecorationsByElement = new WeakMap();
    this.blockDecorationSentinel = document.createElement('div');
    this.blockDecorationSentinel.style.height = '1px';
    this.heightsByBlockDecoration = new WeakMap();
    this.blockDecorationResizeObserver = new ResizeObserver(
      this.didResizeBlockDecorations.bind(this)
    );
    this.lineComponentsByScreenLineId = new Map();
    this.overlayComponents = new Set();
    this.shouldRenderDummyScrollbars = true;
    this.remeasureScrollbars = false;
    this.pendingAutoscroll = null;
    this.scrollTopPending = false;
    this.scrollLeftPending = false;
    this.scrollTop = 0;
    this.scrollLeft = 0;
    this.previousScrollWidth = 0;
    this.previousScrollHeight = 0;
    this.lastKeydown = null;
    this.lastKeydownBeforeKeypress = null;
    this.accentedCharacterMenuIsOpen = false;
    this.remeasureGutterDimensions = false;
    this.guttersToRender = [this.props.model.getLineNumberGutter()];
    this.guttersVisibility = [this.guttersToRender[0].visible];
    this.idsByTileStartRow = new Map();
    this.nextTileId = 0;
    this.renderedTileStartRows = [];
    this.showLineNumbers = this.props.model.doesShowLineNumbers();
    this.lineNumbersToRender = {
      maxDigits: 2,
      bufferRows: [],
      screenRows: [],
      keys: [],
      softWrappedFlags: [],
      foldableFlags: []
    };
    this.decorationsToRender = {
      lineNumbers: new Map(),
      lines: null,
      highlights: [],
      cursors: [],
      overlays: [],
      customGutter: new Map(),
      blocks: new Map(),
      text: []
    };
    this.decorationsToMeasure = {
      highlights: [],
      cursors: new Map()
    };
    this.textDecorationsByMarker = new Map();
    this.textDecorationBoundaries = [];
    this.pendingScrollTopRow = this.props.initialScrollTopRow;
    this.pendingScrollLeftColumn = this.props.initialScrollLeftColumn;
    this.tabIndex =
      this.props.element && this.props.element.tabIndex
        ? this.props.element.tabIndex
        : -1;

    this.measuredContent = false;
    this.queryGuttersToRender();
    this.queryMaxLineNumberDigits();
    this.observeBlockDecorations();
    this.updateClassList();
    etch.updateSync(this);
  }

  update(props) {
    if (props.model !== this.props.model) {
      this.props.model.component = null;
      props.model.component = this;
    }
    this.props = props;
    this.scheduleUpdate();
  }

  pixelPositionForScreenPosition({ row, column }) {
    const top = this.pixelPositionAfterBlocksForRow(row);
    let left = column === 0 ? 0 : this.pixelLeftForRowAndColumn(row, column);
    if (left == null) {
      this.requestHorizontalMeasurement(row, column);
      this.updateSync();
      left = this.pixelLeftForRowAndColumn(row, column);
    }
    return { top, left };
  }

  scheduleUpdate(nextUpdateOnlyBlinksCursors = false) {
    if (!this.visible) return;
    if (this.suppressUpdates) return;

    this.nextUpdateOnlyBlinksCursors =
      this.nextUpdateOnlyBlinksCursors !== false &&
      nextUpdateOnlyBlinksCursors === true;

    if (this.updatedSynchronously) {
      this.updateSync();
    } else if (!this.updateScheduled) {
      this.updateScheduled = true;
      etch.getScheduler().updateDocument(() => {
        if (this.updateScheduled) this.updateSync(true);
      });
    }
  }

  updateSync(useScheduler = false) {
    // Don't proceed if we know we are not visible
    if (!this.visible) {
      this.updateScheduled = false;
      return;
    }

    // Don't proceed if we have to pay for a measurement anyway and detect
    // that we are no longer visible.
    if (
      (this.remeasureCharacterDimensions ||
        this.remeasureAllBlockDecorations) &&
      !this.isVisible()
    ) {
      if (this.resolveNextUpdatePromise) this.resolveNextUpdatePromise();
      this.updateScheduled = false;
      return;
    }

    const onlyBlinkingCursors = this.nextUpdateOnlyBlinksCursors;
    this.nextUpdateOnlyBlinksCursors = null;
    if (useScheduler && onlyBlinkingCursors) {
      this.refs.cursorsAndInput.updateCursorBlinkSync(this.cursorsBlinkedOff);
      if (this.resolveNextUpdatePromise) this.resolveNextUpdatePromise();
      this.updateScheduled = false;
      return;
    }

    if (this.remeasureCharacterDimensions) {
      const originalLineHeight = this.getLineHeight();
      const originalBaseCharacterWidth = this.getBaseCharacterWidth();
      const scrollTopRow = this.getScrollTopRow();
      const scrollLeftColumn = this.getScrollLeftColumn();

      this.measureCharacterDimensions();
      this.measureGutterDimensions();
      this.queryLongestLine();

      if (this.getLineHeight() !== originalLineHeight) {
        this.setScrollTopRow(scrollTopRow);
      }
      if (this.getBaseCharacterWidth() !== originalBaseCharacterWidth) {
        this.setScrollLeftColumn(scrollLeftColumn);
      }
      this.remeasureCharacterDimensions = false;
    }

    this.measureBlockDecorations();

    this.updateSyncBeforeMeasuringContent();
    if (useScheduler === true) {
      const scheduler = etch.getScheduler();
      scheduler.readDocument(() => {
        const restartFrame = this.measureContentDuringUpdateSync();
        scheduler.updateDocument(() => {
          if (restartFrame) {
            this.updateSync(true);
          } else {
            this.updateSyncAfterMeasuringContent();
          }
        });
      });
    } else {
      const restartFrame = this.measureContentDuringUpdateSync();
      if (restartFrame) {
        this.updateSync(false);
      } else {
        this.updateSyncAfterMeasuringContent();
      }
    }

    this.updateScheduled = false;
  }

  measureBlockDecorations() {
    if (this.remeasureAllBlockDecorations) {
      this.remeasureAllBlockDecorations = false;

      const decorations = this.props.model.getDecorations();
      for (var i = 0; i < decorations.length; i++) {
        const decoration = decorations[i];
        const marker = decoration.getMarker();
        if (marker.isValid() && decoration.getProperties().type === 'block') {
          this.blockDecorationsToMeasure.add(decoration);
        }
      }

      // Update the width of the line tiles to ensure block decorations are
      // measured with the most recent width.
      if (this.blockDecorationsToMeasure.size > 0) {
        this.updateSyncBeforeMeasuringContent();
      }
    }

    if (this.blockDecorationsToMeasure.size > 0) {
      const { blockDecorationMeasurementArea } = this.refs;
      const sentinelElements = new Set();

      blockDecorationMeasurementArea.appendChild(document.createElement('div'));
      this.blockDecorationsToMeasure.forEach(decoration => {
        const { item } = decoration.getProperties();
        const decorationElement = TextEditor.viewForItem(item);
        if (document.contains(decorationElement)) {
          const parentElement = decorationElement.parentElement;

          if (!decorationElement.previousSibling) {
            const sentinelElement = this.blockDecorationSentinel.cloneNode();
            parentElement.insertBefore(sentinelElement, decorationElement);
            sentinelElements.add(sentinelElement);
          }

          if (!decorationElement.nextSibling) {
            const sentinelElement = this.blockDecorationSentinel.cloneNode();
            parentElement.appendChild(sentinelElement);
            sentinelElements.add(sentinelElement);
          }

          this.didMeasureVisibleBlockDecoration = true;
        } else {
          blockDecorationMeasurementArea.appendChild(
            this.blockDecorationSentinel.cloneNode()
          );
          blockDecorationMeasurementArea.appendChild(decorationElement);
          blockDecorationMeasurementArea.appendChild(
            this.blockDecorationSentinel.cloneNode()
          );
        }
      });

      if (this.resizeBlockDecorationMeasurementsArea) {
        this.resizeBlockDecorationMeasurementsArea = false;
        this.refs.blockDecorationMeasurementArea.style.width =
          this.getScrollWidth() + 'px';
      }

      this.blockDecorationsToMeasure.forEach(decoration => {
        const { item } = decoration.getProperties();
        const decorationElement = TextEditor.viewForItem(item);
        const { previousSibling, nextSibling } = decorationElement;
        const height =
          nextSibling.getBoundingClientRect().top -
          previousSibling.getBoundingClientRect().bottom;
        this.heightsByBlockDecoration.set(decoration, height);
        this.lineTopIndex.resizeBlock(decoration, height);
      });

      sentinelElements.forEach(sentinelElement => sentinelElement.remove());
      while (blockDecorationMeasurementArea.firstChild) {
        blockDecorationMeasurementArea.firstChild.remove();
      }
      this.blockDecorationsToMeasure.clear();
    }
  }

  updateSyncBeforeMeasuringContent() {
    this.measuredContent = false;
    this.derivedDimensionsCache = {};
    this.updateModelSoftWrapColumn();
    if (this.pendingAutoscroll) {
      let { screenRange, options } = this.pendingAutoscroll;
      this.autoscrollVertically(screenRange, options);
      this.requestHorizontalMeasurement(
        screenRange.start.row,
        screenRange.start.column
      );
      this.requestHorizontalMeasurement(
        screenRange.end.row,
        screenRange.end.column
      );
    }
    this.populateVisibleRowRange(this.getRenderedStartRow());
    this.populateVisibleTiles();
    this.queryScreenLinesToRender();
    this.queryLongestLine();
    this.queryLineNumbersToRender();
    this.queryGuttersToRender();
    this.queryDecorationsToRender();
    this.queryExtraScreenLinesToRender();
    this.shouldRenderDummyScrollbars = !this.remeasureScrollbars;
    etch.updateSync(this);
    this.updateClassList();
    this.shouldRenderDummyScrollbars = true;
    this.didMeasureVisibleBlockDecoration = false;
  }

  measureContentDuringUpdateSync() {
    let gutterDimensionsChanged = false;
    if (this.remeasureGutterDimensions) {
      gutterDimensionsChanged = this.measureGutterDimensions();
      this.remeasureGutterDimensions = false;
    }
    const wasHorizontalScrollbarVisible =
      this.canScrollHorizontally() && this.getHorizontalScrollbarHeight() > 0;

    this.measureLongestLineWidth();
    this.measureHorizontalPositions();
    this.updateAbsolutePositionedDecorations();

    const isHorizontalScrollbarVisible =
      this.canScrollHorizontally() && this.getHorizontalScrollbarHeight() > 0;

    if (this.pendingAutoscroll) {
      this.derivedDimensionsCache = {};
      const { screenRange, options } = this.pendingAutoscroll;
      this.autoscrollHorizontally(screenRange, options);

      if (!wasHorizontalScrollbarVisible && isHorizontalScrollbarVisible) {
        this.autoscrollVertically(screenRange, options);
      }
      this.pendingAutoscroll = null;
    }

    this.linesToMeasure.clear();
    this.measuredContent = true;

    return (
      gutterDimensionsChanged ||
      wasHorizontalScrollbarVisible !== isHorizontalScrollbarVisible
    );
  }

  updateSyncAfterMeasuringContent() {
    this.derivedDimensionsCache = {};
    etch.updateSync(this);

    this.currentFrameLineNumberGutterProps = null;
    this.scrollTopPending = false;
    this.scrollLeftPending = false;
    if (this.remeasureScrollbars) {
      // Flush stored scroll positions to the vertical and the horizontal
      // scrollbars. This is because they have just been destroyed and recreated
      // as a result of their remeasurement, but we could not assign the scroll
      // top while they were initialized because they were not attached to the
      // DOM yet.
      this.refs.verticalScrollbar.flushScrollPosition();
      this.refs.horizontalScrollbar.flushScrollPosition();

      this.measureScrollbarDimensions();
      this.remeasureScrollbars = false;
      etch.updateSync(this);
    }

    this.derivedDimensionsCache = {};
    if (this.resolveNextUpdatePromise) this.resolveNextUpdatePromise();
  }

  render() {
    const { model } = this.props;
    const style = {};

    if (!model.getAutoHeight() && !model.getAutoWidth()) {
      style.contain = 'size';
    }

    let clientContainerHeight = '100%';
    let clientContainerWidth = '100%';
    if (this.hasInitialMeasurements) {
      if (model.getAutoHeight()) {
        clientContainerHeight =
          this.getContentHeight() + this.getHorizontalScrollbarHeight() + 'px';
      }
      if (model.getAutoWidth()) {
        style.width = 'min-content';
        clientContainerWidth =
          this.getGutterContainerWidth() +
          this.getContentWidth() +
          this.getVerticalScrollbarWidth() +
          'px';
      } else {
        style.width = this.element.style.width;
      }
    }

    let attributes = {};
    if (model.isMini()) {
      attributes.mini = '';
    }

    if (model.isReadOnly()) {
      attributes.readonly = '';
    }

    const dataset = { encoding: model.getEncoding() };
    const grammar = model.getGrammar();
    if (grammar && grammar.scopeName) {
      dataset.grammar = grammar.scopeName.replace(/\./g, ' ');
    }

    return $(
      'atom-text-editor',
      {
        // See this.updateClassList() for construction of the class name
        style,
        attributes,
        dataset,
        tabIndex: -1,
        on: { mousewheel: this.didMouseWheel }
      },
      $.div(
        {
          ref: 'clientContainer',
          style: {
            position: 'relative',
            contain: 'strict',
            overflow: 'hidden',
            backgroundColor: 'inherit',
            height: clientContainerHeight,
            width: clientContainerWidth
          }
        },
        this.renderGutterContainer(),
        this.renderScrollContainer()
      ),
      this.renderOverlayDecorations()
    );
  }

  renderGutterContainer() {
    if (this.props.model.isMini()) {
      return null;
    } else {
      return $(GutterContainerComponent, {
        ref: 'gutterContainer',
        key: 'gutterContainer',
        rootComponent: this,
        hasInitialMeasurements: this.hasInitialMeasurements,
        measuredContent: this.measuredContent,
        scrollTop: this.getScrollTop(),
        scrollHeight: this.getScrollHeight(),
        lineNumberGutterWidth: this.getLineNumberGutterWidth(),
        lineHeight: this.getLineHeight(),
        renderedStartRow: this.getRenderedStartRow(),
        renderedEndRow: this.getRenderedEndRow(),
        rowsPerTile: this.getRowsPerTile(),
        guttersToRender: this.guttersToRender,
        decorationsToRender: this.decorationsToRender,
        isLineNumberGutterVisible: this.props.model.isLineNumberGutterVisible(),
        showLineNumbers: this.showLineNumbers,
        lineNumbersToRender: this.lineNumbersToRender,
        didMeasureVisibleBlockDecoration: this.didMeasureVisibleBlockDecoration
      });
    }
  }

  renderScrollContainer() {
    const style = {
      position: 'absolute',
      contain: 'strict',
      overflow: 'hidden',
      top: 0,
      bottom: 0,
      backgroundColor: 'inherit'
    };

    if (this.hasInitialMeasurements) {
      style.left = this.getGutterContainerWidth() + 'px';
      style.width = this.getScrollContainerWidth() + 'px';
    }

    return $.div(
      {
        ref: 'scrollContainer',
        key: 'scrollContainer',
        className: 'scroll-view',
        style
      },
      this.renderContent(),
      this.renderDummyScrollbars()
    );
  }

  renderContent() {
    let style = {
      contain: 'strict',
      overflow: 'hidden',
      backgroundColor: 'inherit'
    };
    if (this.hasInitialMeasurements) {
      style.width = ceilToPhysicalPixelBoundary(this.getScrollWidth()) + 'px';
      style.height = ceilToPhysicalPixelBoundary(this.getScrollHeight()) + 'px';
      style.willChange = 'transform';
      style.transform = `translate(${-roundToPhysicalPixelBoundary(
        this.getScrollLeft()
      )}px, ${-roundToPhysicalPixelBoundary(this.getScrollTop())}px)`;
    }

    return $.div(
      {
        ref: 'content',
        on: { mousedown: this.didMouseDownOnContent },
        style
      },
      this.renderLineTiles(),
      this.renderBlockDecorationMeasurementArea(),
      this.renderCharacterMeasurementLine()
    );
  }

  renderHighlightDecorations() {
    return $(HighlightsComponent, {
      hasInitialMeasurements: this.hasInitialMeasurements,
      highlightDecorations: this.decorationsToRender.highlights.slice(),
      width: this.getScrollWidth(),
      height: this.getScrollHeight(),
      lineHeight: this.getLineHeight()
    });
  }

  renderLineTiles() {
    const style = {
      position: 'absolute',
      contain: 'strict',
      overflow: 'hidden'
    };

    const children = [];
    children.push(this.renderHighlightDecorations());

    if (this.hasInitialMeasurements) {
      const { lineComponentsByScreenLineId } = this;

      const startRow = this.getRenderedStartRow();
      const endRow = this.getRenderedEndRow();
      const rowsPerTile = this.getRowsPerTile();
      const tileWidth = this.getScrollWidth();

      for (let i = 0; i < this.renderedTileStartRows.length; i++) {
        const tileStartRow = this.renderedTileStartRows[i];
        const tileEndRow = Math.min(endRow, tileStartRow + rowsPerTile);
        const tileHeight =
          this.pixelPositionBeforeBlocksForRow(tileEndRow) -
          this.pixelPositionBeforeBlocksForRow(tileStartRow);

        children.push(
          $(LinesTileComponent, {
            key: this.idsByTileStartRow.get(tileStartRow),
            measuredContent: this.measuredContent,
            height: tileHeight,
            width: tileWidth,
            top: this.pixelPositionBeforeBlocksForRow(tileStartRow),
            lineHeight: this.getLineHeight(),
            renderedStartRow: startRow,
            tileStartRow,
            tileEndRow,
            screenLines: this.renderedScreenLines.slice(
              tileStartRow - startRow,
              tileEndRow - startRow
            ),
            lineDecorations: this.decorationsToRender.lines.slice(
              tileStartRow - startRow,
              tileEndRow - startRow
            ),
            textDecorations: this.decorationsToRender.text.slice(
              tileStartRow - startRow,
              tileEndRow - startRow
            ),
            blockDecorations: this.decorationsToRender.blocks.get(tileStartRow),
            displayLayer: this.props.model.displayLayer,
            nodePool: this.lineNodesPool,
            lineComponentsByScreenLineId
          })
        );
      }

      this.extraRenderedScreenLines.forEach((screenLine, screenRow) => {
        if (screenRow < startRow || screenRow >= endRow) {
          children.push(
            $(LineComponent, {
              key: 'extra-' + screenLine.id,
              offScreen: true,
              screenLine,
              screenRow,
              displayLayer: this.props.model.displayLayer,
              nodePool: this.lineNodesPool,
              lineComponentsByScreenLineId
            })
          );
        }
      });

      style.width = this.getScrollWidth() + 'px';
      style.height = this.getScrollHeight() + 'px';
    }

    children.push(this.renderPlaceholderText());
    children.push(this.renderCursorsAndInput());

    return $.div(
      { key: 'lineTiles', ref: 'lineTiles', className: 'lines', style },
      children
    );
  }

  renderCursorsAndInput() {
    return $(CursorsAndInputComponent, {
      ref: 'cursorsAndInput',
      key: 'cursorsAndInput',
      didBlurHiddenInput: this.didBlurHiddenInput,
      didFocusHiddenInput: this.didFocusHiddenInput,
      didTextInput: this.didTextInput,
      didPaste: this.didPaste,
      didKeydown: this.didKeydown,
      didKeyup: this.didKeyup,
      didKeypress: this.didKeypress,
      didCompositionStart: this.didCompositionStart,
      didCompositionUpdate: this.didCompositionUpdate,
      didCompositionEnd: this.didCompositionEnd,
      measuredContent: this.measuredContent,
      lineHeight: this.getLineHeight(),
      scrollHeight: this.getScrollHeight(),
      scrollWidth: this.getScrollWidth(),
      decorationsToRender: this.decorationsToRender,
      cursorsBlinkedOff: this.cursorsBlinkedOff,
      hiddenInputPosition: this.hiddenInputPosition,
      tabIndex: this.tabIndex
    });
  }

  renderPlaceholderText() {
    const { model } = this.props;
    if (model.isEmpty()) {
      const placeholderText = model.getPlaceholderText();
      if (placeholderText != null) {
        return $.div({ className: 'placeholder-text' }, placeholderText);
      }
    }
    return null;
  }

  renderCharacterMeasurementLine() {
    return $.div(
      {
        key: 'characterMeasurementLine',
        ref: 'characterMeasurementLine',
        className: 'line dummy',
        style: { position: 'absolute', visibility: 'hidden' }
      },
      $.span({ ref: 'normalWidthCharacterSpan' }, NORMAL_WIDTH_CHARACTER),
      $.span({ ref: 'doubleWidthCharacterSpan' }, DOUBLE_WIDTH_CHARACTER),
      $.span({ ref: 'halfWidthCharacterSpan' }, HALF_WIDTH_CHARACTER),
      $.span({ ref: 'koreanCharacterSpan' }, KOREAN_CHARACTER)
    );
  }

  renderBlockDecorationMeasurementArea() {
    return $.div({
      ref: 'blockDecorationMeasurementArea',
      key: 'blockDecorationMeasurementArea',
      style: {
        contain: 'strict',
        position: 'absolute',
        visibility: 'hidden',
        width: this.getScrollWidth() + 'px'
      }
    });
  }

  renderDummyScrollbars() {
    if (this.shouldRenderDummyScrollbars && !this.props.model.isMini()) {
      let scrollHeight, scrollTop, horizontalScrollbarHeight;
      let scrollWidth,
        scrollLeft,
        verticalScrollbarWidth,
        forceScrollbarVisible;
      let canScrollHorizontally, canScrollVertically;

      if (this.hasInitialMeasurements) {
        scrollHeight = this.getScrollHeight();
        scrollWidth = this.getScrollWidth();
        scrollTop = this.getScrollTop();
        scrollLeft = this.getScrollLeft();
        canScrollHorizontally = this.canScrollHorizontally();
        canScrollVertically = this.canScrollVertically();
        horizontalScrollbarHeight = this.getHorizontalScrollbarHeight();
        verticalScrollbarWidth = this.getVerticalScrollbarWidth();
        forceScrollbarVisible = this.remeasureScrollbars;
      } else {
        forceScrollbarVisible = true;
      }

      return [
        $(DummyScrollbarComponent, {
          ref: 'verticalScrollbar',
          orientation: 'vertical',
          didScroll: this.didScrollDummyScrollbar,
          didMouseDown: this.didMouseDownOnContent,
          canScroll: canScrollVertically,
          scrollHeight,
          scrollTop,
          horizontalScrollbarHeight,
          forceScrollbarVisible
        }),
        $(DummyScrollbarComponent, {
          ref: 'horizontalScrollbar',
          orientation: 'horizontal',
          didScroll: this.didScrollDummyScrollbar,
          didMouseDown: this.didMouseDownOnContent,
          canScroll: canScrollHorizontally,
          scrollWidth,
          scrollLeft,
          verticalScrollbarWidth,
          forceScrollbarVisible
        }),

        // Force a "corner" to render where the two scrollbars meet at the lower right
        $.div({
          ref: 'scrollbarCorner',
          className: 'scrollbar-corner',
          style: {
            position: 'absolute',
            height: '20px',
            width: '20px',
            bottom: 0,
            right: 0,
            overflow: 'scroll'
          }
        })
      ];
    } else {
      return null;
    }
  }

  renderOverlayDecorations() {
    return this.decorationsToRender.overlays.map(overlayProps =>
      $(
        OverlayComponent,
        Object.assign(
          {
            key: overlayProps.element,
            overlayComponents: this.overlayComponents,
            didResize: overlayComponent => {
              this.updateOverlayToRender(overlayProps);
              overlayComponent.update(overlayProps);
            }
          },
          overlayProps
        )
      )
    );
  }

  // Imperatively manipulate the class list of the root element to avoid
  // clearing classes assigned by package authors.
  updateClassList() {
    const { model } = this.props;

    const oldClassList = this.classList;
    const newClassList = ['editor'];
    if (this.focused) newClassList.push('is-focused');
    if (model.isMini()) newClassList.push('mini');
    for (var i = 0; i < model.selections.length; i++) {
      if (!model.selections[i].isEmpty()) {
        newClassList.push('has-selection');
        break;
      }
    }

    if (oldClassList) {
      for (let i = 0; i < oldClassList.length; i++) {
        const className = oldClassList[i];
        if (!newClassList.includes(className)) {
          this.element.classList.remove(className);
        }
      }
    }

    for (let i = 0; i < newClassList.length; i++) {
      this.element.classList.add(newClassList[i]);
    }

    this.classList = newClassList;
  }

  queryScreenLinesToRender() {
    const { model } = this.props;

    this.renderedScreenLines = model.displayLayer.getScreenLines(
      this.getRenderedStartRow(),
      this.getRenderedEndRow()
    );
  }

  queryLongestLine() {
    const { model } = this.props;

    const longestLineRow = model.getApproximateLongestScreenRow();
    const longestLine = model.screenLineForScreenRow(longestLineRow);
    if (
      longestLine !== this.previousLongestLine ||
      this.remeasureCharacterDimensions
    ) {
      this.requestLineToMeasure(longestLineRow, longestLine);
      this.longestLineToMeasure = longestLine;
      this.previousLongestLine = longestLine;
    }
  }

  queryExtraScreenLinesToRender() {
    this.extraRenderedScreenLines.clear();
    this.linesToMeasure.forEach((screenLine, row) => {
      if (row < this.getRenderedStartRow() || row >= this.getRenderedEndRow()) {
        this.extraRenderedScreenLines.set(row, screenLine);
      }
    });
  }

  queryLineNumbersToRender() {
    const { model } = this.props;
    if (!model.anyLineNumberGutterVisible()) return;
    if (this.showLineNumbers !== model.doesShowLineNumbers()) {
      this.remeasureGutterDimensions = true;
      this.showLineNumbers = model.doesShowLineNumbers();
    }

    this.queryMaxLineNumberDigits();

    const startRow = this.getRenderedStartRow();
    const endRow = this.getRenderedEndRow();
    const renderedRowCount = this.getRenderedRowCount();

    const bufferRows = model.bufferRowsForScreenRows(startRow, endRow);
    const screenRows = new Array(renderedRowCount);
    const keys = new Array(renderedRowCount);
    const foldableFlags = new Array(renderedRowCount);
    const softWrappedFlags = new Array(renderedRowCount);

    let previousBufferRow =
      startRow > 0 ? model.bufferRowForScreenRow(startRow - 1) : -1;
    let softWrapCount = 0;
    for (let row = startRow; row < endRow; row++) {
      const i = row - startRow;
      const bufferRow = bufferRows[i];
      if (bufferRow === previousBufferRow) {
        softWrapCount++;
        softWrappedFlags[i] = true;
        keys[i] = bufferRow + '-' + softWrapCount;
      } else {
        softWrapCount = 0;
        softWrappedFlags[i] = false;
        keys[i] = bufferRow;
      }

      const nextBufferRow = bufferRows[i + 1];
      if (bufferRow !== nextBufferRow) {
        foldableFlags[i] = model.isFoldableAtBufferRow(bufferRow);
      } else {
        foldableFlags[i] = false;
      }

      screenRows[i] = row;
      previousBufferRow = bufferRow;
    }

    // Delete extra buffer row at the end because it's not currently on screen.
    bufferRows.pop();

    this.lineNumbersToRender.bufferRows = bufferRows;
    this.lineNumbersToRender.screenRows = screenRows;
    this.lineNumbersToRender.keys = keys;
    this.lineNumbersToRender.foldableFlags = foldableFlags;
    this.lineNumbersToRender.softWrappedFlags = softWrappedFlags;
  }

  queryMaxLineNumberDigits() {
    const { model } = this.props;
    if (model.anyLineNumberGutterVisible()) {
      const maxDigits = Math.max(2, model.getLineCount().toString().length);
      if (maxDigits !== this.lineNumbersToRender.maxDigits) {
        this.remeasureGutterDimensions = true;
        this.lineNumbersToRender.maxDigits = maxDigits;