| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- /**
- * @module editor-balloon/ballooneditorui
- */
- import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory';
- import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
- import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus';
- /**
- * The balloon editor UI class.
- *
- * @implements module:core/editor/editorui~EditorUI
- */
- export default class BalloonEditorUI {
- /**
- * Creates an instance of the balloon 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 ) {
- /**
- * @inheritDoc
- */
- this.editor = editor;
- /**
- * @inheritDoc
- */
- this.view = view;
- /**
- * @inheritDoc
- */
- this.componentFactory = new ComponentFactory( editor );
- /**
- * @inheritDoc
- */
- this.focusTracker = new FocusTracker();
- // RootEditableElement should be created together with the editor structure.
- // See https://github.com/ckeditor/ckeditor5/issues/647.
- editor.editing.createRoot( view.editableElement );
- }
- /**
- * Initializes the UI.
- */
- init() {
- const editor = this.editor;
- const view = this.view;
- const contextualToolbar = editor.plugins.get( 'ContextualToolbar' );
- view.render();
- // Setup the editable.
- const editingRoot = editor.editing.view.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 );
- view.editable.name = editingRoot.rootName;
- this.focusTracker.add( view.editableElement );
- enableToolbarKeyboardFocus( {
- origin: editor.editing.view,
- originFocusTracker: this.focusTracker,
- originKeystrokeHandler: editor.keystrokes,
- toolbar: contextualToolbar.toolbarView,
- beforeFocus() {
- contextualToolbar.show();
- },
- afterBlur() {
- contextualToolbar.hide();
- }
- } );
- }
- /**
- * Destroys the UI.
- */
- destroy() {
- this.view.destroy();
- }
- }
|