8
0

inlineeditorui.js 3.0 KB

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