@ckeditor/ckeditor5-editor-inline 40.0.0 → 40.1.0

package/src/inlineeditorui.js

@@ -1,121 +1,121 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-import { EditorUI, normalizeToolbarConfig } from 'ckeditor5/src/ui';
-import { enablePlaceholder } from 'ckeditor5/src/engine';
-/**
- * The inline editor UI class.
- *
- * @extends module:ui/editorui/editorui~EditorUI
- */
-export default class InlineEditorUI extends EditorUI {
-    /**
-     * Creates an instance of the inline editor UI class.
-     *
-     * @param editor The editor instance.
-     * @param view The view of the UI.
-     */
-    constructor(editor, view) {
-        super(editor);
-        this.view = view;
-        this._toolbarConfig = normalizeToolbarConfig(editor.config.get('toolbar'));
-    }
-    /**
-     * @inheritDoc
-     */
-    get element() {
-        return this.view.editable.element;
-    }
-    /**
-     * Initializes the UI.
-     */
-    init() {
-        const editor = this.editor;
-        const view = this.view;
-        const editingView = editor.editing.view;
-        const editable = view.editable;
-        const editingRoot = editingView.document.getRoot();
-        // The editable UI and editing root should share the same name. Then name is used
-        // to recognize the particular editable, for instance in ARIA attributes.
-        editable.name = editingRoot.rootName;
-        view.render();
-        // The editable UI element in DOM is available for sure only after the editor UI view has been rendered.
-        // But it can be available earlier if a DOM element has been passed to InlineEditor.create().
-        const editableElement = editable.element;
-        // Register the editable UI view in the editor. A single editor instance can aggregate multiple
-        // editable areas (roots) but the inline editor has only one.
-        this.setEditableElement(editable.name, editableElement);
-        // Let the editable UI element respond to the changes in the global editor focus
-        // tracker. It has been added to the same tracker a few lines above but, in reality, there are
-        // many focusable areas in the editor, like balloons, toolbars or dropdowns and as long
-        // as they have focus, the editable should act like it is focused too (although technically
-        // it isn't), e.g. by setting the proper CSS class, visually announcing focus to the user.
-        // Doing otherwise will result in editable focus styles disappearing, once e.g. the
-        // toolbar gets focused.
-        editable.bind('isFocused').to(this.focusTracker);
-        // Bind the editable UI element to the editing view, making it an end– and entry–point
-        // of the editor's engine. This is where the engine meets the UI.
-        editingView.attachDomRoot(editableElement);
-        this._initPlaceholder();
-        this._initToolbar();
-        this.fire('ready');
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        const view = this.view;
-        const editingView = this.editor.editing.view;
-        editingView.detachDomRoot(view.editable.name);
-        view.destroy();
-    }
-    /**
-     * Initializes the inline editor toolbar and its panel.
-     */
-    _initToolbar() {
-        const editor = this.editor;
-        const view = this.view;
-        const editableElement = view.editable.element;
-        const toolbar = view.toolbar;
-        // Set–up the view#panel.
-        view.panel.bind('isVisible').to(this.focusTracker, 'isFocused');
-        view.bind('viewportTopOffset').to(this, 'viewportOffset', ({ top }) => top || 0);
-        // https://github.com/ckeditor/ckeditor5-editor-inline/issues/4
-        view.listenTo(editor.ui, 'update', () => {
-            // Don't pin if the panel is not already visible. It prevents the panel
-            // showing up when there's no focus in the UI.
-            if (view.panel.isVisible) {
-                view.panel.pin({
-                    target: editableElement,
-                    positions: view.panelPositions
-                });
-            }
-        });
-        toolbar.fillFromConfig(this._toolbarConfig, this.componentFactory);
-        // Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
-        this.addToolbar(toolbar);
-    }
-    /**
-     * Enable the placeholder text on the editing root.
-     */
-    _initPlaceholder() {
-        const editor = this.editor;
-        const editingView = editor.editing.view;
-        const editingRoot = editingView.document.getRoot();
-        const placeholder = editor.config.get('placeholder');
-        if (placeholder) {
-            const placeholderText = typeof placeholder === 'string' ? placeholder : placeholder[editingRoot.rootName];
-            if (placeholderText) {
-                editingRoot.placeholder = placeholderText;
-            }
-        }
-        enablePlaceholder({
-            view: editingView,
-            element: editingRoot,
-            isDirectHost: false,
-            keepOnFocus: true
-        });
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { EditorUI, normalizeToolbarConfig } from 'ckeditor5/src/ui';
+import { enablePlaceholder } from 'ckeditor5/src/engine';
+/**
+ * The inline editor UI class.
+ *
+ * @extends module:ui/editorui/editorui~EditorUI
+ */
+export default class InlineEditorUI extends EditorUI {
+    /**
+     * Creates an instance of the inline editor UI class.
+     *
+     * @param editor The editor instance.
+     * @param view The view of the UI.
+     */
+    constructor(editor, view) {
+        super(editor);
+        this.view = view;
+        this._toolbarConfig = normalizeToolbarConfig(editor.config.get('toolbar'));
+    }
+    /**
+     * @inheritDoc
+     */
+    get element() {
+        return this.view.editable.element;
+    }
+    /**
+     * Initializes the UI.
+     */
+    init() {
+        const editor = this.editor;
+        const view = this.view;
+        const editingView = editor.editing.view;
+        const editable = view.editable;
+        const editingRoot = editingView.document.getRoot();
+        // The editable UI and editing root should share the same name. Then name is used
+        // to recognize the particular editable, for instance in ARIA attributes.
+        editable.name = editingRoot.rootName;
+        view.render();
+        // The editable UI element in DOM is available for sure only after the editor UI view has been rendered.
+        // But it can be available earlier if a DOM element has been passed to InlineEditor.create().
+        const editableElement = editable.element;
+        // Register the editable UI view in the editor. A single editor instance can aggregate multiple
+        // editable areas (roots) but the inline editor has only one.
+        this.setEditableElement(editable.name, editableElement);
+        // Let the editable UI element respond to the changes in the global editor focus
+        // tracker. It has been added to the same tracker a few lines above but, in reality, there are
+        // many focusable areas in the editor, like balloons, toolbars or dropdowns and as long
+        // as they have focus, the editable should act like it is focused too (although technically
+        // it isn't), e.g. by setting the proper CSS class, visually announcing focus to the user.
+        // Doing otherwise will result in editable focus styles disappearing, once e.g. the
+        // toolbar gets focused.
+        editable.bind('isFocused').to(this.focusTracker);
+        // Bind the editable UI element to the editing view, making it an end– and entry–point
+        // of the editor's engine. This is where the engine meets the UI.
+        editingView.attachDomRoot(editableElement);
+        this._initPlaceholder();
+        this._initToolbar();
+        this.fire('ready');
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        const view = this.view;
+        const editingView = this.editor.editing.view;
+        editingView.detachDomRoot(view.editable.name);
+        view.destroy();
+    }
+    /**
+     * Initializes the inline editor toolbar and its panel.
+     */
+    _initToolbar() {
+        const editor = this.editor;
+        const view = this.view;
+        const editableElement = view.editable.element;
+        const toolbar = view.toolbar;
+        // Set–up the view#panel.
+        view.panel.bind('isVisible').to(this.focusTracker, 'isFocused');
+        view.bind('viewportTopOffset').to(this, 'viewportOffset', ({ top }) => top || 0);
+        // https://github.com/ckeditor/ckeditor5-editor-inline/issues/4
+        view.listenTo(editor.ui, 'update', () => {
+            // Don't pin if the panel is not already visible. It prevents the panel
+            // showing up when there's no focus in the UI.
+            if (view.panel.isVisible) {
+                view.panel.pin({
+                    target: editableElement,
+                    positions: view.panelPositions
+                });
+            }
+        });
+        toolbar.fillFromConfig(this._toolbarConfig, this.componentFactory);
+        // Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
+        this.addToolbar(toolbar);
+    }
+    /**
+     * Enable the placeholder text on the editing root.
+     */
+    _initPlaceholder() {
+        const editor = this.editor;
+        const editingView = editor.editing.view;
+        const editingRoot = editingView.document.getRoot();
+        const placeholder = editor.config.get('placeholder');
+        if (placeholder) {
+            const placeholderText = typeof placeholder === 'string' ? placeholder : placeholder[editingRoot.rootName];
+            if (placeholderText) {
+                editingRoot.placeholder = placeholderText;
+            }
+        }
+        enablePlaceholder({
+            view: editingView,
+            element: editingRoot,
+            isDirectHost: false,
+            keepOnFocus: true
+        });
+    }
+}

package/src/inlineeditoruiview.d.ts

@@ -1,137 +1,137 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module editor-inline/inlineeditoruiview
- */
-import { BalloonPanelView, EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui';
-import { type PositioningFunction, type Locale } from 'ckeditor5/src/utils';
-import type { View } from 'ckeditor5/src/engine';
-/**
- * Inline editor UI view. Uses an nline editable and a floating toolbar.
- */
-export default class InlineEditorUIView extends EditorUIView {
-    /**
-     * A floating toolbar view instance.
-     */
-    readonly toolbar: ToolbarView;
-    /**
-     * The offset from the top edge of the web browser's viewport which makes the
-     * UI become sticky. The default value is `0`, which means that the UI becomes
-     * sticky when its upper edge touches the top of the page viewport.
-     *
-     * This attribute is useful when the web page has UI elements positioned to the top
-     * either using `position: fixed` or `position: sticky`, which would cover the
-     * UI or vice–versa (depending on the `z-index` hierarchy).
-     *
-     * Bound to {@link module:ui/editorui/editorui~EditorUI#viewportOffset `EditorUI#viewportOffset`}.
-     *
-     * If {@link module:core/editor/editorconfig~EditorConfig#ui `EditorConfig#ui.viewportOffset.top`} is defined, then
-     * it will override the default value.
-     *
-     * @observable
-     * @default 0
-     */
-    viewportTopOffset: number;
-    /**
-     * A balloon panel view instance.
-     */
-    readonly panel: BalloonPanelView;
-    /**
-     * A set of positioning functions used by the {@link #panel} to float around
-     * {@link #element editableElement}.
-     *
-     * The positioning functions are as follows:
-     *
-     * * West:
-     *
-     * ```
-     * [ Panel ]
-     * +------------------+
-     * | #editableElement |
-     * +------------------+
-     *
-     * +------------------+
-     * | #editableElement |
-     * |[ Panel ]         |
-     * |                  |
-     * +------------------+
-     *
-     * +------------------+
-     * | #editableElement |
-     * +------------------+
-     * [ Panel ]
-     * ```
-     *
-     * * East:
-     *
-     * ```
-     *            [ Panel ]
-     * +------------------+
-     * | #editableElement |
-     * +------------------+
-     *
-     * +------------------+
-     * | #editableElement |
-     * |         [ Panel ]|
-     * |                  |
-     * +------------------+
-     *
-     * +------------------+
-     * | #editableElement |
-     * +------------------+
-     *            [ Panel ]
-     * ```
-     *
-     * See: {@link module:utils/dom/position~Options#positions}.
-     */
-    readonly panelPositions: Array<PositioningFunction>;
-    /**
-     * Editable UI view.
-     */
-    readonly editable: InlineEditableUIView;
-    /**
-     * An instance of the resize observer that helps dynamically determine the geometry of the toolbar
-     * and manage items that do not fit into a single row.
-     *
-     * **Note:** Created in {@link #render}.
-     */
-    private _resizeObserver;
-    /**
-     * Creates an instance of the inline editor UI view.
-     *
-     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
-     * @param editingView The editing view instance this view is related to.
-     * @param editableElement The editable element. If not specified, it will be automatically created by
-     * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
-     * @param options Configuration options for the view instance.
-     * @param options.shouldToolbarGroupWhenFull When set `true` enables automatic items grouping
-     * in the main {@link module:editor-inline/inlineeditoruiview~InlineEditorUIView#toolbar toolbar}.
-     * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
-     */
-    constructor(locale: Locale, editingView: View, editableElement?: HTMLElement, options?: {
-        shouldToolbarGroupWhenFull?: boolean;
-    });
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-    /**
-     * Determines the panel top position of the {@link #panel} in {@link #panelPositions}.
-     *
-     * @param editableRect Rect of the {@link #element}.
-     * @param panelRect Rect of the {@link #panel}.
-     */
-    private _getPanelPositionTop;
-    /**
-     * Returns the positions for {@link #panelPositions}.
-     *
-     * See: {@link module:utils/dom/position~Options#positions}.
-     */
-    private _getPanelPositions;
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module editor-inline/inlineeditoruiview
+ */
+import { BalloonPanelView, EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui';
+import { type PositioningFunction, type Locale } from 'ckeditor5/src/utils';
+import type { View } from 'ckeditor5/src/engine';
+/**
+ * Inline editor UI view. Uses an nline editable and a floating toolbar.
+ */
+export default class InlineEditorUIView extends EditorUIView {
+    /**
+     * A floating toolbar view instance.
+     */
+    readonly toolbar: ToolbarView;
+    /**
+     * The offset from the top edge of the web browser's viewport which makes the
+     * UI become sticky. The default value is `0`, which means that the UI becomes
+     * sticky when its upper edge touches the top of the page viewport.
+     *
+     * This attribute is useful when the web page has UI elements positioned to the top
+     * either using `position: fixed` or `position: sticky`, which would cover the
+     * UI or vice–versa (depending on the `z-index` hierarchy).
+     *
+     * Bound to {@link module:ui/editorui/editorui~EditorUI#viewportOffset `EditorUI#viewportOffset`}.
+     *
+     * If {@link module:core/editor/editorconfig~EditorConfig#ui `EditorConfig#ui.viewportOffset.top`} is defined, then
+     * it will override the default value.
+     *
+     * @observable
+     * @default 0
+     */
+    viewportTopOffset: number;
+    /**
+     * A balloon panel view instance.
+     */
+    readonly panel: BalloonPanelView;
+    /**
+     * A set of positioning functions used by the {@link #panel} to float around
+     * {@link #element editableElement}.
+     *
+     * The positioning functions are as follows:
+     *
+     * * West:
+     *
+     * ```
+     * [ Panel ]
+     * +------------------+
+     * | #editableElement |
+     * +------------------+
+     *
+     * +------------------+
+     * | #editableElement |
+     * |[ Panel ]         |
+     * |                  |
+     * +------------------+
+     *
+     * +------------------+
+     * | #editableElement |
+     * +------------------+
+     * [ Panel ]
+     * ```
+     *
+     * * East:
+     *
+     * ```
+     *            [ Panel ]
+     * +------------------+
+     * | #editableElement |
+     * +------------------+
+     *
+     * +------------------+
+     * | #editableElement |
+     * |         [ Panel ]|
+     * |                  |
+     * +------------------+
+     *
+     * +------------------+
+     * | #editableElement |
+     * +------------------+
+     *            [ Panel ]
+     * ```
+     *
+     * See: {@link module:utils/dom/position~Options#positions}.
+     */
+    readonly panelPositions: Array<PositioningFunction>;
+    /**
+     * Editable UI view.
+     */
+    readonly editable: InlineEditableUIView;
+    /**
+     * An instance of the resize observer that helps dynamically determine the geometry of the toolbar
+     * and manage items that do not fit into a single row.
+     *
+     * **Note:** Created in {@link #render}.
+     */
+    private _resizeObserver;
+    /**
+     * Creates an instance of the inline editor UI view.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+     * @param editingView The editing view instance this view is related to.
+     * @param editableElement The editable element. If not specified, it will be automatically created by
+     * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
+     * @param options Configuration options for the view instance.
+     * @param options.shouldToolbarGroupWhenFull When set `true` enables automatic items grouping
+     * in the main {@link module:editor-inline/inlineeditoruiview~InlineEditorUIView#toolbar toolbar}.
+     * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
+     */
+    constructor(locale: Locale, editingView: View, editableElement?: HTMLElement, options?: {
+        shouldToolbarGroupWhenFull?: boolean;
+    });
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Determines the panel top position of the {@link #panel} in {@link #panelPositions}.
+     *
+     * @param editableRect Rect of the {@link #element}.
+     * @param panelRect Rect of the {@link #panel}.
+     */
+    private _getPanelPositionTop;
+    /**
+     * Returns the positions for {@link #panelPositions}.
+     *
+     * See: {@link module:utils/dom/position~Options#positions}.
+     */
+    private _getPanelPositions;
+}