Merge pull request #95 from ckeditor/i/89-raw-view-element

Feature: Brought support for the editor [`view.RawElement`](https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_view_rawelement-RawElement.html). Closes #89.

package.json

@@ -42,13 +42,13 @@
     "@babel/cli": "^7.2.3",
     "@babel/core": "^7.2.2",
     "@babel/preset-react": "^7.0.0",
-    "@ckeditor/ckeditor5-basic-styles": "^20.0.0",
-    "@ckeditor/ckeditor5-build-decoupled-document": "^20.0.0",
-    "@ckeditor/ckeditor5-core": "^20.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^21.0.0",
+    "@ckeditor/ckeditor5-build-decoupled-document": "^21.0.0",
+    "@ckeditor/ckeditor5-core": "^21.0.0",
     "@ckeditor/ckeditor5-dev-env": "^20.2.0",
-    "@ckeditor/ckeditor5-paragraph": "^20.0.0",
-    "@ckeditor/ckeditor5-ui": "^20.0.0",
-    "@ckeditor/ckeditor5-utils": "^20.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^21.0.0",
+    "@ckeditor/ckeditor5-ui": "^21.0.0",
+    "@ckeditor/ckeditor5-utils": "^21.0.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
     "chai": "^4.1.2",

src/view/data/utils.js

@@ -10,6 +10,7 @@ import {
 	isViewRoot,
 	isViewEmptyElement,
 	isViewUiElement,
+	isViewRawElement,
 	getViewPositionDefinition
 } from '../utils';
 
@@ -22,6 +23,16 @@ import {
 
 export const DOCS_URL_PREFIX = 'https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_view';
 
+const UI_ELEMENT_CONTENT_COMMENT = '<!--' +
+	'The View UI element content has been skipped. ' +
+	`<a href="${ DOCS_URL_PREFIX }_uielement-UIElement.html" target="_blank">Find out why</a>.` +
+' --&gt;';
+
+const RAW_ELEMENT_CONTENT_COMMENT = '&lt;!--' +
+	'The View raw element content has been skipped. ' +
+	`<a href="${ DOCS_URL_PREFIX }_rawelement-RawElement.html" target="_blank">Find out why</a>.` +
+' --&gt;';
+
 export function getEditorViewRoots( editor ) {
 	if ( !editor ) {
 		return [];
@@ -91,6 +102,9 @@ export function getEditorViewNodeDefinition( node ) {
 			} else if ( isViewUiElement( node ) ) {
 				info.type = 'UIElement';
 				info.url = `${ DOCS_URL_PREFIX }_uielement-UIElement.html`;
+			} else if ( isViewRawElement( node ) ) {
+				info.type = 'RawElement';
+				info.url = `${ DOCS_URL_PREFIX }_rawelement-RawElement.html`;
 			} else if ( isViewEditableElement( node ) ) {
 				info.type = 'EditableElement';
 				info.url = `${ DOCS_URL_PREFIX }_editableelement-EditableElement.html`;
@@ -181,6 +195,8 @@ function fillElementDefinition( elementDefinition, ranges ) {
 		elementDefinition.elementType = 'empty';
 	} else if ( isViewUiElement( element ) ) {
 		elementDefinition.elementType = 'ui';
+	} else if ( isViewRawElement( element ) ) {
+		elementDefinition.elementType = 'raw';
 	} else {
 		elementDefinition.elementType = 'container';
 	}
@@ -191,19 +207,15 @@ function fillElementDefinition( elementDefinition, ranges ) {
 		elementDefinition.presentation = {
 			isEmpty: true
 		};
-	}
-
-	if ( isViewUiElement( element ) ) {
+	} else if ( isViewUiElement( element ) ) {
+		elementDefinition.children.push( {
+			type: 'comment',
+			text: UI_ELEMENT_CONTENT_COMMENT
+		} );
+	} else if ( isViewRawElement( element ) ) {
 		elementDefinition.children.push( {
 			type: 'comment',
-			text: [
-				'&lt;!--',
-				'The View UI element content has been skipped. ',
-				'<a href="https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_view_uielement-UIElement.html" target="_blank">',
-				'Find out why',
-				'</a>.',
-				' --&gt;'
-			].join( '' )
+			text: RAW_ELEMENT_CONTENT_COMMENT
 		} );
 	}
 

src/view/utils.js

@@ -19,6 +19,10 @@ export function isViewUiElement( node ) {
 	return node && isViewElement( node ) && node.is( 'uiElement' );
 }
 
+export function isViewRawElement( node ) {
+	return node && isViewElement( node ) && node.is( 'rawElement' );
+}
+
 export function isViewEditableElement( node ) {
 	return node && isViewElement( node ) && node.is( 'editableElement' );
 }

tests/inspector/view/data/utils.js

@@ -97,14 +97,17 @@ describe( 'view data utils', () => {
 		it( 'should render with element types when state#showElementTypes is true', () => {
 			editor.setData( '<p><b>foo</b></p>' );
 
-			let emptyElement, uiElement;
+			let emptyElement, uiElement, rawElement;
 
 			editor.editing.view.change( writer => {
 				emptyElement = writer.createEmptyElement( 'foo' );
 				writer.insert( editor.editing.view.document.selection.getFirstPosition(), emptyElement );
 
-				uiElement = writer.createUIElement( 'foo' );
+				uiElement = writer.createUIElement( 'bar' );
 				writer.insert( editor.editing.view.document.selection.getFirstPosition(), uiElement );
+
+				rawElement = writer.createRawElement( 'baz' );
+				writer.insert( editor.editing.view.document.selection.getFirstPosition(), rawElement );
 			} );
 
 			const ranges = getEditorViewRanges( editor, 'main' );
@@ -139,7 +142,7 @@ describe( 'view data utils', () => {
 								},
 								{
 									type: 'element',
-									name: 'foo',
+									name: 'bar',
 									elementType: 'ui',
 									node: uiElement,
 									attributes: [],
@@ -150,15 +153,28 @@ describe( 'view data utils', () => {
 										}
 									]
 								},
+								{
+									type: 'element',
+									name: 'baz',
+									elementType: 'raw',
+									node: rawElement,
+									attributes: [],
+									children: [
+										{
+											type: 'comment',
+											text: /The View raw element content has been skipped/
+										}
+									]
+								},
 								{
 									type: 'element',
 									name: 'strong',
 									elementType: 'attribute',
-									node: root.getChild( 0 ).getChild( 2 ),
+									node: root.getChild( 0 ).getChild( 3 ),
 									children: [
 										{
 											type: 'text',
-											node: root.getChild( 0 ).getChild( 2 ).getChild( 0 ),
+											node: root.getChild( 0 ).getChild( 3 ).getChild( 0 ),
 											positions: [
 												{ offset: 0, isEnd: false, presentation: null, type: 'selection', name: null },
 												{ offset: 0, isEnd: true, presentation: null, type: 'selection', name: null }
@@ -229,6 +245,61 @@ describe( 'view data utils', () => {
 			] );
 		} );
 
+		it( 'should render a raw element content as a comment', () => {
+			editor.setData( '<p></p>' );
+
+			let uiElement;
+
+			editor.editing.view.change( writer => {
+				uiElement = writer.createRawElement( 'foo' );
+				writer.insert(
+					writer.createPositionAt( editor.editing.view.document.getRoot().getChild( 0 ), 0 ),
+					uiElement );
+			} );
+
+			const ranges = getEditorViewRanges( editor, 'main' );
+			const definition = getEditorViewTreeDefinition( {
+				currentEditor: editor,
+				currentRootName: 'main',
+				ranges
+			} );
+
+			assertTreeItems( definition, [
+				{
+					type: 'element',
+					name: 'div',
+					node: root,
+					attributes: ROOT_ATTRIBUTES,
+					children: [
+						{
+							type: 'element',
+							name: 'p',
+							node: root.getChild( 0 ),
+							attributes: [],
+							children: [
+								{
+									type: 'element',
+									name: 'foo',
+									node: uiElement,
+									attributes: [],
+									positionsBefore: [
+										{ offset: 0, isEnd: false, presentation: null, type: 'selection', name: null },
+										{ offset: 0, isEnd: true, presentation: null, type: 'selection', name: null }
+									],
+									children: [
+										{
+											type: 'comment',
+											text: /The View raw element content has been skipped/
+										}
+									]
+								}
+							]
+						}
+					]
+				}
+			] );
+		} );
+
 		it( 'should render a tree #1', () => {
 			editor.setData( '<p></p>' );
 

tests/inspector/view/nodeinspector.js

@@ -301,6 +301,57 @@ describe( '<ViewNodeInspector />', () => {
 			wrapper.unmount();
 		} );
 
+		it( 'should render for a <RawElement>', () => {
+			editor.setData( '<p>foo</p>' );
+
+			editor.editing.view.change( writer => {
+				const foo = writer.createRawElement( 'foo', {
+					class: 'bar'
+				}, domElement => {
+					domElement.innerHTML = '<b>baz</b>';
+				} );
+
+				writer.insert( editor.editing.view.document.selection.getFirstPosition(), foo );
+				writer.setCustomProperty( 'foo', 'bar', foo );
+			} );
+
+			const element = editor.editing.view.document.getRoot().getChild( 0 ).getChild( 0 );
+
+			const store = createStore( state => state, {
+				view: {
+					currentNode: element,
+					currentNodeDefinition: getEditorViewNodeDefinition( element )
+				}
+			} );
+
+			const wrapper = mount( <Provider store={store}><ViewNodeInspector /></Provider> );
+
+			expect( wrapper.childAt( 0 ).find( 'h2 span' ).text() ).to.equal( 'RawElement:foo' );
+			expect( wrapper.childAt( 0 ).find( 'h2 a' ) ).to.have.attr( 'href' ).match( /^https:\/\/ckeditor.com\/docs/ );
+
+			const inspector = wrapper.find( ObjectInspector );
+			const lists = inspector.props().lists;
+
+			expect( lists[ 0 ].name ).to.equal( 'Attributes' );
+			expect( lists[ 0 ].itemDefinitions ).to.deep.equal( {
+				class: { value: '"bar"' }
+			} );
+
+			expect( lists[ 1 ].name ).to.equal( 'Properties' );
+			expect( lists[ 1 ].itemDefinitions ).to.deep.equal( {
+				index: { value: '0' },
+				isEmpty: { value: 'true' },
+				childCount: { value: '0' }
+			} );
+
+			expect( lists[ 2 ].name ).to.equal( 'Custom Properties' );
+			expect( lists[ 2 ].itemDefinitions ).to.deep.equal( {
+				foo: { value: '"bar"' }
+			} );
+
+			wrapper.unmount();
+		} );
+
 		it( 'should render for an <EditableElement>', () => {
 			editor.setData( '' );