highlightediting.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  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 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. static get pluginName() {
  23. return 'HighlightEditing';
  24. }
  25. /**
  26. * @inheritDoc
  27. */
  28. constructor( editor ) {
  29. super( editor );
  30. editor.config.define( 'highlight', {
  31. options: [
  32. {
  33. model: 'yellowMarker',
  34. class: 'marker-yellow',
  35. title: 'Yellow marker',
  36. color: 'var(--ck-highlight-marker-yellow)',
  37. type: 'marker'
  38. },
  39. {
  40. model: 'greenMarker',
  41. class: 'marker-green',
  42. title: 'Green marker',
  43. color: 'var(--ck-highlight-marker-green)',
  44. type: 'marker'
  45. },
  46. {
  47. model: 'pinkMarker',
  48. class: 'marker-pink',
  49. title: 'Pink marker',
  50. color: 'var(--ck-highlight-marker-pink)',
  51. type: 'marker'
  52. },
  53. {
  54. model: 'blueMarker',
  55. class: 'marker-blue',
  56. title: 'Blue marker',
  57. color: 'var(--ck-highlight-marker-blue)',
  58. type: 'marker'
  59. },
  60. {
  61. model: 'redPen',
  62. class: 'pen-red',
  63. title: 'Red pen',
  64. color: 'var(--ck-highlight-pen-red)',
  65. type: 'pen'
  66. },
  67. {
  68. model: 'greenPen',
  69. class: 'pen-green',
  70. title: 'Green pen',
  71. color: 'var(--ck-highlight-pen-green)',
  72. type: 'pen'
  73. }
  74. ]
  75. } );
  76. }
  77. /**
  78. * @inheritDoc
  79. */
  80. init() {
  81. const editor = this.editor;
  82. // Allow highlight attribute on text nodes.
  83. editor.model.schema.extend( '$text', { allowAttributes: 'highlight' } );
  84. const options = editor.config.get( 'highlight.options' );
  85. // Set-up the two-way conversion.
  86. editor.conversion.attributeToElement( _buildDefinition( options ) );
  87. editor.commands.add( 'highlight', new HighlightCommand( editor ) );
  88. }
  89. }
  90. // Converts the options array to a converter definition.
  91. //
  92. // @param {Array.<module:highlight/highlight~HighlightOption>} options An array with configured options.
  93. // @returns {module:engine/conversion/conversion~ConverterDefinition}
  94. function _buildDefinition( options ) {
  95. const definition = {
  96. model: {
  97. key: 'highlight',
  98. values: []
  99. },
  100. view: {}
  101. };
  102. for ( const option of options ) {
  103. definition.model.values.push( option.model );
  104. definition.view[ option.model ] = {
  105. name: 'mark',
  106. classes: option.class
  107. };
  108. }
  109. return definition;
  110. }