`. Similar attribute elements are flattened by the view writer, so e.g. `x` would automatically be optimized to `x`.
* **Empty element** – The elements that must not have any child nodes, for example `abc
-->abc
//abc
-->abc
- // - else if ( isText || isEmpty || isUI || ( isAttribute && shouldABeOutsideB( wrapElement, child ) ) ) { + else if ( isText || isEmpty || isUI || isRaw || ( isAttribute && shouldABeOutsideB( wrapElement, child ) ) ) { // Clone attribute. const newAttribute = wrapElement._clone(); @@ -1572,6 +1609,16 @@ export default class DowncastWriter { throw new CKEditorError( 'view-writer-cannot-break-ui-element', this.document ); } + // If position is placed inside RawElement - throw an exception as we cannot break inside. + if ( position.parent.is( 'rawElement' ) ) { + /** + * Cannot break inside RawElement instance. + * + * @error view-writer-cannot-break-raw-element + */ + throw new CKEditorError( 'view-writer-cannot-break-raw-element: Cannot break inside a RawElement instance.', this.document ); + } + // There are no attributes to break and text nodes breaking is not forced. if ( !forceSplitText && positionParent.is( '$text' ) && isContainerOrFragment( positionParent.parent ) ) { return position.clone(); @@ -1872,7 +1919,7 @@ function validateNodesToInsert( nodes, errorContext ) { } } -const validNodesToInsert = [ Text, AttributeElement, ContainerElement, EmptyElement, UIElement ]; +const validNodesToInsert = [ Text, AttributeElement, ContainerElement, EmptyElement, RawElement, UIElement ]; // Checks if node is ContainerElement or DocumentFragment, because in most cases they should be treated the same way. // diff --git a/packages/ckeditor5-engine/src/view/observer/mutationobserver.js b/packages/ckeditor5-engine/src/view/observer/mutationobserver.js index 770344def59..299bbf2ea86 100644 --- a/packages/ckeditor5-engine/src/view/observer/mutationobserver.js +++ b/packages/ckeditor5-engine/src/view/observer/mutationobserver.js @@ -150,8 +150,8 @@ export default class MutationObserver extends Observer { if ( mutation.type === 'childList' ) { const element = domConverter.mapDomToView( mutation.target ); - // Do not collect mutations from UIElements. - if ( element && element.is( 'uiElement' ) ) { + // Do not collect mutations from UIElements and RawElements. + if ( element && ( element.is( 'uiElement' ) || element.is( 'rawElement' ) ) ) { continue; } @@ -165,8 +165,8 @@ export default class MutationObserver extends Observer { for ( const mutation of domMutations ) { const element = domConverter.mapDomToView( mutation.target ); - // Do not collect mutations from UIElements. - if ( element && element.is( 'uiElement' ) ) { + // Do not collect mutations from UIElements and RawElements. + if ( element && ( element.is( 'uiElement' ) || element.is( 'rawElement' ) ) ) { continue; } diff --git a/packages/ckeditor5-engine/src/view/rawelement.js b/packages/ckeditor5-engine/src/view/rawelement.js new file mode 100644 index 00000000000..86b6bf51099 --- /dev/null +++ b/packages/ckeditor5-engine/src/view/rawelement.js @@ -0,0 +1,145 @@ +/** + * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + +/** + * @module engine/view/rawelement + */ + +import Element from './element'; +import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror'; +import Node from './node'; + +/** + * The raw element class. + * + * Raw elements work as data containers ("wrappers", "sandboxes") but their children are not managed or + * even recognized by the editor. This encapsulation allows integrations to maintain custom DOM structures + * in the editor content without, for instance, worrying about compatibility with other editor features. + * Raw elements make a perfect tool for integration with external frameworks and data sources. + * + * Unlike {@link module:engine/view/uielement~UIElement ui elements}, raw elements act like a real editor + * content (similar to {@link module:engine/view/containerelement~ContainerElement} or + * {@link module:engine/view/emptyelement~EmptyElement}), they are considered by the editor selection and + * {@link module:widget/utils.toWidget they can work as widgets}. + * + * To create a new raw element use the + * {@link module:engine/view/downcastwriter~DowncastWriter#createRawElement `downcastWriter#createRawElement()`} method. + * + * @extends module:engine/view/element~Element + */ +export default class RawElement extends Element { + /** + * Creates new instance of RawElement. + * + * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `view-rawelement-cannot-add` when `children` parameter + * is passed, to inform that usage of `RawElement` is incorrect (adding child nodes to `RawElement` is forbidden). + * + * @see module:engine/view/downcastwriter~DowncastWriter#createRawElement + * @protected + * @param {module:engine/view/document~Document} document The document instance to which this element belongs. + * @param {String} name Node name. + * @param {Object|Iterable} [attrs] Collection of attributes. + * @param {module:engine/view/node~Node|Iterable.texttest
' ); } ); - it( 'should parse EmptyElement', () => { + it( 'should parse an EmptyElement', () => { const parsed = parse( 'foo bar
'; + }; + + return element; + } + + beforeEach( () => { + viewDocument = new ViewDocument( new StylesProcessor() ); + converter = new DomConverter( viewDocument ); + } ); + + describe( 'viewToDom()', () => { + it( 'should create a DOM element from a RawElement', () => { + const rawElement = new ViewRawElement( viewDocument, 'div' ); + rawElement.render = () => {}; + const domElement = converter.viewToDom( rawElement, document ); + + expect( domElement ).to.be.instanceOf( HTMLElement ); + } ); + + it( 'should create a DOM structure from a RawElement', () => { + const myElement = createRawElement( 'div' ); + const domElement = converter.viewToDom( myElement, document ); + + expect( domElement ).to.be.instanceOf( HTMLElement ); + expect( domElement.innerHTML ).to.equal( 'foo bar
' ); + } ); + + it( 'should create a DOM structure entirely mapped to a single RawElement', () => { + const myElement = createRawElement( 'div' ); + const domElement = converter.viewToDom( myElement, document, { bind: true } ); + const domParagraph = domElement.childNodes[ 0 ]; + + expect( converter.mapDomToView( domElement ) ).to.equal( myElement ); + expect( converter.mapDomToView( domParagraph ) ).to.equal( myElement ); + expect( converter.mapDomToView( domParagraph.childNodes[ 0 ] ) ).to.equal( myElement ); + } ); + } ); + + describe( 'domToView()', () => { + it( 'should return a RawElement', () => { + const rawElement = createRawElement( 'div' ); + const domElement = converter.viewToDom( rawElement, document, { bind: true } ); + + expect( converter.domToView( domElement ) ).to.equal( rawElement ); + } ); + + it( 'should return a RawElement for all nodes inside of it', () => { + const rawElement = createRawElement( 'div' ); + const domElement = converter.viewToDom( rawElement, document, { bind: true } ); + + const domParagraph = domElement.childNodes[ 0 ]; + const domSpan = domParagraph.childNodes[ 0 ]; + + expect( converter.domToView( domParagraph ) ).to.equal( rawElement ); + expect( converter.domToView( domSpan ) ).to.equal( rawElement ); + expect( converter.domToView( domParagraph.childNodes[ 0 ] ) ).equal( rawElement ); + expect( converter.domToView( domSpan.childNodes[ 0 ] ) ).equal( rawElement ); + } ); + } ); + + describe( 'domPositionToView()', () => { + it( 'should convert a position inside a RawElement to a position before it', () => { + const rawElement = createRawElement( 'h1' ); + const container = new ViewContainer( viewDocument, 'div', null, [ new ViewContainer( viewDocument, 'div' ), rawElement ] ); + const domContainer = converter.viewToDom( container, document, { bind: true } ); + + const viewPosition = converter.domPositionToView( domContainer.childNodes[ 1 ], 0 ); + + expect( viewPosition.parent ).to.equal( container ); + expect( viewPosition.offset ).to.equal( 1 ); + } ); + + it( 'should convert a position inside RawElement children to a position before it', () => { + const rawElement = createRawElement( 'h1' ); + const container = new ViewContainer( viewDocument, 'div', null, [ new ViewContainer( viewDocument, 'div' ), rawElement ] ); + const domContainer = converter.viewToDom( container, document, { bind: true } ); + + const viewPosition = converter.domPositionToView( domContainer.childNodes[ 1 ].childNodes[ 0 ], 1 ); + + expect( viewPosition.parent ).to.equal( container ); + expect( viewPosition.offset ).to.equal( 1 ); + } ); + } ); + + describe( 'mapDomToView()', () => { + it( 'should return a RawElement for all DOM elements inside of it', () => { + const myElement = createRawElement( 'div' ); + const domElement = converter.viewToDom( myElement, document, { bind: true } ); + + expect( converter.mapDomToView( domElement ) ).to.equal( myElement ); + + const domParagraph = domElement.childNodes[ 0 ]; + expect( converter.mapDomToView( domParagraph ) ).to.equal( myElement ); + + const domSpan = domParagraph.childNodes[ 0 ]; + expect( converter.mapDomToView( domSpan ) ).to.equal( myElement ); + } ); + } ); + + describe( 'findCorrespondingViewText()', () => { + it( 'should return a RawElement for all DOM text nodes inside of it', () => { + const myElement = createRawElement( 'div' ); + const domElement = converter.viewToDom( myElement, document, { bind: true } ); + + const domText = domElement.querySelector( 'span' ).childNodes[ 0 ]; + expect( converter.findCorrespondingViewText( domText ) ).to.equal( myElement ); + } ); + } ); + + describe( 'getHostViewElement()', () => { + it( 'should return a RawElement for all DOM children', () => { + const rawElement = createRawElement( 'div' ); + const domElement = converter.viewToDom( rawElement, document, { bind: true } ); + + const domParagraph = domElement.childNodes[ 0 ]; + const domSpan = domParagraph.childNodes[ 0 ]; + + expect( converter.getHostViewElement( domParagraph ) ).to.equal( rawElement ); + expect( converter.getHostViewElement( domSpan ) ).to.equal( rawElement ); + } ); + + it( 'should return "null" for the parent itself', () => { + const rawElement = createRawElement( 'div' ); + const domElement = converter.viewToDom( rawElement, document, { bind: true } ); + + expect( converter.getHostViewElement( domElement ) ).to.be.null; + } ); + } ); +} ); diff --git a/packages/ckeditor5-engine/tests/view/domconverter/uielement.js b/packages/ckeditor5-engine/tests/view/domconverter/uielement.js index 5ea8b14c042..7e77e092aff 100644 --- a/packages/ckeditor5-engine/tests/view/domconverter/uielement.js +++ b/packages/ckeditor5-engine/tests/view/domconverter/uielement.js @@ -130,7 +130,7 @@ describe( 'DOMConverter UIElement integration', () => { } ); } ); - describe( 'getParentUIElement()', () => { + describe( 'getHostViewElement()', () => { it( 'should return UIElement for DOM children', () => { const uiElement = createUIElement( 'div' ); const domElement = converter.viewToDom( uiElement, document, { bind: true } ); @@ -138,15 +138,15 @@ describe( 'DOMConverter UIElement integration', () => { const domParagraph = domElement.childNodes[ 0 ]; const domSpan = domParagraph.childNodes[ 0 ]; - expect( converter.getParentUIElement( domParagraph ) ).to.equal( uiElement ); - expect( converter.getParentUIElement( domSpan ) ).to.equal( uiElement ); + expect( converter.getHostViewElement( domParagraph ) ).to.equal( uiElement ); + expect( converter.getHostViewElement( domSpan ) ).to.equal( uiElement ); } ); it( 'should return null for element itself', () => { const uiElement = createUIElement( 'div' ); const domElement = converter.viewToDom( uiElement, document, { bind: true } ); - expect( converter.getParentUIElement( domElement ) ).to.be.null; + expect( converter.getHostViewElement( domElement ) ).to.be.null; } ); } ); } ); diff --git a/packages/ckeditor5-engine/tests/view/downcastwriter/breakattributes.js b/packages/ckeditor5-engine/tests/view/downcastwriter/breakattributes.js index eb7177c1bd5..c681e3b9553 100644 --- a/packages/ckeditor5-engine/tests/view/downcastwriter/breakattributes.js +++ b/packages/ckeditor5-engine/tests/view/downcastwriter/breakattributes.js @@ -10,6 +10,7 @@ import ContainerElement from '../../../src/view/containerelement'; import AttributeElement from '../../../src/view/attributeelement'; import EmptyElement from '../../../src/view/emptyelement'; import UIElement from '../../../src/view/uielement'; +import RawElement from '../../../src/view/rawelement'; import Range from '../../../src/view/range'; import Position from '../../../src/view/position'; @@ -282,6 +283,27 @@ describe( 'DowncastWriter', () => { writer.breakAttributes( range ); }, 'view-writer-cannot-break-ui-element', writer ); } ); + + it( 'should throw if breaking inside a RawElement #1', () => { + const span = new RawElement( document, 'span' ); + new ContainerElement( document, 'p', null, span ); // eslint-disable-line no-new + const position = new Position( span, 0 ); + + expectToThrowCKEditorError( () => { + writer.breakAttributes( position ); + }, 'view-writer-cannot-break-raw-element', writer ); + } ); + + it( 'should throw if breaking inside a RawElement #2', () => { + const span = new RawElement( document, 'span' ); + const b = new AttributeElement( document, 'b' ); + new ContainerElement( document, 'p', null, [ span, b ] ); // eslint-disable-line no-new + const range = Range._createFromParentsAndOffsets( span, 0, b, 0 ); + + expectToThrowCKEditorError( () => { + writer.breakAttributes( range ); + }, 'view-writer-cannot-break-raw-element', writer ); + } ); } ); } ); } ); diff --git a/packages/ckeditor5-engine/tests/view/downcastwriter/clear.js b/packages/ckeditor5-engine/tests/view/downcastwriter/clear.js index eb5b01dcaad..94b5e4f2a24 100644 --- a/packages/ckeditor5-engine/tests/view/downcastwriter/clear.js +++ b/packages/ckeditor5-engine/tests/view/downcastwriter/clear.js @@ -10,6 +10,7 @@ import ContainerElement from '../../../src/view/containerelement'; import AttributeElement from '../../../src/view/attributeelement'; import EmptyElement from '../../../src/view/emptyelement'; import UIElement from '../../../src/view/uielement'; +import RawElement from '../../../src/view/rawelement'; import Document from '../../../src/view/document'; import { expectToThrowCKEditorError } from '@ckeditor/ckeditor5-utils/tests/_utils/utils'; @@ -166,6 +167,16 @@ describe( 'DowncastWriter', () => { ); } ); + it( 'should remove a RawElement', () => { + const elementToRemove = new RawElement( document, 'span' ); + + testDowncast( + elementToRemove, + 'FooUI2 Bar
' ) ); } ); + it( 'should handle RawElement rendering', () => { + function createRawElement( id, text ) { + const element = new ViewRawElement( viewDocument, 'span' ); + element.render = function( domElement ) { + domElement.innerText = `${ text }`; + }; + + return element; + } + + const raw1 = createRawElement( 'id1', 'RAW1' ); + const raw2 = createRawElement( 'id2', 'RAW2' ); + const viewP = new ViewContainerElement( viewDocument, 'p', null, [ + new ViewText( viewDocument, 'Foo ' ), + raw1, + new ViewText( viewDocument, 'Bar' ) + ] ); + viewRoot._appendChild( viewP ); + + renderer.markToSync( 'children', viewRoot ); + renderer.render(); + + expect( normalizeHtml( domRoot.innerHTML ) ).to.equal( normalizeHtml( + 'Foo RAW1Bar
' ) ); + + viewP._removeChildren( 0, viewP.childCount ); + viewP._insertChild( 0, [ new ViewText( viewDocument, 'Foo' ), raw2, new ViewText( viewDocument, ' Bar' ) ] ); + + renderer.markToSync( 'children', viewRoot ); + renderer.markToSync( 'children', viewP ); + renderer.render(); + + expect( normalizeHtml( domRoot.innerHTML ) ).to.equal( normalizeHtml( + 'FooRAW2 Bar
' ) ); + } ); + + it( 'should manage RawElement attributes', () => { + const rawElement = new ViewRawElement( viewDocument, 'span', { + foo: 'foo1', + baz: 'baz1' + } ); + + rawElement.render = function( domElement ) { + domElement.innerHTML = 'foo'; + }; + + const viewP = new ViewContainerElement( viewDocument, 'p', null, [ rawElement ] ); + viewRoot._appendChild( viewP ); + + renderer.markToSync( 'children', viewRoot ); + renderer.render(); + + expect( normalizeHtml( domRoot.innerHTML ) ).to.equal( normalizeHtml( + 'foo
' ) ); + + rawElement._setAttribute( 'foo', 'foo2' ); + rawElement._setAttribute( 'new', 'new-value' ); + rawElement._removeAttribute( 'baz' ); + + renderer.markToSync( 'attributes', rawElement ); + renderer.render(); + + expect( normalizeHtml( domRoot.innerHTML ) ).to.equal( normalizeHtml( + 'foo
' ) ); + } ); + it( 'should handle linking entire content', () => { viewRoot._appendChild( parse( '