|
@@ -199,6 +199,16 @@ export default class DomConverter {
|
|
|
if ( options.bind ) {
|
|
if ( options.bind ) {
|
|
|
this.bindDocumentFragments( domElement, viewNode );
|
|
this.bindDocumentFragments( domElement, viewNode );
|
|
|
}
|
|
}
|
|
|
|
|
+ } else if ( viewNode.is( 'uiElement' ) ) {
|
|
|
|
|
+ // UIElement has it's own render() method.
|
|
|
|
|
+ // https://github.com/ckeditor/ckeditor5-engine/issues/799
|
|
|
|
|
+ domElement = viewNode.render( domDocument );
|
|
|
|
|
+
|
|
|
|
|
+ if ( options.bind ) {
|
|
|
|
|
+ this.bindElements( domElement, viewNode );
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ return domElement;
|
|
|
} else {
|
|
} else {
|
|
|
// Create DOM element.
|
|
// Create DOM element.
|
|
|
domElement = domDocument.createElement( viewNode.name );
|
|
domElement = domDocument.createElement( viewNode.name );
|
|
@@ -339,6 +349,7 @@ export default class DomConverter {
|
|
|
* Converts DOM to view. For all text nodes, not bound elements and document fragments new items will
|
|
* Converts DOM to view. For all text nodes, not bound elements and document fragments new items will
|
|
|
* be created. For bound elements and document fragments function will return corresponding items. For
|
|
* be created. For bound elements and document fragments function will return corresponding items. For
|
|
|
* {@link module:engine/view/filler fillers} `null` will be returned.
|
|
* {@link module:engine/view/filler fillers} `null` will be returned.
|
|
|
|
|
+ * For all DOM elements rendered by {@link module:engine/view/uielement~UIElement} that UIElement will be returned.
|
|
|
*
|
|
*
|
|
|
* @param {Node|DocumentFragment} domNode DOM node or document fragment to transform.
|
|
* @param {Node|DocumentFragment} domNode DOM node or document fragment to transform.
|
|
|
* @param {Object} [options] Conversion options.
|
|
* @param {Object} [options] Conversion options.
|
|
@@ -353,6 +364,13 @@ export default class DomConverter {
|
|
|
return null;
|
|
return null;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ // When node is inside UIElement return that UIElement as it's view representation.
|
|
|
|
|
+ const uiElement = this.getParentUIElement( domNode, this._domToViewMapping );
|
|
|
|
|
+
|
|
|
|
|
+ if ( uiElement ) {
|
|
|
|
|
+ return uiElement;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
if ( this.isText( domNode ) ) {
|
|
if ( this.isText( domNode ) ) {
|
|
|
if ( isInlineFiller( domNode ) ) {
|
|
if ( isInlineFiller( domNode ) ) {
|
|
|
return null;
|
|
return null;
|
|
@@ -488,6 +506,9 @@ export default class DomConverter {
|
|
|
* If the position is inside a {@link module:engine/view/filler filler} which has no corresponding view node,
|
|
* If the position is inside a {@link module:engine/view/filler filler} which has no corresponding view node,
|
|
|
* position of the filler will be converted and returned.
|
|
* position of the filler will be converted and returned.
|
|
|
*
|
|
*
|
|
|
|
|
+ * If the position is inside DOM element rendered by {@link module:engine/view/uielement~UIElement}
|
|
|
|
|
+ * that position will be converted to view position before that UIElement.
|
|
|
|
|
+ *
|
|
|
* If structures are too different and it is not possible to find corresponding position then `null` will be returned.
|
|
* If structures are too different and it is not possible to find corresponding position then `null` will be returned.
|
|
|
*
|
|
*
|
|
|
* @param {Node} domParent DOM position parent.
|
|
* @param {Node} domParent DOM position parent.
|
|
@@ -499,6 +520,12 @@ export default class DomConverter {
|
|
|
return this.domPositionToView( domParent.parentNode, indexOf( domParent ) );
|
|
return this.domPositionToView( domParent.parentNode, indexOf( domParent ) );
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ // If position is somewhere inside UIElement - return position before that element.
|
|
|
|
|
+ const viewElement = this.getCorrespondingViewElement( domParent );
|
|
|
|
|
+ if ( viewElement && viewElement.is( 'uiElement' ) ) {
|
|
|
|
|
+ return ViewPosition.createBefore( viewElement );
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
if ( this.isText( domParent ) ) {
|
|
if ( this.isText( domParent ) ) {
|
|
|
if ( isInlineFiller( domParent ) ) {
|
|
if ( isInlineFiller( domParent ) ) {
|
|
|
return this.domPositionToView( domParent.parentNode, indexOf( domParent ) );
|
|
return this.domPositionToView( domParent.parentNode, indexOf( domParent ) );
|
|
@@ -567,12 +594,13 @@ export default class DomConverter {
|
|
|
/**
|
|
/**
|
|
|
* Gets corresponding view element. Returns element if an view element was
|
|
* Gets corresponding view element. Returns element if an view element was
|
|
|
* {@link module:engine/view/domconverter~DomConverter#bindElements bound} to the given DOM element or `null` otherwise.
|
|
* {@link module:engine/view/domconverter~DomConverter#bindElements bound} to the given DOM element or `null` otherwise.
|
|
|
|
|
+ * For all DOM elements rendered by {@link module:engine/view/uielement~UIElement} that UIElement will be returned.
|
|
|
*
|
|
*
|
|
|
* @param {HTMLElement} domElement DOM element.
|
|
* @param {HTMLElement} domElement DOM element.
|
|
|
* @returns {module:engine/view/element~Element|null} Corresponding element or `null` if no element was bound.
|
|
* @returns {module:engine/view/element~Element|null} Corresponding element or `null` if no element was bound.
|
|
|
*/
|
|
*/
|
|
|
getCorrespondingViewElement( domElement ) {
|
|
getCorrespondingViewElement( domElement ) {
|
|
|
- return this._domToViewMapping.get( domElement );
|
|
|
|
|
|
|
+ return this.getParentUIElement( domElement ) || this._domToViewMapping.get( domElement );
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -597,6 +625,8 @@ export default class DomConverter {
|
|
|
* If this is a first child in the parent and the parent is a {@link module:engine/view/domconverter~DomConverter#bindElements bound}
|
|
* If this is a first child in the parent and the parent is a {@link module:engine/view/domconverter~DomConverter#bindElements bound}
|
|
|
* element, it is used to find the corresponding text node.
|
|
* element, it is used to find the corresponding text node.
|
|
|
*
|
|
*
|
|
|
|
|
+ * For all text nodes rendered by {@link module:engine/view/uielement~UIElement} that UIElement will be returned.
|
|
|
|
|
+ *
|
|
|
* Otherwise `null` is returned.
|
|
* Otherwise `null` is returned.
|
|
|
*
|
|
*
|
|
|
* Note that for the block or inline {@link module:engine/view/filler filler} this method returns `null`.
|
|
* Note that for the block or inline {@link module:engine/view/filler filler} this method returns `null`.
|
|
@@ -610,6 +640,13 @@ export default class DomConverter {
|
|
|
return null;
|
|
return null;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ // If DOM text was rendered by UIElement - return that element.
|
|
|
|
|
+ const uiElement = this.getParentUIElement( domText );
|
|
|
|
|
+
|
|
|
|
|
+ if ( uiElement ) {
|
|
|
|
|
+ return uiElement;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
const previousSibling = domText.previousSibling;
|
|
const previousSibling = domText.previousSibling;
|
|
|
|
|
|
|
|
// Try to use previous sibling to find the corresponding text node.
|
|
// Try to use previous sibling to find the corresponding text node.
|
|
@@ -832,6 +869,31 @@ export default class DomConverter {
|
|
|
return backward;
|
|
return backward;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Returns parent {@link module:engine/view/uielement~UIElement} for provided DOM node. Returns null if there is no
|
|
|
|
|
+ * parent UIElement.
|
|
|
|
|
+ *
|
|
|
|
|
+ * @param {Node} domNode
|
|
|
|
|
+ * @return {module:engine/view/uielement~UIElement|null}
|
|
|
|
|
+ */
|
|
|
|
|
+ getParentUIElement( domNode ) {
|
|
|
|
|
+ const ancestors = getAncestors( domNode );
|
|
|
|
|
+
|
|
|
|
|
+ // Remove domNode from the list.
|
|
|
|
|
+ ancestors.pop();
|
|
|
|
|
+
|
|
|
|
|
+ while ( ancestors.length ) {
|
|
|
|
|
+ const domNode = ancestors.pop();
|
|
|
|
|
+ const viewNode = this._domToViewMapping.get( domNode );
|
|
|
|
|
+
|
|
|
|
|
+ if ( viewNode && viewNode.is( 'uiElement' ) ) {
|
|
|
|
|
+ return viewNode;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ return null;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
/**
|
|
/**
|
|
|
* Takes text data from given {@link module:engine/view/text~Text#data} and processes it so it is correctly displayed in DOM.
|
|
* Takes text data from given {@link module:engine/view/text~Text#data} and processes it so it is correctly displayed in DOM.
|
|
|
*
|
|
*
|