|
|
@@ -1,24 +1,27 @@
|
|
|
/**
|
|
|
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
|
|
|
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
|
|
|
* For licensing, see LICENSE.md.
|
|
|
*/
|
|
|
|
|
|
-/* globals document */
|
|
|
+/* globals document, Event */
|
|
|
|
|
|
import InlineEditorUI from '../src/inlineeditorui';
|
|
|
import InlineEditorUIView from '../src/inlineeditoruiview';
|
|
|
|
|
|
import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor';
|
|
|
-import buildViewConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter';
|
|
|
-import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
|
|
|
+
|
|
|
+import { downcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
|
|
|
+import { upcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';
|
|
|
|
|
|
import InlineEditor from '../src/inlineeditor';
|
|
|
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
|
|
|
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
|
|
|
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
|
|
|
+import DataApiMixin from '@ckeditor/ckeditor5-core/src/editor/utils/dataapimixin';
|
|
|
+import ElementApiMixin from '@ckeditor/ckeditor5-core/src/editor/utils/elementapimixin';
|
|
|
+import RootElement from '@ckeditor/ckeditor5-engine/src/model/rootelement';
|
|
|
|
|
|
import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
|
|
|
-import count from '@ckeditor/ckeditor5-utils/src/count';
|
|
|
|
|
|
testUtils.createSinonSandbox();
|
|
|
|
|
|
@@ -41,26 +44,56 @@ describe( 'InlineEditor', () => {
|
|
|
editor = new InlineEditor( editorElement );
|
|
|
} );
|
|
|
|
|
|
- it( 'creates a single div editable root in the view', () => {
|
|
|
- editor.ui.init();
|
|
|
+ it( 'creates the UI using BoxedEditorUI classes', () => {
|
|
|
+ expect( editor.ui ).to.be.instanceof( InlineEditorUI );
|
|
|
+ expect( editor.ui.view ).to.be.instanceof( InlineEditorUIView );
|
|
|
+ } );
|
|
|
|
|
|
- expect( editor.editing.view.getRoot() ).to.have.property( 'name', 'div' );
|
|
|
+ it( 'uses HTMLDataProcessor', () => {
|
|
|
+ expect( editor.data.processor ).to.be.instanceof( HtmlDataProcessor );
|
|
|
+ } );
|
|
|
|
|
|
- editor.ui.destroy();
|
|
|
+ it( 'has a Data Interface', () => {
|
|
|
+ testUtils.isMixed( InlineEditor, DataApiMixin );
|
|
|
} );
|
|
|
|
|
|
- it( 'creates a single document root', () => {
|
|
|
- expect( count( editor.document.getRootNames() ) ).to.equal( 1 );
|
|
|
- expect( editor.document.getRoot() ).to.have.property( 'name', '$root' );
|
|
|
+ it( 'has a Element Interface', () => {
|
|
|
+ testUtils.isMixed( InlineEditor, ElementApiMixin );
|
|
|
} );
|
|
|
|
|
|
- it( 'creates the UI using BoxedEditorUI classes', () => {
|
|
|
- expect( editor.ui ).to.be.instanceof( InlineEditorUI );
|
|
|
- expect( editor.ui.view ).to.be.instanceof( InlineEditorUIView );
|
|
|
+ it( 'creates main root element', () => {
|
|
|
+ expect( editor.model.document.getRoot( 'main' ) ).to.instanceof( RootElement );
|
|
|
} );
|
|
|
|
|
|
- it( 'uses HTMLDataProcessor', () => {
|
|
|
- expect( editor.data.processor ).to.be.instanceof( HtmlDataProcessor );
|
|
|
+ it( 'handles form element', () => {
|
|
|
+ const form = document.createElement( 'form' );
|
|
|
+ const textarea = document.createElement( 'textarea' );
|
|
|
+ form.appendChild( textarea );
|
|
|
+ document.body.appendChild( form );
|
|
|
+
|
|
|
+ // Prevents page realods in Firefox ;|
|
|
|
+ form.addEventListener( 'submit', evt => {
|
|
|
+ evt.preventDefault();
|
|
|
+ } );
|
|
|
+
|
|
|
+ return InlineEditor.create( textarea, {
|
|
|
+ plugins: [ Paragraph ]
|
|
|
+ } ).then( editor => {
|
|
|
+ expect( textarea.value ).to.equal( '' );
|
|
|
+
|
|
|
+ editor.setData( '<p>Foo</p>' );
|
|
|
+
|
|
|
+ form.dispatchEvent( new Event( 'submit', {
|
|
|
+ // We need to be able to do preventDefault() to prevent page reloads in Firefox.
|
|
|
+ cancelable: true
|
|
|
+ } ) );
|
|
|
+
|
|
|
+ expect( textarea.value ).to.equal( '<p>Foo</p>' );
|
|
|
+
|
|
|
+ return editor.destroy().then( () => {
|
|
|
+ form.remove();
|
|
|
+ } );
|
|
|
+ } );
|
|
|
} );
|
|
|
} );
|
|
|
|
|
|
@@ -207,23 +240,18 @@ describe( 'InlineEditor', () => {
|
|
|
.then( newEditor => {
|
|
|
editor = newEditor;
|
|
|
|
|
|
- const schema = editor.document.schema;
|
|
|
-
|
|
|
- schema.registerItem( 'heading' );
|
|
|
- schema.allow( { name: 'heading', inside: '$root' } );
|
|
|
- schema.allow( { name: '$text', inside: 'heading' } );
|
|
|
-
|
|
|
- buildModelConverter().for( editor.data.modelToView )
|
|
|
- .fromElement( 'heading' )
|
|
|
- .toElement( 'heading' );
|
|
|
+ const schema = editor.model.schema;
|
|
|
|
|
|
- buildViewConverter().for( editor.data.viewToModel )
|
|
|
- .fromElement( 'heading' )
|
|
|
- .toElement( 'heading' );
|
|
|
+ schema.register( 'heading' );
|
|
|
+ schema.extend( 'heading', { allowIn: '$root' } );
|
|
|
+ schema.extend( '$text', { allowIn: 'heading' } );
|
|
|
|
|
|
- buildModelConverter().for( editor.editing.modelToView )
|
|
|
- .fromElement( 'heading' )
|
|
|
- .toElement( 'heading-editing-representation' );
|
|
|
+ editor.conversion.for( 'upcast' ).add( upcastElementToElement( { model: 'heading', view: 'heading' } ) );
|
|
|
+ editor.conversion.for( 'dataDowncast' ).add( downcastElementToElement( { model: 'heading', view: 'heading' } ) );
|
|
|
+ editor.conversion.for( 'editingDowncast' ).add( downcastElementToElement( {
|
|
|
+ model: 'heading',
|
|
|
+ view: 'heading-editing-representation'
|
|
|
+ } ) );
|
|
|
} );
|
|
|
} );
|
|
|
|