inlineeditorui.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. /**
  2. * @license Copyright (c) 2003-2019, 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. import { addPlaceholder, getRootPlaceholderElement } from '@ckeditor/ckeditor5-engine/src/view/placeholder';
  12. /**
  13. * The inline editor UI class.
  14. *
  15. * @extends module:core/editor/editorui~EditorUI
  16. */
  17. export default class InlineEditorUI extends EditorUI {
  18. /**
  19. * Creates an instance of the inline 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. super( editor );
  26. /**
  27. * The main (top–most) view of the editor UI.
  28. *
  29. * @private
  30. * @member {module:ui/editorui/editoruiview~EditorUIView} #_view
  31. */
  32. this._view = view;
  33. /**
  34. * A normalized `config.toolbar` object.
  35. *
  36. * @type {Object}
  37. * @private
  38. */
  39. this._toolbarConfig = normalizeToolbarConfig( editor.config.get( 'toolbar' ) );
  40. }
  41. /**
  42. * The main (top–most) view of the editor UI.
  43. *
  44. * @readonly
  45. * @member {module:ui/editorui/editoruiview~EditorUIView} #view
  46. */
  47. get view() {
  48. return this._view;
  49. }
  50. /**
  51. * @inheritDoc
  52. */
  53. get element() {
  54. return this.view.editable.element;
  55. }
  56. /**
  57. * Initializes the UI.
  58. */
  59. init() {
  60. const editor = this.editor;
  61. const view = this.view;
  62. const editingView = editor.editing.view;
  63. const editable = view.editable;
  64. const editingRoot = editingView.document.getRoot();
  65. view.render();
  66. // The editable UI element in DOM is available for sure only after the editor UI view has been rendered.
  67. // But it can be available earlier if a DOM element has been passed to InlineEditor.create().
  68. const editableElement = editable.element;
  69. // The editable UI and editing root should share the same name. Then name is used
  70. // to recognize the particular editable, for instance in ARIA attributes.
  71. editable.name = editingRoot.rootName;
  72. // Register the editable UI view in the editor. A single editor instance can aggregate multiple
  73. // editable areas (roots) but the inline editor has only one.
  74. this._editableElements.set( editable.name, editableElement );
  75. // Let the global focus tracker know that the editable UI element is focusable and
  76. // belongs to the editor. From now on, the focus tracker will sustain the editor focus
  77. // as long as the editable is focused (e.g. the user is typing).
  78. this.focusTracker.add( editableElement );
  79. // Let the editable UI element respond to the changes in the global editor focus
  80. // tracker. It has been added to the same tracker a few lines above but, in reality, there are
  81. // many focusable areas in the editor, like balloons, toolbars or dropdowns and as long
  82. // as they have focus, the editable should act like it is focused too (although technically
  83. // it isn't), e.g. by setting the proper CSS class, visually announcing focus to the user.
  84. // Doing otherwise will result in editable focus styles disappearing, once e.g. the
  85. // toolbar gets focused.
  86. editable.bind( 'isFocused' ).to( this.focusTracker );
  87. // Bind the editable UI element to the editing view, making it an end– and entry–point
  88. // of the editor's engine. This is where the engine meets the UI.
  89. editingView.attachDomRoot( editableElement );
  90. // The UI must wait until the data is ready to attach certain actions that operate
  91. // on the editing view–level. They use the view writer to set attributes on the editable
  92. // element and doing so before data is loaded into the model (ready) would destroy the
  93. // original content.
  94. editor.on( 'dataReady', () => {
  95. editable.enableEditingRootListeners();
  96. const placeholderText = editor.config.get( 'placeholder' ) || editor.sourceElement.getAttribute( 'placeholder' );
  97. if ( placeholderText ) {
  98. const placeholderElement = getRootPlaceholderElement( editingRoot );
  99. addPlaceholder( editingView, placeholderElement, placeholderText );
  100. }
  101. } );
  102. this._initToolbar();
  103. this.fire( 'ready' );
  104. }
  105. /**
  106. * @inheritDoc
  107. */
  108. destroy() {
  109. const view = this._view;
  110. const editingView = this.editor.editing.view;
  111. editingView.detachDomRoot( view.editable.name );
  112. view.destroy();
  113. super.destroy();
  114. }
  115. /**
  116. * Initializes the inline editor toolbar and its panel.
  117. *
  118. * @private
  119. */
  120. _initToolbar() {
  121. const editor = this.editor;
  122. const view = this.view;
  123. const editableElement = view.editable.element;
  124. const editingView = editor.editing.view;
  125. const toolbar = view.toolbar;
  126. // Set–up the view#panel.
  127. view.panel.bind( 'isVisible' ).to( this.focusTracker, 'isFocused' );
  128. if ( this._toolbarConfig.viewportTopOffset ) {
  129. view.viewportTopOffset = this._toolbarConfig.viewportTopOffset;
  130. }
  131. // https://github.com/ckeditor/ckeditor5-editor-inline/issues/4
  132. view.listenTo( editor.ui, 'update', () => {
  133. // Don't pin if the panel is not already visible. It prevents the panel
  134. // showing up when there's no focus in the UI.
  135. if ( view.panel.isVisible ) {
  136. view.panel.pin( {
  137. target: editableElement,
  138. positions: view.panelPositions
  139. } );
  140. }
  141. } );
  142. toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );
  143. enableToolbarKeyboardFocus( {
  144. origin: editingView,
  145. originFocusTracker: this.focusTracker,
  146. originKeystrokeHandler: editor.keystrokes,
  147. toolbar
  148. } );
  149. }
  150. }