diff --git a/tests/view/manual/inline-filler-removal.js b/tests/view/manual/inline-filler-removal.js
index b7c7fbf56..a03f34e8d 100644
--- a/tests/view/manual/inline-filler-removal.js
+++ b/tests/view/manual/inline-filler-removal.js
@@ -17,21 +17,29 @@ ClassicEditor
.then( editor => {
window.editor = editor;
- let fillerRemoval = true;
+ let isComposing = true;
// Prevent stealing the focus.
- document.querySelector( '#filler-removal-toggle' ).addEventListener( 'mousedown', evt => {
+ document.querySelector( '#composition-toggle' ).addEventListener( 'mousedown', evt => {
evt.preventDefault();
} );
- document.querySelector( '#filler-removal-toggle' ).addEventListener( 'click', evt => {
- editor.editing.view._renderer.isComposing = fillerRemoval;
- console.log( `Filler removal is now ${ fillerRemoval ? 'blocked' : 'allowed' }.` );
- fillerRemoval = !fillerRemoval;
+ document.querySelector( '#composition-toggle' ).addEventListener( 'click', evt => {
+ editor.editing.view._renderer.isComposing = isComposing;
+ console.log( `Composition is ${ isComposing ? 'on' : 'off' } (toggle button).` );
+ isComposing = !isComposing;
// Prevent stealing the focus.
evt.preventDefault();
} );
+
+ editor.editing.view.document.on( 'compositionstart', () => {
+ console.log( 'Composition is on (native event).' );
+ } );
+
+ editor.editing.view.document.on( 'compositionend', () => {
+ console.log( 'Composition is off (native event).' );
+ } );
} )
.catch( err => {
console.error( err.stack );
diff --git a/tests/view/manual/inline-filler-removal.md b/tests/view/manual/inline-filler-removal.md
index 443d1490d..5f1eec53c 100644
--- a/tests/view/manual/inline-filler-removal.md
+++ b/tests/view/manual/inline-filler-removal.md
@@ -1,13 +1,13 @@
# Inline filler removal
-Check whether inline filler is properly removed when typing inside empty inline elements.
+Check whether inline filler is properly removed when typing inside empty inline elements:
-By default inline filler should be removed when anything is typed inside empty inline element.
+* By default inline filler should be removed when anything is typed inside empty inline element.
+* During composition, inline filler should not be removed until composition ends.
-You may alter this behaviour by clicking **Toggle inline filler removal** (this emulates composition) which
-will result in inline filler not being removed while typing inside empty inline element. Click again to restore
-default behaviour - filler from non empty element should be removed on focus/typing.
+You may emulate composition by clicking **Toggle composition** or use e.g. Spanish or Japanese keyboard
+(the composition state is logged in the browser dev console).
-**Notice:** Keep in mind that clicking somewhere inside editor will automatically end composition. So the case when
-filler removal is blocked and caret is placed in different nodes is not reproducible during normal usage
-(here it results in spanning inline fillers in focused nodes).
+**Notice:** While emulating composition (or if you are able to create situation in which `compositionend` is not fired properly),
+inline filler should behave as described above in the inline elements, but should not be inserted in other non-empty elements.
+Also there should by always maximum one inline filler in the whole content.