8
0

containerelement.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module engine/view/containerelement
  7. */
  8. import Element from './element';
  9. /**
  10. * Containers are elements which define document structure. They define boundaries for
  11. * {@link module:engine/view/attributeelement~AttributeElement attributes}. They are mostly use for block elements like `<p>` or `<div>`.
  12. *
  13. * Editing engine does not define fixed HTML DTD. This is why the type of the {@link module:engine/view/element~Element} need to
  14. * be defined by the feature developer.
  15. *
  16. * Creating an element you should use `ContainerElement` class or {@link module:engine/view/attributeelement~AttributeElement}. This is
  17. * important to define the type of the element because of two reasons:
  18. *
  19. * Firstly, {@link module:engine/view/domconverter~DomConverter} needs the information what is an editable block to convert elements to
  20. * DOM properly. {@link module:engine/view/domconverter~DomConverter} will ensure that `ContainerElement` is editable and it is possible
  21. * to put caret inside it, even if the container is empty.
  22. *
  23. * Secondly, {@link module:engine/view/writer~writer view writer} uses this information.
  24. * Nodes {@link module:engine/view/writer~writer.breakAttributes breaking} and {@link module:engine/view/writer~writer.mergeAttributes
  25. * merging}
  26. * is performed only in a bounds of a container nodes.
  27. *
  28. * For instance if `<p>` is an container and `<b>` is attribute:
  29. *
  30. * <p><b>fo^o</b></p>
  31. *
  32. * {@link module:engine/view/writer~writer.breakAttributes breakAttributes} will create:
  33. *
  34. * <p><b>fo</b><b>o</b></p>
  35. *
  36. * There might be a need to mark `<span>` element as a container node, for example in situation when it will be a
  37. * container of an inline widget:
  38. *
  39. * <span color="red">foobar</span> // attribute
  40. * <span data-widget>foobar</span> // container
  41. *
  42. * @extends module:engine/view/element~Element
  43. */
  44. export default class ContainerElement extends Element {
  45. /**
  46. * Creates a container element.
  47. *
  48. * @see module:engine/view/element~Element
  49. */
  50. constructor( name, attrs, children ) {
  51. super( name, attrs, children );
  52. /**
  53. * Returns block {@link module:engine/view/filler filler} offset or `null` if block filler is not needed.
  54. *
  55. * @method #getFillerOffset
  56. * @returns {Number|null} Block filler offset or `null` if block filler is not needed.
  57. */
  58. this.getFillerOffset = getFillerOffset;
  59. }
  60. }
  61. // Returns block {@link module:engine/view/filler filler} offset or `null` if block filler is not needed.
  62. //
  63. // @returns {Number|null} Block filler offset or `null` if block filler is not needed.
  64. function getFillerOffset() {
  65. /*jshint validthis:true */
  66. return this.childCount === 0 ? 0 : null;
  67. }