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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +22 -22
  2. package/src/editorui/poweredby.d.ts +6 -1
  3. package/src/editorui/poweredby.js +15 -9
  4. package/theme/globals/_poweredby.css +4 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ckeditor/ckeditor5-ui",
3
- "version": "38.0.0-rc.0",
3
+ "version": "38.0.0",
4
4
  "description": "The UI framework and standard UI library of CKEditor 5.",
5
5
  "keywords": [
6
6
  "ckeditor",
@@ -11,33 +11,33 @@
11
11
  ],
12
12
  "main": "src/index.js",
13
13
  "dependencies": {
14
- "@ckeditor/ckeditor5-core": "^38.0.0-rc.0",
15
- "@ckeditor/ckeditor5-utils": "^38.0.0-rc.0",
14
+ "@ckeditor/ckeditor5-core": "^38.0.0",
15
+ "@ckeditor/ckeditor5-utils": "^38.0.0",
16
16
  "color-convert": "2.0.1",
17
17
  "color-parse": "1.4.2",
18
18
  "lodash-es": "^4.17.15",
19
19
  "vanilla-colorful": "0.7.2"
20
20
  },
21
21
  "devDependencies": {
22
- "@ckeditor/ckeditor5-basic-styles": "^38.0.0-rc.0",
23
- "@ckeditor/ckeditor5-block-quote": "^38.0.0-rc.0",
24
- "@ckeditor/ckeditor5-editor-balloon": "^38.0.0-rc.0",
25
- "@ckeditor/ckeditor5-editor-classic": "^38.0.0-rc.0",
26
- "@ckeditor/ckeditor5-engine": "^38.0.0-rc.0",
27
- "@ckeditor/ckeditor5-enter": "^38.0.0-rc.0",
28
- "@ckeditor/ckeditor5-essentials": "^38.0.0-rc.0",
29
- "@ckeditor/ckeditor5-find-and-replace": "^38.0.0-rc.0",
30
- "@ckeditor/ckeditor5-font": "^38.0.0-rc.0",
31
- "@ckeditor/ckeditor5-heading": "^38.0.0-rc.0",
32
- "@ckeditor/ckeditor5-horizontal-line": "^38.0.0-rc.0",
33
- "@ckeditor/ckeditor5-image": "^38.0.0-rc.0",
34
- "@ckeditor/ckeditor5-link": "^38.0.0-rc.0",
35
- "@ckeditor/ckeditor5-list": "^38.0.0-rc.0",
36
- "@ckeditor/ckeditor5-mention": "^38.0.0-rc.0",
37
- "@ckeditor/ckeditor5-paragraph": "^38.0.0-rc.0",
38
- "@ckeditor/ckeditor5-source-editing": "^38.0.0-rc.0",
39
- "@ckeditor/ckeditor5-table": "^38.0.0-rc.0",
40
- "@ckeditor/ckeditor5-typing": "^38.0.0-rc.0",
22
+ "@ckeditor/ckeditor5-basic-styles": "^38.0.0",
23
+ "@ckeditor/ckeditor5-block-quote": "^38.0.0",
24
+ "@ckeditor/ckeditor5-editor-balloon": "^38.0.0",
25
+ "@ckeditor/ckeditor5-editor-classic": "^38.0.0",
26
+ "@ckeditor/ckeditor5-engine": "^38.0.0",
27
+ "@ckeditor/ckeditor5-enter": "^38.0.0",
28
+ "@ckeditor/ckeditor5-essentials": "^38.0.0",
29
+ "@ckeditor/ckeditor5-find-and-replace": "^38.0.0",
30
+ "@ckeditor/ckeditor5-font": "^38.0.0",
31
+ "@ckeditor/ckeditor5-heading": "^38.0.0",
32
+ "@ckeditor/ckeditor5-horizontal-line": "^38.0.0",
33
+ "@ckeditor/ckeditor5-image": "^38.0.0",
34
+ "@ckeditor/ckeditor5-link": "^38.0.0",
35
+ "@ckeditor/ckeditor5-list": "^38.0.0",
36
+ "@ckeditor/ckeditor5-mention": "^38.0.0",
37
+ "@ckeditor/ckeditor5-paragraph": "^38.0.0",
38
+ "@ckeditor/ckeditor5-source-editing": "^38.0.0",
39
+ "@ckeditor/ckeditor5-table": "^38.0.0",
40
+ "@ckeditor/ckeditor5-typing": "^38.0.0",
41
41
  "@types/color-convert": "2.0.0",
42
42
  "typescript": "^4.8.4",
43
43
  "webpack": "^5.58.1",
package/src/editorui/poweredby.d.ts CHANGED
@@ -8,7 +8,12 @@
8
8
  import type { Editor } from '@ckeditor/ckeditor5-core';
9
9
  declare const PoweredBy_base: {
10
10
  new (): import("@ckeditor/ckeditor5-utils").DomEmitter;
11
- prototype: import("@ckeditor/ckeditor5-utils").DomEmitter;
11
+ prototype: import("@ckeditor/ckeditor5-utils").DomEmitter; /**
12
+ * Creates a "powered by" helper for a given editor. The feature is initialized on Editor#ready
13
+ * event.
14
+ *
15
+ * @param editor
16
+ */
12
17
  };
13
18
  /**
14
19
  * A helper that enables the "powered by" feature in the editor and renders a link to the project's
package/src/editorui/poweredby.js CHANGED
@@ -12,6 +12,7 @@ const ICON_WIDTH = 53;
12
12
  const ICON_HEIGHT = 10;
13
13
  const NARROW_ROOT_HEIGHT_THRESHOLD = 50;
14
14
  const NARROW_ROOT_WIDTH_THRESHOLD = 350;
15
+ const DEFAULT_LABEL = 'Powered by';
15
16
  const OFF_THE_SCREEN_POSITION = {
16
17
  top: -99999,
17
18
  left: -99999,
@@ -94,7 +95,8 @@ export default class PoweredBy extends DomEmitterMixin() {
94
95
  _createBalloonView() {
95
96
  const editor = this.editor;
96
97
  const balloon = this._balloonView = new BalloonPanelView();
97
- const view = new PoweredByView(editor.locale);
98
+ const poweredByConfig = getNormalizedConfig(editor);
99
+ const view = new PoweredByView(editor.locale, poweredByConfig.label);
98
100
  balloon.content.add(view);
99
101
  balloon.set({
100
102
  class: 'ck-powered-by-balloon'
@@ -158,8 +160,9 @@ class PoweredByView extends View {
158
160
  * Created an instance of the "powered by" view.
159
161
  *
160
162
  * @param locale The localization services instance.
163
+ * @param label The label text.
161
164
  */
162
- constructor(locale) {
165
+ constructor(locale, label) {
163
166
  super(locale);
164
167
  const iconView = new IconView();
165
168
  const bind = this.bindTemplate;
@@ -191,13 +194,15 @@ class PoweredByView extends View {
191
194
  tabindex: '-1'
192
195
  },
193
196
  children: [
194
- {
195
- tag: 'span',
196
- attributes: {
197
- class: ['ck', 'ck-powered-by__label']
198
- },
199
- children: ['Powered by']
200
- },
197
+ ...label ? [
198
+ {
199
+ tag: 'span',
200
+ attributes: {
201
+ class: ['ck', 'ck-powered-by__label']
202
+ },
203
+ children: [label]
204
+ }
205
+ ] : [],
201
206
  iconView
202
207
  ],
203
208
  on: {
@@ -277,6 +282,7 @@ function getNormalizedConfig(editor) {
277
282
  const position = userConfig && userConfig.position || 'border';
278
283
  return {
279
284
  position,
285
+ label: DEFAULT_LABEL,
280
286
  verticalOffset: position === 'inside' ? 5 : 0,
281
287
  horizontalOffset: 5,
282
288
  side: editor.locale.contentLanguageDirection === 'ltr' ? 'right' : 'left',
package/theme/globals/_poweredby.css CHANGED
@@ -5,8 +5,8 @@
5
5
 
6
6
  :root {
7
7
  --ck-powered-by-line-height: 10px;
8
- --ck-powered-by-padding-top: 2px;
9
- --ck-powered-by-padding-left: 4px;
8
+ --ck-powered-by-padding-vertical: 2px;
9
+ --ck-powered-by-padding-horizontal: 4px;
10
10
  --ck-powered-by-text-color: hsl(0, 0%, 31%);
11
11
  --ck-powered-by-border-radius: var(--ck-border-radius);
12
12
  --ck-powered-by-background: hsl(0, 0%, 100%);
@@ -31,7 +31,7 @@
31
31
  opacity: .66;
32
32
  filter: grayscale(80%);
33
33
  line-height: var(--ck-powered-by-line-height);
34
- padding: var(--ck-powered-by-padding-top) var(--ck-powered-by-padding-left);
34
+ padding: var(--ck-powered-by-padding-vertical) var(--ck-powered-by-padding-horizontal);
35
35
  }
36
36
 
37
37
  & .ck-powered-by__label {
@@ -62,6 +62,7 @@
62
62
 
63
63
  &[class*="position_border"] {
64
64
  border: var(--ck-focus-ring);
65
+ border-color: var(--ck-powered-by-border-color);
65
66
  }
66
67
  }
67
68