highlightediting.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module highlight/highlightediting
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import HighlightCommand from './highlightcommand';
  10. /**
  11. * The highlight editing feature. It introduces the {@link module:highlight/highlightcommand~HighlightCommand command} and the `highlight`
  12. * attribute in the {@link module:engine/model/model~Model model} which renders in the {@link module:engine/view/view view}
  13. * as a `<mark>` element with a `class` attribute (`<mark class="marker-green">...</mark>`) depending
  14. * on the {@link module:highlight/highlight~HighlightConfig configuration}.
  15. *
  16. * @extends module:core/plugin~Plugin
  17. */
  18. export default class HighlightEditing extends Plugin {
  19. /**
  20. * @inheritDoc
  21. */
  22. constructor( editor ) {
  23. super( editor );
  24. editor.config.define( 'highlight', {
  25. options: [
  26. {
  27. model: 'yellowMarker',
  28. class: 'marker-yellow',
  29. title: 'Yellow marker',
  30. color: 'var(--ck-highlight-marker-yellow)',
  31. type: 'marker'
  32. },
  33. {
  34. model: 'greenMarker',
  35. class: 'marker-green',
  36. title: 'Green marker',
  37. color: 'var(--ck-highlight-marker-green)',
  38. type: 'marker'
  39. },
  40. {
  41. model: 'pinkMarker',
  42. class: 'marker-pink',
  43. title: 'Pink marker',
  44. color: 'var(--ck-highlight-marker-pink)',
  45. type: 'marker'
  46. },
  47. {
  48. model: 'blueMarker',
  49. class: 'marker-blue',
  50. title: 'Blue marker',
  51. color: 'var(--ck-highlight-marker-blue)',
  52. type: 'marker'
  53. },
  54. {
  55. model: 'redPen',
  56. class: 'pen-red',
  57. title: 'Red pen',
  58. color: 'var(--ck-highlight-pen-red)',
  59. type: 'pen'
  60. },
  61. {
  62. model: 'greenPen',
  63. class: 'pen-green',
  64. title: 'Green pen',
  65. color: 'var(--ck-highlight-pen-green)',
  66. type: 'pen'
  67. }
  68. ]
  69. } );
  70. }
  71. /**
  72. * @inheritDoc
  73. */
  74. init() {
  75. const editor = this.editor;
  76. // Allow highlight attribute on text nodes.
  77. editor.model.schema.extend( '$text', { allowAttributes: 'highlight' } );
  78. const options = editor.config.get( 'highlight.options' );
  79. // Set-up the two-way conversion.
  80. editor.conversion.attributeToElement( _buildDefinition( options ) );
  81. editor.commands.add( 'highlight', new HighlightCommand( editor ) );
  82. }
  83. }
  84. // Converts the options array to a converter definition.
  85. //
  86. // @param {Array.<module:highlight/highlight~HighlightOption>} options An array with configured options.
  87. // @returns {module:engine/conversion/conversion~ConverterDefinition}
  88. function _buildDefinition( options ) {
  89. const definition = {
  90. model: {
  91. key: 'highlight',
  92. values: []
  93. },
  94. view: {}
  95. };
  96. for ( const option of options ) {
  97. definition.model.values.push( option.model );
  98. definition.view[ option.model ] = {
  99. name: 'mark',
  100. classes: option.class
  101. };
  102. }
  103. return definition;
  104. }