` which\r\n * wraps the editable element and the toolbar. In {@link module:editor-inline/inlineeditor~InlineEditor}\r\n * it is the editable element itself (as there is no other wrapper). However, in\r\n * {@link module:editor-decoupled/decouplededitor~DecoupledEditor} it is set to `null` because this editor does not\r\n * come with a single \"main\" HTML element (its editable element and toolbar are separate).\r\n *\r\n * This property can be understood as a shorthand for retrieving the element that a specific editor integration\r\n * considers to be its main DOM element.\r\n */\r\n get element() {\r\n return null;\r\n }\r\n /**\r\n * Fires the {@link module:ui/editorui/editorui~EditorUI#event:update `update`} event.\r\n *\r\n * This method should be called when the editor UI (e.g. positions of its balloons) needs to be updated due to\r\n * some environmental change which CKEditor 5 is not aware of (e.g. resize of a container in which it is used).\r\n */\r\n update() {\r\n this.fire('update');\r\n }\r\n /**\r\n * Destroys the UI.\r\n */\r\n destroy() {\r\n this.stopListening();\r\n this.focusTracker.destroy();\r\n this.tooltipManager.destroy(this.editor);\r\n this.poweredBy.destroy();\r\n // Clean–up the references to the CKEditor instance stored in the native editable DOM elements.\r\n for (const domElement of this._editableElementsMap.values()) {\r\n domElement.ckeditorInstance = null;\r\n this.editor.keystrokes.stopListening(domElement);\r\n }\r\n this._editableElementsMap = new Map();\r\n this._focusableToolbarDefinitions = [];\r\n }\r\n /**\r\n * Stores the native DOM editable element used by the editor under a unique name.\r\n *\r\n * Also, registers the element in the editor to maintain the accessibility of the UI. When the user is editing text in a focusable\r\n * editable area, they can use the
Alt +
F10 keystroke to navigate over editor toolbars. See {@link #addToolbar}.\r\n *\r\n * @param rootName The unique name of the editable element.\r\n * @param domElement The native DOM editable element.\r\n */\r\n setEditableElement(rootName, domElement) {\r\n this._editableElementsMap.set(rootName, domElement);\r\n // Put a reference to the CKEditor instance in the editable native DOM element.\r\n // It helps 3rd–party software (browser extensions, other libraries) access and recognize\r\n // CKEditor 5 instances (editing roots) and use their API (there is no global editor\r\n // instance registry).\r\n if (!domElement.ckeditorInstance) {\r\n domElement.ckeditorInstance = this.editor;\r\n }\r\n // Register the element, so it becomes available for Alt+F10 and Esc navigation.\r\n this.focusTracker.add(domElement);\r\n const setUpKeystrokeHandler = () => {\r\n // The editing view of the editor is already listening to keystrokes from DOM roots (see: KeyObserver).\r\n // Do not duplicate listeners.\r\n if (this.editor.editing.view.getDomRoot(rootName)) {\r\n return;\r\n }\r\n this.editor.keystrokes.listenTo(domElement);\r\n };\r\n // For editable elements set by features after EditorUI is ready (e.g. source editing).\r\n if (this.isReady) {\r\n setUpKeystrokeHandler();\r\n }\r\n // For editable elements set while the editor is being created (e.g. DOM roots).\r\n else {\r\n this.once('ready', setUpKeystrokeHandler);\r\n }\r\n }\r\n /**\r\n * Removes the editable from the editor UI. Removes all handlers added by {@link #setEditableElement}.\r\n *\r\n * @param rootName The name of the editable element to remove.\r\n */\r\n removeEditableElement(rootName) {\r\n const domElement = this._editableElementsMap.get(rootName);\r\n if (!domElement) {\r\n return;\r\n }\r\n this._editableElementsMap.delete(rootName);\r\n this.editor.keystrokes.stopListening(domElement);\r\n this.focusTracker.remove(domElement);\r\n domElement.ckeditorInstance = null;\r\n }\r\n /**\r\n * Returns the editable editor element with the given name or null if editable does not exist.\r\n *\r\n * @param rootName The editable name.\r\n */\r\n getEditableElement(rootName = 'main') {\r\n return this._editableElementsMap.get(rootName);\r\n }\r\n /**\r\n * Returns array of names of all editor editable elements.\r\n */\r\n getEditableElementsNames() {\r\n return this._editableElementsMap.keys();\r\n }\r\n /**\r\n * Adds a toolbar to the editor UI. Used primarily to maintain the accessibility of the UI.\r\n *\r\n * Focusable toolbars can be accessed (focused) by users by pressing the
Alt +
F10 keystroke.\r\n * Successive keystroke presses navigate over available toolbars.\r\n *\r\n * @param toolbarView A instance of the toolbar to be registered.\r\n */\r\n addToolbar(toolbarView, options = {}) {\r\n if (toolbarView.isRendered) {\r\n this.focusTracker.add(toolbarView.element);\r\n this.editor.keystrokes.listenTo(toolbarView.element);\r\n }\r\n else {\r\n toolbarView.once('render', () => {\r\n this.focusTracker.add(toolbarView.element);\r\n this.editor.keystrokes.listenTo(toolbarView.element);\r\n });\r\n }\r\n this._focusableToolbarDefinitions.push({ toolbarView, options });\r\n }\r\n /**\r\n * Stores all editable elements used by the editor instance.\r\n *\r\n * @deprecated\r\n */\r\n get _editableElements() {\r\n /**\r\n * The {@link module:ui/editorui/editorui~EditorUI#_editableElements `EditorUI#_editableElements`} property has been\r\n * deprecated and will be removed in the near future. Please use\r\n * {@link module:ui/editorui/editorui~EditorUI#setEditableElement `setEditableElement()`} and\r\n * {@link module:ui/editorui/editorui~EditorUI#getEditableElement `getEditableElement()`} methods instead.\r\n *\r\n * @error editor-ui-deprecated-editable-elements\r\n * @param editorUI Editor UI instance the deprecated property belongs to.\r\n */\r\n console.warn('editor-ui-deprecated-editable-elements: ' +\r\n 'The EditorUI#_editableElements property has been deprecated and will be removed in the near future.', { editorUI: this });\r\n return this._editableElementsMap;\r\n }\r\n /**\r\n * Returns viewport offsets object:\r\n *\r\n * ```js\r\n * {\r\n * \ttop: Number,\r\n * \tright: Number,\r\n * \tbottom: Number,\r\n * \tleft: Number\r\n * }\r\n * ```\r\n *\r\n * Only top property is currently supported.\r\n */\r\n _readViewportOffsetFromConfig() {\r\n const editor = this.editor;\r\n const viewportOffsetConfig = editor.config.get('ui.viewportOffset');\r\n if (viewportOffsetConfig) {\r\n return viewportOffsetConfig;\r\n }\r\n // Not present in EditorConfig type, because it's legacy. Hence the `as` expression.\r\n const legacyOffsetConfig = editor.config.get('toolbar.viewportTopOffset');\r\n // Fall back to deprecated toolbar config.\r\n if (legacyOffsetConfig) {\r\n /**\r\n * The {@link module:core/editor/editorconfig~EditorConfig#toolbar `EditorConfig#toolbar.viewportTopOffset`}\r\n * property has been deprecated and will be removed in the near future. Please use\r\n * {@link module:core/editor/editorconfig~EditorConfig#ui `EditorConfig#ui.viewportOffset`} instead.\r\n *\r\n * @error editor-ui-deprecated-viewport-offset-config\r\n */\r\n console.warn('editor-ui-deprecated-viewport-offset-config: ' +\r\n 'The `toolbar.vieportTopOffset` configuration option is deprecated. ' +\r\n 'It will be removed from future CKEditor versions. Use `ui.viewportOffset.top` instead.');\r\n return { top: legacyOffsetConfig };\r\n }\r\n // More keys to come in the future.\r\n return { top: 0 };\r\n }\r\n /**\r\n * Starts listening for
Alt +
F10 and
Esc keystrokes in the context of focusable\r\n * {@link #setEditableElement editable elements} and {@link #addToolbar toolbars}\r\n * to allow users navigate across the UI.\r\n */\r\n _initFocusTracking() {\r\n const editor = this.editor;\r\n const editingView = editor.editing.view;\r\n let lastFocusedForeignElement;\r\n let candidateDefinitions;\r\n // Focus the next focusable toolbar on
Alt +
F10 .\r\n editor.keystrokes.set('Alt+F10', (data, cancel) => {\r\n const focusedElement = this.focusTracker.focusedElement;\r\n // Focus moved out of a DOM element that\r\n // * is not a toolbar,\r\n // * does not belong to the editing view (e.g. source editing).\r\n if (Array.from(this._editableElementsMap.values()).includes(focusedElement) &&\r\n !Array.from(editingView.domRoots.values()).includes(focusedElement)) {\r\n lastFocusedForeignElement = focusedElement;\r\n }\r\n const currentFocusedToolbarDefinition = this._getCurrentFocusedToolbarDefinition();\r\n // * When focusing a toolbar for the first time, set the array of definitions for successive presses of Alt+F10.\r\n // This ensures, the navigation works always the same and no pair of toolbars takes over\r\n // (e.g. image and table toolbars when a selected image is inside a cell).\r\n // * It could be that the focus went to the toolbar by clicking a toolbar item (e.g. a dropdown). In this case,\r\n // there were no candidates so they must be obtained (#12339).\r\n if (!currentFocusedToolbarDefinition || !candidateDefinitions) {\r\n candidateDefinitions = this._getFocusableCandidateToolbarDefinitions();\r\n }\r\n // In a single Alt+F10 press, check all candidates but if none were focused, don't go any further.\r\n // This prevents an infinite loop.\r\n for (let i = 0; i < candidateDefinitions.length; i++) {\r\n const candidateDefinition = candidateDefinitions.shift();\r\n // Put the first definition to the back of the array. This allows circular navigation over all toolbars\r\n // on successive presses of Alt+F10.\r\n candidateDefinitions.push(candidateDefinition);\r\n // Don't focus the same toolbar again. If you did, this would move focus from the nth focused toolbar item back to the\r\n // first item as per ToolbarView#focus() if the user navigated inside the toolbar.\r\n if (candidateDefinition !== currentFocusedToolbarDefinition &&\r\n this._focusFocusableCandidateToolbar(candidateDefinition)) {\r\n // Clean up after a current visible toolbar when switching to the next one.\r\n if (currentFocusedToolbarDefinition && currentFocusedToolbarDefinition.options.afterBlur) {\r\n currentFocusedToolbarDefinition.options.afterBlur();\r\n }\r\n break;\r\n }\r\n }\r\n cancel();\r\n });\r\n // Blur the focused toolbar on
Esc and bring the focus back to its origin.\r\n editor.keystrokes.set('Esc', (data, cancel) => {\r\n const focusedToolbarDef = this._getCurrentFocusedToolbarDefinition();\r\n if (!focusedToolbarDef) {\r\n return;\r\n }\r\n // Bring focus back to where it came from before focusing the toolbar:\r\n // 1. If it came from outside the engine view (e.g. source editing), move it there.\r\n if (lastFocusedForeignElement) {\r\n lastFocusedForeignElement.focus();\r\n lastFocusedForeignElement = null;\r\n }\r\n // 2. There are two possibilities left:\r\n // 2.1. It could be that the focus went from an editable element in the view (root or nested).\r\n // 2.2. It could be the focus went straight to the toolbar before even focusing the editing area.\r\n // In either case, just focus the view editing. The focus will land where it belongs.\r\n else {\r\n editor.editing.view.focus();\r\n }\r\n // Clean up after the toolbar if there is anything to do there.\r\n if (focusedToolbarDef.options.afterBlur) {\r\n focusedToolbarDef.options.afterBlur();\r\n }\r\n cancel();\r\n });\r\n }\r\n /**\r\n * Returns definitions of toolbars that could potentially be focused, sorted by their importance for the user.\r\n *\r\n * Focusable toolbars candidates are either:\r\n * * already visible,\r\n * * have `beforeFocus()` set in their {@link module:ui/editorui/editorui~FocusableToolbarDefinition definition} that suggests that\r\n * they might show up when called. Keep in mind that determining whether a toolbar will show up (and become focusable) is impossible\r\n * at this stage because it depends on its implementation, that in turn depends on the editing context (selection).\r\n *\r\n * **Note**: Contextual toolbars take precedence over regular toolbars.\r\n */\r\n _getFocusableCandidateToolbarDefinitions() {\r\n const definitions = [];\r\n for (const toolbarDef of this._focusableToolbarDefinitions) {\r\n const { toolbarView, options } = toolbarDef;\r\n if (isVisible(toolbarView.element) || options.beforeFocus) {\r\n definitions.push(toolbarDef);\r\n }\r\n }\r\n // Contextual and already visible toolbars have higher priority. If both are true, the toolbar will always focus first.\r\n // For instance, a selected widget toolbar vs inline editor toolbar: both are visible but the widget toolbar is contextual.\r\n definitions.sort((defA, defB) => getToolbarDefinitionWeight(defA) - getToolbarDefinitionWeight(defB));\r\n return definitions;\r\n }\r\n /**\r\n * Returns a definition of the toolbar that is currently visible and focused (one of its children has focus).\r\n *\r\n * `null` is returned when no toolbar is currently focused.\r\n */\r\n _getCurrentFocusedToolbarDefinition() {\r\n for (const definition of this._focusableToolbarDefinitions) {\r\n if (definition.toolbarView.element && definition.toolbarView.element.contains(this.focusTracker.focusedElement)) {\r\n return definition;\r\n }\r\n }\r\n return null;\r\n }\r\n /**\r\n * Focuses a focusable toolbar candidate using its definition.\r\n *\r\n * @param candidateToolbarDefinition A definition of the toolbar to focus.\r\n * @returns `true` when the toolbar candidate was focused. `false` otherwise.\r\n */\r\n _focusFocusableCandidateToolbar(candidateToolbarDefinition) {\r\n const { toolbarView, options: { beforeFocus } } = candidateToolbarDefinition;\r\n if (beforeFocus) {\r\n beforeFocus();\r\n }\r\n // If it didn't show up after beforeFocus(), it's not focusable at all.\r\n if (!isVisible(toolbarView.element)) {\r\n return false;\r\n }\r\n toolbarView.focus();\r\n return true;\r\n }\r\n /**\r\n * Provides an integration between {@link #viewportOffset} and {@link module:utils/dom/scroll~scrollViewportToShowTarget}.\r\n * It allows the UI-agnostic engine method to consider user-configured viewport offsets specific for the integration.\r\n *\r\n * @param evt The `scrollToTheSelection` event info.\r\n * @param data The payload carried by the `scrollToTheSelection` event.\r\n */\r\n _handleScrollToTheSelection(evt, data) {\r\n const configuredViewportOffset = {\r\n top: 0,\r\n bottom: 0,\r\n left: 0,\r\n right: 0,\r\n ...this.viewportOffset\r\n };\r\n data.viewportOffset.top += configuredViewportOffset.top;\r\n data.viewportOffset.bottom += configuredViewportOffset.bottom;\r\n data.viewportOffset.left += configuredViewportOffset.left;\r\n data.viewportOffset.right += configuredViewportOffset.right;\r\n }\r\n}\r\n/**\r\n * Returns a number (weight) for a toolbar definition. Visible toolbars have a higher priority and so do\r\n * contextual toolbars (displayed in the context of a content, for instance, an image toolbar).\r\n *\r\n * A standard invisible toolbar is the heaviest. A visible contextual toolbar is the lightest.\r\n *\r\n * @param toolbarDef A toolbar definition to be weighted.\r\n */\r\nfunction getToolbarDefinitionWeight(toolbarDef) {\r\n const { toolbarView, options } = toolbarDef;\r\n let weight = 10;\r\n // Prioritize already visible toolbars. They should get focused first.\r\n if (isVisible(toolbarView.element)) {\r\n weight--;\r\n }\r\n // Prioritize contextual toolbars. They are displayed at the selection.\r\n if (options.isContextual) {\r\n weight--;\r\n }\r\n return weight;\r\n}\r\n","import api from \"!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../css-loader/dist/cjs.js!../../../../../postcss-loader/dist/cjs.js??ruleSet[1].rules[4].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 || {};","/**\r\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\r\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\r\n */\r\n/**\r\n * @module ui/editorui/editoruiview\r\n */\r\nimport View from '../view';\r\nimport BodyCollection from './bodycollection';\r\nimport '../../theme/components/editorui/editorui.css';\r\n/**\r\n * The editor UI view class. Base class for the editor main views.\r\n */\r\nexport default class EditorUIView extends View {\r\n /**\r\n * Creates an instance of the editor UI view class.\r\n *\r\n * @param locale The locale instance.\r\n */\r\n constructor(locale) {\r\n super(locale);\r\n this.body = new BodyCollection(locale);\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n render() {\r\n super.render();\r\n this.body.attachToDom();\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n destroy() {\r\n this.body.detachFromDom();\r\n return super.destroy();\r\n }\r\n}\r\n","/**\r\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\r\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\r\n */\r\n/**\r\n * @module ui/editorui/boxed/boxededitoruiview\r\n */\r\nimport EditorUIView from '../editoruiview';\r\nimport LabelView from '../../label/labelview';\r\n/**\r\n * The boxed editor UI view class. This class represents an editor interface\r\n * consisting of a toolbar and an editable area, enclosed within a box.\r\n */\r\nexport default class BoxedEditorUIView extends EditorUIView {\r\n /**\r\n * Creates an instance of the boxed editor UI view class.\r\n *\r\n * @param locale The locale instance..\r\n */\r\n constructor(locale) {\r\n super(locale);\r\n this.top = this.createCollection();\r\n this.main = this.createCollection();\r\n this._voiceLabelView = this._createVoiceLabel();\r\n this.setTemplate({\r\n tag: 'div',\r\n attributes: {\r\n class: [\r\n 'ck',\r\n 'ck-reset',\r\n 'ck-editor',\r\n 'ck-rounded-corners'\r\n ],\r\n role: 'application',\r\n dir: locale.uiLanguageDirection,\r\n lang: locale.uiLanguage,\r\n 'aria-labelledby': this._voiceLabelView.id\r\n },\r\n children: [\r\n this._voiceLabelView,\r\n {\r\n tag: 'div',\r\n attributes: {\r\n class: [\r\n 'ck',\r\n 'ck-editor__top',\r\n 'ck-reset_all'\r\n ],\r\n role: 'presentation'\r\n },\r\n children: this.top\r\n },\r\n {\r\n tag: 'div',\r\n attributes: {\r\n class: [\r\n 'ck',\r\n 'ck-editor__main'\r\n ],\r\n role: 'presentation'\r\n },\r\n children: this.main\r\n }\r\n ]\r\n });\r\n }\r\n /**\r\n * Creates a voice label view instance.\r\n */\r\n _createVoiceLabel() {\r\n const t = this.t;\r\n const voiceLabel = new LabelView();\r\n voiceLabel.text = t('Rich Text Editor');\r\n voiceLabel.extendTemplate({\r\n attributes: {\r\n class: 'ck-voice-label'\r\n }\r\n });\r\n return voiceLabel;\r\n }\r\n}\r\n","/**\r\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\r\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\r\n */\r\n/**\r\n * @module ui/editableui/editableuiview\r\n */\r\nimport View from '../view';\r\n/**\r\n * The editable UI view class.\r\n */\r\nexport default class EditableUIView extends View {\r\n /**\r\n * Creates an instance of EditableUIView class.\r\n *\r\n * @param locale The locale instance.\r\n * @param editingView The editing view instance the editable is related to.\r\n * @param editableElement The editable element. If not specified, this view\r\n * should create it. Otherwise, the existing element should be used.\r\n */\r\n constructor(locale, editingView, editableElement) {\r\n super(locale);\r\n /**\r\n * The name of the editable UI view.\r\n */\r\n this.name = null;\r\n this.setTemplate({\r\n tag: 'div',\r\n attributes: {\r\n class: [\r\n 'ck',\r\n 'ck-content',\r\n 'ck-editor__editable',\r\n 'ck-rounded-corners'\r\n ],\r\n lang: locale.contentLanguage,\r\n dir: locale.contentLanguageDirection\r\n }\r\n });\r\n this.set('isFocused', false);\r\n this._editableElement = editableElement;\r\n this._hasExternalElement = !!this._editableElement;\r\n this._editingView = editingView;\r\n }\r\n /**\r\n * Renders the view by either applying the {@link #template} to the existing\r\n * {@link module:ui/editableui/editableuiview~EditableUIView#_editableElement} or assigning {@link #element}\r\n * as {@link module:ui/editableui/editableuiview~EditableUIView#_editableElement}.\r\n */\r\n render() {\r\n super.render();\r\n if (this._hasExternalElement) {\r\n this.template.apply(this.element = this._editableElement);\r\n }\r\n else {\r\n this._editableElement = this.element;\r\n }\r\n this.on('change:isFocused', () => this._updateIsFocusedClasses());\r\n this._updateIsFocusedClasses();\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n destroy() {\r\n if (this._hasExternalElement) {\r\n this.template.revert(this._editableElement);\r\n }\r\n super.destroy();\r\n }\r\n /**\r\n * Whether an external {@link #_editableElement} was passed into the constructor, which also means\r\n * the view will not render its {@link #template}.\r\n */\r\n get hasExternalElement() {\r\n return this._hasExternalElement;\r\n }\r\n /**\r\n * Updates the `ck-focused` and `ck-blurred` CSS classes on the {@link #element} according to\r\n * the {@link #isFocused} property value using the {@link #_editingView editing view} API.\r\n */\r\n _updateIsFocusedClasses() {\r\n const editingView = this._editingView;\r\n if (editingView.isRenderingInProgress) {\r\n updateAfterRender(this);\r\n }\r\n else {\r\n update(this);\r\n }\r\n function update(view) {\r\n editingView.change(writer => {\r\n const viewRoot = editingView.document.getRoot(view.name);\r\n writer.addClass(view.isFocused ? 'ck-focused' : 'ck-blurred', viewRoot);\r\n writer.removeClass(view.isFocused ? 'ck-blurred' : 'ck-focused', viewRoot);\r\n });\r\n }\r\n // In a case of a multi-root editor, a callback will be attached more than once (one callback for each root).\r\n // While executing one callback the `isRenderingInProgress` observable is changing what causes executing another\r\n // callback and render is called inside the already pending render.\r\n // We need to be sure that callback is executed only when the value has changed from `true` to `false`.\r\n // See https://github.com/ckeditor/ckeditor5/issues/1676.\r\n function updateAfterRender(view) {\r\n editingView.once('change:isRenderingInProgress', (evt, name, value) => {\r\n if (!value) {\r\n update(view);\r\n }\r\n else {\r\n updateAfterRender(view);\r\n }\r\n });\r\n }\r\n }\r\n}\r\n","/**\r\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\r\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\r\n */\r\n/**\r\n * @module ui/editableui/inline/inlineeditableuiview\r\n */\r\nimport EditableUIView from '../editableuiview';\r\n/**\r\n * The inline editable UI class implementing an inline {@link module:ui/editableui/editableuiview~EditableUIView}.\r\n */\r\nexport default class InlineEditableUIView extends EditableUIView {\r\n /**\r\n * Creates an instance of the InlineEditableUIView class.\r\n *\r\n * @param locale The locale instance.\r\n * @param editingView The editing view instance the editable is related to.\r\n * @param editableElement The editable element. If not specified, the\r\n * {@link module:ui/editableui/editableuiview~EditableUIView}\r\n * will create it. Otherwise, the existing element will be used.\r\n * @param options Additional configuration of the view.\r\n * @param options.label A function that gets called with the instance of this view as an argument\r\n * and should return a string that represents the label of the editable for assistive technologies. If not provided,\r\n * a default label generator is used.\r\n */\r\n constructor(locale, editingView, editableElement, options = {}) {\r\n super(locale, editingView, editableElement);\r\n const t = locale.t;\r\n this.extendTemplate({\r\n attributes: {\r\n role: 'textbox',\r\n class: 'ck-editor__editable_inline'\r\n }\r\n });\r\n this._generateLabel = options.label || (() => t('Editor editing area: %0', this.name));\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n render() {\r\n super.render();\r\n const editingView = this._editingView;\r\n editingView.change(writer => {\r\n const viewRoot = editingView.document.getRoot(this.name);\r\n writer.setAttribute('aria-label', this._generateLabel(this), viewRoot);\r\n });\r\n }\r\n}\r\n","import api from \"!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../css-loader/dist/cjs.js!../../../../../postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./formheader.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 || {};","/**\r\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\r\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\r\n */\r\n/**\r\n * @module ui/formheader/formheaderview\r\n */\r\nimport View from '../view';\r\nimport IconView from '../icon/iconview';\r\nimport '../../theme/components/formheader/formheader.css';\r\n/**\r\n * The class component representing a form header view. It should be used in more advanced forms to\r\n * describe the main purpose of the form.\r\n *\r\n * By default the component contains a bolded label view that has to be set. The label is usually a short (at most 3-word) string.\r\n * The component can also be extended by any other elements, like: icons, dropdowns, etc.\r\n *\r\n * It is used i.a.\r\n * by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}\r\n * and {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}.\r\n *\r\n * The latter is an example, where the component has been extended by {@link module:ui/dropdown/dropdownview~DropdownView} view.\r\n */\r\nexport default class FormHeaderView extends View {\r\n /**\r\n * Creates an instance of the form header class.\r\n *\r\n * @param locale The locale instance.\r\n * @param options.label A label.\r\n * @param options.class An additional class.\r\n */\r\n constructor(locale, options = {}) {\r\n super(locale);\r\n const bind = this.bindTemplate;\r\n this.set('label', options.label || '');\r\n this.set('class', options.class || null);\r\n this.children = this.createCollection();\r\n this.setTemplate({\r\n tag: 'div',\r\n attributes: {\r\n class: [\r\n 'ck',\r\n 'ck-form__header',\r\n bind.to('class')\r\n ]\r\n },\r\n children: this.children\r\n });\r\n if (options.icon) {\r\n this.iconView = new IconView();\r\n this.iconView.content = options.icon;\r\n this.children.add(this.iconView);\r\n }\r\n const label = new View(locale);\r\n label.setTemplate({\r\n tag: 'h2',\r\n attributes: {\r\n class: [\r\n 'ck',\r\n 'ck-form__header__label'\r\n ]\r\n },\r\n children: [\r\n { text: bind.to('label') }\r\n ]\r\n });\r\n this.children.add(label);\r\n }\r\n}\r\n","/**\r\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\r\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\r\n */\r\n/**\r\n * @module ui/notification/notification\r\n */\r\n/* globals window */\r\nimport { ContextPlugin } from '@ckeditor/ckeditor5-core';\r\n/**\r\n * The Notification plugin.\r\n *\r\n * This plugin sends a few types of notifications: `success`, `info` and `warning`. The notifications need to be\r\n * handled and displayed by a plugin responsible for showing the UI of the notifications. Using this plugin for dispatching\r\n * notifications makes it possible to switch the notifications UI.\r\n *\r\n * Note that every unhandled and not stopped `warning` notification will be displayed as a system alert.\r\n * See {@link module:ui/notification/notification~Notification#showWarning}.\r\n */\r\nexport default class Notification extends ContextPlugin {\r\n /**\r\n * @inheritDoc\r\n */\r\n static get pluginName() {\r\n return 'Notification';\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n init() {\r\n // Each unhandled and not stopped `show:warning` event is displayed as a system alert.\r\n this.on('show:warning', (evt, data) => {\r\n window.alert(data.message); // eslint-disable-line no-alert\r\n }, { priority: 'lowest' });\r\n }\r\n /**\r\n * Shows a success notification.\r\n *\r\n * By default, it fires the {@link #event:show:success `show:success` event} with the given `data`. The event namespace can be extended\r\n * using the `data.namespace` option. For example:\r\n *\r\n * ```ts\r\n * showSuccess( 'Image is uploaded.', {\r\n * \tnamespace: 'upload:image'\r\n * } );\r\n * ```\r\n *\r\n * will fire the `show:success:upload:image` event.\r\n *\r\n * You can provide the title of the notification:\r\n *\r\n * ```ts\r\n * showSuccess( 'Image is uploaded.', {\r\n * \ttitle: 'Image upload success'\r\n * } );\r\n * ```\r\n *\r\n * @param message The content of the notification.\r\n * @param data Additional data.\r\n * @param data.namespace Additional event namespace.\r\n * @param data.title The title of the notification.\r\n */\r\n showSuccess(message, data = {}) {\r\n this._showNotification({\r\n message,\r\n type: 'success',\r\n namespace: data.namespace,\r\n title: data.title\r\n });\r\n }\r\n /**\r\n * Shows an information notification.\r\n *\r\n * By default, it fires the {@link #event:show:info `show:info` event} with the given `data`. The event namespace can be extended\r\n * using the `data.namespace` option. For example:\r\n *\r\n * ```ts\r\n * showInfo( 'Editor is offline.', {\r\n * \tnamespace: 'editor:status'\r\n * } );\r\n * ```\r\n *\r\n * will fire the `show:info:editor:status` event.\r\n *\r\n * You can provide the title of the notification:\r\n *\r\n * ```ts\r\n * showInfo( 'Editor is offline.', {\r\n * \ttitle: 'Network information'\r\n * } );\r\n * ```\r\n *\r\n * @param message The content of the notification.\r\n * @param data Additional data.\r\n * @param data.namespace Additional event namespace.\r\n * @param data.title The title of the notification.\r\n */\r\n showInfo(message, data = {}) {\r\n this._showNotification({\r\n message,\r\n type: 'info',\r\n namespace: data.namespace,\r\n title: data.title\r\n });\r\n }\r\n /**\r\n * Shows a warning notification.\r\n *\r\n * By default, it fires the {@link #event:show:warning `show:warning` event}\r\n * with the given `data`. The event namespace can be extended using the `data.namespace` option. For example:\r\n *\r\n * ```ts\r\n * showWarning( 'Image upload error.', {\r\n * \tnamespace: 'upload:image'\r\n * } );\r\n * ```\r\n *\r\n * will fire the `show:warning:upload:image` event.\r\n *\r\n * You can provide the title of the notification:\r\n *\r\n * ```ts\r\n * showWarning( 'Image upload error.', {\r\n * \ttitle: 'Upload failed'\r\n * } );\r\n * ```\r\n *\r\n * Note that each unhandled and not stopped `warning` notification will be displayed as a system alert.\r\n * The plugin responsible for displaying warnings should `stop()` the event to prevent displaying it as an alert:\r\n *\r\n * ```ts\r\n * notifications.on( 'show:warning', ( evt, data ) => {\r\n * \t// Do something with the data.\r\n *\r\n * \t// Stop this event to prevent displaying it as an alert.\r\n * \tevt.stop();\r\n * } );\r\n * ```\r\n *\r\n * You can attach many listeners to the same event and `stop()` this event in a listener with a low priority:\r\n *\r\n * ```ts\r\n * notifications.on( 'show:warning', ( evt, data ) => {\r\n * \t// Show the warning in the UI, but do not stop it.\r\n * } );\r\n *\r\n * notifications.on( 'show:warning', ( evt, data ) => {\r\n * \t// Log the warning to some error tracker.\r\n *\r\n * \t// Stop this event to prevent displaying it as an alert.\r\n * \tevt.stop();\r\n * }, { priority: 'low' } );\r\n * ```\r\n *\r\n * @param message The content of the notification.\r\n * @param data Additional data.\r\n * @param data.namespace Additional event namespace.\r\n * @param data.title The title of the notification.\r\n */\r\n showWarning(message, data = {}) {\r\n this._showNotification({\r\n message,\r\n type: 'warning',\r\n namespace: data.namespace,\r\n title: data.title\r\n });\r\n }\r\n /**\r\n * Fires the `show` event with the specified type, namespace and message.\r\n *\r\n * @param data The message data.\r\n * @param data.message The content of the notification.\r\n * @param data.type The type of the message.\r\n * @param data.namespace Additional event namespace.\r\n * @param data.title The title of the notification.\r\n */\r\n _showNotification(data) {\r\n const event = data.namespace ?\r\n `show:${data.type}:${data.namespace}` :\r\n `show:${data.type}`;\r\n this.fire(event, {\r\n message: data.message,\r\n type: data.type,\r\n title: data.title || ''\r\n });\r\n }\r\n}\r\n","/**\r\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\r\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\r\n */\r\n/**\r\n * @module ui/model\r\n */\r\nimport { ObservableMixin } from '@ckeditor/ckeditor5-utils';\r\nimport { extend } from 'lodash-es';\r\n/**\r\n * The base MVC model class.\r\n */\r\nexport default class Model extends ObservableMixin() {\r\n /**\r\n * Creates a new Model instance.\r\n *\r\n * @param attributes The model state attributes to be defined during the instance creation.\r\n * @param properties The (out of state) properties to be appended to the instance during creation.\r\n */\r\n constructor(attributes, properties) {\r\n super();\r\n // Extend this instance with the additional (out of state) properties.\r\n if (properties) {\r\n extend(this, properties);\r\n }\r\n // Initialize the attributes.\r\n if (attributes) {\r\n this.set(attributes);\r\n }\r\n }\r\n}\r\n","export default \"
\";","import api from \"!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../css-loader/dist/cjs.js!../../../../../postcss-loader/dist/cjs.js??ruleSet[1].rules[4].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 \"!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../css-loader/dist/cjs.js!../../../../../postcss-loader/dist/cjs.js??ruleSet[1].rules[4].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 || {};","/**\r\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\r\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\r\n */\r\n/**\r\n * @module ui/panel/balloon/contextualballoon\r\n */\r\nimport BalloonPanelView from './balloonpanelview';\r\nimport View from '../../view';\r\nimport ButtonView from '../../button/buttonview';\r\nimport { Plugin } from '@ckeditor/ckeditor5-core';\r\nimport { CKEditorError, FocusTracker, Rect, toUnit } from '@ckeditor/ckeditor5-utils';\r\nimport prevIcon from '../../../theme/icons/previous-arrow.svg';\r\nimport nextIcon from '../../../theme/icons/next-arrow.svg';\r\nimport '../../../theme/components/panel/balloonrotator.css';\r\nimport '../../../theme/components/panel/fakepanel.css';\r\nconst toPx = toUnit('px');\r\n/**\r\n * Provides the common contextual balloon for the editor.\r\n *\r\n * The role of this plugin is to unify the contextual balloons logic, simplify views management and help\r\n * avoid the unnecessary complexity of handling multiple {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView}\r\n * instances in the editor.\r\n *\r\n * This plugin allows for creating single or multiple panel stacks.\r\n *\r\n * Each stack may have multiple views, with the one on the top being visible. When the visible view is removed from the stack,\r\n * the previous view becomes visible.\r\n *\r\n * It might be useful to implement nested navigation in a balloon. For instance, a toolbar view may contain a link button.\r\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\r\n * is displayed. When you finish editing the link and close (remove) the link view, the toolbar view is visible again.\r\n *\r\n * However, there are cases when there are multiple independent balloons to be displayed, for instance, if the selection\r\n * is inside two inline comments at the same time. For such cases, you can create two independent panel stacks.\r\n * The contextual balloon plugin will create a navigation bar to let the users switch between these panel stacks using the \"Next\"\r\n * and \"Previous\" buttons.\r\n *\r\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\r\n * panels in any stack, the balloon panel will be hidden.\r\n *\r\n * **Note**: To force the balloon panel to show only one view, even if there are other stacks, use the `singleViewMode=true` option\r\n * when {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon#add adding} a view to a panel.\r\n *\r\n * From the implementation point of view, the contextual ballon plugin is reusing a single\r\n * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView} instance to display multiple contextual balloon\r\n * panels in the editor. It also creates a special {@link module:ui/panel/balloon/contextualballoon~RotatorView rotator view},\r\n * used to manage multiple panel stacks. Rotator view is a child of the balloon panel view and the parent of the specific\r\n * view you want to display. If there is more than one panel stack to be displayed, the rotator view will add a\r\n * navigation bar. If there is only one stack, the rotator view is transparent (it does not add any UI elements).\r\n */\r\nexport default class ContextualBalloon extends Plugin {\r\n /**\r\n * @inheritDoc\r\n */\r\n static get pluginName() {\r\n return 'ContextualBalloon';\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n constructor(editor) {\r\n super(editor);\r\n /**\r\n * The map of views and their stacks.\r\n */\r\n this._viewToStack = new Map();\r\n /**\r\n * The map of IDs and stacks.\r\n */\r\n this._idToStack = new Map();\r\n /**\r\n * The common balloon panel view.\r\n */\r\n this._view = null;\r\n /**\r\n * Rotator view embedded in the contextual balloon.\r\n * Displays the currently visible view in the balloon and provides navigation for switching stacks.\r\n */\r\n this._rotatorView = null;\r\n /**\r\n * Displays fake panels under the balloon panel view when multiple stacks are added to the balloon.\r\n */\r\n this._fakePanelsView = null;\r\n this.positionLimiter = () => {\r\n const view = this.editor.editing.view;\r\n const viewDocument = view.document;\r\n const editableElement = viewDocument.selection.editableElement;\r\n if (editableElement) {\r\n return view.domConverter.mapViewToDom(editableElement.root);\r\n }\r\n return null;\r\n };\r\n this.set('visibleView', null);\r\n this.set('_numberOfStacks', 0);\r\n this.set('_singleViewMode', false);\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n destroy() {\r\n super.destroy();\r\n if (this._view) {\r\n this._view.destroy();\r\n }\r\n if (this._rotatorView) {\r\n this._rotatorView.destroy();\r\n }\r\n if (this._fakePanelsView) {\r\n this._fakePanelsView.destroy();\r\n }\r\n }\r\n /**\r\n * The common balloon panel view.\r\n */\r\n get view() {\r\n if (!this._view) {\r\n this._createPanelView();\r\n }\r\n return this._view;\r\n }\r\n /**\r\n * Returns `true` when the given view is in one of the stacks. Otherwise returns `false`.\r\n */\r\n hasView(view) {\r\n return Array.from(this._viewToStack.keys()).includes(view);\r\n }\r\n /**\r\n * Adds a new view to the stack and makes it visible if the current stack is visible\r\n * or it is the first view in the balloon.\r\n *\r\n * @param data The configuration of the view.\r\n * @param data.stackId The ID of the stack that the view is added to. Defaults to `'main'`.\r\n * @param data.view The content of the balloon.\r\n * @param data.position Positioning options.\r\n * @param data.balloonClassName An additional CSS class added to the {@link #view balloon} when visible.\r\n * @param data.withArrow Whether the {@link #view balloon} should be rendered with an arrow. Defaults to `true`.\r\n * @param data.singleViewMode Whether the view should be the only visible view even if other stacks were added. Defaults to `false`.\r\n */\r\n add(data) {\r\n if (!this._view) {\r\n this._createPanelView();\r\n }\r\n if (this.hasView(data.view)) {\r\n /**\r\n * Trying to add configuration of the same view more than once.\r\n *\r\n * @error contextualballoon-add-view-exist\r\n */\r\n throw new CKEditorError('contextualballoon-add-view-exist', [this, data]);\r\n }\r\n const stackId = data.stackId || 'main';\r\n // If new stack is added, creates it and show view from this stack.\r\n if (!this._idToStack.has(stackId)) {\r\n this._idToStack.set(stackId, new Map([[data.view, data]]));\r\n this._viewToStack.set(data.view, this._idToStack.get(stackId));\r\n this._numberOfStacks = this._idToStack.size;\r\n if (!this._visibleStack || data.singleViewMode) {\r\n this.showStack(stackId);\r\n }\r\n return;\r\n }\r\n const stack = this._idToStack.get(stackId);\r\n if (data.singleViewMode) {\r\n this.showStack(stackId);\r\n }\r\n // Add new view to the stack.\r\n stack.set(data.view, data);\r\n this._viewToStack.set(data.view, stack);\r\n // And display it if is added to the currently visible stack.\r\n if (stack === this._visibleStack) {\r\n this._showView(data);\r\n }\r\n }\r\n /**\r\n * Removes the given view from the stack. If the removed view was visible,\r\n * the view preceding it in the stack will become visible instead.\r\n * When there is no view in the stack, the next stack will be displayed.\r\n * When there are no more stacks, the balloon will hide.\r\n *\r\n * @param view A view to be removed from the balloon.\r\n */\r\n remove(view) {\r\n if (!this.hasView(view)) {\r\n /**\r\n * Trying to remove the configuration of the view not defined in the stack.\r\n *\r\n * @error contextualballoon-remove-view-not-exist\r\n */\r\n throw new CKEditorError('contextualballoon-remove-view-not-exist', [this, view]);\r\n }\r\n const stack = this._viewToStack.get(view);\r\n if (this._singleViewMode && this.visibleView === view) {\r\n this._singleViewMode = false;\r\n }\r\n // When visible view will be removed we need to show a preceding view or next stack\r\n // if a view is the only view in the stack.\r\n if (this.visibleView === view) {\r\n if (stack.size === 1) {\r\n if (this._idToStack.size > 1) {\r\n this._showNextStack();\r\n }\r\n else {\r\n this.view.hide();\r\n this.visibleView = null;\r\n this._rotatorView.hideView();\r\n }\r\n }\r\n else {\r\n this._showView(Array.from(stack.values())[stack.size - 2]);\r\n }\r\n }\r\n if (stack.size === 1) {\r\n this._idToStack.delete(this._getStackId(stack));\r\n this._numberOfStacks = this._idToStack.size;\r\n }\r\n else {\r\n stack.delete(view);\r\n }\r\n this._viewToStack.delete(view);\r\n }\r\n /**\r\n * Updates the position of the balloon using the position data of the first visible view in the stack.\r\n * When new position data is given, the position data of the currently visible view will be updated.\r\n *\r\n * @param position Position options.\r\n */\r\n updatePosition(position) {\r\n if (position) {\r\n this._visibleStack.get(this.visibleView).position = position;\r\n }\r\n this.view.pin(this._getBalloonPosition());\r\n this._fakePanelsView.updatePosition();\r\n }\r\n /**\r\n * Shows the last view from the stack of a given ID.\r\n */\r\n showStack(id) {\r\n this.visibleStack = id;\r\n const stack = this._idToStack.get(id);\r\n if (!stack) {\r\n /**\r\n * Trying to show a stack that does not exist.\r\n *\r\n * @error contextualballoon-showstack-stack-not-exist\r\n */\r\n throw new CKEditorError('contextualballoon-showstack-stack-not-exist', this);\r\n }\r\n if (this._visibleStack === stack) {\r\n return;\r\n }\r\n this._showView(Array.from(stack.values()).pop());\r\n }\r\n /**\r\n * Initializes view instances.\r\n */\r\n _createPanelView() {\r\n this._view = new BalloonPanelView(this.editor.locale);\r\n this.editor.ui.view.body.add(this._view);\r\n this.editor.ui.focusTracker.add(this._view.element);\r\n this._rotatorView = this._createRotatorView();\r\n this._fakePanelsView = this._createFakePanelsView();\r\n }\r\n /**\r\n * Returns the stack of the currently visible view.\r\n */\r\n get _visibleStack() {\r\n return this._viewToStack.get(this.visibleView);\r\n }\r\n /**\r\n * Returns the ID of the given stack.\r\n */\r\n _getStackId(stack) {\r\n const entry = Array.from(this._idToStack.entries()).find(entry => entry[1] === stack);\r\n return entry[0];\r\n }\r\n /**\r\n * Shows the last view from the next stack.\r\n */\r\n _showNextStack() {\r\n const stacks = Array.from(this._idToStack.values());\r\n let nextIndex = stacks.indexOf(this._visibleStack) + 1;\r\n if (!stacks[nextIndex]) {\r\n nextIndex = 0;\r\n }\r\n this.showStack(this._getStackId(stacks[nextIndex]));\r\n }\r\n /**\r\n * Shows the last view from the previous stack.\r\n */\r\n _showPrevStack() {\r\n const stacks = Array.from(this._idToStack.values());\r\n let nextIndex = stacks.indexOf(this._visibleStack) - 1;\r\n if (!stacks[nextIndex]) {\r\n nextIndex = stacks.length - 1;\r\n }\r\n this.showStack(this._getStackId(stacks[nextIndex]));\r\n }\r\n /**\r\n * Creates a rotator view.\r\n */\r\n _createRotatorView() {\r\n const view = new RotatorView(this.editor.locale);\r\n const t = this.editor.locale.t;\r\n this.view.content.add(view);\r\n // Hide navigation when there is only a one stack & not in single view mode.\r\n view.bind('isNavigationVisible').to(this, '_numberOfStacks', this, '_singleViewMode', (value, isSingleViewMode) => {\r\n return !isSingleViewMode && value > 1;\r\n });\r\n // Update balloon position after toggling navigation.\r\n view.on('change:isNavigationVisible', () => (this.updatePosition()), { priority: 'low' });\r\n // Update stacks counter value.\r\n view.bind('counter').to(this, 'visibleView', this, '_numberOfStacks', (visibleView, numberOfStacks) => {\r\n if (numberOfStacks < 2) {\r\n return '';\r\n }\r\n const current = Array.from(this._idToStack.values()).indexOf(this._visibleStack) + 1;\r\n return t('%0 of %1', [current, numberOfStacks]);\r\n });\r\n view.buttonNextView.on('execute', () => {\r\n // When current view has a focus then move focus to the editable before removing it,\r\n // otherwise editor will lost focus.\r\n if (view.focusTracker.isFocused) {\r\n this.editor.editing.view.focus();\r\n }\r\n this._showNextStack();\r\n });\r\n view.buttonPrevView.on('execute', () => {\r\n // When current view has a focus then move focus to the editable before removing it,\r\n // otherwise editor will lost focus.\r\n if (view.focusTracker.isFocused) {\r\n this.editor.editing.view.focus();\r\n }\r\n this._showPrevStack();\r\n });\r\n return view;\r\n }\r\n /**\r\n * Creates a fake panels view.\r\n */\r\n _createFakePanelsView() {\r\n const view = new FakePanelsView(this.editor.locale, this.view);\r\n view.bind('numberOfPanels').to(this, '_numberOfStacks', this, '_singleViewMode', (number, isSingleViewMode) => {\r\n const showPanels = !isSingleViewMode && number >= 2;\r\n return showPanels ? Math.min(number - 1, 2) : 0;\r\n });\r\n view.listenTo(this.view, 'change:top', () => view.updatePosition());\r\n view.listenTo(this.view, 'change:left', () => view.updatePosition());\r\n this.editor.ui.view.body.add(view);\r\n return view;\r\n }\r\n /**\r\n * Sets the view as the content of the balloon and attaches the balloon using position\r\n * options of the first view.\r\n *\r\n * @param data Configuration.\r\n * @param data.view The view to show in the balloon.\r\n * @param data.balloonClassName Additional class name which will be added to the {@link #view balloon}.\r\n * @param data.withArrow Whether the {@link #view balloon} should be rendered with an arrow.\r\n */\r\n _showView({ view, balloonClassName = '', withArrow = true, singleViewMode = false }) {\r\n this.view.class = balloonClassName;\r\n this.view.withArrow = withArrow;\r\n this._rotatorView.showView(view);\r\n this.visibleView = view;\r\n this.view.pin(this._getBalloonPosition());\r\n this._fakePanelsView.updatePosition();\r\n if (singleViewMode) {\r\n this._singleViewMode = true;\r\n }\r\n }\r\n /**\r\n * Returns position options of the last view in the stack.\r\n * This keeps the balloon in the same position when the view is changed.\r\n */\r\n _getBalloonPosition() {\r\n let position = Array.from(this._visibleStack.values()).pop().position;\r\n if (position) {\r\n // Use the default limiter if none has been specified.\r\n if (!position.limiter) {\r\n // Don't modify the original options object.\r\n position = Object.assign({}, position, {\r\n limiter: this.positionLimiter\r\n });\r\n }\r\n // Don't modify the original options object.\r\n position = Object.assign({}, position, {\r\n viewportOffsetConfig: this.editor.ui.viewportOffset\r\n });\r\n }\r\n return position;\r\n }\r\n}\r\n/**\r\n * Rotator view is a helper class for the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon ContextualBalloon}.\r\n * It is used for displaying the last view from the current stack and providing navigation buttons for switching stacks.\r\n * See the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon ContextualBalloon} documentation to learn more.\r\n */\r\nexport class RotatorView extends View {\r\n /**\r\n * @inheritDoc\r\n */\r\n constructor(locale) {\r\n super(locale);\r\n const t = locale.t;\r\n const bind = this.bindTemplate;\r\n this.set('isNavigationVisible', true);\r\n this.focusTracker = new FocusTracker();\r\n this.buttonPrevView = this._createButtonView(t('Previous'), prevIcon);\r\n this.buttonNextView = this._createButtonView(t('Next'), nextIcon);\r\n this.content = this.createCollection();\r\n this.setTemplate({\r\n tag: 'div',\r\n attributes: {\r\n class: [\r\n 'ck',\r\n 'ck-balloon-rotator'\r\n ],\r\n 'z-index': '-1'\r\n },\r\n children: [\r\n {\r\n tag: 'div',\r\n attributes: {\r\n class: [\r\n 'ck-balloon-rotator__navigation',\r\n bind.to('isNavigationVisible', value => value ? '' : 'ck-hidden')\r\n ]\r\n },\r\n children: [\r\n this.buttonPrevView,\r\n {\r\n tag: 'span',\r\n attributes: {\r\n class: [\r\n 'ck-balloon-rotator__counter'\r\n ]\r\n },\r\n children: [\r\n {\r\n text: bind.to('counter')\r\n }\r\n ]\r\n },\r\n this.buttonNextView\r\n ]\r\n },\r\n {\r\n tag: 'div',\r\n attributes: {\r\n class: 'ck-balloon-rotator__content'\r\n },\r\n children: this.content\r\n }\r\n ]\r\n });\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n render() {\r\n super.render();\r\n this.focusTracker.add(this.element);\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n destroy() {\r\n super.destroy();\r\n this.focusTracker.destroy();\r\n }\r\n /**\r\n * Shows a given view.\r\n *\r\n * @param view The view to show.\r\n */\r\n showView(view) {\r\n this.hideView();\r\n this.content.add(view);\r\n }\r\n /**\r\n * Hides the currently displayed view.\r\n */\r\n hideView() {\r\n this.content.clear();\r\n }\r\n /**\r\n * Creates a navigation button view.\r\n *\r\n * @param label The button label.\r\n * @param icon The button icon.\r\n */\r\n _createButtonView(label, icon) {\r\n const view = new ButtonView(this.locale);\r\n view.set({\r\n label,\r\n icon,\r\n tooltip: true\r\n });\r\n return view;\r\n }\r\n}\r\n/**\r\n * Displays additional layers under the balloon when multiple stacks are added to the balloon.\r\n */\r\nclass FakePanelsView extends View {\r\n /**\r\n * @inheritDoc\r\n */\r\n constructor(locale, balloonPanelView) {\r\n super(locale);\r\n const bind = this.bindTemplate;\r\n this.set('top', 0);\r\n this.set('left', 0);\r\n this.set('height', 0);\r\n this.set('width', 0);\r\n this.set('numberOfPanels', 0);\r\n this.content = this.createCollection();\r\n this._balloonPanelView = balloonPanelView;\r\n this.setTemplate({\r\n tag: 'div',\r\n attributes: {\r\n class: [\r\n 'ck-fake-panel',\r\n bind.to('numberOfPanels', number => number ? '' : 'ck-hidden')\r\n ],\r\n style: {\r\n top: bind.to('top', toPx),\r\n left: bind.to('left', toPx),\r\n width: bind.to('width', toPx),\r\n height: bind.to('height', toPx)\r\n }\r\n },\r\n children: this.content\r\n });\r\n this.on('change:numberOfPanels', (evt, name, next, prev) => {\r\n if (next > prev) {\r\n this._addPanels(next - prev);\r\n }\r\n else {\r\n this._removePanels(prev - next);\r\n }\r\n this.updatePosition();\r\n });\r\n }\r\n _addPanels(number) {\r\n while (number--) {\r\n const view = new View();\r\n view.setTemplate({ tag: 'div' });\r\n this.content.add(view);\r\n this.registerChild(view);\r\n }\r\n }\r\n _removePanels(number) {\r\n while (number--) {\r\n const view = this.content.last;\r\n this.content.remove(view);\r\n this.deregisterChild(view);\r\n view.destroy();\r\n }\r\n }\r\n /**\r\n * Updates coordinates of fake panels.\r\n */\r\n updatePosition() {\r\n if (this.numberOfPanels) {\r\n const { top, left } = this._balloonPanelView;\r\n const { width, height } = new Rect(this._balloonPanelView.element);\r\n Object.assign(this, { top, left, width, height });\r\n }\r\n }\r\n}\r\n","export default \"
\";","import api from \"!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../css-loader/dist/cjs.js!../../../../../postcss-loader/dist/cjs.js??ruleSet[1].rules[4].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 || {};","/**\r\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\r\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\r\n */\r\n/**\r\n * @module ui/panel/sticky/stickypanelview\r\n */\r\nimport View from '../../view';\r\nimport Template from '../../template';\r\nimport { global, toUnit, Rect } from '@ckeditor/ckeditor5-utils';\r\n// @if CK_DEBUG_STICKYPANEL // const {\r\n// @if CK_DEBUG_STICKYPANEL // \tdefault: RectDrawer,\r\n// @if CK_DEBUG_STICKYPANEL // \tdiagonalStylesBlack\r\n// @if CK_DEBUG_STICKYPANEL // } = require( '@ckeditor/ckeditor5-utils/tests/_utils/rectdrawer' );\r\nimport '../../../theme/components/panel/stickypanel.css';\r\nconst toPx = toUnit('px');\r\n/**\r\n * The sticky panel view class.\r\n */\r\nexport default class StickyPanelView extends View {\r\n /**\r\n * @inheritDoc\r\n */\r\n constructor(locale) {\r\n super(locale);\r\n const bind = this.bindTemplate;\r\n this.set('isActive', false);\r\n this.set('isSticky', false);\r\n this.set('limiterElement', null);\r\n this.set('limiterBottomOffset', 50);\r\n this.set('viewportTopOffset', 0);\r\n this.set('_marginLeft', null);\r\n this.set('_isStickyToTheBottomOfLimiter', false);\r\n this.set('_stickyTopOffset', null);\r\n this.set('_stickyBottomOffset', null);\r\n this.content = this.createCollection();\r\n this._contentPanelPlaceholder = new Template({\r\n tag: 'div',\r\n attributes: {\r\n class: [\r\n 'ck',\r\n 'ck-sticky-panel__placeholder'\r\n ],\r\n style: {\r\n display: bind.to('isSticky', isSticky => isSticky ? 'block' : 'none'),\r\n height: bind.to('isSticky', isSticky => {\r\n return isSticky ? toPx(this._contentPanelRect.height) : null;\r\n })\r\n }\r\n }\r\n }).render();\r\n this._contentPanel = new Template({\r\n tag: 'div',\r\n attributes: {\r\n class: [\r\n 'ck',\r\n 'ck-sticky-panel__content',\r\n // Toggle class of the panel when \"sticky\" state changes in the view.\r\n bind.if('isSticky', 'ck-sticky-panel__content_sticky'),\r\n bind.if('_isStickyToTheBottomOfLimiter', 'ck-sticky-panel__content_sticky_bottom-limit')\r\n ],\r\n style: {\r\n width: bind.to('isSticky', isSticky => {\r\n return isSticky ? toPx(this._contentPanelPlaceholder.getBoundingClientRect().width) : null;\r\n }),\r\n top: bind.to('_stickyTopOffset', value => value ? toPx(value) : value),\r\n bottom: bind.to('_stickyBottomOffset', value => value ? toPx(value) : value),\r\n marginLeft: bind.to('_marginLeft')\r\n }\r\n },\r\n children: this.content\r\n }).render();\r\n this.setTemplate({\r\n tag: 'div',\r\n attributes: {\r\n class: [\r\n 'ck',\r\n 'ck-sticky-panel'\r\n ]\r\n },\r\n children: [\r\n this._contentPanelPlaceholder,\r\n this._contentPanel\r\n ]\r\n });\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n render() {\r\n super.render();\r\n // Check if the panel should go into the sticky state immediately.\r\n this.checkIfShouldBeSticky();\r\n // Update sticky state of the panel as the window and ancestors are being scrolled.\r\n this.listenTo(global.document, 'scroll', () => {\r\n this.checkIfShouldBeSticky();\r\n }, { useCapture: true });\r\n // Synchronize with `model.isActive` because sticking an inactive panel is pointless.\r\n this.listenTo(this, 'change:isActive', () => {\r\n this.checkIfShouldBeSticky();\r\n });\r\n }\r\n /**\r\n * Analyzes the environment to decide whether the panel should be sticky or not.\r\n * Then handles the positioning of the panel.\r\n */\r\n checkIfShouldBeSticky() {\r\n // @if CK_DEBUG_STICKYPANEL // RectDrawer.clear();\r\n if (!this.limiterElement || !this.isActive) {\r\n this._unstick();\r\n return;\r\n }\r\n const limiterRect = new Rect(this.limiterElement);\r\n let visibleLimiterRect = limiterRect.getVisible();\r\n if (visibleLimiterRect) {\r\n const windowRect = new Rect(global.window);\r\n windowRect.top += this.viewportTopOffset;\r\n windowRect.height -= this.viewportTopOffset;\r\n visibleLimiterRect = visibleLimiterRect.getIntersection(windowRect);\r\n }\r\n // @if CK_DEBUG_STICKYPANEL // if ( visibleLimiterRect ) {\r\n // @if CK_DEBUG_STICKYPANEL // \tRectDrawer.draw( visibleLimiterRect,\r\n // @if CK_DEBUG_STICKYPANEL // \t\t{ outlineWidth: '3px', opacity: '.8', outlineColor: 'red', outlineOffset: '-3px' },\r\n // @if CK_DEBUG_STICKYPANEL // \t\t'Visible anc'\r\n // @if CK_DEBUG_STICKYPANEL // \t);\r\n // @if CK_DEBUG_STICKYPANEL // }\r\n // @if CK_DEBUG_STICKYPANEL //\r\n // @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( limiterRect,\r\n // @if CK_DEBUG_STICKYPANEL // \t{ outlineWidth: '3px', opacity: '.8', outlineColor: 'green', outlineOffset: '-3px' },\r\n // @if CK_DEBUG_STICKYPANEL // \t'Limiter'\r\n // @if CK_DEBUG_STICKYPANEL // );\r\n // Stick the panel only if\r\n // * the limiter's ancestors are intersecting with each other so that some of their rects are visible,\r\n // * and the limiter's top edge is above the visible ancestors' top edge.\r\n if (visibleLimiterRect && limiterRect.top < visibleLimiterRect.top) {\r\n // @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( visibleLimiterRect,\r\n // @if CK_DEBUG_STICKYPANEL // \t{ outlineWidth: '3px', opacity: '.8', outlineColor: 'fuchsia', outlineOffset: '-3px',\r\n // @if CK_DEBUG_STICKYPANEL // \t\tbackgroundColor: 'rgba(255, 0, 255, .3)' },\r\n // @if CK_DEBUG_STICKYPANEL // \t'Visible limiter'\r\n // @if CK_DEBUG_STICKYPANEL // );\r\n const visibleLimiterTop = visibleLimiterRect.top;\r\n // Check if there's a change the panel can be sticky to the bottom of the limiter.\r\n if (visibleLimiterTop + this._contentPanelRect.height + this.limiterBottomOffset > visibleLimiterRect.bottom) {\r\n const stickyBottomOffset = Math.max(limiterRect.bottom - visibleLimiterRect.bottom, 0) + this.limiterBottomOffset;\r\n // @if CK_DEBUG_STICKYPANEL // const stickyBottomOffsetRect = new Rect( {\r\n // @if CK_DEBUG_STICKYPANEL // \ttop: limiterRect.bottom - stickyBottomOffset, left: 0, right: 2000,\r\n // @if CK_DEBUG_STICKYPANEL // \tbottom: limiterRect.bottom - stickyBottomOffset, width: 2000, height: 1\r\n // @if CK_DEBUG_STICKYPANEL // } );\r\n // @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( stickyBottomOffsetRect,\r\n // @if CK_DEBUG_STICKYPANEL // \t{ outlineWidth: '1px', opacity: '.8', outlineColor: 'black' },\r\n // @if CK_DEBUG_STICKYPANEL // \t'Sticky bottom offset'\r\n // @if CK_DEBUG_STICKYPANEL // );\r\n // Check if sticking the panel to the bottom of the limiter does not cause it to suddenly\r\n // move upwards if there's not enough space for it.\r\n if (limiterRect.bottom - stickyBottomOffset > limiterRect.top + this._contentPanelRect.height) {\r\n this._stickToBottomOfLimiter(stickyBottomOffset);\r\n }\r\n else {\r\n this._unstick();\r\n }\r\n }\r\n else {\r\n if (this._contentPanelRect.height + this.limiterBottomOffset < limiterRect.height) {\r\n this._stickToTopOfAncestors(visibleLimiterTop);\r\n }\r\n else {\r\n this._unstick();\r\n }\r\n }\r\n }\r\n else {\r\n this._unstick();\r\n }\r\n // @if CK_DEBUG_STICKYPANEL // console.clear();\r\n // @if CK_DEBUG_STICKYPANEL // console.log( 'isSticky', this.isSticky );\r\n // @if CK_DEBUG_STICKYPANEL // console.log( '_isStickyToTheBottomOfLimiter', this._isStickyToTheBottomOfLimiter );\r\n // @if CK_DEBUG_STICKYPANEL // console.log( '_stickyTopOffset', this._stickyTopOffset );\r\n // @if CK_DEBUG_STICKYPANEL // console.log( '_stickyBottomOffset', this._stickyBottomOffset );\r\n // @if CK_DEBUG_STICKYPANEL // if ( visibleLimiterRect ) {\r\n // @if CK_DEBUG_STICKYPANEL // \tRectDrawer.draw( visibleLimiterRect,\r\n // @if CK_DEBUG_STICKYPANEL // \t\t{ ...diagonalStylesBlack,\r\n // @if CK_DEBUG_STICKYPANEL // \t\t\toutlineWidth: '3px', opacity: '.8', outlineColor: 'orange', outlineOffset: '-3px',\r\n // @if CK_DEBUG_STICKYPANEL // \t\t\tbackgroundColor: 'rgba(0, 0, 255, .2)' },\r\n // @if CK_DEBUG_STICKYPANEL // \t\t'visibleLimiterRect'\r\n // @if CK_DEBUG_STICKYPANEL // \t);\r\n // @if CK_DEBUG_STICKYPANEL // }\r\n }\r\n /**\r\n * Sticks the panel at the given CSS `top` offset.\r\n *\r\n * @private\r\n * @param topOffset\r\n */\r\n _stickToTopOfAncestors(topOffset) {\r\n this.isSticky = true;\r\n this._isStickyToTheBottomOfLimiter = false;\r\n this._stickyTopOffset = topOffset;\r\n this._stickyBottomOffset = null;\r\n this._marginLeft = toPx(-global.window.scrollX);\r\n }\r\n /**\r\n * Sticks the panel at the bottom of the limiter with a given CSS `bottom` offset.\r\n *\r\n * @private\r\n * @param stickyBottomOffset\r\n */\r\n _stickToBottomOfLimiter(stickyBottomOffset) {\r\n this.isSticky = true;\r\n this._isStickyToTheBottomOfLimiter = true;\r\n this._stickyTopOffset = null;\r\n this._stickyBottomOffset = stickyBottomOffset;\r\n this._marginLeft = toPx(-global.window.scrollX);\r\n }\r\n /**\r\n * Unsticks the panel putting it back to its original position.\r\n *\r\n * @private\r\n */\r\n _unstick() {\r\n this.isSticky = false;\r\n this._isStickyToTheBottomOfLimiter = false;\r\n this._stickyTopOffset = null;\r\n this._stickyBottomOffset = null;\r\n this._marginLeft = null;\r\n }\r\n /**\r\n * Returns the bounding rect of the {@link #_contentPanel}.\r\n *\r\n * @private\r\n */\r\n get _contentPanelRect() {\r\n return new Rect(this._contentPanel);\r\n }\r\n}\r\n","/**\r\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\r\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\r\n */\r\n/**\r\n * @module ui/search/text/searchtextqueryview\r\n */\r\nimport ButtonView from '../../button/buttonview';\r\nimport IconView from '../../icon/iconview';\r\nimport LabeledFieldView from '../../labeledfield/labeledfieldview';\r\nimport { createLabeledInputText } from '../../labeledfield/utils';\r\nimport { icons } from '@ckeditor/ckeditor5-core';\r\n/**\r\n * A search input field for the {@link module:ui/search/text/searchtextview~SearchTextView} component.\r\n *\r\n * @internal\r\n * @extends module:ui/labeledfield/labeledfieldview~LabeledFieldView\r\n */\r\nexport default class SearchTextQueryView extends LabeledFieldView {\r\n /**\r\n * @inheritDoc\r\n */\r\n constructor(locale, config) {\r\n const t = locale.t;\r\n const viewConfig = Object.assign({}, {\r\n showResetButton: true,\r\n showIcon: true,\r\n creator: createLabeledInputText\r\n }, config);\r\n super(locale, viewConfig.creator);\r\n this.label = config.label;\r\n this._viewConfig = viewConfig;\r\n if (this._viewConfig.showIcon) {\r\n this.iconView = new IconView();\r\n this.iconView.content = icons.loupe;\r\n this.fieldWrapperChildren.add(this.iconView, 0);\r\n this.extendTemplate({\r\n attributes: {\r\n class: 'ck-search__query_with-icon'\r\n }\r\n });\r\n }\r\n if (this._viewConfig.showResetButton) {\r\n this.resetButtonView = new ButtonView(locale);\r\n this.resetButtonView.set({\r\n label: t('Clear'),\r\n icon: icons.cancel,\r\n class: 'ck-search__reset',\r\n isVisible: false,\r\n tooltip: true\r\n });\r\n this.resetButtonView.on('execute', () => {\r\n this.reset();\r\n this.focus();\r\n this.fire('reset');\r\n });\r\n this.resetButtonView.bind('isVisible').to(this.fieldView, 'isEmpty', isEmpty => !isEmpty);\r\n this.fieldWrapperChildren.add(this.resetButtonView);\r\n this.extendTemplate({\r\n attributes: {\r\n class: 'ck-search__query_with-reset'\r\n }\r\n });\r\n }\r\n }\r\n /**\r\n * Resets the search field to its default state.\r\n */\r\n reset() {\r\n this.fieldView.reset();\r\n if (this._viewConfig.showResetButton) {\r\n this.resetButtonView.isVisible = false;\r\n }\r\n }\r\n}\r\n","/**\r\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\r\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\r\n */\r\nimport View from '../view';\r\n/**\r\n * A view displaying an information text related to different states of {@link module:ui/search/text/searchtextview~SearchTextView}.\r\n *\r\n * @internal\r\n */\r\nexport default class SearchInfoView extends View {\r\n /**\r\n * @inheritDoc\r\n */\r\n constructor() {\r\n super();\r\n const bind = this.bindTemplate;\r\n this.set({\r\n isVisible: false,\r\n primaryText: '',\r\n secondaryText: ''\r\n });\r\n this.setTemplate({\r\n tag: 'div',\r\n attributes: {\r\n class: [\r\n 'ck',\r\n 'ck-search__info',\r\n bind.if('isVisible', 'ck-hidden', value => !value)\r\n ],\r\n tabindex: -1\r\n },\r\n children: [\r\n {\r\n tag: 'span',\r\n children: [\r\n {\r\n text: [bind.to('primaryText')]\r\n }\r\n ]\r\n },\r\n {\r\n tag: 'span',\r\n children: [\r\n {\r\n text: [bind.to('secondaryText')]\r\n }\r\n ]\r\n }\r\n ]\r\n });\r\n }\r\n /**\r\n * Focuses the view\r\n */\r\n focus() {\r\n this.element.focus();\r\n }\r\n}\r\n","/**\r\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\r\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\r\n */\r\n/**\r\n * @module ui/search/searchresultsview\r\n */\r\nimport View from '../view';\r\nimport { FocusTracker } from '@ckeditor/ckeditor5-utils';\r\nimport { default as FocusCycler } from '../focuscycler';\r\n/**\r\n * A sub-component of {@link module:ui/search/text/searchtextview~SearchTextView}. It hosts the filtered and the information views.\r\n */\r\nexport default class SearchResultsView extends View {\r\n /**\r\n * @inheritDoc\r\n */\r\n constructor(locale) {\r\n super(locale);\r\n this.children = this.createCollection();\r\n this.focusTracker = new FocusTracker();\r\n this.setTemplate({\r\n tag: 'div',\r\n attributes: {\r\n class: [\r\n 'ck',\r\n 'ck-search__results'\r\n ],\r\n tabindex: -1\r\n },\r\n children: this.children\r\n });\r\n this._focusCycler = new FocusCycler({\r\n focusables: this.children,\r\n focusTracker: this.focusTracker\r\n });\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n render() {\r\n super.render();\r\n for (const child of this.children) {\r\n this.focusTracker.add(child.element);\r\n }\r\n }\r\n /**\r\n * Focuses the view.\r\n */\r\n focus() {\r\n this._focusCycler.focusFirst();\r\n }\r\n /**\r\n * Focuses the first child view.\r\n */\r\n focusFirst() {\r\n this._focusCycler.focusFirst();\r\n }\r\n /**\r\n * Focuses the last child view.\r\n */\r\n focusLast() {\r\n this._focusCycler.focusLast();\r\n }\r\n}\r\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 \"!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../css-loader/dist/cjs.js!../../../../../postcss-loader/dist/cjs.js??ruleSet[1].rules[4].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 || {};","/**\r\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\r\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\r\n */\r\n/**\r\n * @module ui/search/text/searchtextview\r\n*/\r\nimport { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';\r\nimport View from '../../view';\r\nimport { default as SearchTextQueryView } from './searchtextqueryview';\r\nimport SearchInfoView from '../searchinfoview';\r\nimport SearchResultsView from '../searchresultsview';\r\nimport FocusCycler from '../../focuscycler';\r\nimport { escapeRegExp } from 'lodash-es';\r\nimport '../../../theme/components/search/search.css';\r\n/**\r\n * A search component that allows filtering of an arbitrary view based on a search query\r\n * specified by the user in a text field.\r\n *\r\n *```ts\r\n * // This view must specify the `filter()` and `focus()` methods.\r\n * const filteredView = ...;\r\n *\r\n * const searchView = new SearchTextView( locale, {\r\n * \tsearchFieldLabel: 'Search list items',\r\n * \tfilteredView\r\n * } );\r\n *\r\n * view.render();\r\n *\r\n * document.body.append( view.element );\r\n * ```\r\n */\r\nexport default class SearchTextView extends View {\r\n /**\r\n * Creates an instance of the {@link module:ui/search/text/searchtextview~SearchTextView} class.\r\n *\r\n * @param locale The localization services instance.\r\n * @param config Configuration of the view.\r\n */\r\n constructor(locale, config) {\r\n super(locale);\r\n this._config = config;\r\n this.filteredView = config.filteredView;\r\n this.queryView = this._createSearchTextQueryView();\r\n this.focusTracker = new FocusTracker();\r\n this.keystrokes = new KeystrokeHandler();\r\n this.resultsView = new SearchResultsView(locale);\r\n this.children = this.createCollection();\r\n this.focusableChildren = this.createCollection([this.queryView, this.resultsView]);\r\n this.set('isEnabled', true);\r\n this.set('resultsCount', 0);\r\n this.set('totalItemsCount', 0);\r\n if (config.infoView && config.infoView.instance) {\r\n this.infoView = config.infoView.instance;\r\n }\r\n else {\r\n this.infoView = new SearchInfoView();\r\n this._enableDefaultInfoViewBehavior();\r\n this.on('render', () => {\r\n // Initial search that determines if there are any searchable items\r\n // and displays the corresponding info text.\r\n this.search('');\r\n });\r\n }\r\n this.resultsView.children.addMany([this.infoView, this.filteredView]);\r\n this.focusCycler = new FocusCycler({\r\n focusables: this.focusableChildren,\r\n focusTracker: this.focusTracker,\r\n keystrokeHandler: this.keystrokes,\r\n actions: {\r\n // Navigate form fields backwards using the Shift + Tab keystroke.\r\n focusPrevious: 'shift + tab',\r\n // Navigate form fields forwards using the Tab key.\r\n focusNext: 'tab'\r\n }\r\n });\r\n this.on('search', (evt, { resultsCount, totalItemsCount }) => {\r\n this.resultsCount = resultsCount;\r\n this.totalItemsCount = totalItemsCount;\r\n });\r\n this.setTemplate({\r\n tag: 'div',\r\n attributes: {\r\n class: [\r\n 'ck',\r\n 'ck-search',\r\n config.class || null\r\n ],\r\n tabindex: '-1'\r\n },\r\n children: this.children\r\n });\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n render() {\r\n super.render();\r\n this.children.addMany([\r\n this.queryView,\r\n this.resultsView\r\n ]);\r\n const stopPropagation = (data) => data.stopPropagation();\r\n for (const focusableChild of this.focusableChildren) {\r\n this.focusTracker.add(focusableChild.element);\r\n }\r\n // Start listening for the keystrokes coming from #element.\r\n this.keystrokes.listenTo(this.element);\r\n // Since the form is in the dropdown panel which is a child of the toolbar, the toolbar's\r\n // keystroke handler would take over the key management in the URL input. We need to prevent\r\n // this ASAP. Otherwise, the basic caret movement using the arrow keys will be impossible.\r\n this.keystrokes.set('arrowright', stopPropagation);\r\n this.keystrokes.set('arrowleft', stopPropagation);\r\n this.keystrokes.set('arrowup', stopPropagation);\r\n this.keystrokes.set('arrowdown', stopPropagation);\r\n }\r\n /**\r\n * Focuses the {@link #queryView}.\r\n */\r\n focus() {\r\n this.queryView.focus();\r\n }\r\n /**\r\n * Resets the component to its initial state.\r\n */\r\n reset() {\r\n this.queryView.reset();\r\n this.search('');\r\n }\r\n /**\r\n * Searches the {@link #filteredView} for the given query.\r\n *\r\n * @internal\r\n * @param query The search query string.\r\n */\r\n search(query) {\r\n const regExp = query ? new RegExp(escapeRegExp(query), 'ig') : null;\r\n const filteringResults = this.filteredView.filter(regExp);\r\n this.fire('search', { query, ...filteringResults });\r\n }\r\n /**\r\n * Creates a search field view based on configured creator..\r\n */\r\n _createSearchTextQueryView() {\r\n const queryView = new SearchTextQueryView(this.locale, this._config.queryView);\r\n this.listenTo(queryView.fieldView, 'input', () => {\r\n this.search(queryView.fieldView.element.value);\r\n });\r\n queryView.on('reset', () => this.reset());\r\n queryView.bind('isEnabled').to(this);\r\n return queryView;\r\n }\r\n /**\r\n * Initializes the default {@link #infoView} behavior with default text labels when no custom info view\r\n * was specified in the view config.\r\n */\r\n _enableDefaultInfoViewBehavior() {\r\n const t = this.locale.t;\r\n const infoView = this.infoView;\r\n this.on('search', (evt, data) => {\r\n if (!data.resultsCount) {\r\n const defaultTextConfig = this._config.infoView && this._config.infoView.text;\r\n let primaryText, secondaryText;\r\n if (data.totalItemsCount) {\r\n if (defaultTextConfig && defaultTextConfig.notFound) {\r\n primaryText = defaultTextConfig.notFound.primary;\r\n secondaryText = defaultTextConfig.notFound.secondary;\r\n }\r\n else {\r\n primaryText = t('No results found');\r\n secondaryText = '';\r\n }\r\n }\r\n else {\r\n if (defaultTextConfig && defaultTextConfig.noSearchableItems) {\r\n primaryText = defaultTextConfig.noSearchableItems.primary;\r\n secondaryText = defaultTextConfig.noSearchableItems.secondary;\r\n }\r\n else {\r\n primaryText = t('No searchable items');\r\n secondaryText = '';\r\n }\r\n }\r\n infoView.set({\r\n primaryText: normalizeInfoText(primaryText, data),\r\n secondaryText: normalizeInfoText(secondaryText, data),\r\n isVisible: true\r\n });\r\n }\r\n else {\r\n infoView.set({\r\n isVisible: false\r\n });\r\n }\r\n });\r\n function normalizeInfoText(text, { query, resultsCount, totalItemsCount }) {\r\n return typeof text === 'function' ? text(query, resultsCount, totalItemsCount) : text;\r\n }\r\n }\r\n}\r\n","import api from \"!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../css-loader/dist/cjs.js!../../../../../postcss-loader/dist/cjs.js??ruleSet[1].rules[4].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 || {};","/**\r\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\r\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\r\n */\r\n/**\r\n * @module ui/autocomplete/autocompleteview\r\n*/\r\nimport { getOptimalPosition, global, toUnit, Rect } from '@ckeditor/ckeditor5-utils';\r\nimport SearchTextView from '../search/text/searchtextview';\r\nimport '../../theme/components/autocomplete/autocomplete.css';\r\n/**\r\n * The autocomplete component's view class. It extends the {@link module:ui/search/text/searchtextview~SearchTextView} class\r\n * with a floating {@link #resultsView} that shows up when the user starts typing and hides when they blur\r\n * the component.\r\n */\r\nexport default class AutocompleteView extends SearchTextView {\r\n /**\r\n * @inheritDoc\r\n */\r\n constructor(locale, config) {\r\n super(locale, config);\r\n this._config = config;\r\n const toPx = toUnit('px');\r\n this.extendTemplate({\r\n attributes: {\r\n class: ['ck-autocomplete']\r\n }\r\n });\r\n const bindResultsView = this.resultsView.bindTemplate;\r\n this.resultsView.set('isVisible', false);\r\n this.resultsView.set('_position', 's');\r\n this.resultsView.set('_width', 0);\r\n this.resultsView.extendTemplate({\r\n attributes: {\r\n class: [\r\n bindResultsView.if('isVisible', 'ck-hidden', value => !value),\r\n bindResultsView.to('_position', value => `ck-search__results_${value}`)\r\n ],\r\n style: {\r\n width: bindResultsView.to('_width', toPx)\r\n }\r\n }\r\n });\r\n // Update the visibility of the results view when the user focuses or blurs the component.\r\n // This is also integration for the `resetOnBlur` configuration.\r\n this.focusTracker.on('change:isFocused', (evt, name, isFocused) => {\r\n this._updateResultsVisibility();\r\n if (isFocused) {\r\n // Reset the scroll position of the results view whenever the autocomplete reopens.\r\n this.resultsView.element.scrollTop = 0;\r\n }\r\n else if (config.resetOnBlur) {\r\n this.queryView.reset();\r\n }\r\n });\r\n // Update the visibility of the results view when the user types in the query field.\r\n // This is an integration for `queryMinChars` configuration.\r\n // This is an integration for search results changing length and the #resultsView requiring to be repositioned.\r\n this.on('search', () => {\r\n this._updateResultsVisibility();\r\n this._updateResultsViewWidthAndPosition();\r\n });\r\n // Hide the results view when the user presses the ESC key.\r\n this.keystrokes.set('esc', (evt, cancel) => {\r\n this.resultsView.isVisible = false;\r\n cancel();\r\n });\r\n // Update the position of the results view when the user scrolls the page.\r\n // TODO: This needs to be debounced down the road.\r\n this.listenTo(global.document, 'scroll', () => {\r\n this._updateResultsViewWidthAndPosition();\r\n });\r\n // Hide the results when the component becomes disabled.\r\n this.on('change:isEnabled', () => {\r\n this._updateResultsVisibility();\r\n });\r\n // Update the value of the query field when the user selects a result.\r\n this.filteredView.on('execute', (evt, { value }) => {\r\n // Focus the query view first to avoid losing the focus.\r\n this.focus();\r\n // Resetting the view will ensure that the #queryView will update its empty state correctly.\r\n // This prevents bugs related to dynamic labels or auto-grow when re-setting the same value\r\n // to #queryView.fieldView.value (which does not trigger empty state change) to an\r\n // #queryView.fieldView.element that has been changed by the user.\r\n this.reset();\r\n // Update the value of the query field.\r\n this.queryView.fieldView.value = this.queryView.fieldView.element.value = value;\r\n // Finally, hide the results view. The focus has been moved earlier so this is safe.\r\n this.resultsView.isVisible = false;\r\n });\r\n // Update the position and width of the results view when it becomes visible.\r\n this.resultsView.on('change:isVisible', () => {\r\n this._updateResultsViewWidthAndPosition();\r\n });\r\n }\r\n /**\r\n * Updates the position of the results view on demand.\r\n */\r\n _updateResultsViewWidthAndPosition() {\r\n if (!this.resultsView.isVisible) {\r\n return;\r\n }\r\n this.resultsView._width = new Rect(this.queryView.fieldView.element).width;\r\n const optimalResultsPosition = AutocompleteView._getOptimalPosition({\r\n element: this.resultsView.element,\r\n target: this.queryView.element,\r\n fitInViewport: true,\r\n positions: AutocompleteView.defaultResultsPositions\r\n });\r\n // _getOptimalPosition will return null if there is no optimal position found (e.g. target is off the viewport).\r\n this.resultsView._position = optimalResultsPosition ? optimalResultsPosition.name : 's';\r\n }\r\n /**\r\n * Updates the visibility of the results view on demand.\r\n */\r\n _updateResultsVisibility() {\r\n const queryMinChars = typeof this._config.queryMinChars === 'undefined' ? 0 : this._config.queryMinChars;\r\n const queryLength = this.queryView.fieldView.element.value.length;\r\n this.resultsView.isVisible = this.focusTracker.isFocused && this.isEnabled && queryLength >= queryMinChars;\r\n }\r\n}\r\n/**\r\n * Positions for the autocomplete results view. Two positions are defined by default:\r\n * * `s` - below the search field,\r\n * * `n` - above the search field.\r\n */\r\nAutocompleteView.defaultResultsPositions = [\r\n (fieldRect => {\r\n return {\r\n top: fieldRect.bottom,\r\n left: fieldRect.left,\r\n name: 's'\r\n };\r\n }),\r\n ((fieldRect, resultsRect) => {\r\n return {\r\n top: fieldRect.top - resultsRect.height,\r\n left: fieldRect.left,\r\n name: 'n'\r\n };\r\n })\r\n];\r\n/**\r\n * A function used to calculate the optimal position for the dropdown panel.\r\n */\r\nAutocompleteView._getOptimalPosition = getOptimalPosition;\r\n","import api from \"!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../css-loader/dist/cjs.js!../../../../../postcss-loader/dist/cjs.js??ruleSet[1].rules[4].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 \"!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../css-loader/dist/cjs.js!../../../../../postcss-loader/dist/cjs.js??ruleSet[1].rules[4].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 || {};","/**\r\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\r\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\r\n */\r\n/**\r\n * @module ui/toolbar/balloon/balloontoolbar\r\n */\r\nimport ContextualBalloon from '../../panel/balloon/contextualballoon';\r\nimport ToolbarView from '../toolbarview';\r\nimport BalloonPanelView, { generatePositions } from '../../panel/balloon/balloonpanelview';\r\nimport normalizeToolbarConfig from '../normalizetoolbarconfig';\r\nimport { Plugin } from '@ckeditor/ckeditor5-core';\r\nimport { FocusTracker, Rect, ResizeObserver, env, global, toUnit } from '@ckeditor/ckeditor5-utils';\r\nimport { debounce } from 'lodash-es';\r\nconst toPx = toUnit('px');\r\n/**\r\n * The contextual toolbar.\r\n *\r\n * It uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.\r\n */\r\nexport default class BalloonToolbar extends Plugin {\r\n /**\r\n * @inheritDoc\r\n */\r\n static get pluginName() {\r\n return 'BalloonToolbar';\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n static get requires() {\r\n return [ContextualBalloon];\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n constructor(editor) {\r\n super(editor);\r\n /**\r\n * An instance of the resize observer that allows to respond to changes in editable's geometry\r\n * so the toolbar can stay within its boundaries (and group toolbar items that do not fit).\r\n *\r\n * **Note**: Used only when `shouldNotGroupWhenFull` was **not** set in the\r\n * {@link module:core/editor/editorconfig~EditorConfig#balloonToolbar configuration}.\r\n *\r\n * **Note:** Created in {@link #init}.\r\n */\r\n this._resizeObserver = null;\r\n this._balloonConfig = normalizeToolbarConfig(editor.config.get('balloonToolbar'));\r\n this.toolbarView = this._createToolbarView();\r\n this.focusTracker = new FocusTracker();\r\n // Wait for the EditorUI#init. EditableElement is not available before.\r\n editor.ui.once('ready', () => {\r\n this.focusTracker.add(editor.ui.getEditableElement());\r\n this.focusTracker.add(this.toolbarView.element);\r\n });\r\n // Register the toolbar so it becomes available for Alt+F10 and Esc navigation.\r\n editor.ui.addToolbar(this.toolbarView, {\r\n beforeFocus: () => this.show(true),\r\n afterBlur: () => this.hide(),\r\n isContextual: true\r\n });\r\n this._balloon = editor.plugins.get(ContextualBalloon);\r\n this._fireSelectionChangeDebounced = debounce(() => this.fire('_selectionChangeDebounced'), 200);\r\n // The appearance of the BalloonToolbar method is event–driven.\r\n // It is possible to stop the #show event and this prevent the toolbar from showing up.\r\n this.decorate('show');\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n init() {\r\n const editor = this.editor;\r\n const selection = editor.model.document.selection;\r\n // Show/hide the toolbar on editable focus/blur.\r\n this.listenTo(this.focusTracker, 'change:isFocused', (evt, name, isFocused) => {\r\n const isToolbarVisible = this._balloon.visibleView === this.toolbarView;\r\n if (!isFocused && isToolbarVisible) {\r\n this.hide();\r\n }\r\n else if (isFocused) {\r\n this.show();\r\n }\r\n });\r\n // Hide the toolbar when the selection is changed by a direct change or has changed to collapsed.\r\n this.listenTo(selection, 'change:range', (evt, data) => {\r\n if (data.directChange || selection.isCollapsed) {\r\n this.hide();\r\n }\r\n // Fire internal `_selectionChangeDebounced` event to use it for showing\r\n // the toolbar after the selection stops changing.\r\n this._fireSelectionChangeDebounced();\r\n });\r\n // Show the toolbar when the selection stops changing.\r\n this.listenTo(this, '_selectionChangeDebounced', () => {\r\n if (this.editor.editing.view.document.isFocused) {\r\n this.show();\r\n }\r\n });\r\n if (!this._balloonConfig.shouldNotGroupWhenFull) {\r\n this.listenTo(editor, 'ready', () => {\r\n const editableElement = editor.ui.view.editable.element;\r\n // Set #toolbarView's max-width on the initialization and update it on the editable resize.\r\n this._resizeObserver = new ResizeObserver(editableElement, entry => {\r\n // The max-width equals 90% of the editable's width for the best user experience.\r\n // The value keeps the balloon very close to the boundaries of the editable and limits the cases\r\n // when the balloon juts out from the editable element it belongs to.\r\n this.toolbarView.maxWidth = toPx(entry.contentRect.width * .9);\r\n });\r\n });\r\n }\r\n // Listen to the toolbar view and whenever it changes its geometry due to some items being\r\n // grouped or ungrouped, update the position of the balloon because a shorter/longer toolbar\r\n // means the balloon could be pointing at the wrong place. Once updated, the balloon will point\r\n // at the right selection in the content again.\r\n // https://github.com/ckeditor/ckeditor5/issues/6444\r\n this.listenTo(this.toolbarView, 'groupedItemsUpdate', () => {\r\n this._updatePosition();\r\n });\r\n }\r\n /**\r\n * Creates toolbar components based on given configuration.\r\n * This needs to be done when all plugins are ready.\r\n */\r\n afterInit() {\r\n const factory = this.editor.ui.componentFactory;\r\n this.toolbarView.fillFromConfig(this._balloonConfig, factory);\r\n }\r\n /**\r\n * Creates the toolbar view instance.\r\n */\r\n _createToolbarView() {\r\n const t = this.editor.locale.t;\r\n const shouldGroupWhenFull = !this._balloonConfig.shouldNotGroupWhenFull;\r\n const toolbarView = new ToolbarView(this.editor.locale, {\r\n shouldGroupWhenFull,\r\n isFloating: true\r\n });\r\n toolbarView.ariaLabel = t('Editor contextual toolbar');\r\n toolbarView.render();\r\n return toolbarView;\r\n }\r\n /**\r\n * Shows the toolbar and attaches it to the selection.\r\n *\r\n * Fires {@link #event:show} event which can be stopped to prevent the toolbar from showing up.\r\n *\r\n * @param showForCollapsedSelection When set `true`, the toolbar will show despite collapsed selection in the\r\n * editing view.\r\n */\r\n show(showForCollapsedSelection = false) {\r\n const editor = this.editor;\r\n const selection = editor.model.document.selection;\r\n const schema = editor.model.schema;\r\n // Do not add the toolbar to the balloon stack twice.\r\n if (this._balloon.hasView(this.toolbarView)) {\r\n return;\r\n }\r\n // Do not show the toolbar when the selection is collapsed.\r\n if (selection.isCollapsed && !showForCollapsedSelection) {\r\n return;\r\n }\r\n // Do not show the toolbar when there is more than one range in the selection and they fully contain selectable elements.\r\n // See https://github.com/ckeditor/ckeditor5/issues/6443.\r\n if (selectionContainsOnlyMultipleSelectables(selection, schema)) {\r\n return;\r\n }\r\n // Don not show the toolbar when all components inside are disabled\r\n // see https://github.com/ckeditor/ckeditor5-ui/issues/269.\r\n if (Array.from(this.toolbarView.items).every((item) => item.isEnabled !== undefined && !item.isEnabled)) {\r\n return;\r\n }\r\n // Update the toolbar position when the editor ui should be refreshed.\r\n this.listenTo(this.editor.ui, 'update', () => {\r\n this._updatePosition();\r\n });\r\n // Add the toolbar to the common editor contextual balloon.\r\n this._balloon.add({\r\n view: this.toolbarView,\r\n position: this._getBalloonPositionData(),\r\n balloonClassName: 'ck-toolbar-container'\r\n });\r\n }\r\n /**\r\n * Hides the toolbar.\r\n */\r\n hide() {\r\n if (this._balloon.hasView(this.toolbarView)) {\r\n this.stopListening(this.editor.ui, 'update');\r\n this._balloon.remove(this.toolbarView);\r\n }\r\n }\r\n /**\r\n * Returns positioning options for the {@link #_balloon}. They control the way balloon is attached\r\n * to the selection.\r\n */\r\n _getBalloonPositionData() {\r\n const editor = this.editor;\r\n const view = editor.editing.view;\r\n const viewDocument = view.document;\r\n const viewSelection = viewDocument.selection;\r\n // Get direction of the selection.\r\n const isBackward = viewDocument.selection.isBackward;\r\n return {\r\n // Because the target for BalloonPanelView is a Rect (not DOMRange), it's geometry will stay fixed\r\n // as the window scrolls. To let the BalloonPanelView follow such Rect, is must be continuously\r\n // computed and hence, the target is defined as a function instead of a static value.\r\n // https://github.com/ckeditor/ckeditor5-ui/issues/195\r\n target: () => {\r\n const range = isBackward ? viewSelection.getFirstRange() : viewSelection.getLastRange();\r\n const rangeRects = Rect.getDomRangeRects(view.domConverter.viewRangeToDom(range));\r\n // Select the proper range rect depending on the direction of the selection.\r\n if (isBackward) {\r\n return rangeRects[0];\r\n }\r\n else {\r\n // Ditch the zero-width \"orphan\" rect in the next line for the forward selection if there's\r\n // another one preceding it. It is not rendered as a selection by the web browser anyway.\r\n // https://github.com/ckeditor/ckeditor5-ui/issues/308\r\n if (rangeRects.length > 1 && rangeRects[rangeRects.length - 1].width === 0) {\r\n rangeRects.pop();\r\n }\r\n return rangeRects[rangeRects.length - 1];\r\n }\r\n },\r\n positions: this._getBalloonPositions(isBackward)\r\n };\r\n }\r\n /**\r\n * Updates the position of the {@link #_balloon} to make up for changes:\r\n *\r\n * * in the geometry of the selection it is attached to (e.g. the selection moved in the viewport or expanded or shrunk),\r\n * * or the geometry of the balloon toolbar itself (e.g. the toolbar has grouped or ungrouped some items and it is shorter or longer).\r\n */\r\n _updatePosition() {\r\n this._balloon.updatePosition(this._getBalloonPositionData());\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n destroy() {\r\n super.destroy();\r\n this.stopListening();\r\n this._fireSelectionChangeDebounced.cancel();\r\n this.toolbarView.destroy();\r\n this.focusTracker.destroy();\r\n if (this._resizeObserver) {\r\n this._resizeObserver.destroy();\r\n }\r\n }\r\n /**\r\n * Returns toolbar positions for the given direction of the selection.\r\n */\r\n _getBalloonPositions(isBackward) {\r\n const isSafariIniOS = env.isSafari && env.isiOS;\r\n // https://github.com/ckeditor/ckeditor5/issues/7707\r\n const positions = isSafariIniOS ? generatePositions({\r\n // 20px when zoomed out. Less then 20px when zoomed in; the \"radius\" of the native selection handle gets\r\n // smaller as the user zooms in. No less than the default v-offset, though.\r\n heightOffset: Math.max(BalloonPanelView.arrowHeightOffset, Math.round(20 / global.window.visualViewport.scale))\r\n }) : BalloonPanelView.defaultPositions;\r\n return isBackward ? [\r\n positions.northWestArrowSouth,\r\n positions.northWestArrowSouthWest,\r\n positions.northWestArrowSouthEast,\r\n positions.northWestArrowSouthMiddleEast,\r\n positions.northWestArrowSouthMiddleWest,\r\n positions.southWestArrowNorth,\r\n positions.southWestArrowNorthWest,\r\n positions.southWestArrowNorthEast,\r\n positions.southWestArrowNorthMiddleWest,\r\n positions.southWestArrowNorthMiddleEast\r\n ] : [\r\n positions.southEastArrowNorth,\r\n positions.southEastArrowNorthEast,\r\n positions.southEastArrowNorthWest,\r\n positions.southEastArrowNorthMiddleEast,\r\n positions.southEastArrowNorthMiddleWest,\r\n positions.northEastArrowSouth,\r\n positions.northEastArrowSouthEast,\r\n positions.northEastArrowSouthWest,\r\n positions.northEastArrowSouthMiddleEast,\r\n positions.northEastArrowSouthMiddleWest\r\n ];\r\n }\r\n}\r\n/**\r\n * Returns \"true\" when the selection has multiple ranges and each range contains a selectable element\r\n * and nothing else.\r\n */\r\nfunction selectionContainsOnlyMultipleSelectables(selection, schema) {\r\n // It doesn't contain multiple objects if there is only one range.\r\n if (selection.rangeCount === 1) {\r\n return false;\r\n }\r\n return [...selection.getRanges()].every(range => {\r\n const element = range.getContainedElement();\r\n return element && schema.isSelectable(element);\r\n });\r\n}\r\n","import api from \"!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../../../css-loader/dist/cjs.js!../../../../../postcss-loader/dist/cjs.js??ruleSet[1].rules[4].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 || {};","/**\r\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\r\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\r\n */\r\n/**\r\n * @module ui/toolbar/block/blockbuttonview\r\n */\r\nimport ButtonView from '../../button/buttonview';\r\nimport { toUnit } from '@ckeditor/ckeditor5-utils';\r\nimport '../../../theme/components/toolbar/blocktoolbar.css';\r\nconst toPx = toUnit('px');\r\n/**\r\n * The block button view class.\r\n *\r\n * This view represents a button attached next to block element where the selection is anchored.\r\n *\r\n * See {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}.\r\n */\r\nexport default class BlockButtonView extends ButtonView {\r\n /**\r\n * @inheritDoc\r\n */\r\n constructor(locale) {\r\n super(locale);\r\n const bind = this.bindTemplate;\r\n // Hide button on init.\r\n this.isVisible = false;\r\n this.isToggleable = true;\r\n this.set('top', 0);\r\n this.set('left', 0);\r\n this.extendTemplate({\r\n attributes: {\r\n class: 'ck-block-toolbar-button',\r\n style: {\r\n top: bind.to('top', val => toPx(val)),\r\n left: bind.to('left', val => toPx(val))\r\n }\r\n }\r\n });\r\n }\r\n}\r\n","/**\r\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\r\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\r\n */\r\n/**\r\n * @module ui/toolbar/block/blocktoolbar\r\n */\r\n/* global window */\r\nimport { Plugin } from '@ckeditor/ckeditor5-core';\r\nimport { Rect, ResizeObserver, toUnit } from '@ckeditor/ckeditor5-utils';\r\nimport BlockButtonView from './blockbuttonview';\r\nimport BalloonPanelView from '../../panel/balloon/balloonpanelview';\r\nimport ToolbarView, { NESTED_TOOLBAR_ICONS } from '../toolbarview';\r\nimport clickOutsideHandler from '../../bindings/clickoutsidehandler';\r\nimport normalizeToolbarConfig from '../normalizetoolbarconfig';\r\nconst toPx = toUnit('px');\r\n/**\r\n * The block toolbar plugin.\r\n *\r\n * This plugin provides a button positioned next to the block of content where the selection is anchored.\r\n * Upon clicking the button, a dropdown providing access to editor features shows up, as configured in\r\n * {@link module:core/editor/editorconfig~EditorConfig#blockToolbar}.\r\n *\r\n * By default, the button is displayed next to all elements marked in {@link module:engine/model/schema~Schema}\r\n * as `$block` for which the toolbar provides at least one option.\r\n *\r\n * By default, the button is attached so its right boundary is touching the\r\n * {@link module:engine/view/editableelement~EditableElement}:\r\n *\r\n * ```\r\n * __ |\r\n * | || This is a block of content that the\r\n * ¯¯ | button is attached to. This is a\r\n * | block of content that the button is\r\n * | attached to.\r\n * ```\r\n *\r\n * The position of the button can be adjusted using the CSS `transform` property:\r\n *\r\n * ```css\r\n * .ck-block-toolbar-button {\r\n * \ttransform: translateX( -10px );\r\n * }\r\n * ```\r\n *\r\n * ```\r\n * __ |\r\n * | | | This is a block of content that the\r\n * ¯¯ | button is attached to. This is a\r\n * | block of content that the button is\r\n * | attached to.\r\n * ```\r\n *\r\n * **Note**: If you plan to run the editor in a right–to–left (RTL) language, keep in mind the button\r\n * will be attached to the **right** boundary of the editable area. In that case, make sure the\r\n * CSS position adjustment works properly by adding the following styles:\r\n *\r\n * ```css\r\n * .ck[dir=\"rtl\"] .ck-block-toolbar-button {\r\n * \ttransform: translateX( 10px );\r\n * }\r\n * ```\r\n */\r\nexport default class BlockToolbar extends Plugin {\r\n /**\r\n * @inheritDoc\r\n */\r\n static get pluginName() {\r\n return 'BlockToolbar';\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n constructor(editor) {\r\n super(editor);\r\n /**\r\n * An instance of the resize observer that allows to respond to changes in editable's geometry\r\n * so the toolbar can stay within its boundaries (and group toolbar items that do not fit).\r\n *\r\n * **Note**: Used only when `shouldNotGroupWhenFull` was **not** set in the\r\n * {@link module:core/editor/editorconfig~EditorConfig#blockToolbar configuration}.\r\n *\r\n * **Note:** Created in {@link #afterInit}.\r\n */\r\n this._resizeObserver = null;\r\n this._blockToolbarConfig = normalizeToolbarConfig(this.editor.config.get('blockToolbar'));\r\n this.toolbarView = this._createToolbarView();\r\n this.panelView = this._createPanelView();\r\n this.buttonView = this._createButtonView();\r\n // Close the #panelView upon clicking outside of the plugin UI.\r\n clickOutsideHandler({\r\n emitter: this.panelView,\r\n contextElements: [this.panelView.element, this.buttonView.element],\r\n activator: () => this.panelView.isVisible,\r\n callback: () => this._hidePanel()\r\n });\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n init() {\r\n const editor = this.editor;\r\n const t = editor.t;\r\n const editBlockText = t('Click to edit block');\r\n const dragToMoveText = t('Drag to move');\r\n const editBlockLabel = t('Edit block');\r\n const isDragDropBlockToolbarPluginLoaded = editor.plugins.has('DragDropBlockToolbar');\r\n const label = isDragDropBlockToolbarPluginLoaded ? `${editBlockText}\\n${dragToMoveText}` : editBlockLabel;\r\n this.buttonView.label = label;\r\n if (isDragDropBlockToolbarPluginLoaded) {\r\n this.buttonView.element.dataset.ckeTooltipClass = 'ck-tooltip_multi-line';\r\n }\r\n // Hides panel on a direct selection change.\r\n this.listenTo(editor.model.document.selection, 'change:range', (evt, data) => {\r\n if (data.directChange) {\r\n this._hidePanel();\r\n }\r\n });\r\n this.listenTo(editor.ui, 'update', () => this._updateButton());\r\n // `low` priority is used because of https://github.com/ckeditor/ckeditor5-core/issues/133.\r\n this.listenTo(editor, 'change:isReadOnly', () => this._updateButton(), { priority: 'low' });\r\n this.listenTo(editor.ui.focusTracker, 'change:isFocused', () => this._updateButton());\r\n // Reposition button on resize.\r\n this.listenTo(this.buttonView, 'change:isVisible', (evt, name, isVisible) => {\r\n if (isVisible) {\r\n // Keep correct position of button and panel on window#resize.\r\n this.buttonView.listenTo(window, 'resize', () => this._updateButton());\r\n }\r\n else {\r\n // Stop repositioning button when is hidden.\r\n this.buttonView.stopListening(window, 'resize');\r\n // Hide the panel when the button disappears.\r\n this._hidePanel();\r\n }\r\n });\r\n // Register the toolbar so it becomes available for Alt+F10 and Esc navigation.\r\n editor.ui.addToolbar(this.toolbarView, {\r\n beforeFocus: () => this._showPanel(),\r\n afterBlur: () => this._hidePanel()\r\n });\r\n }\r\n /**\r\n * Fills the toolbar with its items based on the configuration.\r\n *\r\n * **Note:** This needs to be done after all plugins are ready.\r\n */\r\n afterInit() {\r\n this.toolbarView.fillFromConfig(this._blockToolbarConfig, this.editor.ui.componentFactory);\r\n // Hide panel before executing each button in the panel.\r\n for (const item of this.toolbarView.items) {\r\n item.on('execute', () => this._hidePanel(true), { priority: 'high' });\r\n }\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n destroy() {\r\n super.destroy();\r\n // Destroy created UI components as they are not automatically destroyed (see ckeditor5#1341).\r\n this.panelView.destroy();\r\n this.buttonView.destroy();\r\n this.toolbarView.destroy();\r\n if (this._resizeObserver) {\r\n this._resizeObserver.destroy();\r\n }\r\n }\r\n /**\r\n * Creates the {@link #toolbarView}.\r\n */\r\n _createToolbarView() {\r\n const t = this.editor.locale.t;\r\n const shouldGroupWhenFull = !this._blockToolbarConfig.shouldNotGroupWhenFull;\r\n const toolbarView = new ToolbarView(this.editor.locale, {\r\n shouldGroupWhenFull,\r\n isFloating: true\r\n });\r\n toolbarView.ariaLabel = t('Editor block content toolbar');\r\n return toolbarView;\r\n }\r\n /**\r\n * Creates the {@link #panelView}.\r\n */\r\n _createPanelView() {\r\n const editor = this.editor;\r\n const panelView = new BalloonPanelView(editor.locale);\r\n panelView.content.add(this.toolbarView);\r\n panelView.class = 'ck-toolbar-container';\r\n editor.ui.view.body.add(panelView);\r\n editor.ui.focusTracker.add(panelView.element);\r\n // Close #panelView on `Esc` press.\r\n this.toolbarView.keystrokes.set('Esc', (evt, cancel) => {\r\n this._hidePanel(true);\r\n cancel();\r\n });\r\n return panelView;\r\n }\r\n /**\r\n * Creates the {@link #buttonView}.\r\n */\r\n _createButtonView() {\r\n const editor = this.editor;\r\n const t = editor.t;\r\n const buttonView = new BlockButtonView(editor.locale);\r\n const iconFromConfig = this._blockToolbarConfig.icon;\r\n const icon = NESTED_TOOLBAR_ICONS[iconFromConfig] || iconFromConfig || NESTED_TOOLBAR_ICONS.dragIndicator;\r\n buttonView.set({\r\n label: t('Edit block'),\r\n icon,\r\n withText: false\r\n });\r\n // Bind the panelView observable properties to the buttonView.\r\n buttonView.bind('isOn').to(this.panelView, 'isVisible');\r\n buttonView.bind('tooltip').to(this.panelView, 'isVisible', isVisible => !isVisible);\r\n // Toggle the panelView upon buttonView#execute.\r\n this.listenTo(buttonView, 'execute', () => {\r\n if (!this.panelView.isVisible) {\r\n this._showPanel();\r\n }\r\n else {\r\n this._hidePanel(true);\r\n }\r\n });\r\n editor.ui.view.body.add(buttonView);\r\n editor.ui.focusTracker.add(buttonView.element);\r\n return buttonView;\r\n }\r\n /**\r\n * Shows or hides the button.\r\n * When all the conditions for displaying the button are matched, it shows the button. Hides otherwise.\r\n */\r\n _updateButton() {\r\n const editor = this.editor;\r\n const model = editor.model;\r\n const view = editor.editing.view;\r\n // Hides the button when the editor is not focused.\r\n if (!editor.ui.focusTracker.isFocused) {\r\n this._hideButton();\r\n return;\r\n }\r\n // Hides the button when the selection is in non-editable place.\r\n if (!editor.model.canEditAt(editor.model.document.selection)) {\r\n this._hideButton();\r\n return;\r\n }\r\n // Get the first selected block, button will be attached to this element.\r\n const modelTarget = Array.from(model.document.selection.getSelectedBlocks())[0];\r\n // Hides the button when there is no enabled item in toolbar for the current block element.\r\n if (!modelTarget || Array.from(this.toolbarView.items).every((item) => !item.isEnabled)) {\r\n this._hideButton();\r\n return;\r\n }\r\n // Get DOM target element.\r\n const domTarget = view.domConverter.mapViewToDom(editor.editing.mapper.toViewElement(modelTarget));\r\n // Show block button.\r\n this.buttonView.isVisible = true;\r\n // Make sure that the block toolbar panel is resized properly.\r\n this._setupToolbarResize();\r\n // Attach block button to target DOM element.\r\n this._attachButtonToElement(domTarget);\r\n // When panel is opened then refresh it position to be properly aligned with block button.\r\n if (this.panelView.isVisible) {\r\n this._showPanel();\r\n }\r\n }\r\n /**\r\n * Hides the button.\r\n */\r\n _hideButton() {\r\n this.buttonView.isVisible = false;\r\n }\r\n /**\r\n * Shows the {@link #toolbarView} attached to the {@link #buttonView}.\r\n * If the toolbar is already visible, then it simply repositions it.\r\n */\r\n _showPanel() {\r\n // Usually, the only way to show the toolbar is by pressing the block button. It makes it impossible for\r\n // the toolbar to show up when the button is invisible (feature does not make sense for the selection then).\r\n // The toolbar navigation using Alt+F10 does not access the button but shows the panel directly using this method.\r\n // So we need to check whether this is possible first.\r\n if (!this.buttonView.isVisible) {\r\n return;\r\n }\r\n const wasVisible = this.panelView.isVisible;\r\n // So here's the thing: If there was no initial panelView#show() or these two were in different order, the toolbar\r\n // positioning will break in RTL editors. Weird, right? What you show know is that the toolbar\r\n // grouping works thanks to:\r\n //\r\n // * the ResizeObserver, which kicks in as soon as the toolbar shows up in DOM (becomes visible again).\r\n // * the observable ToolbarView#maxWidth, which triggers re-grouping when changed.\r\n //\r\n // Here are the possible scenarios:\r\n //\r\n // 1. (WRONG ❌) If the #maxWidth is set when the toolbar is invisible, it won't affect item grouping (no DOMRects, no grouping).\r\n // Then, when panelView.pin() is called, the position of the toolbar will be calculated for the old\r\n // items grouping state, and when finally ResizeObserver kicks in (hey, the toolbar is visible now, right?)\r\n // it will group/ungroup some items and the length of the toolbar will change. But since in RTL the toolbar\r\n // is attached on the right side and the positioning uses CSS \"left\", it will result in the toolbar shifting\r\n // to the left and being displayed in the wrong place.\r\n // 2. (WRONG ❌) If the panelView.pin() is called first and #maxWidth set next, then basically the story repeats. The balloon\r\n // calculates the position for the old toolbar grouping state, then the toolbar re-groups items and because\r\n // it is positioned using CSS \"left\" it will move.\r\n // 3. (RIGHT ✅) We show the panel first (the toolbar does re-grouping but it does not matter), then the #maxWidth\r\n // is set allowing the toolbar to re-group again and finally panelView.pin() does the positioning when the\r\n // items grouping state is stable and final.\r\n //\r\n // https://github.com/ckeditor/ckeditor5/issues/6449, https://github.com/ckeditor/ckeditor5/issues/6575\r\n this.panelView.show();\r\n const editableElement = this._getSelectedEditableElement();\r\n this.toolbarView.maxWidth = this._getToolbarMaxWidth(editableElement);\r\n this.panelView.pin({\r\n target: this.buttonView.element,\r\n limiter: editableElement\r\n });\r\n if (!wasVisible) {\r\n this.toolbarView.items.get(0).focus();\r\n }\r\n }\r\n /**\r\n * Returns currently selected editable, based on the model selection.\r\n */\r\n _getSelectedEditableElement() {\r\n const selectedModelRootName = this.editor.model.document.selection.getFirstRange().root.rootName;\r\n return this.editor.ui.getEditableElement(selectedModelRootName);\r\n }\r\n /**\r\n * Hides the {@link #toolbarView}.\r\n *\r\n * @param focusEditable When `true`, the editable will be focused after hiding the panel.\r\n */\r\n _hidePanel(focusEditable) {\r\n this.panelView.isVisible = false;\r\n if (focusEditable) {\r\n this.editor.editing.view.focus();\r\n }\r\n }\r\n /**\r\n * Attaches the {@link #buttonView} to the target block of content.\r\n *\r\n * @param targetElement Target element.\r\n */\r\n _attachButtonToElement(targetElement) {\r\n const contentStyles = window.getComputedStyle(targetElement);\r\n const editableRect = new Rect(this._getSelectedEditableElement());\r\n const contentPaddingTop = parseInt(contentStyles.paddingTop, 10);\r\n // When line height is not an integer then treat it as \"normal\".\r\n // MDN says that 'normal' == ~1.2 on desktop browsers.\r\n const contentLineHeight = parseInt(contentStyles.lineHeight, 10) || parseInt(contentStyles.fontSize, 10) * 1.2;\r\n const buttonRect = new Rect(this.buttonView.element);\r\n const contentRect = new Rect(targetElement);\r\n let positionLeft;\r\n if (this.editor.locale.uiLanguageDirection === 'ltr') {\r\n positionLeft = editableRect.left - buttonRect.width;\r\n }\r\n else {\r\n positionLeft = editableRect.right;\r\n }\r\n const positionTop = contentRect.top + contentPaddingTop + (contentLineHeight - buttonRect.height) / 2;\r\n buttonRect.moveTo(positionLeft, positionTop);\r\n const absoluteButtonRect = buttonRect.toAbsoluteRect();\r\n this.buttonView.top = absoluteButtonRect.top;\r\n this.buttonView.left = absoluteButtonRect.left;\r\n }\r\n /**\r\n * Creates a resize observer that observes selected editable and resizes the toolbar panel accordingly.\r\n */\r\n _setupToolbarResize() {\r\n const editableElement = this._getSelectedEditableElement();\r\n // Do this only if the automatic grouping is turned on.\r\n if (!this._blockToolbarConfig.shouldNotGroupWhenFull) {\r\n // If resize observer is attached to a different editable than currently selected editable, re-attach it.\r\n if (this._resizeObserver && this._resizeObserver.element !== editableElement) {\r\n this._resizeObserver.destroy();\r\n this._resizeObserver = null;\r\n }\r\n if (!this._resizeObserver) {\r\n this._resizeObserver = new ResizeObserver(editableElement, () => {\r\n this.toolbarView.maxWidth = this._getToolbarMaxWidth(editableElement);\r\n });\r\n }\r\n }\r\n }\r\n /**\r\n * Gets the {@link #toolbarView} max-width, based on given `editableElement` width plus the distance between the farthest\r\n * edge of the {@link #buttonView} and the editable.\r\n *\r\n * @returns A maximum width that toolbar can have, in pixels.\r\n */\r\n _getToolbarMaxWidth(editableElement) {\r\n const editableRect = new Rect(editableElement);\r\n const buttonRect = new Rect(this.buttonView.element);\r\n const isRTL = this.editor.locale.uiLanguageDirection === 'rtl';\r\n const offset = isRTL ? (buttonRect.left - editableRect.right) + buttonRect.width : editableRect.left - buttonRect.left;\r\n return toPx(editableRect.width + offset);\r\n }\r\n}\r\n","/**\r\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\r\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\r\n */\r\nimport { EditorUI, normalizeToolbarConfig } from 'ckeditor5/src/ui';\r\nimport { enablePlaceholder } from 'ckeditor5/src/engine';\r\nimport { ElementReplacer, Rect } from 'ckeditor5/src/utils';\r\n/**\r\n * The classic editor UI class.\r\n */\r\nexport default class ClassicEditorUI extends EditorUI {\r\n /**\r\n * Creates an instance of the classic editor UI class.\r\n *\r\n * @param editor The editor instance.\r\n * @param view The view of the UI.\r\n */\r\n constructor(editor, view) {\r\n super(editor);\r\n this.view = view;\r\n this._toolbarConfig = normalizeToolbarConfig(editor.config.get('toolbar'));\r\n this._elementReplacer = new ElementReplacer();\r\n this.listenTo(editor.editing.view, 'scrollToTheSelection', this._handleScrollToTheSelectionWithStickyPanel.bind(this));\r\n }\r\n /**\r\n * @inheritDoc\r\n */\r\n get element() {\r\n return this.view.element;\r\n }\r\n /**\r\n * Initializes the UI.\r\n *\r\n * @param replacementElement The DOM element that will be the source for the created editor.\r\n */\r\n init(replacementElement) {\r\n const editor = this.editor;\r\n const view = this.view;\r\n const editingView = editor.editing.view;\r\n const editable = view.editable;\r\n const editingRoot = editingView.document.getRoot();\r\n // The editable UI and editing root should share the same name. Then name is used\r\n // to recognize the particular editable, for instance in ARIA attributes.\r\n editable.name = editingRoot.rootName;\r\n view.render();\r\n // The editable UI element in DOM is available for sure only after the editor UI view has been rendered.\r\n // But it can be available earlier if a DOM element has been passed to BalloonEditor.create().\r\n const editableElement = editable.element;\r\n // Register the editable UI view in the editor. A single editor instance can aggregate multiple\r\n // editable areas (roots) but the classic editor has only one.\r\n this.setEditableElement(editable.name, editableElement);\r\n // Let the editable UI element respond to the changes in the global editor focus\r\n // tracker. It has been added to the same tracker a few lines above but, in reality, there are\r\n // many focusable areas in the editor, like balloons, toolbars or dropdowns and as long\r\n // as they have focus, the editable should act like it is focused too (although technically\r\n // it isn't), e.g. by setting the proper CSS class, visually announcing focus to the user.\r\n // Doing otherwise will result in editable focus styles disappearing, once e.g. the\r\n // toolbar gets focused.\r\n view.editable.bind('isFocused').to(this.focusTracker);\r\n // Bind the editable UI element to the editing view, making it an end– and entry–point\r\n // of the editor's engine. This is where the engine meets the UI.\r\n editingView.attachDomRoot(editableElement);\r\n // If an element containing the initial data of the editor was provided, replace it with\r\n // an editor instance's UI in DOM until the editor is destroyed. For instance, a