@ckeditor/ckeditor5-editor-decoupled 39.0.2 → 40.0.0

package/src/decouplededitorui.js

@@ -1,97 +1,97 @@
-/**
- * @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 } from 'ckeditor5/src/ui';
-import { enablePlaceholder } from 'ckeditor5/src/engine';
-/**
- * The decoupled editor UI class.
- */
-export default class DecoupledEditorUI extends EditorUI {
-    /**
-     * Creates an instance of the decoupled editor UI class.
-     *
-     * @param editor The editor instance.
-     * @param view The view of the UI.
-     */
-    constructor(editor, view) {
-        super(editor);
-        this.view = view;
-    }
-    /**
-     * 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 DecoupledEditor.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 decoupled 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.
-        view.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 toolbar = view.toolbar;
-        toolbar.fillFromConfig(editor.config.get('toolbar'), this.componentFactory);
-        // Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
-        this.addToolbar(view.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 } from 'ckeditor5/src/ui';
+import { enablePlaceholder } from 'ckeditor5/src/engine';
+/**
+ * The decoupled editor UI class.
+ */
+export default class DecoupledEditorUI extends EditorUI {
+    /**
+     * Creates an instance of the decoupled editor UI class.
+     *
+     * @param editor The editor instance.
+     * @param view The view of the UI.
+     */
+    constructor(editor, view) {
+        super(editor);
+        this.view = view;
+    }
+    /**
+     * 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 DecoupledEditor.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 decoupled 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.
+        view.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 toolbar = view.toolbar;
+        toolbar.fillFromConfig(editor.config.get('toolbar'), this.componentFactory);
+        // Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
+        this.addToolbar(view.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/decouplededitoruiview.d.ts

@@ -1,49 +1,49 @@
-/**
- * @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-decoupled/decouplededitoruiview
- */
-import { EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui';
-import type { Locale } from 'ckeditor5/src/utils';
-import type { View } from 'ckeditor5/src/engine';
-/**
- * The decoupled editor UI view. It is a virtual view providing an inline
- * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable} and a
- * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}, but without any
- * specific arrangement of the components in the DOM.
- *
- * See {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}
- * to learn more about this view.
- */
-export default class DecoupledEditorUIView extends EditorUIView {
-    /**
-     * The main toolbar of the decoupled editor UI.
-     */
-    readonly toolbar: ToolbarView;
-    /**
-     * The editable of the decoupled editor UI.
-     */
-    readonly editable: InlineEditableUIView;
-    /**
-     * Creates an instance of the decoupled 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 options Configuration options for the view instance.
-     * @param options.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.shouldToolbarGroupWhenFull When set `true` enables automatic items grouping
-     * in the main {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar toolbar}.
-     * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
-     */
-    constructor(locale: Locale, editingView: View, options?: {
-        editableElement?: HTMLElement;
-        shouldToolbarGroupWhenFull?: boolean;
-    });
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-}
+/**
+ * @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-decoupled/decouplededitoruiview
+ */
+import { EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui';
+import type { Locale } from 'ckeditor5/src/utils';
+import type { View } from 'ckeditor5/src/engine';
+/**
+ * The decoupled editor UI view. It is a virtual view providing an inline
+ * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable} and a
+ * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}, but without any
+ * specific arrangement of the components in the DOM.
+ *
+ * See {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}
+ * to learn more about this view.
+ */
+export default class DecoupledEditorUIView extends EditorUIView {
+    /**
+     * The main toolbar of the decoupled editor UI.
+     */
+    readonly toolbar: ToolbarView;
+    /**
+     * The editable of the decoupled editor UI.
+     */
+    readonly editable: InlineEditableUIView;
+    /**
+     * Creates an instance of the decoupled 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 options Configuration options for the view instance.
+     * @param options.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.shouldToolbarGroupWhenFull When set `true` enables automatic items grouping
+     * in the main {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar toolbar}.
+     * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
+     */
+    constructor(locale: Locale, editingView: View, options?: {
+        editableElement?: HTMLElement;
+        shouldToolbarGroupWhenFull?: boolean;
+    });
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+}

package/src/decouplededitoruiview.js

@@ -1,63 +1,63 @@
-/**
- * @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-decoupled/decouplededitoruiview
- */
-import { EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui';
-/**
- * The decoupled editor UI view. It is a virtual view providing an inline
- * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable} and a
- * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}, but without any
- * specific arrangement of the components in the DOM.
- *
- * See {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}
- * to learn more about this view.
- */
-export default class DecoupledEditorUIView extends EditorUIView {
-    /**
-     * Creates an instance of the decoupled 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 options Configuration options for the view instance.
-     * @param options.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.shouldToolbarGroupWhenFull When set `true` enables automatic items grouping
-     * in the main {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar toolbar}.
-     * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
-     */
-    constructor(locale, editingView, options = {}) {
-        super(locale);
-        const t = locale.t;
-        this.toolbar = new ToolbarView(locale, {
-            shouldGroupWhenFull: options.shouldToolbarGroupWhenFull
-        });
-        this.editable = new InlineEditableUIView(locale, editingView, options.editableElement, {
-            label: editableView => {
-                return t('Rich Text Editor. Editing area: %0', editableView.name);
-            }
-        });
-        // This toolbar may be placed anywhere in the page so things like font size need to be reset in it.
-        // Because of the above, make sure the toolbar supports rounded corners.
-        // Also, make sure the toolbar has the proper dir attribute because its ancestor may not have one
-        // and some toolbar item styles depend on this attribute.
-        this.toolbar.extendTemplate({
-            attributes: {
-                class: [
-                    'ck-reset_all',
-                    'ck-rounded-corners'
-                ],
-                dir: locale.uiLanguageDirection
-            }
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        this.registerChild([this.toolbar, this.editable]);
-    }
-}
+/**
+ * @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-decoupled/decouplededitoruiview
+ */
+import { EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui';
+/**
+ * The decoupled editor UI view. It is a virtual view providing an inline
+ * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable} and a
+ * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}, but without any
+ * specific arrangement of the components in the DOM.
+ *
+ * See {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}
+ * to learn more about this view.
+ */
+export default class DecoupledEditorUIView extends EditorUIView {
+    /**
+     * Creates an instance of the decoupled 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 options Configuration options for the view instance.
+     * @param options.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.shouldToolbarGroupWhenFull When set `true` enables automatic items grouping
+     * in the main {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar toolbar}.
+     * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
+     */
+    constructor(locale, editingView, options = {}) {
+        super(locale);
+        const t = locale.t;
+        this.toolbar = new ToolbarView(locale, {
+            shouldGroupWhenFull: options.shouldToolbarGroupWhenFull
+        });
+        this.editable = new InlineEditableUIView(locale, editingView, options.editableElement, {
+            label: editableView => {
+                return t('Rich Text Editor. Editing area: %0', editableView.name);
+            }
+        });
+        // This toolbar may be placed anywhere in the page so things like font size need to be reset in it.
+        // Because of the above, make sure the toolbar supports rounded corners.
+        // Also, make sure the toolbar has the proper dir attribute because its ancestor may not have one
+        // and some toolbar item styles depend on this attribute.
+        this.toolbar.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-reset_all',
+                    'ck-rounded-corners'
+                ],
+                dir: locale.uiLanguageDirection
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.registerChild([this.toolbar, this.editable]);
+    }
+}

package/src/index.d.ts

@@ -1,8 +1,8 @@
-/**
- * @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-decoupled
- */
-export { default as DecoupledEditor } from './decouplededitor';
+/**
+ * @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-decoupled
+ */
+export { default as DecoupledEditor } from './decouplededitor';

package/src/index.js

@@ -1,8 +1,8 @@
-/**
- * @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-decoupled
- */
-export { default as DecoupledEditor } from './decouplededitor';
+/**
+ * @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-decoupled
+ */
+export { default as DecoupledEditor } from './decouplededitor';