Added doc about the annotation editor

extension/ui/pages/help.html

@@ -14,9 +14,10 @@
 			<h2>SingleFile</h2>
 			<h4>Save a complete page into a single HTML file</h4>
 		</div> <span id="index"> <a href="#getting-started">Getting started</a> - <a href="#general-notes">Additional
-				notes</a> - <a href="#options">Options description</a> - <a href="#notes">Technical notes</a> - <a
-				href="#template-variables">Template variables</a> - <a href="#known-issues">Known issues</a> - <a
-				href="#unknown-issues">Troubleshooting unknown issues</a> - <a href="#contributors">Contributors</a>
+				notes</a> - <a href="#options">Options description</a> - <a href="#annotation-editor">Anootation
+				editor</a> - <a href="#notes">Technical notes</a> - <a href="#template-variables">Template variables</a>
+			- <a href="#known-issues">Known issues</a> - <a href="#unknown-issues">Troubleshooting unknown issues</a> -
+			<a href="#contributors">Contributors</a>
 		</span>
 		<hr>
 		<ol>
@@ -52,8 +53,9 @@
 							<li>or all the tabs.</li>
 						</ul>
 					</li>
-					<li>You can highlight text, add notes, and remove content before saving the page by selecting
-						"Annotate and save the page..." in the context menu</li>
+					<li>You can highlight text, add notes, format and remove content before saving the page with the
+						<a href="#annotation-editor">Annotation editor</a> by selecting "Annotate and save the page..."
+						in the context menu</li>
 					<li>With auto-save active, pages are automatically saved every time after being loaded (or before
 						being unloaded if not). </li>
 					<li>Right-click on the SingleFile button and select "Options" to open the options page.</li>
@@ -488,6 +490,49 @@
 					</li>
 				</ul>
 			</li>
+			<li><a id="annotation-editor">Annotation editor</a>
+				<p>The annotation editor can be opened by selecting "Annotate and save the page" in the context menu or
+					by enabling the option "Annotation editor &gt; edit page before saving". It allows you to:
+				<ul>
+					<li>add notes by clicking one of these buttons: <img src="../resources/button_note_yellow.png"
+							class="icon">
+						<img src="../resources/button_note_pink.png" class="icon"> <img
+							src="../resources/button_note_blue.png" class="icon">
+						<img src="../resources/button_note_green.png" class="icon"></li>
+					<li>hide or show notes by clicking the button <img src="../resources/button_note_visible.png"
+							class="icon"></li>
+					<li>highlight text by clicking one of these buttons: <img
+							src="../resources/button_highlighter_yellow.png" class="icon"> <img
+							src="../resources/button_highlighter_pink.png" class="icon"> <img
+							src="../resources/button_highlighter_blue.png" class="icon"> <img
+							src="../resources/button_highlighter_green.png" class="icon"></li>
+					<li>hide or show highligted text by clicking the button <img
+							src="../resources/button_highlighter_visible.png" class="icon"></li>
+					<li>remove text highlighting by clicking the button <img
+							src="../resources/button_highlighter_delete.png" class="icon"></li>
+					<li>edit the page by clicking the button <img src="../resources/button_note_edit.png" class="icon">
+					</li>
+					<li>format the page to improve readability (when possible) by clicking the button <img
+							src="../resources/button_note_format.png" class="icon">
+					</li>
+					<li>remove contents by clicking the button <img src="../resources/button_cut.png" class="icon">,
+						undo removes by clicking the button <img src="../resources/button_undo_cut.png" class="icon"> or
+						the button <img src="../resources/button_undo_all_cut.png" class="icon">, and redo removes by
+						clicking the button <img src="../resources/button_redo_cut.png" class="icon">.
+						<br>
+						You can also use the following keyboard shortcuts when removing contents:
+						<ul>
+							<li><code>Tab</code>: select the parent element</li>
+							<li><code>Shift-Tab</code>: select the child element</li>
+							<li><code>Space</code>: remove the selected element</li>
+							<li><code>Ctrl-Z</code>: undo the last removal</li>
+							<li><code>Ctrl-Shift-Z</code>: redo the last removal</li>
+						</ul>
+					</li>
+					<li>save the page by clicking the button <img src="../resources/button_download.png" class="icon">.
+				</ul>
+				</p>
+			</li>
 			<li><a id="template-variables">Template variables</a>
 				<p>The template variables are used to customize the infobar content or the file name of a saved page.
 					They help to insert dynamic values like the save date or the page title.</p>