extending-content-custom-figure-attributes.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals ClassicEditor, Plugin, console, window, document */
  6. import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
  7. /**
  8. * Plugin that converts custom attributes for elements that are wrapped in <figure> in the view.
  9. */
  10. class CustomFigureAttributes extends Plugin {
  11. /**
  12. * Setups conversion and extends table & image features schema.
  13. *
  14. * Schema extending must be done in the “afterInit()” call because plugins define their schema in “init()“.
  15. */
  16. afterInit() {
  17. const editor = this.editor;
  18. // Define on which elements the CSS classes should be preserved:
  19. setupCustomClassConversion( 'img', 'image', editor );
  20. setupCustomClassConversion( 'table', 'table', editor );
  21. editor.conversion.for( 'upcast' ).add( upcastCustomClasses( 'figure' ), { priority: 'low' } );
  22. // Define custom attributes that should be preserved.
  23. setupCustomAttributeConversion( 'img', 'image', 'id', editor );
  24. setupCustomAttributeConversion( 'table', 'table', 'id', editor );
  25. }
  26. }
  27. /**
  28. * Sets up a conversion that preservers classes on <img> and <table> elements.
  29. */
  30. function setupCustomClassConversion( viewElementName, modelElementName, editor ) {
  31. // The 'customClass' attribute will store custom classes from the data in the model so schema definitions allow this attribute.
  32. editor.model.schema.extend( modelElementName, { allowAttributes: [ 'customClass' ] } );
  33. // Define upcast converters for the <img> and <table> elements with a "low" priority so they are run after the default converters.
  34. editor.conversion.for( 'upcast' ).add( upcastCustomClasses( viewElementName ), { priority: 'low' } );
  35. // Define downcast converters for a model element with a "low" priority so they are run after the default converters.
  36. editor.conversion.for( 'downcast' ).add( downcastCustomClasses( modelElementName ), { priority: 'low' } );
  37. }
  38. /**
  39. * Sets up a conversion for a custom attribute on view elements contained inside a <figure>.
  40. *
  41. * This method:
  42. * - Adds proper schema rules.
  43. * - Adds an upcast converter.
  44. * - Adds a downcast converter.
  45. */
  46. function setupCustomAttributeConversion( viewElementName, modelElementName, viewAttribute, editor ) {
  47. // Extend the schema to store an attribute in the model.
  48. const modelAttribute = `custom${ viewAttribute }`;
  49. editor.model.schema.extend( modelElementName, { allowAttributes: [ modelAttribute ] } );
  50. editor.conversion.for( 'upcast' ).add( upcastAttribute( viewElementName, viewAttribute, modelAttribute ) );
  51. editor.conversion.for( 'downcast' ).add( downcastAttribute( modelElementName, viewElementName, viewAttribute, modelAttribute ) );
  52. }
  53. /**
  54. * Creates an upcast converter that will pass all classes from the view element to the model element.
  55. */
  56. function upcastCustomClasses( elementName ) {
  57. return dispatcher => dispatcher.on( `element:${ elementName }`, ( evt, data, conversionApi ) => {
  58. const viewItem = data.viewItem;
  59. const modelRange = data.modelRange;
  60. const modelElement = modelRange && modelRange.start.nodeAfter;
  61. if ( !modelElement ) {
  62. return;
  63. }
  64. // The upcast conversion picks up classes from the base element and from the <figure> element so it should be extensible.
  65. const currentAttributeValue = modelElement.getAttribute( 'customClass' ) || [];
  66. currentAttributeValue.push( ...viewItem.getClassNames() );
  67. conversionApi.writer.setAttribute( 'customClass', currentAttributeValue, modelElement );
  68. } );
  69. }
  70. /**
  71. * Creates a downcast converter that adds classes defined in the `customClass` attribute to a given view element.
  72. *
  73. * This converter expects that the view element is nested in a <figure> element.
  74. */
  75. function downcastCustomClasses( modelElementName ) {
  76. return dispatcher => dispatcher.on( `insert:${ modelElementName }`, ( evt, data, conversionApi ) => {
  77. const modelElement = data.item;
  78. const viewFigure = conversionApi.mapper.toViewElement( modelElement );
  79. if ( !viewFigure ) {
  80. return;
  81. }
  82. // The code below assumes that classes are set on the <figure> element...
  83. conversionApi.writer.addClass( modelElement.getAttribute( 'customClass' ), viewFigure );
  84. // ... but if you prefer the classes to be passed to the <img> element, find the view element inside the <figure>:
  85. //
  86. // const viewElement = findViewChild( viewFigure, viewElementName, conversionApi );
  87. //
  88. // conversionApi.writer.addClass( modelElement.getAttribute( 'customClass' ), viewElement );
  89. } );
  90. }
  91. /**
  92. * Helper method that searches for a given view element in all children of the model element.
  93. *
  94. * @param {module:engine/view/item~Item} viewElement
  95. * @param {String} viewElementName
  96. * @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
  97. * @return {module:engine/view/item~Item}
  98. */
  99. function findViewChild( viewElement, viewElementName, conversionApi ) {
  100. const viewChildren = Array.from( conversionApi.writer.createRangeIn( viewElement ).getItems() );
  101. return viewChildren.find( item => item.is( viewElementName ) );
  102. }
  103. /**
  104. * Returns the custom attribute upcast converter.
  105. */
  106. function upcastAttribute( viewElementName, viewAttribute, modelAttribute ) {
  107. return dispatcher => dispatcher.on( `element:${ viewElementName }`, ( evt, data, conversionApi ) => {
  108. const viewItem = data.viewItem;
  109. const modelRange = data.modelRange;
  110. const modelElement = modelRange && modelRange.start.nodeAfter;
  111. if ( !modelElement ) {
  112. return;
  113. }
  114. conversionApi.writer.setAttribute( modelAttribute, viewItem.getAttribute( viewAttribute ), modelElement );
  115. } );
  116. }
  117. /**
  118. * Returns the custom attribute downcast converter.
  119. */
  120. function downcastAttribute( modelElementName, viewElementName, viewAttribute, modelAttribute ) {
  121. return dispatcher => dispatcher.on( `insert:${ modelElementName }`, ( evt, data, conversionApi ) => {
  122. const modelElement = data.item;
  123. const viewFigure = conversionApi.mapper.toViewElement( modelElement );
  124. const viewElement = findViewChild( viewFigure, viewElementName, conversionApi );
  125. if ( !viewElement ) {
  126. return;
  127. }
  128. conversionApi.writer.setAttribute( viewAttribute, modelElement.getAttribute( modelAttribute ), viewElement );
  129. } );
  130. }
  131. ClassicEditor
  132. .create( document.querySelector( '#snippet-custom-figure-attributes' ), {
  133. cloudServices: CS_CONFIG,
  134. extraPlugins: [ CustomFigureAttributes ],
  135. toolbar: {
  136. viewportTopOffset: window.getViewportTopOffsetConfig()
  137. }
  138. } )
  139. .then( editor => {
  140. window.editor = editor;
  141. } )
  142. .catch( err => {
  143. console.error( err.stack );
  144. } );