@ckeditor/ckeditor5-editor-balloon 38.1.0 → 38.1.1
Sign up to get free protection for your applications and to get access to all the features.
- 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 +92 -92
- 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,92 +1,92 @@
|
|
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, if any was configured.
|
72
|
-
*/
|
73
|
-
_initPlaceholder() {
|
74
|
-
const editor = this.editor;
|
75
|
-
const editingView = editor.editing.view;
|
76
|
-
const editingRoot = editingView.document.getRoot();
|
77
|
-
const sourceElement = editor.sourceElement;
|
78
|
-
const placeholder = editor.config.get('placeholder');
|
79
|
-
if (placeholder) {
|
80
|
-
const placeholderText = typeof placeholder === 'string' ? placeholder : placeholder[editingRoot.rootName];
|
81
|
-
if (placeholderText) {
|
82
|
-
enablePlaceholder({
|
83
|
-
view: editingView,
|
84
|
-
element: editingRoot,
|
85
|
-
text: placeholderText,
|
86
|
-
isDirectHost: false,
|
87
|
-
keepOnFocus: true
|
88
|
-
});
|
89
|
-
}
|
90
|
-
}
|
91
|
-
}
|
92
|
-
}
|
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, if any was configured.
|
72
|
+
*/
|
73
|
+
_initPlaceholder() {
|
74
|
+
const editor = this.editor;
|
75
|
+
const editingView = editor.editing.view;
|
76
|
+
const editingRoot = editingView.document.getRoot();
|
77
|
+
const sourceElement = editor.sourceElement;
|
78
|
+
const placeholder = editor.config.get('placeholder');
|
79
|
+
if (placeholder) {
|
80
|
+
const placeholderText = typeof placeholder === 'string' ? placeholder : placeholder[editingRoot.rootName];
|
81
|
+
if (placeholderText) {
|
82
|
+
enablePlaceholder({
|
83
|
+
view: editingView,
|
84
|
+
element: editingRoot,
|
85
|
+
text: placeholderText,
|
86
|
+
isDirectHost: false,
|
87
|
+
keepOnFocus: true
|
88
|
+
});
|
89
|
+
}
|
90
|
+
}
|
91
|
+
}
|
92
|
+
}
|
@@ -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';
|