` which\n\t * wraps the editable element and the toolbar. In {@link module:editor-inline/inlineeditor~InlineEditor}\n\t * it is the editable element itself (as there is no other wrapper). However, in\n\t * {@link module:editor-decoupled/decouplededitor~DecoupledEditor} it is set to `null` because this editor does not\n\t * come with a single \"main\" HTML element (its editable element and toolbar are separate).\n\t *\n\t * This property can be understood as a shorthand for retrieving the element that a specific editor integration\n\t * considers to be its main DOM element.\n\t */\n\tpublic get element(): HTMLElement | null {\n\t\treturn null;\n\t}\n\n\t/**\n\t * Fires the {@link module:ui/editorui/editorui~EditorUI#event:update `update`} event.\n\t *\n\t * This method should be called when the editor UI (e.g. positions of its balloons) needs to be updated due to\n\t * some environmental change which CKEditor 5 is not aware of (e.g. resize of a container in which it is used).\n\t */\n\tpublic update(): void {\n\t\tthis.fire
( 'update' );\n\t}\n\n\t/**\n\t * Destroys the UI.\n\t */\n\tpublic destroy(): void {\n\t\tthis.stopListening();\n\n\t\tthis.focusTracker.destroy();\n\t\tthis.tooltipManager.destroy( this.editor );\n\t\tthis.poweredBy.destroy();\n\n\t\t// Clean–up the references to the CKEditor instance stored in the native editable DOM elements.\n\t\tfor ( const domElement of this._editableElementsMap.values() ) {\n\t\t\t( domElement as any ).ckeditorInstance = null;\n\t\t\tthis.editor.keystrokes.stopListening( domElement );\n\t\t}\n\n\t\tthis._editableElementsMap = new Map();\n\t\tthis._focusableToolbarDefinitions = [];\n\t}\n\n\t/**\n\t * Stores the native DOM editable element used by the editor under a unique name.\n\t *\n\t * Also, registers the element in the editor to maintain the accessibility of the UI. When the user is editing text in a focusable\n\t * editable area, they can use the Alt + F10 keystroke to navigate over editor toolbars. See {@link #addToolbar}.\n\t *\n\t * @param rootName The unique name of the editable element.\n\t * @param domElement The native DOM editable element.\n\t */\n\tpublic setEditableElement( rootName: string, domElement: HTMLElement ): void {\n\t\tthis._editableElementsMap.set( rootName, domElement );\n\n\t\t// Put a reference to the CKEditor instance in the editable native DOM element.\n\t\t// It helps 3rd–party software (browser extensions, other libraries) access and recognize\n\t\t// CKEditor 5 instances (editing roots) and use their API (there is no global editor\n\t\t// instance registry).\n\t\tif ( !( domElement as any ).ckeditorInstance ) {\n\t\t\t( domElement as any ).ckeditorInstance = this.editor;\n\t\t}\n\n\t\t// Register the element, so it becomes available for Alt+F10 and Esc navigation.\n\t\tthis.focusTracker.add( domElement );\n\n\t\tconst setUpKeystrokeHandler = () => {\n\t\t\t// The editing view of the editor is already listening to keystrokes from DOM roots (see: KeyObserver).\n\t\t\t// Do not duplicate listeners.\n\t\t\tif ( this.editor.editing.view.getDomRoot( rootName ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.editor.keystrokes.listenTo( domElement );\n\t\t};\n\n\t\t// For editable elements set by features after EditorUI is ready (e.g. source editing).\n\t\tif ( this.isReady ) {\n\t\t\tsetUpKeystrokeHandler();\n\t\t}\n\t\t// For editable elements set while the editor is being created (e.g. DOM roots).\n\t\telse {\n\t\t\tthis.once( 'ready', setUpKeystrokeHandler );\n\t\t}\n\t}\n\n\t/**\n\t * Removes the editable from the editor UI. Removes all handlers added by {@link #setEditableElement}.\n\t *\n\t * @param rootName The name of the editable element to remove.\n\t */\n\tpublic removeEditableElement( rootName: string ): void {\n\t\tconst domElement = this._editableElementsMap.get( rootName );\n\n\t\tif ( !domElement ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._editableElementsMap.delete( rootName );\n\n\t\tthis.editor.keystrokes.stopListening( domElement );\n\t\tthis.focusTracker.remove( domElement );\n\n\t\t( domElement as any ).ckeditorInstance = null;\n\t}\n\n\t/**\n\t * Returns the editable editor element with the given name or null if editable does not exist.\n\t *\n\t * @param rootName The editable name.\n\t */\n\tpublic getEditableElement( rootName: string = 'main' ): HTMLElement | undefined {\n\t\treturn this._editableElementsMap.get( rootName );\n\t}\n\n\t/**\n\t * Returns array of names of all editor editable elements.\n\t */\n\tpublic getEditableElementsNames(): IterableIterator {\n\t\treturn this._editableElementsMap.keys();\n\t}\n\n\t/**\n\t * Adds a toolbar to the editor UI. Used primarily to maintain the accessibility of the UI.\n\t *\n\t * Focusable toolbars can be accessed (focused) by users by pressing the Alt + F10 keystroke.\n\t * Successive keystroke presses navigate over available toolbars.\n\t *\n\t * @param toolbarView A instance of the toolbar to be registered.\n\t */\n\tpublic addToolbar( toolbarView: ToolbarView, options: FocusableToolbarOptions = {} ): void {\n\t\tif ( toolbarView.isRendered ) {\n\t\t\tthis.focusTracker.add( toolbarView.element! );\n\t\t\tthis.editor.keystrokes.listenTo( toolbarView.element! );\n\t\t} else {\n\t\t\ttoolbarView.once( 'render', () => {\n\t\t\t\tthis.focusTracker.add( toolbarView.element! );\n\t\t\t\tthis.editor.keystrokes.listenTo( toolbarView.element! );\n\t\t\t} );\n\t\t}\n\n\t\tthis._focusableToolbarDefinitions.push( { toolbarView, options } );\n\t}\n\n\t/**\n\t * Stores all editable elements used by the editor instance.\n\t *\n\t * @deprecated\n\t */\n\tprotected get _editableElements(): unknown {\n\t\t/**\n\t\t * The {@link module:ui/editorui/editorui~EditorUI#_editableElements `EditorUI#_editableElements`} property has been\n\t\t * deprecated and will be removed in the near future. Please use\n\t\t * {@link module:ui/editorui/editorui~EditorUI#setEditableElement `setEditableElement()`} and\n\t\t * {@link module:ui/editorui/editorui~EditorUI#getEditableElement `getEditableElement()`} methods instead.\n\t\t *\n\t\t * @error editor-ui-deprecated-editable-elements\n\t\t * @param editorUI Editor UI instance the deprecated property belongs to.\n\t\t */\n\t\tconsole.warn(\n\t\t\t'editor-ui-deprecated-editable-elements: ' +\n\t\t\t'The EditorUI#_editableElements property has been deprecated and will be removed in the near future.',\n\t\t\t{ editorUI: this } );\n\n\t\treturn this._editableElementsMap;\n\t}\n\n\t/**\n\t * Returns viewport offsets object:\n\t *\n\t * ```js\n\t * {\n\t * \ttop: Number,\n\t * \tright: Number,\n\t * \tbottom: Number,\n\t * \tleft: Number\n\t * }\n\t * ```\n\t *\n\t * Only top property is currently supported.\n\t */\n\tprivate _readViewportOffsetFromConfig() {\n\t\tconst editor = this.editor;\n\t\tconst viewportOffsetConfig = editor.config.get( 'ui.viewportOffset' );\n\n\t\tif ( viewportOffsetConfig ) {\n\t\t\treturn viewportOffsetConfig;\n\t\t}\n\n\t\t// Not present in EditorConfig type, because it's legacy. Hence the `as` expression.\n\t\tconst legacyOffsetConfig = editor.config.get( 'toolbar.viewportTopOffset' ) as number | undefined;\n\n\t\t// Fall back to deprecated toolbar config.\n\t\tif ( legacyOffsetConfig ) {\n\t\t\t/**\n\t\t\t * The {@link module:core/editor/editorconfig~EditorConfig#toolbar `EditorConfig#toolbar.viewportTopOffset`}\n\t\t\t * property has been deprecated and will be removed in the near future. Please use\n\t\t\t * {@link module:core/editor/editorconfig~EditorConfig#ui `EditorConfig#ui.viewportOffset`} instead.\n\t\t\t *\n\t\t\t * @error editor-ui-deprecated-viewport-offset-config\n\t\t\t */\n\t\t\tconsole.warn(\n\t\t\t\t'editor-ui-deprecated-viewport-offset-config: ' +\n\t\t\t\t'The `toolbar.vieportTopOffset` configuration option is deprecated. ' +\n\t\t\t\t'It will be removed from future CKEditor versions. Use `ui.viewportOffset.top` instead.'\n\t\t\t);\n\n\t\t\treturn { top: legacyOffsetConfig };\n\t\t}\n\n\t\t// More keys to come in the future.\n\t\treturn { top: 0 };\n\t}\n\n\t/**\n\t * Starts listening for Alt + F10 and Esc keystrokes in the context of focusable\n\t * {@link #setEditableElement editable elements} and {@link #addToolbar toolbars}\n\t * to allow users navigate across the UI.\n\t */\n\tprivate _initFocusTracking(): void {\n\t\tconst editor = this.editor;\n\t\tconst editingView = editor.editing.view;\n\n\t\tlet lastFocusedForeignElement: HTMLElement | null;\n\t\tlet candidateDefinitions: Array;\n\n\t\t// Focus the next focusable toolbar on Alt + F10.\n\t\teditor.keystrokes.set( 'Alt+F10', ( data, cancel ) => {\n\t\t\tconst focusedElement = this.focusTracker.focusedElement as HTMLElement;\n\n\t\t\t// Focus moved out of a DOM element that\n\t\t\t// * is not a toolbar,\n\t\t\t// * does not belong to the editing view (e.g. source editing).\n\t\t\tif (\n\t\t\t\tArray.from( this._editableElementsMap.values() ).includes( focusedElement ) &&\n\t\t\t\t!Array.from( editingView.domRoots.values() ).includes( focusedElement )\n\t\t\t) {\n\t\t\t\tlastFocusedForeignElement = focusedElement;\n\t\t\t}\n\n\t\t\tconst currentFocusedToolbarDefinition = this._getCurrentFocusedToolbarDefinition();\n\n\t\t\t// * When focusing a toolbar for the first time, set the array of definitions for successive presses of Alt+F10.\n\t\t\t// This ensures, the navigation works always the same and no pair of toolbars takes over\n\t\t\t// (e.g. image and table toolbars when a selected image is inside a cell).\n\t\t\t// * It could be that the focus went to the toolbar by clicking a toolbar item (e.g. a dropdown). In this case,\n\t\t\t// there were no candidates so they must be obtained (#12339).\n\t\t\tif ( !currentFocusedToolbarDefinition || !candidateDefinitions ) {\n\t\t\t\tcandidateDefinitions = this._getFocusableCandidateToolbarDefinitions();\n\t\t\t}\n\n\t\t\t// In a single Alt+F10 press, check all candidates but if none were focused, don't go any further.\n\t\t\t// This prevents an infinite loop.\n\t\t\tfor ( let i = 0; i < candidateDefinitions.length; i++ ) {\n\t\t\t\tconst candidateDefinition = candidateDefinitions.shift()!;\n\n\t\t\t\t// Put the first definition to the back of the array. This allows circular navigation over all toolbars\n\t\t\t\t// on successive presses of Alt+F10.\n\t\t\t\tcandidateDefinitions.push( candidateDefinition );\n\n\t\t\t\t// Don't focus the same toolbar again. If you did, this would move focus from the nth focused toolbar item back to the\n\t\t\t\t// first item as per ToolbarView#focus() if the user navigated inside the toolbar.\n\t\t\t\tif (\n\t\t\t\t\tcandidateDefinition !== currentFocusedToolbarDefinition &&\n\t\t\t\t\tthis._focusFocusableCandidateToolbar( candidateDefinition )\n\t\t\t\t) {\n\t\t\t\t\t// Clean up after a current visible toolbar when switching to the next one.\n\t\t\t\t\tif ( currentFocusedToolbarDefinition && currentFocusedToolbarDefinition.options.afterBlur ) {\n\t\t\t\t\t\tcurrentFocusedToolbarDefinition.options.afterBlur();\n\t\t\t\t\t}\n\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tcancel();\n\t\t} );\n\n\t\t// Blur the focused toolbar on Esc and bring the focus back to its origin.\n\t\teditor.keystrokes.set( 'Esc', ( data, cancel ) => {\n\t\t\tconst focusedToolbarDef = this._getCurrentFocusedToolbarDefinition();\n\n\t\t\tif ( !focusedToolbarDef ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Bring focus back to where it came from before focusing the toolbar:\n\t\t\t// 1. If it came from outside the engine view (e.g. source editing), move it there.\n\t\t\tif ( lastFocusedForeignElement ) {\n\t\t\t\tlastFocusedForeignElement.focus();\n\t\t\t\tlastFocusedForeignElement = null;\n\t\t\t}\n\t\t\t// 2. There are two possibilities left:\n\t\t\t// 2.1. It could be that the focus went from an editable element in the view (root or nested).\n\t\t\t// 2.2. It could be the focus went straight to the toolbar before even focusing the editing area.\n\t\t\t// In either case, just focus the view editing. The focus will land where it belongs.\n\t\t\telse {\n\t\t\t\teditor.editing.view.focus();\n\t\t\t}\n\n\t\t\t// Clean up after the toolbar if there is anything to do there.\n\t\t\tif ( focusedToolbarDef.options.afterBlur ) {\n\t\t\t\tfocusedToolbarDef.options.afterBlur();\n\t\t\t}\n\n\t\t\tcancel();\n\t\t} );\n\t}\n\n\t/**\n\t * Returns definitions of toolbars that could potentially be focused, sorted by their importance for the user.\n\t *\n\t * Focusable toolbars candidates are either:\n\t * * already visible,\n\t * * have `beforeFocus()` set in their {@link module:ui/editorui/editorui~FocusableToolbarDefinition definition} that suggests that\n\t * they might show up when called. Keep in mind that determining whether a toolbar will show up (and become focusable) is impossible\n\t * at this stage because it depends on its implementation, that in turn depends on the editing context (selection).\n\t *\n\t * **Note**: Contextual toolbars take precedence over regular toolbars.\n\t */\n\tprivate _getFocusableCandidateToolbarDefinitions(): Array {\n\t\tconst definitions: Array = [];\n\n\t\tfor ( const toolbarDef of this._focusableToolbarDefinitions ) {\n\t\t\tconst { toolbarView, options } = toolbarDef;\n\n\t\t\tif ( isVisible( toolbarView.element ) || options.beforeFocus ) {\n\t\t\t\tdefinitions.push( toolbarDef );\n\t\t\t}\n\t\t}\n\n\t\t// Contextual and already visible toolbars have higher priority. If both are true, the toolbar will always focus first.\n\t\t// For instance, a selected widget toolbar vs inline editor toolbar: both are visible but the widget toolbar is contextual.\n\t\tdefinitions.sort( ( defA, defB ) => getToolbarDefinitionWeight( defA ) - getToolbarDefinitionWeight( defB ) );\n\n\t\treturn definitions;\n\t}\n\n\t/**\n\t * Returns a definition of the toolbar that is currently visible and focused (one of its children has focus).\n\t *\n\t * `null` is returned when no toolbar is currently focused.\n\t */\n\tprivate _getCurrentFocusedToolbarDefinition(): FocusableToolbarDefinition | null {\n\t\tfor ( const definition of this._focusableToolbarDefinitions ) {\n\t\t\tif ( definition.toolbarView.element && definition.toolbarView.element.contains( this.focusTracker.focusedElement ) ) {\n\t\t\t\treturn definition;\n\t\t\t}\n\t\t}\n\n\t\treturn null;\n\t}\n\n\t/**\n\t * Focuses a focusable toolbar candidate using its definition.\n\t *\n\t * @param candidateToolbarDefinition A definition of the toolbar to focus.\n\t * @returns `true` when the toolbar candidate was focused. `false` otherwise.\n\t */\n\tprivate _focusFocusableCandidateToolbar( candidateToolbarDefinition: FocusableToolbarDefinition ): boolean {\n\t\tconst { toolbarView, options: { beforeFocus } } = candidateToolbarDefinition;\n\n\t\tif ( beforeFocus ) {\n\t\t\tbeforeFocus();\n\t\t}\n\n\t\t// If it didn't show up after beforeFocus(), it's not focusable at all.\n\t\tif ( !isVisible( toolbarView.element ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\ttoolbarView.focus();\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Provides an integration between {@link #viewportOffset} and {@link module:utils/dom/scroll~scrollViewportToShowTarget}.\n\t * It allows the UI-agnostic engine method to consider user-configured viewport offsets specific for the integration.\n\t *\n\t * @param evt The `scrollToTheSelection` event info.\n\t * @param data The payload carried by the `scrollToTheSelection` event.\n\t */\n\tprivate _handleScrollToTheSelection(\n\t\tevt: EventInfo<'scrollToTheSelection'>,\n\t\tdata: ViewScrollToTheSelectionEvent[ 'args' ][ 0 ]\n\t): void {\n\t\tconst configuredViewportOffset = {\n\t\t\ttop: 0,\n\t\t\tbottom: 0,\n\t\t\tleft: 0,\n\t\t\tright: 0,\n\t\t\t...this.viewportOffset\n\t\t};\n\n\t\tdata.viewportOffset.top += configuredViewportOffset.top;\n\t\tdata.viewportOffset.bottom += configuredViewportOffset.bottom;\n\t\tdata.viewportOffset.left += configuredViewportOffset.left;\n\t\tdata.viewportOffset.right += configuredViewportOffset.right;\n\t}\n}\n\n/**\n * Fired when the editor UI is ready.\n *\n * Fired before {@link module:engine/controller/datacontroller~DataController#event:ready}.\n *\n * @eventName ~EditorUI#ready\n */\nexport type EditorUIReadyEvent = {\n\tname: 'ready';\n\targs: [];\n};\n\n/**\n * Fired whenever the UI (all related components) should be refreshed.\n *\n * **Note:**: The event is fired after each {@link module:engine/view/document~Document#event:layoutChanged}.\n * It can also be fired manually via the {@link module:ui/editorui/editorui~EditorUI#update} method.\n *\n * @eventName ~EditorUI#update\n */\nexport type EditorUIUpdateEvent = {\n\tname: 'update';\n\targs: [];\n};\n\n/**\n * A definition of a focusable toolbar. Used by {@link module:ui/editorui/editorui~EditorUI#addToolbar}.\n */\nexport interface FocusableToolbarDefinition {\n\n\t/**\n\t * An instance of a focusable toolbar view.\n\t */\n\ttoolbarView: ToolbarView;\n\n\t/**\n\t * Options of a focusable toolbar view:\n\t *\n\t * * `isContextual`: Marks the higher priority toolbar. For example when there are 2 visible toolbars,\n\t * it allows to distinguish which toolbar should be focused first after the `alt+f10` keystroke\n\t * * `beforeFocus`: A callback executed before the `ToolbarView` gains focus upon the `Alt+F10` keystroke.\n\t * * `afterBlur`: A callback executed after `ToolbarView` loses focus upon `Esc` keystroke but before\n\t * the focus goes back to the `origin`.\n\t */\n\toptions: FocusableToolbarOptions;\n}\n\nexport interface FocusableToolbarOptions {\n\n\t/**\n\t * Set `true` if the toolbar is attached to the content of the editor. Such toolbar takes\n\t * a precedence over other toolbars when a user pressed Alt + F10.\n\t */\n\tisContextual?: boolean;\n\n\t/**\n\t * Specify a callback executed before the toolbar instance DOM element gains focus\n\t * upon the Alt + F10 keystroke.\n\t */\n\tbeforeFocus?: () => void;\n\n\t/**\n\t * Specify a callback executed after the toolbar instance DOM element loses focus upon\n\t * Esc keystroke but before the focus goes back to the {@link ~EditorUI#setEditableElement editable element}.\n\t */\n\tafterBlur?: () => void;\n}\n\n/**\n * Returns a number (weight) for a toolbar definition. Visible toolbars have a higher priority and so do\n * contextual toolbars (displayed in the context of a content, for instance, an image toolbar).\n *\n * A standard invisible toolbar is the heaviest. A visible contextual toolbar is the lightest.\n *\n * @param toolbarDef A toolbar definition to be weighted.\n */\nfunction getToolbarDefinitionWeight( toolbarDef: FocusableToolbarDefinition ): number {\n\tconst { toolbarView, options } = toolbarDef;\n\tlet weight = 10;\n\n\t// Prioritize already visible toolbars. They should get focused first.\n\tif ( isVisible( toolbarView.element ) ) {\n\t\tweight--;\n\t}\n\n\t// Prioritize contextual toolbars. They are displayed at the selection.\n\tif ( options.isContextual ) {\n\t\tweight--;\n\t}\n\n\treturn weight;\n}\n","import api from \"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../node_modules/css-loader/dist/cjs.js!../../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./editorui.css\";\n\nvar options = {\"injectType\":\"singletonStyleTag\",\"attributes\":{\"data-cke\":true}};\n\noptions.insert = \"head\";\noptions.singleton = true;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","/**\n * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module ui/editorui/editoruiview\n */\n\nimport View from '../view.js';\nimport BodyCollection from './bodycollection.js';\nimport type EditableUIView from '../editableui/editableuiview.js';\n\nimport type { Locale, LocaleTranslate } from '@ckeditor/ckeditor5-utils';\n\nimport '../../theme/components/editorui/editorui.css';\n\n/**\n * The editor UI view class. Base class for the editor main views.\n */\nexport default abstract class EditorUIView extends View {\n\t/**\n\t * Collection of the child views, detached from the DOM\n\t * structure of the editor, like panels, icons etc.\n\t */\n\tpublic readonly body: BodyCollection;\n\n\tdeclare public locale: Locale;\n\tdeclare public t: LocaleTranslate;\n\n\tpublic abstract get editable(): EditableUIView;\n\n\t/**\n\t * Creates an instance of the editor UI view class.\n\t *\n\t * @param locale The locale instance.\n\t */\n\tconstructor( locale: Locale ) {\n\t\tsuper( locale );\n\n\t\tthis.body = new BodyCollection( locale );\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic override render(): void {\n\t\tsuper.render();\n\n\t\tthis.body.attachToDom();\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic override destroy(): void {\n\t\tthis.body.detachFromDom();\n\n\t\treturn super.destroy();\n\t}\n}\n","/**\n * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module ui/editorui/boxed/boxededitoruiview\n */\n\nimport EditorUIView from '../editoruiview.js';\nimport LabelView from '../../label/labelview.js';\nimport type ViewCollection from '../../viewcollection.js';\n\nimport type { Locale } from '@ckeditor/ckeditor5-utils';\n\n/**\n * The boxed editor UI view class. This class represents an editor interface\n * consisting of a toolbar and an editable area, enclosed within a box.\n */\nexport default abstract class BoxedEditorUIView extends EditorUIView {\n\t/**\n\t * Collection of the child views located in the top (`.ck-editor__top`)\n\t * area of the UI.\n\t */\n\tpublic readonly top: ViewCollection;\n\n\t/**\n\t * Collection of the child views located in the main (`.ck-editor__main`)\n\t * area of the UI.\n\t */\n\tpublic readonly main: ViewCollection;\n\n\t/**\n\t * Voice label of the UI.\n\t */\n\tprivate readonly _voiceLabelView: LabelView;\n\n\t/**\n\t * Creates an instance of the boxed editor UI view class.\n\t *\n\t * @param locale The locale instance..\n\t */\n\tconstructor( locale: Locale ) {\n\t\tsuper( locale );\n\n\t\tthis.top = this.createCollection();\n\t\tthis.main = this.createCollection();\n\t\tthis._voiceLabelView = this._createVoiceLabel();\n\n\t\tthis.setTemplate( {\n\t\t\ttag: 'div',\n\n\t\t\tattributes: {\n\t\t\t\tclass: [\n\t\t\t\t\t'ck',\n\t\t\t\t\t'ck-reset',\n\t\t\t\t\t'ck-editor',\n\t\t\t\t\t'ck-rounded-corners'\n\t\t\t\t],\n\t\t\t\trole: 'application',\n\t\t\t\tdir: locale.uiLanguageDirection,\n\t\t\t\tlang: locale.uiLanguage,\n\t\t\t\t'aria-labelledby': this._voiceLabelView.id\n\t\t\t},\n\n\t\t\tchildren: [\n\t\t\t\tthis._voiceLabelView,\n\t\t\t\t{\n\t\t\t\t\ttag: 'div',\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\tclass: [\n\t\t\t\t\t\t\t'ck',\n\t\t\t\t\t\t\t'ck-editor__top',\n\t\t\t\t\t\t\t'ck-reset_all'\n\t\t\t\t\t\t],\n\t\t\t\t\t\trole: 'presentation'\n\t\t\t\t\t},\n\t\t\t\t\tchildren: this.top\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttag: 'div',\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\tclass: [\n\t\t\t\t\t\t\t'ck',\n\t\t\t\t\t\t\t'ck-editor__main'\n\t\t\t\t\t\t],\n\t\t\t\t\t\trole: 'presentation'\n\t\t\t\t\t},\n\t\t\t\t\tchildren: this.main\n\t\t\t\t}\n\t\t\t]\n\t\t} );\n\t}\n\n\t/**\n\t * Creates a voice label view instance.\n\t */\n\tprivate _createVoiceLabel() {\n\t\tconst t = this.t;\n\t\tconst voiceLabel = new LabelView();\n\n\t\tvoiceLabel.text = t( 'Rich Text Editor' );\n\n\t\tvoiceLabel.extendTemplate( {\n\t\t\tattributes: {\n\t\t\t\tclass: 'ck-voice-label'\n\t\t\t}\n\t\t} );\n\n\t\treturn voiceLabel;\n\t}\n}\n","/**\n * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module ui/editableui/editableuiview\n */\n\nimport View from '../view.js';\n\nimport type { EditingView } from '@ckeditor/ckeditor5-engine';\nimport type { Locale, ObservableChangeEvent } from '@ckeditor/ckeditor5-utils';\n\n/**\n * The editable UI view class.\n */\nexport default class EditableUIView extends View {\n\t/**\n\t * The name of the editable UI view.\n\t */\n\tpublic name: string | null = null;\n\n\t/**\n\t * Controls whether the editable is focused, i.e. the user is typing in it.\n\t *\n\t * @observable\n\t */\n\tdeclare public isFocused: boolean;\n\n\t/**\n\t * The editing view instance the editable is related to. Editable uses the editing\n\t * view to dynamically modify its certain DOM attributes after {@link #render rendering}.\n\t *\n\t * **Note**: The DOM attributes are performed by the editing view and not UI\n\t * {@link module:ui/view~View#bindTemplate template bindings} because once rendered,\n\t * the editable DOM element must remain under the full control of the engine to work properly.\n\t */\n\tprotected _editingView: EditingView;\n\n\t/**\n\t * The element which is the main editable element (usually the one with `contentEditable=\"true\"`).\n\t */\n\tprivate _editableElement: HTMLElement | null | undefined;\n\n\t/**\n\t * Whether an external {@link #_editableElement} was passed into the constructor, which also means\n\t * the view will not render its {@link #template}.\n\t */\n\tprivate _hasExternalElement: boolean;\n\n\t/**\n\t * Creates an instance of EditableUIView class.\n\t *\n\t * @param locale The locale instance.\n\t * @param editingView The editing view instance the editable is related to.\n\t * @param editableElement The editable element. If not specified, this view\n\t * should create it. Otherwise, the existing element should be used.\n\t */\n\tconstructor(\n\t\tlocale: Locale,\n\t\teditingView: EditingView,\n\t\teditableElement?: HTMLElement\n\t) {\n\t\tsuper( locale );\n\n\t\tthis.setTemplate( {\n\t\t\ttag: 'div',\n\t\t\tattributes: {\n\t\t\t\tclass: [\n\t\t\t\t\t'ck',\n\t\t\t\t\t'ck-content',\n\t\t\t\t\t'ck-editor__editable',\n\t\t\t\t\t'ck-rounded-corners'\n\t\t\t\t],\n\t\t\t\tlang: locale.contentLanguage,\n\t\t\t\tdir: locale.contentLanguageDirection\n\t\t\t}\n\t\t} );\n\n\t\tthis.set( 'isFocused', false );\n\n\t\tthis._editableElement = editableElement;\n\t\tthis._hasExternalElement = !!this._editableElement;\n\t\tthis._editingView = editingView;\n\t}\n\n\t/**\n\t * Renders the view by either applying the {@link #template} to the existing\n\t * {@link module:ui/editableui/editableuiview~EditableUIView#_editableElement} or assigning {@link #element}\n\t * as {@link module:ui/editableui/editableuiview~EditableUIView#_editableElement}.\n\t */\n\tpublic override render(): void {\n\t\tsuper.render();\n\n\t\tif ( this._hasExternalElement ) {\n\t\t\tthis.template!.apply( this.element = this._editableElement! );\n\t\t} else {\n\t\t\tthis._editableElement = this.element;\n\t\t}\n\n\t\tthis.on( 'change:isFocused', () => this._updateIsFocusedClasses() );\n\t\tthis._updateIsFocusedClasses();\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic override destroy(): void {\n\t\tif ( this._hasExternalElement ) {\n\t\t\tthis.template!.revert( this._editableElement! );\n\t\t}\n\n\t\tsuper.destroy();\n\t}\n\n\t/**\n\t * Whether an external {@link #_editableElement} was passed into the constructor, which also means\n\t * the view will not render its {@link #template}.\n\t */\n\tpublic get hasExternalElement(): boolean {\n\t\treturn this._hasExternalElement;\n\t}\n\n\t/**\n\t * Updates the `ck-focused` and `ck-blurred` CSS classes on the {@link #element} according to\n\t * the {@link #isFocused} property value using the {@link #_editingView editing view} API.\n\t */\n\tprivate _updateIsFocusedClasses() {\n\t\tconst editingView = this._editingView;\n\n\t\tif ( editingView.isRenderingInProgress ) {\n\t\t\tupdateAfterRender( this );\n\t\t} else {\n\t\t\tupdate( this );\n\t\t}\n\n\t\tfunction update( view: EditableUIView ) {\n\t\t\teditingView.change( writer => {\n\t\t\t\tconst viewRoot = editingView.document.getRoot( view.name! )!;\n\n\t\t\t\twriter.addClass( view.isFocused ? 'ck-focused' : 'ck-blurred', viewRoot );\n\t\t\t\twriter.removeClass( view.isFocused ? 'ck-blurred' : 'ck-focused', viewRoot );\n\t\t\t} );\n\t\t}\n\n\t\t// In a case of a multi-root editor, a callback will be attached more than once (one callback for each root).\n\t\t// While executing one callback the `isRenderingInProgress` observable is changing what causes executing another\n\t\t// callback and render is called inside the already pending render.\n\t\t// We need to be sure that callback is executed only when the value has changed from `true` to `false`.\n\t\t// See https://github.com/ckeditor/ckeditor5/issues/1676.\n\t\tfunction updateAfterRender( view: EditableUIView ) {\n\t\t\teditingView.once>( 'change:isRenderingInProgress', ( evt, name, value ) => {\n\t\t\t\tif ( !value ) {\n\t\t\t\t\tupdate( view );\n\t\t\t\t} else {\n\t\t\t\t\tupdateAfterRender( view );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t}\n}\n","/**\n * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module ui/editableui/inline/inlineeditableuiview\n */\n\nimport EditableUIView from '../editableuiview.js';\n\nimport type { EditingView } from '@ckeditor/ckeditor5-engine';\nimport type { Locale } from '@ckeditor/ckeditor5-utils';\n\n/**\n * The inline editable UI class implementing an inline {@link module:ui/editableui/editableuiview~EditableUIView}.\n */\nexport default class InlineEditableUIView extends EditableUIView {\n\t/**\n\t * A function that gets called with the instance of this view as an argument and should return a string that\n\t * represents the label of the editable for assistive technologies.\n\t */\n\tprivate readonly _generateLabel: ( view: InlineEditableUIView ) => string;\n\n\t/**\n\t * Creates an instance of the InlineEditableUIView class.\n\t *\n\t * @param locale The locale instance.\n\t * @param editingView The editing view instance the editable is related to.\n\t * @param editableElement The editable element. If not specified, the\n\t * {@link module:ui/editableui/editableuiview~EditableUIView}\n\t * will create it. Otherwise, the existing element will be used.\n\t * @param options Additional configuration of the view.\n\t * @param options.label A function that gets called with the instance of this view as an argument\n\t * and should return a string that represents the label of the editable for assistive technologies. If not provided,\n\t * a default label generator is used.\n\t */\n\tconstructor(\n\t\tlocale: Locale,\n\t\teditingView: EditingView,\n\t\teditableElement?: HTMLElement,\n\t\toptions: { label?: ( view: InlineEditableUIView ) => string } = {}\n\t) {\n\t\tsuper( locale, editingView, editableElement );\n\n\t\tconst t = locale.t;\n\n\t\tthis.extendTemplate( {\n\t\t\tattributes: {\n\t\t\t\trole: 'textbox',\n\t\t\t\tclass: 'ck-editor__editable_inline'\n\t\t\t}\n\t\t} );\n\n\t\tthis._generateLabel = options.label || ( () => t( 'Editor editing area: %0', this.name! ) );\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic override render(): void {\n\t\tsuper.render();\n\n\t\tconst editingView = this._editingView;\n\n\t\teditingView.change( writer => {\n\t\t\tconst viewRoot = editingView.document.getRoot( this.name! );\n\n\t\t\twriter.setAttribute( 'aria-label', this._generateLabel( this ), viewRoot! );\n\t\t} );\n\t}\n}\n","/**\n * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module ui/notification/notification\n */\n\n/* globals window */\n\nimport { ContextPlugin } from '@ckeditor/ckeditor5-core';\n\n/**\n * The Notification plugin.\n *\n * This plugin sends a few types of notifications: `success`, `info` and `warning`. The notifications need to be\n * handled and displayed by a plugin responsible for showing the UI of the notifications. Using this plugin for dispatching\n * notifications makes it possible to switch the notifications UI.\n *\n * Note that every unhandled and not stopped `warning` notification will be displayed as a system alert.\n * See {@link module:ui/notification/notification~Notification#showWarning}.\n */\nexport default class Notification extends ContextPlugin {\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic static get pluginName() {\n\t\treturn 'Notification' as const;\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic init(): void {\n\t\t// Each unhandled and not stopped `show:warning` event is displayed as a system alert.\n\t\tthis.on( 'show:warning', ( evt, data ) => {\n\t\t\twindow.alert( data.message ); // eslint-disable-line no-alert\n\t\t}, { priority: 'lowest' } );\n\t}\n\n\t/**\n\t * Shows a success notification.\n\t *\n\t * By default, it fires the {@link #event:show:success `show:success` event} with the given `data`. The event namespace can be extended\n\t * using the `data.namespace` option. For example:\n\t *\n\t * ```ts\n\t * showSuccess( 'Image is uploaded.', {\n\t * \tnamespace: 'upload:image'\n\t * } );\n\t * ```\n\t *\n\t * will fire the `show:success:upload:image` event.\n\t *\n\t * You can provide the title of the notification:\n\t *\n\t * ```ts\n\t * showSuccess( 'Image is uploaded.', {\n\t * \ttitle: 'Image upload success'\n\t * } );\n\t * ```\n\t *\n\t * @param message The content of the notification.\n\t * @param data Additional data.\n\t * @param data.namespace Additional event namespace.\n\t * @param data.title The title of the notification.\n\t */\n\tpublic showSuccess(\n\t\tmessage: string,\n\t\tdata: { namespace?: string; title?: string } = {}\n\t): void {\n\t\tthis._showNotification( {\n\t\t\tmessage,\n\t\t\ttype: 'success',\n\t\t\tnamespace: data.namespace,\n\t\t\ttitle: data.title\n\t\t} );\n\t}\n\n\t/**\n\t * Shows an information notification.\n\t *\n\t * By default, it fires the {@link #event:show:info `show:info` event} with the given `data`. The event namespace can be extended\n\t * using the `data.namespace` option. For example:\n\t *\n\t * ```ts\n\t * showInfo( 'Editor is offline.', {\n\t * \tnamespace: 'editor:status'\n\t * } );\n\t * ```\n\t *\n\t * will fire the `show:info:editor:status` event.\n\t *\n\t * You can provide the title of the notification:\n\t *\n\t * ```ts\n\t * showInfo( 'Editor is offline.', {\n\t * \ttitle: 'Network information'\n\t * } );\n\t * ```\n\t *\n\t * @param message The content of the notification.\n\t * @param data Additional data.\n\t * @param data.namespace Additional event namespace.\n\t * @param data.title The title of the notification.\n\t */\n\tpublic showInfo(\n\t\tmessage: string,\n\t\tdata: { namespace?: string; title?: string } = {}\n\t): void {\n\t\tthis._showNotification( {\n\t\t\tmessage,\n\t\t\ttype: 'info',\n\t\t\tnamespace: data.namespace,\n\t\t\ttitle: data.title\n\t\t} );\n\t}\n\n\t/**\n\t * Shows a warning notification.\n\t *\n\t * By default, it fires the {@link #event:show:warning `show:warning` event}\n\t * with the given `data`. The event namespace can be extended using the `data.namespace` option. For example:\n\t *\n\t * ```ts\n\t * showWarning( 'Image upload error.', {\n\t * \tnamespace: 'upload:image'\n\t * } );\n\t * ```\n\t *\n\t * will fire the `show:warning:upload:image` event.\n\t *\n\t * You can provide the title of the notification:\n\t *\n\t * ```ts\n\t * showWarning( 'Image upload error.', {\n\t * \ttitle: 'Upload failed'\n\t * } );\n\t * ```\n\t *\n\t * Note that each unhandled and not stopped `warning` notification will be displayed as a system alert.\n\t * The plugin responsible for displaying warnings should `stop()` the event to prevent displaying it as an alert:\n\t *\n\t * ```ts\n\t * notifications.on( 'show:warning', ( evt, data ) => {\n\t * \t// Do something with the data.\n\t *\n\t * \t// Stop this event to prevent displaying it as an alert.\n\t * \tevt.stop();\n\t * } );\n\t * ```\n\t *\n\t * You can attach many listeners to the same event and `stop()` this event in a listener with a low priority:\n\t *\n\t * ```ts\n\t * notifications.on( 'show:warning', ( evt, data ) => {\n\t * \t// Show the warning in the UI, but do not stop it.\n\t * } );\n\t *\n\t * notifications.on( 'show:warning', ( evt, data ) => {\n\t * \t// Log the warning to some error tracker.\n\t *\n\t * \t// Stop this event to prevent displaying it as an alert.\n\t * \tevt.stop();\n\t * }, { priority: 'low' } );\n\t * ```\n\t *\n\t * @param message The content of the notification.\n\t * @param data Additional data.\n\t * @param data.namespace Additional event namespace.\n\t * @param data.title The title of the notification.\n\t */\n\tpublic showWarning(\n\t\tmessage: string,\n\t\tdata: { namespace?: string; title?: string } = {}\n\t): void {\n\t\tthis._showNotification( {\n\t\t\tmessage,\n\t\t\ttype: 'warning',\n\t\t\tnamespace: data.namespace,\n\t\t\ttitle: data.title\n\t\t} );\n\t}\n\n\t/**\n\t * Fires the `show` event with the specified type, namespace and message.\n\t *\n\t * @param data The message data.\n\t * @param data.message The content of the notification.\n\t * @param data.type The type of the message.\n\t * @param data.namespace Additional event namespace.\n\t * @param data.title The title of the notification.\n\t */\n\tprivate _showNotification( data: {\n\t\tmessage: string;\n\t\ttype: NotificationEventType;\n\t\tnamespace?: string;\n\t\ttitle?: string;\n\t} ): void {\n\t\tconst event = data.namespace ?\n\t\t\t`show:${ data.type }:${ data.namespace }` as const :\n\t\t\t`show:${ data.type }` as const;\n\n\t\tthis.fire>( event, {\n\t\t\tmessage: data.message,\n\t\t\ttype: data.type,\n\t\t\ttitle: data.title || ''\n\t\t} );\n\t}\n}\n\nexport type NotificationEventType = 'success' | 'info' | 'warning';\n\n/**\n * Fired when one of the `showSuccess()`, `showInfo()`, `showWarning()` methods is called.\n *\n * @eventName ~Notification#show\n * @param data The notification data.\n */\nexport type NotificationShowEvent = {\n\tname: 'show';\n\targs: [ data: NotificationShowEventData ];\n};\n\n/**\n * Fired when the `showSuccess()` method is called.\n *\n * @eventName ~Notification#show:success\n * @param data The notification data.\n */\nexport type NotificationShowSuccessEvent = NotificationShowTypeEvent<'success'>;\n\n/**\n * Fired when the `showInfo()` method is called.\n *\n * @eventName ~Notification#show:info\n * @param data The notification data.\n */\nexport type NotificationShowInfoEvent = NotificationShowTypeEvent<'info'>;\n\n/**\n * Fired when the `showWarning()` method is called.\n *\n * When this event is not handled or stopped by `event.stop()`, the `data.message` of this event will\n * be automatically displayed as a system alert.\n *\n * @eventName ~Notification#show:warning\n * @param data The notification data.\n */\nexport type NotificationShowWarningEvent = NotificationShowTypeEvent<'warning'>;\n\nexport type NotificationShowTypeEvent = {\n\tname: `show:${ NotificationType }` | `show:${ NotificationType }:${ string }`;\n\targs: [ data: NotificationShowEventData ];\n};\n\nexport type NotificationShowEventData = {\n\n\t/**\n\t * The content of the notification.\n\t */\n\tmessage: string;\n\n\t/**\n\t * The title of the notification.\n\t */\n\ttitle: string;\n\n\t/**\n\t * The type of the notification.\n\t */\n\ttype: NotificationType;\n};\n","/**\n * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module ui/model\n */\n\nimport { ObservableMixin } from '@ckeditor/ckeditor5-utils';\nimport { extend } from 'lodash-es';\n\n/**\n * The base MVC model class.\n */\nexport default class Model extends ObservableMixin() {\n\t[ x: string ]: unknown;\n\n\t/**\n\t * Creates a new Model instance.\n\t *\n\t * @param attributes The model state attributes to be defined during the instance creation.\n\t * @param properties The (out of state) properties to be appended to the instance during creation.\n\t */\n\tconstructor( attributes?: Record, properties?: Record ) {\n\t\tsuper();\n\n\t\t// Extend this instance with the additional (out of state) properties.\n\t\tif ( properties ) {\n\t\t\textend( this, properties );\n\t\t}\n\n\t\t// Initialize the attributes.\n\t\tif ( attributes ) {\n\t\t\tthis.set( attributes );\n\t\t}\n\t}\n}\n","import api from \"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../node_modules/css-loader/dist/cjs.js!../../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./balloonrotator.css\";\n\nvar options = {\"injectType\":\"singletonStyleTag\",\"attributes\":{\"data-cke\":true}};\n\noptions.insert = \"head\";\noptions.singleton = true;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","import api from \"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../node_modules/css-loader/dist/cjs.js!../../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./fakepanel.css\";\n\nvar options = {\"injectType\":\"singletonStyleTag\",\"attributes\":{\"data-cke\":true}};\n\noptions.insert = \"head\";\noptions.singleton = true;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","/**\n * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module ui/panel/balloon/contextualballoon\n */\n\nimport BalloonPanelView from './balloonpanelview.js';\nimport View from '../../view.js';\nimport ButtonView from '../../button/buttonview.js';\nimport type { ButtonExecuteEvent } from '../../button/button.js';\nimport type ViewCollection from '../../viewcollection.js';\n\nimport { Plugin, icons, type Editor } from '@ckeditor/ckeditor5-core';\nimport {\n\tCKEditorError,\n\tFocusTracker,\n\tRect,\n\ttoUnit,\n\ttype Locale,\n\ttype ObservableChangeEvent,\n\ttype PositionOptions\n} from '@ckeditor/ckeditor5-utils';\n\nimport '../../../theme/components/panel/balloonrotator.css';\nimport '../../../theme/components/panel/fakepanel.css';\n\nconst toPx = toUnit( 'px' );\n\n/**\n * Provides the common contextual balloon for the editor.\n *\n * The role of this plugin is to unify the contextual balloons logic, simplify views management and help\n * avoid the unnecessary complexity of handling multiple {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView}\n * instances in the editor.\n *\n * This plugin allows for creating single or multiple panel stacks.\n *\n * Each stack may have multiple views, with the one on the top being visible. When the visible view is removed from the stack,\n * the previous view becomes visible.\n *\n * It might be useful to implement nested navigation in a balloon. For instance, a toolbar view may contain a link button.\n * When you click it, a link view (which lets you set the URL) is created and put on top of the toolbar view, so the link panel\n * is displayed. When you finish editing the link and close (remove) the link view, the toolbar view is visible again.\n *\n * However, there are cases when there are multiple independent balloons to be displayed, for instance, if the selection\n * is inside two inline comments at the same time. For such cases, you can create two independent panel stacks.\n * The contextual balloon plugin will create a navigation bar to let the users switch between these panel stacks using the \"Next\"\n * and \"Previous\" buttons.\n *\n * If there are no views in the current stack, the balloon panel will try to switch to the next stack. If there are no\n * panels in any stack, the balloon panel will be hidden.\n *\n * **Note**: To force the balloon panel to show only one view, even if there are other stacks, use the `singleViewMode=true` option\n * when {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon#add adding} a view to a panel.\n *\n * From the implementation point of view, the contextual ballon plugin is reusing a single\n * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView} instance to display multiple contextual balloon\n * panels in the editor. It also creates a special {@link module:ui/panel/balloon/contextualballoon~RotatorView rotator view},\n * used to manage multiple panel stacks. Rotator view is a child of the balloon panel view and the parent of the specific\n * view you want to display. If there is more than one panel stack to be displayed, the rotator view will add a\n * navigation bar. If there is only one stack, the rotator view is transparent (it does not add any UI elements).\n */\nexport default class ContextualBalloon extends Plugin {\n\t/**\n\t * The {@link module:utils/dom/position~Options#limiter position limiter}\n\t * for the {@link #view balloon}, used when no `limiter` has been passed into {@link #add}\n\t * or {@link #updatePosition}.\n\t *\n\t * By default, a function that obtains the farthest DOM\n\t * {@link module:engine/view/rooteditableelement~RootEditableElement}\n\t * of the {@link module:engine/view/document~Document#selection}.\n\t */\n\tpublic positionLimiter: PositionOptions[ 'limiter' ];\n\n\tpublic visibleStack?: string;\n\n\t/**\n\t * The currently visible view or `null` when there are no views in any stack.\n\t *\n\t * @readonly\n\t * @observable\n\t */\n\tdeclare public visibleView: View | null;\n\n\t/**\n\t * A total number of all stacks in the balloon.\n\t *\n\t * @private\n\t * @readonly\n\t * @observable\n\t */\n\tdeclare public _numberOfStacks: number;\n\n\t/**\n\t * A flag that controls the single view mode.\n\t *\n\t * @private\n\t * @readonly\n\t * @observable\n\t */\n\tdeclare public _singleViewMode: boolean;\n\n\t/**\n\t * The map of views and their stacks.\n\t */\n\tprivate _viewToStack = new Map();\n\n\t/**\n\t * The map of IDs and stacks.\n\t */\n\tprivate _idToStack = new Map();\n\n\t/**\n\t * The common balloon panel view.\n\t */\n\tprivate _view: BalloonPanelView | null = null;\n\n\t/**\n\t * Rotator view embedded in the contextual balloon.\n\t * Displays the currently visible view in the balloon and provides navigation for switching stacks.\n\t */\n\tprivate _rotatorView: RotatorView | null = null;\n\n\t/**\n\t * Displays fake panels under the balloon panel view when multiple stacks are added to the balloon.\n\t */\n\tprivate _fakePanelsView: FakePanelsView | null = null;\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic static get pluginName() {\n\t\treturn 'ContextualBalloon' as const;\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tconstructor( editor: Editor ) {\n\t\tsuper( editor );\n\n\t\tthis.positionLimiter = () => {\n\t\t\tconst view = this.editor.editing.view;\n\t\t\tconst viewDocument = view.document;\n\t\t\tconst editableElement = viewDocument.selection.editableElement;\n\n\t\t\tif ( editableElement ) {\n\t\t\t\treturn view.domConverter.mapViewToDom( editableElement.root ) as HTMLElement;\n\t\t\t}\n\n\t\t\treturn null;\n\t\t};\n\n\t\tthis.set( 'visibleView', null );\n\t\tthis.set( '_numberOfStacks', 0 );\n\t\tthis.set( '_singleViewMode', false );\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic override destroy(): void {\n\t\tsuper.destroy();\n\n\t\tif ( this._view ) {\n\t\t\tthis._view.destroy();\n\t\t}\n\n\t\tif ( this._rotatorView ) {\n\t\t\tthis._rotatorView.destroy();\n\t\t}\n\n\t\tif ( this._fakePanelsView ) {\n\t\t\tthis._fakePanelsView.destroy();\n\t\t}\n\t}\n\n\t/**\n\t * The common balloon panel view.\n\t */\n\tpublic get view(): BalloonPanelView {\n\t\tif ( !this._view ) {\n\t\t\tthis._createPanelView();\n\t\t}\n\n\t\treturn this._view!;\n\t}\n\n\t/**\n\t * Returns `true` when the given view is in one of the stacks. Otherwise returns `false`.\n\t */\n\tpublic hasView( view: View ): boolean {\n\t\treturn Array.from( this._viewToStack.keys() ).includes( view );\n\t}\n\n\t/**\n\t * Adds a new view to the stack and makes it visible if the current stack is visible\n\t * or it is the first view in the balloon.\n\t *\n\t * @param data The configuration of the view.\n\t * @param data.stackId The ID of the stack that the view is added to. Defaults to `'main'`.\n\t * @param data.view The content of the balloon.\n\t * @param data.position Positioning options.\n\t * @param data.balloonClassName An additional CSS class added to the {@link #view balloon} when visible.\n\t * @param data.withArrow Whether the {@link #view balloon} should be rendered with an arrow. Defaults to `true`.\n\t * @param data.singleViewMode Whether the view should be the only visible view even if other stacks were added. Defaults to `false`.\n\t */\n\tpublic add( data: ViewConfiguration ): void {\n\t\tif ( !this._view ) {\n\t\t\tthis._createPanelView();\n\t\t}\n\n\t\tif ( this.hasView( data.view ) ) {\n\t\t\t/**\n\t\t\t * Trying to add configuration of the same view more than once.\n\t\t\t *\n\t\t\t * @error contextualballoon-add-view-exist\n\t\t\t */\n\t\t\tthrow new CKEditorError(\n\t\t\t\t'contextualballoon-add-view-exist',\n\t\t\t\t[ this, data ]\n\t\t\t);\n\t\t}\n\n\t\tconst stackId = data.stackId || 'main';\n\n\t\t// If new stack is added, creates it and show view from this stack.\n\t\tif ( !this._idToStack.has( stackId ) ) {\n\t\t\tthis._idToStack.set( stackId, new Map( [ [ data.view, data ] ] ) );\n\t\t\tthis._viewToStack.set( data.view, this._idToStack.get( stackId )! );\n\t\t\tthis._numberOfStacks = this._idToStack.size;\n\n\t\t\tif ( !this._visibleStack || data.singleViewMode ) {\n\t\t\t\tthis.showStack( stackId );\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tconst stack = this._idToStack.get( stackId )!;\n\n\t\tif ( data.singleViewMode ) {\n\t\t\tthis.showStack( stackId );\n\t\t}\n\n\t\t// Add new view to the stack.\n\t\tstack.set( data.view, data );\n\t\tthis._viewToStack.set( data.view, stack );\n\n\t\t// And display it if is added to the currently visible stack.\n\t\tif ( stack === this._visibleStack ) {\n\t\t\tthis._showView( data );\n\t\t}\n\t}\n\n\t/**\n\t * Removes the given view from the stack. If the removed view was visible,\n\t * the view preceding it in the stack will become visible instead.\n\t * When there is no view in the stack, the next stack will be displayed.\n\t * When there are no more stacks, the balloon will hide.\n\t *\n\t * @param view A view to be removed from the balloon.\n\t */\n\tpublic remove( view: View ): void {\n\t\tif ( !this.hasView( view ) ) {\n\t\t\t/**\n\t\t\t * Trying to remove the configuration of the view not defined in the stack.\n\t\t\t *\n\t\t\t * @error contextualballoon-remove-view-not-exist\n\t\t\t */\n\t\t\tthrow new CKEditorError(\n\t\t\t\t'contextualballoon-remove-view-not-exist',\n\t\t\t\t[ this, view ]\n\t\t\t);\n\t\t}\n\n\t\tconst stack = this._viewToStack.get( view )!;\n\n\t\tif ( this._singleViewMode && this.visibleView === view ) {\n\t\t\tthis._singleViewMode = false;\n\t\t}\n\n\t\t// When visible view will be removed we need to show a preceding view or next stack\n\t\t// if a view is the only view in the stack.\n\t\tif ( this.visibleView === view ) {\n\t\t\tif ( stack.size === 1 ) {\n\t\t\t\tif ( this._idToStack.size > 1 ) {\n\t\t\t\t\tthis._showNextStack();\n\t\t\t\t} else {\n\t\t\t\t\tthis.view.hide();\n\t\t\t\t\tthis.visibleView = null;\n\t\t\t\t\tthis._rotatorView!.hideView();\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis._showView( Array.from( stack.values() )[ stack.size - 2 ] );\n\t\t\t}\n\t\t}\n\n\t\tif ( stack.size === 1 ) {\n\t\t\tthis._idToStack.delete( this._getStackId( stack ) );\n\t\t\tthis._numberOfStacks = this._idToStack.size;\n\t\t} else {\n\t\t\tstack.delete( view );\n\t\t}\n\n\t\tthis._viewToStack.delete( view );\n\t}\n\n\t/**\n\t * Updates the position of the balloon using the position data of the first visible view in the stack.\n\t * When new position data is given, the position data of the currently visible view will be updated.\n\t *\n\t * @param position Position options.\n\t */\n\tpublic updatePosition( position?: Partial ): void {\n\t\tif ( position ) {\n\t\t\tthis._visibleStack.get( this.visibleView! )!.position = position;\n\t\t}\n\n\t\tthis.view.pin( this._getBalloonPosition()! );\n\t\tthis._fakePanelsView!.updatePosition();\n\t}\n\n\t/**\n\t * Shows the last view from the stack of a given ID.\n\t */\n\tpublic showStack( id: string ): void {\n\t\tthis.visibleStack = id;\n\t\tconst stack = this._idToStack.get( id );\n\n\t\tif ( !stack ) {\n\t\t\t/**\n\t\t\t * Trying to show a stack that does not exist.\n\t\t\t *\n\t\t\t * @error contextualballoon-showstack-stack-not-exist\n\t\t\t */\n\t\t\tthrow new CKEditorError(\n\t\t\t\t'contextualballoon-showstack-stack-not-exist',\n\t\t\t\tthis\n\t\t\t);\n\t\t}\n\n\t\tif ( this._visibleStack === stack ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._showView( Array.from( stack.values() ).pop()! );\n\t}\n\n\t/**\n\t * Initializes view instances.\n\t */\n\tprivate _createPanelView(): void {\n\t\tthis._view = new BalloonPanelView( this.editor.locale );\n\n\t\tthis.editor.ui.view.body.add( this._view );\n\t\tthis.editor.ui.focusTracker.add( this._view.element! );\n\n\t\tthis._rotatorView = this._createRotatorView();\n\t\tthis._fakePanelsView = this._createFakePanelsView();\n\t}\n\n\t/**\n\t * Returns the stack of the currently visible view.\n\t */\n\tprivate get _visibleStack() {\n\t\treturn this._viewToStack.get( this.visibleView! )!;\n\t}\n\n\t/**\n\t * Returns the ID of the given stack.\n\t */\n\tprivate _getStackId( stack: Stack ) {\n\t\tconst entry = Array.from( this._idToStack.entries() ).find( entry => entry[ 1 ] === stack )!;\n\n\t\treturn entry[ 0 ];\n\t}\n\n\t/**\n\t * Shows the last view from the next stack.\n\t */\n\tprivate _showNextStack() {\n\t\tconst stacks = Array.from( this._idToStack.values() );\n\n\t\tlet nextIndex = stacks.indexOf( this._visibleStack ) + 1;\n\n\t\tif ( !stacks[ nextIndex ] ) {\n\t\t\tnextIndex = 0;\n\t\t}\n\n\t\tthis.showStack( this._getStackId( stacks[ nextIndex ] ) );\n\t}\n\n\t/**\n\t * Shows the last view from the previous stack.\n\t */\n\tprivate _showPrevStack() {\n\t\tconst stacks = Array.from( this._idToStack.values() );\n\n\t\tlet nextIndex = stacks.indexOf( this._visibleStack ) - 1;\n\n\t\tif ( !stacks[ nextIndex ] ) {\n\t\t\tnextIndex = stacks.length - 1;\n\t\t}\n\n\t\tthis.showStack( this._getStackId( stacks[ nextIndex ] ) );\n\t}\n\n\t/**\n\t * Creates a rotator view.\n\t */\n\tprivate _createRotatorView() {\n\t\tconst view = new RotatorView( this.editor.locale );\n\t\tconst t = this.editor.locale.t;\n\n\t\tthis.view.content.add( view );\n\n\t\t// Hide navigation when there is only a one stack & not in single view mode.\n\t\tview.bind( 'isNavigationVisible' ).to( this, '_numberOfStacks', this, '_singleViewMode', ( value, isSingleViewMode ) => {\n\t\t\treturn !isSingleViewMode && value > 1;\n\t\t} );\n\n\t\t// Update balloon position after toggling navigation.\n\t\tview.on( 'change:isNavigationVisible', () => ( this.updatePosition() ), { priority: 'low' } );\n\n\t\t// Update stacks counter value.\n\t\tview.bind( 'counter' ).to( this, 'visibleView', this, '_numberOfStacks', ( visibleView, numberOfStacks ) => {\n\t\t\tif ( numberOfStacks < 2 ) {\n\t\t\t\treturn '';\n\t\t\t}\n\n\t\t\tconst current = Array.from( this._idToStack.values() ).indexOf( this._visibleStack ) + 1;\n\n\t\t\treturn t( '%0 of %1', [ current, numberOfStacks ] );\n\t\t} );\n\n\t\tview.buttonNextView.on( 'execute', () => {\n\t\t\t// When current view has a focus then move focus to the editable before removing it,\n\t\t\t// otherwise editor will lost focus.\n\t\t\tif ( view.focusTracker.isFocused ) {\n\t\t\t\tthis.editor.editing.view.focus();\n\t\t\t}\n\n\t\t\tthis._showNextStack();\n\t\t} );\n\n\t\tview.buttonPrevView.on( 'execute', () => {\n\t\t\t// When current view has a focus then move focus to the editable before removing it,\n\t\t\t// otherwise editor will lost focus.\n\t\t\tif ( view.focusTracker.isFocused ) {\n\t\t\t\tthis.editor.editing.view.focus();\n\t\t\t}\n\n\t\t\tthis._showPrevStack();\n\t\t} );\n\n\t\treturn view;\n\t}\n\n\t/**\n\t * Creates a fake panels view.\n\t */\n\tprivate _createFakePanelsView() {\n\t\tconst view = new FakePanelsView( this.editor.locale, this.view );\n\n\t\tview.bind( 'numberOfPanels' ).to( this, '_numberOfStacks', this, '_singleViewMode', ( number, isSingleViewMode ) => {\n\t\t\tconst showPanels = !isSingleViewMode && number >= 2;\n\n\t\t\treturn showPanels ? Math.min( number - 1, 2 ) : 0;\n\t\t} );\n\n\t\tview.listenTo( this.view, 'change:top', () => view.updatePosition() );\n\t\tview.listenTo( this.view, 'change:left', () => view.updatePosition() );\n\n\t\tthis.editor.ui.view.body.add( view );\n\n\t\treturn view;\n\t}\n\n\t/**\n\t * Sets the view as the content of the balloon and attaches the balloon using position\n\t * options of the first view.\n\t *\n\t * @param data Configuration.\n\t * @param data.view The view to show in the balloon.\n\t * @param data.balloonClassName Additional class name which will be added to the {@link #view balloon}.\n\t * @param data.withArrow Whether the {@link #view balloon} should be rendered with an arrow.\n\t */\n\tprivate _showView( { view, balloonClassName = '', withArrow = true, singleViewMode = false }: ViewConfiguration ) {\n\t\tthis.view.class = balloonClassName;\n\t\tthis.view.withArrow = withArrow;\n\n\t\tthis._rotatorView!.showView( view );\n\t\tthis.visibleView = view;\n\t\tthis.view.pin( this._getBalloonPosition()! );\n\t\tthis._fakePanelsView!.updatePosition();\n\n\t\tif ( singleViewMode ) {\n\t\t\tthis._singleViewMode = true;\n\t\t}\n\t}\n\n\t/**\n\t * Returns position options of the last view in the stack.\n\t * This keeps the balloon in the same position when the view is changed.\n\t */\n\tprivate _getBalloonPosition() {\n\t\tlet position = Array.from( this._visibleStack.values() ).pop()!.position;\n\n\t\tif ( position ) {\n\t\t\t// Use the default limiter if none has been specified.\n\t\t\tif ( !position.limiter ) {\n\t\t\t\t// Don't modify the original options object.\n\t\t\t\tposition = Object.assign( {}, position, {\n\t\t\t\t\tlimiter: this.positionLimiter\n\t\t\t\t} );\n\t\t\t}\n\n\t\t\t// Don't modify the original options object.\n\t\t\tposition = Object.assign( {}, position, {\n\t\t\t\tviewportOffsetConfig: this.editor.ui.viewportOffset\n\t\t\t} );\n\t\t}\n\n\t\treturn position;\n\t}\n}\n\n/**\n * The configuration of the view.\n */\nexport interface ViewConfiguration {\n\n\t/**\n\t * The ID of the stack that the view is added to.\n\t *\n\t * @default 'main'\n\t */\n\tstackId?: string;\n\n\t/**\n\t * The content of the balloon.\n\t */\n\tview: View;\n\n\t/**\n\t * Positioning options.\n\t */\n\tposition?: Partial;\n\n\t/**\n\t * An additional CSS class added to the {@link #view balloon} when visible.\n\t */\n\tballoonClassName?: string;\n\n\t/**\n\t * Whether the {@link #view balloon} should be rendered with an arrow.\n\t *\n\t * @default true\n\t */\n\twithArrow?: boolean;\n\n\t/**\n\t * Whether the view should be the only visible view even if other stacks were added.\n\t *\n\t * @default false\n\t */\n\tsingleViewMode?: boolean;\n}\n\ntype Stack = Map;\n\n/**\n * Rotator view is a helper class for the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon ContextualBalloon}.\n * It is used for displaying the last view from the current stack and providing navigation buttons for switching stacks.\n * See the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon ContextualBalloon} documentation to learn more.\n */\nexport class RotatorView extends View {\n\t/**\n\t * Used for checking if a view is focused or not.\n\t */\n\tpublic readonly focusTracker: FocusTracker;\n\n\t/**\n\t * Navigation button for switching the stack to the previous one.\n\t */\n\tpublic readonly buttonPrevView: ButtonView;\n\n\t/**\n\t * Navigation button for switching the stack to the next one.\n\t */\n\tpublic readonly buttonNextView: ButtonView;\n\n\t/**\n\t * A collection of the child views that creates the rotator content.\n\t */\n\tpublic readonly content: ViewCollection;\n\n\t/**\n\t * Defines whether navigation is visible or not.\n\t *\n\t * @observable\n\t */\n\tdeclare public isNavigationVisible: boolean;\n\n\t/**\n\t * @observable\n\t */\n\tdeclare public counter: string;\n\n\t/**\n\t * @inheritDoc\n\t */\n\tconstructor( locale: Locale ) {\n\t\tsuper( locale );\n\n\t\tconst t = locale.t;\n\t\tconst bind = this.bindTemplate;\n\n\t\tthis.set( 'isNavigationVisible', true );\n\n\t\tthis.focusTracker = new FocusTracker();\n\t\tthis.buttonPrevView = this._createButtonView( t( 'Previous' ), icons.previousArrow );\n\t\tthis.buttonNextView = this._createButtonView( t( 'Next' ), icons.nextArrow );\n\t\tthis.content = this.createCollection();\n\n\t\tthis.setTemplate( {\n\t\t\ttag: 'div',\n\t\t\tattributes: {\n\t\t\t\tclass: [\n\t\t\t\t\t'ck',\n\t\t\t\t\t'ck-balloon-rotator'\n\t\t\t\t],\n\t\t\t\t'z-index': '-1'\n\t\t\t},\n\t\t\tchildren: [\n\t\t\t\t{\n\t\t\t\t\ttag: 'div',\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\tclass: [\n\t\t\t\t\t\t\t'ck-balloon-rotator__navigation',\n\t\t\t\t\t\t\tbind.to( 'isNavigationVisible', value => value ? '' : 'ck-hidden' )\n\t\t\t\t\t\t]\n\t\t\t\t\t},\n\t\t\t\t\tchildren: [\n\t\t\t\t\t\tthis.buttonPrevView,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttag: 'span',\n\n\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\tclass: [\n\t\t\t\t\t\t\t\t\t'ck-balloon-rotator__counter'\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t},\n\n\t\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttext: bind.to( 'counter' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t},\n\t\t\t\t\t\tthis.buttonNextView\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttag: 'div',\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\tclass: 'ck-balloon-rotator__content'\n\t\t\t\t\t},\n\t\t\t\t\tchildren: this.content\n\t\t\t\t}\n\t\t\t]\n\t\t} );\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic override render(): void {\n\t\tsuper.render();\n\n\t\tthis.focusTracker.add( this.element! );\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic override destroy(): void {\n\t\tsuper.destroy();\n\n\t\tthis.focusTracker.destroy();\n\t}\n\n\t/**\n\t * Shows a given view.\n\t *\n\t * @param view The view to show.\n\t */\n\tpublic showView( view: View ): void {\n\t\tthis.hideView();\n\t\tthis.content.add( view );\n\t}\n\n\t/**\n\t * Hides the currently displayed view.\n\t */\n\tpublic hideView(): void {\n\t\tthis.content.clear();\n\t}\n\n\t/**\n\t * Creates a navigation button view.\n\t *\n\t * @param label The button label.\n\t * @param icon The button icon.\n\t */\n\tprivate _createButtonView( label: string, icon: string ) {\n\t\tconst view = new ButtonView( this.locale );\n\n\t\tview.set( {\n\t\t\tlabel,\n\t\t\ticon,\n\t\t\ttooltip: true\n\t\t} );\n\n\t\treturn view;\n\t}\n}\n\n/**\n * Displays additional layers under the balloon when multiple stacks are added to the balloon.\n */\nclass FakePanelsView extends View {\n\t/**\n\t * Collection of the child views which creates fake panel content.\n\t */\n\tpublic readonly content: ViewCollection;\n\n\t/**\n\t * Fake panels top offset.\n\t *\n\t * @observable\n\t */\n\tdeclare public top: number;\n\n\t/**\n\t * Fake panels left offset.\n\t *\n\t * @observable\n\t */\n\tdeclare public left: number;\n\n\t/**\n\t * Fake panels height.\n\t *\n\t * @observable\n\t */\n\tdeclare public height: number;\n\n\t/**\n\t * Fake panels width.\n\t *\n\t * @observable\n\t */\n\tdeclare public width: number;\n\n\t/**\n\t * Number of rendered fake panels.\n\t *\n\t * @observable\n\t */\n\tdeclare public numberOfPanels: number;\n\n\t/**\n\t * Context.\n\t */\n\tprivate readonly _balloonPanelView: BalloonPanelView;\n\n\t/**\n\t * @inheritDoc\n\t */\n\tconstructor( locale: Locale, balloonPanelView: BalloonPanelView ) {\n\t\tsuper( locale );\n\n\t\tconst bind = this.bindTemplate;\n\n\t\tthis.set( 'top', 0 );\n\t\tthis.set( 'left', 0 );\n\t\tthis.set( 'height', 0 );\n\t\tthis.set( 'width', 0 );\n\t\tthis.set( 'numberOfPanels', 0 );\n\n\t\tthis.content = this.createCollection();\n\t\tthis._balloonPanelView = balloonPanelView;\n\n\t\tthis.setTemplate( {\n\t\t\ttag: 'div',\n\t\t\tattributes: {\n\t\t\t\tclass: [\n\t\t\t\t\t'ck-fake-panel',\n\t\t\t\t\tbind.to( 'numberOfPanels', number => number ? '' : 'ck-hidden' )\n\t\t\t\t],\n\t\t\t\tstyle: {\n\t\t\t\t\ttop: bind.to( 'top', toPx ),\n\t\t\t\t\tleft: bind.to( 'left', toPx ),\n\t\t\t\t\twidth: bind.to( 'width', toPx ),\n\t\t\t\t\theight: bind.to( 'height', toPx )\n\t\t\t\t}\n\t\t\t},\n\t\t\tchildren: this.content\n\t\t} );\n\n\t\tthis.on>( 'change:numberOfPanels', ( evt, name, next, prev ) => {\n\t\t\tif ( next > prev ) {\n\t\t\t\tthis._addPanels( next - prev );\n\t\t\t} else {\n\t\t\t\tthis._removePanels( prev - next );\n\t\t\t}\n\n\t\t\tthis.updatePosition();\n\t\t} );\n\t}\n\n\tprivate _addPanels( number: number ) {\n\t\twhile ( number-- ) {\n\t\t\tconst view = new View();\n\n\t\t\tview.setTemplate( { tag: 'div' } );\n\n\t\t\tthis.content.add( view );\n\t\t\tthis.registerChild( view );\n\t\t}\n\t}\n\n\tprivate _removePanels( number: number ) {\n\t\twhile ( number-- ) {\n\t\t\tconst view = this.content.last!;\n\n\t\t\tthis.content.remove( view );\n\t\t\tthis.deregisterChild( view );\n\t\t\tview.destroy();\n\t\t}\n\t}\n\n\t/**\n\t * Updates coordinates of fake panels.\n\t */\n\tpublic updatePosition() {\n\t\tif ( this.numberOfPanels ) {\n\t\t\tconst { top, left } = this._balloonPanelView;\n\t\t\tconst { width, height } = new Rect( this._balloonPanelView.element! );\n\n\t\t\tObject.assign( this, { top, left, width, height } );\n\t\t}\n\t}\n}\n","import api from \"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../node_modules/css-loader/dist/cjs.js!../../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./stickypanel.css\";\n\nvar options = {\"injectType\":\"singletonStyleTag\",\"attributes\":{\"data-cke\":true}};\n\noptions.insert = \"head\";\noptions.singleton = true;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","/**\n * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module ui/panel/sticky/stickypanelview\n */\n\nimport View from '../../view.js';\nimport Template from '../../template.js';\n\nimport type ViewCollection from '../../viewcollection.js';\n\nimport {\n\ttype Locale,\n\ttype ObservableChangeEvent,\n\tglobal,\n\ttoUnit,\n\tRect\n} from '@ckeditor/ckeditor5-utils';\n\n// @if CK_DEBUG_STICKYPANEL // const {\n// @if CK_DEBUG_STICKYPANEL // \tdefault: RectDrawer,\n// @if CK_DEBUG_STICKYPANEL // \tdiagonalStylesBlack\n// @if CK_DEBUG_STICKYPANEL // } = require( '@ckeditor/ckeditor5-utils/tests/_utils/rectdrawer' );\n\nimport '../../../theme/components/panel/stickypanel.css';\n\nconst toPx = toUnit( 'px' );\n\n/**\n * The sticky panel view class.\n */\nexport default class StickyPanelView extends View {\n\t/**\n\t * Collection of the child views which creates balloon panel contents.\n\t */\n\tpublic readonly content: ViewCollection;\n\n\t/**\n\t * Controls whether the sticky panel should be active.\n\t *\n\t * @readonly\n\t * @observable\n\t */\n\tdeclare public isActive: boolean;\n\n\t/**\n\t * Controls whether the sticky panel is in the \"sticky\" state.\n\t *\n\t * @readonly\n\t * @observable\n\t */\n\tdeclare public isSticky: boolean;\n\n\t/**\n\t * The limiter element for the sticky panel instance. Its bounding rect limits\n\t * the \"stickyness\" of the panel, i.e. when the panel reaches the bottom\n\t * edge of the limiter, it becomes sticky to that edge and does not float\n\t * off the limiter. It is mandatory for the panel to work properly and once\n\t * set, it cannot be changed.\n\t *\n\t * @readonly\n\t * @observable\n\t */\n\tdeclare public limiterElement: HTMLElement | null;\n\n\t/**\n\t * The offset from the bottom edge of {@link #limiterElement}\n\t * which stops the panel from stickying any further to prevent limiter's content\n\t * from being completely covered.\n\t *\n\t * @readonly\n\t * @observable\n\t * @default 50\n\t */\n\tdeclare public limiterBottomOffset: number;\n\n\t/**\n\t * The offset from the top edge of the web browser's viewport which makes the\n\t * panel become sticky. The default value is `0`, which means the panel becomes\n\t * sticky when it's upper edge touches the top of the page viewport.\n\t *\n\t * This attribute is useful when the web page has UI elements positioned to the top\n\t * either using `position: fixed` or `position: sticky`, which would cover the\n\t * sticky panel or vice–versa (depending on the `z-index` hierarchy).\n\t *\n\t * Bound to {@link module:ui/editorui/editorui~EditorUI#viewportOffset `EditorUI#viewportOffset`}.\n\t *\n\t * If {@link module:core/editor/editorconfig~EditorConfig#ui `EditorConfig#ui.viewportOffset.top`} is defined, then\n\t * it will override the default value.\n\t *\n\t * @observable\n\t * @default 0\n\t */\n\tdeclare public viewportTopOffset: number;\n\n\t/**\n\t * The panel which accepts children into {@link #content} collection.\n\t * Also an element which is positioned when {@link #isSticky}.\n\t */\n\tpublic contentPanelElement: HTMLElement;\n\n\t/**\n\t * Controls the `margin-left` CSS style of the panel.\n\t *\n\t * @private\n\t * @readonly\n\t * @observable\n\t */\n\tdeclare public _marginLeft: string | null;\n\n\t/**\n\t * Set `true` if the sticky panel reached the bottom edge of the\n\t * {@link #limiterElement}.\n\t *\n\t * @private\n\t * @readonly\n\t * @observable\n\t */\n\tdeclare public _isStickyToTheBottomOfLimiter: boolean;\n\n\t/**\n\t * The `top` CSS position of the panel when it is sticky to the top of the viewport or scrollable\n\t * ancestors of the {@link #limiterElement}.\n\t *\n\t * @private\n\t * @readonly\n\t * @observable\n\t */\n\tdeclare public _stickyTopOffset: number | null;\n\n\t/**\n\t * The `bottom` CSS position of the panel when it is sticky to the bottom of the {@link #limiterElement}.\n\t *\n\t * @private\n\t * @readonly\n\t * @observable\n\t */\n\tdeclare public _stickyBottomOffset: number | null;\n\n\t/**\n\t * A dummy element which visually fills the space as long as the\n\t * actual panel is sticky. It prevents flickering of the UI.\n\t */\n\tprivate _contentPanelPlaceholder: HTMLElement;\n\n\t/**\n\t * @inheritDoc\n\t */\n\tconstructor( locale?: Locale ) {\n\t\tsuper( locale );\n\n\t\tconst bind = this.bindTemplate;\n\n\t\tthis.set( 'isActive', false );\n\t\tthis.set( 'isSticky', false );\n\t\tthis.set( 'limiterElement', null );\n\t\tthis.set( 'limiterBottomOffset', 50 );\n\t\tthis.set( 'viewportTopOffset', 0 );\n\n\t\tthis.set( '_marginLeft', null );\n\t\tthis.set( '_isStickyToTheBottomOfLimiter', false );\n\n\t\tthis.set( '_stickyTopOffset', null );\n\t\tthis.set( '_stickyBottomOffset', null );\n\n\t\tthis.content = this.createCollection();\n\n\t\tthis._contentPanelPlaceholder = new Template( {\n\t\t\ttag: 'div',\n\t\t\tattributes: {\n\t\t\t\tclass: [\n\t\t\t\t\t'ck',\n\t\t\t\t\t'ck-sticky-panel__placeholder'\n\t\t\t\t],\n\t\t\t\tstyle: {\n\t\t\t\t\tdisplay: bind.to( 'isSticky', isSticky => isSticky ? 'block' : 'none' ),\n\t\t\t\t\theight: bind.to( 'isSticky', isSticky => {\n\t\t\t\t\t\treturn isSticky ? toPx( this._contentPanelRect.height ) : null;\n\t\t\t\t\t} )\n\t\t\t\t}\n\t\t\t}\n\t\t} ).render() as HTMLElement;\n\n\t\tthis.contentPanelElement = new Template( {\n\t\t\ttag: 'div',\n\n\t\t\tattributes: {\n\t\t\t\tclass: [\n\t\t\t\t\t'ck',\n\t\t\t\t\t'ck-sticky-panel__content',\n\t\t\t\t\t// Toggle class of the panel when \"sticky\" state changes in the view.\n\t\t\t\t\tbind.if( 'isSticky', 'ck-sticky-panel__content_sticky' ),\n\t\t\t\t\tbind.if( '_isStickyToTheBottomOfLimiter', 'ck-sticky-panel__content_sticky_bottom-limit' )\n\t\t\t\t],\n\t\t\t\tstyle: {\n\t\t\t\t\twidth: bind.to( 'isSticky', isSticky => {\n\t\t\t\t\t\treturn isSticky ? toPx( this._contentPanelPlaceholder.getBoundingClientRect().width ) : null;\n\t\t\t\t\t} ),\n\n\t\t\t\t\ttop: bind.to( '_stickyTopOffset', value => value ? toPx( value ) : value ),\n\t\t\t\t\tbottom: bind.to( '_stickyBottomOffset', value => value ? toPx( value ) : value ),\n\n\t\t\t\t\tmarginLeft: bind.to( '_marginLeft' )\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tchildren: this.content\n\t\t} ).render() as HTMLElement;\n\n\t\tthis.setTemplate( {\n\t\t\ttag: 'div',\n\t\t\tattributes: {\n\t\t\t\tclass: [\n\t\t\t\t\t'ck',\n\t\t\t\t\t'ck-sticky-panel'\n\t\t\t\t]\n\t\t\t},\n\t\t\tchildren: [\n\t\t\t\tthis._contentPanelPlaceholder,\n\t\t\t\tthis.contentPanelElement\n\t\t\t]\n\t\t} );\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic override render(): void {\n\t\tsuper.render();\n\n\t\t// Check if the panel should go into the sticky state immediately.\n\t\tthis.checkIfShouldBeSticky();\n\n\t\t// Update sticky state of the panel as the window and ancestors are being scrolled.\n\t\tthis.listenTo( global.document, 'scroll', () => {\n\t\t\tthis.checkIfShouldBeSticky();\n\t\t}, { useCapture: true } );\n\n\t\t// Synchronize with `model.isActive` because sticking an inactive panel is pointless.\n\t\tthis.listenTo( this, 'change:isActive', () => {\n\t\t\tthis.checkIfShouldBeSticky();\n\t\t} );\n\t}\n\n\t/**\n\t * Analyzes the environment to decide whether the panel should be sticky or not.\n\t * Then handles the positioning of the panel.\n\t */\n\tpublic checkIfShouldBeSticky(): void {\n\t\t// @if CK_DEBUG_STICKYPANEL // RectDrawer.clear();\n\n\t\tif ( !this.limiterElement || !this.isActive ) {\n\t\t\tthis._unstick();\n\n\t\t\treturn;\n\t\t}\n\n\t\tconst limiterRect = new Rect( this.limiterElement );\n\n\t\tlet visibleLimiterRect = limiterRect.getVisible();\n\n\t\tif ( visibleLimiterRect ) {\n\t\t\tconst windowRect = new Rect( global.window );\n\n\t\t\twindowRect.top += this.viewportTopOffset;\n\t\t\twindowRect.height -= this.viewportTopOffset;\n\n\t\t\tvisibleLimiterRect = visibleLimiterRect.getIntersection( windowRect );\n\t\t}\n\n\t\t// @if CK_DEBUG_STICKYPANEL // if ( visibleLimiterRect ) {\n\t\t// @if CK_DEBUG_STICKYPANEL // \tRectDrawer.draw( visibleLimiterRect,\n\t\t// @if CK_DEBUG_STICKYPANEL // \t\t{ outlineWidth: '3px', opacity: '.8', outlineColor: 'red', outlineOffset: '-3px' },\n\t\t// @if CK_DEBUG_STICKYPANEL // \t\t'Visible anc'\n\t\t// @if CK_DEBUG_STICKYPANEL // \t);\n\t\t// @if CK_DEBUG_STICKYPANEL // }\n\t\t// @if CK_DEBUG_STICKYPANEL //\n\t\t// @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( limiterRect,\n\t\t// @if CK_DEBUG_STICKYPANEL // \t{ outlineWidth: '3px', opacity: '.8', outlineColor: 'green', outlineOffset: '-3px' },\n\t\t// @if CK_DEBUG_STICKYPANEL // \t'Limiter'\n\t\t// @if CK_DEBUG_STICKYPANEL // );\n\n\t\t// Stick the panel only if\n\t\t// * the limiter's ancestors are intersecting with each other so that some of their rects are visible,\n\t\t// * and the limiter's top edge is above the visible ancestors' top edge.\n\t\tif ( visibleLimiterRect && limiterRect.top < visibleLimiterRect.top ) {\n\t\t\t// @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( visibleLimiterRect,\n\t\t\t// @if CK_DEBUG_STICKYPANEL // \t{ outlineWidth: '3px', opacity: '.8', outlineColor: 'fuchsia', outlineOffset: '-3px',\n\t\t\t// @if CK_DEBUG_STICKYPANEL // \t\tbackgroundColor: 'rgba(255, 0, 255, .3)' },\n\t\t\t// @if CK_DEBUG_STICKYPANEL // \t'Visible limiter'\n\t\t\t// @if CK_DEBUG_STICKYPANEL // );\n\n\t\t\tconst visibleLimiterTop = visibleLimiterRect.top;\n\n\t\t\t// Check if there's a change the panel can be sticky to the bottom of the limiter.\n\t\t\tif ( visibleLimiterTop + this._contentPanelRect.height + this.limiterBottomOffset > visibleLimiterRect.bottom ) {\n\t\t\t\tconst stickyBottomOffset = Math.max( limiterRect.bottom - visibleLimiterRect.bottom, 0 ) + this.limiterBottomOffset;\n\t\t\t\t// @if CK_DEBUG_STICKYPANEL // const stickyBottomOffsetRect = new Rect( {\n\t\t\t\t// @if CK_DEBUG_STICKYPANEL // \ttop: limiterRect.bottom - stickyBottomOffset, left: 0, right: 2000,\n\t\t\t\t// @if CK_DEBUG_STICKYPANEL // \tbottom: limiterRect.bottom - stickyBottomOffset, width: 2000, height: 1\n\t\t\t\t// @if CK_DEBUG_STICKYPANEL // } );\n\t\t\t\t// @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( stickyBottomOffsetRect,\n\t\t\t\t// @if CK_DEBUG_STICKYPANEL // \t{ outlineWidth: '1px', opacity: '.8', outlineColor: 'black' },\n\t\t\t\t// @if CK_DEBUG_STICKYPANEL // \t'Sticky bottom offset'\n\t\t\t\t// @if CK_DEBUG_STICKYPANEL // );\n\n\t\t\t\t// Check if sticking the panel to the bottom of the limiter does not cause it to suddenly\n\t\t\t\t// move upwards if there's not enough space for it.\n\t\t\t\tif ( limiterRect.bottom - stickyBottomOffset > limiterRect.top + this._contentPanelRect.height ) {\n\t\t\t\t\tthis._stickToBottomOfLimiter( stickyBottomOffset );\n\t\t\t\t} else {\n\t\t\t\t\tthis._unstick();\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif ( this._contentPanelRect.height + this.limiterBottomOffset < limiterRect.height ) {\n\t\t\t\t\tthis._stickToTopOfAncestors( visibleLimiterTop );\n\t\t\t\t} else {\n\t\t\t\t\tthis._unstick();\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tthis._unstick();\n\t\t}\n\n\t\t// @if CK_DEBUG_STICKYPANEL // console.clear();\n\t\t// @if CK_DEBUG_STICKYPANEL // console.log( 'isSticky', this.isSticky );\n\t\t// @if CK_DEBUG_STICKYPANEL // console.log( '_isStickyToTheBottomOfLimiter', this._isStickyToTheBottomOfLimiter );\n\t\t// @if CK_DEBUG_STICKYPANEL // console.log( '_stickyTopOffset', this._stickyTopOffset );\n\t\t// @if CK_DEBUG_STICKYPANEL // console.log( '_stickyBottomOffset', this._stickyBottomOffset );\n\t\t// @if CK_DEBUG_STICKYPANEL // if ( visibleLimiterRect ) {\n\t\t// @if CK_DEBUG_STICKYPANEL // \tRectDrawer.draw( visibleLimiterRect,\n\t\t// @if CK_DEBUG_STICKYPANEL // \t\t{ ...diagonalStylesBlack,\n\t\t// @if CK_DEBUG_STICKYPANEL // \t\t\toutlineWidth: '3px', opacity: '.8', outlineColor: 'orange', outlineOffset: '-3px',\n\t\t// @if CK_DEBUG_STICKYPANEL // \t\t\tbackgroundColor: 'rgba(0, 0, 255, .2)' },\n\t\t// @if CK_DEBUG_STICKYPANEL // \t\t'visibleLimiterRect'\n\t\t// @if CK_DEBUG_STICKYPANEL // \t);\n\t\t// @if CK_DEBUG_STICKYPANEL // }\n\t}\n\n\t/**\n\t * Sticks the panel at the given CSS `top` offset.\n\t *\n\t * @private\n\t * @param topOffset\n\t */\n\tprivate _stickToTopOfAncestors( topOffset: number ) {\n\t\tthis.isSticky = true;\n\t\tthis._isStickyToTheBottomOfLimiter = false;\n\t\tthis._stickyTopOffset = topOffset;\n\t\tthis._stickyBottomOffset = null;\n\t\tthis._marginLeft = toPx( -global.window.scrollX );\n\t}\n\n\t/**\n\t * Sticks the panel at the bottom of the limiter with a given CSS `bottom` offset.\n\t *\n\t * @private\n\t * @param stickyBottomOffset\n\t */\n\tprivate _stickToBottomOfLimiter( stickyBottomOffset: number ) {\n\t\tthis.isSticky = true;\n\t\tthis._isStickyToTheBottomOfLimiter = true;\n\t\tthis._stickyTopOffset = null;\n\t\tthis._stickyBottomOffset = stickyBottomOffset;\n\t\tthis._marginLeft = toPx( -global.window.scrollX );\n\t}\n\n\t/**\n\t * Unsticks the panel putting it back to its original position.\n\t *\n\t * @private\n\t */\n\tprivate _unstick() {\n\t\tthis.isSticky = false;\n\t\tthis._isStickyToTheBottomOfLimiter = false;\n\t\tthis._stickyTopOffset = null;\n\t\tthis._stickyBottomOffset = null;\n\t\tthis._marginLeft = null;\n\t}\n\n\t/**\n\t * Returns the bounding rect of the {@link #contentPanelElement}.\n\t *\n\t * @private\n\t */\n\tprivate get _contentPanelRect(): Rect {\n\t\treturn new Rect( this.contentPanelElement );\n\t}\n}\n","/**\n * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module ui/search/text/searchtextqueryview\n */\n\nimport ButtonView from '../../button/buttonview.js';\nimport IconView from '../../icon/iconview.js';\nimport LabeledFieldView, { type LabeledFieldViewCreator } from '../../labeledfield/labeledfieldview.js';\nimport { createLabeledInputText } from '../../labeledfield/utils.js';\nimport type InputBase from '../../input/inputbase.js';\nimport type { Locale } from '@ckeditor/ckeditor5-utils';\n\nimport { icons } from '@ckeditor/ckeditor5-core';\n\n/**\n * A search input field for the {@link module:ui/search/text/searchtextview~SearchTextView} component.\n *\n * @internal\n * @extends module:ui/labeledfield/labeledfieldview~LabeledFieldView\n */\nexport default class SearchTextQueryView<\n\tTQueryFieldView extends InputBase\n> extends LabeledFieldView {\n\t/**\n\t * The loupe icon displayed next to the {@link #fieldView}.\n\t */\n\tpublic iconView?: IconView;\n\n\t/**\n\t * The button that clears and focuses the {@link #fieldView}.\n\t */\n\tpublic resetButtonView?: ButtonView;\n\n\t/**\n\t * A reference to the view configuration.\n\t */\n\tprivate readonly _viewConfig: SearchTextQueryViewConfig;\n\n\t/**\n\t * @inheritDoc\n\t */\n\tconstructor( locale: Locale, config: SearchTextQueryViewConfig ) {\n\t\tconst t = locale.t;\n\t\tconst viewConfig = Object.assign( {}, {\n\t\t\tshowResetButton: true,\n\t\t\tshowIcon: true,\n\t\t\tcreator: createLabeledInputText\n\t\t}, config );\n\n\t\tsuper( locale, viewConfig.creator as any );\n\n\t\tthis.label = config.label;\n\t\tthis._viewConfig = viewConfig;\n\n\t\tif ( this._viewConfig.showIcon ) {\n\t\t\tthis.iconView = new IconView();\n\t\t\tthis.iconView.content = icons.loupe;\n\t\t\tthis.fieldWrapperChildren.add( this.iconView, 0 );\n\n\t\t\tthis.extendTemplate( {\n\t\t\t\tattributes: {\n\t\t\t\t\tclass: 'ck-search__query_with-icon'\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\tif ( this._viewConfig.showResetButton ) {\n\t\t\tthis.resetButtonView = new ButtonView( locale );\n\t\t\tthis.resetButtonView.set( {\n\t\t\t\tlabel: t( 'Clear' ),\n\t\t\t\ticon: icons.cancel,\n\t\t\t\tclass: 'ck-search__reset',\n\t\t\t\tisVisible: false,\n\t\t\t\ttooltip: true\n\t\t\t} );\n\n\t\t\tthis.resetButtonView.on( 'execute', () => {\n\t\t\t\tthis.reset();\n\t\t\t\tthis.focus();\n\t\t\t\tthis.fire( 'reset' );\n\t\t\t} );\n\n\t\t\tthis.resetButtonView.bind( 'isVisible' ).to( this.fieldView, 'isEmpty', isEmpty => !isEmpty );\n\n\t\t\tthis.fieldWrapperChildren.add( this.resetButtonView );\n\n\t\t\tthis.extendTemplate( {\n\t\t\t\tattributes: {\n\t\t\t\t\tclass: 'ck-search__query_with-reset'\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t}\n\n\t/**\n\t * Resets the search field to its default state.\n\t */\n\tpublic reset(): void {\n\t\tthis.fieldView.reset();\n\n\t\tif ( this._viewConfig.showResetButton ) {\n\t\t\tthis.resetButtonView!.isVisible = false;\n\t\t}\n\t}\n}\n\n/**\n * An event fired when the field is reset using the\n * {@link module:ui/search/text/searchtextqueryview~SearchTextQueryView#resetButtonView}.\n *\n * @eventName ~SearchTextQueryView#reset\n */\nexport type SearchTextQueryViewResetEvent = {\n\tname: 'reset';\n\targs: [];\n};\n\n/**\n * The configuration of the {@link module:ui/search/text/searchtextqueryview~SearchTextQueryView} view.\n */\nexport interface SearchTextQueryViewConfig> {\n\n\t/**\n\t * The human-readable label of the search field.\n\t */\n\tlabel: string;\n\n\t/**\n\t * Determines whether the button that resets the search should be visible.\n\t *\n\t * @default true\n\t */\n\tshowResetButton?: boolean;\n\n\t/**\n\t * Determines whether the loupe icon should be visible.\n\t *\n\t * @default true\n\t */\n\tshowIcon?: boolean;\n\n\t/**\n\t * The function that creates the search field input view. By default, a plain\n\t * {@link module:ui/inputtext/inputtextview~InputTextView} is used for this purpose.\n\t */\n\tcreator?: LabeledFieldViewCreator;\n}\n","/**\n * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module ui/search/searchinfoview\n*/\n\nimport type { FocusableView } from '../focuscycler.js';\nimport View from '../view.js';\n\n/**\n * A view displaying an information text related to different states of {@link module:ui/search/text/searchtextview~SearchTextView}.\n *\n * @internal\n */\nexport default class SearchInfoView extends View implements FocusableView {\n\t/**\n\t * Controls whether the view is visible.\n\t *\n\t * @observable\n\t * @default false\n\t */\n\tdeclare public isVisible: boolean;\n\n\t/**\n\t * Controls the primary line of text in the info.\n\t *\n\t * @observable\n\t * @default ''\n\t */\n\tdeclare public primaryText: string;\n\n\t/**\n\t * Controls the secondary line of text in the info.\n\t *\n\t * @observable\n\t * @default ''\n\t */\n\tdeclare public secondaryText: string;\n\n\t/**\n\t * @inheritDoc\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\tconst bind = this.bindTemplate;\n\n\t\tthis.set( {\n\t\t\tisVisible: false,\n\t\t\tprimaryText: '',\n\t\t\tsecondaryText: ''\n\t\t} );\n\n\t\tthis.setTemplate( {\n\t\t\ttag: 'div',\n\t\t\tattributes: {\n\t\t\t\tclass: [\n\t\t\t\t\t'ck',\n\t\t\t\t\t'ck-search__info',\n\t\t\t\t\tbind.if( 'isVisible', 'ck-hidden', value => !value )\n\t\t\t\t],\n\t\t\t\ttabindex: -1\n\t\t\t},\n\t\t\tchildren: [\n\t\t\t\t{\n\t\t\t\t\ttag: 'span',\n\t\t\t\t\tchildren: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttext: [ bind.to( 'primaryText' ) ]\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttag: 'span',\n\t\t\t\t\tchildren: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttext: [ bind.to( 'secondaryText' ) ]\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t]\n\t\t} );\n\t}\n\n\t/**\n\t * Focuses the view\n\t */\n\tpublic focus(): void {\n\t\tthis.element!.focus();\n\t}\n}\n","/**\n * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module ui/search/searchresultsview\n */\n\nimport View from '../view.js';\nimport type ViewCollection from '../viewcollection.js';\nimport { FocusTracker, type Locale } from '@ckeditor/ckeditor5-utils';\nimport { default as FocusCycler, type FocusableView } from '../focuscycler.js';\n\n/**\n * A sub-component of {@link module:ui/search/text/searchtextview~SearchTextView}. It hosts the filtered and the information views.\n */\nexport default class SearchResultsView extends View implements FocusableView {\n\t/**\n\t * Tracks information about the DOM focus in the view.\n\t *\n\t * @readonly\n\t */\n\tpublic focusTracker: FocusTracker;\n\n\t/**\n\t * The collection of the child views inside of the list item {@link #element}.\n\t *\n\t * @readonly\n\t */\n\tpublic children: ViewCollection;\n\n\t/**\n\t * Provides the focus management (keyboard navigation) in the view.\n\t *\n\t * @readonly\n\t */\n\tprotected _focusCycler: FocusCycler;\n\n\t/**\n\t * @inheritDoc\n\t */\n\tconstructor( locale: Locale ) {\n\t\tsuper( locale );\n\n\t\tthis.children = this.createCollection();\n\t\tthis.focusTracker = new FocusTracker();\n\n\t\tthis.setTemplate( {\n\t\t\ttag: 'div',\n\t\t\tattributes: {\n\t\t\t\tclass: [\n\t\t\t\t\t'ck',\n\t\t\t\t\t'ck-search__results'\n\t\t\t\t],\n\t\t\t\ttabindex: -1\n\t\t\t},\n\t\t\tchildren: this.children\n\t\t} );\n\n\t\tthis._focusCycler = new FocusCycler( {\n\t\t\tfocusables: this.children,\n\t\t\tfocusTracker: this.focusTracker\n\t\t} );\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic override render(): void {\n\t\tsuper.render();\n\n\t\tfor ( const child of this.children ) {\n\t\t\tthis.focusTracker.add( child.element! );\n\t\t}\n\t}\n\n\t/**\n\t * Focuses the view.\n\t */\n\tpublic focus(): void {\n\t\tthis._focusCycler.focusFirst();\n\t}\n\n\t/**\n\t * Focuses the first child view.\n\t */\n\tpublic focusFirst(): void {\n\t\tthis._focusCycler.focusFirst();\n\t}\n\n\t/**\n\t * Focuses the last child view.\n\t */\n\tpublic focusLast(): void {\n\t\tthis._focusCycler.focusLast();\n\t}\n}\n","import toString from './toString.js';\n\n/**\n * Used to match `RegExp`\n * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).\n */\nvar reRegExpChar = /[\\\\^$.*+?()[\\]{}|]/g,\n reHasRegExpChar = RegExp(reRegExpChar.source);\n\n/**\n * Escapes the `RegExp` special characters \"^\", \"$\", \"\\\", \".\", \"*\", \"+\",\n * \"?\", \"(\", \")\", \"[\", \"]\", \"{\", \"}\", and \"|\" in `string`.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category String\n * @param {string} [string=''] The string to escape.\n * @returns {string} Returns the escaped string.\n * @example\n *\n * _.escapeRegExp('[lodash](https://lodash.com/)');\n * // => '\\[lodash\\]\\(https://lodash\\.com/\\)'\n */\nfunction escapeRegExp(string) {\n string = toString(string);\n return (string && reHasRegExpChar.test(string))\n ? string.replace(reRegExpChar, '\\\\$&')\n : string;\n}\n\nexport default escapeRegExp;\n","import api from \"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../node_modules/css-loader/dist/cjs.js!../../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./search.css\";\n\nvar options = {\"injectType\":\"singletonStyleTag\",\"attributes\":{\"data-cke\":true}};\n\noptions.insert = \"head\";\noptions.singleton = true;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","/**\n * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module ui/search/text/searchtextview\n*/\n\nimport { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';\nimport View from '../../view.js';\nimport { default as SearchTextQueryView, type SearchTextQueryViewConfig } from './searchtextqueryview.js';\nimport SearchInfoView from '../searchinfoview.js';\nimport SearchResultsView from '../searchresultsview.js';\nimport FocusCycler, { type FocusableView } from '../../focuscycler.js';\nimport { escapeRegExp } from 'lodash-es';\n\nimport type FilteredView from '../filteredview.js';\nimport type ViewCollection from '../../viewcollection.js';\nimport type InputBase from '../../input/inputbase.js';\nimport type InputTextView from '../../inputtext/inputtextview.js';\n\nimport '../../../theme/components/search/search.css';\n\n/**\n * A search component that allows filtering of an arbitrary view based on a search query\n * specified by the user in a text field.\n *\n *```ts\n * // This view must specify the `filter()` and `focus()` methods.\n * const filteredView = ...;\n *\n * const searchView = new SearchTextView( locale, {\n * \tsearchFieldLabel: 'Search list items',\n * \tfilteredView\n * } );\n *\n * view.render();\n *\n * document.body.append( view.element );\n * ```\n */\nexport default class SearchTextView<\n\tTQueryFieldView extends InputBase = InputTextView\n> extends View {\n\t/**\n\t * Tracks information about the DOM focus in the view.\n\t *\n\t * @readonly\n\t */\n\tpublic focusTracker: FocusTracker;\n\n\t/**\n\t * An instance of the keystroke handler managing user interaction and accessibility.\n\t *\n\t * @readonly\n\t */\n\tpublic keystrokes: KeystrokeHandler;\n\n\t/**\n\t * A view hosting the {@link #filteredView} passed in the configuration and the {@link #infoView}.\n\t */\n\tpublic resultsView: SearchResultsView;\n\n\t/**\n\t * The view that is filtered by the search query.\n\t */\n\tpublic filteredView: FilteredView;\n\n\t/**\n\t * The view that displays the information about the search results.\n\t */\n\tpublic infoView: FocusableView | undefined;\n\n\t/**\n\t * The view that allows the user to enter the search query.\n\t */\n\tpublic queryView: SearchTextQueryView;\n\n\t/**\n\t * Controls whether the component is in read-only mode.\n\t *\n\t * @default true\n\t * @observable\n\t */\n\tdeclare public isEnabled: boolean;\n\n\t/**\n\t * The number of results found for the current search query. Updated upon the {@link #search} event.\n\t *\n\t * @default 0\n\t * @observable\n\t */\n\tdeclare public resultsCount: number;\n\n\t/**\n\t * The number of the items that can be searched in the {@link #filteredView}. Updated upon the {@link #search} event.\n\t *\n\t * @default 0\n\t * @observable\n\t */\n\tdeclare public totalItemsCount: number;\n\n\t/**\n\t * The collection of children of the view.\n\t *\n\t * @readonly\n\t */\n\tdeclare public readonly children: ViewCollection;\n\n\t/**\n\t * The collection of focusable children of the view. Used by the focus management logic.\n\t *\n\t * @readonly\n\t */\n\tdeclare public readonly focusableChildren: ViewCollection;\n\n\tpublic declare locale: Locale;\n\n\t/**\n\t * Provides the focus management (keyboard navigation) between {@link #queryView} and {@link #filteredView}.\n\t *\n\t * @readonly\n\t */\n\tpublic focusCycler: FocusCycler;\n\n\t/**\n\t * The cached configuration object.\n\t *\n\t * @internal\n\t */\n\tprotected _config: SearchTextViewConfig;\n\n\t/**\n\t * Creates an instance of the {@link module:ui/search/text/searchtextview~SearchTextView} class.\n\t *\n\t * @param locale The localization services instance.\n\t * @param config Configuration of the view.\n\t */\n\tconstructor( locale: Locale, config: SearchTextViewConfig ) {\n\t\tsuper( locale );\n\n\t\tthis._config = config;\n\n\t\tthis.filteredView = config.filteredView;\n\t\tthis.queryView = this._createSearchTextQueryView();\n\t\tthis.focusTracker = new FocusTracker();\n\t\tthis.keystrokes = new KeystrokeHandler();\n\t\tthis.resultsView = new SearchResultsView( locale );\n\t\tthis.children = this.createCollection();\n\t\tthis.focusableChildren = this.createCollection( [ this.queryView, this.resultsView ] );\n\n\t\tthis.set( 'isEnabled', true );\n\t\tthis.set( 'resultsCount', 0 );\n\t\tthis.set( 'totalItemsCount', 0 );\n\n\t\tif ( config.infoView && config.infoView.instance ) {\n\t\t\tthis.infoView = config.infoView.instance;\n\t\t} else {\n\t\t\tthis.infoView = new SearchInfoView();\n\t\t\tthis._enableDefaultInfoViewBehavior();\n\n\t\t\tthis.on( 'render', () => {\n\t\t\t\t// Initial search that determines if there are any searchable items\n\t\t\t\t// and displays the corresponding info text.\n\t\t\t\tthis.search( '' );\n\t\t\t} );\n\t\t}\n\n\t\tthis.resultsView.children.addMany( [ this.infoView, this.filteredView ] );\n\n\t\tthis.focusCycler = new FocusCycler( {\n\t\t\tfocusables: this.focusableChildren,\n\t\t\tfocusTracker: this.focusTracker,\n\t\t\tkeystrokeHandler: this.keystrokes,\n\t\t\tactions: {\n\t\t\t\t// Navigate form fields backwards using the Shift + Tab keystroke.\n\t\t\t\tfocusPrevious: 'shift + tab',\n\n\t\t\t\t// Navigate form fields forwards using the Tab key.\n\t\t\t\tfocusNext: 'tab'\n\t\t\t}\n\t\t} );\n\n\t\tthis.on( 'search', ( evt, { resultsCount, totalItemsCount } ) => {\n\t\t\tthis.resultsCount = resultsCount;\n\t\t\tthis.totalItemsCount = totalItemsCount;\n\t\t} );\n\n\t\tthis.setTemplate( {\n\t\t\ttag: 'div',\n\t\t\tattributes: {\n\t\t\t\tclass: [\n\t\t\t\t\t'ck',\n\t\t\t\t\t'ck-search',\n\t\t\t\t\tconfig.class || null\n\t\t\t\t],\n\n\t\t\t\ttabindex: '-1'\n\t\t\t},\n\t\t\tchildren: this.children\n\t\t} );\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic override render(): void {\n\t\tsuper.render();\n\n\t\tthis.children.addMany( [\n\t\t\tthis.queryView,\n\t\t\tthis.resultsView\n\t\t] );\n\n\t\tconst stopPropagation = ( data: Event ) => data.stopPropagation();\n\n\t\tfor ( const focusableChild of this.focusableChildren ) {\n\t\t\tthis.focusTracker.add( focusableChild.element as Element );\n\t\t}\n\n\t\t// Start listening for the keystrokes coming from #element.\n\t\tthis.keystrokes.listenTo( this.element as HTMLElement );\n\n\t\t// Since the form is in the dropdown panel which is a child of the toolbar, the toolbar's\n\t\t// keystroke handler would take over the key management in the URL input. We need to prevent\n\t\t// this ASAP. Otherwise, the basic caret movement using the arrow keys will be impossible.\n\t\tthis.keystrokes.set( 'arrowright', stopPropagation );\n\t\tthis.keystrokes.set( 'arrowleft', stopPropagation );\n\t\tthis.keystrokes.set( 'arrowup', stopPropagation );\n\t\tthis.keystrokes.set( 'arrowdown', stopPropagation );\n\t}\n\n\t/**\n\t * Focuses the {@link #queryView}.\n\t */\n\tpublic focus(): void {\n\t\tthis.queryView.focus();\n\t}\n\n\t/**\n\t * Resets the component to its initial state.\n\t */\n\tpublic reset(): void {\n\t\tthis.queryView.reset();\n\t\tthis.search( '' );\n\t}\n\n\t/**\n\t * Searches the {@link #filteredView} for the given query.\n\t *\n\t * @internal\n\t * @param query The search query string.\n\t */\n\tpublic search( query: string ): void {\n\t\tconst regExp = query ? new RegExp( escapeRegExp( query ), 'ig' ) : null;\n\t\tconst filteringResults = this.filteredView.filter( regExp );\n\n\t\tthis.fire( 'search', { query, ...filteringResults } );\n\t}\n\n\t/**\n\t * Creates a search field view based on configured creator..\n\t */\n\tprivate _createSearchTextQueryView(): SearchTextQueryView {\n\t\tconst queryView = new SearchTextQueryView( this.locale, this._config.queryView );\n\n\t\tthis.listenTo( queryView.fieldView, 'input', () => {\n\t\t\tthis.search( queryView.fieldView.element!.value );\n\t\t} );\n\n\t\tqueryView.on( 'reset', () => this.reset() );\n\t\tqueryView.bind( 'isEnabled' ).to( this );\n\n\t\treturn queryView;\n\t}\n\n\t/**\n\t * Initializes the default {@link #infoView} behavior with default text labels when no custom info view\n\t * was specified in the view config.\n\t */\n\tprivate _enableDefaultInfoViewBehavior(): void {\n\t\tconst t = this.locale.t;\n\t\tconst infoView = this.infoView as SearchInfoView;\n\n\t\tthis.on( 'search', ( evt, data ) => {\n\t\t\tif ( !data.resultsCount ) {\n\t\t\t\tconst defaultTextConfig = this._config.infoView && this._config.infoView.text;\n\t\t\t\tlet primaryText, secondaryText;\n\n\t\t\t\tif ( data.totalItemsCount ) {\n\t\t\t\t\tif ( defaultTextConfig && defaultTextConfig.notFound ) {\n\t\t\t\t\t\tprimaryText = defaultTextConfig.notFound.primary;\n\t\t\t\t\t\tsecondaryText = defaultTextConfig.notFound.secondary;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tprimaryText = t( 'No results found' );\n\t\t\t\t\t\tsecondaryText = '';\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif ( defaultTextConfig && defaultTextConfig.noSearchableItems ) {\n\t\t\t\t\t\tprimaryText = defaultTextConfig.noSearchableItems.primary;\n\t\t\t\t\t\tsecondaryText = defaultTextConfig.noSearchableItems.secondary;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tprimaryText = t( 'No searchable items' );\n\t\t\t\t\t\tsecondaryText = '';\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tinfoView.set( {\n\t\t\t\t\tprimaryText: normalizeInfoText( primaryText, data ),\n\t\t\t\t\tsecondaryText: normalizeInfoText( secondaryText!, data ),\n\t\t\t\t\tisVisible: true\n\t\t\t\t} );\n\t\t\t} else {\n\t\t\t\tinfoView.set( {\n\t\t\t\t\tisVisible: false\n\t\t\t\t} );\n\t\t\t}\n\t\t} );\n\n\t\tfunction normalizeInfoText(\n\t\t\ttext: SearchTextViewDefaultInfoText,\n\t\t\t{ query, resultsCount, totalItemsCount }: SearchTextViewSearchEvent[ 'args' ][ 0 ]\n\t\t) {\n\t\t\treturn typeof text === 'function' ? text( query, resultsCount, totalItemsCount ) : text;\n\t\t}\n\t}\n}\n\n/**\n * The configuration of the {@link module:ui/search/text/searchtextview~SearchTextView} class.\n */\nexport interface SearchTextViewConfig> {\n\n\t/**\n\t * The configuration of the view's query field.\n\t */\n\tqueryView: SearchTextQueryViewConfig;\n\n\t/**\n\t * The view that is filtered by the search query.\n\t */\n\tfilteredView: FilteredView;\n\n\t/**\n\t * The view that displays the information about the search results.\n\t */\n\tinfoView?: {\n\n\t\t/**\n\t\t * The view that displays the information about the search results. If not specified,\n\t\t * {@link module:ui/search/searchinfoview~SearchInfoView} is used.\n\t\t */\n\t\tinstance?: FocusableView;\n\n\t\t/**\n\t\t * The configuration of text labels displayed in the {@link #infoView} in different states\n\t\t * of the search component.\n\t\t *\n\t\t * **Note**: This configuration is only used when the {@link #infoView} is **not** specified.\n\t\t * In other cases, please use the {@link module:ui/search/searchview~SearchTextViewSearchEvent} to bring about\n\t\t * your own info text logic.\n\t\t */\n\t\ttext?: {\n\t\t\tnotFound?: {\n\t\t\t\tprimary: SearchTextViewDefaultInfoText;\n\t\t\t\tsecondary?: SearchTextViewDefaultInfoText;\n\t\t\t};\n\t\t\tnoSearchableItems?: {\n\t\t\t\tprimary: SearchTextViewDefaultInfoText;\n\t\t\t\tsecondary?: SearchTextViewDefaultInfoText;\n\t\t\t};\n\t\t};\n\t};\n\n\t/**\n\t * The custom CSS class name to be added to the search view element.\n\t */\n\tclass?: string;\n}\n\n/**\n * Describes value of a info text configuration in {@link module:ui/search/text/searchtextview~SearchTextViewConfig}.\n * A string or a function that returns a string with the information about the search results.\n */\nexport type SearchTextViewDefaultInfoText = string | ( ( query: string, resultsCount: number, totalItemsCount: number ) => string );\n\n/**\n * An event fired when the search query changes fired by {@link module:ui/search/text/searchtextview~SearchTextView#search}.\n *\n * @eventName ~SearchTextView#search\n */\nexport type SearchTextViewSearchEvent = {\n\tname: 'search';\n\targs: [ SearchTextViewSearchEventData ];\n};\n\nexport type SearchTextViewSearchEventData = {\n\n\t/**\n\t * The search query string.\n\t */\n\tquery: string;\n\n\t/**\n\t * The number of results found for the current search query.\n\t */\n\tresultsCount: number;\n\n\t/**\n\t * The number of the items that can be searched.\n\t */\n\ttotalItemsCount: number;\n};\n","import api from \"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../node_modules/css-loader/dist/cjs.js!../../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./autocomplete.css\";\n\nvar options = {\"injectType\":\"singletonStyleTag\",\"attributes\":{\"data-cke\":true}};\n\noptions.insert = \"head\";\noptions.singleton = true;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","/**\n * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module ui/autocomplete/autocompleteview\n*/\n\nimport { getOptimalPosition, type PositioningFunction, type Locale, global, toUnit, Rect } from '@ckeditor/ckeditor5-utils';\nimport SearchTextView, { type SearchTextViewConfig } from '../search/text/searchtextview.js';\nimport type SearchResultsView from '../search/searchresultsview.js';\nimport type InputBase from '../input/inputbase.js';\nimport type { FilteredViewExecuteEvent } from '../search/filteredview.js';\n\nimport '../../theme/components/autocomplete/autocomplete.css';\n\n/**\n * The autocomplete component's view class. It extends the {@link module:ui/search/text/searchtextview~SearchTextView} class\n * with a floating {@link #resultsView} that shows up when the user starts typing and hides when they blur\n * the component.\n */\nexport default class AutocompleteView<\n\tTQueryFieldView extends InputBase\n> extends SearchTextView {\n\t/**\n\t * The configuration of the autocomplete view.\n\t */\n\tprotected override _config: AutocompleteViewConfig;\n\n\tdeclare public resultsView: AutocompleteResultsView;\n\n\t/**\n\t * @inheritDoc\n\t */\n\tconstructor( locale: Locale, config: AutocompleteViewConfig ) {\n\t\tsuper( locale, config );\n\n\t\tthis._config = config;\n\n\t\tconst toPx = toUnit( 'px' );\n\n\t\tthis.extendTemplate( {\n\t\t\tattributes: {\n\t\t\t\tclass: [ 'ck-autocomplete' ]\n\t\t\t}\n\t\t} );\n\n\t\tconst bindResultsView = this.resultsView.bindTemplate;\n\n\t\tthis.resultsView.set( 'isVisible', false );\n\t\tthis.resultsView.set( '_position', 's' );\n\t\tthis.resultsView.set( '_width', 0 );\n\n\t\tthis.resultsView.extendTemplate( {\n\t\t\tattributes: {\n\t\t\t\tclass: [\n\t\t\t\t\tbindResultsView.if( 'isVisible', 'ck-hidden', value => !value ),\n\t\t\t\t\tbindResultsView.to( '_position', value => `ck-search__results_${ value }` )\n\t\t\t\t],\n\t\t\t\tstyle: {\n\t\t\t\t\twidth: bindResultsView.to( '_width', toPx )\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\n\t\t// Update the visibility of the results view when the user focuses or blurs the component.\n\t\t// This is also integration for the `resetOnBlur` configuration.\n\t\tthis.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {\n\t\t\tthis._updateResultsVisibility();\n\n\t\t\tif ( isFocused ) {\n\t\t\t\t// Reset the scroll position of the results view whenever the autocomplete reopens.\n\t\t\t\tthis.resultsView.element!.scrollTop = 0;\n\t\t\t} else if ( config.resetOnBlur ) {\n\t\t\t\tthis.queryView.reset();\n\t\t\t}\n\t\t} );\n\n\t\t// Update the visibility of the results view when the user types in the query field.\n\t\t// This is an integration for `queryMinChars` configuration.\n\t\t// This is an integration for search results changing length and the #resultsView requiring to be repositioned.\n\t\tthis.on( 'search', () => {\n\t\t\tthis._updateResultsVisibility();\n\t\t\tthis._updateResultsViewWidthAndPosition();\n\t\t} );\n\n\t\t// Hide the results view when the user presses the ESC key.\n\t\tthis.keystrokes.set( 'esc', ( evt, cancel ) => {\n\t\t\t// Let the DOM event pass through if the focus is in the query view.\n\t\t\tif ( !this.resultsView.isVisible ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Focus the query view first and only then close the results view. Otherwise, if the focus\n\t\t\t// was in the results view, it will get lost.\n\t\t\tthis.queryView.focus();\n\t\t\tthis.resultsView.isVisible = false;\n\t\t\tcancel();\n\t\t} );\n\n\t\t// Update the position of the results view when the user scrolls the page.\n\t\t// TODO: This needs to be debounced down the road.\n\t\tthis.listenTo( global.document, 'scroll', () => {\n\t\t\tthis._updateResultsViewWidthAndPosition();\n\t\t} );\n\n\t\t// Hide the results when the component becomes disabled.\n\t\tthis.on( 'change:isEnabled', () => {\n\t\t\tthis._updateResultsVisibility();\n\t\t} );\n\n\t\t// Update the value of the query field when the user selects a result.\n\t\tthis.filteredView.on( 'execute', ( evt, { value } ) => {\n\t\t\t// Focus the query view first to avoid losing the focus.\n\t\t\tthis.focus();\n\n\t\t\t// Resetting the view will ensure that the #queryView will update its empty state correctly.\n\t\t\t// This prevents bugs related to dynamic labels or auto-grow when re-setting the same value\n\t\t\t// to #queryView.fieldView.value (which does not trigger empty state change) to an\n\t\t\t// #queryView.fieldView.element that has been changed by the user.\n\t\t\tthis.reset();\n\n\t\t\t// Update the value of the query field.\n\t\t\tthis.queryView.fieldView.value = this.queryView.fieldView.element!.value = value;\n\n\t\t\t// Finally, hide the results view. The focus has been moved earlier so this is safe.\n\t\t\tthis.resultsView.isVisible = false;\n\t\t} );\n\n\t\t// Update the position and width of the results view when it becomes visible.\n\t\tthis.resultsView.on( 'change:isVisible', () => {\n\t\t\tthis._updateResultsViewWidthAndPosition();\n\t\t} );\n\t}\n\n\t/**\n\t * Updates the position of the results view on demand.\n\t */\n\tprivate _updateResultsViewWidthAndPosition() {\n\t\tif ( !this.resultsView.isVisible ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.resultsView._width = new Rect( this.queryView.fieldView.element! ).width;\n\n\t\tconst optimalResultsPosition = AutocompleteView._getOptimalPosition( {\n\t\t\telement: this.resultsView.element!,\n\t\t\ttarget: this.queryView.element!,\n\t\t\tfitInViewport: true,\n\t\t\tpositions: AutocompleteView.defaultResultsPositions\n\t\t} );\n\n\t\t// _getOptimalPosition will return null if there is no optimal position found (e.g. target is off the viewport).\n\t\tthis.resultsView._position = optimalResultsPosition ? optimalResultsPosition.name : 's';\n\t}\n\n\t/**\n\t * Updates the visibility of the results view on demand.\n\t */\n\tprivate _updateResultsVisibility() {\n\t\tconst queryMinChars = typeof this._config.queryMinChars === 'undefined' ? 0 : this._config.queryMinChars;\n\t\tconst queryLength = this.queryView.fieldView.element!.value.length;\n\n\t\tthis.resultsView.isVisible = this.focusTracker.isFocused && this.isEnabled && queryLength >= queryMinChars;\n\t}\n\n\t/**\n\t * Positions for the autocomplete results view. Two positions are defined by default:\n\t * * `s` - below the search field,\n\t * * `n` - above the search field.\n\t */\n\tpublic static defaultResultsPositions: Array = [\n\t\t( fieldRect => {\n\t\t\treturn {\n\t\t\t\ttop: fieldRect.bottom,\n\t\t\t\tleft: fieldRect.left,\n\t\t\t\tname: 's'\n\t\t\t};\n\t\t} ) as PositioningFunction,\n\t\t( ( fieldRect, resultsRect ) => {\n\t\t\treturn {\n\t\t\t\ttop: fieldRect.top - resultsRect.height,\n\t\t\t\tleft: fieldRect.left,\n\t\t\t\tname: 'n'\n\t\t\t};\n\t\t} ) as PositioningFunction\n\t];\n\n\t/**\n\t * A function used to calculate the optimal position for the dropdown panel.\n\t */\n\tprivate static _getOptimalPosition = getOptimalPosition;\n}\n\n/**\n * An interface describing additional properties of the floating search results view used by the autocomplete plugin.\n */\nexport interface AutocompleteResultsView extends SearchResultsView {\n\n\t/**\n\t * Controls the visibility of the results view.\n\t *\n\t * @observable\n\t */\n\tisVisible: boolean;\n\n\t/**\n\t * Controls the position (CSS class suffix) of the results view.\n\t *\n\t * @internal\n\t*/\n\t_position?: string;\n\n\t/**\n\t * The observable property determining the CSS width of the results view.\n\t *\n\t * @internal\n\t */\n\t_width: number;\n}\n\nexport interface AutocompleteViewConfig<\n\tTConfigInputCreator extends InputBase\n> extends SearchTextViewConfig {\n\n\t/**\n\t * When set `true`, the query view will be reset when the autocomplete view loses focus.\n\t */\n\tresetOnBlur?: boolean;\n\n\t/**\n\t * Minimum number of characters that need to be typed before the search is performed.\n\t *\n\t * @default 0\n\t */\n\tqueryMinChars?: number;\n}\n","import escapeHtmlChar from './_escapeHtmlChar.js';\nimport toString from './toString.js';\n\n/** Used to match HTML entities and HTML characters. */\nvar reUnescapedHtml = /[&<>\"']/g,\n reHasUnescapedHtml = RegExp(reUnescapedHtml.source);\n\n/**\n * Converts the characters \"&\", \"<\", \">\", '\"', and \"'\" in `string` to their\n * corresponding HTML entities.\n *\n * **Note:** No other characters are escaped. To escape additional\n * characters use a third-party library like [_he_](https://mths.be/he).\n *\n * Though the \">\" character is escaped for symmetry, characters like\n * \">\" and \"/\" don't need escaping in HTML and have no special meaning\n * unless they're part of a tag or unquoted attribute value. See\n * [Mathias Bynens's article](https://mathiasbynens.be/notes/ambiguous-ampersands)\n * (under \"semi-related fun fact\") for more details.\n *\n * When working with HTML you should always\n * [quote attribute values](http://wonko.com/post/html-escaping) to reduce\n * XSS vectors.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category String\n * @param {string} [string=''] The string to escape.\n * @returns {string} Returns the escaped string.\n * @example\n *\n * _.escape('fred, barney, & pebbles');\n * // => 'fred, barney, & pebbles'\n */\nfunction escape(string) {\n string = toString(string);\n return (string && reHasUnescapedHtml.test(string))\n ? string.replace(reUnescapedHtml, escapeHtmlChar)\n : string;\n}\n\nexport default escape;\n","import api from \"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../node_modules/css-loader/dist/cjs.js!../../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./highlightedtext.css\";\n\nvar options = {\"injectType\":\"singletonStyleTag\",\"attributes\":{\"data-cke\":true}};\n\noptions.insert = \"head\";\noptions.singleton = true;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","import api from \"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../node_modules/css-loader/dist/cjs.js!../../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./spinner.css\";\n\nvar options = {\"injectType\":\"singletonStyleTag\",\"attributes\":{\"data-cke\":true}};\n\noptions.insert = \"head\";\noptions.singleton = true;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","/**\n * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module ui/toolbar/balloon/balloontoolbar\n */\n\nimport ContextualBalloon from '../../panel/balloon/contextualballoon.js';\nimport ToolbarView, { type ToolbarViewGroupedItemsUpdateEvent } from '../toolbarview.js';\nimport BalloonPanelView, { generatePositions } from '../../panel/balloon/balloonpanelview.js';\nimport normalizeToolbarConfig from '../normalizetoolbarconfig.js';\n\nimport type { EditorUIReadyEvent, EditorUIUpdateEvent } from '../../editorui/editorui.js';\n\nimport {\n\tPlugin,\n\ttype Editor,\n\ttype EditorReadyEvent\n} from '@ckeditor/ckeditor5-core';\n\nimport {\n\tFocusTracker,\n\tRect,\n\tResizeObserver,\n\tenv,\n\tglobal,\n\ttoUnit,\n\ttype ObservableChangeEvent\n} from '@ckeditor/ckeditor5-utils';\n\nimport type {\n\tDocumentSelection,\n\tDocumentSelectionChangeRangeEvent,\n\tSchema\n} from '@ckeditor/ckeditor5-engine';\n\nimport { debounce, type DebouncedFunc } from 'lodash-es';\n\nconst toPx = toUnit( 'px' );\n\n/**\n * The contextual toolbar.\n *\n * It uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.\n */\nexport default class BalloonToolbar extends Plugin {\n\t/**\n\t * The toolbar view displayed in the balloon.\n\t */\n\tpublic readonly toolbarView: ToolbarView;\n\n\t/**\n\t * Tracks the focus of the {@link module:ui/editorui/editorui~EditorUI#getEditableElement editable element}\n\t * and the {@link #toolbarView}. When both are blurred then the toolbar should hide.\n\t */\n\tpublic readonly focusTracker: FocusTracker;\n\n\t/**\n\t * A cached and normalized `config.balloonToolbar` object.\n\t */\n\tprivate _balloonConfig: ReturnType;\n\n\t/**\n\t * An instance of the resize observer that allows to respond to changes in editable's geometry\n\t * so the toolbar can stay within its boundaries (and group toolbar items that do not fit).\n\t *\n\t * **Note**: Used only when `shouldNotGroupWhenFull` was **not** set in the\n\t * {@link module:core/editor/editorconfig~EditorConfig#balloonToolbar configuration}.\n\t *\n\t * **Note:** Created in {@link #init}.\n\t */\n\tprivate _resizeObserver: ResizeObserver | null = null;\n\n\t/**\n\t * The contextual balloon plugin instance.\n\t */\n\tprivate readonly _balloon: ContextualBalloon;\n\n\t/**\n\t * Fires `_selectionChangeDebounced` event using `lodash#debounce`.\n\t *\n\t * This event is an internal plugin event which is fired 200 ms after model selection last change.\n\t * This is to makes easy test debounced action without need to use `setTimeout`.\n\t *\n\t * This function is stored as a plugin property to make possible to cancel\n\t * trailing debounced invocation on destroy.\n\t */\n\tprivate readonly _fireSelectionChangeDebounced: DebouncedFunc<() => void>;\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic static get pluginName() {\n\t\treturn 'BalloonToolbar' as const;\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic static get requires() {\n\t\treturn [ ContextualBalloon ] as const;\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tconstructor( editor: Editor ) {\n\t\tsuper( editor );\n\n\t\tthis._balloonConfig = normalizeToolbarConfig( editor.config.get( 'balloonToolbar' ) );\n\t\tthis.toolbarView = this._createToolbarView();\n\t\tthis.focusTracker = new FocusTracker();\n\n\t\t// Wait for the EditorUI#init. EditableElement is not available before.\n\t\teditor.ui.once( 'ready', () => {\n\t\t\tthis.focusTracker.add( editor.ui.getEditableElement()! );\n\t\t\tthis.focusTracker.add( this.toolbarView.element! );\n\t\t} );\n\n\t\t// Register the toolbar so it becomes available for Alt+F10 and Esc navigation.\n\t\teditor.ui.addToolbar( this.toolbarView, {\n\t\t\tbeforeFocus: () => this.show( true ),\n\t\t\tafterBlur: () => this.hide(),\n\t\t\tisContextual: true\n\t\t} );\n\n\t\tthis._balloon = editor.plugins.get( ContextualBalloon );\n\t\tthis._fireSelectionChangeDebounced = debounce( () => this.fire( '_selectionChangeDebounced' ), 200 );\n\n\t\t// The appearance of the BalloonToolbar method is event–driven.\n\t\t// It is possible to stop the #show event and this prevent the toolbar from showing up.\n\t\tthis.decorate( 'show' );\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic init(): void {\n\t\tconst editor = this.editor;\n\t\tconst selection = editor.model.document.selection;\n\n\t\t// Show/hide the toolbar on editable focus/blur.\n\t\tthis.listenTo>( this.focusTracker, 'change:isFocused', ( evt, name, isFocused ) => {\n\t\t\tconst isToolbarVisible = this._balloon.visibleView === this.toolbarView;\n\n\t\t\tif ( !isFocused && isToolbarVisible ) {\n\t\t\t\tthis.hide();\n\t\t\t} else if ( isFocused ) {\n\t\t\t\tthis.show();\n\t\t\t}\n\t\t} );\n\n\t\t// Hide the toolbar when the selection is changed by a direct change or has changed to collapsed.\n\t\tthis.listenTo( selection, 'change:range', ( evt, data ) => {\n\t\t\tif ( data.directChange || selection.isCollapsed ) {\n\t\t\t\tthis.hide();\n\t\t\t}\n\n\t\t\t// Fire internal `_selectionChangeDebounced` event to use it for showing\n\t\t\t// the toolbar after the selection stops changing.\n\t\t\tthis._fireSelectionChangeDebounced();\n\t\t} );\n\n\t\t// Show the toolbar when the selection stops changing.\n\t\tthis.listenTo( this, '_selectionChangeDebounced', () => {\n\t\t\tif ( this.editor.editing.view.document.isFocused ) {\n\t\t\t\tthis.show();\n\t\t\t}\n\t\t} );\n\n\t\tif ( !this._balloonConfig.shouldNotGroupWhenFull ) {\n\t\t\tthis.listenTo( editor, 'ready', () => {\n\t\t\t\tconst editableElement = editor.ui.view.editable.element!;\n\n\t\t\t\t// Set #toolbarView's max-width on the initialization and update it on the editable resize.\n\t\t\t\tthis._resizeObserver = new ResizeObserver( editableElement, entry => {\n\t\t\t\t\t// The max-width equals 90% of the editable's width for the best user experience.\n\t\t\t\t\t// The value keeps the balloon very close to the boundaries of the editable and limits the cases\n\t\t\t\t\t// when the balloon juts out from the editable element it belongs to.\n\t\t\t\t\tthis.toolbarView.maxWidth = toPx( entry.contentRect.width * .9 );\n\t\t\t\t} );\n\t\t\t} );\n\t\t}\n\n\t\t// Listen to the toolbar view and whenever it changes its geometry due to some items being\n\t\t// grouped or ungrouped, update the position of the balloon because a shorter/longer toolbar\n\t\t// means the balloon could be pointing at the wrong place. Once updated, the balloon will point\n\t\t// at the right selection in the content again.\n\t\t// https://github.com/ckeditor/ckeditor5/issues/6444\n\t\tthis.listenTo( this.toolbarView, 'groupedItemsUpdate', () => {\n\t\t\tthis._updatePosition();\n\t\t} );\n\t}\n\n\t/**\n\t * Creates toolbar components based on given configuration.\n\t * This needs to be done when all plugins are ready.\n\t */\n\tpublic afterInit(): void {\n\t\tconst factory = this.editor.ui.componentFactory;\n\n\t\tthis.toolbarView.fillFromConfig( this._balloonConfig, factory );\n\t}\n\n\t/**\n\t * Creates the toolbar view instance.\n\t */\n\tprivate _createToolbarView() {\n\t\tconst t = this.editor.locale.t;\n\t\tconst shouldGroupWhenFull = !this._balloonConfig.shouldNotGroupWhenFull;\n\t\tconst toolbarView = new ToolbarView( this.editor.locale, {\n\t\t\tshouldGroupWhenFull,\n\t\t\tisFloating: true\n\t\t} );\n\n\t\ttoolbarView.ariaLabel = t( 'Editor contextual toolbar' );\n\t\ttoolbarView.render();\n\n\t\treturn toolbarView;\n\t}\n\n\t/**\n\t * Shows the toolbar and attaches it to the selection.\n\t *\n\t * Fires {@link #event:show} event which can be stopped to prevent the toolbar from showing up.\n\t *\n\t * @param showForCollapsedSelection When set `true`, the toolbar will show despite collapsed selection in the\n\t * editing view.\n\t */\n\tpublic show( showForCollapsedSelection: boolean = false ): void {\n\t\tconst editor = this.editor;\n\t\tconst selection = editor.model.document.selection;\n\t\tconst schema = editor.model.schema;\n\n\t\t// Do not add the toolbar to the balloon stack twice.\n\t\tif ( this._balloon.hasView( this.toolbarView ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Do not show the toolbar when the selection is collapsed.\n\t\tif ( selection.isCollapsed && !showForCollapsedSelection ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Do not show the toolbar when there is more than one range in the selection and they fully contain selectable elements.\n\t\t// See https://github.com/ckeditor/ckeditor5/issues/6443.\n\t\tif ( selectionContainsOnlyMultipleSelectables( selection, schema ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Don not show the toolbar when all components inside are disabled\n\t\t// see https://github.com/ckeditor/ckeditor5-ui/issues/269.\n\t\tif ( Array.from( this.toolbarView.items ).every( ( item: any ) => item.isEnabled !== undefined && !item.isEnabled ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Update the toolbar position when the editor ui should be refreshed.\n\t\tthis.listenTo( this.editor.ui, 'update', () => {\n\t\t\tthis._updatePosition();\n\t\t} );\n\n\t\t// Add the toolbar to the common editor contextual balloon.\n\t\tthis._balloon.add( {\n\t\t\tview: this.toolbarView,\n\t\t\tposition: this._getBalloonPositionData(),\n\t\t\tballoonClassName: 'ck-toolbar-container'\n\t\t} );\n\t}\n\n\t/**\n\t * Hides the toolbar.\n\t */\n\tpublic hide(): void {\n\t\tif ( this._balloon.hasView( this.toolbarView ) ) {\n\t\t\tthis.stopListening( this.editor.ui, 'update' );\n\t\t\tthis._balloon.remove( this.toolbarView );\n\t\t}\n\t}\n\n\t/**\n\t * Returns positioning options for the {@link #_balloon}. They control the way balloon is attached\n\t * to the selection.\n\t */\n\tprivate _getBalloonPositionData() {\n\t\tconst editor = this.editor;\n\t\tconst view = editor.editing.view;\n\t\tconst viewDocument = view.document;\n\t\tconst viewSelection = viewDocument.selection;\n\n\t\t// Get direction of the selection.\n\t\tconst isBackward = viewDocument.selection.isBackward;\n\n\t\treturn {\n\t\t\t// Because the target for BalloonPanelView is a Rect (not DOMRange), it's geometry will stay fixed\n\t\t\t// as the window scrolls. To let the BalloonPanelView follow such Rect, is must be continuously\n\t\t\t// computed and hence, the target is defined as a function instead of a static value.\n\t\t\t// https://github.com/ckeditor/ckeditor5-ui/issues/195\n\t\t\ttarget: () => {\n\t\t\t\tconst range = isBackward ? viewSelection.getFirstRange() : viewSelection.getLastRange();\n\t\t\t\tconst rangeRects = Rect.getDomRangeRects( view.domConverter.viewRangeToDom( range! ) );\n\n\t\t\t\t// Select the proper range rect depending on the direction of the selection.\n\t\t\t\tif ( isBackward ) {\n\t\t\t\t\treturn rangeRects[ 0 ];\n\t\t\t\t} else {\n\t\t\t\t\t// Ditch the zero-width \"orphan\" rect in the next line for the forward selection if there's\n\t\t\t\t\t// another one preceding it. It is not rendered as a selection by the web browser anyway.\n\t\t\t\t\t// https://github.com/ckeditor/ckeditor5-ui/issues/308\n\t\t\t\t\tif ( rangeRects.length > 1 && rangeRects[ rangeRects.length - 1 ].width === 0 ) {\n\t\t\t\t\t\trangeRects.pop();\n\t\t\t\t\t}\n\n\t\t\t\t\treturn rangeRects[ rangeRects.length - 1 ];\n\t\t\t\t}\n\t\t\t},\n\t\t\tpositions: this._getBalloonPositions( isBackward )\n\t\t};\n\t}\n\n\t/**\n\t * Updates the position of the {@link #_balloon} to make up for changes:\n\t *\n\t * * in the geometry of the selection it is attached to (e.g. the selection moved in the viewport or expanded or shrunk),\n\t * * or the geometry of the balloon toolbar itself (e.g. the toolbar has grouped or ungrouped some items and it is shorter or longer).\n\t */\n\tprivate _updatePosition() {\n\t\tthis._balloon.updatePosition( this._getBalloonPositionData() );\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic override destroy(): void {\n\t\tsuper.destroy();\n\n\t\tthis.stopListening();\n\t\tthis._fireSelectionChangeDebounced.cancel();\n\t\tthis.toolbarView.destroy();\n\t\tthis.focusTracker.destroy();\n\n\t\tif ( this._resizeObserver ) {\n\t\t\tthis._resizeObserver.destroy();\n\t\t}\n\t}\n\n\t/**\n\t * Returns toolbar positions for the given direction of the selection.\n\t */\n\tprivate _getBalloonPositions( isBackward: boolean ) {\n\t\tconst isSafariIniOS = env.isSafari && env.isiOS;\n\n\t\t// https://github.com/ckeditor/ckeditor5/issues/7707\n\t\tconst positions = isSafariIniOS ? generatePositions( {\n\t\t\t// 20px when zoomed out. Less then 20px when zoomed in; the \"radius\" of the native selection handle gets\n\t\t\t// smaller as the user zooms in. No less than the default v-offset, though.\n\t\t\theightOffset: Math.max(\n\t\t\t\tBalloonPanelView.arrowHeightOffset,\n\t\t\t\tMath.round( 20 / global.window.visualViewport!.scale )\n\t\t\t)\n\t\t} ) : BalloonPanelView.defaultPositions;\n\n\t\treturn isBackward ? [\n\t\t\tpositions.northWestArrowSouth,\n\t\t\tpositions.northWestArrowSouthWest,\n\t\t\tpositions.northWestArrowSouthEast,\n\t\t\tpositions.northWestArrowSouthMiddleEast,\n\t\t\tpositions.northWestArrowSouthMiddleWest,\n\t\t\tpositions.southWestArrowNorth,\n\t\t\tpositions.southWestArrowNorthWest,\n\t\t\tpositions.southWestArrowNorthEast,\n\t\t\tpositions.southWestArrowNorthMiddleWest,\n\t\t\tpositions.southWestArrowNorthMiddleEast\n\t\t] : [\n\t\t\tpositions.southEastArrowNorth,\n\t\t\tpositions.southEastArrowNorthEast,\n\t\t\tpositions.southEastArrowNorthWest,\n\t\t\tpositions.southEastArrowNorthMiddleEast,\n\t\t\tpositions.southEastArrowNorthMiddleWest,\n\t\t\tpositions.northEastArrowSouth,\n\t\t\tpositions.northEastArrowSouthEast,\n\t\t\tpositions.northEastArrowSouthWest,\n\t\t\tpositions.northEastArrowSouthMiddleEast,\n\t\t\tpositions.northEastArrowSouthMiddleWest\n\t\t];\n\t}\n}\n\n/**\n * Returns \"true\" when the selection has multiple ranges and each range contains a selectable element\n * and nothing else.\n */\nfunction selectionContainsOnlyMultipleSelectables( selection: DocumentSelection, schema: Schema ) {\n\t// It doesn't contain multiple objects if there is only one range.\n\tif ( selection.rangeCount === 1 ) {\n\t\treturn false;\n\t}\n\n\treturn [ ...selection.getRanges() ].every( range => {\n\t\tconst element = range.getContainedElement();\n\n\t\treturn element && schema.isSelectable( element );\n\t} );\n}\n\n/**\n * This event is fired just before the toolbar shows up. Stopping this event will prevent this.\n *\n * @eventName ~BalloonToolbar#show\n */\nexport type BalloonToolbarShowEvent = {\n\tname: 'show';\n\targs: [];\n};\n","import api from \"!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../node_modules/css-loader/dist/cjs.js!../../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./blocktoolbar.css\";\n\nvar options = {\"injectType\":\"singletonStyleTag\",\"attributes\":{\"data-cke\":true}};\n\noptions.insert = \"head\";\noptions.singleton = true;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","/**\n * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module ui/toolbar/block/blockbuttonview\n */\n\nimport ButtonView from '../../button/buttonview.js';\n\nimport { toUnit, type Locale } from '@ckeditor/ckeditor5-utils';\n\nimport '../../../theme/components/toolbar/blocktoolbar.css';\n\nconst toPx = toUnit( 'px' );\n\n/**\n * The block button view class.\n *\n * This view represents a button attached next to block element where the selection is anchored.\n *\n * See {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}.\n */\nexport default class BlockButtonView extends ButtonView {\n\t/**\n\t * Top offset.\n\t *\n\t * @observable\n\t */\n\tdeclare public top: number;\n\n\t/**\n\t * Left offset.\n\t *\n\t * @observable\n\t */\n\tdeclare public left: number;\n\n\t/**\n\t * @inheritDoc\n\t */\n\tconstructor( locale?: Locale ) {\n\t\tsuper( locale );\n\n\t\tconst bind = this.bindTemplate;\n\n\t\t// Hide button on init.\n\t\tthis.isVisible = false;\n\n\t\tthis.isToggleable = true;\n\n\t\tthis.set( 'top', 0 );\n\t\tthis.set( 'left', 0 );\n\n\t\tthis.extendTemplate( {\n\t\t\tattributes: {\n\t\t\t\tclass: 'ck-block-toolbar-button',\n\t\t\t\tstyle: {\n\t\t\t\t\ttop: bind.to( 'top', val => toPx( val ) ),\n\t\t\t\t\tleft: bind.to( 'left', val => toPx( val ) )\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t}\n}\n","/**\n * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module ui/toolbar/block/blocktoolbar\n */\n\n/* global window */\n\nimport {\n\tPlugin,\n\ttype Editor\n} from '@ckeditor/ckeditor5-core';\n\nimport {\n\tRect,\n\tResizeObserver,\n\ttoUnit,\n\ttype ObservableChangeEvent\n} from '@ckeditor/ckeditor5-utils';\n\nimport type { DocumentSelectionChangeRangeEvent } from '@ckeditor/ckeditor5-engine';\n\nimport BlockButtonView from './blockbuttonview.js';\nimport BalloonPanelView from '../../panel/balloon/balloonpanelview.js';\nimport ToolbarView, { NESTED_TOOLBAR_ICONS } from '../toolbarview.js';\nimport clickOutsideHandler from '../../bindings/clickoutsidehandler.js';\nimport normalizeToolbarConfig from '../normalizetoolbarconfig.js';\n\nimport type { ButtonExecuteEvent } from '../../button/button.js';\nimport type { EditorUIUpdateEvent } from '../../editorui/editorui.js';\n\nconst toPx = toUnit( 'px' );\n\n/**\n * The block toolbar plugin.\n *\n * This plugin provides a button positioned next to the block of content where the selection is anchored.\n * Upon clicking the button, a dropdown providing access to editor features shows up, as configured in\n * {@link module:core/editor/editorconfig~EditorConfig#blockToolbar}.\n *\n * By default, the button is displayed next to all elements marked in {@link module:engine/model/schema~Schema}\n * as `$block` for which the toolbar provides at least one option.\n *\n * By default, the button is attached so its right boundary is touching the\n * {@link module:engine/view/editableelement~EditableElement}:\n *\n * ```\n * __ |\n * | || This is a block of content that the\n * ¯¯ | button is attached to. This is a\n * | block of content that the button is\n * | attached to.\n * ```\n *\n * The position of the button can be adjusted using the CSS `transform` property:\n *\n * ```css\n * .ck-block-toolbar-button {\n * \ttransform: translateX( -10px );\n * }\n * ```\n *\n * ```\n * __ |\n * | | | This is a block of content that the\n * ¯¯ | button is attached to. This is a\n * | block of content that the button is\n * | attached to.\n * ```\n *\n * **Note**: If you plan to run the editor in a right–to–left (RTL) language, keep in mind the button\n * will be attached to the **right** boundary of the editable area. In that case, make sure the\n * CSS position adjustment works properly by adding the following styles:\n *\n * ```css\n * .ck[dir=\"rtl\"] .ck-block-toolbar-button {\n * \ttransform: translateX( 10px );\n * }\n * ```\n */\nexport default class BlockToolbar extends Plugin {\n\t/**\n\t * The toolbar view.\n\t */\n\tpublic readonly toolbarView: ToolbarView;\n\n\t/**\n\t * The balloon panel view, containing the {@link #toolbarView}.\n\t */\n\tpublic readonly panelView: BalloonPanelView;\n\n\t/**\n\t * The button view that opens the {@link #toolbarView}.\n\t */\n\tpublic readonly buttonView: BlockButtonView;\n\n\t/**\n\t * An instance of the resize observer that allows to respond to changes in editable's geometry\n\t * so the toolbar can stay within its boundaries (and group toolbar items that do not fit).\n\t *\n\t * **Note**: Used only when `shouldNotGroupWhenFull` was **not** set in the\n\t * {@link module:core/editor/editorconfig~EditorConfig#blockToolbar configuration}.\n\t *\n\t * **Note:** Created in {@link #afterInit}.\n\t */\n\tprivate _resizeObserver: ResizeObserver | null = null;\n\n\t/**\n\t * A cached and normalized `config.blockToolbar` object.\n\t */\n\tprivate _blockToolbarConfig: ReturnType;\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic static get pluginName() {\n\t\treturn 'BlockToolbar' as const;\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tconstructor( editor: Editor ) {\n\t\tsuper( editor );\n\n\t\tthis._blockToolbarConfig = normalizeToolbarConfig( this.editor.config.get( 'blockToolbar' ) );\n\t\tthis.toolbarView = this._createToolbarView();\n\t\tthis.panelView = this._createPanelView();\n\t\tthis.buttonView = this._createButtonView();\n\n\t\t// Close the #panelView upon clicking outside of the plugin UI.\n\t\tclickOutsideHandler( {\n\t\t\temitter: this.panelView,\n\t\t\tcontextElements: [ this.panelView.element!, this.buttonView.element! ],\n\t\t\tactivator: () => this.panelView.isVisible,\n\t\t\tcallback: () => this._hidePanel()\n\t\t} );\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic init(): void {\n\t\tconst editor = this.editor;\n\t\tconst t = editor.t;\n\n\t\tconst editBlockText = t( 'Click to edit block' );\n\t\tconst dragToMoveText = t( 'Drag to move' );\n\t\tconst editBlockLabel = t( 'Edit block' );\n\n\t\tconst isDragDropBlockToolbarPluginLoaded = editor.plugins.has( 'DragDropBlockToolbar' );\n\t\tconst label = isDragDropBlockToolbarPluginLoaded ? `${ editBlockText }\\n${ dragToMoveText }` : editBlockLabel;\n\n\t\tthis.buttonView.label = label;\n\n\t\tif ( isDragDropBlockToolbarPluginLoaded ) {\n\t\t\tthis.buttonView.element!.dataset.ckeTooltipClass = 'ck-tooltip_multi-line';\n\t\t}\n\n\t\t// Hides panel on a direct selection change.\n\t\tthis.listenTo( editor.model.document.selection, 'change:range', ( evt, data ) => {\n\t\t\tif ( data.directChange ) {\n\t\t\t\tthis._hidePanel();\n\t\t\t}\n\t\t} );\n\n\t\tthis.listenTo( editor.ui, 'update', () => this._updateButton() );\n\t\t// `low` priority is used because of https://github.com/ckeditor/ckeditor5-core/issues/133.\n\t\tthis.listenTo( editor, 'change:isReadOnly', () => this._updateButton(), { priority: 'low' } );\n\t\tthis.listenTo( editor.ui.focusTracker, 'change:isFocused', () => this._updateButton() );\n\n\t\t// Reposition button on resize.\n\t\tthis.listenTo>( this.buttonView, 'change:isVisible', ( evt, name, isVisible ) => {\n\t\t\tif ( isVisible ) {\n\t\t\t\t// Keep correct position of button and panel on window#resize.\n\t\t\t\tthis.buttonView.listenTo( window, 'resize', () => this._updateButton() );\n\t\t\t} else {\n\t\t\t\t// Stop repositioning button when is hidden.\n\t\t\t\tthis.buttonView.stopListening( window, 'resize' );\n\n\t\t\t\t// Hide the panel when the button disappears.\n\t\t\t\tthis._hidePanel();\n\t\t\t}\n\t\t} );\n\n\t\t// Register the toolbar so it becomes available for Alt+F10 and Esc navigation.\n\t\teditor.ui.addToolbar( this.toolbarView, {\n\t\t\tbeforeFocus: () => this._showPanel(),\n\t\t\tafterBlur: () => this._hidePanel()\n\t\t} );\n\t}\n\n\t/**\n\t * Fills the toolbar with its items based on the configuration.\n\t *\n\t * **Note:** This needs to be done after all plugins are ready.\n\t */\n\tpublic afterInit(): void {\n\t\tthis.toolbarView.fillFromConfig( this._blockToolbarConfig, this.editor.ui.componentFactory );\n\n\t\t// Hide panel before executing each button in the panel.\n\t\tfor ( const item of this.toolbarView.items ) {\n\t\t\titem.on( 'execute', () => this._hidePanel( true ), { priority: 'high' } );\n\t\t}\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic override destroy(): void {\n\t\tsuper.destroy();\n\n\t\t// Destroy created UI components as they are not automatically destroyed (see ckeditor5#1341).\n\t\tthis.panelView.destroy();\n\t\tthis.buttonView.destroy();\n\t\tthis.toolbarView.destroy();\n\n\t\tif ( this._resizeObserver ) {\n\t\t\tthis._resizeObserver.destroy();\n\t\t}\n\t}\n\n\t/**\n\t * Creates the {@link #toolbarView}.\n\t */\n\tprivate _createToolbarView(): ToolbarView {\n\t\tconst t = this.editor.locale.t;\n\t\tconst shouldGroupWhenFull = !this._blockToolbarConfig.shouldNotGroupWhenFull;\n\t\tconst toolbarView = new ToolbarView( this.editor.locale, {\n\t\t\tshouldGroupWhenFull,\n\t\t\tisFloating: true\n\t\t} );\n\n\t\ttoolbarView.ariaLabel = t( 'Editor block content toolbar' );\n\n\t\treturn toolbarView;\n\t}\n\n\t/**\n\t * Creates the {@link #panelView}.\n\t */\n\tprivate _createPanelView(): BalloonPanelView {\n\t\tconst editor = this.editor;\n\t\tconst panelView = new BalloonPanelView( editor.locale );\n\n\t\tpanelView.content.add( this.toolbarView );\n\t\tpanelView.class = 'ck-toolbar-container';\n\t\teditor.ui.view.body.add( panelView );\n\t\teditor.ui.focusTracker.add( panelView.element! );\n\n\t\t// Close #panelView on `Esc` press.\n\t\tthis.toolbarView.keystrokes.set( 'Esc', ( evt, cancel ) => {\n\t\t\tthis._hidePanel( true );\n\t\t\tcancel();\n\t\t} );\n\n\t\treturn panelView;\n\t}\n\n\t/**\n\t * Creates the {@link #buttonView}.\n\t */\n\tprivate _createButtonView(): BlockButtonView {\n\t\tconst editor = this.editor;\n\t\tconst t = editor.t;\n\t\tconst buttonView = new BlockButtonView( editor.locale );\n\t\tconst iconFromConfig = this._blockToolbarConfig.icon;\n\n\t\tconst icon = NESTED_TOOLBAR_ICONS[ iconFromConfig! ] || iconFromConfig || NESTED_TOOLBAR_ICONS.dragIndicator;\n\n\t\tbuttonView.set( {\n\t\t\tlabel: t( 'Edit block' ),\n\t\t\ticon,\n\t\t\twithText: false\n\t\t} );\n\n\t\t// Bind the panelView observable properties to the buttonView.\n\t\tbuttonView.bind( 'isOn' ).to( this.panelView, 'isVisible' );\n\t\tbuttonView.bind( 'tooltip' ).to( this.panelView, 'isVisible', isVisible => !isVisible );\n\n\t\t// Toggle the panelView upon buttonView#execute.\n\t\tthis.listenTo( buttonView, 'execute', () => {\n\t\t\tif ( !this.panelView.isVisible ) {\n\t\t\t\tthis._showPanel();\n\t\t\t} else {\n\t\t\t\tthis._hidePanel( true );\n\t\t\t}\n\t\t} );\n\n\t\teditor.ui.view.body.add( buttonView );\n\t\teditor.ui.focusTracker.add( buttonView.element! );\n\n\t\treturn buttonView;\n\t}\n\n\t/**\n\t * Shows or hides the button.\n\t * When all the conditions for displaying the button are matched, it shows the button. Hides otherwise.\n\t */\n\tprivate _updateButton() {\n\t\tconst editor = this.editor;\n\t\tconst model = editor.model;\n\t\tconst view = editor.editing.view;\n\n\t\t// Hides the button when the editor is not focused.\n\t\tif ( !editor.ui.focusTracker.isFocused ) {\n\t\t\tthis._hideButton();\n\n\t\t\treturn;\n\t\t}\n\n\t\t// Hides the button when the selection is in non-editable place.\n\t\tif ( !editor.model.canEditAt( editor.model.document.selection ) ) {\n\t\t\tthis._hideButton();\n\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the first selected block, button will be attached to this element.\n\t\tconst modelTarget = Array.from( model.document.selection.getSelectedBlocks() )[ 0 ];\n\n\t\t// Hides the button when there is no enabled item in toolbar for the current block element.\n\t\tif ( !modelTarget || Array.from( this.toolbarView.items ).every( ( item: any ) => !item.isEnabled ) ) {\n\t\t\tthis._hideButton();\n\n\t\t\treturn;\n\t\t}\n\n\t\t// Get DOM target element.\n\t\tconst domTarget = view.domConverter.mapViewToDom( editor.editing.mapper.toViewElement( modelTarget )! );\n\n\t\t// Show block button.\n\t\tthis.buttonView.isVisible = true;\n\n\t\t// Make sure that the block toolbar panel is resized properly.\n\t\tthis._setupToolbarResize();\n\n\t\t// Attach block button to target DOM element.\n\t\tthis._attachButtonToElement( domTarget as any );\n\n\t\t// When panel is opened then refresh it position to be properly aligned with block button.\n\t\tif ( this.panelView.isVisible ) {\n\t\t\tthis._showPanel();\n\t\t}\n\t}\n\n\t/**\n\t * Hides the button.\n\t */\n\tprivate _hideButton() {\n\t\tthis.buttonView.isVisible = false;\n\t}\n\n\t/**\n\t * Shows the {@link #toolbarView} attached to the {@link #buttonView}.\n\t * If the toolbar is already visible, then it simply repositions it.\n\t */\n\tprivate _showPanel() {\n\t\t// Usually, the only way to show the toolbar is by pressing the block button. It makes it impossible for\n\t\t// the toolbar to show up when the button is invisible (feature does not make sense for the selection then).\n\t\t// The toolbar navigation using Alt+F10 does not access the button but shows the panel directly using this method.\n\t\t// So we need to check whether this is possible first.\n\t\tif ( !this.buttonView.isVisible ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst wasVisible = this.panelView.isVisible;\n\n\t\t// So here's the thing: If there was no initial panelView#show() or these two were in different order, the toolbar\n\t\t// positioning will break in RTL editors. Weird, right? What you show know is that the toolbar\n\t\t// grouping works thanks to:\n\t\t//\n\t\t// * the ResizeObserver, which kicks in as soon as the toolbar shows up in DOM (becomes visible again).\n\t\t// * the observable ToolbarView#maxWidth, which triggers re-grouping when changed.\n\t\t//\n\t\t// Here are the possible scenarios:\n\t\t//\n\t\t// 1. (WRONG ❌) If the #maxWidth is set when the toolbar is invisible, it won't affect item grouping (no DOMRects, no grouping).\n\t\t// Then, when panelView.pin() is called, the position of the toolbar will be calculated for the old\n\t\t// items grouping state, and when finally ResizeObserver kicks in (hey, the toolbar is visible now, right?)\n\t\t// it will group/ungroup some items and the length of the toolbar will change. But since in RTL the toolbar\n\t\t// is attached on the right side and the positioning uses CSS \"left\", it will result in the toolbar shifting\n\t\t// to the left and being displayed in the wrong place.\n\t\t// 2. (WRONG ❌) If the panelView.pin() is called first and #maxWidth set next, then basically the story repeats. The balloon\n\t\t// calculates the position for the old toolbar grouping state, then the toolbar re-groups items and because\n\t\t// it is positioned using CSS \"left\" it will move.\n\t\t// 3. (RIGHT ✅) We show the panel first (the toolbar does re-grouping but it does not matter), then the #maxWidth\n\t\t// is set allowing the toolbar to re-group again and finally panelView.pin() does the positioning when the\n\t\t// items grouping state is stable and final.\n\t\t//\n\t\t// https://github.com/ckeditor/ckeditor5/issues/6449, https://github.com/ckeditor/ckeditor5/issues/6575\n\t\tthis.panelView.show();\n\n\t\tconst editableElement = this._getSelectedEditableElement();\n\n\t\tthis.toolbarView.maxWidth = this._getToolbarMaxWidth( editableElement );\n\n\t\tthis.panelView.pin( {\n\t\t\ttarget: this.buttonView.element!,\n\t\t\tlimiter: editableElement\n\t\t} );\n\n\t\tif ( !wasVisible ) {\n\t\t\t( this.toolbarView.items.get( 0 ) as any ).focus();\n\t\t}\n\t}\n\n\t/**\n\t * Returns currently selected editable, based on the model selection.\n\t */\n\tprivate _getSelectedEditableElement(): HTMLElement {\n\t\tconst selectedModelRootName = this.editor.model.document.selection.getFirstRange()!.root.rootName!;\n\n\t\treturn this.editor.ui.getEditableElement( selectedModelRootName )!;\n\t}\n\n\t/**\n\t * Hides the {@link #toolbarView}.\n\t *\n\t * @param focusEditable When `true`, the editable will be focused after hiding the panel.\n\t */\n\tprivate _hidePanel( focusEditable?: boolean ) {\n\t\tthis.panelView.isVisible = false;\n\n\t\tif ( focusEditable ) {\n\t\t\tthis.editor.editing.view.focus();\n\t\t}\n\t}\n\n\t/**\n\t * Attaches the {@link #buttonView} to the target block of content.\n\t *\n\t * @param targetElement Target element.\n\t */\n\tprivate _attachButtonToElement( targetElement: HTMLElement ) {\n\t\tconst contentStyles = window.getComputedStyle( targetElement );\n\n\t\tconst editableRect = new Rect( this._getSelectedEditableElement() );\n\t\tconst contentPaddingTop = parseInt( contentStyles.paddingTop, 10 );\n\t\t// When line height is not an integer then treat it as \"normal\".\n\t\t// MDN says that 'normal' == ~1.2 on desktop browsers.\n\t\tconst contentLineHeight = parseInt( contentStyles.lineHeight, 10 ) || parseInt( contentStyles.fontSize, 10 ) * 1.2;\n\n\t\tconst buttonRect = new Rect( this.buttonView.element! );\n\t\tconst contentRect = new Rect( targetElement );\n\n\t\tlet positionLeft;\n\n\t\tif ( this.editor.locale.uiLanguageDirection === 'ltr' ) {\n\t\t\tpositionLeft = editableRect.left - buttonRect.width;\n\t\t} else {\n\t\t\tpositionLeft = editableRect.right;\n\t\t}\n\n\t\tconst positionTop = contentRect.top + contentPaddingTop + ( contentLineHeight - buttonRect.height ) / 2;\n\n\t\tbuttonRect.moveTo( positionLeft, positionTop );\n\n\t\tconst absoluteButtonRect = buttonRect.toAbsoluteRect();\n\n\t\tthis.buttonView.top = absoluteButtonRect.top;\n\t\tthis.buttonView.left = absoluteButtonRect.left;\n\t}\n\n\t/**\n\t * Creates a resize observer that observes selected editable and resizes the toolbar panel accordingly.\n\t */\n\tprivate _setupToolbarResize() {\n\t\tconst editableElement = this._getSelectedEditableElement();\n\n\t\t// Do this only if the automatic grouping is turned on.\n\t\tif ( !this._blockToolbarConfig.shouldNotGroupWhenFull ) {\n\t\t\t// If resize observer is attached to a different editable than currently selected editable, re-attach it.\n\t\t\tif ( this._resizeObserver && this._resizeObserver.element !== editableElement ) {\n\t\t\t\tthis._resizeObserver.destroy();\n\t\t\t\tthis._resizeObserver = null;\n\t\t\t}\n\n\t\t\tif ( !this._resizeObserver ) {\n\t\t\t\tthis._resizeObserver = new ResizeObserver( editableElement, () => {\n\t\t\t\t\tthis.toolbarView.maxWidth = this._getToolbarMaxWidth( editableElement );\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Gets the {@link #toolbarView} max-width, based on given `editableElement` width plus the distance between the farthest\n\t * edge of the {@link #buttonView} and the editable.\n\t *\n\t * @returns A maximum width that toolbar can have, in pixels.\n\t */\n\tprivate _getToolbarMaxWidth( editableElement: HTMLElement ) {\n\t\tconst editableRect = new Rect( editableElement );\n\t\tconst buttonRect = new Rect( this.buttonView.element! );\n\t\tconst isRTL = this.editor.locale.uiLanguageDirection === 'rtl';\n\t\tconst offset = isRTL ? ( buttonRect.left - editableRect.right ) + buttonRect.width : editableRect.left - buttonRect.left;\n\n\t\treturn toPx( editableRect.width + offset );\n\t}\n}\n","/**\n * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n/**\n * @module editor-classic/classiceditorui\n */\n\nimport type { Editor, ElementApi } from 'ckeditor5/src/core.js';\nimport {\n\tEditorUI,\n\tnormalizeToolbarConfig,\n\tDialogView,\n\ttype EditorUIReadyEvent,\n\ttype DialogViewMoveToEvent,\n\ttype Dialog\n} from 'ckeditor5/src/ui.js';\nimport {\n\tenablePlaceholder,\n\ttype ViewScrollToTheSelectionEvent\n} from 'ckeditor5/src/engine.js';\nimport { ElementReplacer, Rect, type EventInfo } from 'ckeditor5/src/utils.js';\nimport type ClassicEditorUIView from './classiceditoruiview.js';\n\n/**\n * The classic editor UI class.\n */\nexport default class ClassicEditorUI extends EditorUI {\n\t/**\n\t * The main (top–most) view of the editor UI.\n\t */\n\tpublic readonly view: ClassicEditorUIView;\n\n\t/**\n\t * A normalized `config.toolbar` object.\n\t */\n\tprivate readonly _toolbarConfig: ReturnType;\n\n\t/**\n\t * The element replacer instance used to hide the editor's source element.\n\t */\n\tprivate readonly _elementReplacer: ElementReplacer;\n\n\t/**\n\t * Creates an instance of the classic editor UI class.\n\t *\n\t * @param editor The editor instance.\n\t * @param view The view of the UI.\n\t */\n\tconstructor( editor: Editor, view: ClassicEditorUIView ) {\n\t\tsuper( editor );\n\n\t\tthis.view = view;\n\t\tthis._toolbarConfig = normalizeToolbarConfig( editor.config.get( 'toolbar' ) );\n\t\tthis._elementReplacer = new ElementReplacer();\n\n\t\tthis.listenTo(\n\t\t\teditor.editing.view, 'scrollToTheSelection', this._handleScrollToTheSelectionWithStickyPanel.bind( this ) );\n\t}\n\n\t/**\n\t * @inheritDoc\n\t */\n\tpublic override get element(): HTMLElement | null {\n\t\treturn this.view.element;\n\t}\n\n\t/**\n\t * Initializes the UI.\n\t *\n\t * @param replacementElement The DOM element that will be the source for the created editor.\n\t */\n\tpublic init( replacementElement: HTMLElement | null ): void {\n\t\tconst editor = this.editor;\n\t\tconst view = this.view;\n\t\tconst editingView = editor.editing.view;\n\t\tconst editable = view.editable;\n\t\tconst editingRoot = editingView.document.getRoot()!;\n\n\t\t// The editable UI and editing root should share the same name. Then name is used\n\t\t// to recognize the particular editable, for instance in ARIA attributes.\n\t\teditable.name = editingRoot.rootName;\n\n\t\tview.render();\n\n\t\t// The editable UI element in DOM is available for sure only after the editor UI view has been rendered.\n\t\t// But it can be available earlier if a DOM element has been passed to BalloonEditor.create().\n\t\tconst editableElement = editable.element!;\n\n\t\t// Register the editable UI view in the editor. A single editor instance can aggregate multiple\n\t\t// editable areas (roots) but the classic editor has only one.\n\t\tthis.setEditableElement( editable.name, editableElement );\n\n\t\t// Let the editable UI element respond to the changes in the global editor focus\n\t\t// tracker. It has been added to the same tracker a few lines above but, in reality, there are\n\t\t// many focusable areas in the editor, like balloons, toolbars or dropdowns and as long\n\t\t// as they have focus, the editable should act like it is focused too (although technically\n\t\t// it isn't), e.g. by setting the proper CSS class, visually announcing focus to the user.\n\t\t// Doing otherwise will result in editable focus styles disappearing, once e.g. the\n\t\t// toolbar gets focused.\n\t\tview.editable.bind( 'isFocused' ).to( this.focusTracker );\n\n\t\t// Bind the editable UI element to the editing view, making it an end– and entry–point\n\t\t// of the editor's engine. This is where the engine meets the UI.\n\t\teditingView.attachDomRoot( editableElement );\n\n\t\t// If an element containing the initial data of the editor was provided, replace it with\n\t\t// an editor instance's UI in DOM until the editor is destroyed. For instance, a