8
0

element-reconversion-demo.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals ClassicEditor, toWidget, toWidgetEditable, console, window, prompt, document */
  6. import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
  7. import createElement from '@ckeditor/ckeditor5-utils/src/dom/createelement';
  8. const getTypeFromViewElement = viewElement => {
  9. for ( const type of [ 'info', 'warning' ] ) {
  10. if ( viewElement.hasClass( `side-card-${ type }` ) ) {
  11. return type;
  12. }
  13. }
  14. return 'info';
  15. };
  16. const upcastCard = ( viewElement, { writer } ) => {
  17. const sideCard = writer.createElement( 'sideCard' );
  18. const type = getTypeFromViewElement( viewElement );
  19. writer.setAttribute( 'cardType', type, sideCard );
  20. const urlWrapper = [ ...viewElement.getChildren() ].find( child => {
  21. return child.is( 'element', 'div' ) && child.hasClass( 'side-card-url' );
  22. } );
  23. if ( urlWrapper ) {
  24. writer.setAttribute( 'cardURL', urlWrapper.getChild( 0 ).data, sideCard );
  25. }
  26. return sideCard;
  27. };
  28. function addActionButton( text, callback, domElement, editor ) {
  29. const domDocument = domElement.ownerDocument;
  30. const button = createElement( domDocument, 'button', {}, [ text ] );
  31. button.addEventListener( 'click', () => {
  32. editor.model.change( callback );
  33. } );
  34. domElement.appendChild( button );
  35. return button;
  36. }
  37. const renderActionsView = ( editor, modelElement ) => function( domElement ) {
  38. addActionButton( 'Set URL', writer => {
  39. // eslint-disable-next-line no-alert
  40. const newURL = prompt( 'Set URL', modelElement.getAttribute( 'cardURL' ) || '' );
  41. writer.setAttribute( 'cardURL', newURL, modelElement );
  42. }, domElement, editor );
  43. const currentType = modelElement.getAttribute( 'cardType' );
  44. const newType = currentType === 'info' ? 'warning' : 'info';
  45. addActionButton( 'Change type', writer => {
  46. writer.setAttribute( 'cardType', newType, modelElement );
  47. }, domElement, editor );
  48. const childCount = modelElement.childCount;
  49. const addButton = addActionButton( 'Add section', writer => {
  50. writer.insertElement( 'sideCardSection', modelElement, 'end' );
  51. }, domElement, editor );
  52. if ( childCount > 4 ) {
  53. addButton.setAttribute( 'disabled', 'disabled' );
  54. }
  55. const removeButton = addActionButton( 'Remove section', writer => {
  56. writer.remove( modelElement.getChild( childCount - 1 ) );
  57. }, domElement, editor );
  58. if ( childCount < 3 ) {
  59. removeButton.setAttribute( 'disabled', 'disabled' );
  60. }
  61. };
  62. const downcastSideCard = editor => {
  63. return ( modelElement, { writer, consumable, mapper } ) => {
  64. const type = modelElement.getAttribute( 'cardType' ) || 'info';
  65. const sideCardView = writer.createContainerElement( 'aside', {
  66. class: `side-card side-card-${ type }`
  67. } );
  68. // Create inner views from side card children.
  69. for ( const child of modelElement.getChildren() ) {
  70. const childView = writer.createEditableElement( 'div' );
  71. // Child is either a "title" or "section".
  72. if ( child.is( 'element', 'sideCardTitle' ) ) {
  73. writer.addClass( 'side-card-title', childView );
  74. } else {
  75. writer.addClass( 'side-card-section', childView );
  76. }
  77. // It is important to consume & bind converted elements.
  78. consumable.consume( child, 'insert' );
  79. mapper.bindElements( child, childView );
  80. // Make it an editable part of the widget.
  81. toWidgetEditable( childView, writer );
  82. writer.insert( writer.createPositionAt( sideCardView, 'end' ), childView );
  83. }
  84. const urlAttribute = modelElement.getAttribute( 'cardURL' );
  85. // Do not render empty URL field
  86. if ( urlAttribute ) {
  87. const urlBox = writer.createRawElement( 'div', {
  88. class: 'side-card-url'
  89. }, function( domElement ) {
  90. domElement.innerText = `URL: "${ urlAttribute }"`;
  91. } );
  92. writer.insert( writer.createPositionAt( sideCardView, 'end' ), urlBox );
  93. }
  94. // Inner element used to render simple UI that allows to change side card's attributes.
  95. const actionsView = writer.createRawElement( 'div', {
  96. class: 'side-card-actions',
  97. contenteditable: 'false', // Prevent editing of the element:
  98. 'data-cke-ignore-events': 'true' // Allows using custom UI elements inside editing view.
  99. }, renderActionsView( editor, modelElement ) ); // See the full code for details.
  100. writer.insert( writer.createPositionAt( sideCardView, 'end' ), actionsView );
  101. return toWidget( sideCardView, writer, { widgetLabel: 'Side card' } );
  102. };
  103. };
  104. class ComplexBox {
  105. constructor( editor ) {
  106. this._defineSchema( editor );
  107. this._defineConversion( editor );
  108. }
  109. _defineConversion( editor ) {
  110. const conversion = editor.conversion;
  111. conversion.for( 'upcast' )
  112. .elementToElement( {
  113. view: { name: 'aside', classes: [ 'side-card' ] },
  114. model: upcastCard
  115. } )
  116. .elementToElement( {
  117. view: { name: 'div', classes: [ 'side-card-title' ] },
  118. model: 'sideCardTitle'
  119. } )
  120. .elementToElement( {
  121. view: { name: 'div', classes: [ 'side-card-section' ] },
  122. model: 'sideCardSection'
  123. } );
  124. // The downcast conversion must be split as you need a widget in the editing pipeline.
  125. conversion.for( 'downcast' ).elementToElement( {
  126. model: 'sideCard',
  127. view: downcastSideCard( editor ),
  128. triggerBy: {
  129. attributes: [ 'cardType', 'cardURL' ],
  130. children: [ 'sideCardSection' ]
  131. }
  132. } );
  133. }
  134. _defineSchema( editor ) {
  135. const schema = editor.model.schema;
  136. // The main element with attributes for type and URL:
  137. schema.register( 'sideCard', {
  138. allowWhere: '$block',
  139. isObject: true,
  140. allowAttributes: [ 'cardType', 'cardURL' ]
  141. } );
  142. // A text-only title.
  143. schema.register( 'sideCardTitle', {
  144. isLimit: true,
  145. allowIn: 'sideCard'
  146. } );
  147. // Allow text in title...
  148. schema.extend( '$text', { allowIn: 'sideCardTitle' } );
  149. // ...but disallow any text attribute inside.
  150. schema.addAttributeCheck( context => {
  151. if ( context.endsWith( 'sideCardTitle $text' ) ) {
  152. return false;
  153. }
  154. } );
  155. // A content block which can have any content allowed in $root.
  156. schema.register( 'sideCardSection', {
  157. isLimit: true,
  158. allowIn: 'sideCard',
  159. allowContentOf: '$root'
  160. } );
  161. }
  162. }
  163. ClassicEditor
  164. .create( document.querySelector( '#editor-element-reconversion' ), {
  165. cloudServices: CS_CONFIG,
  166. extraPlugins: [ ComplexBox ],
  167. image: {
  168. toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
  169. },
  170. table: {
  171. contentToolbar: [
  172. 'tableColumn',
  173. 'tableRow',
  174. 'mergeTableCells'
  175. ]
  176. },
  177. toolbar: {
  178. items: [ 'heading', '|', 'bold', 'italic' ],
  179. viewportTopOffset: window.getViewportTopOffsetConfig()
  180. }
  181. } )
  182. .then( editor => {
  183. window.editor = editor;
  184. } )
  185. .catch( err => {
  186. console.error( err );
  187. } );