utils.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  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 image/image/utils
  7. */
  8. import { findOptimalInsertionPosition, isWidget, toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
  9. /**
  10. * Converts a given {@link module:engine/view/element~Element} to an image widget:
  11. * * Adds a {@link module:engine/view/element~Element#_setCustomProperty custom property} allowing to recognize the image widget element.
  12. * * Calls the {@link module:widget/utils~toWidget} function with the proper element's label creator.
  13. *
  14. * @param {module:engine/view/element~Element} viewElement
  15. * @param {module:engine/view/downcastwriter~DowncastWriter} writer An instance of the view writer.
  16. * @param {String} label The element's label. It will be concatenated with the image `alt` attribute if one is present.
  17. * @returns {module:engine/view/element~Element}
  18. */
  19. export function toImageWidget( viewElement, writer, label ) {
  20. writer.setCustomProperty( 'image', true, viewElement );
  21. return toWidget( viewElement, writer, { label: labelCreator } );
  22. function labelCreator() {
  23. const imgElement = getViewImgFromWidget( viewElement );
  24. const altText = imgElement.getAttribute( 'alt' );
  25. return altText ? `${ altText } ${ label }` : label;
  26. }
  27. }
  28. /**
  29. * Checks if a given view element is an image widget.
  30. *
  31. * @param {module:engine/view/element~Element} viewElement
  32. * @returns {Boolean}
  33. */
  34. export function isImageWidget( viewElement ) {
  35. return !!viewElement.getCustomProperty( 'image' ) && isWidget( viewElement );
  36. }
  37. /**
  38. * Returns an image widget editing view element if one is selected.
  39. *
  40. * @param {module:engine/view/selection~Selection|module:engine/view/documentselection~DocumentSelection} selection
  41. * @returns {module:engine/view/element~Element|null}
  42. */
  43. export function getSelectedImageWidget( selection ) {
  44. const viewElement = selection.getSelectedElement();
  45. if ( viewElement && isImageWidget( viewElement ) ) {
  46. return viewElement;
  47. }
  48. return null;
  49. }
  50. /**
  51. * Checks if the provided model element is an `image`.
  52. *
  53. * @param {module:engine/model/element~Element} modelElement
  54. * @returns {Boolean}
  55. */
  56. export function isImage( modelElement ) {
  57. return !!modelElement && modelElement.is( 'image' );
  58. }
  59. /**
  60. * Handles inserting single file. This method unifies image insertion using {@link module:widget/utils~findOptimalInsertionPosition} method.
  61. *
  62. * model.change( writer => {
  63. * insertImage( writer, model, { src: 'path/to/image.jpg' } );
  64. * } );
  65. *
  66. * @param {module:engine/model/writer~Writer} writer
  67. * @param {module:engine/model/model~Model} model
  68. * @param {Object} [attributes={}] Attributes of inserted image
  69. */
  70. export function insertImage( writer, model, attributes = {} ) {
  71. const imageElement = writer.createElement( 'image', attributes );
  72. const insertAtSelection = findOptimalInsertionPosition( model.document.selection, model );
  73. model.insertContent( imageElement, insertAtSelection );
  74. // Inserting an image might've failed due to schema regulations.
  75. if ( imageElement.parent ) {
  76. writer.setSelection( imageElement, 'on' );
  77. }
  78. }
  79. /**
  80. * Checks if image can be inserted at current model selection.
  81. *
  82. * @param {module:engine/model/model~Model} model
  83. * @returns {Boolean}
  84. */
  85. export function isImageAllowed( model ) {
  86. const schema = model.schema;
  87. const selection = model.document.selection;
  88. return isImageAllowedInParent( selection, schema, model ) &&
  89. !checkSelectionOnObject( selection, schema ) &&
  90. isInOtherImage( selection );
  91. }
  92. /**
  93. * Get view `<img>` element from the view widget (`<figure>`).
  94. *
  95. * Assuming that image is always a first child of a widget (ie. `figureView.getChild( 0 )`) is unsafe as other features might
  96. * inject their own elements to the widget.
  97. *
  98. * The `<img>` can be wrapped to other elements, e.g. `<a>`. Nested check required.
  99. *
  100. * @param {module:engine/view/element~Element} figureView
  101. * @returns {module:engine/view/element~Element}
  102. */
  103. export function getViewImgFromWidget( figureView ) {
  104. const figureChildren = [];
  105. for ( const figureChild of figureView.getChildren() ) {
  106. figureChildren.push( figureChild );
  107. if ( figureChild.is( 'element' ) ) {
  108. figureChildren.push( ...figureChild.getChildren() );
  109. }
  110. }
  111. return figureChildren.find( viewChild => viewChild.is( 'img' ) );
  112. }
  113. // Checks if image is allowed by schema in optimal insertion parent.
  114. //
  115. // @returns {Boolean}
  116. function isImageAllowedInParent( selection, schema, model ) {
  117. const parent = getInsertImageParent( selection, model );
  118. return schema.checkChild( parent, 'image' );
  119. }
  120. // Check if selection is on object.
  121. //
  122. // @returns {Boolean}
  123. function checkSelectionOnObject( selection, schema ) {
  124. const selectedElement = selection.getSelectedElement();
  125. return selectedElement && schema.isObject( selectedElement );
  126. }
  127. // Checks if selection is placed in other image (ie. in caption).
  128. function isInOtherImage( selection ) {
  129. return [ ...selection.focus.getAncestors() ].every( ancestor => !ancestor.is( 'image' ) );
  130. }
  131. // Returns a node that will be used to insert image with `model.insertContent` to check if image can be placed there.
  132. function getInsertImageParent( selection, model ) {
  133. const insertAt = findOptimalInsertionPosition( selection, model );
  134. const parent = insertAt.parent;
  135. if ( parent.isEmpty && !parent.is( '$root' ) ) {
  136. return parent.parent;
  137. }
  138. return parent;
  139. }