inlineeditorui.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module editor-inline/inlineeditorui
  7. */
  8. import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory';
  9. import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
  10. import {
  11. getItemsFromConfig,
  12. enableToolbarKeyboardFocus
  13. } from '@ckeditor/ckeditor5-ui/src/toolbar/utils';
  14. /**
  15. * The inline editor UI class.
  16. *
  17. * @implements module:core/editor/editorui~EditorUI
  18. */
  19. export default class InlineEditorUI {
  20. /**
  21. * Creates an instance of the editor UI class.
  22. *
  23. * @param {module:core/editor/editor~Editor} editor The editor instance.
  24. * @param {module:ui/editorui/editoruiview~EditorUIView} view View of the ui.
  25. */
  26. constructor( editor, view ) {
  27. /**
  28. * @inheritDoc
  29. */
  30. this.editor = editor;
  31. /**
  32. * @inheritDoc
  33. */
  34. this.view = view;
  35. /**
  36. * @inheritDoc
  37. */
  38. this.componentFactory = new ComponentFactory( editor );
  39. /**
  40. * @inheritDoc
  41. */
  42. this.focusTracker = new FocusTracker();
  43. // Set–up the toolbar.
  44. view.toolbar.bind( 'isActive' ).to( this.focusTracker, 'isFocused' );
  45. view.toolbar.targetElement = view.editableElement;
  46. // Setup the editable.
  47. const editingRoot = editor.editing.createRoot( view.editableElement );
  48. view.editable.bind( 'isReadOnly' ).to( editingRoot );
  49. // Bind to focusTracker instead of editor.editing.view because otherwise
  50. // focused editable styles disappear when view#toolbar is focused.
  51. view.editable.bind( 'isFocused' ).to( this.focusTracker );
  52. view.editable.name = editingRoot.rootName;
  53. this.focusTracker.add( view.editableElement );
  54. }
  55. /**
  56. * Initializes the UI.
  57. *
  58. * @returns {Promise} A Promise resolved when the initialization process is finished.
  59. */
  60. init() {
  61. const editor = this.editor;
  62. return this.view.init()
  63. .then( () => {
  64. return getItemsFromConfig(
  65. editor.config.get( 'toolbar' ),
  66. this.view.toolbar.items,
  67. this.componentFactory
  68. );
  69. } )
  70. .then( () => {
  71. enableToolbarKeyboardFocus( {
  72. origin: editor.editing.view,
  73. originFocusTracker: this.focusTracker,
  74. originKeystrokeHandler: editor.keystrokes,
  75. toolbar: this.view.toolbar
  76. } );
  77. } );
  78. }
  79. /**
  80. * Destroys the UI.
  81. *
  82. * @returns {Promise} A Promise resolved when the destruction process is finished.
  83. */
  84. destroy() {
  85. return this.view.destroy();
  86. }
  87. }