google-closure-library/closure/goog/editor/field.js

Google's common JavaScript library

/**
 * @license
 * Copyright The Closure Library Authors.
 * SPDX-License-Identifier: Apache-2.0
 */

/**
 * @fileoverview Class to encapsulate an editable field.  Always uses an
 * iframe to contain the editable area, never inherits the style of the
 * surrounding page, and is always a fixed height.
 *
 * @see ../demos/editor/editor.html
 * @see ../demos/editor/field_basic.html
 */

goog.provide('goog.editor.Field');
goog.provide('goog.editor.Field.EventType');

goog.require('goog.a11y.aria');
goog.require('goog.a11y.aria.Role');
goog.require('goog.array');
goog.require('goog.asserts');
goog.require('goog.async.Delay');
goog.require('goog.dom');
goog.require('goog.dom.Range');
goog.require('goog.dom.TagName');
goog.require('goog.dom.classlist');
goog.require('goog.dom.safe');
goog.require('goog.editor.BrowserFeature');
goog.require('goog.editor.Command');
goog.require('goog.editor.PluginImpl');
goog.require('goog.editor.icontent');
goog.require('goog.editor.icontent.FieldFormatInfo');
goog.require('goog.editor.icontent.FieldStyleInfo');
goog.require('goog.editor.node');
goog.require('goog.editor.range');
goog.require('goog.events');
goog.require('goog.events.EventHandler');
goog.require('goog.events.EventTarget');
goog.require('goog.events.EventType');
goog.require('goog.events.KeyCodes');
goog.require('goog.functions');
goog.require('goog.html.SafeHtml');
goog.require('goog.html.SafeStyleSheet');
goog.require('goog.html.legacyconversions');
goog.require('goog.labs.userAgent.platform');
goog.require('goog.log');
goog.require('goog.log.Level');
goog.require('goog.string');
goog.require('goog.string.Unicode');
goog.require('goog.style');
goog.require('goog.userAgent');
goog.requireType('goog.Disposable');
goog.requireType('goog.dom.AbstractRange');
goog.requireType('goog.dom.SavedRange');
goog.requireType('goog.events.BrowserEvent');
goog.requireType('goog.html.TrustedResourceUrl');



/**
 * This class encapsulates an editable field.
 *
 * event: load Fires when the field is loaded
 * event: unload Fires when the field is unloaded (made not editable)
 *
 * event: beforechange Fires before the content of the field might change
 *
 * event: delayedchange Fires a short time after field has changed. If multiple
 *                      change events happen really close to each other only
 *                      the last one will trigger the delayedchange event.
 *
 * event: beforefocus Fires before the field becomes active
 * event: focus Fires when the field becomes active. Fires after the blur event
 * event: blur Fires when the field becomes inactive
 *
 * TODO: figure out if blur or beforefocus fires first in IE and make FF match
 *
 * @param {string} id An identifer for the field. This is used to find the
 *    field and the element associated with this field.
 * @param {Document=} opt_doc The document that the element with the given
 *     id can be found in.  If not provided, the default document is used.
 * @constructor
 * @extends {goog.events.EventTarget}
 */
goog.editor.Field = function(id, opt_doc) {
  'use strict';
  goog.events.EventTarget.call(this);

  /**
   * The id for this editable field, which must match the id of the element
   * associated with this field.
   * @type {string}
   */
  this.id = id;

  /**
   * The hash code for this field. Should be equal to the id.
   * @type {string}
   * @private
   */
  this.hashCode_ = id;

  /**
   * Dom helper for the editable node.
   * @type {?goog.dom.DomHelper}
   * @protected
   */
  this.editableDomHelper = null;

  /**
   * Map of class id to registered plugin.
   * @type {Object}
   * @private
   */
  this.plugins_ = {};


  /**
   * Plugins registered on this field, indexed by the goog.editor.PluginImpl.Op
   * that they support.
   * @type {!Object<!Array<!goog.editor.PluginImpl>>}
   * @private
   */
  this.indexedPlugins_ = {};

  for (var op in goog.editor.PluginImpl.OPCODE) {
    this.indexedPlugins_[op] = [];
  }


  /**
   * Additional styles to install for the editable field.
   * @type {!goog.html.SafeStyleSheet}
   * @protected
   */
  this.cssStyles = goog.html.SafeStyleSheet.EMPTY;

  // The field will not listen to change events until it has finished loading
  /** @private */
  this.stoppedEvents_ = {};
  this.stopEvent(goog.editor.Field.EventType.CHANGE);
  this.stopEvent(goog.editor.Field.EventType.DELAYEDCHANGE);
  /** @private */
  this.isModified_ = false;
  /** @private */
  this.isEverModified_ = false;
  /** @private */
  this.delayedChangeTimer_ = new goog.async.Delay(
      this.dispatchDelayedChange_, goog.editor.Field.DELAYED_CHANGE_FREQUENCY,
      this);
  this.registerDisposable(this.delayedChangeTimer_);

  /** @private */
  this.debouncedEvents_ = {};
  for (var key in goog.editor.Field.EventType) {
    this.debouncedEvents_[goog.editor.Field.EventType[key]] = 0;
  }

  if (goog.editor.BrowserFeature.USE_MUTATION_EVENTS) {
    /** @private */
    this.changeTimerGecko_ = new goog.async.Delay(
        this.handleChange, goog.editor.Field.CHANGE_FREQUENCY, this);
    this.registerDisposable(this.changeTimerGecko_);
  }

  /**
   * @type {goog.events.EventHandler<!goog.editor.Field>}
   * @protected
   */
  this.eventRegister = new goog.events.EventHandler(this);

  // Wrappers around this field, to be disposed when the field is disposed.
  /** @private */
  this.wrappers_ = [];

  /** @private */
  this.loadState_ = goog.editor.Field.LoadState_.UNEDITABLE;

  var doc = opt_doc || document;

  /**
   * The dom helper for the node to be made editable.
   * @type {goog.dom.DomHelper}
   * @protected
   */
  this.originalDomHelper = goog.dom.getDomHelper(doc);

  /**
   * The original node that is being made editable, or null if it has
   * not yet been found.
   * @type {Element}
   * @protected
   */
  this.originalElement = this.originalDomHelper.getElement(this.id);

  /**
   * @private {boolean}
   */
  this.followLinkInNewWindow_ =
      goog.editor.BrowserFeature.FOLLOWS_EDITABLE_LINKS;

  // Default to the same window as the field is in.
  /** @private */
  this.appWindow_ = this.originalDomHelper.getWindow();
};
goog.inherits(goog.editor.Field, goog.events.EventTarget);


/**
 * The editable dom node.
 * @type {?Element}
 * TODO(user): Make this private!
 */
goog.editor.Field.prototype.field = null;


/**
 * Logging object.
 * @type {goog.log.Logger}
 * @protected
 */
goog.editor.Field.prototype.logger = goog.log.getLogger('goog.editor.Field');


/**
 * Event types that can be stopped/started.
 * @enum {string}
 */
goog.editor.Field.EventType = {
  /**
   * Dispatched when the command state of the selection may have changed. This
   * event should be listened to for updating toolbar state.
   */
  COMMAND_VALUE_CHANGE: 'cvc',
  /**
   * Dispatched when the field is loaded and ready to use.
   */
  LOAD: 'load',
  /**
   * Dispatched when the field is fully unloaded and uneditable.
   */
  UNLOAD: 'unload',
  /**
   * Dispatched before the field contents are changed.
   */
  BEFORECHANGE: 'beforechange',
  /**
   * Dispatched when the field contents change, in FF only.
   * Used for internal resizing, please do not use.
   */
  CHANGE: 'change',
  /**
   * Dispatched on a slight delay after changes are made.
   * Use for autosave, or other times your app needs to know
   * that the field contents changed.
   */
  DELAYEDCHANGE: 'delayedchange',
  /**
   * Dispatched before focus in moved into the field.
   */
  BEFOREFOCUS: 'beforefocus',
  /**
   * Dispatched when focus is moved into the field.
   */
  FOCUS: 'focus',
  /**
   * Dispatched when the field is blurred.
   */
  BLUR: 'blur',
  /**
   * Dispatched before tab is handled by the field.  This is a legacy way
   * of controlling tab behavior.  Use trog.plugins.AbstractTabHandler now.
   */
  BEFORETAB: 'beforetab',
  /**
   * Dispatched after the iframe containing the field is resized, so that UI
   * components which contain it can respond.
   */
  IFRAME_RESIZED: 'ifrsz',
  /**
   * Dispatched after a user action that will eventually fire a SELECTIONCHANGE
   * event. For mouseups, this is fired immediately before SELECTIONCHANGE,
   * since {@link #handleMouseUp_} fires SELECTIONCHANGE immediately. May be
   * fired up to {@link #SELECTION_CHANGE_FREQUENCY_} ms before SELECTIONCHANGE
   * is fired in the case of keyup events, since they use
   * {@link #selectionChangeTimer_}.
   */
  BEFORESELECTIONCHANGE: 'beforeselectionchange',
  /**
   * Dispatched when the selection changes.
   * Use handleSelectionChange from plugin API instead of listening
   * directly to this event.
   */
  SELECTIONCHANGE: 'selectionchange'
};


/**
 * The load state of the field.
 * @enum {number}
 * @private
 */
goog.editor.Field.LoadState_ = {
  UNEDITABLE: 0,
  LOADING: 1,
  EDITABLE: 2
};


/**
 * The amount of time that a debounce blocks an event.
 * TODO(nicksantos): As of 9/30/07, this is only used for blocking
 * a keyup event after a keydown. We might need to tweak this for other
 * types of events. Maybe have a per-event debounce time?
 * @type {number}
 * @private
 */
goog.editor.Field.DEBOUNCE_TIME_MS_ = 500;


/**
 * There is at most one "active" field at a time.  By "active" field, we mean
 * a field that has focus and is being used.
 * @type {?string}
 * @private
 */
goog.editor.Field.activeFieldId_ = null;


/**
 * Whether this field is in "modal interaction" mode. This usually
 * means that it's being edited by a dialog.
 * @type {boolean}
 * @private
 */
goog.editor.Field.prototype.inModalMode_ = false;


/**
 * The window where dialogs and bubbles should be rendered.
 * @type {!Window}
 * @private
 */
goog.editor.Field.prototype.appWindow_;


/** @private {?goog.async.Delay} */
goog.editor.Field.prototype.selectionChangeTimer_ = null;

/** @private {boolean} */
goog.editor.Field.prototype.isSelectionEditable_ = false;


/**
 * Target node to be used when dispatching SELECTIONCHANGE asynchronously on
 * mouseup (to avoid IE quirk). Should be set just before starting the timer and
 * nulled right after consuming.
 * @type {Node}
 * @private
 */
goog.editor.Field.prototype.selectionChangeTarget_;


/**
 * Flag controlling whether to capture mouse up events on the window or not.
 * @type {boolean}
 * @private
 */
goog.editor.Field.prototype.useWindowMouseUp_ = false;


/**
 * FLag indicating the handling of a mouse event sequence.
 * @type {boolean}
 * @private
 */
goog.editor.Field.prototype.waitingForMouseUp_ = false;


/**
 * Sets the active field id.
 * @param {?string} fieldId The active field id.
 */
goog.editor.Field.setActiveFieldId = function(fieldId) {
  'use strict';
  goog.editor.Field.activeFieldId_ = fieldId;
};


/**
 * @return {?string} The id of the active field.
 */
goog.editor.Field.getActiveFieldId = function() {
  'use strict';
  return goog.editor.Field.activeFieldId_;
};


/**
 * Sets flag to control whether to use window mouse up after seeing
 * a mouse down operation on the field.
 * @param {boolean} flag True to track window mouse up.
 */
goog.editor.Field.prototype.setUseWindowMouseUp = function(flag) {
  'use strict';
  goog.asserts.assert(
      !flag || !this.usesIframe(),
      'procssing window mouse up should only be enabled when not using iframe');
  this.useWindowMouseUp_ = flag;
};


/**
 * @return {boolean} Whether we're in modal interaction mode. When this
 *     returns true, another plugin is interacting with the field contents
 *     in a synchronous way, and expects you not to make changes to
 *     the field's DOM structure or selection.
 */
goog.editor.Field.prototype.inModalMode = function() {
  'use strict';
  return this.inModalMode_;
};


/**
 * @param {boolean} inModalMode Sets whether we're in modal interaction mode.
 */
goog.editor.Field.prototype.setModalMode = function(inModalMode) {
  'use strict';
  this.inModalMode_ = inModalMode;
};


/**
 * Returns a string usable as a hash code for this field. For field's
 * that were created with an id, the hash code is guaranteed to be the id.
 * TODO(user): I think we can get rid of this.  Seems only used from editor.
 * @return {string} The hash code for this editable field.
 */
goog.editor.Field.prototype.getHashCode = function() {
  'use strict';
  return this.hashCode_;
};


/**
 * Returns the editable DOM element or null if this field
 * is not editable.
 * <p>On IE or Safari this is the element with contentEditable=true
 * (in whitebox mode, the iFrame body).
 * <p>On Gecko this is the iFrame body
 * TODO(user): How do we word this for subclass version?
 * @return {Element} The editable DOM element, defined as above.
 */
goog.editor.Field.prototype.getElement = function() {
  'use strict';
  return this.field;
};


/**
 * Returns original DOM element that is being made editable by Trogedit or
 * null if that element has not yet been found in the appropriate document.
 * @return {Element} The original element.
 */
goog.editor.Field.prototype.getOriginalElement = function() {
  'use strict';
  return this.originalElement;
};


/**
 * Registers a keyboard event listener on the field.  This is necessary for
 * Gecko since the fields are contained in an iFrame and there is no way to
 * auto-propagate key events up to the main window.
 * @param {string|Array<string>} type Event type to listen for or array of
 *    event types, for example goog.events.EventType.KEYDOWN.
 * @param {Function} listener Function to be used as the listener.
 * @param {boolean=} opt_capture Whether to use capture phase (optional,
 *    defaults to false).
 * @param {Object=} opt_handler Object in whose scope to call the listener.
 */
goog.editor.Field.prototype.addListener = function(
    type, listener, opt_capture, opt_handler) {
  'use strict';
  var elem = this.getElement();
  // On Gecko, keyboard events only reliably fire on the document element when
  // using an iframe.
  if (goog.editor.BrowserFeature.USE_DOCUMENT_FOR_KEY_EVENTS && elem &&
      this.usesIframe()) {
    elem = elem.ownerDocument;
  }
  if (opt_handler) {
    this.eventRegister.listenWithScope(
        elem, type, listener, opt_capture, opt_handler);
  } else {
    this.eventRegister.listen(elem, type, listener, opt_capture);
  }
};


/**
 * Returns the registered plugin with the given classId.
 * @param {string} classId classId of the plugin.
 * @return {?goog.editor.PluginImpl} Registered plugin with the given classId.
 */
goog.editor.Field.prototype.getPluginByClassId = function(classId) {
  'use strict';
  return this.plugins_[classId] || null;
};


/**
 * Registers the plugin with the editable field.
 * @param {!goog.editor.PluginImpl} plugin The plugin to register.
 */
goog.editor.Field.prototype.registerPlugin = function(plugin) {
  'use strict';
  var classId = plugin.getTrogClassId();
  if (this.plugins_[classId]) {
    goog.log.error(
        this.logger, 'Cannot register the same class of plugin twice.');
  }
  this.plugins_[classId] = plugin;

  // Only key events and execute should have these has* functions with a custom
  // handler array since they need to be very careful about performance.
  // The rest of the plugin hooks should be event-based.
  for (var op in goog.editor.PluginImpl.OPCODE) {
    var opcode = goog.editor.PluginImpl.OPCODE[op];
    if (plugin[opcode]) {
      this.indexedPlugins_[op].push(plugin);
    }
  }
  plugin.registerFieldObject(this);

  // By default we enable all plugins for fields that are currently loaded.
  if (this.isLoaded()) {
    plugin.enable(this);
  }
};


/**
 * Unregisters the plugin with this field.
 * @param {?goog.editor.PluginImpl} plugin The plugin to unregister.
 */
goog.editor.Field.prototype.unregisterPlugin = function(plugin) {
  'use strict';
  if (!plugin) {
    return;
  }

  var classId = plugin.getTrogClassId();
  if (!this.plugins_[classId]) {
    goog.log.error(
        this.logger, 'Cannot unregister a plugin that isn\'t registered.');
  }
  delete this.plugins_[classId];

  for (var op in goog.editor.PluginImpl.OPCODE) {
    var opcode = goog.editor.PluginImpl.OPCODE[op];
    if (plugin[opcode]) {
      goog.array.remove(this.indexedPlugins_[op], plugin);
    }
  }

  plugin.unregisterFieldObject(this);
};


/**
 * Sets the value that will replace the style attribute of this field's
 * element when the field is made non-editable. This method is called with the
 * current value of the style attribute when the field is made editable.
 * @param {string} cssText The value of the style attribute.
 */
goog.editor.Field.prototype.setInitialStyle = function(cssText) {
  'use strict';
  /** @suppress {strictMissingProperties} Added to tighten compiler checks */
  this.cssText = cssText;
};


/**
 * Reset the properties on the original field element to how it was before
 * it was made editable.
 */
goog.editor.Field.prototype.resetOriginalElemProperties = function() {
  'use strict';
  var field = this.getOriginalElement();
  field.removeAttribute('contentEditable');
  field.removeAttribute('g_editable');
  field.removeAttribute('role');

  if (!this.id) {
    field.removeAttribute('id');
  } else {
    field.id = this.id;
  }

  /** @suppress {strictMissingProperties} Added to tighten compiler checks */
  field.className = this.savedClassName_ || '';

  /** @suppress {strictMissingProperties} Added to tighten compiler checks */
  var cssText = this.cssText;
  if (!cssText) {
    field.removeAttribute('style');
  } else {
    goog.dom.setProperties(field, {'style': cssText});
  }

  if (typeof (this.originalFieldLineHeight_) === 'string') {
    goog.style.setStyle(field, 'lineHeight', this.originalFieldLineHeight_);
    /** @suppress {strictMissingProperties} Added to tighten compiler checks */
    this.originalFieldLineHeight_ = null;
  }
};


/**
 * Checks the modified state of the field.
 * Note: Changes that take place while the goog.editor.Field.EventType.CHANGE
 * event is stopped do not effect the modified state.
 * @param {boolean=} opt_useIsEverModified Set to true to check if the field
 *   has ever been modified since it was created, otherwise checks if the field
 *   has been modified since the last goog.editor.Field.EventType.DELAYEDCHANGE
 *   event was dispatched.
 * @return {boolean} Whether the field has been modified.
 */
goog.editor.Field.prototype.isModified = function(opt_useIsEverModified) {
  'use strict';
  return opt_useIsEverModified ? this.isEverModified_ : this.isModified_;
};


/**
 * Number of milliseconds after a change when the change event should be fired.
 * @type {number}
 */
goog.editor.Field.CHANGE_FREQUENCY = 15;


/**
 * Number of milliseconds between delayed change events.
 * @type {number}
 */
goog.editor.Field.DELAYED_CHANGE_FREQUENCY = 250;


/**
 * @return {boolean} Whether the field is implemented as an iframe.
 */
goog.editor.Field.prototype.usesIframe = goog.functions.TRUE;


/**
 * @return {boolean} Whether the field should be rendered with a fixed
 *     height, or should expand to fit its contents.
 */
goog.editor.Field.prototype.isFixedHeight = goog.functions.TRUE;


/**
 * Map of keyCodes (not charCodes) that cause changes in the field contents.
 * @type {Object}
 * @private
 */
goog.editor.Field.KEYS_CAUSING_CHANGES_ = {
  46: true,  // DEL
  8: true    // BACKSPACE
};

if (!goog.userAgent.IE) {
  // Only IE doesn't change the field by default upon tab.
  // TODO(user): This really isn't right now that we have tab plugins.
  goog.editor.Field.KEYS_CAUSING_CHANGES_[9] = true;  // TAB
}


/**
 * Map of keyCodes (not charCodes) that when used in conjunction with the
 * Ctrl key cause changes in the field contents. These are the keys that are
 * not handled by basic formatting trogedit plugins.
 * @type {Object}
 * @private
 */
goog.editor.Field.CTRL_KEYS_CAUSING_CHANGES_ = {
  86: true,  // V
  88: true   // X
};

if ((goog.userAgent.WINDOWS || goog.labs.userAgent.platform.isAndroid()) &&
    !goog.userAgent.GECKO) {
  // In IE and Webkit, input from IME (Input Method Editor) does not generate a
  // keypress event so we have to rely on the keydown event. This way we have
  // false positives while the user is using keyboard to select the
  // character to input, but it is still better than the false negatives
  // that ignores user's final input at all.
  // The same phenomina happen on android devices - no KeyPress events are
  // emitted, and all KeyDown events have no useful charCode or other
  // identifying information (see
  // https://bugs.chromium.org/p/chromium/issues/detail?id=118639 for
  // background, but it's considered WAI by various Input Method experts).
  goog.editor.Field.KEYS_CAUSING_CHANGES_[229] = true;  // from IME;
}


/**
 * Returns true if the keypress generates a change in contents.
 * @param {goog.events.BrowserEvent} e The event.
 * @param {boolean} testAllKeys True to test for all types of generating keys.
 *     False to test for only the keys found in
 *     goog.editor.Field.KEYS_CAUSING_CHANGES_.
 * @return {boolean} Whether the keypress generates a change in contents.
 * @private
 */
goog.editor.Field.isGeneratingKey_ = function(e, testAllKeys) {
  'use strict';
  if (goog.editor.Field.isSpecialGeneratingKey_(e)) {
    return true;
  }

  return !!(
      testAllKeys && !(e.ctrlKey || e.metaKey) &&
      (!goog.userAgent.GECKO || e.charCode));
};


/**
 * Returns true if the keypress generates a change in the contents.
 * due to a special key listed in goog.editor.Field.KEYS_CAUSING_CHANGES_
 * @param {goog.events.BrowserEvent} e The event.
 * @return {boolean} Whether the keypress generated a change in the contents.
 * @private
 */
goog.editor.Field.isSpecialGeneratingKey_ = function(e) {
  'use strict';
  var testCtrlKeys = (e.ctrlKey || e.metaKey) &&
      e.keyCode in goog.editor.Field.CTRL_KEYS_CAUSING_CHANGES_;
  var testRegularKeys = !(e.ctrlKey || e.metaKey) &&
      e.keyCode in goog.editor.Field.KEYS_CAUSING_CHANGES_;

  return testCtrlKeys || testRegularKeys;
};


/**
 * Sets the application window.
 * @param {!Window} appWindow The window where dialogs and bubbles should be
 *     rendered.
 */
goog.editor.Field.prototype.setAppWindow = function(appWindow) {
  'use strict';
  this.appWindow_ = appWindow;
};


/**
 * Returns the "application" window, where dialogs and bubbles
 * should be rendered.
 * @return {!Window} The window.
 */
goog.editor.Field.prototype.getAppWindow = function() {
  'use strict';
  return this.appWindow_;
};


/**
 * Sets the zIndex that the field should be based off of.
 * TODO(user): Get rid of this completely.  Here for Sites.
 *     Should this be set directly on UI plugins?
 *
 * @param {number} zindex The base zIndex of the editor.
 */
goog.editor.Field.prototype.setBaseZindex = function(zindex) {
  'use strict';
  /** @suppress {strictMissingProperties} Added to tighten compiler checks */
  this.baseZindex_ = zindex;
};


/**
 * Returns the zindex of the base level of the field.
 *
 * @return {number} The base zindex of the editor.
 * @suppress {strictMissingProperties} Added to tighten compiler checks
 */
goog.editor.Field.prototype.getBaseZindex = function() {
  'use strict';
  return this.baseZindex_ || 0;
};


/**
 * Sets up the field object and window util of this field, and enables this
 * editable field with all registered plugins.
 * This is essential to the initialization of the field.
 * It must be called when the field becomes fully loaded and editable.
 * @param {Element} field The field property.
 * @protected
 */
goog.editor.Field.prototype.setupFieldObject = function(field) {
  'use strict';
  this.loadState_ = goog.editor.Field.LoadState_.EDITABLE;
  this.field = field;
  this.editableDomHelper = goog.dom.getDomHelper(field);
  this.isModified_ = false;
  this.isEverModified_ = false;
  field.setAttribute('g_editable', 'true');
  goog.a11y.aria.setRole(field, goog.a11y.aria.Role.TEXTBOX);
};


/**
 * Help make the field not editable by setting internal data structures to null,
 * and disabling this field with all registered plugins.
 * @private
 */
goog.editor.Field.prototype.tearDownFieldObject_ = function() {
  'use strict';
  this.loadState_ = goog.editor.Field.LoadState_.UNEDITABLE;

  for (var classId in this.plugins_) {
    var plugin = this.plugins_[classId];
    if (!plugin.activeOnUneditableFields()) {
      plugin.disable(this);
    }
  }

  this.field = null;
  this.editableDomHelper = null;
};


/**
 * Initialize listeners on the field.
 * @private
 */
goog.editor.Field.prototype.setupChangeListeners_ = function() {
  'use strict';


  if (goog.editor.BrowserFeature.SUPPORTS_FOCUSIN) {
    this.addListener(goog.events.EventType.FOCUS, this.dispatchFocus_);
    this.addListener(goog.events.EventType.FOCUSIN, this.dispatchBeforeFocus_);
  } else {
    this.addListener(
        goog.events.EventType.FOCUS, this.dispatchFocusAndBeforeFocus_);
  }
  this.addListener(
      goog.events.EventType.BLUR, this.dispatchBlur,
      goog.editor.BrowserFeature.USE_MUTATION_EVENTS);

  if (goog.editor.BrowserFeature.USE_MUTATION_EVENTS) {
    // Ways to detect changes in Mozilla:
    //
    // keypress - check event.charCode (only typable characters has a
    //            charCode), but also keyboard commands lile Ctrl+C will
    //            return a charCode.
    // dragdrop - fires when the user drops something. This does not necessary
    //            lead to a change but we cannot detect if it will or not
    //
    // Known Issues: We cannot detect cut and paste using menus
    //               We cannot detect when someone moves something out of the
    //               field using drag and drop.
    //
    this.setupMutationEventHandlersGecko();
  } else {
    // Ways to detect that a change is about to happen in other browsers.
    // (IE and Safari have these events. Opera appears to work, but we haven't
    //  researched it.)
    //
    // onbeforepaste
    // onbeforecut
    // ondrop - happens when the user drops something on the editable text
    //          field the value at this time does not contain the dropped text
    // ondragleave - when the user drags something from the current document.
    //               This might not cause a change if the action was copy
    //               instead of move
    // onkeypress - IE only fires keypress events if the key will generate
    //              output. It will not trigger for delete and backspace
    // onkeydown - For delete and backspace
    //
    // known issues: IE triggers beforepaste just by opening the edit menu
    //               delete at the end should not cause beforechange
    //               backspace at the beginning should not cause beforechange
    //               see above in ondragleave
    // TODO(user): Why don't we dispatchBeforeChange from the
    // handleDrop event for all browsers?
    this.addListener(
        ['beforecut', 'beforepaste', 'drop', 'dragend'],
        this.dispatchBeforeChange);
    this.addListener(
        ['cut', 'paste'], goog.functions.lock(this.dispatchChange));
    this.addListener('drop', this.handleDrop_);
  }

  // TODO(user): Figure out why we use dragend vs dragdrop and
  // document this better.
  var dropEventName = goog.userAgent.WEBKIT ? 'dragend' : 'dragdrop';
  this.addListener(dropEventName, this.handleDrop_);

  this.addListener(goog.events.EventType.KEYDOWN, this.handleKeyDown_);
  this.addListener(goog.events.EventType.KEYPRESS, this.handleKeyPress_);
  this.addListener(goog.events.EventType.KEYUP, this.handleKeyUp_);

  // Handles changes from non-keyboard forms of input. Such as choosing a
  // spellcheck suggestion.
  this.addListener(goog.events.EventType.INPUT, this.handleChange);

  this.selectionChangeTimer_ = new goog.async.Delay(
      this.handleSelectionChangeTimer_,
      goog.editor.Field.SELECTION_CHANGE_FREQUENCY_, this);
  this.registerDisposable(this.selectionChangeTimer_);

  if (this.followLinkInNewWindow_) {
    this.addListener(
        goog.events.EventType.CLICK, goog.editor.Field.cancelLinkClick_);
  }

  this.addListener(goog.events.EventType.MOUSEDOWN, this.handleMouseDown_);
  if (this.useWindowMouseUp_) {
    this.eventRegister.listen(
        this.editableDomHelper.getDocument(), goog.events.EventType.MOUSEUP,
        this.handleMouseUp_);
    this.addListener(goog.events.EventType.DRAGSTART, this.handleDragStart_);
  } else {
    this.addListener(goog.events.EventType.MOUSEUP, this.handleMouseUp_);
  }
};


/**
 * Frequency to check for selection changes.
 * @type {number}
 * @private
 */
goog.editor.Field.SELECTION_CHANGE_FREQUENCY_ = 250;


/**
 * Stops all listeners and timers.
 * @protected
 */
goog.editor.Field.prototype.clearListeners = function() {
  'use strict';
  if (this.eventRegister) {
    this.eventRegister.removeAll();
  }


  if (this.changeTimerGecko_) {
    this.changeTimerGecko_.stop();
  }
  this.delayedChangeTimer_.stop();
};


/** @override */
goog.editor.Field.prototype.disposeInternal = function() {
  'use strict';
  if (this.isLoading() || this.isLoaded()) {
    goog.log.warning(this.logger, 'Disposing a field that is in use.');
  }

  if (this.getOriginalElement()) {
    this.execCommand(goog.editor.Command.CLEAR_LOREM);
  }

  this.tearDownFieldObject_();
  this.clearListeners();
  this.clearFieldLoadListener_();
  this.originalDomHelper = null;

  if (this.eventRegister) {
    this.eventRegister.dispose();
    this.eventRegister = null;
  }

  this.removeAllWrappers();

  if (goog.editor.Field.getActiveFieldId() == this.id) {
    goog.editor.Field.setActiveFieldId(null);
  }

  for (var classId in this.plugins_) {
    var plugin = this.plugins_[classId];
    if (plugin.isAutoDispose()) {
      plugin.dispose();
    }
  }
  delete (this.plugins_);

  goog.editor.Field.superClass_.disposeInternal.call(this);
};


/**
 * Attach an wrapper to this field, to be thrown out when the field
 * is disposed.
 * @param {goog.Disposable} wrapper The wrapper to attach.
 */
goog.editor.Field.prototype.attachWrapper = function(wrapper) {
  'use strict';
  this.wrappers_.push(wrapper);
};


/**
 * Removes all wrappers and destroys them.
 */
goog.editor.Field.prototype.removeAllWrappers = function() {
  'use strict';
  var wrapper;
  while (wrapper = this.wrappers_.pop()) {
    wrapper.dispose();
  }
};


/**
 * Sets whether activating a hyperlink in this editable field will open a new
 *     window or not.
 * @param {boolean} followLinkInNewWindow
 */
goog.editor.Field.prototype.setFollowLinkInNewWindow = function(
    followLinkInNewWindow) {
  'use strict';
  this.followLinkInNewWindow_ = followLinkInNewWindow;
};


/**
 * List of mutation events in Gecko browsers.
 * @type {Array<string>}
 * @protected
 */
goog.editor.Field.MUTATION_EVENTS_GECKO = [
  'DOMNodeInserted', 'DOMNodeRemoved', 'DOMNodeRemovedFromDocument',
  'DOMNodeInsertedIntoDocument', 'DOMCharacterDataModified'
];


/**
 * Mutation events tell us when something has changed for mozilla.
 * @protected
 */
goog.editor.Field.prototype.setupMutationEventHandlersGecko = function() {
  'use strict';
  // Always use DOMSubtreeModified on Gecko when not using an iframe so that
  // DOM mutations outside the Field do not trigger handleMutationEventGecko_.
  if (goog.editor.BrowserFeature.HAS_DOM_SUBTREE_MODIFIED_EVENT ||
      !this.usesIframe()) {
    this.eventRegister.listen(
        this.getElement(), 'DOMSubtreeModified',
        this.handleMutationEventGecko_);
  } else {
    var doc = this.getEditableDomHelper().getDocument();
    this.eventRegister.listen(
        doc, goog.editor.Field.MUTATION_EVENTS_GECKO,
        this.handleMutationEventGecko_, true);

    // DOMAttrModified fires for a lot of events we want to ignore.  This goes
    // through a different handler so that we can ignore many of these.
    this.eventRegister.listen(
        doc, 'DOMAttrModified',
        goog.bind(
            this.handleDomAttrChange, this, this.handleMutationEventGecko_),
        true);
  }
};


/**
 * Handle before change key events and fire the beforetab event if appropriate.
 * This needs to happen on keydown in IE and keypress in FF.
 * @param {goog.events.BrowserEvent} e The browser event.
 * @return {boolean} Whether to still perform the default key action.  Only set
 *     to true if the actual event has already been canceled.
 * @private
 */
goog.editor.Field.prototype.handleBeforeChangeKeyEvent_ = function(e) {
  'use strict';
  // There are two reasons to block a key:
  var block =
      // #1: to intercept a tab
      // TODO: possibly don't allow clients to intercept tabs outside of LIs and
      // maybe tables as well?
      (e.keyCode == goog.events.KeyCodes.TAB && !this.dispatchBeforeTab_(e)) ||
      // #2: to block a Firefox-specific bug where Macs try to navigate
      // back a page when you hit command+left arrow or comamnd-right arrow.
      // See https://bugzilla.mozilla.org/show_bug.cgi?id=341886
      // This was fixed in Firefox 29, but still exists in older versions.
      (goog.userAgent.GECKO && e.metaKey &&
       !goog.userAgent.isVersionOrHigher(29) &&
       (e.keyCode == goog.events.KeyCodes.LEFT ||
        e.keyCode == goog.events.KeyCodes.RIGHT));

  if (block) {
    e.preventDefault();
    return false;
  } else {
    // In Gecko we have both keyCode and charCode. charCode is for human
    // readable characters like a, b and c. However pressing ctrl+c and so on
    // also causes charCode to be set.

    // TODO(arv): Del at end of field or backspace at beginning should be
    // ignored.
    /** @suppress {strictMissingProperties} Added to tighten compiler checks */
    this.gotGeneratingKey_ = !!e.charCode ||
        goog.editor.Field.isGeneratingKey_(e, goog.userAgent.GECKO);
    if (this.gotGeneratingKey_) {
      this.dispatchBeforeChange();
      // TODO(robbyw): Should we return the value of the above?
    }
  }

  return true;
};


/**
 * Keycodes that result in a selectionchange event (e.g. the cursor moving).
 * @type {!Object<number, number>}
 */
goog.editor.Field.SELECTION_CHANGE_KEYCODES = {
  8: 1,   // backspace
  9: 1,   // tab
  13: 1,  // enter
  33: 1,  // page up
  34: 1,  // page down
  35: 1,  // end
  36: 1,  // home
  37: 1,  // left
  38: 1,  // up
  39: 1,  // right
  40: 1,  // down
  46: 1   // delete
};


/**
 * Map of keyCodes (not charCodes) that when used in conjunction with the
 * Ctrl key cause selection changes in the field contents. These are the keys
 * that are not handled by the basic formatting trogedit plugins. Note that
 * combinations like Ctrl-left etc are already handled in
 * SELECTION_CHANGE_KEYCODES
 * @type {Object}
 * @private
 */
goog.editor.Field.CTRL_KEYS_CAUSING_SELECTION_CHANGES_ = {
  65: true,  // A
  86: true,  // V
  88: true   // X
};


/**
 * Map of keyCodes (not charCodes) that might need to be handled as a keyboard
 * shortcut (even when ctrl/meta key is not pressed) by some plugin. Currently
 * it is a small list. If it grows too big we can optimize it by using ranges
 * or extending it from SELECTION_CHANGE_KEYCODES
 * @type {Object}
 * @private
 */
goog.editor.Field.POTENTIAL_SHORTCUT_KEYCODES_ = {
  8: 1,   // backspace
  9: 1,   // tab
  13: 1,  // enter
  27: 1,  // esc
  33: 1,  // page up
  34: 1,  // page down
  37: 1,  // left
  38: 1,  // up
  39: 1,  // right
  40: 1   // down
};


/**
 * Calls all the plugins of the given operation, in sequence, with the
 * given arguments. This is short-circuiting: once one plugin cancels
 * the event, no more plugins will be invoked.
 * @param {goog.editor.PluginImpl.Op} op A plugin op.
 * @param {...*} var_args The arguments to the plugin.
 * @return {boolean} True if one of the plugins cancel the event, false
 *    otherwise.
 * @private
 */
goog.editor.Field.prototype.invokeShortCircuitingOp_ = function(op, var_args) {
  'use strict';
  var plugins = this.indexedPlugins_[op];
  var argList = Array.prototype.slice.call(arguments, 1);
  for (var i = 0; i < plugins.length; ++i) {
    // If the plugin returns true, that means it handled the event and
    // we shouldn't propagate to the other plugins.
    var plugin = plugins[i];
    if ((plugin.isEnabled(this) ||
         goog.editor.PluginImpl.IRREPRESSIBLE_OPS[op]) &&
        plugin[goog.editor.PluginImpl.OPCODE[op]].apply(plugin, argList)) {
      // Only one plugin is allowed to handle the event. If for some reason
      // a plugin wants to handle it and still allow other plugins to handle
      // it, it shouldn't return true.
      return true;
    }
  }

  return false;
};


/**
 * Invoke this operation on all plugins with the given arguments.
 * @param {!goog.editor.PluginImpl.Op} op A plugin op.
 * @param {...*} var_args The arguments to the plugin.
 * @private
 */
goog.editor.Field.prototype.invokeOp_ = function(op, var_args) {
  'use strict';
  var plugins = this.indexedPlugins_[op];
  var argList = Array.prototype.slice.call(arguments, 1);
  for (var i = 0; i < plugins.length; ++i) {
    var plugin = plugins[i];
    if (plugin.isEnabled(this) ||
        goog.editor.PluginImpl.IRREPRESSIBLE_OPS[op]) {
      plugin[goog.editor.PluginImpl.OPCODE[op]].apply(plugin, argList);
    }
  }
};


/**
 * Reduce this argument over all plugins. The result of each plugin invocation
 * will be passed to the next plugin invocation. See goog.array.reduce.
 * @param {goog.editor.PluginImpl.Op} op A plugin op.
 * @param {string} arg The argument to reduce. For now, we assume it's a
 *     string, but we should widen this later if there are reducing
 *     plugins that don't operate on strings.
 * @param {...*} var_args Any extra arguments to pass to the plugin. These args
 *     will not be reduced.
 * @return {string} The reduced argument.
 * @private
 */
goog.editor.Field.prototype.reduceOp_ = function(op, arg, var_args) {
  'use strict';
  var plugins = this.indexedPlugins_[op];
  var argList = Array.prototype.slice.call(arguments, 1);
  for (var i = 0; i < plugins.length; ++i) {
    var plugin = plugins[i];
    if (plugin.isEnabled(this) ||
        goog.editor.PluginImpl.IRREPRESSIBLE_OPS[op]) {
      argList[0] =
          plugin[goog.editor.PluginImpl.OPCODE[op]].apply(plugin, argList);
    }
  }
  return argList[0];
};


/**
 * Prepare the given contents, then inject them into the editable field.
 * @param {?string} contents The contents to prepare.
 * @param {Element} field The field element.
 * @protected
 */
goog.editor.Field.prototype.injectContents = function(contents, field) {
  'use strict';
  var styles = {};
  var newHtml = this.getInjectableContents(contents, styles);
  goog.style.setStyle(field, styles);
  goog.editor.node.replaceInnerHtml(field, newHtml);
};


/**
 * Returns prepared contents that can be injected into the editable field.
 * @param {?string} contents The contents to prepare.
 * @param {Object} styles A map that will be populated with styles that should
 *     be applied to the field element together with the contents.
 * @return {string} The prepared contents.
 */
goog.editor.Field.prototype.getInjectableContents = function(contents, styles) {
  'use strict';
  return this.reduceOp_(
      goog.editor.PluginImpl.Op.PREPARE_CONTENTS_HTML, contents || '', styles);
};


/**
 * Handles keydown on the field.
 * @param {goog.events.BrowserEvent} e The browser event.
 * @private
 */
goog.editor.Field.prototype.handleKeyDown_ = function(e) {
  'use strict';
  // Mac only fires Cmd+A for keydown, not keyup: b/22407515.
  if (goog.userAgent.MAC && e.keyCode == goog.events.KeyCodes.A) {
    this.maybeStartSelectionChangeTimer_(e);
  }

  if (!goog.editor.BrowserFeature.USE_MUTATION_EVENTS) {
    if (!this.handleBeforeChangeKeyEvent_(e)) {
      return;
    }
  }

  if (!this.invokeShortCircuitingOp_(goog.editor.PluginImpl.Op.KEYDOWN, e) &&
      goog.editor.BrowserFeature.USES_KEYDOWN) {
    this.handleKeyboardShortcut_(e);
  }
};


/**
 * Handles keypress on the field.
 * @param {goog.events.BrowserEvent} e The browser event.
 * @private
 */
goog.editor.Field.prototype.handleKeyPress_ = function(e) {
  'use strict';
  if (goog.editor.BrowserFeature.USE_MUTATION_EVENTS) {
    if (!this.handleBeforeChangeKeyEvent_(e)) {
      return;
    }
  } else {
    // In IE only keys that generate output trigger keypress
    // In Mozilla charCode is set for keys generating content.
    /** @suppress {strictMissingProperties} Added to tighten compiler checks */
    this.gotGeneratingKey_ = true;
    this.dispatchBeforeChange();
  }

  if (!this.invokeShortCircuitingOp_(goog.editor.PluginImpl.Op.KEYPRESS, e) &&
      !goog.editor.BrowserFeature.USES_KEYDOWN) {
    this.handleKeyboardShortcut_(e);
  }
};


/**
 * Handles keyup on the field.
 * @param {!goog.events.BrowserEvent} e The browser event.
 * @private
 * @suppress {strictMissingProperties} Added to tighten compiler checks
 */
goog.editor.Field.prototype.handleKeyUp_ = function(e) {
  'use strict';
  if (!goog.editor.BrowserFeature.USE_MUTATION_EVENTS &&
      (this.gotGeneratingKey_ ||
       goog.editor.Field.isSpecialGeneratingKey_(e))) {
    // The special keys won't have set the gotGeneratingKey flag, so we check
    // for them explicitly
    this.handleChange();
  }

  this.invokeShortCircuitingOp_(goog.editor.PluginImpl.Op.KEYUP, e);
  this.maybeStartSelectionChangeTimer_(e);
};


/**
 * Fires `BEFORESELECTIONCHANGE` and starts the selection change timer
 * (which will fire `SELECTIONCHANGE`) if the given event is a key event
 * that causes a selection change.
 * @param {!goog.events.BrowserEvent} e The browser event.
 * @private
 */
goog.editor.Field.prototype.maybeStartSelectionChangeTimer_ = function(e) {
  'use strict';
  if (this.isEventStopped(goog.editor.Field.EventType.SELECTIONCHANGE)) {
    return;
  }

  if (goog.editor.Field.SELECTION_CHANGE_KEYCODES[e.keyCode] ||
      ((e.ctrlKey || e.metaKey) &&
       goog.editor.Field.CTRL_KEYS_CAUSING_SELECTION_CHANGES_[e.keyCode])) {
    this.dispatchEvent(goog.editor.Field.EventType.BEFORESELECTIONCHANGE);
    this.selectionChangeTimer_.start();
  }
};


/**
 * Handles keyboard shortcuts on the field.  Note that we bake this into our
 * handleKeyPress/handleKeyDown rather than using goog.events.KeyHandler or
 * goog.ui.KeyboardShortcutHandler for performance reasons.  Since these
 * are handled on every key stroke, we do not want to be going out to the
 * event system every time.
 * @param {goog.events.BrowserEvent} e The browser event.
 * @private
 * @suppress {strictMissingProperties} Added to tighten compiler checks
 */
goog.editor.Field.prototype.handleKeyboardShortcut_ = function(e) {
  'use strict';
  // Alt key is used for i18n languages to enter certain characters. like
  // control + alt + z (used for IMEs) and control + alt + s for Polish.
  // So we only invoke handleKeyboardShortcut for alt + shift only.
  if (e.altKey && !e.shiftKey) {
    return;
  }
  // TODO(user): goog.events.KeyHandler uses much more complicated logic
  // to determine key.  Consider changing to what they do.
  var key = e.charCode || e.keyCode;
  var stringKey = String.fromCharCode(key).toLowerCase();
  var isPrimaryModifierPressed = goog.userAgent.MAC ? e.metaKey : e.ctrlKey;
  var isAltShiftPressed = e.altKey && e.shiftKey;
  if (isPrimaryModifierPressed || isAltShiftPressed ||
      goog.editor.Field.POTENTIAL_SHORTCUT_KEYCODES_[e.keyCode]) {
    if (key == 17) {  // Ctrl key
      // In IE and Webkit pressing Ctrl key itself results in this event.
      return;
    }

    // Ctrl+Cmd+Space generates a charCode for a backtick on Mac Firefox, but
    // has the correct string key in the browser event.
    if (goog.userAgent.MAC && goog.userAgent.GECKO && stringKey == '`' &&
        e.getBrowserEvent().key == ' ') {
      stringKey = ' ';
    }
    // Converting the keyCode for "\" using fromCharCode creates "u", so we need
    // to look out for it specifically.
    if (e.keyCode == goog.events.KeyCodes.BACKSLASH) {
      stringKey = '\\';
    }

    if (this.invokeShortCircuitingOp_(
            goog.editor.PluginImpl.Op.SHORTCUT, e, stringKey,
            isPrimaryModifierPressed)) {
      e.preventDefault();
      // We don't call stopPropagation as some other handler outside of
      // trogedit might need it.
    }
  }
};


/**
 * Executes an editing command as per the registered plugins.
 * @param {string} command The command to execute.
 * @param {...*} var_args Any additional parameters needed to execute the
 *     command.
 * @return {*} False if the command wasn't handled, otherwise, the result of
 *     the command.
 */
goog.editor.Field.prototype.execCommand = function(command, var_args) {
  'use strict';
  var args = arguments;
  var result;

  var plugins = this.indexedPlugins_[goog.editor.PluginImpl.Op.EXEC_COMMAND];
  for (var i = 0; i < plugins.length; ++i) {
    // If the plugin supports the command, that means it handled the
    // event and we shouldn't propagate to the other plugins.
    var plugin = plugins[i];
    if (plugin.isEnabled(this) && plugin.isSupportedCommand(command)) {
      result = plugin.execCommand.apply(plugin, args);
      break;
    }
  }

  return result;
};


/**
 * Gets the value of command(s).
 * @param {string|Array<string>} commands String name(s) of the command.
 * @return {*} Value of each command. Returns false (or array of falses)
 *     if designMode is off or the field is otherwise uneditable, and
 *     there are no activeOnUneditable plugins for the command.
 */
goog.editor.Field.prototype.queryCommandValue = function(commands) {
  'use strict';
  var isEditable = this.isLoaded() && this.isSelectionEditable();
  if (typeof commands === 'string') {
    return this.queryCommandValueInternal_(commands, isEditable);
  } else {
    var state = {};
    for (var i = 0; i < commands.length; i++) {
      state[commands[i]] =
          this.queryCommandValueInternal_(commands[i], isEditable);
    }
    return state;
  }
};


/**
 * Gets the value of this command.
 * @param {string} command The command to check.
 * @param {boolean} isEditable Whether the field is currently editable.
 * @return {*} The state of this command. Null if not handled.
 *     False if the field is uneditable and there are no handlers for
 *     uneditable commands.
 * @private
 */
goog.editor.Field.prototype.queryCommandValueInternal_ = function(
    command, isEditable) {
  'use strict';
  var plugins = this.indexedPlugins_[goog.editor.PluginImpl.Op.QUERY_COMMAND];
  for (var i = 0; i < plugins.length; ++i) {
    var plugin = plugins[i];
    if (plugin.isEnabled(this) && plugin.isSupportedCommand(command) &&
        (isEditable || plugin.activeOnUneditableFields())) {
      return plugin.queryCommandValue(command);
    }
  }
  return isEditable ? null : false;
};


/**
 * Fires a change event only if the attribute change effects the editiable
 * field. We ignore events that are internal browser events (ie scrollbar
 * state change)
 * @param {Function} handler The function to call if this is not an internal
 *     browser event.
 * @param {goog.events.BrowserEvent} browserEvent The browser event.
 * @protected
 * @suppress {strictMissingProperties} Added to tighten compiler checks
 */
goog.editor.Field.prototype.handleDomAttrChange = function(
    handler, browserEvent) {
  'use strict';
  if (this.isEventStopped(goog.editor.Field.EventType.CHANGE)) {
    return;
  }

  var e = browserEvent.getBrowserEvent();

  // For XUL elements, since we don't care what they are doing
  try {
    if (e.originalTarget.prefix ||
        /** @type {!Element} */ (e.originalTarget).nodeName == 'scrollbar') {
      return;
    }
  } catch (ex1) {
    // Some XUL nodes don't like you reading their properties.  If we got
    // the exception, this implies  a XUL node so we can return.
    return;
  }

  // Check if prev and new values are different, sometimes this fires when
  // nothing has really changed.
  if (e.prevValue == e.newValue) {
    return;
  }
  handler.call(this, e);
};


/**
 * Handle a mutation event.
 * @param {goog.events.BrowserEvent|Event} e The browser event.
 * @private
 * @suppress {strictMissingProperties} Added to tighten compiler checks
 */
goog.editor.Field.prototype.handleMutationEventGecko_ = function(e) {
  'use strict';
  if (this.isEventStopped(goog.editor.Field.EventType.CHANGE)) {
    return;
  }

  /** @suppress {strictMissingProperties} Added to tighten compiler checks */
  e = e.getBrowserEvent ? e.getBrowserEvent() : e;
  // For people with firebug, firebug sets this property on elements it is
  // inserting into the dom.
  if (e.target.firebugIgnore) {
    return;
  }

  this.isModified_ = true;
  this.isEverModified_ = true;
  this.changeTimerGecko_.start();
};


/**
 * Handle drop events. Deal with focus/selection issues and set the document
 * as changed.
 * @param {goog.events.BrowserEvent} e The browser event.
 * @private
 */
goog.editor.Field.prototype.handleDrop_ = function(e) {
  'use strict';
  if (goog.userAgent.IE) {
    // TODO(user): This should really be done in the loremipsum plugin.
    this.execCommand(goog.editor.Command.CLEAR_LOREM, true);
  }

  // TODO(user): I just moved this code to this location, but I wonder why
  // it is only done for this case.  Investigate.
  if (goog.editor.BrowserFeature.USE_MUTATION_EVENTS) {
    this.dispatchFocusAndBeforeFocus_();
  }

  this.dispatchChange();
};


/**
 * @return {HTMLIFrameElement} The iframe that's body is editable.
 * @protected
 */
goog.editor.Field.prototype.getEditableIframe = function() {
  'use strict';
  var dh;
  if (this.usesIframe() && (dh = this.getEditableDomHelper())) {
    // If the iframe has been destroyed, the dh could still exist since the
    // node may not be gc'ed, but fetching the window can fail.
    var win = dh.getWindow();
    return /** @type {HTMLIFrameElement} */ (win && win.frameElement);
  }
  return null;
};


/**
 * @return {goog.dom.DomHelper?} The dom helper for the editable node.
 */
goog.editor.Field.prototype.getEditableDomHelper = function