Browse Source

Docs: Content styles documentation corrected. [skip ci]

Anna Tomanek 6 years ago
parent
commit
266dcd9a42

+ 8 - 8
docs/builds/guides/integration/content-styles.md

@@ -1,7 +1,7 @@
 ---
 # Scope:
 # * Explain what content styles are and how to use them.
-# * Offer developers a way to obtain editor content styles.
+# * Offer developers a way to obtain the editor content styles.
 
 category: builds-integration
 order: 80
@@ -9,20 +9,20 @@ order: 80
 
 # Content styles
 
-Some of the {@link features/index core editor features} bring additional CSS to control the look of the content they produce. Take, for example, the {@link features/image Image feature} that needs special content styles to render images and their captions in the content. Or the {@link module:block-quote/blockquote~BlockQuote Block quote} plugin displays quotes in italic with a subtle border on the side.
+Some of the {@link features/index core editor features} bring additional CSS to control the look of the content they produce. Take, for example, the {@link features/image image feature} that needs special content styles to render images and their captions in the content. Or the {@link module:block-quote/blockquote~BlockQuote block quote} feature that displays quotes in italic with a subtle border on the side.
 
 {@img assets/img/builds-content-styles.png 823 Editor content styles.}
 
-Content styles are bundled along with editor UI styles and, together with the JavaScript code of CKEditor 5, they create a monolithic structure called an {@link builds/guides/overview#available-builds editor build}. By default, content styles are inseparable from the rest of the editor which means there is no CSS file containing them you could take straight from the editor and use in your application (as opposed to the CKEditor 4 `contents.css` file). To get editor content styles, for instance, for the front–end of your application, you will have to take additional steps described in this guide.
+Content styles are bundled along with editor UI styles and, together with the JavaScript code of CKEditor 5, they create a monolithic structure called an {@link builds/guides/overview#available-builds editor build}. By default, content styles are inseparable from the rest of the editor which means there is no CSS file containing them you could take straight from the editor and use in your application (as opposed to the CKEditor 4 `contents.css` file). To get the editor content styles, for instance, for the front–end of your application, you will have to take additional steps described in this guide.
 
 ## Sharing content styles between front–end and back–end
 
-By default, content styles are loaded by the editor JavaScript which makes them only present when users edit their content and this, in turn, usually takes place in the back–end of an application. You want to use the same styles in the front–end, you may find yourself in a situation that requires you to load CKEditor just for that purpose, which is (performance–wise) not the best idea.
+By default, content styles are loaded by the editor JavaScript which makes them only present when users edit their content and this, in turn, usually takes place in the back–end of an application. If you want to use the same styles in the front–end, you may find yourself in a situation that requires you to load CKEditor just for that purpose, which is (performance–wise) not the best idea.
 
-To avoid unnecessary dependencies in your front–end use a stylesheet with a complete list of CKEditor 5 content styles used by all editor features. There are two ways to obtain it:
+To avoid unnecessary dependencies in your front–end, use a stylesheet with a complete list of CKEditor 5 content styles used by all editor features. There are two ways to obtain it:
 
 * By taking it directly from [this guide](#the-full-list-of-content-styles) and saving it as a static resource in your application (e.g. `content-styles.css`) (**recommended**).
-* By generating it using a dedicated script. Learn more in the {@link framework/guides/contributing/development-environment#generating-content-styles "Development environment"} guide.
+* By generating it using a dedicated script. Learn more in the {@link framework/guides/contributing/development-environment#generating-content-styles Development environment} guide.
 
 Load the `content-styles.css` file in your application by adding the following code to the template:
 
@@ -35,7 +35,7 @@ The content in the front–end of your application should now look the same as w
 <info-box warning>
 	**Important!**
 
-	If you take a closer look at the content styles you may notice they all are prefixed by the `.ck-content` class selector. This narrows their scope when used in CKEditor so they do not affect the rest of the application. To use them in the front–end, **you will have to** add the `ck-content` CSS class to the container of your content. Otherwise styles will not apply.
+	If you take a closer look at the content styles, you may notice they are prefixed with the `.ck-content` class selector. This narrows their scope when used in CKEditor 5 so they do not affect the rest of the application. To use them in the front–end, **you will have to** add the `ck-content` CSS class to the container of your content. Otherwise the styles will not be applied.
 </info-box>
 
 <info-box>
@@ -44,7 +44,7 @@ The content in the front–end of your application should now look the same as w
 
 ## The full list of content styles
 
-Below there is a full list of content styles used by editor features. You can copy it and use straight in your project. **Make sure to add the `ck-content` class to your content container for the styles to work** ([see above](#sharing-content-styles-between-frontend-and-backend)).
+Below there is a full list of content styles used by the editor features. You can copy it and use straight in your project. **Make sure to add the `ck-content` class to your content container for the styles to work** ([see above](#sharing-content-styles-between-frontend-and-backend)).
 
 ```css
 /*

+ 8 - 1
docs/framework/guides/contributing/development-environment.md

@@ -225,7 +225,14 @@ yarn run docs --skip-api
 
 ## Generating content styles
 
-It is possible to generate a stylesheet containing content styles brought by all CKEditor 5 features. Execute `yarn docs:content-styles` and the stylesheet will be saved in the `build/content-styles` folder. To learn more, please refer to the {@link builds/guides/integration/content-styles "Content styles"} guide.
+It is possible to generate a stylesheet containing content styles brought by all CKEditor 5 features. In order to do that, execute:
+
+```bash
+yarn docs:content-styles
+```
+The stylesheet will be saved in the `build/content-styles` folder.
+
+To learn more, refer to the {@link builds/guides/integration/content-styles Content styles} guide.
 
 ## Bisecting through a multi-repository
 

+ 8 - 8
scripts/docs/build-content-styles.js

@@ -26,10 +26,10 @@ const packagesPath = path.join( process.cwd(), 'packages' );
 
 runWebpack( webpackConfig )
 	.then( () => {
-		// All variables are placed inside `:root` selector. Let's extract their names and values as a map.
+		// All variables are placed inside the `:root` selector. Let's extract their names and values as a map.
 		const cssVariables = new Map( contentRules.variables
 			.map( rule => {
-				// Let's extract all of them as an array of pairs: [ name, value ]
+				// Let's extract all of them as an array of pairs: [ name, value ].
 				const allRules = [];
 				let match;
 
@@ -73,13 +73,13 @@ runWebpack( webpackConfig )
 				return `/* ${ rule.file.replace( packagesPath + path.sep, '' ) } */\n${ css }`;
 			} )
 			.filter( rule => {
-				// 1st: path to the css file, 2nd: selector definition - start block, 3rd: end block
+				// 1st: path to the CSS file, 2nd: selector definition - start block, 3rd: end block
 				// If the rule contains only 3 lines, it means that it does not define any rules.
 				return rule.split( '\n' ).length > 3;
 			} )
 			.join( '\n' );
 
-		// Find all CSS variables inside `.ck-content` selector.
+		// Find all CSS variables inside the `.ck-content` selector.
 		let match;
 
 		while ( ( match = VARIABLE_USAGE_REGEXP.exec( selectorCss ) ) ) {
@@ -93,7 +93,7 @@ runWebpack( webpackConfig )
 		while ( !clearRun ) {
 			clearRun = true;
 
-			// For the every used variable...
+			// For every used variable...
 			for ( const variable of usedVariables ) {
 				const value = cssVariables.get( variable );
 
@@ -102,7 +102,7 @@ runWebpack( webpackConfig )
 				// ...find its value and check whether it requires another variable.
 				while ( ( match = VARIABLE_USAGE_REGEXP.exec( value ) ) ) {
 					// If so, mark the entire `while()` block as it should be checked once again.
-					// Also, add the new variable to used variables collection.
+					// Also, add the new variable to the used variables collection.
 					if ( !usedVariables.has( match[ 1 ] ) ) {
 						clearRun = false;
 						usedVariables.add( match[ 1 ] );
@@ -139,7 +139,7 @@ runWebpack( webpackConfig )
 	} );
 
 /**
- * Prepares configuration for Webpack.
+ * Prepares the configuration for webpack.
  *
  * @returns {Object}
  */
@@ -170,7 +170,7 @@ function getWebpackConfig() {
 		},
 
 		// Configure the paths so building CKEditor 5 snippets work even if the script
-		// is triggered from a directory outside ckeditor5 (e.g. multi-project case).
+		// is triggered from a directory outside `ckeditor5` (e.g. in a multi-project case).
 		resolve: {
 			modules: getModuleResolvePaths()
 		},