8
0

highlightcommand.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  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/highlightcommand
  7. */
  8. import Command from '@ckeditor/ckeditor5-core/src/command';
  9. /**
  10. * The highlight command. It is used by the {@link module:highlight/highlightediting~HighlightEditing highlight feature}
  11. * to apply the text highlighting.
  12. *
  13. * editor.execute( 'highlight', { value: 'greenMarker' } );
  14. *
  15. * **Note**: Executing the command without a value removes the attribute from the model. If the selection is collapsed
  16. * inside a text with the highlight attribute, the command will remove the attribute from the entire range
  17. * of that text.
  18. *
  19. * @extends module:core/command~Command
  20. */
  21. export default class HighlightCommand extends Command {
  22. /**
  23. * @inheritDoc
  24. */
  25. refresh() {
  26. const model = this.editor.model;
  27. const doc = model.document;
  28. /**
  29. * A value indicating whether the command is active. If the selection has some highlight attribute,
  30. * it corresponds to the value of that attribute.
  31. *
  32. * @observable
  33. * @readonly
  34. * @member {undefined|String} module:highlight/highlightcommand~HighlightCommand#value
  35. */
  36. this.value = doc.selection.getAttribute( 'highlight' );
  37. this.isEnabled = model.schema.checkAttributeInSelection( doc.selection, 'highlight' );
  38. }
  39. /**
  40. * Executes the command.
  41. *
  42. * @param {Object} [options] Options for the executed command.
  43. * @param {String} [options.value] The value to apply.
  44. *
  45. * @fires execute
  46. */
  47. execute( options = {} ) {
  48. const model = this.editor.model;
  49. const document = model.document;
  50. const selection = document.selection;
  51. const highlighter = options.value;
  52. model.change( writer => {
  53. const ranges = model.schema.getValidRanges( selection.getRanges(), 'highlight' );
  54. if ( selection.isCollapsed ) {
  55. const position = selection.getFirstPosition();
  56. // When selection is inside text with `highlight` attribute.
  57. if ( selection.hasAttribute( 'highlight' ) ) {
  58. // Find the full highlighted range.
  59. const isSameHighlight = value => {
  60. return value.item.hasAttribute( 'highlight' ) && value.item.getAttribute( 'highlight' ) === this.value;
  61. };
  62. const highlightStart = position.getLastMatchingPosition( isSameHighlight, { direction: 'backward' } );
  63. const highlightEnd = position.getLastMatchingPosition( isSameHighlight );
  64. const highlightRange = writer.createRange( highlightStart, highlightEnd );
  65. // Then depending on current value...
  66. if ( !highlighter || this.value === highlighter ) {
  67. // ...remove attribute when passing highlighter different then current or executing "eraser".
  68. writer.removeAttribute( 'highlight', highlightRange );
  69. writer.removeSelectionAttribute( 'highlight' );
  70. } else {
  71. // ...update `highlight` value.
  72. writer.setAttribute( 'highlight', highlighter, highlightRange );
  73. writer.setSelectionAttribute( 'highlight', highlighter );
  74. }
  75. } else if ( highlighter ) {
  76. writer.setSelectionAttribute( 'highlight', highlighter );
  77. }
  78. } else {
  79. for ( const range of ranges ) {
  80. if ( highlighter ) {
  81. writer.setAttribute( 'highlight', highlighter, range );
  82. } else {
  83. writer.removeAttribute( 'highlight', range );
  84. }
  85. }
  86. }
  87. } );
  88. }
  89. }