Browse Source

Merge pull request #96 from ckeditor/t/94

Feature: Provided support for numeric values for the `font-weight` attribute. Closes #94. Closes ckeditor/ckeditor5-paste-from-office#74.
Maciej 6 years ago
parent
commit
e7c9f0284e

+ 1 - 1
packages/ckeditor5-basic-styles/docs/features/basic-styles.md

@@ -33,7 +33,7 @@ By default, each feature can upcast more than one type of the content. Here's th
 
 | Style feature | Supported input elements |
 |-----|---|
-| {@link module:basic-styles/bold~Bold} | `<strong>`, `<b>`, `<* style="font-weight: bold">` |
+| {@link module:basic-styles/bold~Bold} | `<strong>`, `<b>`, `<* style="font-weight: bold">` (or numeric values that are greater or equal 600) |
 | {@link module:basic-styles/italic~Italic} | `<i>`, `<em>`, `<* style="font-style: italic">` |
 | {@link module:basic-styles/underline~Underline} | `<u>`, `<* style="text-decoration: underline">` |
 | {@link module:basic-styles/strikethrough~Strikethrough} | `<s>`, `<del>`, `<strike>`, `<* style="text-decoration: line-through">` |

+ 13 - 4
packages/ckeditor5-basic-styles/src/bold/boldediting.js

@@ -34,15 +34,24 @@ export default class BoldEditing extends Plugin {
 		} );
 
 		// Build converter from model to view for data and editing pipelines.
-
 		editor.conversion.attributeToElement( {
 			model: BOLD,
 			view: 'strong',
 			upcastAlso: [
 				'b',
-				{
-					styles: {
-						'font-weight': 'bold'
+				viewElement => {
+					const fontWeight = viewElement.getStyle( 'font-weight' );
+
+					if ( !fontWeight ) {
+						return null;
+					}
+
+					// Value of the `font-weight` attribute can be defined as a string or a number.
+					if ( fontWeight == 'bold' || Number( fontWeight ) >= 600 ) {
+						return {
+							name: true,
+							styles: [ 'font-weight' ]
+						};
 					}
 				}
 			]

+ 27 - 0
packages/ckeditor5-basic-styles/tests/bold/boldediting.js

@@ -105,6 +105,33 @@ describe( 'BoldEditing', () => {
 			expect( editor.getData() ).to.equal( '<p><strong>foo</strong>bar</p>' );
 		} );
 
+		it( 'should convert font-weight defined as number to bold attribute (if the value is higher or equal to 600)', () => {
+			editor.setData( '<p><span style="font-weight: 600;">foo</span>bar</p>' );
+
+			expect( getModelData( model, { withoutSelection: true } ) )
+				.to.equal( '<paragraph><$text bold="true">foo</$text>bar</paragraph>' );
+
+			expect( editor.getData() ).to.equal( '<p><strong>foo</strong>bar</p>' );
+		} );
+
+		it( 'should not convert font-weight defined as number to bold attribute (if the value is lower than 600)', () => {
+			editor.setData( '<p><span style="font-weight: 500;">foo</span>bar</p>' );
+
+			expect( getModelData( model, { withoutSelection: true } ) )
+				.to.equal( '<paragraph>foobar</paragraph>' );
+
+			expect( editor.getData() ).to.equal( '<p>foobar</p>' );
+		} );
+
+		it( 'should not convert font-weight if the value is invalid', () => {
+			editor.setData( '<p><span style="font-weight: foo;">foo</span>bar</p>' );
+
+			expect( getModelData( model, { withoutSelection: true } ) )
+				.to.equal( '<paragraph>foobar</paragraph>' );
+
+			expect( editor.getData() ).to.equal( '<p>foobar</p>' );
+		} );
+
 		it( 'should be integrated with autoparagraphing', () => {
 			editor.setData( '<strong>foo</strong>bar' );
 

+ 10 - 0
packages/ckeditor5-basic-styles/tests/manual/basic-styles.html

@@ -1,3 +1,13 @@
 <div id="editor">
 	<p><i>This</i> <s>is</s> <code>an</code> <strong>editor</strong> <u>instance</u>, X<sub>1</sub>, X<sup>2</sup>.</p>
+	<p>
+		The <code>font-weight</code> attribute check:
+		<span style="font-weight:bold">bold</span>,
+		<span style="font-weight:400">400</span>,
+		<span style="font-weight:500">500</span>,
+		<span style="font-weight:600">600</span>,
+		<span style="font-weight:700">700</span>,
+		<span style="font-weight:800">800</span>,
+		<span style="font-weight:900">900</span>.
+	</p>
 </div>

+ 2 - 1
packages/ckeditor5-basic-styles/tests/manual/basic-styles.md

@@ -8,4 +8,5 @@
   * code `"an"`,
   * subscript X<sub>1</sub>,
   * superscript X<sup>2</sup>.
-2. Test the bold, italic, strikethrough, underline, code, subscript and superscript features live.
+2. The second sentence should bold the following words: `bold`, `600`, `700`, `800`, `900`.
+3. Test the bold, italic, strikethrough, underline, code, subscript and superscript features live.