editableelement.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. /**
  2. * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. import ContainerElement from './containerelement.js';
  6. import mix from '../../utils/mix.js';
  7. import ObservableMixin from '../../utils/observablemixin.js';
  8. /**
  9. * Editable element which can be a {@link view.engine.RootEditableElement root} or nested editable area in the editor.
  10. *
  11. * @memberOf engine.view
  12. * @extends engine.view.ContainerElement
  13. * @mixes utils.ObservaleMixin
  14. */
  15. export default class EditableElement extends ContainerElement {
  16. /**
  17. * Creates an editable element.
  18. */
  19. constructor( document, name, attrs, children ) {
  20. super( name, attrs, children );
  21. /**
  22. * {@link engine.view.Document} that is an owner of this root.
  23. *
  24. * @private
  25. * @member {engine.view.Document} engine.view.RootEditableElement#_document
  26. */
  27. this._document = document;
  28. /**
  29. * Whether the editable is in read-write or read-only mode.
  30. *
  31. * @observable
  32. * @member {Boolean} engine.view.EditableElement#isReadOnly
  33. */
  34. this.set( 'isReadOnly', false );
  35. /**
  36. * Whether the editable is focused.
  37. *
  38. * This property updates when {@link engine.view.Document#isFocused document.isFocused} is changed and after each
  39. * {@link engine.view.Document#render render} method call.
  40. *
  41. * @readonly
  42. * @observable
  43. * @member {Boolean} engine.view.EditableElement#isFocused
  44. */
  45. this.bind( 'isFocused' ).to(
  46. document,
  47. 'isFocused',
  48. ( isFocused ) => isFocused && document.selection.editableElement == this
  49. );
  50. // Update focus state after each rendering. Selection might be moved to different editable before rendering,
  51. // but this does not mean that editable has focus - it will be placed there after rendering.
  52. this.listenTo( document, 'render', () => {
  53. this.isFocused = document.isFocused && document.selection.editableElement == this;
  54. }, { priority: 'low' } );
  55. }
  56. /**
  57. * {@link engine.view.Document View document} reference that owns this editable element.
  58. *
  59. * @type {engine.view.Document|null}
  60. */
  61. get document() {
  62. return this._document;
  63. }
  64. }
  65. mix( EditableElement, ObservableMixin );