ballooneditorui.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module editor-balloon/ballooneditorui
  7. */
  8. import EditorUI from '@ckeditor/ckeditor5-core/src/editor/editorui';
  9. import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus';
  10. import { enablePlaceholder } from '@ckeditor/ckeditor5-engine/src/view/placeholder';
  11. /**
  12. * The balloon editor UI class.
  13. *
  14. * @extends module:core/editor/editorui~EditorUI
  15. */
  16. export default class BalloonEditorUI extends EditorUI {
  17. /**
  18. * Creates an instance of the balloon 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. * @readonly
  29. * @member {module:ui/editorui/editoruiview~EditorUIView} #view
  30. */
  31. this.view = view;
  32. }
  33. /**
  34. * @inheritDoc
  35. */
  36. get element() {
  37. return this.view.editable.element;
  38. }
  39. /**
  40. * Initializes the UI.
  41. */
  42. init() {
  43. const editor = this.editor;
  44. const view = this.view;
  45. const balloonToolbar = editor.plugins.get( 'BalloonToolbar' );
  46. const editingView = editor.editing.view;
  47. const editable = view.editable;
  48. const editingRoot = editingView.document.getRoot();
  49. // The editable UI and editing root should share the same name. Then name is used
  50. // to recognize the particular editable, for instance in ARIA attributes.
  51. editable.name = editingRoot.rootName;
  52. view.render();
  53. // The editable UI element in DOM is available for sure only after the editor UI view has been rendered.
  54. // But it can be available earlier if a DOM element has been passed to BalloonEditor.create().
  55. const editableElement = editable.element;
  56. // Register the editable UI view in the editor. A single editor instance can aggregate multiple
  57. // editable areas (roots) but the balloon editor has only one.
  58. this.setEditableElement( editable.name, editableElement );
  59. // Let the global focus tracker know that the editable UI element is focusable and
  60. // belongs to the editor. From now on, the focus tracker will sustain the editor focus
  61. // as long as the editable is focused (e.g. the user is typing).
  62. this.focusTracker.add( editableElement );
  63. // Let the editable UI element respond to the changes in the global editor focus
  64. // tracker. It has been added to the same tracker a few lines above but, in reality, there are
  65. // many focusable areas in the editor, like balloons, toolbars or dropdowns and as long
  66. // as they have focus, the editable should act like it is focused too (although technically
  67. // it isn't), e.g. by setting the proper CSS class, visually announcing focus to the user.
  68. // Doing otherwise will result in editable focus styles disappearing, once e.g. the
  69. // toolbar gets focused.
  70. editable.bind( 'isFocused' ).to( this.focusTracker );
  71. // Bind the editable UI element to the editing view, making it an end– and entry–point
  72. // of the editor's engine. This is where the engine meets the UI.
  73. editingView.attachDomRoot( editableElement );
  74. enableToolbarKeyboardFocus( {
  75. origin: editingView,
  76. originFocusTracker: this.focusTracker,
  77. originKeystrokeHandler: editor.keystrokes,
  78. toolbar: balloonToolbar.toolbarView,
  79. beforeFocus() {
  80. balloonToolbar.show();
  81. },
  82. afterBlur() {
  83. balloonToolbar.hide();
  84. }
  85. } );
  86. this._initPlaceholder();
  87. this.fire( 'ready' );
  88. }
  89. /**
  90. * @inheritDoc
  91. */
  92. destroy() {
  93. const view = this.view;
  94. const editingView = this.editor.editing.view;
  95. editingView.detachDomRoot( view.editable.name );
  96. view.destroy();
  97. super.destroy();
  98. }
  99. /**
  100. * Enable the placeholder text on the editing root, if any was configured.
  101. *
  102. * @private
  103. */
  104. _initPlaceholder() {
  105. const editor = this.editor;
  106. const editingView = editor.editing.view;
  107. const editingRoot = editingView.document.getRoot();
  108. const sourceElement = editor.sourceElement;
  109. const placeholderText = editor.config.get( 'placeholder' ) ||
  110. sourceElement && sourceElement.tagName.toLowerCase() === 'textarea' && sourceElement.getAttribute( 'placeholder' );
  111. if ( placeholderText ) {
  112. enablePlaceholder( {
  113. view: editingView,
  114. element: editingRoot,
  115. text: placeholderText,
  116. isDirectHost: false
  117. } );
  118. }
  119. }
  120. }