@ckeditor/ckeditor5-ui 38.0.0-rc.1 → 38.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "38.0.0-rc.1",
+  "version": "38.0.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -11,33 +11,33 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-utils": "^38.0.0-rc.1",
+    "@ckeditor/ckeditor5-core": "^38.0.0",
+    "@ckeditor/ckeditor5-utils": "^38.0.0",
     "color-convert": "2.0.1",
     "color-parse": "1.4.2",
     "lodash-es": "^4.17.15",
     "vanilla-colorful": "0.7.2"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-block-quote": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-editor-balloon": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-editor-classic": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-engine": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-enter": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-essentials": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-find-and-replace": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-font": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-heading": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-horizontal-line": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-image": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-link": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-list": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-mention": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-paragraph": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-source-editing": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-table": "^38.0.0-rc.1",
-    "@ckeditor/ckeditor5-typing": "^38.0.0-rc.1",
+    "@ckeditor/ckeditor5-basic-styles": "^38.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^38.0.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^38.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^38.0.0",
+    "@ckeditor/ckeditor5-engine": "^38.0.0",
+    "@ckeditor/ckeditor5-enter": "^38.0.0",
+    "@ckeditor/ckeditor5-essentials": "^38.0.0",
+    "@ckeditor/ckeditor5-find-and-replace": "^38.0.0",
+    "@ckeditor/ckeditor5-font": "^38.0.0",
+    "@ckeditor/ckeditor5-heading": "^38.0.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^38.0.0",
+    "@ckeditor/ckeditor5-image": "^38.0.0",
+    "@ckeditor/ckeditor5-link": "^38.0.0",
+    "@ckeditor/ckeditor5-list": "^38.0.0",
+    "@ckeditor/ckeditor5-mention": "^38.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^38.0.0",
+    "@ckeditor/ckeditor5-source-editing": "^38.0.0",
+    "@ckeditor/ckeditor5-table": "^38.0.0",
+    "@ckeditor/ckeditor5-typing": "^38.0.0",
     "@types/color-convert": "2.0.0",
     "typescript": "^4.8.4",
     "webpack": "^5.58.1",

package/src/editorui/poweredby.d.ts

@@ -8,7 +8,12 @@
 import type { Editor } from '@ckeditor/ckeditor5-core';
 declare const PoweredBy_base: {
     new (): import("@ckeditor/ckeditor5-utils").DomEmitter;
-    prototype: import("@ckeditor/ckeditor5-utils").DomEmitter;
+    prototype: import("@ckeditor/ckeditor5-utils").DomEmitter; /**
+     * Creates a "powered by" helper for a given editor. The feature is initialized on Editor#ready
+     * event.
+     *
+     * @param editor
+     */
 };
 /**
  * A helper that enables the "powered by" feature in the editor and renders a link to the project's

package/src/editorui/poweredby.js

@@ -12,6 +12,7 @@ const ICON_WIDTH = 53;
 const ICON_HEIGHT = 10;
 const NARROW_ROOT_HEIGHT_THRESHOLD = 50;
 const NARROW_ROOT_WIDTH_THRESHOLD = 350;
+const DEFAULT_LABEL = 'Powered by';
 const OFF_THE_SCREEN_POSITION = {
     top: -99999,
     left: -99999,
@@ -94,7 +95,8 @@ export default class PoweredBy extends DomEmitterMixin() {
     _createBalloonView() {
         const editor = this.editor;
         const balloon = this._balloonView = new BalloonPanelView();
-        const view = new PoweredByView(editor.locale);
+        const poweredByConfig = getNormalizedConfig(editor);
+        const view = new PoweredByView(editor.locale, poweredByConfig.label);
         balloon.content.add(view);
         balloon.set({
             class: 'ck-powered-by-balloon'
@@ -158,8 +160,9 @@ class PoweredByView extends View {
      * Created an instance of the "powered by" view.
      *
      * @param locale The localization services instance.
+     * @param label The label text.
      */
-    constructor(locale) {
+    constructor(locale, label) {
         super(locale);
         const iconView = new IconView();
         const bind = this.bindTemplate;
@@ -191,13 +194,15 @@ class PoweredByView extends View {
                         tabindex: '-1'
                     },
                     children: [
-                        {
-                            tag: 'span',
-                            attributes: {
-                                class: ['ck', 'ck-powered-by__label']
-                            },
-                            children: ['Powered by']
-                        },
+                        ...label ? [
+                            {
+                                tag: 'span',
+                                attributes: {
+                                    class: ['ck', 'ck-powered-by__label']
+                                },
+                                children: [label]
+                            }
+                        ] : [],
                         iconView
                     ],
                     on: {
@@ -277,6 +282,7 @@ function getNormalizedConfig(editor) {
     const position = userConfig && userConfig.position || 'border';
     return {
         position,
+        label: DEFAULT_LABEL,
         verticalOffset: position === 'inside' ? 5 : 0,
         horizontalOffset: 5,
         side: editor.locale.contentLanguageDirection === 'ltr' ? 'right' : 'left',

package/theme/globals/_poweredby.css

@@ -5,8 +5,8 @@
 
 :root {
 	--ck-powered-by-line-height: 10px;
-	--ck-powered-by-padding-top: 2px;
-	--ck-powered-by-padding-left: 4px;
+	--ck-powered-by-padding-vertical: 2px;
+	--ck-powered-by-padding-horizontal: 4px;
 	--ck-powered-by-text-color: hsl(0, 0%, 31%);
 	--ck-powered-by-border-radius: var(--ck-border-radius);
 	--ck-powered-by-background: hsl(0, 0%, 100%);
@@ -31,7 +31,7 @@
 			opacity: .66;
 			filter: grayscale(80%);
 			line-height: var(--ck-powered-by-line-height);
-			padding: var(--ck-powered-by-padding-top) var(--ck-powered-by-padding-left);
+			padding: var(--ck-powered-by-padding-vertical) var(--ck-powered-by-padding-horizontal);
 		}
 
 		& .ck-powered-by__label {
@@ -62,6 +62,7 @@
 
 	&[class*="position_border"] {
 		border: var(--ck-focus-ring);
+		border-color: var(--ck-powered-by-border-color);
 	}
 }