Sfoglia il codice sorgente

Improve EditingController. Split create root and attachDomRoot.

Piotr Jasiun 9 anni fa
parent
commit
078de925cd

+ 8 - 8
packages/ckeditor5-engine/src/editingcontroller.js

@@ -7,10 +7,10 @@
 
 
 import ViewDocument from './view/document.js';
 import ViewDocument from './view/document.js';
 
 
-import MutationObserver from './ckeditor5/engine/view/observer/mutationobserver.js';
-import SelectionObserver from './ckeditor5/engine/view/observer/selectionobserver.js';
+import MutationObserver from './view/observer/mutationobserver.js';
+import SelectionObserver from './view/observer/selectionobserver.js';
 import FocusObserver from './view/observer/focusobserver.js';
 import FocusObserver from './view/observer/focusobserver.js';
-import KeyObserver from './ckeditor5/engine/view/observer/keyobserver.js';
+import KeyObserver from './view/observer/keyobserver.js';
 
 
 import Mapper from './conversion/mapper.js';
 import Mapper from './conversion/mapper.js';
 import ModelConversionDispatcher from './conversion/modelconversiondispatcher.js';
 import ModelConversionDispatcher from './conversion/modelconversiondispatcher.js';
@@ -19,13 +19,13 @@ import {
 	convertRangeSelection,
 	convertRangeSelection,
 	convertCollapsedSelection,
 	convertCollapsedSelection,
 	clearAttributes
 	clearAttributes
-} from '/ckeditor5/engine/conversion/model-selection-to-view-converters.js';
+} from './conversion/model-selection-to-view-converters.js';
 
 
 import {
 import {
 	insertText,
 	insertText,
 	remove,
 	remove,
 	move
 	move
-} from './conversion/model-to-view.js';
+} from './conversion/model-to-view-converters.js';
 
 
 import EmitterMixin from '../utils/emittermixin.js';
 import EmitterMixin from '../utils/emittermixin.js';
 
 
@@ -73,9 +73,9 @@ export default class EditingController {
 		this.modelToView.on( 'selection', convertCollapsedSelection() );
 		this.modelToView.on( 'selection', convertCollapsedSelection() );
 	}
 	}
 
 
-	createRoot( element, name = 'main' ) {
-		const viewRoot = this.view.createRoot( element, name );
-		const modelRoot = this.model.createRoot( name );
+	createRoot( domRoot, name = 'main' ) {
+		const viewRoot = this.view.createRoot( domRoot, name );
+		const modelRoot = this.model.getRoot( name );
 
 
 		this.mapper.bindElements( modelRoot, viewRoot );
 		this.mapper.bindElements( modelRoot, viewRoot );
 	}
 	}

+ 4 - 4
packages/ckeditor5-engine/src/model/document.js

@@ -181,13 +181,13 @@ export default class Document {
 	/**
 	/**
 	 * Creates a new top-level root.
 	 * Creates a new top-level root.
 	 *
 	 *
-	 * @param {String|Symbol} rootName Unique root name.
+	 * @param {String|Symbol} [rootName='main'] Unique root name.
 	 * @param {String} [elementName='$root'] Element name. Defaults to `'$root'` which also have
 	 * @param {String} [elementName='$root'] Element name. Defaults to `'$root'` which also have
 	 * some basic schema defined (`$block`s are allowed inside the `$root`). Make sure to define a proper
 	 * some basic schema defined (`$block`s are allowed inside the `$root`). Make sure to define a proper
 	 * schema if you use a different name.
 	 * schema if you use a different name.
 	 * @returns {engine.model.RootElement} Created root.
 	 * @returns {engine.model.RootElement} Created root.
 	 */
 	 */
-	createRoot( rootName, elementName = '$root' ) {
+	createRoot( rootName = 'main', elementName = '$root' ) {
 		if ( this._roots.has( rootName ) ) {
 		if ( this._roots.has( rootName ) ) {
 			/**
 			/**
 			 * Root with specified name already exists.
 			 * Root with specified name already exists.
@@ -243,10 +243,10 @@ export default class Document {
 	/**
 	/**
 	 * Returns top-level root by its name.
 	 * Returns top-level root by its name.
 	 *
 	 *
-	 * @param {String|Symbol} name Unique root name.
+	 * @param {String} [name='main'] Unique root name.
 	 * @returns {engine.model.RootElement} Root registered under given name.
 	 * @returns {engine.model.RootElement} Root registered under given name.
 	 */
 	 */
-	getRoot( name ) {
+	getRoot( name = 'main' ) {
 		if ( !this._roots.has( name ) ) {
 		if ( !this._roots.has( name ) ) {
 			/**
 			/**
 			 * Root with specified name does not exist.
 			 * Root with specified name does not exist.

+ 20 - 5
packages/ckeditor5-engine/src/view/document.js

@@ -9,6 +9,7 @@ import Selection from './selection.js';
 import Renderer from './renderer.js';
 import Renderer from './renderer.js';
 import Writer from './writer.js';
 import Writer from './writer.js';
 import DomConverter from './domconverter.js';
 import DomConverter from './domconverter.js';
+import ContainerElement from './containerelement.js';
 import { injectQuirksHandling } from './filler.js';
 import { injectQuirksHandling } from './filler.js';
 
 
 import mix from '../../utils/mix.js';
 import mix from '../../utils/mix.js';
@@ -148,23 +149,37 @@ export default class Document {
 	 * @returns {engine.view.element} The created view root element.
 	 * @returns {engine.view.element} The created view root element.
 	 */
 	 */
 	createRoot( domRoot, name = 'main' ) {
 	createRoot( domRoot, name = 'main' ) {
-		const viewRoot = this.domConverter.domToView( domRoot, { bind: true, withChildren: false } );
+		const rootTag = typeof domRoot == 'string' ? domRoot : domRoot.tagName;
+
+		const viewRoot = new ContainerElement( rootTag );
 		viewRoot.setDocument( this );
 		viewRoot.setDocument( this );
 
 
+		this.viewRoots.set( name, viewRoot );
+
 		// Mark changed nodes in the renderer.
 		// Mark changed nodes in the renderer.
 		viewRoot.on( 'change', ( evt, type, node ) => {
 		viewRoot.on( 'change', ( evt, type, node ) => {
 			this.renderer.markToSync( type, node );
 			this.renderer.markToSync( type, node );
 		} );
 		} );
-		this.renderer.markToSync( 'CHILDREN', viewRoot );
+
+		if ( domRoot instanceof Element ) {
+			this.attachDomRoot( domRoot, name );
+		}
+
+		return viewRoot;
+	}
+
+	attachDomRoot( domRoot, name = 'main' ) {
+		const viewRoot = this.getRoot( name );
 
 
 		this.domRoots.set( name, domRoot );
 		this.domRoots.set( name, domRoot );
-		this.viewRoots.set( name, viewRoot );
+
+		this.domConverter.bindElements( domRoot, viewRoot );
+
+		this.renderer.markToSync( 'CHILDREN', viewRoot );
 
 
 		for ( let observer of this._observers.values() ) {
 		for ( let observer of this._observers.values() ) {
 			observer.observe( domRoot, name );
 			observer.observe( domRoot, name );
 		}
 		}
-
-		return viewRoot;
 	}
 	}
 
 
 	/**
 	/**