8
0
Просмотр исходного кода

Updated UIElement manual test.

Szymon Kupś 8 лет назад
Родитель
Сommit
edf00e5dcf

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


+ 17 - 3
packages/ckeditor5-engine/tests/view/manual/uielement.html

@@ -1,12 +1,26 @@
 <style>
+	div#container {
+		width: 600px;
+	}
+
 	figure {
 		margin-left: 0;
 		margin-right: 0;
 	}
 
 	.ui-element {
-		font-size: 12px;
-		background-color: #dadada;
+		font-size: 8px;
+		border-top: 1px solid #dadada;
+		font-family: sans-serif;
+	}
+
+	.ui-element span {
+		background-color: #7a7a7a;
+		color: white;
+		padding: 1px 5px;
 	}
 </style>
-<div id="editor"><figure>This is editor instance</figure></div>
+<div id="container">
+	<div id="editor"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sapien diam, pretium at laoreet eget, commodo bibendum urna. Praesent in dolor leo. Vivamus sagittis ligula tempor laoreet tincidunt. Praesent hendrerit in tortor ac sollicitudin. Curabitur eleifend blandit ultrices. Aliquam euismod ut lectus blandit faucibus. Quisque ut sapien euismod, interdum ex ac, tristique neque. In a volutpat risus. Vivamus blandit est et sodales imperdiet. Duis et metus nisi. Proin viverra pellentesque velit vel egestas. Etiam sed ornare orci. Pellentesque id quam finibus, semper ante aliquam, rhoncus tortor. Vestibulum eget porta velit. Aenean id nisl scelerisque, pulvinar ante nec, eleifend sapien.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sapien diam, pretium at laoreet eget, commodo bibendum urna. Praesent in dolor leo. Vivamus sagittis ligula tempor laoreet tincidunt. Praesent hendrerit in tortor ac sollicitudin. Curabitur eleifend blandit ultrices. Aliquam euismod ut lectus blandit faucibus. Quisque ut sapien euismod, interdum ex ac, tristique neque. In a volutpat risus. Vivamus blandit est et sodales imperdiet. Duis et metus nisi. Proin viverra pellentesque velit vel egestas. Etiam sed ornare orci. Pellentesque id quam finibus, semper ante aliquam, rhoncus tortor. Vestibulum eget porta velit. Aenean id nisl scelerisque, pulvinar ante nec, eleifend sapien.</p></div>
+</div>
+

+ 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.