FullscreenAbstractEditorHandler

class

The abstract editor type handler.

This class defines some actions and behaviors that are applied when fullscreen mode is toggled, and which are common regardless of the editor type. Then, specific classes like ClassicEditorHandler or DecoupledEditorHandler extend this class with actions specific for these editor types.

Extend this class to provide fullscreen mode handling for unsupported editor types, or if you wish to heavily customize the default behavior.

The only method that is necessary to provide when extending this class is defaultOnEnter. However, make sure to familiarize yourself with the below full list of actions taken by FullscreenAbstractEditorHandler to understand what is covered by default, and what should be provided by you.

When entering the fullscreen mode, the enable method is called. It creates the properly styled container and handles the editor features that need it, in the following order:

Saves the scroll positions of all ancestors of the editable element to restore them after leaving the fullscreen mode.
Executes the defaultOnEnter method to move the proper editor UI elements to the fullscreen mode. If you extend the abstract handler, you should override this method to move the elements that are specific to your editor type, like: editable, toolbar, menu bar. Use moveToFullscreen method for this purpose to ensure they are automatically cleaned up after leaving the fullscreen mode.
Adds proper classes to the <body> and <html> elements to block page scrolling, adjust z-index etc.

Steps 4-12 are only executed if the corresponding features are used.

If presence list is used, moves it to the fullscreen mode container.
If document outline is used, moves it to the fullscreen mode.
If pagination is used, adjusts it's configuration for the changed view.
If annotations are used, moves them to the fullscreen mode.
If revision history is used, overrides the callbacks to show the revision viewer in the fullscreen mode.
If AI Tabs is used, moves it to the fullscreen mode.
If source editing and document outline are both used, registers a callback hiding the document outline header in source editing mode.
Changes the position of some dialogs to utilize the empty space on the right side of the editable element.
If custom container is used, hides all other elements in it to ensure they don't create an empty unscrollable space.

Then finally:

Adjusts the visibility of the left and right sidebars based on the available space.
Sets up a resize observer to adjust the visibility of the left and right sidebars dynamically.
Executes the configured config.fullscreen.onEnterCallback function. By default, it returns the fullscreen mode container element so it can be further customized.

When leaving the fullscreen mode, the disable method is called. It does the following:

Execute the configured config.fullscreen.onLeaveCallback function.
Remove the classes added to the <body> and <html> elements.
If document outline is used, restore its default container.
If annotations are used, restore their original state (UI, filters etc).
If revision history is used, restore the original callbacks.
If AI Tabs is used, restore it to the original state.
If source editing and document outline are both used, restore the document outline header.
Restore all moved elements to their original place.
Destroy the fullscreen mode container.
If the editor has a toolbar, switch its behavior to the one configured in the shouldGroupWhenFull property.
Restore the scroll positions of all ancestors of the editable element.
If pagination is used, restore its default configuration.
Restore default dialogs positions.

This class is exported to allow for custom extensions.

See source

Properties

updateDialogPositionCallback : ( _evt: EventInfo, _name: string, isOpen: boolean ) => void

Stores a bound reference to the _updateDialogPosition method, allowing it to be attached and detached from change event.
See source (with github icon)
_closeRevisionViewerCallback : null | ( viewerEditor: any ) => Promise<unknown>
protected

A callback that closes the revision viewer, stored to restore the original one after exiting the fullscreen mode.
See source (with github icon)
_editor : object
protected

An editor instance. It should be set by the particular editor type handler.
See source (with github icon)
_showRevisionViewerCallback : null | ( config: EditorConfig ) => Promise<any>
protected

A callback that shows the revision viewer, stored to restore the original one after exiting the fullscreen mode.
See source (with github icon)
_aiTabsData : null | object
private

A map of AI Tabs data that were set before entering the fullscreen mode.
See source (with github icon)
_annotationsUIsData : null | Map<string, Record<string, any>>
private

Data of the annotations UIs that were active before entering the fullscreen mode.
See source (with github icon)
_collapseLeftSidebarButton : null | ButtonView
private

The button that toggles the visibility of the left sidebar.
See source (with github icon)
_document : Document
private

The document object in which the editor is located.
See source (with github icon)
_forceShowLeftSidebar : boolean
private

Temporary flag used to ignore the first automatic layout adjustment logic when user collapses the left sidebar with a button. It is then immediately set back to false.
See source (with github icon)
_hasLeftCollapseButton : boolean
private

Whether the left sidebar collapse button is created.
See source (with github icon)
_hiddenElements : Map<HTMLElement, string>
private

A map of elements that were hidden when entering the fullscreen mode. It is used to restore their previous visibility when leaving the fullscreen mode and avoid showing elements that were hidden before entering the fullscreen mode.
See source (with github icon)
_keepLeftSidebarHidden : boolean
private

Whether the left sidebar should be kept hidden even if there is enough space for it. It's set to true when user collapses the left sidebar with a button. Behavior is reset when exiting the fullscreen mode.
See source (with github icon)
_paginationBodyCollection : null | BodyCollection
private

The pagination body collection that is used in the fullscreen mode. If we don't move pagination lines to the fullscreen container, they won't be visible.
See source (with github icon)
_placeholderMap : Map<string, object>
private

Maps placeholder names to placeholder elements and moved elements.
See source (with github icon)
_resizeObserver : null | ResizeObserver
private

The resize observer that is used to adjust the visibility of the left and right sidebars dynamically.
See source (with github icon)
_savedAncestorsScrollPositions : Map<HTMLElement, object>
private

A map matching the ancestors of the editable element with their scroll positions before entering fullscreen mode.
See source (with github icon)
_sidebarsWidths : object
private

The width of the expanded left and right sidebars in the fullscreen mode. Necessary for logic checking if they should be visible.
See source (with github icon)
_wrapper : null | HTMLElement
private

The wrapper element that holds the fullscreen mode layout.
See source (with github icon)

Methods

constructor( editor )

See source (with github icon)
Parameters
editor : Editor
defaultOnEnter() → HTMLElement

A function that moves the editor UI elements to the fullscreen mode. It should be set by the particular editor type handler.
Returns the fullscreen mode container element so it can be further customized via fullscreen.onEnterCallback configuration property.
See source (with github icon)
Returns
HTMLElement
destroy() → void

See source (with github icon)
Returns
void
disable() → void

Disables the fullscreen mode by restoring all moved elements and destroying the fullscreen container.
See source (with github icon)
Returns
void
enable() → void

Enables the fullscreen mode. It executes the editor-specific enable handler and then the configured callback.
See source (with github icon)
Returns
void
getWrapper() → HTMLElement

Returns the fullscreen mode container element.
See source (with github icon)
Returns
HTMLElement
moveToFullscreen( elementToMove, placeholderName ) → void

Moves the given element to the fullscreen mode container, leaving a placeholder in its place.
See source (with github icon)
Parameters
elementToMove : HTMLElement
placeholderName : string
Returns
void
restoreMovedElementLocation( placeholderName ) → void

Returns a single moved element to its original place.
See source (with github icon)
Parameters
placeholderName : string
Returns
void
_adjustVisibleElements() → void
private

Adjusts the visibility of the left and right sidebars based on the available space.
See source (with github icon)
Returns
void
_destroyContainer() → void
private

Destroys the fullscreen mode container.
See source (with github icon)
Returns
void
_generateCollapseButton() → void
private

See source (with github icon)
Returns
void
_generateDocumentOutlineContainer() → void
private

Checks if the DocumentOutlineUI plugin is available and moves its elements to fullscreen mode.
See source (with github icon)
Returns
void
_generatePresenceListContainer() → void
private

Checks if the PresenceListUI plugin is available and moves its elements to fullscreen mode.
See source (with github icon)
Returns
void
_handleAISidebarTransitions( evt ) → void
private

Checks the transition event to see if it's changing the width of the AI tabs and if so, adjusts the visible fullscreen mode elements.
See source (with github icon)
Parameters
evt : TransitionEvent
Returns
void
_handleAITabsTransfer() → void
private

Stores the current state of the AI Tabs and moves it to the fullscreen mode.
See source (with github icon)
Returns
void
_hideLeftSidebar() → void
private

Hides the left sidebar. Works only if there is anything to hide.
See source (with github icon)
Returns
void
_hideRightSidebar() → void
private

Hides the right sidebar. Works only if there is anything to hide.
See source (with github icon)
Returns
void
_overrideAnnotationsUIs() → void
private

Stores the current state of the annotations UIs to restore it when leaving fullscreen mode and switches the UI to the wide sidebar.
See source (with github icon)
Returns
void
_overrideRevisionHistoryCallbacks() → void
private

Modifies the revision history viewer callbacks to display the viewer in the fullscreen mode.
See source (with github icon)
Returns
void
_registerFullscreenDialogPositionAdjustments() → void
private

Adds an event listener when the dialog opens to adjust its position in fullscreen mode, utilizing the empty space on the right side of the editable element.
See source (with github icon)
Returns
void
_restoreAITabs() → void
private

Restores the state of the AI Tabs to the original values.
See source (with github icon)
Returns
void
_restoreAnnotationsUIs() → void
private

Restores the saved state of the annotations UIs.
See source (with github icon)
Returns
void
_restoreDocumentOutlineDefaultContainer() → void
private

Restores the default value of documentOutlineContainer, which is modified in fullscreen mode.
See source (with github icon)
Returns
void
_restoreRevisionHistoryCallbacks() → void
private

Resets the revision history viewer callbacks to their original values.
See source (with github icon)
Returns
void
_saveAncestorsScrollPositions( domElement ) → void
private

Saves the scroll positions of all ancestors of the given element.
See source (with github icon)
Parameters
domElement : HTMLElement
Returns
void
_setNewDialogPosition() → void
private

Adjusts the dialog position to utilize the empty space on the right side of the editable. The new dialog position should be on the right side of the fullscreen view with a 30px margin. Only dialogs with the position set to "editor-top-side" should have their position changed.
See source (with github icon)
Returns
void
_setupResizeObserver() → void
private

Sets up a resize observer to adjust the visibility of the left and right sidebars dynamically.
See source (with github icon)
Returns
void
_showLeftSidebar() → void
private

Shows the left sidebar. Works only if there is anything to show.
See source (with github icon)
Returns
void
_showRightSidebar() → void
private

Shows the right sidebar. Works only if there is anything to show.
See source (with github icon)
Returns
void
_sourceEditingCallback( _evt, _name, value ) → void
private

A callback that hides the document outline header when the source editing mode is enabled. Document outline element itself is hidden by source editing plugin.
See source (with github icon)
Parameters
_evt : EventInfo
_name : string
value : boolean
Returns
void
_switchAnnotationsUI( uiName ) → void
private

Switches the annotations UI to the requested one.
See source (with github icon)
Parameters
uiName : string
Returns
void
_unregisterFullscreenDialogPositionAdjustments() → void
private

Removes an event listener that adjusts the dialog's position in fullscreen mode.
See source (with github icon)
Returns
void
_updateDialogPosition( _evt, _name, isOpen ) → void
private

If dialog is open, adjust its positioning.
See source (with github icon)
Parameters
_evt : EventInfo
_name : string
isOpen : boolean
Returns
void

FullscreenAbstractEditorHandler

Properties

updateDialogPositionCallback : ( _evt: EventInfo, _name: string, isOpen: boolean ) => void

_closeRevisionViewerCallback : null | ( viewerEditor: any ) => Promise<unknown>protected

_editor : objectprotected

_showRevisionViewerCallback : null | ( config: EditorConfig ) => Promise<any>protected

_aiTabsData : null | object Lock iconprivate

_annotationsUIsData : null | Map<string, Record<string, any>> Lock iconprivate

_collapseLeftSidebarButton : null | ButtonView Lock iconprivate

_document : Document Lock iconprivate

_forceShowLeftSidebar : boolean Lock iconprivate

_hasLeftCollapseButton : boolean Lock iconprivate

_hiddenElements : Map<HTMLElement, string> Lock iconprivate

_keepLeftSidebarHidden : boolean Lock iconprivate

_paginationBodyCollection : null | BodyCollection Lock iconprivate

_placeholderMap : Map<string, object> Lock iconprivate

_resizeObserver : null | ResizeObserver Lock iconprivate

_savedAncestorsScrollPositions : Map<HTMLElement, object> Lock iconprivate

_sidebarsWidths : object Lock iconprivate

_wrapper : null | HTMLElement Lock iconprivate

Methods

constructor( editor )

Parameters

defaultOnEnter() → HTMLElement

Returns

destroy() → void

Returns

disable() → void

Returns

enable() → void

Returns

getWrapper() → HTMLElement

Returns

moveToFullscreen( elementToMove, placeholderName ) → void

Parameters

Returns

restoreMovedElementLocation( placeholderName ) → void

Parameters

Returns

_adjustVisibleElements() → void Lock iconprivate

Returns

_destroyContainer() → void Lock iconprivate

Returns

_generateCollapseButton() → void Lock iconprivate

Returns

_generateDocumentOutlineContainer() → void Lock iconprivate

Returns

_generatePresenceListContainer() → void Lock iconprivate

Returns

_handleAISidebarTransitions( evt ) → void Lock iconprivate

Parameters

Returns

_handleAITabsTransfer() → void Lock iconprivate

Returns

_hideLeftSidebar() → void Lock iconprivate

Returns

_hideRightSidebar() → void Lock iconprivate

Returns

_overrideAnnotationsUIs() → void Lock iconprivate

Returns

_overrideRevisionHistoryCallbacks() → void Lock iconprivate

Returns

_registerFullscreenDialogPositionAdjustments() → void Lock iconprivate

Returns

_restoreAITabs() → void Lock iconprivate

Returns

_restoreAnnotationsUIs() → void Lock iconprivate

Returns

_restoreDocumentOutlineDefaultContainer() → void Lock iconprivate

Returns

_restoreRevisionHistoryCallbacks() → void Lock iconprivate

Returns

_saveAncestorsScrollPositions( domElement ) → void Lock iconprivate

Parameters

Returns

_setNewDialogPosition() → void Lock iconprivate

Returns

_setupResizeObserver() → void Lock iconprivate

Returns

_showLeftSidebar() → void Lock iconprivate

`updateDialogPositionCallback : ( _evt: EventInfo, _name: string, isOpen: boolean ) => void`

`_closeRevisionViewerCallback : null | ( viewerEditor: any ) => Promise<unknown>`
protected

`_editor : object`
protected

`_showRevisionViewerCallback : null | ( config: EditorConfig ) => Promise<any>`
protected

`_aiTabsData : null | object`
private

`_annotationsUIsData : null | Map<string, Record<string, any>>`
private

`_collapseLeftSidebarButton : null | ButtonView`
private

`_document : Document`
private

`_forceShowLeftSidebar : boolean`
private

`_hasLeftCollapseButton : boolean`
private

`_hiddenElements : Map<HTMLElement, string>`
private

`_keepLeftSidebarHidden : boolean`
private

`_paginationBodyCollection : null | BodyCollection`
private

`_placeholderMap : Map<string, object>`
private

`_resizeObserver : null | ResizeObserver`
private

`_savedAncestorsScrollPositions : Map<HTMLElement, object>`
private

`_sidebarsWidths : object`
private

`_wrapper : null | HTMLElement`
private

`constructor( editor )`

`defaultOnEnter() → HTMLElement`

`destroy() → void`

`disable() → void`

`enable() → void`

`getWrapper() → HTMLElement`

`moveToFullscreen( elementToMove, placeholderName ) → void`

`restoreMovedElementLocation( placeholderName ) → void`

`_adjustVisibleElements() → void`
private

`_destroyContainer() → void`
private

`_generateCollapseButton() → void`
private

`_generateDocumentOutlineContainer() → void`
private

`_generatePresenceListContainer() → void`
private

`_handleAISidebarTransitions( evt ) → void`
private

`_handleAITabsTransfer() → void`
private

`_hideLeftSidebar() → void`
private

`_hideRightSidebar() → void`
private

`_overrideAnnotationsUIs() → void`
private

`_overrideRevisionHistoryCallbacks() → void`
private

`_registerFullscreenDialogPositionAdjustments() → void`
private

`_restoreAITabs() → void`
private

`_restoreAnnotationsUIs() → void`
private

`_restoreDocumentOutlineDefaultContainer() → void`
private

`_restoreRevisionHistoryCallbacks() → void`
private

`_saveAncestorsScrollPositions( domElement ) → void`
private

`_setNewDialogPosition() → void`
private

`_setupResizeObserver() → void`
private

`_showLeftSidebar() → void`
private

`_showRightSidebar() → void`
private

`_sourceEditingCallback( _evt, _name, value ) → void`
private

`_switchAnnotationsUI( uiName ) → void`
private

`_unregisterFullscreenDialogPositionAdjustments() → void`
private

`_updateDialogPosition( _evt, _name, isOpen ) → void`
private