Parcourir la source

Update doc and rewrite getPropertyAssociation helper

panr il y a 5 ans
Parent
commit
fc966a9964

+ 3 - 3
packages/ckeditor5-code-block/docs/features/code-blocks.md

@@ -42,7 +42,7 @@ ClassicEditor
 
 {@snippet features/code-block-custom-languages}
 
-By default, the CSS class of the `<code>` element in the data and editing is generated using the `language` property (prefixed with "language-"). You can customize it by specifying an optional `class` property:
+By default, the CSS class of the `<code>` element in the data and editing is generated using the `language` property (prefixed with "language-"). You can customize it by specifying an optional `class` property. You can set **multiple classes** but **only the first one** will be used as defining language class:
 
 ```js
 ClassicEditor
@@ -55,8 +55,8 @@ ClassicEditor
 				// Use the "php-code" class for PHP code blocks.
 				{ language: 'php', label: 'PHP', class: 'php-code' },
 
-				// Use the "js" class for JavaScript code blocks.
-				{ language: 'javascript', label: 'JavaScript', class: 'js' },
+				// Use the "js" class for JavaScript code blocks (the first class is defining).
+				{ language: 'javascript', label: 'JavaScript', class: 'js javascript js-code' },
 
 				// Python code blocks will have the default "language-python" CSS class.
 				{ language: 'python', label: 'Python' }

+ 1 - 1
packages/ckeditor5-code-block/src/codeblock.js

@@ -116,7 +116,7 @@ export default class CodeBlock extends Plugin {
  *						// Use the "php-code" class for PHP code blocks.
  *						{ language: 'php', label: 'PHP', class: 'php-code' },
  *
- *						// Use only the "js" class for JavaScript code blocks.
+ * 						// Use the "js" class for JavaScript code blocks (the first class is defining).
  *						{ language: 'javascript', label: 'JavaScript', class: 'js javascript js-code' },
  *
  *						// Python code blocks will have the default "language-python" CSS class.

+ 8 - 7
packages/ckeditor5-code-block/src/utils.js

@@ -74,16 +74,17 @@ export function getNormalizedAndLocalizedLanguageDefinitions( editor ) {
  * @param {Object.<String,String>}
  */
 export function getPropertyAssociation( languageDefs, key, value ) {
-	return Object.assign( {}, ...languageDefs.map( def => {
-		// Check if element has multiple classes, and if so
-		// take only the first one as a defining language class
-		if ( key === 'class' && def[ key ].indexOf( ' ' ) !== -1 ) {
-			const languageClass = def[ key ].split( ' ' )[ 0 ];
+	const association = {};
 
-			return { [ languageClass ]: def[ value ] };
+	for ( const def of languageDefs ) {
+		if ( key === 'class' ) {
+			association[ def[ key ].split( ' ' ).shift() ] = def[ value ];
+		} else {
+			association[ def[ key ] ] = def[ value ];
 		}
+	}
 
-		return { [ def[ key ] ]: def[ value ] }; } ) );
+	return association;
 }
 
 /**

+ 1 - 0
packages/ckeditor5-code-block/tests/codeblockediting.js

@@ -1041,6 +1041,7 @@ describe( 'CodeBlockEditing', () => {
 					} );
 			} );
 
+			// https://github.com/ckeditor/ckeditor5/issues/5924
 			it( 'should upcast using only the first class from config as a defining language class', () => {
 				return ClassicTestEditor.create( '<pre><code class="baz">foo</code></pre>', {
 					plugins: [ CodeBlockEditing ],