@ckeditor/ckeditor5-editor-balloon 39.0.1 → 40.0.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -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';