codeediting.js 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  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 basic-styles/code/codeediting
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import AttributeCommand from '../attributecommand';
  10. import TwoStepCaretMovement from '@ckeditor/ckeditor5-typing/src/twostepcaretmovement';
  11. import setupHighlight from '@ckeditor/ckeditor5-typing/src/utils/inlinehighlight';
  12. const CODE = 'code';
  13. const HIGHLIGHT_CLASS = 'ck-code_selected';
  14. /**
  15. * The code editing feature.
  16. *
  17. * It registers the `'code'` command and introduces the `code` attribute in the model which renders to the view
  18. * as a `<code>` element.
  19. *
  20. * @extends module:core/plugin~Plugin
  21. */
  22. export default class CodeEditing extends Plugin {
  23. /**
  24. * @inheritDoc
  25. */
  26. static get pluginName() {
  27. return 'CodeEditing';
  28. }
  29. /**
  30. * @inheritDoc
  31. */
  32. static get requires() {
  33. return [ TwoStepCaretMovement ];
  34. }
  35. /**
  36. * @inheritDoc
  37. */
  38. init() {
  39. const editor = this.editor;
  40. // Allow code attribute on text nodes.
  41. editor.model.schema.extend( '$text', { allowAttributes: CODE } );
  42. editor.model.schema.setAttributeProperties( CODE, {
  43. isFormatting: true,
  44. copyOnEnter: false
  45. } );
  46. editor.conversion.attributeToElement( {
  47. model: CODE,
  48. view: 'code',
  49. upcastAlso: {
  50. styles: {
  51. 'word-wrap': 'break-word'
  52. }
  53. }
  54. } );
  55. // Create code command.
  56. editor.commands.add( CODE, new AttributeCommand( editor, CODE ) );
  57. // Enable two-step caret movement for `code` attribute.
  58. editor.plugins.get( TwoStepCaretMovement ).registerAttribute( CODE );
  59. // Setup highlight over selected element.
  60. setupHighlight( editor, CODE, 'code', HIGHLIGHT_CLASS );
  61. }
  62. }