@ckeditor/ckeditor5-minimap 38.1.1 → 38.2.0-alpha.1

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.
@@ -1,85 +1,85 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * @module minimap/minimapconfig
7
- */
8
- /**
9
- * The configuration of the {@link module:minimap/minimap~Minimap} feature.
10
- *
11
- * ```ts
12
- * ClassicEditor
13
- * .create( {
14
- * minimap: ... // Minimap feature config.
15
- * } )
16
- * .then( ... )
17
- * .catch( ... );
18
- * ```
19
- *
20
- * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
21
- */
22
- export interface MinimapConfig {
23
- /**
24
- * The DOM element container for the minimap.
25
- *
26
- * **Note**: The container must have a fixed `width` and `overflow: hidden` for the minimap to work correctly.
27
- */
28
- container: HTMLElement;
29
- /**
30
- * When set to `true`, the minimap will render content as simple boxes instead of replicating the look of the content (default).
31
- */
32
- useSimplePreview?: boolean;
33
- /**
34
- * Extra CSS class (or classes) that will be set internally on the `<body>` element of the `<iframe>` enclosing the minimap.
35
- *
36
- * By default, the minimap feature will attempt to clone all website styles and re-apply them in the `<iframe>` for the best accuracy.
37
- * However, this may not work if the content of your editor inherits the styles from parent containers, resulting in inconsistent
38
- * look and imprecise scrolling of the minimap.
39
- *
40
- * This optional configuration can address these issues by ensuring the same CSS rules apply to the content of the minimap
41
- * and the original content of the editor.
42
- *
43
- * For instance, consider the following DOM structure:
44
- *
45
- * ```html
46
- * <div class="website">
47
- * <!-- ... -->
48
- * <div class="styled-container">
49
- * <!-- ... -->
50
- * <div id="editor">
51
- * <!-- content of the editor -->
52
- * </div>
53
- * </div>
54
- * <!-- ... -->
55
- * </div>
56
- * ```
57
- *
58
- * and the following CSS styles:
59
- *
60
- * ```css
61
- * .website p {
62
- * font-size: 13px;
63
- * }
64
- *
65
- * .styled-container p {
66
- * color: #ccc;
67
- * }
68
- * ```
69
- *
70
- * To maintain the consistency of styling (`font-size` and `color` of paragraphs), you will need to pass the CSS class names
71
- * of these containers:
72
- *
73
- * ```ts
74
- * ClassicEditor
75
- * .create( document.getElementById( 'editor' ), {
76
- * minimap: {
77
- * extraClasses: 'website styled-container'
78
- * }
79
- * } )
80
- * .then( ... )
81
- * .catch( ... );
82
- * ```
83
- */
84
- extraClasses?: string;
85
- }
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module minimap/minimapconfig
7
+ */
8
+ /**
9
+ * The configuration of the {@link module:minimap/minimap~Minimap} feature.
10
+ *
11
+ * ```ts
12
+ * ClassicEditor
13
+ * .create( {
14
+ * minimap: ... // Minimap feature config.
15
+ * } )
16
+ * .then( ... )
17
+ * .catch( ... );
18
+ * ```
19
+ *
20
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
21
+ */
22
+ export interface MinimapConfig {
23
+ /**
24
+ * The DOM element container for the minimap.
25
+ *
26
+ * **Note**: The container must have a fixed `width` and `overflow: hidden` for the minimap to work correctly.
27
+ */
28
+ container: HTMLElement;
29
+ /**
30
+ * When set to `true`, the minimap will render content as simple boxes instead of replicating the look of the content (default).
31
+ */
32
+ useSimplePreview?: boolean;
33
+ /**
34
+ * Extra CSS class (or classes) that will be set internally on the `<body>` element of the `<iframe>` enclosing the minimap.
35
+ *
36
+ * By default, the minimap feature will attempt to clone all website styles and re-apply them in the `<iframe>` for the best accuracy.
37
+ * However, this may not work if the content of your editor inherits the styles from parent containers, resulting in inconsistent
38
+ * look and imprecise scrolling of the minimap.
39
+ *
40
+ * This optional configuration can address these issues by ensuring the same CSS rules apply to the content of the minimap
41
+ * and the original content of the editor.
42
+ *
43
+ * For instance, consider the following DOM structure:
44
+ *
45
+ * ```html
46
+ * <div class="website">
47
+ * <!-- ... -->
48
+ * <div class="styled-container">
49
+ * <!-- ... -->
50
+ * <div id="editor">
51
+ * <!-- content of the editor -->
52
+ * </div>
53
+ * </div>
54
+ * <!-- ... -->
55
+ * </div>
56
+ * ```
57
+ *
58
+ * and the following CSS styles:
59
+ *
60
+ * ```css
61
+ * .website p {
62
+ * font-size: 13px;
63
+ * }
64
+ *
65
+ * .styled-container p {
66
+ * color: #ccc;
67
+ * }
68
+ * ```
69
+ *
70
+ * To maintain the consistency of styling (`font-size` and `color` of paragraphs), you will need to pass the CSS class names
71
+ * of these containers:
72
+ *
73
+ * ```ts
74
+ * ClassicEditor
75
+ * .create( document.getElementById( 'editor' ), {
76
+ * minimap: {
77
+ * extraClasses: 'website styled-container'
78
+ * }
79
+ * } )
80
+ * .then( ... )
81
+ * .catch( ... );
82
+ * ```
83
+ */
84
+ extraClasses?: string;
85
+ }
@@ -1,5 +1,5 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- export {};
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ export {};
@@ -1,54 +1,54 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * @module minimap/minimapiframeview
7
- */
8
- import { IframeView } from 'ckeditor5/src/ui';
9
- import { type Locale } from 'ckeditor5/src/utils';
10
- import type { MinimapViewOptions } from './minimapview';
11
- /**
12
- * The internal `<iframe>` view that hosts the minimap content.
13
- *
14
- * @internal
15
- */
16
- export default class MinimapIframeView extends IframeView {
17
- /**
18
- * The CSS `top` used to scroll the minimap.
19
- *
20
- * @readonly
21
- */
22
- top: number;
23
- /**
24
- * The CSS `height` of the iframe.
25
- *
26
- * @readonly
27
- */
28
- height: number;
29
- /**
30
- * Cached view constructor options for re-use in other methods.
31
- */
32
- private readonly _options;
33
- /**
34
- * Creates an instance of the internal minimap iframe.
35
- */
36
- constructor(locale: Locale, options: MinimapViewOptions);
37
- /**
38
- * @inheritDoc
39
- */
40
- render(): Promise<unknown>;
41
- /**
42
- * Sets the new height of the iframe.
43
- */
44
- setHeight(newHeight: number): void;
45
- /**
46
- * Sets the top offset of the iframe to move it around vertically.
47
- */
48
- setTopOffset(newOffset: number): void;
49
- /**
50
- * Sets the internal structure of the `<iframe>` readying it to display the
51
- * minimap element.
52
- */
53
- private _prepareDocument;
54
- }
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module minimap/minimapiframeview
7
+ */
8
+ import { IframeView } from 'ckeditor5/src/ui.js';
9
+ import { type Locale } from 'ckeditor5/src/utils.js';
10
+ import type { MinimapViewOptions } from './minimapview.js';
11
+ /**
12
+ * The internal `<iframe>` view that hosts the minimap content.
13
+ *
14
+ * @internal
15
+ */
16
+ export default class MinimapIframeView extends IframeView {
17
+ /**
18
+ * The CSS `top` used to scroll the minimap.
19
+ *
20
+ * @readonly
21
+ */
22
+ top: number;
23
+ /**
24
+ * The CSS `height` of the iframe.
25
+ *
26
+ * @readonly
27
+ */
28
+ height: number;
29
+ /**
30
+ * Cached view constructor options for re-use in other methods.
31
+ */
32
+ private readonly _options;
33
+ /**
34
+ * Creates an instance of the internal minimap iframe.
35
+ */
36
+ constructor(locale: Locale, options: MinimapViewOptions);
37
+ /**
38
+ * @inheritDoc
39
+ */
40
+ render(): Promise<unknown>;
41
+ /**
42
+ * Sets the new height of the iframe.
43
+ */
44
+ setHeight(newHeight: number): void;
45
+ /**
46
+ * Sets the top offset of the iframe to move it around vertically.
47
+ */
48
+ setTopOffset(newOffset: number): void;
49
+ /**
50
+ * Sets the internal structure of the `<iframe>` readying it to display the
51
+ * minimap element.
52
+ */
53
+ private _prepareDocument;
54
+ }
@@ -1,67 +1,67 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * @module minimap/minimapiframeview
7
- */
8
- import { IframeView } from 'ckeditor5/src/ui';
9
- import { toUnit } from 'ckeditor5/src/utils';
10
- const toPx = toUnit('px');
11
- /**
12
- * The internal `<iframe>` view that hosts the minimap content.
13
- *
14
- * @internal
15
- */
16
- export default class MinimapIframeView extends IframeView {
17
- /**
18
- * Creates an instance of the internal minimap iframe.
19
- */
20
- constructor(locale, options) {
21
- super(locale);
22
- const bind = this.bindTemplate;
23
- this.set('top', 0);
24
- this.set('height', 0);
25
- this._options = options;
26
- this.extendTemplate({
27
- attributes: {
28
- class: [
29
- 'ck-minimap__iframe'
30
- ],
31
- style: {
32
- top: bind.to('top', top => toPx(top)),
33
- height: bind.to('height', height => toPx(height))
34
- }
35
- }
36
- });
37
- }
38
- /**
39
- * @inheritDoc
40
- */
41
- render() {
42
- return super.render().then(() => {
43
- this._prepareDocument();
44
- });
45
- }
46
- /**
47
- * Sets the new height of the iframe.
48
- */
49
- setHeight(newHeight) {
50
- this.height = newHeight;
51
- }
52
- /**
53
- * Sets the top offset of the iframe to move it around vertically.
54
- */
55
- setTopOffset(newOffset) {
56
- this.top = newOffset;
57
- }
58
- /**
59
- * Sets the internal structure of the `<iframe>` readying it to display the
60
- * minimap element.
61
- */
62
- _prepareDocument() {
63
- const iframeDocument = this.element.contentWindow.document;
64
- const domRootClone = iframeDocument.adoptNode(this._options.domRootClone);
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module minimap/minimapiframeview
7
+ */
8
+ import { IframeView } from 'ckeditor5/src/ui.js';
9
+ import { toUnit } from 'ckeditor5/src/utils.js';
10
+ const toPx = toUnit('px');
11
+ /**
12
+ * The internal `<iframe>` view that hosts the minimap content.
13
+ *
14
+ * @internal
15
+ */
16
+ export default class MinimapIframeView extends IframeView {
17
+ /**
18
+ * Creates an instance of the internal minimap iframe.
19
+ */
20
+ constructor(locale, options) {
21
+ super(locale);
22
+ const bind = this.bindTemplate;
23
+ this.set('top', 0);
24
+ this.set('height', 0);
25
+ this._options = options;
26
+ this.extendTemplate({
27
+ attributes: {
28
+ class: [
29
+ 'ck-minimap__iframe'
30
+ ],
31
+ style: {
32
+ top: bind.to('top', top => toPx(top)),
33
+ height: bind.to('height', height => toPx(height))
34
+ }
35
+ }
36
+ });
37
+ }
38
+ /**
39
+ * @inheritDoc
40
+ */
41
+ render() {
42
+ return super.render().then(() => {
43
+ this._prepareDocument();
44
+ });
45
+ }
46
+ /**
47
+ * Sets the new height of the iframe.
48
+ */
49
+ setHeight(newHeight) {
50
+ this.height = newHeight;
51
+ }
52
+ /**
53
+ * Sets the top offset of the iframe to move it around vertically.
54
+ */
55
+ setTopOffset(newOffset) {
56
+ this.top = newOffset;
57
+ }
58
+ /**
59
+ * Sets the internal structure of the `<iframe>` readying it to display the
60
+ * minimap element.
61
+ */
62
+ _prepareDocument() {
63
+ const iframeDocument = this.element.contentWindow.document;
64
+ const domRootClone = iframeDocument.adoptNode(this._options.domRootClone);
65
65
  const boxStyles = this._options.useSimplePreview ? `
66
66
  .ck.ck-editor__editable_inline img {
67
67
  filter: contrast( 0 );
@@ -76,15 +76,15 @@ export default class MinimapIframeView extends IframeView {
76
76
  background: hsl(0, 0%, 60%) !important;
77
77
  color: hsl(0, 0%, 60%) !important;
78
78
  }
79
- ` : '';
80
- const pageStyles = this._options.pageStyles.map(definition => {
81
- if (typeof definition === 'string') {
82
- return `<style>${definition}</style>`;
83
- }
84
- else {
85
- return `<link rel="stylesheet" type="text/css" href="${definition.href}">`;
86
- }
87
- }).join('\n');
79
+ ` : '';
80
+ const pageStyles = this._options.pageStyles.map(definition => {
81
+ if (typeof definition === 'string') {
82
+ return `<style>${definition}</style>`;
83
+ }
84
+ else {
85
+ return `<link rel="stylesheet" type="text/css" href="${definition.href}">`;
86
+ }
87
+ }).join('\n');
88
88
  const html = `<!DOCTYPE html><html lang="en">
89
89
  <head>
90
90
  <meta charset="utf-8">
@@ -121,10 +121,10 @@ export default class MinimapIframeView extends IframeView {
121
121
  </style>
122
122
  </head>
123
123
  <body class="${this._options.extraClasses || ''}"></body>
124
- </html>`;
125
- iframeDocument.open();
126
- iframeDocument.write(html);
127
- iframeDocument.close();
128
- iframeDocument.body.appendChild(domRootClone);
129
- }
130
- }
124
+ </html>`;
125
+ iframeDocument.open();
126
+ iframeDocument.write(html);
127
+ iframeDocument.close();
128
+ iframeDocument.body.appendChild(domRootClone);
129
+ }
130
+ }
@@ -1,58 +1,58 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * @module minimap/minimappositiontrackerview
7
- */
8
- import { View } from 'ckeditor5/src/ui';
9
- import { type Locale } from 'ckeditor5/src/utils';
10
- /**
11
- * The position tracker visualizing the visible subset of the content. Displayed over the minimap.
12
- *
13
- * @internal
14
- */
15
- export default class MinimapPositionTrackerView extends View {
16
- /**
17
- * The CSS `height` of the tracker visualizing the subset of the content visible to the user.
18
- *
19
- * @readonly
20
- */
21
- height: number;
22
- /**
23
- * The CSS `top` of the tracker, used to move it vertically over the minimap.
24
- *
25
- * @readonly
26
- */
27
- top: number;
28
- /**
29
- * The scroll progress (in %) displayed over the tracker when being dragged by the user.
30
- *
31
- * @readonly
32
- */
33
- scrollProgress: number;
34
- /**
35
- * Indicates whether the tracker is being dragged by the user (e.g. using the mouse).
36
- *
37
- * @internal
38
- * @readonly
39
- */
40
- _isDragging: boolean;
41
- constructor(locale: Locale);
42
- /**
43
- * @inheritDoc
44
- */
45
- render(): void;
46
- /**
47
- * Sets the new height of the tracker to visualize the subset of the content visible to the user.
48
- */
49
- setHeight(newHeight: number): void;
50
- /**
51
- * Sets the top offset of the tracker to move it around vertically.
52
- */
53
- setTopOffset(newOffset: number): void;
54
- /**
55
- * Sets the scroll progress (in %) to inform the user using a label when the tracker is being dragged.
56
- */
57
- setScrollProgress(newProgress: number): void;
58
- }
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module minimap/minimappositiontrackerview
7
+ */
8
+ import { View } from 'ckeditor5/src/ui.js';
9
+ import { type Locale } from 'ckeditor5/src/utils.js';
10
+ /**
11
+ * The position tracker visualizing the visible subset of the content. Displayed over the minimap.
12
+ *
13
+ * @internal
14
+ */
15
+ export default class MinimapPositionTrackerView extends View {
16
+ /**
17
+ * The CSS `height` of the tracker visualizing the subset of the content visible to the user.
18
+ *
19
+ * @readonly
20
+ */
21
+ height: number;
22
+ /**
23
+ * The CSS `top` of the tracker, used to move it vertically over the minimap.
24
+ *
25
+ * @readonly
26
+ */
27
+ top: number;
28
+ /**
29
+ * The scroll progress (in %) displayed over the tracker when being dragged by the user.
30
+ *
31
+ * @readonly
32
+ */
33
+ scrollProgress: number;
34
+ /**
35
+ * Indicates whether the tracker is being dragged by the user (e.g. using the mouse).
36
+ *
37
+ * @internal
38
+ * @readonly
39
+ */
40
+ _isDragging: boolean;
41
+ constructor(locale: Locale);
42
+ /**
43
+ * @inheritDoc
44
+ */
45
+ render(): void;
46
+ /**
47
+ * Sets the new height of the tracker to visualize the subset of the content visible to the user.
48
+ */
49
+ setHeight(newHeight: number): void;
50
+ /**
51
+ * Sets the top offset of the tracker to move it around vertically.
52
+ */
53
+ setTopOffset(newOffset: number): void;
54
+ /**
55
+ * Sets the scroll progress (in %) to inform the user using a label when the tracker is being dragged.
56
+ */
57
+ setScrollProgress(newProgress: number): void;
58
+ }