@ckeditor/ckeditor5-editor-balloon 39.0.2 → 40.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.
@@ -1,91 +1,91 @@
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
- import { EditorUI } from 'ckeditor5/src/ui';
6
- import { enablePlaceholder } from 'ckeditor5/src/engine';
7
- /**
8
- * The balloon editor UI class.
9
- */
10
- export default class BalloonEditorUI extends EditorUI {
11
- /**
12
- * Creates an instance of the balloon editor UI class.
13
- *
14
- * @param editor The editor instance.
15
- * @param view The view of the UI.
16
- */
17
- constructor(editor, view) {
18
- super(editor);
19
- this.view = view;
20
- }
21
- /**
22
- * @inheritDoc
23
- */
24
- get element() {
25
- return this.view.editable.element;
26
- }
27
- /**
28
- * Initializes the UI.
29
- */
30
- init() {
31
- const editor = this.editor;
32
- const view = this.view;
33
- const editingView = editor.editing.view;
34
- const editable = view.editable;
35
- const editingRoot = editingView.document.getRoot();
36
- // The editable UI and editing root should share the same name. Then name is used
37
- // to recognize the particular editable, for instance in ARIA attributes.
38
- editable.name = editingRoot.rootName;
39
- view.render();
40
- // The editable UI element in DOM is available for sure only after the editor UI view has been rendered.
41
- // But it can be available earlier if a DOM element has been passed to BalloonEditor.create().
42
- const editableElement = editable.element;
43
- // Register the editable UI view in the editor. A single editor instance can aggregate multiple
44
- // editable areas (roots) but the balloon editor has only one.
45
- this.setEditableElement(editable.name, editableElement);
46
- // Let the editable UI element respond to the changes in the global editor focus
47
- // tracker. It has been added to the same tracker a few lines above but, in reality, there are
48
- // many focusable areas in the editor, like balloons, toolbars or dropdowns and as long
49
- // as they have focus, the editable should act like it is focused too (although technically
50
- // it isn't), e.g. by setting the proper CSS class, visually announcing focus to the user.
51
- // Doing otherwise will result in editable focus styles disappearing, once e.g. the
52
- // toolbar gets focused.
53
- editable.bind('isFocused').to(this.focusTracker);
54
- // Bind the editable UI element to the editing view, making it an end– and entry–point
55
- // of the editor's engine. This is where the engine meets the UI.
56
- editingView.attachDomRoot(editableElement);
57
- this._initPlaceholder();
58
- this.fire('ready');
59
- }
60
- /**
61
- * @inheritDoc
62
- */
63
- destroy() {
64
- super.destroy();
65
- const view = this.view;
66
- const editingView = this.editor.editing.view;
67
- editingView.detachDomRoot(view.editable.name);
68
- view.destroy();
69
- }
70
- /**
71
- * Enable the placeholder text on the editing root.
72
- */
73
- _initPlaceholder() {
74
- const editor = this.editor;
75
- const editingView = editor.editing.view;
76
- const editingRoot = editingView.document.getRoot();
77
- const placeholder = editor.config.get('placeholder');
78
- if (placeholder) {
79
- const placeholderText = typeof placeholder === 'string' ? placeholder : placeholder[editingRoot.rootName];
80
- if (placeholderText) {
81
- editingRoot.placeholder = placeholderText;
82
- }
83
- }
84
- enablePlaceholder({
85
- view: editingView,
86
- element: editingRoot,
87
- isDirectHost: false,
88
- keepOnFocus: true
89
- });
90
- }
91
- }
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
+ import { EditorUI } from 'ckeditor5/src/ui';
6
+ import { enablePlaceholder } from 'ckeditor5/src/engine';
7
+ /**
8
+ * The balloon editor UI class.
9
+ */
10
+ export default class BalloonEditorUI extends EditorUI {
11
+ /**
12
+ * Creates an instance of the balloon editor UI class.
13
+ *
14
+ * @param editor The editor instance.
15
+ * @param view The view of the UI.
16
+ */
17
+ constructor(editor, view) {
18
+ super(editor);
19
+ this.view = view;
20
+ }
21
+ /**
22
+ * @inheritDoc
23
+ */
24
+ get element() {
25
+ return this.view.editable.element;
26
+ }
27
+ /**
28
+ * Initializes the UI.
29
+ */
30
+ init() {
31
+ const editor = this.editor;
32
+ const view = this.view;
33
+ const editingView = editor.editing.view;
34
+ const editable = view.editable;
35
+ const editingRoot = editingView.document.getRoot();
36
+ // The editable UI and editing root should share the same name. Then name is used
37
+ // to recognize the particular editable, for instance in ARIA attributes.
38
+ editable.name = editingRoot.rootName;
39
+ view.render();
40
+ // The editable UI element in DOM is available for sure only after the editor UI view has been rendered.
41
+ // But it can be available earlier if a DOM element has been passed to BalloonEditor.create().
42
+ const editableElement = editable.element;
43
+ // Register the editable UI view in the editor. A single editor instance can aggregate multiple
44
+ // editable areas (roots) but the balloon editor has only one.
45
+ this.setEditableElement(editable.name, editableElement);
46
+ // Let the editable UI element respond to the changes in the global editor focus
47
+ // tracker. It has been added to the same tracker a few lines above but, in reality, there are
48
+ // many focusable areas in the editor, like balloons, toolbars or dropdowns and as long
49
+ // as they have focus, the editable should act like it is focused too (although technically
50
+ // it isn't), e.g. by setting the proper CSS class, visually announcing focus to the user.
51
+ // Doing otherwise will result in editable focus styles disappearing, once e.g. the
52
+ // toolbar gets focused.
53
+ editable.bind('isFocused').to(this.focusTracker);
54
+ // Bind the editable UI element to the editing view, making it an end– and entry–point
55
+ // of the editor's engine. This is where the engine meets the UI.
56
+ editingView.attachDomRoot(editableElement);
57
+ this._initPlaceholder();
58
+ this.fire('ready');
59
+ }
60
+ /**
61
+ * @inheritDoc
62
+ */
63
+ destroy() {
64
+ super.destroy();
65
+ const view = this.view;
66
+ const editingView = this.editor.editing.view;
67
+ editingView.detachDomRoot(view.editable.name);
68
+ view.destroy();
69
+ }
70
+ /**
71
+ * Enable the placeholder text on the editing root.
72
+ */
73
+ _initPlaceholder() {
74
+ const editor = this.editor;
75
+ const editingView = editor.editing.view;
76
+ const editingRoot = editingView.document.getRoot();
77
+ const placeholder = editor.config.get('placeholder');
78
+ if (placeholder) {
79
+ const placeholderText = typeof placeholder === 'string' ? placeholder : placeholder[editingRoot.rootName];
80
+ if (placeholderText) {
81
+ editingRoot.placeholder = placeholderText;
82
+ }
83
+ }
84
+ enablePlaceholder({
85
+ view: editingView,
86
+ element: editingRoot,
87
+ isDirectHost: false,
88
+ keepOnFocus: true
89
+ });
90
+ }
91
+ }
@@ -1,32 +1,32 @@
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 editor-balloon/ballooneditoruiview
7
- */
8
- import { EditorUIView, InlineEditableUIView } from 'ckeditor5/src/ui';
9
- import type { Locale } from 'ckeditor5/src/utils';
10
- import type { View } from 'ckeditor5/src/engine';
11
- /**
12
- * Contextual editor UI view. Uses the {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView}.
13
- */
14
- export default class BalloonEditorUIView extends EditorUIView {
15
- /**
16
- * Editable UI view.
17
- */
18
- readonly editable: InlineEditableUIView;
19
- /**
20
- * Creates an instance of the balloon editor UI view.
21
- *
22
- * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
23
- * @param editingView The editing view instance this view is related to.
24
- * @param editableElement The editable element. If not specified, it will be automatically created by
25
- * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
26
- */
27
- constructor(locale: Locale, editingView: View, editableElement?: HTMLElement);
28
- /**
29
- * @inheritDoc
30
- */
31
- render(): void;
32
- }
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 editor-balloon/ballooneditoruiview
7
+ */
8
+ import { EditorUIView, InlineEditableUIView } from 'ckeditor5/src/ui';
9
+ import type { Locale } from 'ckeditor5/src/utils';
10
+ import type { View } from 'ckeditor5/src/engine';
11
+ /**
12
+ * Contextual editor UI view. Uses the {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView}.
13
+ */
14
+ export default class BalloonEditorUIView extends EditorUIView {
15
+ /**
16
+ * Editable UI view.
17
+ */
18
+ readonly editable: InlineEditableUIView;
19
+ /**
20
+ * Creates an instance of the balloon editor UI view.
21
+ *
22
+ * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
23
+ * @param editingView The editing view instance this view is related to.
24
+ * @param editableElement The editable element. If not specified, it will be automatically created by
25
+ * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
26
+ */
27
+ constructor(locale: Locale, editingView: View, editableElement?: HTMLElement);
28
+ /**
29
+ * @inheritDoc
30
+ */
31
+ render(): void;
32
+ }
@@ -1,37 +1,37 @@
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 editor-balloon/ballooneditoruiview
7
- */
8
- import { EditorUIView, InlineEditableUIView } from 'ckeditor5/src/ui';
9
- /**
10
- * Contextual editor UI view. Uses the {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView}.
11
- */
12
- export default class BalloonEditorUIView extends EditorUIView {
13
- /**
14
- * Creates an instance of the balloon editor UI view.
15
- *
16
- * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
17
- * @param editingView The editing view instance this view is related to.
18
- * @param editableElement The editable element. If not specified, it will be automatically created by
19
- * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
20
- */
21
- constructor(locale, editingView, editableElement) {
22
- super(locale);
23
- const t = locale.t;
24
- this.editable = new InlineEditableUIView(locale, editingView, editableElement, {
25
- label: editableView => {
26
- return t('Rich Text Editor. Editing area: %0', editableView.name);
27
- }
28
- });
29
- }
30
- /**
31
- * @inheritDoc
32
- */
33
- render() {
34
- super.render();
35
- this.registerChild(this.editable);
36
- }
37
- }
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 editor-balloon/ballooneditoruiview
7
+ */
8
+ import { EditorUIView, InlineEditableUIView } from 'ckeditor5/src/ui';
9
+ /**
10
+ * Contextual editor UI view. Uses the {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView}.
11
+ */
12
+ export default class BalloonEditorUIView extends EditorUIView {
13
+ /**
14
+ * Creates an instance of the balloon editor UI view.
15
+ *
16
+ * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
17
+ * @param editingView The editing view instance this view is related to.
18
+ * @param editableElement The editable element. If not specified, it will be automatically created by
19
+ * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
20
+ */
21
+ constructor(locale, editingView, editableElement) {
22
+ super(locale);
23
+ const t = locale.t;
24
+ this.editable = new InlineEditableUIView(locale, editingView, editableElement, {
25
+ label: editableView => {
26
+ return t('Rich Text Editor. Editing area: %0', editableView.name);
27
+ }
28
+ });
29
+ }
30
+ /**
31
+ * @inheritDoc
32
+ */
33
+ render() {
34
+ super.render();
35
+ this.registerChild(this.editable);
36
+ }
37
+ }
package/src/index.d.ts CHANGED
@@ -1,8 +1,8 @@
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 editor-balloon
7
- */
8
- export { default as BalloonEditor } from './ballooneditor';
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 editor-balloon
7
+ */
8
+ export { default as BalloonEditor } from './ballooneditor';
package/src/index.js CHANGED
@@ -1,8 +1,8 @@
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 editor-balloon
7
- */
8
- export { default as BalloonEditor } from './ballooneditor';
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 editor-balloon
7
+ */
8
+ export { default as BalloonEditor } from './ballooneditor';