/** * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md. */ /** * @module editor-inline/inlineeditorui */ import EditorUI from '@ckeditor/ckeditor5-core/src/editor/editorui'; import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus'; import normalizeToolbarConfig from '@ckeditor/ckeditor5-ui/src/toolbar/normalizetoolbarconfig'; /** * The inline editor UI class. * * @extends module:core/editor/editorui~EditorUI */ export default class InlineEditorUI extends EditorUI { /** * Creates an instance of the inline editor UI class. * * @param {module:core/editor/editor~Editor} editor The editor instance. * @param {module:ui/editorui/editoruiview~EditorUIView} view The view of the UI. */ constructor( editor, view ) { super( editor ); /** * The main (top–most) view of the editor UI. * * @private * @member {module:ui/editorui/editoruiview~EditorUIView} #_view */ this._view = view; /** * A normalized `config.toolbar` object. * * @type {Object} * @private */ this._toolbarConfig = normalizeToolbarConfig( editor.config.get( 'toolbar' ) ); } /** * The main (top–most) view of the editor UI. * * @readonly * @member {module:ui/editorui/editoruiview~EditorUIView} #view */ get view() { return this._view; } /** * @inheritDoc */ get element() { return this.view.editable.element; } /** * Initializes the UI. */ init() { const editor = this.editor; const view = this.view; view.render(); // Set–up the view#panel. view.panel.bind( 'isVisible' ).to( this.focusTracker, 'isFocused' ); if ( this._toolbarConfig.viewportTopOffset ) { view.viewportTopOffset = this._toolbarConfig.viewportTopOffset; } // https://github.com/ckeditor/ckeditor5-editor-inline/issues/4 view.listenTo( editor.ui, 'update', () => { // Don't pin if the panel is not already visible. It prevents the panel // showing up when there's no focus in the UI. if ( view.panel.isVisible ) { view.panel.pin( { target: view.editable.editableElement, positions: view.panelPositions } ); } } ); // Setup the editable. const editingRoot = editor.editing.view.document.getRoot(); view.editable.bind( 'isReadOnly' ).to( editingRoot ); // Bind to focusTracker instead of editor.editing.view because otherwise // focused editable styles disappear when view#toolbar is focused. view.editable.bind( 'isFocused' ).to( this.focusTracker ); editor.editing.view.attachDomRoot( view.editable.editableElement ); view.editable.name = editingRoot.rootName; this._editableElements.push( view.editable ); this.focusTracker.add( view.editable.editableElement ); view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory ); enableToolbarKeyboardFocus( { origin: editor.editing.view, originFocusTracker: this.focusTracker, originKeystrokeHandler: editor.keystrokes, toolbar: view.toolbar } ); this.ready(); } }