8
0

editableelement.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module engine/view/editableelement
  7. */
  8. import ContainerElement from './containerelement';
  9. import mix from '@ckeditor/ckeditor5-utils/src/mix';
  10. import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
  11. /**
  12. * Editable element which can be a {@link module:engine/view/rooteditableelement~RootEditableElement root}
  13. * or nested editable area in the editor.
  14. *
  15. * Editable is automatically read-only when its {@link module:engine/view/document~Document Document} is read-only.
  16. *
  17. * The constructor of this class shouldn't be used directly. To create new `EditableElement` use the
  18. * {@link module:engine/view/downcastwriter~DowncastWriter#createEditableElement `downcastWriter#createEditableElement()`} method.
  19. *
  20. * @extends module:engine/view/containerelement~ContainerElement
  21. * @mixes module:utils/observablemixin~ObservableMixin
  22. */
  23. export default class EditableElement extends ContainerElement {
  24. /**
  25. * Creates an editable element.
  26. *
  27. * @see module:engine/view/downcastwriter~DowncastWriter#createEditableElement
  28. * @protected
  29. */
  30. constructor( document, name, attrs, children ) {
  31. super( document, name, attrs, children );
  32. /**
  33. * Whether the editable is in read-write or read-only mode.
  34. *
  35. * @observable
  36. * @member {Boolean} module:engine/view/editableelement~EditableElement#isReadOnly
  37. */
  38. this.set( 'isReadOnly', false );
  39. /**
  40. * Whether the editable is focused.
  41. *
  42. * This property updates when {@link module:engine/view/document~Document#isFocused document.isFocused} or view
  43. * selection is changed.
  44. *
  45. * @readonly
  46. * @observable
  47. * @member {Boolean} module:engine/view/editableelement~EditableElement#isFocused
  48. */
  49. this.set( 'isFocused', false );
  50. this.bind( 'isReadOnly' ).to( document );
  51. this.bind( 'isFocused' ).to(
  52. document,
  53. 'isFocused',
  54. isFocused => isFocused && document.selection.editableElement == this
  55. );
  56. // Update focus state based on selection changes.
  57. this.listenTo( document.selection, 'change', () => {
  58. this.isFocused = document.isFocused && document.selection.editableElement == this;
  59. } );
  60. }
  61. /**
  62. * Checks whether this object is of the given.
  63. *
  64. * editableElement.is( 'editableElement' ); // -> true
  65. * editableElement.is( 'element' ); // -> true
  66. * editableElement.is( 'node' ); // -> true
  67. * editableElement.is( 'view:editableElement' ); // -> true
  68. * editableElement.is( 'view:element' ); // -> true
  69. * editableElement.is( 'view:node' ); // -> true
  70. *
  71. * editableElement.is( 'model:element' ); // -> false
  72. * editableElement.is( 'documentFragment' ); // -> false
  73. *
  74. * Assuming that the object being checked is an editbale element, you can also check its
  75. * {@link module:engine/view/editableelement~EditableElement#name name}:
  76. *
  77. * editableElement.is( 'element', 'div' ); // -> true if this is a div element
  78. * editableElement.is( 'editableElement', 'div' ); // -> same as above
  79. * text.is( 'element', 'div' ); -> false
  80. *
  81. * {@link module:engine/view/node~Node#is Check the entire list of view objects} which implement the `is()` method.
  82. *
  83. * @param {String} type Type to check.
  84. * @param {String} [name] Element name.
  85. * @returns {Boolean}
  86. */
  87. is( type, name = null ) {
  88. if ( !name ) {
  89. return type === 'editableElement' || type === 'view:editableElement' ||
  90. // From super.is(). This is highly utilised method and cannot call super. See ckeditor/ckeditor5#6529.
  91. type === 'containerElement' || type === 'view:containerElement' ||
  92. type === 'element' || type === 'view:element' ||
  93. type === 'node' || type === 'view:node';
  94. } else {
  95. return name === this.name && (
  96. type === 'editableElement' || type === 'view:editableElement' ||
  97. // From super.is(). This is highly utilised method and cannot call super. See ckeditor/ckeditor5#6529.
  98. type === 'containerElement' || type === 'view:containerElement' ||
  99. type === 'element' || type === 'view:element'
  100. );
  101. }
  102. }
  103. destroy() {
  104. this.stopListening();
  105. }
  106. }
  107. mix( EditableElement, ObservableMixin );