Merge pull request #14070 from ckeditor/ci/epic/3150-powered-by-ckeditor

Other: Introduced the Powered by CKEditor5 logo.
ckeditor · May 10, 2023 · 383ea8a · 383ea8a
2 parents 142b8b9 + b0eb6b8
commit 383ea8a
Show file tree

Hide file tree

Showing 16 changed files with 1,268 additions and 6 deletions.
diff --git a/packages/ckeditor5-core/src/editor/editorconfig.ts b/packages/ckeditor5-core/src/editor/editorconfig.ts
@@ -466,14 +466,47 @@ export interface EditorConfig {
 	 * (e.g. the top menu). Thanks to setting the UI viewport offset the toolbar and other contextual balloons will not be positioned
 	 * underneath or above the page's UI.
 	 *
-	 * ```ts
-	 * ui: {
-	 * 	viewportOffset: { top: 10, right: 10, bottom: 10, left: 10 }
-	 * }
-	 * ```
+	 * 	```ts
+	 * 	ui: {
+	 * 		viewportOffset: { top: 10, right: 10, bottom: 10, left: 10 }
+	 * 	}
+	 * 	```
 	 *
 	 * 	**Note:** If you want to modify the viewport offset in runtime (after editor was created), you can do that by overriding
-	 * {@link module:ui/editorui/editorui~EditorUI#viewportOffset `editor.ui.viewportOffset`}.
+	 * 	{@link module:ui/editorui/editorui~EditorUI#viewportOffset `editor.ui.viewportOffset`}.
+	 *
+	 * * **`ui.poweredBy`** &ndash; The configuration of the project logo displayed over editor's editing are in open-source integrations
+	 * ([learn more](TODO)). It allows customizing the position of the logo to minimize the risk of collision with editor content
+	 * and UI.
+	 *
+	 * 	The following configuration properties are supported:
+	 *
+	 * 	* **`position`** &ndash; Position of the project's logo (default: `'inside'`).
+	 * 		* When `'inside'` the logo will be displayed within the boundaries of the editing area.
+	 * 		* When `'border'` the logo will be displayed over the bottom border of the editing area.
+	 *
+	 * 	* **`side`** (`'left'` or `'right'`, default: `'right'`) &ndash; Allows choosing the side of the editing area the
+	 * 	logo will be displayed to.
+	 *
+	 * 		**Note**: If {@link module:core/editor/editorconfig~EditorConfig#language `config.language`} is set to an RTL (right-to-left)
+	 * 		language, the side switches to `'left'` by default.
+	 *
+	 * 	* **`verticalOffset`** (default: `5`) &ndash; The vertical distance the logo can be moved away from its default position.
+	 *
+	 * 		**Note**: If `position` is `'border'`, the offset is measured from the (vertical) center of the logo.
+	 *
+	 * 	* **`horizontalOffset`** (default: `5`) &ndash; The horizontal distance between the side of the editing root and the
+	 * 	nearest side of the logo.
+	 *
+	 * 	```ts
+	 * 	ui: {
+	 * 		poweredBy: {
+	 * 			position: 'border',
+	 * 			side: 'left',
+	 * 			verticalOffset: 2,
+	 * 			horizontalOffset: 30
+	 * 		}
+	 * 	}
 	 */
 	ui?: UiConfig;
 
@@ -561,4 +594,43 @@ export interface UiConfig {
 		right?: number;
 		top?: number;
 	};
+
+	poweredBy?: {
+
+		/**
+		 * Position of the project's logo.
+		 *
+		 * * When `'inside'` the logo will be displayed within the boundaries of the editing area.
+		 * * When `'border'` the logo will be displayed over the bottom border of the editing area.
+		 *
+		 * @default 'inside'
+		 */
+		position: 'inside' | 'border';
+
+		/**
+		 * Allows choosing the side of the editing area the logo will be displayed to.
+		 *
+		 * **Note:** If {@link module:core/editor/editorconfig~EditorConfig#language `config.language`} is set to an RTL (right-to-left)
+		 * language, the side switches to `'left'` by default.
+		 *
+		 * @default 'right'
+		 */
+		side: 'left' | 'right';
+
+		/**
+		 * The vertical distance the logo can be moved away from its default position.
+		 *
+		 * **Note:** If `position` is `'border'`, the offset is measured from the (vertical) center of the logo.
+		 *
+		 * @default 5
+		 */
+		verticalOffset: number;
+
+		/**
+		 * The horizontal distance between the side of the editing root and the nearest side of the logo.
+		 *
+		 * @default 5
+		 */
+		horizontalOffset: number;
+	};
 }
diff --git a/packages/ckeditor5-ui/src/editorui/editorui.ts b/packages/ckeditor5-ui/src/editorui/editorui.ts
@@ -11,6 +11,7 @@
 
 import ComponentFactory from '../componentfactory';
 import TooltipManager from '../tooltipmanager';
+import PoweredBy from './poweredby';
 
 import type EditorUIView from './editoruiview';
 import type ToolbarView from '../toolbar/toolbarview';
@@ -51,6 +52,11 @@ export default abstract class EditorUI extends ObservableMixin() {
 	 */
 	public readonly tooltipManager: TooltipManager;
 
+	/**
+	 * A helper that enables the "powered by" feature in the editor and renders a link to the project's webpage.
+	 */
+	public readonly poweredBy: PoweredBy;
+
 	/**
 	 * Indicates the UI is ready. Set `true` after {@link #event:ready} event is fired.
 	 *
@@ -120,6 +126,7 @@ export default abstract class EditorUI extends ObservableMixin() {
 		this.componentFactory = new ComponentFactory( editor );
 		this.focusTracker = new FocusTracker();
 		this.tooltipManager = new TooltipManager( editor );
+		this.poweredBy = new PoweredBy( editor );
 
 		this.set( 'viewportOffset', this._readViewportOffsetFromConfig() );
 
@@ -167,6 +174,7 @@ export default abstract class EditorUI extends ObservableMixin() {
 
 		this.focusTracker.destroy();
 		this.tooltipManager.destroy( this.editor );
+		this.poweredBy.destroy();
 
 		// Clean–up the references to the CKEditor instance stored in the native editable DOM elements.
 		for ( const domElement of this._editableElementsMap.values() ) {