Explorar el Código

Added virtual selection manual test.

Szymon Kupś hace 8 años
padre
commit
717bd252af

+ 1 - 0
packages/ckeditor5-engine/package.json

@@ -19,6 +19,7 @@
     "@ckeditor/ckeditor5-paragraph": "^0.8.0",
     "@ckeditor/ckeditor5-typing": "^0.9.1",
     "@ckeditor/ckeditor5-undo": "^0.8.1",
+    "@ckeditor/ckeditor5-widget": "^0.1.1",
     "eslint-config-ckeditor5": "^1.0.0",
     "gulp": "^3.9.1",
     "guppy-pre-commit": "^0.4.0"

+ 25 - 0
packages/ckeditor5-engine/tests/manual/virtualselection.html

@@ -0,0 +1,25 @@
+<style>
+	span.virtual-selection {
+		background-color: yellow;
+	}
+
+	.ck-widget.fancy-widget {
+		background-color: black;
+		color: white;
+		text-align: center;
+		height: 40px;
+		line-height: 40px;
+	}
+
+	.ck-widget.fancy-widget.virtual-selection {
+		background-color: yellow;
+		color: black;
+	}
+</style>
+
+<div id="editor">
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at diam quis justo imperdiet posuere non eu tortor. Mauris vel magna eu sem hendrerit varius. Ut imperdiet velit ut ante interdum convallis. Vestibulum vitae lacinia mi. </p>
+	<figure></figure>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at diam quis justo imperdiet posuere non eu tortor. Mauris vel magna eu sem hendrerit varius. Ut imperdiet velit ut ante interdum convallis. Vestibulum vitae lacinia mi. </p>
+</div>
+<button id="add-marker">Set marker</button>

+ 93 - 0
packages/ckeditor5-engine/tests/manual/virtualselection.js

@@ -0,0 +1,93 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+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 Heading from '@ckeditor/ckeditor5-heading/src/heading';
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import buildModelConverter from '../../src/conversion/buildmodelconverter';
+import buildViewConverter from '../../src/conversion/buildviewconverter';
+import ModelRange from '../../src/model/range';
+import ModelElement from '../../src/model/element';
+import ViewContainerElement from '../../src/view/containerelement';
+import ViewText from '../../src/view/text';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import Widget from '@ckeditor/ckeditor5-widget/src/widget';
+import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
+
+class FancyWidget extends Plugin {
+	static get requires() {
+		return [ Widget ];
+	}
+
+	init() {
+		const editor = this.editor;
+		const doc = editor.document;
+		const schema = doc.schema;
+		const data = editor.data;
+		const editing = editor.editing;
+
+		// Configure schema.
+		schema.registerItem( 'fancywidget' );
+		schema.allow( { name: 'fancywidget', inside: '$root' } );
+		schema.objects.add( 'fancywidget' );
+
+		// Build converter from model to view for editing pipeline.
+		buildModelConverter().for( editing.modelToView )
+			.fromElement( 'fancywidget' )
+			.toElement( () => {
+				const text = new ViewText( 'widget' );
+				const fancyView = new ViewContainerElement( 'figure', { class: 'fancy-widget' }, text );
+
+				fancyView.setVirtualSelection = data => {
+					text.data = 'widget - with virtual selection';
+					fancyView.addClass( data.class );
+				};
+
+				fancyView.removeVirtualSelection = data => {
+					text.data = 'widget';
+					fancyView.removeClass( data.class );
+				};
+
+				return toWidget( fancyView );
+			} );
+
+		// Build converter from view element to model element for data pipeline.
+		buildViewConverter().for( data.viewToModel )
+			.fromElement( 'figure' )
+			.toElement( () => new ModelElement( 'fancywidget' ) );
+	}
+}
+
+ClassicEditor.create( global.document.querySelector( '#editor' ), {
+	plugins: [ Enter, Typing, Paragraph, Undo, Heading, FancyWidget ],
+	toolbar: [ 'headings', 'undo', 'redo' ]
+} )
+.then( editor => {
+	window.editor = editor;
+	const model = editor.document;
+
+	buildModelConverter()
+		.for( editor.editing.modelToView )
+		.fromMarker( 'marker' )
+		.toVirtualSelection( { class: 'virtual-selection' } );
+
+	document.getElementById( 'add-marker' ).addEventListener( 'mousedown', evt => {
+		editor.document.enqueueChanges( () => {
+			const range = ModelRange.createFromRange( model.selection.getFirstRange() );
+			model.markers.set( 'marker', range );
+		} );
+
+		evt.preventDefault();
+	} );
+} )
+.catch( err => {
+	console.error( err.stack );
+} );

+ 8 - 0
packages/ckeditor5-engine/tests/manual/virtualselection.md

@@ -0,0 +1,8 @@
+### Virtual selection manual test
+
+1. Select widget and press `Set marker` button - widget's background color should change and text should change 
+to `widget - with virtual selection`.
+1. Select part of the text in the first paragraph and press `Set marker` - widget's should return to its initial state, 
+text should be highlighted.
+1. Create selection that starts in the first paragraph and ends in second one. Press `Set marker`. Selected text
+should be highlighted and widget should have virtual selection applied.