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

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