8
0
Quellcode durchsuchen

Merge branch 'master' into t/629b

Piotrek Koszuliński vor 9 Jahren
Ursprung
Commit
4714f2eff7

+ 50 - 44
packages/ckeditor5-engine/src/dev-utils/view.js

@@ -20,12 +20,18 @@ import Range from '../view/range.js';
 import Position from '../view/position.js';
 import AttributeElement from '../view/attributeelement.js';
 import ContainerElement from '../view/containerelement.js';
+import EmptyElement from '../view/emptyelement.js';
 import ViewText from '../view/text.js';
 
 const ELEMENT_RANGE_START_TOKEN = '[';
 const ELEMENT_RANGE_END_TOKEN = ']';
 const TEXT_RANGE_START_TOKEN = '{';
 const TEXT_RANGE_END_TOKEN = '}';
+const allowedTypes = {
+	'container': ContainerElement,
+	'attribute': AttributeElement,
+	'empty': EmptyElement,
+};
 
 /**
  * Writes the contents of the {@link engine.view.Document Document} to an HTML-like string.
@@ -38,7 +44,7 @@ const TEXT_RANGE_END_TOKEN = '}';
  * @param {Boolean} [options.rootName='main'] Name of the root from which data should be stringified. If not provided
  * default `main` name will be used.
  * @param {Boolean} [options.showType=false] When set to `true` type of elements will be printed (`<container:p>`
- * instead of `<p>` and `<attribute:b>` instead of `<b>`).
+ * instead of `<p>`, `<attribute:b>` instead of `<b>` and `<empty:img>` instead of `<img>`).
  * @param {Boolean} [options.showPriority=false] When set to `true` AttributeElement's priority will be printed
  * (`<span view-priority="12">`, `<b view-priority="10">`).
  * @returns {String} The stringified data.
@@ -162,13 +168,15 @@ setData._parse = parse;
  *
  * Additional options object can be provided.
  * If `options.showType` is set to `true`, element's types will be
- * presented for {@link engine.view.AttributeElement AttributeElements} and {@link engine.view.ContainerElement
- * ContainerElements}:
+ * presented for {@link engine.view.AttributeElement AttributeElements}, {@link engine.view.ContainerElement
+ * ContainerElements} and {@link engine.view.EmptyElement EmptyElements}:
  *
  *		const attribute = new AttributeElement( 'b' );
  *		const container = new ContainerElement( 'p' );
+ *		const empty = new EmptyElement( 'img' );
  *		getData( attribute, null, { showType: true } ); // '<attribute:b></attribute:b>'
  *		getData( container, null, { showType: true } ); // '<container:p></container:p>'
+ *		getData( empty, null, { showType: true } ); // '<empty:img></empty:img>'
  *
  * If `options.showPriority` is set to `true`, priority will be displayed for all
  * {@link engine.view.AttributeElement AttributeElements}.
@@ -185,7 +193,7 @@ setData._parse = parse;
  * containing one range collapsed at this position.
  * @param {Object} [options] Object with additional options.
  * @param {Boolean} [options.showType=false] When set to `true` type of elements will be printed (`<container:p>`
- * instead of `<p>` and `<attribute:b>` instead of `<b>`).
+ * instead of `<p>`, `<attribute:b>` instead of `<b>` and `<empty:img>` instead of `<img>`).
  * @param {Boolean} [options.showPriority=false] When set to `true` AttributeElement's priority will be printed
  * (`<span view-priority="12">`, `<b view-priority="10">`).
  * @param {Boolean} [options.ignoreRoot=false] When set to `true` root's element opening and closing will not be printed.
@@ -288,7 +296,7 @@ export function parse( data, options = {} ) {
 		sameSelectionCharacters: options.sameSelectionCharacters
 	} );
 	const processor = new XmlDataProcessor( {
-		namespaces: [ 'attribute', 'container' ]
+		namespaces: Object.keys( allowedTypes )
 	} );
 
 	// Convert data to view.
@@ -560,8 +568,8 @@ class ViewStringify {
 	 * @param root
 	 * @param {engine.view.Selection} [selection=null] Selection which ranges should be also converted to string.
 	 * @param {Object} [options] Options object.
-	 * @param {Boolean} [options.showType=false] When set to `true` type of elements will be printed ( `<container:p>`
-	 * instead of `<p>` and `<attribute:b>` instead of `<b>`.
+	 * @param {Boolean} [options.showType=false] When set to `true` type of elements will be printed (`<container:p>`
+	 * instead of `<p>`, `<attribute:b>` instead of `<b>` and `<empty:img>` instead of `<img>`).
 	 * @param {Boolean} [options.showPriority=false] When set to `true` AttributeElement's priority will be printed.
 	 * @param {Boolean} [options.ignoreRoot=false] When set to `true` root's element opening and closing tag will not
 	 * be outputted.
@@ -719,9 +727,9 @@ class ViewStringify {
 
 	/**
 	 * Converts passed {@link engine.view.Element Element} to opening tag.
-	 * Depending on current configuration opening tag can be simple (`<a>`), contain type prefix (`<container:p>` or
-	 * `<attribute:a>`), contain priority information ( `<attribute:a view-priority="20">` ). Element's attributes also
-	 * will be included (`<a href="http://ckeditor.com" name="foobar">`).
+	 * Depending on current configuration opening tag can be simple (`<a>`), contain type prefix (`<container:p>`,
+	 * `<attribute:a>` or `<empty:img>`), contain priority information ( `<attribute:a view-priority="20">` ).
+	 * Element's attributes also will be included (`<a href="http://ckeditor.com" name="foobar">`).
 	 *
 	 * @private
 	 * @param {engine.view.Element} element
@@ -740,8 +748,8 @@ class ViewStringify {
 
 	/**
 	 * Converts passed {@link engine.view.Element Element} to closing tag.
-	 * Depending on current configuration closing tag can be simple (`</a>`) or contain type prefix (`</container:p>` or
-	 * `</attribute:a>`).
+	 * Depending on current configuration closing tag can be simple (`</a>`) or contain type prefix (`</container:p>`,
+	 * `</attribute:a>` or `</empty:img>`).
 	 *
 	 * @private
 	 * @param {engine.view.Element} element
@@ -756,9 +764,10 @@ class ViewStringify {
 
 	/**
 	 * Converts passed {@link engine.view.Element Element's} type to its string representation
-	 * Returns 'attribute' for {@link engine.view.AttributeElement AttributeElements} and
-	 * 'container' for {@link engine.view.ContainerElement ContainerElements}. Returns empty string when current
-	 * configuration is preventing showing elements' types.
+	 * Returns 'attribute' for {@link engine.view.AttributeElement AttributeElements},
+	 * 'container' for {@link engine.view.ContainerElement ContainerElements} and 'empty' for
+	 * {@link engine.view.EmptyElement EmptyElements}. Returns empty string when current configuration is preventing
+	 * showing elements' types.
 	 *
 	 * @private
 	 * @param {engine.view.Element} element
@@ -766,12 +775,10 @@ class ViewStringify {
 	 */
 	_stringifyElementType( element ) {
 		if ( this.showType ) {
-			if ( element instanceof AttributeElement ) {
-				return 'attribute';
-			}
-
-			if ( element instanceof ContainerElement ) {
-				return 'container';
+			for ( let type in allowedTypes ) {
+				if ( element instanceof allowedTypes[ type ] ) {
+					return type;
+				}
 			}
 		}
 
@@ -816,13 +823,14 @@ class ViewStringify {
 	}
 }
 
-// Converts {@link engine.view.Element Elements} to {@link engine.view.AttributeElement AttributeElements} and
-// {@link engine.view.ContainerElement ContainerElements}. It converts whole tree starting from the `rootNode`.
-// Conversion is based on element names. See `_convertElement` method for more details.
+// Converts {@link engine.view.Element Elements} to {@link engine.view.AttributeElement AttributeElements},
+// {@link engine.view.ContainerElement ContainerElements} or {@link engine.view.EmptyElement EmptyElements}.
+// It converts whole tree starting from the `rootNode`. Conversion is based on element names.
+// See `_convertElement` method for more details.
 //
 // @param {engine.view.Element|engine.view.DocumentFragment|engine.view.Text} rootNode Root node to convert.
 // @returns {engine.view.Element|engine.view.DocumentFragment|engine.view.Text|engine.view.AttributeElement|
-// engine.view.ContainerElement} Root node of converted elements.
+// engine.view.ContainerElement|engine.view.EmptyElement} Root node of converted elements.
 function _convertViewElements( rootNode ) {
 	const isFragment = rootNode instanceof ViewDocumentFragment;
 
@@ -832,6 +840,10 @@ function _convertViewElements( rootNode ) {
 
 		// Convert all child nodes.
 		for ( let child of rootNode.getChildren() ) {
+			if ( convertedElement instanceof EmptyElement ) {
+				throw new Error( `Parse error - cannot parse inside EmptyElement.` );
+			}
+
 			convertedElement.appendChildren( _convertViewElements( child ) );
 		}
 
@@ -841,12 +853,14 @@ function _convertViewElements( rootNode ) {
 	return rootNode;
 }
 
-// Converts {@link engine.view.Element Element} to {@link engine.view.AttributeElement AttributeElement} or
-// {@link engine.view.ContainerElement ContainerElement}.
+// Converts {@link engine.view.Element Element} to {@link engine.view.AttributeElement AttributeElement},
+// {@link engine.view.ContainerElement ContainerElement} or {@link engine.view.EmptyElement EmptyElement}.
 // If element's name is in format `attribute:b` with `view-priority="11"` attribute it will be converted to
 // {@link engine.view.AttributeElement AttributeElement} with priority 11.
 // If element's name is in format `container:p` - it will be converted to
 // {@link engine.view.ContainerElement ContainerElement}.
+// If element's name is in format `empty:img` - it will be converted to
+// {@link engine.view.EmptyElement EmptyElement}.
 // If element's name will not contain any additional information - {@link engine.view.Element view Element} will be
 // returned.
 //
@@ -854,19 +868,14 @@ function _convertViewElements( rootNode ) {
 // @returns {engine.view.Element|engine.view.AttributeElement|engine.view.ContainerElement} Tree view
 // element converted according to it's name.
 function _convertElement( viewElement ) {
-	let newElement;
 	const info = _convertElementNameAndPriority( viewElement );
+	const ElementConstructor = allowedTypes[ info.type ];
+	const newElement = ElementConstructor ? new ElementConstructor( info.name ) : new ViewElement( info.name );
 
-	if ( info.type == 'attribute' ) {
-		newElement = new AttributeElement( info.name );
-
+	if ( newElement instanceof AttributeElement ) {
 		if ( info.priority !== null ) {
 			newElement.priority = info.priority;
 		}
-	} else if ( info.type == 'container' ) {
-		newElement = new ContainerElement( info.name );
-	} else {
-		newElement = new ViewElement( info.name );
 	}
 
 	// Move attributes.
@@ -878,14 +887,15 @@ function _convertElement( viewElement ) {
 }
 
 // Converts `view-priority` attribute and {@link engine.view.Element#name Element's name} information needed for creating
-// {@link engine.view.AttributeElement AttributeElement} or {@link engine.view.ContainerElement ContainerElement} instance.
+// {@link engine.view.AttributeElement AttributeElement}, {@link engine.view.ContainerElement ContainerElement} or
+// {@link engine.view.EmptyElement EmptyElement} instance.
 // Name can be provided in two formats: as a simple element's name (`div`), or as a type and name (`container:div`,
-// `attribute:span`);
+// `attribute:span`, `empty:img`);
 //
 // @param {engine.view.Element} element Element which name should be converted.
 // @returns {Object} info Object with parsed information.
 // @returns {String} info.name Parsed name of the element.
-// @returns {String|null} info.type Parsed type of the element, can be `attribute` or `container`.
+// @returns {String|null} info.type Parsed type of the element, can be `attribute`, `container` or `empty`.
 // returns {Number|null} info.priority Parsed priority of the element.
 function _convertElementNameAndPriority( viewElement ) {
 	const parts = viewElement.name.split( ':' );
@@ -914,16 +924,12 @@ function _convertElementNameAndPriority( viewElement ) {
 	throw new Error( `Parse error - cannot parse element's name: ${ viewElement.name }.` );
 }
 
-// Checks if element's type is allowed. Returns `attribute`, `container` or `null`.
+// Checks if element's type is allowed. Returns `attribute`, `container`, `empty` or `null`.
 //
 // @param {String} type
 // @returns {String|null}
 function _convertType( type ) {
-	if ( type == 'container' || type == 'attribute' ) {
-		return type;
-	}
-
-	return null;
+	return allowedTypes[ type ] ? type : null;
 }
 
 // Checks if given priority is allowed. Returns null if priority cannot be converted.

+ 3 - 3
packages/ckeditor5-engine/src/view/element.js

@@ -10,11 +10,11 @@ import isIterable from '../../utils/isiterable.js';
 import isPlainObject from '../../utils/lib/lodash/isPlainObject.js';
 
 /**
- * Tree view element.
+ * View element.
  *
  * Editing engine does not define fixed HTML DTD. This is why the type of the {@link engine.view.Element} need to
  * be defined by the feature developer. Creating an element you should use {@link engine.view.ContainerElement}
- * class or {@link engine.view.AttributeElement}.
+ * class, {@link engine.view.AttributeElement} class or {@link engine.view.EmptyElement} class.
  *
  * Note that for view elements which are not created from model, like elements from mutations, paste or
  * {@link engine.controller.DataController#set data.set} it is not possible to define the type of the element, so
@@ -25,7 +25,7 @@ import isPlainObject from '../../utils/lib/lodash/isPlainObject.js';
  */
 export default class Element extends Node {
 	/**
-	 * Creates a tree view element.
+	 * Creates a view element.
 	 *
 	 * Attributes can be passed in various formats:
 	 *

+ 82 - 0
packages/ckeditor5-engine/src/view/emptyelement.js

@@ -0,0 +1,82 @@
+/**
+ * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import Element from './element.js';
+import CKEditorError from '../../utils/ckeditorerror.js';
+
+/**
+ * EmptyElement class. It is used to represent elements that cannot contain any child nodes.
+ */
+export default class EmptyElement extends Element {
+	/**
+	 * Creates new instance of EmptyElement.
+	 *
+	 * Throws {@link utils.CKEditorError CKEditorError} `view-emptyelement-cannot-add` when third parameter is passed,
+	 * to inform that usage of EmptyElement is incorrect (adding child nodes to EmptyElement is forbidden).
+	 *
+	 * @param {String} name Node name.
+	 * @param {Object|Iterable} [attributes] Collection of attributes.
+	 */
+	constructor( name, attributes ) {
+		super( name, attributes );
+
+		if ( arguments.length > 2 ) {
+			throwCannotAdd();
+		}
+	}
+
+	/**
+	 * Clones provided element. Overrides {@link engine.view.Element#clone} method, as it's forbidden to pass child
+	 * nodes to EmptyElement's constructor.
+	 *
+	 * @returns {envine.view.EmptyElement} Clone of this element.
+	 */
+	clone() {
+		const cloned = new this.constructor( this.name, this._attrs );
+
+		// Classes and styles are cloned separately - this solution is faster than adding them back to attributes and
+		// parse once again in constructor.
+		cloned._classes = new Set( this._classes );
+		cloned._styles = new Map( this._styles );
+
+		return cloned;
+	}
+
+	/**
+	 * Overrides {@link engine.view.Element#appendChildren} method.
+	 * Throws {@link utils.CKEditorError CKEditorError} `view-emptyelement-cannot-add` to prevent adding any child nodes
+	 * to EmptyElement.
+	 */
+	appendChildren() {
+		throwCannotAdd();
+	}
+
+	/**
+	 * Overrides {@link engine.view.Element#insertChildren} method.
+	 * Throws {@link utils.CKEditorError CKEditorError} `view-emptyelement-cannot-add` to prevent adding any child nodes
+	 * to EmptyElement.
+	 */
+	insertChildren() {
+		throwCannotAdd();
+	}
+
+	/**
+	 * Returns `null` because block filler is not needed.
+	 *
+	 * @returns {null}
+	 */
+	getFillerOffset() {
+		return null;
+	}
+}
+
+function throwCannotAdd() {
+	/**
+	 * Cannot add children to {@link engine.view.EmptyElement}.
+	 *
+	 * @error view-emptyelement-cannot-add
+	 */
+	throw new CKEditorError( 'view-emptyelement-cannot-add: Cannot add child nodes to EmptyElement instance.' );
+}

+ 36 - 12
packages/ckeditor5-engine/src/view/writer.js

@@ -6,6 +6,7 @@
 import Position from './position.js';
 import ContainerElement from './containerelement.js';
 import AttributeElement from './attributeelement.js';
+import EmptyElement from './emptyelement.js';
 import Text from './text.js';
 import Range from './range.js';
 import CKEditorError from '../../utils/ckeditorerror.js';
@@ -54,6 +55,9 @@ export default {
  * Throws {@link utils.CKEditorError CKEditorError} `view-writer-invalid-range-container` when {@link engine.view.Range#start start}
  * and {@link engine.view.Range#end end} positions of a passed range are not placed inside same parent container.
  *
+ * Throws {@link utils.CKEditorError CKEditorError} `view-writer-cannot-break-empty-element` when trying to break attributes
+ * inside {@link engine.view.EmptyElement EmptyElement}.
+ *
  * @see engine.view.AttributeElement
  * @see engine.view.ContainerElement
  * @see engine.view.writer.breakContainer
@@ -137,8 +141,8 @@ export function breakContainer( position ) {
  * In following examples `<p>` is a container and `<b>` is an attribute element:
  *
  *		<p>foo[]bar</p> -> <p>foo{}bar</p>
- *		<p><b>foo</b>[]<b>bar</b> -> <p><b>foo{}bar</b></b>
- *		<p><b foo="bar">a</b>[]<b foo="baz">b</b> -> <p><b foo="bar">a</b>[]<b foo="baz">b</b>
+ *		<p><b>foo</b>[]<b>bar</b></p> -> <p><b>foo{}bar</b></p>
+ *		<p><b foo="bar">a</b>[]<b foo="baz">b</b></p> -> <p><b foo="bar">a</b>[]<b foo="baz">b</b></p>
  *
  * It will also take care about empty attributes when merging:
  *
@@ -188,6 +192,11 @@ export function mergeAttributes( position ) {
 		return position;
 	}
 
+	// When one or both nodes are EmptyElements - no attributes to merge.
+	if ( ( nodeBefore instanceof EmptyElement ) || ( nodeAfter instanceof EmptyElement ) ) {
+		return position;
+	}
+
 	// When position is between two text nodes.
 	if ( nodeBefore instanceof Text && nodeAfter instanceof Text ) {
 		return mergeTextNodes( nodeBefore, nodeAfter );
@@ -256,20 +265,20 @@ export function mergeContainers( position ) {
  *
  * Throws {@link utils.CKEditorError CKEditorError} `view-writer-insert-invalid-node` when nodes to insert
  * contains instances that are not {@link engine.view.Text Texts},
- * {@link engine.view.AttributeElement AttributeElements} or
- * {@link engine.view.ContainerElement ContainerElements}.
+ * {@link engine.view.AttributeElement AttributeElements},
+ * {@link engine.view.ContainerElement ContainerElements} or {@link engine.view.EmptyElement EmptyElements}.
  *
  * @function engine.view.writer.insert
  * @param {engine.view.Position} position Insertion position.
- * @param {engine.view.Text|engine.view.AttributeElement|engine.view.ContainerElement
- * |Iterable.<engine.view.Text|engine.view.AttributeElement|engine.view.ContainerElement>} nodes Node or
+ * @param {engine.view.Text|engine.view.AttributeElement|engine.view.ContainerElement|engine.view.EmptyElement
+ * |Iterable.<engine.view.Text|engine.view.AttributeElement|engine.view.ContainerElement|engine.view.EmptyElement>} nodes Node or
  * nodes to insert.
  * @returns {engine.view.Range} Range around inserted nodes.
  */
 export function insert( position, nodes ) {
 	nodes = isIterable( nodes ) ? [ ...nodes ] : [ nodes ];
 
-	// Check if nodes to insert are instances of AttributeElements, ContainerElements or Text.
+	// Check if nodes to insert are instances of AttributeElements, ContainerElements, EmptyElements or Text.
 	validateNodesToInsert( nodes );
 
 	const container = getParentContainer( position );
@@ -630,6 +639,9 @@ function _breakAttributesRange( range, forceSplitText = false ) {
 // Function used by public breakAttributes (without splitting text nodes) and by other methods (with
 // splitting text nodes).
 //
+// Throws {@link utils.CKEditorError CKEditorError} `view-writer-cannot-break-empty-element` break position is placed
+// inside {@link engine.view.EmptyElement EmptyElement}.
+//
 // @param {engine.view.Position} position Position where to break attributes.
 // @param {Boolean} [forceSplitText = false] If set to `true`, will break text nodes even if they are directly in
 // container element. This behavior will result in incorrect view state, but is needed by other view writing methods
@@ -639,6 +651,16 @@ function _breakAttributes( position, forceSplitText = false ) {
 	const positionOffset = position.offset;
 	const positionParent = position.parent;
 
+	// If position is placed inside EmptyElement - throw an exception as we cannot break inside.
+	if ( position.parent instanceof EmptyElement ) {
+		/**
+		 * Cannot break inside EmptyElement instance.
+		 *
+		 * @error view-writer-cannot-break-empty-element
+		 */
+		throw new CKEditorError( 'view-writer-cannot-break-empty-element' );
+	}
+
 	// There are no attributes to break and text nodes breaking is not forced.
 	if ( !forceSplitText && positionParent instanceof Text && isContainerOrFragment( positionParent.parent ) ) {
 		return Position.createFromPosition( position );
@@ -781,9 +803,10 @@ function wrapChildren( parent, startOffset, endOffset, attribute ) {
 		const child = parent.getChild( i );
 		const isText = child instanceof Text;
 		const isAttribute = child instanceof AttributeElement;
+		const isEmpty = child instanceof EmptyElement;
 
-		// Wrap text or attributes with higher or equal priority.
-		if ( isText || ( isAttribute && attribute.priority <= child.priority ) ) {
+		// Wrap text, empty elements or attributes with higher or equal priority.
+		if ( isText || isEmpty || ( isAttribute && attribute.priority <= child.priority ) ) {
 			// Clone attribute.
 			const newAttribute = attribute.clone();
 
@@ -1025,18 +1048,19 @@ function rangeSpansOnAllChildren( range ) {
 }
 
 // Checks if provided nodes are valid to insert. Checks if each node is an instance of
-// {@link engine.view.Text Text} or {@link engine.view.AttributeElement AttributeElement} or
-// {@link engine.view.ContainerElement ContainerElement}.
+// {@link engine.view.Text Text} or {@link engine.view.AttributeElement AttributeElement},
+// {@link engine.view.ContainerElement ContainerElement} or {@link engine.view.EmptyElement EmptyElement}.
 //
 // Throws {@link utils.CKEditorError CKEditorError} `view-writer-insert-invalid-node` when nodes to insert
 // contains instances that are not {@link engine.view.Text Texts},
+// {@link engine.view.EmptyElement EmptyElements},
 // {@link engine.view.AttributeElement AttributeElements} or
 // {@link engine.view.ContainerElement ContainerElements}.
 //
 // @param Iterable.<engine.view.Text|engine.view.AttributeElement|engine.view.ContainerElement> nodes
 function validateNodesToInsert( nodes ) {
 	for ( let node of nodes ) {
-		if ( !( node instanceof Text || node instanceof AttributeElement || node instanceof ContainerElement ) ) {
+		if ( !( node instanceof Text || node instanceof AttributeElement || node instanceof ContainerElement || node instanceof EmptyElement ) ) {
 			/**
 			 * Inserted nodes should be instance of {@link engine.view.AttributeElement AttributeElement},
 			 * {@link engine.view.ContainerElement ContainerElement} or {@link engine.view.Text Text}.

+ 20 - 0
packages/ckeditor5-engine/tests/dev-utils/view.js

@@ -12,6 +12,7 @@ import Position from 'ckeditor5/engine/view/position.js';
 import Element from 'ckeditor5/engine/view/element.js';
 import AttributeElement from 'ckeditor5/engine/view/attributeelement.js';
 import ContainerElement from 'ckeditor5/engine/view/containerelement.js';
+import EmptyElement from 'ckeditor5/engine/view/emptyelement.js';
 import Text from 'ckeditor5/engine/view/text.js';
 import Selection from 'ckeditor5/engine/view/selection.js';
 import Range from 'ckeditor5/engine/view/range.js';
@@ -340,6 +341,13 @@ describe( 'view test utils', () => {
 			const string = stringify( text, range );
 			expect( string ).to.equal( 'foo{b}ar' );
 		} );
+
+		it( 'should stringify EmptyElement', () => {
+			const img = new EmptyElement( 'img' );
+			const p = new ContainerElement( 'p', null, img );
+			expect( stringify( p, null, { showType: true } ) )
+				.to.equal( '<container:p><empty:img></empty:img></container:p>' );
+		} );
 	} );
 
 	describe( 'parse', () => {
@@ -620,5 +628,17 @@ describe( 'view test utils', () => {
 
 			expect( stringify( data ) ).to.equal( '<p><span>text</span><b>test</b></p>' );
 		} );
+
+		it( 'should parse EmptyElement', () => {
+			const parsed = parse( '<empty:img></empty:img>' );
+
+			expect( parsed ).to.be.instanceof( EmptyElement );
+		} );
+
+		it( 'should throw an error if EmptyElement is not empty', () => {
+			expect( () => {
+				parse( '<empty:img>foo bar</empty:img>' );
+			} ).to.throw( Error, 'Parse error - cannot parse inside EmptyElement.' );
+		} );
 	} );
 } );

+ 65 - 0
packages/ckeditor5-engine/tests/view/emptyelement.js

@@ -0,0 +1,65 @@
+/**
+ * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* bender-tags: view */
+
+import EmptyElement from 'ckeditor5/engine/view/emptyelement.js';
+import Element from 'ckeditor5/engine/view/element.js';
+import CKEditorError from 'ckeditor5/utils/ckeditorerror.js';
+
+describe( 'EmptyElement', () => {
+	let element, emptyElement;
+
+	beforeEach( () => {
+		element = new Element( 'b' );
+		emptyElement = new EmptyElement( 'img', {
+			alt: 'alternative text',
+			style: 'border: 1px solid red;color: white;',
+			class: 'image big'
+		} );
+	} );
+
+	it( 'should throw if child elements are passed to constructor', () => {
+		expect( () => {
+			new EmptyElement( 'img', null, [ new Element( 'i' ) ] );
+		} ).to.throw( CKEditorError, 'view-emptyelement-cannot-add: Cannot add child nodes to EmptyElement instance.' );
+	} );
+
+	describe( 'appendChildren', () => {
+		it( 'should throw when try to append new child element', () => {
+			expect( () => {
+				emptyElement.appendChildren( element );
+			} ).to.throw( CKEditorError, 'view-emptyelement-cannot-add: Cannot add child nodes to EmptyElement instance.' );
+		} );
+	} );
+
+	describe( 'insertChildren', () => {
+		it( 'should throw when try to insert new child element', () => {
+			expect( () => {
+				emptyElement.insertChildren( 0, element );
+			} ).to.throw( CKEditorError, 'view-emptyelement-cannot-add: Cannot add child nodes to EmptyElement instance.' );
+		} );
+	} );
+
+	describe( 'clone', () => {
+		it( 'should be cloned properly', () => {
+			const newEmptyElement = emptyElement.clone();
+
+			expect( newEmptyElement.name ).to.equal( 'img' );
+			expect( newEmptyElement.getAttribute( 'alt' ) ).to.equal( 'alternative text' );
+			expect( newEmptyElement.getStyle( 'border' ) ).to.equal( '1px solid red' );
+			expect( newEmptyElement.getStyle( 'color' ) ).to.equal( 'white' );
+			expect( newEmptyElement.hasClass( 'image' ) ).to.be.true;
+			expect( newEmptyElement.hasClass( 'big' ) ).to.be.true;
+			expect( newEmptyElement.isSimilar( emptyElement ) ).to.be.true;
+		} );
+	} );
+
+	describe( 'getFillerOffset', () => {
+		it( 'should return null', () => {
+			expect( emptyElement.getFillerOffset() ).to.be.null;
+		} );
+	} );
+} );

+ 23 - 0
packages/ckeditor5-engine/tests/view/writer/breakAttributes.js

@@ -9,7 +9,9 @@ import { breakAttributes } from 'ckeditor5/engine/view/writer.js';
 import { stringify, parse } from 'ckeditor5/engine/dev-utils/view.js';
 import ContainerElement from 'ckeditor5/engine/view/containerelement.js';
 import AttributeElement from 'ckeditor5/engine/view/attributeelement.js';
+import EmptyElement from 'ckeditor5/engine/view/emptyelement.js';
 import Range from 'ckeditor5/engine/view/range.js';
+import Position from 'ckeditor5/engine/view/position.js';
 import CKEditorError from 'ckeditor5/utils/ckeditorerror.js';
 
 describe( 'writer', () => {
@@ -227,6 +229,27 @@ describe( 'writer', () => {
 					'foo{}bar'
 				);
 			} );
+
+			it( 'should throw if breaking inside EmptyElement #1', () => {
+				const img = new EmptyElement( 'img' );
+				new ContainerElement( 'p', null, img );
+				const position = new Position( img, 0 );
+
+				expect( () => {
+					breakAttributes( position );
+				} ).to.throw( CKEditorError, 'view-writer-cannot-break-empty-element' );
+			} );
+
+			it( 'should throw if breaking inside EmptyElement #2', () => {
+				const img = new EmptyElement( 'img' );
+				const b = new AttributeElement( 'b' );
+				new ContainerElement( 'p', null, [ img, b ] );
+				const range = Range.createFromParentsAndOffsets( img, 0, b, 0 );
+
+				expect( () => {
+					breakAttributes( range );
+				} ).to.throw( CKEditorError, 'view-writer-cannot-break-empty-element' );
+			} );
 		} );
 	} );
 } );

+ 20 - 0
packages/ckeditor5-engine/tests/view/writer/insert.js

@@ -8,6 +8,7 @@
 import { insert } from 'ckeditor5/engine/view/writer.js';
 import ContainerElement from 'ckeditor5/engine/view/containerelement.js';
 import Element from 'ckeditor5/engine/view/element.js';
+import EmptyElement from 'ckeditor5/engine/view/emptyelement.js';
 import Position from 'ckeditor5/engine/view/position.js';
 import CKEditorError from 'ckeditor5/utils/ckeditorerror.js';
 import { stringify, parse } from 'ckeditor5/engine/dev-utils/view.js';
@@ -175,5 +176,24 @@ describe( 'writer', () => {
 				insert( position, attributeElement );
 			} ).to.throw( CKEditorError, 'view-writer-invalid-position-container' );
 		} );
+
+		it( 'should allow to insert EmptyElement into container', () => {
+			test(
+				'<container:p>[]</container:p>',
+				[ '<empty:img></empty:img>' ],
+				'<container:p>[<empty:img></empty:img>]</container:p>'
+			);
+		} );
+
+		it( 'should throw if trying to insert inside EmptyElement', () => {
+			const emptyElement = new EmptyElement( 'img' );
+			new ContainerElement( 'p', null, emptyElement );
+			const position = new Position( emptyElement, 0 );
+			const attributeElement = new AttributeElement( 'i' );
+
+			expect( () => {
+				insert( position, attributeElement );
+			} ).to.throw( CKEditorError, 'view-writer-cannot-break-empty-element' );
+		} );
 	} );
 } );

+ 7 - 0
packages/ckeditor5-engine/tests/view/writer/mergeAttributes.js

@@ -129,5 +129,12 @@ describe( 'writer', () => {
 				'<container:p>[]</container:p>'
 			);
 		} );
+
+		it( 'should not merge when placed between EmptyElements', () => {
+			test(
+				'<container:p><empty:img></empty:img>[]<empty:img></empty:img></container:p>',
+				'<container:p><empty:img></empty:img>[]<empty:img></empty:img></container:p>'
+			);
+		} );
 	} );
 } );

+ 29 - 0
packages/ckeditor5-engine/tests/view/writer/move.js

@@ -8,6 +8,12 @@
 import { move } from 'ckeditor5/engine/view/writer.js';
 import ViewPosition from 'ckeditor5/engine/view/position.js';
 import { stringify, parse } from 'ckeditor5/engine/dev-utils/view.js';
+import ContainerElement from 'ckeditor5/engine/view/containerelement.js';
+import AttributeElement from 'ckeditor5/engine/view/attributeelement.js';
+import EmptyElement from 'ckeditor5/engine/view/emptyelement.js';
+import Range from 'ckeditor5/engine/view/range.js';
+import Position from 'ckeditor5/engine/view/position.js';
+import CKEditorError from 'ckeditor5/utils/ckeditorerror.js';
 
 describe( 'writer', () => {
 	/**
@@ -112,5 +118,28 @@ describe( 'writer', () => {
 			const expectedView = '<container:p>b[<attribute:b>a}c</attribute:b></container:p>';
 			expect( stringify( view, newRange, { showType: true } ) ).to.equal( expectedView );
 		} );
+
+		it( 'should move EmptyElement', () => {
+			test(
+				'<container:p>foo[<empty:img></empty:img>]bar</container:p>',
+				'<container:div>baz{}quix</container:div>',
+				'<container:p>foobar</container:p>',
+				'<container:div>baz[<empty:img></empty:img>]quix</container:div>'
+			);
+		} );
+
+		it( 'should throw if trying to move to EmptyElement', () => {
+			const srcAttribute = new AttributeElement( 'b' );
+			const srcContainer = new ContainerElement( 'p', null, srcAttribute );
+			const srcRange = Range.createFromParentsAndOffsets( srcContainer, 0, srcContainer, 1 );
+
+			const dstEmpty = new EmptyElement( 'img' );
+			new ContainerElement( 'p', null, dstEmpty );
+			const dstPosition = new Position( dstEmpty, 0 );
+
+			expect( () => {
+				move( srcRange, dstPosition );
+			} ).to.throw( CKEditorError, 'view-writer-cannot-break-empty-element' );
+		} );
 	} );
 } );

+ 20 - 0
packages/ckeditor5-engine/tests/view/writer/remove.js

@@ -11,6 +11,7 @@ import Range from 'ckeditor5/engine/view/range.js';
 import DocumentFragment from 'ckeditor5/engine/view/documentfragment.js';
 import { stringify, parse } from 'ckeditor5/engine/dev-utils/view.js';
 import AttributeElement from 'ckeditor5/engine/view/attributeelement.js';
+import EmptyElement from 'ckeditor5/engine/view/emptyelement.js';
 import CKEditorError from 'ckeditor5/utils/ckeditorerror.js';
 
 describe( 'writer', () => {
@@ -110,5 +111,24 @@ describe( 'writer', () => {
 		it( 'should remove part of the text node in document fragment', () => {
 			test( 'fo{ob}ar', 'fo{}ar', 'ob' );
 		} );
+
+		it( 'should remove EmptyElement', () => {
+			test(
+				'<container:p>foo[<empty:img></empty:img>]bar</container:p>',
+				'<container:p>foo{}bar</container:p>',
+				'<empty:img></empty:img>'
+			);
+		} );
+
+		it( 'should throw if range is placed inside EmptyElement', () => {
+			const emptyElement = new EmptyElement( 'img' );
+			const attributeElement = new AttributeElement( 'b' );
+			new ContainerElement( 'p', null, [ emptyElement, attributeElement ] );
+			const range = Range.createFromParentsAndOffsets( emptyElement, 0, attributeElement, 0 );
+
+			expect( () => {
+				remove( range );
+			} ).to.throw( CKEditorError, 'view-writer-cannot-break-empty-element' );
+		} );
 	} );
 } );

+ 20 - 0
packages/ckeditor5-engine/tests/view/writer/unwrap.js

@@ -9,6 +9,7 @@ import { unwrap } from 'ckeditor5/engine/view/writer.js';
 import Element from 'ckeditor5/engine/view/element.js';
 import ContainerElement from 'ckeditor5/engine/view/containerelement.js';
 import AttributeElement from 'ckeditor5/engine/view/attributeelement.js';
+import EmptyElement from 'ckeditor5/engine/view/emptyelement.js';
 import Position from 'ckeditor5/engine/view/position.js';
 import Range from 'ckeditor5/engine/view/range.js';
 import Text from 'ckeditor5/engine/view/text.js';
@@ -298,5 +299,24 @@ describe( 'writer', () => {
 				'<container:p>[foobar]</container:p>'
 			);
 		} );
+
+		it( 'should unwrap EmptyElement', () => {
+			test(
+				'<container:p>[<attribute:b><empty:img></empty:img></attribute:b>]</container:p>',
+				'<attribute:b></attribute:b>',
+				'<container:p>[<empty:img></empty:img>]</container:p>'
+			);
+		} );
+
+		it( 'should throw if range is inside EmptyElement', () => {
+			const empty = new EmptyElement( 'img' );
+			const attribute = new AttributeElement( 'b' );
+			const container = new ContainerElement( 'p', null, [ empty, attribute ] );
+			const range = Range.createFromParentsAndOffsets( empty, 0, container, 2 );
+
+			expect( () => {
+				unwrap( range, attribute );
+			} ).to.throw( CKEditorError, 'view-writer-cannot-break-empty-element' );
+		} );
 	} );
 } );

+ 19 - 0
packages/ckeditor5-engine/tests/view/writer/wrap.js

@@ -9,6 +9,7 @@ import { wrap } from 'ckeditor5/engine/view/writer.js';
 import Element from 'ckeditor5/engine/view/element.js';
 import ContainerElement from 'ckeditor5/engine/view/containerelement.js';
 import AttributeElement from 'ckeditor5/engine/view/attributeelement.js';
+import EmptyElement from 'ckeditor5/engine/view/emptyelement.js';
 import Position from 'ckeditor5/engine/view/position.js';
 import Range from 'ckeditor5/engine/view/range.js';
 import Text from 'ckeditor5/engine/view/text.js';
@@ -270,5 +271,23 @@ describe( 'writer', () => {
 				'</container:p>'
 			);
 		} );
+
+		it( 'should wrap EmptyElement', () => {
+			test(
+				'<container:p>[<empty:img></empty:img>]</container:p>',
+				'<attribute:b></attribute:b>',
+				'<container:p>[<attribute:b view-priority="10"><empty:img></empty:img></attribute:b>]</container:p>'
+			);
+		} );
+
+		it( 'should throw if range is inside EmptyElement', () => {
+			const emptyElement = new EmptyElement( 'img' );
+			const container = new ContainerElement( 'p', null, emptyElement );
+			const range = Range.createFromParentsAndOffsets( emptyElement, 0, container, 1 );
+
+			expect( () => {
+				wrap( range, new AttributeElement( 'b' ) );
+			} ).to.throw( CKEditorError, 'view-writer-cannot-break-empty-element' );
+		} );
 	} );
 } );

+ 13 - 0
packages/ckeditor5-engine/tests/view/writer/wrapposition.js

@@ -9,6 +9,8 @@ import { wrapPosition } from 'ckeditor5/engine/view/writer.js';
 import Text from 'ckeditor5/engine/view/text.js';
 import Element from 'ckeditor5/engine/view/element.js';
 import ContainerElement from 'ckeditor5/engine/view/containerelement.js';
+import AttributeElement from 'ckeditor5/engine/view/attributeelement.js';
+import EmptyElement from 'ckeditor5/engine/view/emptyelement.js';
 import Position from 'ckeditor5/engine/view/position.js';
 import CKEditorError from 'ckeditor5/utils/ckeditorerror.js';
 import { stringify, parse } from 'ckeditor5/engine/dev-utils/view.js';
@@ -122,4 +124,15 @@ describe( 'wrapPosition', () => {
 			'<container:p><attribute:b view-priority="1">foobar{}</attribute:b></container:p>'
 		);
 	} );
+
+	it( 'should throw if position is set inside EmptyElement', () => {
+		const emptyElement = new EmptyElement( 'img' );
+		new ContainerElement( 'p', null, emptyElement );
+		const attributeElement = new AttributeElement( 'b' );
+		const position = new Position( emptyElement, 0 );
+
+		expect( () => {
+			wrapPosition( position, attributeElement );
+		} ).to.throw( CKEditorError, 'view-emptyelement-cannot-add' );
+	} );
 } );