/**
   * Initializes the view, setting up listeners in the DOM and on the editor.
   */
  init() {
    // already inited
    let renderQueued = false;
    if (this.hasOwnProperty('uninit')) return;

    const onSelectionChange = () => {
      this.updateEditorSelection(SOURCE_USER);
    };

    const onEditorChange = async event => {
      if (renderQueued) return;
      renderQueued = true;
      await Promise.resolve();
      if (event.change) this.render();
      else this.updateBrowserSelection();
      renderQueued = false;
    };

    const rerender = () => this.render();

    this.doc.addEventListener('selectionchange', onSelectionChange);
    this.editor.on('editor-change', onEditorChange);
    this.editor.on('render', rerender);

    if (this.options.modules) {
      Object.keys(this.options.modules).forEach(key => this.modules[key] = this.options.modules[key](this.editor, this.root, this.paper));
    }

    this.render();

    this.uninit = () => {
      this.doc.removeEventListener('selectionchange', onSelectionChange);
      this.editor.off('editor-change', onEditorChange);
      this.editor.off('render', rerender);
      Object.keys(this.modules).forEach(key => {
        const api = this.modules[key];
        if (api && typeof api.onDestroy === 'function') api.onDestroy();
        delete this.modules[key];
      });
      delete this.uninit;
    }
  }

  /**
   * Update the editor's selection to match the browser's selection.
   *
   * @param {String} source The source of the selection change, api, user, or silent
   */
  updateEditorSelection(source: string = SOURCE_API) {
    if (this._settingBrowserSelection) return this._settingBrowserSelection = false;
    const range = this.getSelection();

    // Store the last non-null selection for restoration on focus()
    if (range) this.lastSelection = range;

    this._settingEditorSelection = true;
    this.editor.setSelection(range, source);
    this._settingEditorSelection = false;

    // If the selection was adjusted when set then update the browser's selection
    const selection = this.getBrowserSelection();
    if (!shallowEqual(range, this.editor.selection) || (range && range[0] === range[1] && selection && selection.type === 'Range')) {
      this.updateBrowserSelection();
    }
  }

    function onTextChange({ change, source, selection }) {
      if (source !== 'user' || !editor.selection || !isTextEntry(change)) return;

      const index = editor.selection[1];
      const lastOp = change.ops[change.ops.length - 1];
      const lastChars = editor.getText(index - 1, index) + lastOp.insert.slice(-1);

      const replaced = lastChars.replace(/(?:^|[\s\{\[\(\<'"\u2018\u201C])(")$/, '“')
              .replace(/"$/, '”')
              .replace(/(?:^|[\s\{\[\(\<'"\u2018\u201C])(')$/, '‘')
              .replace(/'$/, '’');

      if (replaced !== lastChars) {
        const quote = replaced.slice(-1);
        lastOp.insert = lastOp.insert.slice(0, -1) + quote;
        editor.updateContents(change, source, selection);
        return false;
      }
    }

    function onTextChange({ change, source }) {
      if (ignore || source !== 'user' || !editor.selection || !isTextEntry(change)) return;
      const index = editor.selection[1];
      const text = editor.getExactText();
      const lineStart = text.lastIndexOf('\n', index - 1) + 1;
      const prefix = text.slice(lineStart, index);

      ignore = true;
      handlers.some(handler => handler(editor, index, prefix));
      ignore = false;
    }

 function flattenBlock(line, force?: boolean) {
   const block = paper.blocks.findByAttributes(line.attributes, true);
   if (block.indentable && line.attributes.indent) {
     onTab(new CustomEvent('shortcut', { detail: 'Shift+Tab' }));
     return true;
   }
   if (block && (force || block !== paper.blocks.getDefault() && !block.defaultFollows)) {
     editor.formatLine(from, {}, SOURCE_USER);
     return true;
   }
 }

 function action(event: Event, source: string, dest: string) {
   if (event.defaultPrevented) return;
   event.preventDefault();
   if (stack[source].length === 0) return;
   const entry = stack[source].pop();
   stack[dest].push(entry);
   cutoff();
   ignoreChange = true;
   if (typeof entry[source] === 'function') {
     entry[source]();
   } else {
     editor.updateContents(entry[source], SOURCE_USER, entry[source + 'Selection']);
   }
   ignoreChange = false;
 }

    function onTab(event: CustomEvent) {
      if (event.defaultPrevented) return;
      event.preventDefault();
      const shortcut = event.detail;

      const direction = shortcut === 'Tab' || shortcut === 'Mod+]' ? 1 : -1;
      const [ from, to ] = editor.getSelectedRange();
      const lines = editor.contents.getLines(from, to);

      editor.transaction(() => {
        lines.forEach(line => {
          const block = paper.blocks.findByAttributes(line.attributes, true);
          if (block.indentable) {
            const indent = (line.attributes.indent || 0) + direction;
            if (indent < 0) {
              editor.formatLine(line.start, {});
            } else {
              const attributes = { ...line.attributes, indent };
              editor.formatLine(line.start, attributes);
            }
          }
        });
      }, SOURCE_USER);
    }

    // Undo a DOM mutation so that the view can update it correctly if needed
    function getTextChange(list: MutationRecord[]): Delta {
      const mutation = getTextChangeMutation(list);
      if (!mutation) return;

      const change = editor.delta();
      const index = getNodeIndex(root, paper, mutation.target);
      change.retain(index);
      const diffs = diff(mutation.oldValue.replace(/\xA0/g, ' '), mutation.target.nodeValue.replace(/\xA0/g, ' '));
      diffs.forEach(([ action, string ]) => {
        if (action === diff.EQUAL) change.retain(string.length);
        else if (action === diff.DELETE) change.delete(string.length);
        else if (action === diff.INSERT) {
          change.insert(string, editor.activeFormats);
        }
      });
      change.chop();
      return change;
    }

 /**
  * Set a string of HTML to be the contents of the editor. It will be parsed using Paper so incorrectly formatted HTML
  * cannot be set in Typewriter.
  *
  * @param {String} html A string of HTML to set in the editor
  * @param {*} source    The source of the change being made, api, user, or silent
  */
 setHTML(html: string, source: any) {
   this.editor.setContents(deltaFromHTML(this, html), source);
 }

 /**
  * Get all positions and sizes of a range as it is displayed in the DOM relative to the top left of visible document.
  * This is different from `getBounds` because instead of a single bounding box you may get multiple rects such as when
  * the selection is split across lines. You can use `getAllBounds` to draw a highlight behind the text within this
  * range.
  *
  * @param {Number} from The start of the range
  * @param {Number} to   The end of the range
  * @returns {DOMRectList}   A native DOMRect object with the bounds of the range
  */
 getAllBounds(from: number, to: number): DOMRectList {
   let range = this.editor._normalizeRange(from, to);
   range = this.editor.getSelectedRange(range);
   return getAllBounds(this.root, this.paper, range);
 }