8
0

inlineeditorui.js 2.9 KB

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