Hide document outline and annotations when entering source editing mode

packages/ckeditor5-fullscreen/theme/fullscreen.css

@@ -67,8 +67,7 @@ Fullscreen layout:
 
 .ck-fullscreen__main-container .ck-fullscreen__editor .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
 	box-sizing: border-box;
-	min-width: calc(210mm + 2px);
-	max-width: calc(210mm + 2px);
+	width: calc(210mm + 2px);
 	min-height: 297mm;
 	height: fit-content;
 	padding: 20mm 12mm;
@@ -78,5 +77,5 @@ Fullscreen layout:
 }
 
 .ck-fullscreen__main-container .ck-fullscreen__editor .ck-source-editing-area {
-	min-width: calc(210mm + 2px);
+	width: calc(210mm + 2px);
 }

packages/ckeditor5-source-editing/src/sourceediting.ts

@@ -14,6 +14,8 @@ import { ButtonView, MenuBarMenuListItemButtonView, type Dialog } from 'ckeditor
 import { CKEditorError, createElement, ElementReplacer } from 'ckeditor5/src/utils.js';
 import { formatHtml } from './utils/formathtml.js';
 
+import type { Annotations } from '@ckeditor/ckeditor5-comments';
+
 import '../theme/sourceediting.css';
 
 const COMMAND_FORCE_DISABLE_ID = 'SourceEditingMode';
@@ -284,6 +286,8 @@ export default class SourceEditing extends Plugin {
 			this._dataFromRoots.set( rootName, data );
 		}
 
+		this._hideDocumentOutline();
+		this._refreshAnnotationsVisibility();
 		this._focusSourceEditing();
 	}
 
@@ -307,9 +311,39 @@ export default class SourceEditing extends Plugin {
 		this._replacedRoots.clear();
 		this._dataFromRoots.clear();
 
+		this._showDocumentOutline();
+		this._refreshAnnotationsVisibility();
+
 		editingView.focus();
 	}
 
+	/**
+	 * Hides the document outline if it is configured.
+	 */
+	private _hideDocumentOutline() {
+		if ( document.querySelector( '.ck-document-outline' ) ) {
+			( document.querySelector( '.ck-document-outline' )! as HTMLElement ).style.visibility = 'hidden';
+		}
+	}
+
+	/**
+	 * Shows the document outline if it was hidden when entering the source editing.
+	 */
+	private _showDocumentOutline() {
+		if ( document.querySelector( '.ck-document-outline' ) ) {
+			( document.querySelector( '.ck-document-outline' )! as HTMLElement ).style.visibility = '';
+		}
+	}
+
+	/**
+	 * Hides the annotations when entering the source editing mode and shows back them after leaving it.
+	 */
+	private _refreshAnnotationsVisibility() {
+		if ( this.editor.plugins.has( 'Annotations' ) ) {
+			( this.editor.plugins.get( 'Annotations' ) as Annotations ).refreshVisibility();
+		}
+	}
+
 	/**
 	 * Focuses the textarea containing document source from the first editing root.
 	 */

packages/ckeditor5-source-editing/tests/sourceediting.js

@@ -838,6 +838,70 @@ describe( 'SourceEditing', () => {
 
 		await editor.destroy();
 	} );
+
+	describe( 'integration with document outline', () => {
+		it( 'should hide the document outline container when entering the source editing mode', () => {
+			const documentOutlineElement = document.createElement( 'div' );
+
+			documentOutlineElement.classList.add( 'ck-document-outline' );
+			document.body.appendChild( documentOutlineElement );
+
+			button.fire( 'execute' );
+
+			expect( documentOutlineElement.style.visibility ).to.equal( 'hidden' );
+
+			documentOutlineElement.remove();
+		} );
+
+		it( 'should show the document outline container when leaving the source editing mode', () => {
+			const documentOutlineElement = document.createElement( 'div' );
+
+			documentOutlineElement.classList.add( 'ck-document-outline' );
+			document.body.appendChild( documentOutlineElement );
+
+			button.fire( 'execute' );
+
+			expect( documentOutlineElement.style.visibility ).to.equal( 'hidden' );
+
+			button.fire( 'execute' );
+
+			expect( documentOutlineElement.style.visibility ).to.equal( '' );
+
+			documentOutlineElement.remove();
+		} );
+	} );
+
+	describe( 'integration with annotations', () => {
+		class AnnotationsMock extends Plugin {
+			static get pluginName() {
+				return 'Annotations';
+			}
+
+			refreshVisibility() {}
+		}
+
+		it( 'should refresh annotations visibility when entering and leaving source editing mode', async () => {
+			const editorElement = document.body.appendChild( document.createElement( 'div' ) );
+			const editor = await ClassicEditor.create( editorElement, {
+				plugins: [ Paragraph, Heading, SourceEditing, AnnotationsMock ],
+				toolbar: [ 'heading' ]
+			} );
+
+			const spy = sinon.spy( editor.plugins.get( 'Annotations' ), 'refreshVisibility' );
+
+			editor.plugins.get( 'SourceEditing' ).isSourceEditingMode = true;
+
+			sinon.assert.calledOnce( spy );
+
+			editor.plugins.get( 'SourceEditing' ).isSourceEditingMode = false;
+
+			sinon.assert.calledTwice( spy );
+
+			editorElement.remove();
+
+			return editor.destroy();
+		} );
+	} );
 } );
 
 describe( 'SourceEditing - integration with Markdown', () => {