Kaynağa Gözat

Align manual tests to latest changes in the view.

Szymon Kupś 7 yıl önce
ebeveyn
işleme
0e3d3b6462

+ 7 - 4
packages/ckeditor5-engine/src/dev-utils/view.js

@@ -89,11 +89,14 @@ export function setData( view, data, options = {} ) {
 	const document = view.document;
 	const rootName = options.rootName || 'main';
 	const root = document.getRoot( rootName );
-	const result = setData._parse( data, { rootElement: root } );
 
-	if ( result.view && result.selection ) {
-		document.selection._setTo( result.selection );
-	}
+	view.change( writer => {
+		const result = setData._parse( data, { rootElement: root } );
+
+		if ( result.view && result.selection ) {
+			writer.setSelection( result.selection );
+		}
+	} );
 }
 
 // Set parse as setData private method - needed for testing/spying.

+ 3 - 4
packages/ckeditor5-engine/src/view/editableelement.js

@@ -84,11 +84,10 @@ export default class EditableElement extends ContainerElement {
 			isFocused => isFocused && document.selection.editableElement == this
 		);
 
-		// Update focus state before each rendering. Rendering should not change neither the selection nor the value of
-		// document.isFocused property.
-		this.listenTo( document, 'render', () => {
+		// Update focus state based on selection changes.
+		this.listenTo( document.selection, 'change', () => {
 			this.isFocused = document.isFocused && document.selection.editableElement == this;
-		}, { priority: 'high' } );
+		} );
 	}
 }
 

+ 1 - 1
packages/ckeditor5-engine/tests/manual/tickets/880/1.js

@@ -18,7 +18,7 @@ ClassicEditor
 	.then( editor => {
 		window.editor = editor;
 
-		editor.editing.view.on( 'selectionChange', () => {
+		editor.editing.view.document.on( 'selectionChange', () => {
 			editor.model.change( () => {
 			} );
 			console.log( 'selectionChange', ( new Date() ).getTime() );

+ 17 - 16
packages/ckeditor5-engine/tests/view/manual/clickobserver.js

@@ -5,15 +5,19 @@
 
 /* globals console, document */
 
-import Document from '../../../src/view/document';
+import View from '../../../src/view/view';
 import DomEventObserver from '../../../src/view/observer/domeventobserver';
 import createViewRoot from '../_utils/createroot';
 
-const viewDocument = new Document();
+const view = new View();
+const viewDocument = view.document;
+
+// Disable rendering for this example, because it re-enables all observers each time view is rendered.
+view.render = () => {};
 
 class ClickObserver1 extends DomEventObserver {
-	constructor( viewDocument ) {
-		super( viewDocument );
+	constructor( view ) {
+		super( view );
 
 		this.id = 1;
 		this.domEventType = 'click';
@@ -25,8 +29,8 @@ class ClickObserver1 extends DomEventObserver {
 }
 
 class ClickObserver2 extends DomEventObserver {
-	constructor( viewDocument ) {
-		super( viewDocument );
+	constructor( view ) {
+		super( view );
 
 		this.id = 2;
 		this.domEventType = 'click';
@@ -37,19 +41,16 @@ class ClickObserver2 extends DomEventObserver {
 	}
 }
 
-const observer1 = new ClickObserver1( viewDocument );
-
 viewDocument.on( 'click', ( evt, evtData ) => console.log( 'click', evtData.id, evtData.domTarget.id ) );
-document.getElementById( 'enable1' ).addEventListener( 'click', () => observer1.enable() );
-document.getElementById( 'disable1' ).addEventListener( 'click', () => observer1.disable() );
 
 // Random order.
-viewDocument.addObserver( ClickObserver1 );
-
+view.addObserver( ClickObserver1 );
 createViewRoot( viewDocument, 'div', 'clickerA' );
-viewDocument.attachDomRoot( document.getElementById( 'clickerA' ), 'clickerA' );
-
-viewDocument.addObserver( ClickObserver2 );
+view.attachDomRoot( document.getElementById( 'clickerA' ), 'clickerA' );
 
+view.addObserver( ClickObserver2 );
 createViewRoot( viewDocument, 'div', 'clickerB' );
-viewDocument.attachDomRoot( document.getElementById( 'clickerB' ), 'clickerB' );
+view.attachDomRoot( document.getElementById( 'clickerB' ), 'clickerB' );
+
+document.getElementById( 'enable1' ).addEventListener( 'click', () => view.getObserver( ClickObserver1 ).enable() );
+document.getElementById( 'disable1' ).addEventListener( 'click', () => view.getObserver( ClickObserver1 ).disable() );

+ 29 - 15
packages/ckeditor5-engine/tests/view/manual/focus.js

@@ -5,32 +5,46 @@
 
 /* globals document */
 
-import Document from '../../../src/view/document';
-import { parse } from '../../../src/dev-utils/view';
+import View from '../../../src/view/view';
+import ViewPosition from '../../../src/view/position';
+import ViewRange from '../../../src/view/range';
+import createViewRoot from '../_utils/createroot';
 
-const viewDocument = new Document();
+const view = new View();
+const viewDocument = view.document;
 
 const domEditable1 = document.getElementById( 'editable1' );
 const domEditable2 = document.getElementById( 'editable2' );
 
-const editable1 = viewDocument.createRoot( domEditable1, 'editable1' );
-const editable2 = viewDocument.createRoot( domEditable2, 'editable2' );
+const editable1 = createViewRoot( viewDocument, 'div', 'editable1' );
+view.attachDomRoot( domEditable1, 'editable1' );
 
-viewDocument.on( 'selectionChange', ( evt, data ) => {
-	viewDocument.selection.setTo( data.newSelection );
-} );
+const editable2 = createViewRoot( viewDocument, 'div', 'editable2' );
+view.attachDomRoot( domEditable2, 'editable2' );
+
+let text1, text2;
+
+view.change( writer => {
+	text1 = writer.createText( 'Foo bar baz' );
+	text2 = writer.createText( 'Foo bar baz' );
 
-const { selection: selection1 } = parse( '<p>Foo {bar} baz.</p>', { rootElement: editable1 } );
-const { selection: selection2 } = parse( '<p>{Foo} bar baz.</p>', { rootElement: editable2 } );
+	writer.insert( ViewPosition.createAt( editable1 ), text1 );
+	writer.insert( ViewPosition.createAt( editable2 ), text2 );
+} );
 
 document.getElementById( 'button1' ).addEventListener( 'click', () => {
-	viewDocument.selection.setTo( selection1 );
-	viewDocument.focus();
+	view.change( writer => {
+		writer.setSelection( ViewRange.createFromParentsAndOffsets( text1, 4, text1, 7 ) );
+	} );
+
+	view.focus();
 } );
 
 document.getElementById( 'button2' ).addEventListener( 'click', () => {
-	viewDocument.selection.setTo( selection2 );
-	viewDocument.focus();
+	view.change( writer => {
+		writer.setSelection( ViewRange.createFromParentsAndOffsets( text2, 0, text2, 3 ) );
+	} );
+
+	view.focus();
 } );
 
-viewDocument.render();

+ 21 - 10
packages/ckeditor5-engine/tests/view/manual/focusobserver.js

@@ -5,10 +5,12 @@
 
 /* globals console, document */
 
-import Document from '../../../src/view/document';
-import { setData } from '../../../src/dev-utils/view';
+import View from '../../../src/view/view';
+import Position from '../../../src/view/position';
+import createViewRoot from '../_utils/createroot';
 
-const viewDocument = new Document();
+const view = new View();
+const viewDocument = view.document;
 
 viewDocument.on( 'focus', ( evt, data ) => console.log( `Focus in ${ data.domTarget.id }.` ) );
 viewDocument.on( 'blur', ( evt, data ) => console.log( `Blur in ${ data.domTarget.id }.` ) );
@@ -16,22 +18,31 @@ viewDocument.on( 'blur', ( evt, data ) => console.log( `Blur in ${ data.domTarge
 const domEditable1 = document.getElementById( 'editable1' );
 const domEditable2 = document.getElementById( 'editable2' );
 
-const editable1 = viewDocument.createRoot( domEditable1, 'editable1' );
-const editable2 = viewDocument.createRoot( domEditable2, 'editable2' );
+const editable1 = createViewRoot( viewDocument, 'div', 'editable1' );
+const editable2 = createViewRoot( viewDocument, 'div', 'editable2' );
+
+view.attachDomRoot( domEditable1, 'editable1' );
+view.attachDomRoot( domEditable2, 'editable2' );
 
 viewDocument.on( 'selectionChange', ( evt, data ) => {
-	viewDocument.selection.setTo( data.newSelection );
-	viewDocument.render();
+	view.change( writer => {
+		writer.setSelection( data.newSelection );
+	} );
 } );
 
-setData( viewDocument, '<container:p>{}First editable.</container:p>', { rootName: 'editable1' } );
-setData( viewDocument, '<container:p>Second editable.</container:p>', { rootName: 'editable2' } );
+view.change( writer => {
+	writer.insert( Position.createAt( editable1 ), writer.createText( 'First editable.' ) );
+	writer.insert( Position.createAt( editable2 ), writer.createText( 'Second editable.' ) );
+
+	writer.setSelection( editable1 );
+} );
 
 editable1.on( 'change:isFocused', () => {
 	domEditable1.style.backgroundColor = editable1.isFocused ? 'green' : 'red';
 } );
+
 editable2.on( 'change:isFocused', () => {
 	domEditable2.style.backgroundColor = editable2.isFocused ? 'green' : 'red';
 } );
 
-viewDocument.focus();
+view.focus();

+ 26 - 10
packages/ckeditor5-engine/tests/view/manual/immutable.js

@@ -5,16 +5,32 @@
 
 /* globals document */
 
-import Document from '../../../src/view/document';
-import { setData } from '../../../src/dev-utils/view';
+import View from '../../../src/view/view';
+import Position from '../../../src/view/position';
+import { parse } from '../../../src/dev-utils/view';
+import createViewRoot from '../_utils/createroot';
 
-const viewDocument = new Document();
-viewDocument.createRoot( document.getElementById( 'editor' ) );
+const view = new View();
+const viewDocument = view.document;
+const viewRoot = createViewRoot( viewDocument, 'div' );
+view.attachDomRoot( document.getElementById( 'editor' ) );
 
-setData( viewDocument,
-	'<container:p><attribute:strong>foo</attribute:strong>[]<attribute:strong>bar</attribute:strong></container:p>' +
-	'<container:p></container:p>' +
-	'<container:p><attribute:strong></attribute:strong></container:p>' +
-	'<container:p>bom</container:p>' );
+view.change( writer => {
+	const { selection, view: data } = parse(
+		'<container:p><attribute:strong>foo</attribute:strong>[]<attribute:strong>bar</attribute:strong></container:p>' +
+		'<container:p></container:p>' +
+		'<container:p><attribute:strong></attribute:strong></container:p>' +
+		'<container:p>bom</container:p>'
+	);
 
-viewDocument.render();
+	writer.insert( Position.createAt( viewRoot ), data );
+	writer.setSelection( selection );
+} );
+
+viewDocument.on( 'selectionChange', () => {
+	// Re-render view selection each time selection is changed.
+	// See https://github.com/ckeditor/ckeditor5-engine/issues/796.
+	view.render();
+} );
+
+view.focus();

+ 22 - 14
packages/ckeditor5-engine/tests/view/manual/inline-filler.js

@@ -5,22 +5,30 @@
 
 /* globals document */
 
-import Document from '../../../src/view/document';
-import { setData } from '../../../src/dev-utils/view';
-
-const viewDocument = new Document();
-viewDocument.createRoot( document.getElementById( 'editor' ) );
-
-viewDocument.isFocused = true;
+import View from '../../../src/view/view';
+import Position from '../../../src/view/position';
+import createViewRoot from '../_utils/createroot';
+import { parse } from '../../../src/dev-utils/view';
+
+const view = new View();
+const viewDocument = view.document;
+const viewRoot = createViewRoot( viewDocument );
+view.attachDomRoot( document.getElementById( 'editor' ) );
+
+view.change( writer => {
+	const { selection, view: data } = parse(
+		'<container:p><attribute:strong>foo</attribute:strong>[]<attribute:strong>bar</attribute:strong></container:p>'
+	);
+
+	writer.insert( Position.createAt( viewRoot ), data );
+	writer.setSelection( selection );
+} );
 
-setData( viewDocument,
-	'<container:p><attribute:strong>foo</attribute:strong>[]<attribute:strong>bar</attribute:strong></container:p>' );
+view.focus();
 
 viewDocument.on( 'selectionChange', ( evt, data ) => {
-	viewDocument.selection.setTo( data.newSelection );
-
-	// Needed due to https://github.com/ckeditor/ckeditor5-engine/issues/796.
-	viewDocument.render();
+	view.change( writer => {
+		writer.setSelection( data.newSelection );
+	} );
 } );
 
-viewDocument.render();

+ 15 - 6
packages/ckeditor5-engine/tests/view/manual/keyobserver.js

@@ -5,15 +5,24 @@
 
 /* globals console, document */
 
-import Document from '../../../src/view/document';
-import { setData } from '../../../src/dev-utils/view';
+import View from '../../../src/view/view';
+import Position from '../../../src/view/position';
+import createViewRoot from '../_utils/createroot';
 
-const viewDocument = new Document();
+const view = new View();
+const viewDocument = view.document;
 
 viewDocument.on( 'keydown', ( evt, data ) => console.log( 'keydown', data ) );
 viewDocument.on( 'keyup', ( evt, data ) => console.log( 'keyup', data ) );
 
-viewDocument.createRoot( document.getElementById( 'editable' ), 'editable' );
-setData( viewDocument, 'foo{}bar', { rootName: 'editable' } );
-viewDocument.focus();
+const viewRoot = createViewRoot( viewDocument, 'div', 'editable' );
+view.attachDomRoot( document.getElementById( 'editable' ), 'editable' );
+
+view.change( writer => {
+	const text = writer.createText( 'foobar' );
+	writer.insert( Position.createAt( viewRoot ), text );
+	writer.setSelection( text, 3 );
+} );
+
+view.focus();
 

+ 16 - 9
packages/ckeditor5-engine/tests/view/manual/mutationobserver.js

@@ -5,19 +5,26 @@
 
 /* globals console, document */
 
-import Document from '../../../src/view/document';
-import { setData } from '../../../src/dev-utils/view';
+import View from '../../../src/view/view';
+import Position from '../../../src/view/position';
+import createViewRoot from '../_utils/createroot';
+import { parse } from '../../../src/dev-utils/view';
 
-const viewDocument = new Document();
-viewDocument.createRoot( document.getElementById( 'editor' ) );
+const view = new View();
+const viewDocument = view.document;
+const viewRoot = createViewRoot( viewDocument );
+view.attachDomRoot( document.getElementById( 'editor' ) );
 
 viewDocument.on( 'mutations', ( evt, mutations ) => console.log( mutations ) );
 viewDocument.on( 'selectionChange', ( evt, data ) => {
-	viewDocument.selection.setTo( data.newSelection );
+	view.change( writer => writer.setSelection( data.newSelection ) );
 } );
 
-setData( viewDocument,
-	'<container:p>foo</container:p>' +
-	'<container:p>bar</container:p>' );
+view.change( writer => {
+	const data = parse(
+		'<container:p>foo</container:p>' +
+		'<container:p>bar</container:p>'
+	);
 
-viewDocument.render();
+	writer.insert( Position.createAt( viewRoot ), data );
+} );

+ 13 - 6
packages/ckeditor5-engine/tests/view/manual/noselection.js

@@ -5,14 +5,21 @@
 
 /* globals document */
 
-import Document from '../../../src/view/document';
+import View from '../../../src/view/view';
 import { setData } from '../../../src/dev-utils/view';
+import createViewRoot from '../_utils/createroot';
 
-const viewDocument = new Document();
-viewDocument.createRoot( document.getElementById( 'editor' ) );
+const view = new View();
+const viewDocument = view.document;
+createViewRoot( viewDocument );
+view.attachDomRoot( document.getElementById( 'editor' ) );
 
-setData( viewDocument,
+viewDocument.on( 'selectionChange', () => {
+	// Re-render view selection each time selection is changed.
+	// See https://github.com/ckeditor/ckeditor5-engine/issues/796.
+	view.render();
+} );
+
+setData( view,
 	'<container:p>foo</container:p>' +
 	'<container:p>bar</container:p>' );
-
-viewDocument.render();

+ 9 - 8
packages/ckeditor5-engine/tests/view/manual/selectionobserver.js

@@ -5,24 +5,25 @@
 
 /* globals console, document */
 
-import Document from '../../../src/view/document';
+import View from '../../../src/view/view';
 import { setData } from '../../../src/dev-utils/view';
+import createViewRoot from '../_utils/createroot';
 
-const viewDocument = new Document();
-viewDocument.createRoot( document.getElementById( 'editor' ) );
+const view = new View();
+const viewDocument = view.document;
+createViewRoot( viewDocument );
+view.attachDomRoot( document.getElementById( 'editor' ) );
 
-setData( viewDocument,
+setData( view,
 	'<container:p><attribute:b>foo</attribute:b>bar</container:p>' +
 	'<container:p>bom</container:p>' );
 
 viewDocument.on( 'selectionChange', ( evt, data ) => {
 	console.log( 'selectionChange', data );
-	viewDocument.selection.setTo( data.newSelection );
+	view.change( writer => writer.setSelection( data.newSelection ) );
 } );
 
 viewDocument.on( 'selectionChangeDone', ( evt, data ) => {
 	console.log( '%c selectionChangeDone ', 'background: #222; color: #bada55', data );
-	viewDocument.selection.setTo( data.newSelection );
+	view.change( writer => writer.setSelection( data.newSelection ) );
 } );
-
-viewDocument.render();

+ 13 - 14
packages/ckeditor5-engine/tests/view/manual/uielement.js

@@ -13,12 +13,10 @@ import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
 import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
 import Undo from '@ckeditor/ckeditor5-undo/src/undo';
-import UIElement from '../../../src/view/uielement';
 import Position from '../../../src/view/position';
-import writer from '../../../src/view/writer';
 
-function createEndingUIElement() {
-	const element = new UIElement( 'span' );
+function createEndingUIElement( writer ) {
+	const element = writer.createUIElement( 'span' );
 
 	element.render = function( domDocument ) {
 		const root = this.toDomElement( domDocument );
@@ -31,8 +29,8 @@ function createEndingUIElement() {
 	return element;
 }
 
-function createMiddleUIElement() {
-	const element = new UIElement( 'span' );
+function createMiddleUIElement( writer ) {
+	const element = writer.createUIElement( 'span' );
 
 	element.render = function( domDocument ) {
 		const root = this.toDomElement( domDocument );
@@ -53,7 +51,7 @@ class UIElementTestPlugin extends Plugin {
 		// Add some UIElement to each paragraph.
 		editing.modelToView.on( 'insert:paragraph', ( evt, data, consumable, conversionApi ) => {
 			const viewP = conversionApi.mapper.toViewElement( data.item );
-			viewP.appendChildren( createEndingUIElement() );
+			viewP.appendChildren( createEndingUIElement( conversionApi.writer ) );
 		}, { priority: 'lowest' } );
 	}
 }
@@ -65,18 +63,19 @@ ClassicEditor
 	} )
 	.then( editor => {
 		window.editor = editor;
+		const view = editor.editing.view;
 
 		// Add some UI elements.
-		const viewRoot = editor.editing.view.getRoot();
+		const viewRoot = editor.editing.view.document.getRoot();
 		const viewText1 = viewRoot.getChild( 0 ).getChild( 0 );
 		const viewText2 = viewRoot.getChild( 1 ).getChild( 0 );
 
-		writer.insert( new Position( viewText1, 20 ), createMiddleUIElement() );
-		writer.insert( new Position( viewText1, 20 ), createMiddleUIElement() );
-		writer.insert( new Position( viewText2, 0 ), createMiddleUIElement() );
-		writer.insert( new Position( viewText2, 6 ), createMiddleUIElement() );
-
-		editor.editing.view.render();
+		view.change( writer => {
+			writer.insert( new Position( viewText1, 20 ), createMiddleUIElement( writer ) );
+			writer.insert( new Position( viewText1, 20 ), createMiddleUIElement( writer ) );
+			writer.insert( new Position( viewText2, 0 ), createMiddleUIElement( writer ) );
+			writer.insert( new Position( viewText2, 6 ), createMiddleUIElement( writer ) );
+		} );
 	} )
 	.catch( err => {
 		console.error( err.stack );

+ 11 - 9
packages/ckeditor5-engine/tests/view/manual/x-index.js

@@ -5,24 +5,26 @@
 
 /* globals console, document */
 
-import Document from '../../../src/view/document';
+import View from '../../../src/view/view';
 import { setData } from '../../../src/dev-utils/view';
+import createViewRoot from '../_utils/createroot';
 
-const viewDocument = new Document();
-viewDocument.createRoot( document.getElementById( 'editor' ) );
+const view = new View();
+const viewDocument = view.document;
+createViewRoot( viewDocument );
+view.attachDomRoot( document.getElementById( 'editor' ) );
 
-viewDocument.isFocused = true;
-
-setData( viewDocument,
+setData( view,
 	'<container:p>fo{}o</container:p>' +
 	'<container:p></container:p>' +
 	'<container:p><attribute:strong></attribute:strong></container:p>' +
 	'<container:p>bar</container:p>' );
 
+view.focus();
+
 viewDocument.on( 'selectionChange', ( evt, data ) => {
 	const node = data.newSelection.getFirstPosition().parent;
 	console.log( node.name ? node.name : node._data );
-	viewDocument.selection.setTo( data.newSelection );
-} );
 
-viewDocument.render();
+	view.change( writer => writer.setSelection( data.newSelection ) );
+} );