Explorar el Código

Add gifs showcasing tips and tricks

panr hace 6 años
padre
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).
 
 * 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.
 
+{@img assets/img/typing-after.gif 770 The animation shows typing after the code blocks in CKEditor 5 rich text editor.}
+
 ### Changing line indentation
 
 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 **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>
 	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>
@@ -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).
 
+{@img assets/img/preserve-indention.gif 770 The animation shows preserving indention inside code blocks in CKEditor 5 rich text editor.}
+
 ## Installation
 
 To add this feature to your editor install the [`@ckeditor/ckeditor5-code-block`](https://www.npmjs.com/package/@ckeditor/ckeditor5-code-block) package: