Merge pull request #53 from ckeditor/t/49

Fix: `EditableElement` should be recognized in the View node inspector. Closes #49.
ckeditor · Jun 14, 2019 · 729a922 · 729a922
2 parents 32c5613 + b0fba73
commit 729a922
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 0 deletions.
diff --git a/src/components/view/nodeinspector.js b/src/components/view/nodeinspector.js
@@ -13,6 +13,7 @@ import {
 	isViewRoot,
 	isViewAttributeElement,
 	isViewUiElement,
+	isViewEditableElement,
 	isViewEmptyElement
 } from './utils';
 import { stringifyPropertyList } from '../utils';
@@ -112,6 +113,9 @@ class NodeInspector extends Component {
 				} else if ( isViewUiElement( node ) ) {
 					info.type = 'UIElement';
 					info.url = `${ DOCS_URL_PREFIX }_uielement-UIElement.html`;
+				} else if ( isViewEditableElement( node ) ) {
+					info.type = 'EditableElement';
+					info.url = `${ DOCS_URL_PREFIX }_editableelement-EditableElement.html`;
 				} else {
 					info.type = 'ContainerElement';
 					info.url = `${ DOCS_URL_PREFIX }_containerelement-ContainerElement.html`;

diff --git a/src/components/view/utils.js b/src/components/view/utils.js
@@ -19,6 +19,10 @@ export function isViewUiElement( node ) {
 	return node && isViewElement( node ) && node.is( 'uiElement' );
 }
 
+export function isViewEditableElement( node ) {
+	return node && isViewElement( node ) && node.is( 'editableElement' );
+}
+
 export function isViewRoot( node ) {
 	return node && node.is( 'rootElement' );
 }

diff --git a/tests/inspector/components/view/nodeinspector.js b/tests/inspector/components/view/nodeinspector.js
@@ -283,6 +283,41 @@ describe( '<ViewNodeInspector />', () => {
 			] );
 		} );
 
+		it( 'renders for an EditableElement', () => {
+			editor.setData( '' );
+
+			editor.editing.view.change( writer => {
+				const foo = writer.createEditableElement( 'p' );
+				writer.insert( editor.editing.view.document.selection.getFirstPosition(), foo );
+				writer.setCustomProperty( 'foo', 'bar', foo );
+			} );
+
+			wrapper.setProps( {
+				inspectedNode: root.getChild( 0 ).getChild( 0 )
+			} );
+
+			expect( wrapper.childAt( 0 ).find( 'h2 span' ).text() ).to.equal( 'EditableElement:p' );
+			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 ].items ).to.deep.equal( [] );
+
+			expect( lists[ 1 ].name ).to.equal( 'Properties' );
+			expect( lists[ 1 ].items ).to.deep.equal( [
+				[ 'index', '0' ],
+				[ 'isEmpty', 'true' ],
+				[ 'childCount', '0' ],
+			] );
+
+			const items = lists[ 2 ].items;
+			expect( items[ 0 ][ 0 ] ).to.equal( 'Symbol(document)' );
+			expect( items[ 0 ][ 1 ] ).to.match( /^{/ );
+			expect( items[ 1 ] ).to.have.members( [ 'foo', '"bar"' ] );
+		} );
+
 		it( 'renders for a Text', () => {
 			editor.setData( '<p>foo</p>' );