@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.
- package/build/editor-balloon.js.map +1 -0
- package/package.json +2 -2
- package/src/ballooneditor.d.ts +177 -177
- package/src/ballooneditor.js +229 -229
- package/src/ballooneditorui.d.ts +42 -42
- package/src/ballooneditorui.js +91 -91
- package/src/ballooneditoruiview.d.ts +32 -32
- package/src/ballooneditoruiview.js +37 -37
- package/src/index.d.ts +8 -8
- package/src/index.js +8 -8
package/src/ballooneditorui.js
CHANGED
@@ -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';
|