rawelement.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  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/rawelement
  7. */
  8. import Element from './element';
  9. import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
  10. import Node from './node';
  11. /**
  12. * The raw element class.
  13. *
  14. * The raw elements work as data containers ("wrappers", "sandboxes") but their children are not managed or
  15. * even recognized by the editor. This encapsulation allows integrations to maintain custom DOM structures
  16. * in the editor content without, for instance, worrying about compatibility with other editor features.
  17. * Raw elements are a perfect tool for integration with external frameworks and data sources.
  18. *
  19. * Unlike {@link module:engine/view/uielement~UIElement UI elements}, raw elements act like real editor
  20. * content (similar to {@link module:engine/view/containerelement~ContainerElement} or
  21. * {@link module:engine/view/emptyelement~EmptyElement}), they are considered by the editor selection and
  22. * {@link module:widget/utils~toWidget they can work as widgets}.
  23. *
  24. * To create a new raw element, use the
  25. * {@link module:engine/view/downcastwriter~DowncastWriter#createRawElement `downcastWriter#createRawElement()`} method.
  26. *
  27. * @extends module:engine/view/element~Element
  28. */
  29. export default class RawElement extends Element {
  30. /**
  31. * Creates a new instance of a raw element.
  32. *
  33. * Throws the `view-rawelement-cannot-add` {@link module:utils/ckeditorerror~CKEditorError CKEditorError} when the `children`
  34. * parameter is passed to inform that the usage of `RawElement` is incorrect (adding child nodes to `RawElement` is forbidden).
  35. *
  36. * @see module:engine/view/downcastwriter~DowncastWriter#createRawElement
  37. * @protected
  38. * @param {module:engine/view/document~Document} document The document instance to which this element belongs.
  39. * @param {String} name A node name.
  40. * @param {Object|Iterable} [attrs] The collection of attributes.
  41. * @param {module:engine/view/node~Node|Iterable.<module:engine/view/node~Node>} [children]
  42. * A list of nodes to be inserted into the created element.
  43. */
  44. constructor( document, name, attrs, children ) {
  45. super( document, name, attrs, children );
  46. /**
  47. * Returns `null` because filler is not needed for raw elements.
  48. *
  49. * @method #getFillerOffset
  50. * @returns {null} Always returns null.
  51. */
  52. this.getFillerOffset = getFillerOffset;
  53. }
  54. /**
  55. * Checks whether this object is of the given type or name.
  56. *
  57. * rawElement.is( 'rawElement' ); // -> true
  58. * rawElement.is( 'element' ); // -> true
  59. * rawElement.is( 'node' ); // -> true
  60. * rawElement.is( 'view:rawElement' ); // -> true
  61. * rawElement.is( 'view:element' ); // -> true
  62. * rawElement.is( 'view:node' ); // -> true
  63. *
  64. * rawElement.is( 'model:element' ); // -> false
  65. * rawElement.is( 'documentFragment' ); // -> false
  66. *
  67. * Assuming that the object being checked is a raw element, you can also check its
  68. * {@link module:engine/view/rawelement~RawElement#name name}:
  69. *
  70. * rawElement.is( 'img' ); // -> true if this is an img element
  71. * rawElement.is( 'rawElement', 'img' ); // -> same as above
  72. * text.is( 'img' ); -> false
  73. *
  74. * {@link module:engine/view/node~Node#is Check the entire list of view objects} which implement the `is()` method.
  75. *
  76. * @param {String} type The type to check when the `name` parameter is present.
  77. * Otherwise, it acts like the `name` parameter.
  78. * @param {String} [name] The element name.
  79. * @returns {Boolean}
  80. */
  81. is( type, name = null ) {
  82. if ( !name ) {
  83. return type === 'rawElement' || type === 'view:rawElement' ||
  84. // From super.is(). This is highly utilised method and cannot call super. See ckeditor/ckeditor5#6529.
  85. type === this.name || type === 'view:' + this.name ||
  86. type === 'element' || type === 'view:element' ||
  87. type === 'node' || type === 'view:node';
  88. } else {
  89. return name === this.name && (
  90. type === 'rawElement' || type === 'view:rawElement' ||
  91. type === 'element' || type === 'view:element'
  92. );
  93. }
  94. }
  95. /**
  96. * Overrides the {@link module:engine/view/element~Element#_insertChild} method.
  97. * Throws the `view-rawelement-cannot-add` {@link module:utils/ckeditorerror~CKEditorError CKEditorError} to prevent
  98. * adding any child nodes to a raw element.
  99. *
  100. * @protected
  101. */
  102. _insertChild( index, nodes ) {
  103. if ( nodes && ( nodes instanceof Node || Array.from( nodes ).length > 0 ) ) {
  104. /**
  105. * Cannot add children to a {@link module:engine/view/rawelement~RawElement} instance.
  106. *
  107. * @error view-rawelement-cannot-add
  108. */
  109. throw new CKEditorError(
  110. 'view-rawelement-cannot-add: Cannot add child nodes to a RawElement instance.',
  111. [ this, nodes ]
  112. );
  113. }
  114. }
  115. /**
  116. * This allows rendering the children of a {@link module:engine/view/rawelement~RawElement} on the DOM level.
  117. * This method is called by the {@link module:engine/view/domconverter~DomConverter} with the raw DOM element
  118. * passed as an argument, leaving the number and shape of the children up to the integrator.
  119. *
  120. * This method **must be defined** for the raw element to work:
  121. *
  122. * const myRawElement = downcastWriter.createRawElement( 'div' );
  123. *
  124. * myRawElement.render = function( domElement ) {
  125. * domElement.innerHTML = '<b>This is the raw content of myRawElement.</b>';
  126. * };
  127. *
  128. * @method #render
  129. * @param {HTMLElement} domElement The native DOM element representing the raw view element.
  130. */
  131. }
  132. // Returns `null` because block filler is not needed for raw elements.
  133. //
  134. // @returns {null}
  135. function getFillerOffset() {
  136. return null;
  137. }