Przeglądaj źródła

Add style normalization stub for borders.

Maciej Gołaszewski 6 lat temu
rodzic
commit
bb97388933

+ 1 - 1
packages/ckeditor5-engine/src/view/element.js

@@ -803,7 +803,7 @@ function parseAttributes( attrs ) {
 //
 // @param {Map.<String, String>} stylesMap Map to insert parsed properties and values.
 // @param {String} stylesString Styles to parse.
-function parseInlineStyles( stylesMap, stylesString ) {
+export function parseInlineStyles( stylesMap, stylesString ) {
 	// `null` if no quote was found in input string or last found quote was a closing quote. See below.
 	let quoteType = null;
 	let propertyNameStart = 0;

+ 141 - 0
packages/ckeditor5-engine/tests/view/stylenormalizer.js

@@ -0,0 +1,141 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { parseInlineStyles } from '../../src/view/element';
+
+function parseStyle( string ) {
+	const map = new Map();
+
+	parseInlineStyles( map, string );
+
+	const styleObject = {};
+
+	for ( const key of map.keys() ) {
+		const value = map.get( key );
+
+		if ( key === 'border' ) {
+			const parsedBorder = parseBorderAttribute( value );
+
+			const border = {
+				top: parsedBorder,
+				right: parsedBorder,
+				bottom: parsedBorder,
+				left: parsedBorder
+			};
+
+			addStyle( styleObject, 'border', border );
+		} else {
+			const borderPositionRegExp = /border-(top|right|bottom|left)$/;
+
+			if ( borderPositionRegExp.test( key ) ) {
+				const border = {};
+				const which = borderPositionRegExp.exec( key )[ 1 ];
+
+				border[ which ] = parseBorderAttribute( value );
+
+				addStyle( styleObject, 'border', border );
+			} else {
+				addStyle( styleObject, key, value );
+			}
+		}
+	}
+
+	return styleObject;
+}
+
+function parseBorderAttribute( string ) {
+	const result = {};
+
+	for ( const part of string.split( ' ' ) ) {
+		if ( isLength( part ) ) {
+			result.width = part;
+		}
+
+		if ( isLineStyle( part ) ) {
+			result.style = part;
+		}
+
+		if ( isColor( part ) ) {
+			result.color = part;
+		}
+	}
+
+	return result;
+}
+
+function isColor( string ) {
+	return /^([#0-9A-Fa-f]{3,8}|[a-zA-Z]+)$/.test( string ) && !isLineStyle( string );
+}
+
+function isLineStyle( string ) {
+	return /^(none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset)$/.test( string );
+}
+
+function isLength( string ) {
+	return /^[+-]?[0-9]?[.]?[0-9]+([a-z]+|%)$/.test( string );
+}
+
+function addStyle( styleObject, name, value ) {
+	if ( typeof value === 'object' ) {
+		styleObject[ name ] = Object.assign( {}, styleObject[ name ] || {}, value );
+	} else {
+		styleObject[ name ] = value;
+	}
+}
+
+describe( 'Style normalizer', () => {
+	it( 'should parse', () => {
+		expect( parseStyle( 'border:1px solid blue;' ) ).to.deep.equal( {
+			border: {
+				bottom: {
+					color: 'blue',
+					style: 'solid',
+					width: '1px'
+				},
+				left: {
+					color: 'blue',
+					style: 'solid',
+					width: '1px'
+				},
+				right: {
+					color: 'blue',
+					style: 'solid',
+					width: '1px'
+				},
+				top: {
+					color: 'blue',
+					style: 'solid',
+					width: '1px'
+				}
+			}
+		} );
+	} );
+
+	it( 'should parse', () => {
+		expect( parseStyle( 'border:1px solid blue;border-left:#665511 dashed 2.7em;border-top:7px dotted #ccc;' ) ).to.deep.equal( {
+			border: {
+				bottom: {
+					color: 'blue',
+					style: 'solid',
+					width: '1px'
+				},
+				left: {
+					color: '#665511',
+					style: 'dashed',
+					width: '2.7em'
+				},
+				right: {
+					color: 'blue',
+					style: 'solid',
+					width: '1px'
+				},
+				top: {
+					color: '#ccc',
+					style: 'dotted',
+					width: '7px'
+				}
+			}
+		} );
+	} );
+} );