Merge b5c143a into 40c3102

ckeditor · Oct 24, 2019 · 35001fd · 35001fd
2 parents 40c3102 + b5c143a
commit 35001fd
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 10 deletions.
diff --git a/src/components/model/nodeinspector.js b/src/components/model/nodeinspector.js
@@ -122,6 +122,13 @@ class ModelNodeInspector extends Component {
 		info.properties = stringifyPropertyList( info.properties );
 		info.attributes = stringifyPropertyList( info.attributes );
 
+		for ( const attribute of info.attributes ) {
+			const attributeName = attribute[ 0 ];
+			const attirbuteProperties = Object.entries( this.props.editor.model.schema.getAttributeProperties( attributeName ) );
+
+			attribute.push( stringifyPropertyList( attirbuteProperties ) );
+		}
+
 		return info;
 	}
 }

diff --git a/src/components/propertylist.css b/src/components/propertylist.css
@@ -9,6 +9,7 @@
 	--ck-inspector-color-property-list-property-value-false: red;
 	--ck-inspector-color-property-list-property-value-unknown: #888;
 	--ck-inspector-color-property-list-background: #F5F5F5;
+	--ck-inspector-color-property-list-title-collapser: #727272;
 }
 
 .ck-inspector .ck-inspector-property-list {
@@ -22,6 +23,29 @@
 	& dt {
 		padding: 0 .7em 0 1.2em;
 		min-width: 15em;
+
+		&.ck-inspector-property-list__title_collapsible button {
+			display: inline-block;
+			overflow: hidden;
+			vertical-align: middle;
+			margin-left: -9px;
+			margin-right: .3em;
+			width: 0;
+			height: 0;
+			border-style: solid;
+			border-width: 3.5px 0 3.5px 6px;
+			border-color: transparent transparent transparent var(--ck-inspector-color-property-list-title-collapser);
+			transition: transform .2s ease-in-out;
+			transform: rotate(0deg);
+		}
+
+		&.ck-inspector-property-list__title_expanded button {
+			transform: rotate(90deg);
+		}
+
+		&.ck-inspector-property-list__title_collapsed + dd + .ck-inspector-property-list {
+			display: none;
+		}
 	}
 
 	& dt label {
@@ -52,4 +76,9 @@
 			font-style: italic;
 		}
 	}
+
+	& .ck-inspector-property-list {
+		grid-column: 1/-1;
+		padding-left: 1em;
+	}
 }
diff --git a/src/components/propertylist.js b/src/components/propertylist.js
@@ -14,15 +14,18 @@ export default class PropertyList extends Component {
 		const listUid = uid();
 
 		return <dl className="ck-inspector-property-list ck-inspector-code">
-			{this.props.items.map( ( [ name, value ] ) => {
+			{this.props.items.map( ( [ name, value, subProperties ] ) => {
+				const hasSubProperties = subProperties && subProperties.length;
+
 				value = truncateString( String( value ), MAX_PROPERTY_VALUE_LENGTH );
 
-				return [
-					<dt key={`${ name }-name`}>
-						<label htmlFor={`${ listUid }-${ name }-input`}>
-							{name}
-						</label>:
-					</dt>,
+				const rendered = [
+					<PropertyTitle
+						key={`${ this.props.name }-name`}
+						name={name}
+						listUid={listUid}
+						canCollapse={hasSubProperties}
+					/>,
 					<dd key={`${ name }-value`}>
 						<input
 							id={`${ listUid }-${ name }-input`}
@@ -32,7 +35,49 @@ export default class PropertyList extends Component {
 						/>
 					</dd>
 				];
+
+				if ( hasSubProperties ) {
+					rendered.push(
+						<PropertyList key={`${ name }-subProperties`} items={subProperties} />
+					);
+				}
+
+				return rendered;
 			} )}
 		</dl>;
 	}
 }
+
+class PropertyTitle extends Component {
+	constructor( props ) {
+		super( props );
+
+		this.state = {
+			isCollapsed: true
+		};
+
+		this.handleCollapsedChange = this.handleCollapsedChange.bind( this );
+	}
+
+	handleCollapsedChange() {
+		this.setState( {
+			isCollapsed: !this.state.isCollapsed
+		} );
+	}
+
+	render() {
+		const classNames = [ 'ck-inspector-property-list__title' ];
+
+		if ( this.props.canCollapse ) {
+			classNames.push( 'ck-inspector-property-list__title_collapsible' );
+			classNames.push( 'ck-inspector-property-list__title_' + ( this.state.isCollapsed ? 'collapsed' : 'expanded' ) );
+		}
+
+		return <dt className={classNames.join( ' ' ).trim()}>
+			{ this.props.canCollapse ? <button type="button" onClick={this.handleCollapsedChange}>Toggle</button> : false }
+			<label htmlFor={`${ this.props.listUid }-${ this.props.name }-input`}>
+				{this.props.name}
+			</label>:
+		</dt>;
+	}
+}
diff --git a/tests/inspector/components/model/nodeinspector.js b/tests/inspector/components/model/nodeinspector.js
@@ -172,7 +172,7 @@ describe( '<ModelNodeInspector />', () => {
 
 			expect( lists[ 0 ].name ).to.equal( 'Attributes' );
 			expect( lists[ 0 ].items ).to.deep.equal( [
-				[ 'bold', 'true' ]
+				[ 'bold', 'true', [ [ 'isFormatting', 'true' ], [ 'copyOnEnter', 'true' ] ] ]
 			] );
 
 			expect( lists[ 1 ].name ).to.equal( 'Properties' );

diff --git a/tests/inspector/components/propertylist.js b/tests/inspector/components/propertylist.js
@@ -34,8 +34,8 @@ describe( '<PropertyList />', () => {
 		const dt2 = wrapper.children().childAt( 2 );
 		const dd2 = wrapper.children().childAt( 3 );
 
-		expect( dt1.html() ).to.match( /<dt><label for="[^-]+-foo-input">foo<\/label>:<\/dt>/ );
-		expect( dt2.html() ).to.match( /<dt><label for="[^-]+-qux-input">qux<\/label>:<\/dt>/ );
+		expect( dt1.html() ).to.match( /<dt class="ck-inspector-property-list__title"><label for="[^-]+-foo-input">foo<\/label>:<\/dt>/ );
+		expect( dt2.html() ).to.match( /<dt class="ck-inspector-property-list__title"><label for="[^-]+-qux-input">qux<\/label>:<\/dt>/ );
 
 		expect( dd1.html() ).to.match( /<dd><input id="[^-]+-foo-input" type="text" readonly="" value="bar"><\/dd>/ );
 		expect( dd2.html() ).to.match( /<dd><input id="[^-]+-qux-input" type="text" readonly="" value="baz"><\/dd>/ );
@@ -44,6 +44,47 @@ describe( '<PropertyList />', () => {
 		expect( dt2.find( 'label' ) ).to.have.attr( 'for' ).equal( dd2.find( 'input' ).prop( 'id' ) );
 	} );
 
+	it( 'renders sub-properties', () => {
+		const items = [
+			[ 'foo', 'bar', [ [ 'subA-name', 'subA-value' ], [ 'subB-name', 'subB-value' ] ] ],
+		];
+
+		wrapper = mount( <PropertyList items={items} /> );
+
+		const dt1 = wrapper.children().childAt( 0 );
+		const dd1 = wrapper.children().childAt( 1 );
+		const dl = wrapper.children().childAt( 2 );
+
+		expect( dt1.html() ).to.match( new RegExp(
+			'<dt class="' +
+				'ck-inspector-property-list__title ' +
+				'ck-inspector-property-list__title_collapsible ' +
+				'ck-inspector-property-list__title_collapsed' +
+			'">' +
+				'<button type="button">Toggle</button>' +
+				'<label for="[^-]+-foo-input">foo</label>:' +
+			'</dt>'
+		) );
+
+		expect( dd1.html() ).to.match( /<dd><input id="[^-]+-foo-input" type="text" readonly="" value="bar"><\/dd>/ );
+		expect( dl.props().items ).to.have.deep.members( [ [ 'subA-name', 'subA-value' ], [ 'subB-name', 'subB-value' ] ] );
+	} );
+
+	it( 'toggles title class when clicked the toggler', () => {
+		const items = [
+			[ 'foo', 'bar', [ [ 'subA-name', 'subA-value' ], [ 'subB-name', 'subB-value' ] ] ],
+		];
+
+		wrapper = mount( <PropertyList items={items} /> );
+
+		const dt = wrapper.children().childAt( 0 );
+		const toggler = dt.children().childAt( 0 );
+
+		toggler.simulate( 'click' );
+
+		expect( dt ).to.have.className( 'ck-inspector-property-list__title_expanded' );
+	} );
+
 	it( 'truncates property values to 2000 characters', () => {
 		const items = [
 			[ 'foo', new Array( 1999 ).fill( 0 ).join( '' ) ],