Przeglądaj źródła

Merge pull request #767 from ckeditor/t/764

Nested editable manual test.
Piotrek Koszuliński 9 lat temu
rodzic
commit
8e04a6c080

+ 3 - 0
packages/ckeditor5-engine/tests/manual/nestededitable.html

@@ -0,0 +1,3 @@
+<div id="editor"><p>paragraph</p><figure>Caption:<figcaption>foo bar baz</figcaption></figure></div>
+<h2>Model contents:</h2>
+<div id="model"></div>

+ 90 - 0
packages/ckeditor5-engine/tests/manual/nestededitable.js

@@ -0,0 +1,90 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global console */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+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 buildModelConverter from '../../src/conversion/buildmodelconverter';
+import buildViewConverter from '../../src/conversion/buildviewconverter';
+import ViewContainerElement from '../../src/view/containerelement';
+import ViewEditableElement from '../../src/view/editableelement';
+import { getData } from '../../src/dev-utils/model';
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+
+import './nestededitable.scss';
+
+class NestedEditable extends Plugin {
+	init() {
+		const editor = this.editor;
+		const document = editor.document;
+		const editing = editor.editing;
+		const viewDocument = editing.view;
+		const data = editor.data;
+		const schema = document.schema;
+
+		schema.registerItem( 'figure' );
+		schema.registerItem( 'figcaption' );
+		schema.allow( { name: 'figure', inside: '$root' } );
+		schema.allow( { name: 'figcaption', inside: 'figure' } );
+		schema.objects.add( 'figure' );
+
+		schema.allow( { name: '$inline', inside: 'figure' } );
+		schema.allow( { name: '$inline', inside: 'figcaption' } );
+
+		buildModelConverter().for( data.modelToView, editing.modelToView )
+			.fromElement( 'figure' )
+			.toElement( () => new ViewContainerElement( 'figure', { contenteditable: 'false' } ) );
+
+		buildViewConverter().for( data.viewToModel )
+			.fromElement( 'figure' )
+			.toElement( 'figure' );
+
+		buildModelConverter().for( data.modelToView, editing.modelToView )
+			.fromElement( 'figcaption' )
+			.toElement( () => {
+				const element = new ViewEditableElement( 'figcaption', { contenteditable: 'true' } );
+				element.document = viewDocument;
+
+				element.on( 'change:isFocused', ( evt, property, is ) => {
+					if ( is ) {
+						element.addClass( 'focused' );
+					} else {
+						element.removeClass( 'focused' );
+					}
+				} );
+
+				return element;
+			} );
+
+		buildViewConverter().for( data.viewToModel )
+			.fromElement( 'figcaption' )
+			.toElement( 'figcaption' );
+	}
+}
+
+ClassicEditor.create( global.document.querySelector( '#editor' ), {
+	plugins: [ Enter, Typing, Paragraph, NestedEditable, Undo ],
+	toolbar: [ 'undo', 'redo' ]
+} )
+.then( editor => {
+	editor.document.on( 'changesDone', () => {
+		printModelContents( editor );
+	} );
+
+	printModelContents( editor );
+} )
+.catch( err => {
+	console.error( err.stack );
+} );
+
+const modelDiv = global.document.querySelector( '#model' );
+function printModelContents( editor ) {
+	modelDiv.innerText = getData( editor.document );
+}

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

@@ -0,0 +1,4 @@
+### Nested editable manual test
+
+* Put selection inside `foo bar baz` nested editable. Main editable and nested one should be focused (blue outline should be visible).
+* Change selection inside nested editable and see if `Model contents` change accordingly.

+ 25 - 0
packages/ckeditor5-engine/tests/manual/nestededitable.scss

@@ -0,0 +1,25 @@
+// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_colors.scss';
+@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_shadow.scss';
+@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_states.scss';
+
+figure {
+	background-color: #f3f3f3;
+	padding: 10px;
+
+	figcaption {
+		background: white;
+		outline: none;
+
+		&.focused {
+			@include ck-focus-ring( 'outline' );
+			@include ck-box-shadow( $ck-inner-shadow );
+		}
+	}
+}
+
+
+
+