Bladeren bron

Updated UIElement manual test.

Szymon Kupś 8 jaren geleden
bovenliggende
commit
edf00e5dcf

BIN
packages/ckeditor5-engine/tests/view/manual/close.png


File diff suppressed because it is too large
+ 17 - 3
packages/ckeditor5-engine/tests/view/manual/uielement.html


+ 6 - 79
packages/ckeditor5-engine/tests/view/manual/uielement.js

@@ -11,11 +11,7 @@ import Typing from '@ckeditor/ckeditor5-typing/src/typing';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-
-import buildModelConverter from '../../../src/conversion/buildmodelconverter';
-import buildViewConverter from '../../../src/conversion/buildviewconverter';
 import UIElement from '../../../src/view/uielement';
-import ContainerElement from '../../../src/view/containerelement';
 
 class MyUIElement extends UIElement {
 	render( domDocument ) {
@@ -23,7 +19,7 @@ class MyUIElement extends UIElement {
 
 		root.setAttribute( 'contenteditable', 'false' );
 		root.classList.add( 'ui-element' );
-		root.innerHTML = 'UIElement with some <b>structure</b> inside <img src="close.png" />';
+		root.innerHTML = '<span>END OF PARAGRAPH</span>';
 
 		return root;
 	}
@@ -32,22 +28,13 @@ class MyUIElement extends UIElement {
 class UIElementTestPlugin extends Plugin {
 	init() {
 		const editor = this.editor;
-		const document = editor.document;
 		const editing = editor.editing;
-		const data = editor.data;
-		const schema = document.schema;
-
-		schema.registerItem( 'figure', '$block' );
-
-		buildModelConverter().for( data.modelToView, editing.modelToView )
-			.fromElement( 'figure' )
-			.toElement( () => {
-				return new ContainerElement( 'figure', null, new MyUIElement( 'div' ) );
-			} );
 
-		buildViewConverter().for( data.viewToModel )
-			.fromElement( 'figure' )
-			.toElement( 'figure' );
+		// Add some UIElement to each paragraph.
+		editing.modelToView.on( 'insert:paragraph', ( evt, data, consumable, conversionApi ) => {
+			const viewP = conversionApi.mapper.toViewElement( data.item );
+			viewP.appendChildren( new MyUIElement( 'div' ) );
+		}, { priority: 'lowest' } );
 	}
 }
 
@@ -55,63 +42,3 @@ ClassicEditor.create( document.querySelector( '#editor' ), {
 	plugins: [ Enter, Typing, Paragraph, Undo, UIElementTestPlugin ],
 	toolbar: [ 'undo', 'redo' ]
 } );
-
-/*
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
-import Enter from '@ckeditor/ckeditor5-enter/src/enter';
-import Typing from '@ckeditor/ckeditor5-typing/src/typing';
-import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Undo from '@ckeditor/ckeditor5-undo/src/undo';
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-
-import buildModelConverter from '../../../src/conversion/buildmodelconverter';
-import buildViewConverter from '../../../src/conversion/buildviewconverter';
-import UIElement from '../../../src/view/uielement';
-import AttributeElement from '../../../src/view/attributeelement';
-
-class MyUIElement extends UIElement {
-	render( domDocument ) {
-		const root = super.render( domDocument );
-
-		root.setAttribute( 'contenteditable', 'false' );
-		root.style.backgroundColor = 'red';
-		root.style.display = 'inline-block';
-		root.style.width = '5px';
-		root.style.height = '5px';
-
-		return root;
-	}
-}
-
-class UIElementTestPlugin extends Plugin {
-	init() {
-		const editor = this.editor;
-		const document = editor.document;
-		const editing = editor.editing;
-		const data = editor.data;
-		const schema = document.schema;
-
-		// Allow bold attribute on all inline nodes.
-		editor.document.schema.allow( { name: '$inline', attributes: [ 'strong' ], inside: '$block' } );
-
-		// Build converter from model to view for data and editing pipelines.
-		buildModelConverter().for( data.modelToView, editing.modelToView )
-			.fromAttribute( 'strong' )
-			.toElement( data => {
-				return new AttributeElement( 'strong', null, [ new MyUIElement( 'span' ) ] );
-				// return new UIElement( 'strong' );
-			} );
-
-		// Build converter from view to model for data pipeline.
-		buildViewConverter().for( data.viewToModel )
-			.fromElement( 'strong' )
-			.toAttribute( 'strong', true );
-	}
-}
-
-ClassicEditor.create( document.querySelector( '#editor' ), {
-	plugins: [ Enter, Typing, Paragraph, Undo, UIElementTestPlugin ],
-	toolbar: [ 'undo', 'redo' ]
-} );
-
- */

+ 4 - 0
packages/ckeditor5-engine/tests/view/manual/uielement.md

@@ -1 +1,5 @@
 ### UIElement handling
+
+1. Each paragraph should have UIElement at it's bottom showing "END OF PARAGRAPH".
+1. UIElement should not block typing or prevent regular editor usage.
+1. When paragraph is split or new paragraph is created - new UIElement should be created too.