highlightediting.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module highlight/highlightediting
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import buildViewConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter';
  10. import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
  11. import AttributeElement from '@ckeditor/ckeditor5-engine/src/view/attributeelement';
  12. import HighlightCommand from './highlightcommand';
  13. /**
  14. * The highlight editing feature. It introduces `highlight` command which allow to highlight selected text with defined 'marker' or 'pen'.
  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. { class: 'marker', title: 'Marker', color: '#ffff66', type: 'marker' },
  26. { class: 'marker-green', title: 'Green Marker', color: '#66ff00', type: 'marker' },
  27. { class: 'marker-pink', title: 'Pink Marker', color: '#ff6fff', type: 'marker' },
  28. { class: 'pen-red', title: 'Red Pen', color: '#ff0000', type: 'pen' },
  29. { class: 'pen-blue', title: 'Blue Pen', color: '#0000ff', type: 'pen' }
  30. ] );
  31. }
  32. /**
  33. * @inheritDoc
  34. */
  35. init() {
  36. const editor = this.editor;
  37. const data = editor.data;
  38. const editing = editor.editing;
  39. // Allow highlight attribute on all elements
  40. editor.document.schema.allow( { name: '$inline', attributes: 'highlight', inside: '$block' } );
  41. // Convert highlight attribute to a mark element with associated class.
  42. buildModelConverter()
  43. .for( data.modelToView, editing.modelToView )
  44. .fromAttribute( 'highlight' )
  45. .toElement( data => new AttributeElement( 'mark', { class: data } ) );
  46. const configuredClasses = editor.config.get( 'highlight' ).map( config => config.class );
  47. // Convert `mark` attribute with class name to model's highlight attribute.
  48. buildViewConverter()
  49. .for( data.viewToModel )
  50. .fromElement( 'mark' )
  51. .toAttribute( viewElement => {
  52. const viewClassNames = [ ...viewElement.getClassNames() ];
  53. if ( !viewClassNames.length ) {
  54. return;
  55. }
  56. const highlightClassNames = viewClassNames.filter( className => configuredClasses.includes( className ) );
  57. if ( !highlightClassNames.length ) {
  58. return;
  59. }
  60. return { key: 'highlight', value: highlightClassNames[ 0 ] };
  61. } );
  62. editor.commands.add( 'highlight', new HighlightCommand( editor ) );
  63. }
  64. }
  65. /**
  66. * Highlight option descriptor.
  67. *
  68. * @typedef {Object} module:highlight/highlightediting~HeadingOption
  69. * @property {String} class The class which is used to differentiate highlighters.
  70. * @property {String} title The user-readable title of the option.
  71. * @property {String} color Color used for highlighter. Should be coherent with CSS class definition.
  72. * @property {'marker'|'pen'} type The type of highlighter:
  73. * - "marker" - will use #color as background,
  74. * - "pen" - will use #color as font color.
  75. */
  76. /**
  77. * The configuration of the {@link module:highlight/highlightediting~HighlightEditing Highlight feature}.
  78. *
  79. * Read more in {@link module:highlight/highlightediting~HighlightEditingConfig}.
  80. *
  81. * @member {module:highlight/highlightediting~HighlightEditingConfig} module:core/editor/editorconfig~EditorConfig#highlight
  82. */
  83. /**
  84. * The configuration of the {@link module:highlight/highlightediting~HighlightEditing Highlight feature}.
  85. *
  86. * ClassicEditor
  87. * .create( editorElement, {
  88. * highlight: ... // Highlight feature config.
  89. * } )
  90. * .then( ... )
  91. * .catch( ... );
  92. *
  93. * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
  94. *
  95. * @interface HighlightEditingConfig
  96. */
  97. /**
  98. * Available highlighters options.
  99. *
  100. * There are two types of highlighters:
  101. * - 'marker' - rendered as `<mark>` element with defined background color.
  102. * - 'pen' - rendered as `<mark>` element with defined foreground (font) color.
  103. *
  104. * Note: Each highlighter must have it's own CSS class defined to properly match content data. Also it is advised
  105. * that color value should match the values defined in content CSS stylesheet.
  106. *
  107. * @member {Array.<module:heading/heading~HeadingOption>} module:heading/heading~HeadingConfig#options
  108. */