8
0

inlineeditorui.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  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 enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus';
  11. /**
  12. * The inline editor UI class.
  13. *
  14. * @implements module:core/editor/editorui~EditorUI
  15. */
  16. export default class InlineEditorUI {
  17. /**
  18. * Creates an instance of the editor UI class.
  19. *
  20. * @param {module:core/editor/editor~Editor} editor The editor instance.
  21. * @param {module:ui/editorui/editoruiview~EditorUIView} view View of the ui.
  22. */
  23. constructor( editor, view ) {
  24. /**
  25. * @inheritDoc
  26. */
  27. this.editor = editor;
  28. /**
  29. * @inheritDoc
  30. */
  31. this.view = view;
  32. /**
  33. * @inheritDoc
  34. */
  35. this.componentFactory = new ComponentFactory( editor );
  36. /**
  37. * @inheritDoc
  38. */
  39. this.focusTracker = new FocusTracker();
  40. // Set–up the view#panel.
  41. view.panel.bind( 'isVisible' ).to( this.focusTracker, 'isFocused' );
  42. // https://github.com/ckeditor/ckeditor5-editor-inline/issues/4
  43. view.listenTo( editor.editing.view, 'render', () => {
  44. // Don't pin if the panel is not already visible. It prevents the panel
  45. // showing up when there's no focus in the UI.
  46. if ( view.panel.isVisible ) {
  47. view.panel.pin( {
  48. target: view.editableElement,
  49. positions: view.panelPositions
  50. } );
  51. }
  52. } );
  53. // Setup the editable.
  54. const editingRoot = editor.editing.createRoot( view.editableElement );
  55. view.editable.bind( 'isReadOnly' ).to( editingRoot );
  56. // Bind to focusTracker instead of editor.editing.view because otherwise
  57. // focused editable styles disappear when view#toolbar is focused.
  58. view.editable.bind( 'isFocused' ).to( this.focusTracker );
  59. view.editable.name = editingRoot.rootName;
  60. this.focusTracker.add( view.editableElement );
  61. }
  62. /**
  63. * Initializes the UI.
  64. *
  65. * @returns {Promise} A Promise resolved when the initialization process is finished.
  66. */
  67. init() {
  68. const editor = this.editor;
  69. return this.view.init()
  70. .then( () => {
  71. return this.view.toolbar.fillFromConfig( editor.config.get( 'toolbar' ), this.componentFactory );
  72. } )
  73. .then( () => {
  74. enableToolbarKeyboardFocus( {
  75. origin: editor.editing.view,
  76. originFocusTracker: this.focusTracker,
  77. originKeystrokeHandler: editor.keystrokes,
  78. toolbar: this.view.toolbar
  79. } );
  80. } );
  81. }
  82. /**
  83. * Destroys the UI.
  84. *
  85. * @returns {Promise} A Promise resolved when the destruction process is finished.
  86. */
  87. destroy() {
  88. return this.view.destroy();
  89. }
  90. }