|
|
@@ -16,6 +16,7 @@ import View from './view';
|
|
|
import ViewCollection from './viewcollection';
|
|
|
import cloneDeepWith from '@ckeditor/ckeditor5-utils/src/lib/lodash/cloneDeepWith';
|
|
|
import isObject from '@ckeditor/ckeditor5-utils/src/lib/lodash/isObject';
|
|
|
+import isDomNode from '@ckeditor/ckeditor5-utils/src/dom/isdomnode';
|
|
|
import log from '@ckeditor/ckeditor5-utils/src/log';
|
|
|
|
|
|
const xhtmlNs = 'http://www.w3.org/1999/xhtml';
|
|
|
@@ -98,12 +99,13 @@ export default class Template {
|
|
|
*/
|
|
|
|
|
|
/**
|
|
|
- * Children of the template, sub–templates. Each one is an independent
|
|
|
- * instance of {@link ~Template}.
|
|
|
+ * Children of the template. They can be either:
|
|
|
+ * * an independent instances of {@link ~Template} (sub–templates),
|
|
|
+ * * native DOM Nodes.
|
|
|
*
|
|
|
* **Note**: This property only makes sense when {@link #tag} is defined.
|
|
|
*
|
|
|
- * @member {Array.<module:ui/template~Template>} #children
|
|
|
+ * @member {Array.<module:ui/template~Template|Node>} #children
|
|
|
*/
|
|
|
|
|
|
/**
|
|
|
@@ -701,6 +703,8 @@ export default class Template {
|
|
|
|
|
|
container.appendChild( child.element );
|
|
|
}
|
|
|
+ } else if ( isDomNode( child ) ) {
|
|
|
+ container.appendChild( child );
|
|
|
} else {
|
|
|
if ( isApplying ) {
|
|
|
const revertData = data.revertData;
|
|
|
@@ -1173,7 +1177,7 @@ function normalize( def ) {
|
|
|
children.push( def.children );
|
|
|
} else {
|
|
|
for ( const child of def.children ) {
|
|
|
- if ( isTemplate( child ) || isView( child ) ) {
|
|
|
+ if ( isTemplate( child ) || isView( child ) || isDomNode( child ) ) {
|
|
|
children.push( child );
|
|
|
} else {
|
|
|
children.push( new Template( child ) );
|
|
|
@@ -1485,11 +1489,12 @@ function shouldExtend( attrName ) {
|
|
|
* }
|
|
|
* } );
|
|
|
*
|
|
|
- * A {@link module:ui/view~View} or another {@link module:ui/template~Template} can also become a child
|
|
|
- * of a template. In case of a view {@link module:ui/view~View#element} is used:
|
|
|
+ * A {@link module:ui/view~View}, another {@link module:ui/template~Template} or a native DOM node
|
|
|
+ * can also become a child of a template. When a view is passed, its {@link module:ui/view~View#element} is used:
|
|
|
*
|
|
|
* const view = new SomeView();
|
|
|
* const childTemplate = new Template( { ... } );
|
|
|
+ * const childNode = document.createElement( 'b' );
|
|
|
*
|
|
|
* new Template( {
|
|
|
* tag: 'p',
|
|
|
@@ -1499,7 +1504,10 @@ function shouldExtend( attrName ) {
|
|
|
* view,
|
|
|
*
|
|
|
* // The output of childTemplate.render() will be added here.
|
|
|
- * childTemplate
|
|
|
+ * childTemplate,
|
|
|
+ *
|
|
|
+ * // Native DOM nodes are included directly in the rendered output.
|
|
|
+ * childNode
|
|
|
* ]
|
|
|
* } );
|
|
|
*
|