-
Notifications
You must be signed in to change notification settings - Fork 3.6k
/
editableelement.ts
114 lines (102 loc) · 3.69 KB
/
editableelement.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
/**
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/**
* @module engine/view/editableelement
*/
import ContainerElement from './containerelement.js';
import { ObservableMixin } from '@ckeditor/ckeditor5-utils';
import type { ViewSelectionChangeEvent } from './selection.js';
import type { ElementAttributes } from './element.js';
import type Document from './document.js';
import type Node from './node.js';
/**
* Editable element which can be a {@link module:engine/view/rooteditableelement~RootEditableElement root}
* or nested editable area in the editor.
*
* Editable is automatically read-only when its {@link module:engine/view/document~Document Document} is read-only.
*
* The constructor of this class shouldn't be used directly. To create new `EditableElement` use the
* {@link module:engine/view/downcastwriter~DowncastWriter#createEditableElement `downcastWriter#createEditableElement()`} method.
*/
export default class EditableElement extends ObservableMixin( ContainerElement ) {
/**
* Whether the editable is in read-write or read-only mode.
*
* @observable
*/
declare public isReadOnly: boolean;
/**
* Whether the editable is focused.
*
* This property updates when {@link module:engine/view/document~Document#isFocused document.isFocused} or view
* selection is changed.
*
* @readonly
* @observable
*/
declare public isFocused: boolean;
/**
* Placeholder of editable element.
*
* ```ts
* editor.editing.view.document.getRoot( 'main' ).placeholder = 'New placeholder';
* ```
*
* @observable
*/
declare public placeholder?: string;
/**
* Creates an editable element.
*
* @see module:engine/view/downcastwriter~DowncastWriter#createEditableElement
* @internal
* @param document The document instance to which this element belongs.
* @param name Node name.
* @param attrs Collection of attributes.
* @param children A list of nodes to be inserted into created element.
*/
constructor(
document: Document,
name: string,
attributes?: ElementAttributes,
children?: Node | Iterable<Node>
) {
super( document, name, attributes, children );
this.set( 'isReadOnly', false );
this.set( 'isFocused', false );
this.set( 'placeholder', undefined );
this.bind( 'isReadOnly' ).to( document );
this.bind( 'isFocused' ).to(
document,
'isFocused',
isFocused => isFocused && document.selection.editableElement == this
);
// Update focus state based on selection changes.
this.listenTo<ViewSelectionChangeEvent>( document.selection, 'change', () => {
this.isFocused = document.isFocused && document.selection.editableElement == this;
} );
}
public destroy(): void {
this.stopListening();
}
}
// The magic of type inference using `is` method is centralized in `TypeCheckable` class.
// Proper overload would interfere with that.
EditableElement.prototype.is = function( type: string, name?: string ): boolean {
if ( !name ) {
return type === 'editableElement' || type === 'view:editableElement' ||
// From super.is(). This is highly utilised method and cannot call super. See ckeditor/ckeditor5#6529.
type === 'containerElement' || type === 'view:containerElement' ||
type === 'element' || type === 'view:element' ||
type === 'node' || type === 'view:node';
} else {
return name === this.name && (
type === 'editableElement' || type === 'view:editableElement' ||
// From super.is(). This is highly utilised method and cannot call super. See ckeditor/ckeditor5#6529.
type === 'containerElement' || type === 'view:containerElement' ||
type === 'element' || type === 'view:element'
);
}
};