-
Notifications
You must be signed in to change notification settings - Fork 3.6k
/
blockquoteediting.ts
146 lines (117 loc) · 4.21 KB
/
blockquoteediting.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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
/**
* @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 block-quote/blockquoteediting
*/
import { Plugin } from 'ckeditor5/src/core.js';
import { Enter, type ViewDocumentEnterEvent } from 'ckeditor5/src/enter.js';
import { Delete, type ViewDocumentDeleteEvent } from 'ckeditor5/src/typing.js';
import BlockQuoteCommand from './blockquotecommand.js';
/**
* The block quote editing.
*
* Introduces the `'blockQuote'` command and the `'blockQuote'` model element.
*
* @extends module:core/plugin~Plugin
*/
export default class BlockQuoteEditing extends Plugin {
/**
* @inheritDoc
*/
public static get pluginName() {
return 'BlockQuoteEditing' as const;
}
/**
* @inheritDoc
*/
public static get requires() {
return [ Enter, Delete ] as const;
}
/**
* @inheritDoc
*/
public init(): void {
const editor = this.editor;
const schema = editor.model.schema;
editor.commands.add( 'blockQuote', new BlockQuoteCommand( editor ) );
schema.register( 'blockQuote', {
inheritAllFrom: '$container'
} );
editor.conversion.elementToElement( { model: 'blockQuote', view: 'blockquote' } );
// Postfixer which cleans incorrect model states connected with block quotes.
editor.model.document.registerPostFixer( writer => {
const changes = editor.model.document.differ.getChanges();
for ( const entry of changes ) {
if ( entry.type == 'insert' ) {
const element = entry.position.nodeAfter;
if ( !element ) {
// We are inside a text node.
continue;
}
if ( element.is( 'element', 'blockQuote' ) && element.isEmpty ) {
// Added an empty blockQuote - remove it.
writer.remove( element );
return true;
} else if ( element.is( 'element', 'blockQuote' ) && !schema.checkChild( entry.position, element ) ) {
// Added a blockQuote in incorrect place. Unwrap it so the content inside is not lost.
writer.unwrap( element );
return true;
} else if ( element.is( 'element' ) ) {
// Just added an element. Check that all children meet the scheme rules.
const range = writer.createRangeIn( element );
for ( const child of range.getItems() ) {
if (
child.is( 'element', 'blockQuote' ) &&
!schema.checkChild( writer.createPositionBefore( child ), child )
) {
writer.unwrap( child );
return true;
}
}
}
} else if ( entry.type == 'remove' ) {
const parent = entry.position.parent;
if ( parent.is( 'element', 'blockQuote' ) && parent.isEmpty ) {
// Something got removed and now blockQuote is empty. Remove the blockQuote as well.
writer.remove( parent );
return true;
}
}
}
return false;
} );
const viewDocument = this.editor.editing.view.document;
const selection = editor.model.document.selection;
const blockQuoteCommand: BlockQuoteCommand = editor.commands.get( 'blockQuote' )!;
// Overwrite default Enter key behavior.
// If Enter key is pressed with selection collapsed in empty block inside a quote, break the quote.
this.listenTo<ViewDocumentEnterEvent>( viewDocument, 'enter', ( evt, data ) => {
if ( !selection.isCollapsed || !blockQuoteCommand.value ) {
return;
}
const positionParent = selection.getLastPosition()!.parent;
if ( positionParent.isEmpty ) {
editor.execute( 'blockQuote' );
editor.editing.view.scrollToTheSelection();
data.preventDefault();
evt.stop();
}
}, { context: 'blockquote' } );
// Overwrite default Backspace key behavior.
// If Backspace key is pressed with selection collapsed in first empty block inside a quote, break the quote.
this.listenTo<ViewDocumentDeleteEvent>( viewDocument, 'delete', ( evt, data ) => {
if ( data.direction != 'backward' || !selection.isCollapsed || !blockQuoteCommand!.value ) {
return;
}
const positionParent = selection.getLastPosition()!.parent;
if ( positionParent.isEmpty && !positionParent.previousSibling ) {
editor.execute( 'blockQuote' );
editor.editing.view.scrollToTheSelection();
data.preventDefault();
evt.stop();
}
}, { context: 'blockquote' } );
}
}