Bladeren bron

Add gifs showcasing tips and tricks

panr 6 jaren geleden
bovenliggende
commit
34a9d40fe0

BIN
packages/ckeditor5-code-block/docs/assets/img/outdent-indent.gif


BIN
packages/ckeditor5-code-block/docs/assets/img/preserve-indention.gif


BIN
packages/ckeditor5-code-block/docs/assets/img/typing-after.gif


BIN
packages/ckeditor5-code-block/docs/assets/img/typing-before.gif


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

@@ -80,8 +80,13 @@ The code language {@link module:code-block/codeblock~CodeBlockConfig#languages c
 There could be situations when there is no obvious way to set the caret before or after a block of code and type. This can happen when the code block is preceded or followed by a widget (e.g. a table) or when the code block is the first or the last child of the document (or both).
 There could be situations when there is no obvious way to set the caret before or after a block of code and type. This can happen when the code block is preceded or followed by a widget (e.g. a table) or when the code block is the first or the last child of the document (or both).
 
 
 * To type **before the code block**: Put the selection at the beginning of the first line of the code block and press <kbd>Enter</kbd>. Move the selection to the empty line that has been created and press <kbd>Enter</kbd> again. A new paragraph will be created before the code block you can type in.
 * To type **before the code block**: Put the selection at the beginning of the first line of the code block and press <kbd>Enter</kbd>. Move the selection to the empty line that has been created and press <kbd>Enter</kbd> again. A new paragraph will be created before the code block you can type in.
+
+{@img assets/img/typing-before.gif 770 The animation shows typing before the code blocks in CKEditor 5 rich text editor.}
+
 * To type **after the code block**: Put the selection at the end of the last line of the code block and press <kbd>Enter</kbd> twice. A new paragraph will be created after the code block you can type in.
 * To type **after the code block**: Put the selection at the end of the last line of the code block and press <kbd>Enter</kbd> twice. A new paragraph will be created after the code block you can type in.
 
 
+{@img assets/img/typing-after.gif 770 The animation shows typing after the code blocks in CKEditor 5 rich text editor.}
+
 ### Changing line indentation
 ### Changing line indentation
 
 
 You can change the indentation of the code using keyboard shortcuts and toolbar buttons:
 You can change the indentation of the code using keyboard shortcuts and toolbar buttons:
@@ -89,6 +94,8 @@ You can change the indentation of the code using keyboard shortcuts and toolbar
 * To **increase** indentation: Select the line (or lines) you want to indent. Hit the <kbd>Tab</kbd> key or press the "Increase indent" button in the toolbar.
 * To **increase** indentation: Select the line (or lines) you want to indent. Hit the <kbd>Tab</kbd> key or press the "Increase indent" button in the toolbar.
 * To **decrease** indentation: Select the line (or lines) the indent should decrease. Hit the <kbd>Shift</kbd>+<kbd>Tab</kbd> keys or press the "Decrease indent" button in the toolbar.
 * To **decrease** indentation: Select the line (or lines) the indent should decrease. Hit the <kbd>Shift</kbd>+<kbd>Tab</kbd> keys or press the "Decrease indent" button in the toolbar.
 
 
+{@img assets/img/outdent-indent.gif 770 The animation shows changing indention inside code blocks in CKEditor 5 rich text editor.}
+
 <info-box>
 <info-box>
 	The indentation created this way can be changed. Use the {@link module:code-block/codeblock~CodeBlockConfig#indentSequence `codeBlock.indentSequence`} configuration to choose some other character (or characters) of your preference (e.g. four spaces). By default, the indentation changes by a single tab (`\t`) character.
 	The indentation created this way can be changed. Use the {@link module:code-block/codeblock~CodeBlockConfig#indentSequence `codeBlock.indentSequence`} configuration to choose some other character (or characters) of your preference (e.g. four spaces). By default, the indentation changes by a single tab (`\t`) character.
 </info-box>
 </info-box>
@@ -101,6 +108,8 @@ You can change the indentation of the code using keyboard shortcuts and toolbar
 
 
 To speed up the editing, when typing in a code block, the indentation of the current line is preserved when you hit <kbd>Enter</kbd> and create a new line. If you want to change the indentation of the new line, take a look at [some easy ways to do that](#changing-line-indentation).
 To speed up the editing, when typing in a code block, the indentation of the current line is preserved when you hit <kbd>Enter</kbd> and create a new line. If you want to change the indentation of the new line, take a look at [some easy ways to do that](#changing-line-indentation).
 
 
+{@img assets/img/preserve-indention.gif 770 The animation shows preserving indention inside code blocks in CKEditor 5 rich text editor.}
+
 ## Installation
 ## Installation
 
 
 To add this feature to your editor install the [`@ckeditor/ckeditor5-code-block`](https://www.npmjs.com/package/@ckeditor/ckeditor5-code-block) package:
 To add this feature to your editor install the [`@ckeditor/ckeditor5-code-block`](https://www.npmjs.com/package/@ckeditor/ckeditor5-code-block) package: