Kaynağa Gözat

Docs: Improved the content of demos in the feature guide. Closes #6.

Aleksander Nowodzinski 6 yıl önce
ebeveyn
işleme
e4354771a2

+ 2 - 0
packages/ckeditor5-indent/docs/_snippets/features/build-indent-source.js

@@ -9,8 +9,10 @@ import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
 
 import Indent from '@ckeditor/ckeditor5-indent/src/indent';
 import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
+import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
 
 ClassicEditor.builtinPlugins.push( Indent );
 ClassicEditor.builtinPlugins.push( IndentBlock );
+ClassicEditor.builtinPlugins.push( Code );
 
 window.ClassicEditor = ClassicEditor;

+ 15 - 13
packages/ckeditor5-indent/docs/_snippets/features/custom-indent-block-classes.html

@@ -21,17 +21,19 @@
 </style>
 
 <div id="snippet-indent-block-classes">
-	<h2 class="custom-block-indent-b">
-		This heading has second indentation class set.
-	</h2>
-
-	<p>
-		This paragraph has no indentation.<br>
-		Cookie chupa chups marshmallow jelly beans. Bear claw chocolate bar chupa chups oat cake caramels chupa chups oat cake marzipan. Candy chupa chups chocolate. Cake soufflé candy canes fruitcake jelly-o oat cake. Macaroon tootsie roll candy marzipan sesame snaps cupcake wafer gingerbread. Oat cake cake cake sesame snaps pastry halvah.
-	</p>
-
-	<p class="custom-block-indent-e">
-		This paragraph has fifth (last) indentation class set.<br>
-		Cookie chupa chups marshmallow jelly beans. Bear claw chocolate bar chupa chups oat cake caramels chupa chups oat cake marzipan. Candy chupa chups chocolate. Cake soufflé candy canes fruitcake jelly-o oat cake. Macaroon tootsie roll candy marzipan sesame snaps cupcake wafer gingerbread. Oat cake cake cake sesame snaps pastry halvah.
-	</p>
+	<h2>Block indentation using CSS classes</h2>
+
+	<p>If you want more semantics in your content, use CSS classes instead of fixed indentation units. You can then adjust
+		the levels in the styles sheets of your application whenever you want.&nbsp;</p>
+
+	<h3 class="custom-block-indent-a">This heading has the <code>.custom-block-indent-a</code> class</h3>
+
+	<p class="custom-block-indent-a">And this paragraph shares the same class, and that puts it at the same level.</p>
+
+	<h4 class="custom-block-indent-b">But this one has the <code>.custom-block-indent-b</code> class</h4>
+
+	<p class="custom-block-indent-b">Using classes instead of fixed units (<code>px</code> or <code>em</code>) has another
+		advantage. You retain control over what indentation levels are used in the documents. For instance, you can limit
+		indentation to 2 or 3 different levels and there is no way users can go beyond that (<code>.custom-block-indent-e</code> class level).
+		That should help you keep your content clean and predictable.</p>
 </div>

+ 2 - 0
packages/ckeditor5-indent/docs/_snippets/features/custom-indent-block-classes.js

@@ -20,6 +20,8 @@ ClassicEditor
 				'bulletedList',
 				'numberedList',
 				'|',
+				'code',
+				'|',
 				'undo',
 				'redo'
 			],

+ 18 - 16
packages/ckeditor5-indent/docs/_snippets/features/indent.html

@@ -1,21 +1,23 @@
 <div id="snippet-indent">
-	<p>
-		This paragraph has no indentation.<br>
-		Cookie chupa chups marshmallow jelly beans. Bear claw chocolate bar chupa chups oat cake caramels chupa chups oat cake marzipan. Candy chupa chups chocolate. Cake soufflé candy canes fruitcake jelly-o oat cake. Macaroon tootsie roll candy marzipan sesame snaps cupcake wafer gingerbread. Oat cake cake cake sesame snaps pastry halvah.
-	</p>
+	<h2>Changing block indentation</h2>
 
-	<p style="margin-left:100px;">
-		This paragraph has indentation of 100px (second indentation step).<br>
-		Cookie chupa chups marshmallow jelly beans. Bear claw chocolate bar chupa chups oat cake caramels chupa chups oat cake marzipan. Candy chupa chups chocolate. Cake soufflé candy canes fruitcake jelly-o oat cake. Macaroon tootsie roll candy marzipan sesame snaps cupcake wafer gingerbread. Oat cake cake cake sesame snaps pastry halvah.
-	</p>
+	<p style="margin-left:40px;">Use the toolbar buttons to control the indentation of specific parts of the text. You can
+		use these tools to highlight an important piece of information, communicate a hierarchy or just give your content
+		some room.&nbsp;</p>
+	<p style="margin-left:80px;">For instance, this paragraph looks like it belongs to the previous one.</p>
 
-	<p style="margin-left:75px;">
-		This paragraph has indentation of 75px (between indentation step 1 and 2).<br>
-		Cookie chupa chups marshmallow jelly beans. Bear claw chocolate bar chupa chups oat cake caramels chupa chups oat cake marzipan. Candy chupa chups chocolate. Cake soufflé candy canes fruitcake jelly-o oat cake. Macaroon tootsie roll candy marzipan sesame snaps cupcake wafer gingerbread. Oat cake cake cake sesame snaps pastry halvah.
-	</p>
+	<h3>Indenting list items</h3>
 
-	<p style="margin-left:50px;">
-		This paragraph has indentation of 50px (second indentation step).<br>
-		Cookie chupa chups marshmallow jelly beans. Bear claw chocolate bar chupa chups oat cake caramels chupa chups oat cake marzipan. Candy chupa chups chocolate. Cake soufflé candy canes fruitcake jelly-o oat cake. Macaroon tootsie roll candy marzipan sesame snaps cupcake wafer gingerbread. Oat cake cake cake sesame snaps pastry halvah.
-	</p>
+	<p>Block indentation buttons work with lists too! Check out the following list and play with different indentation levels:</p>
+
+	<ul>
+		<li>This is the shallowest list item.&nbsp;<ul>
+				<li>And this one is nested.</li>
+				<li>This one is nested too.<ul>
+						<li>And this one goes even deeper.</li>
+					</ul>
+				</li>
+			</ul>
+		</li>
+	</ul>
 </div>

+ 15 - 15
packages/ckeditor5-indent/docs/features/indent.md

@@ -72,25 +72,25 @@ The editor will restrict indentation levels to a set of provided classes. The bi
 In the demo below the CSS classes are defined as follows:
 
 ```css
-	.custom-block-indent-a {
-		margin-left: 10%;
-	}
+.custom-block-indent-a {
+	margin-left: 10%;
+}
 
-	.custom-block-indent-b {
-		margin-left: 20%;
-	}
+.custom-block-indent-b {
+	margin-left: 20%;
+}
 
-	.custom-block-indent-c {
-		margin-left: 30%;
-	}
+.custom-block-indent-c {
+	margin-left: 30%;
+}
 
-	.custom-block-indent-d {
-		margin-left: 40%;
-	}
+.custom-block-indent-d {
+	margin-left: 40%;
+}
 
-	.custom-block-indent-e {
-		margin-left: 50%;
-	}
+.custom-block-indent-e {
+	margin-left: 50%;
+}
 ```
 
 {@snippet features/custom-indent-block-classes}