Tests: Add markdown manual test.

packages/ckeditor5-markdown-gfm/tests/manual/markdown.html

@@ -0,0 +1,31 @@
+<style>
+	pre.markdown-output {
+		background: hsl(70, 7%, 16%);
+		color: hsl(0, 0%, 100%);
+		display: block;
+		font-size: 1em;
+		font-family: Monaco, Menlo, Consolas, "Roboto Mono", "Courier New", "Ubuntu Mono", monospace;
+		padding: 1.333em;
+	}
+</style>
+
+<div id="editor">This is [CKEditor 5](https://ckeditor.com).
+![Sample image](./sample.jpg)
+
+```javascript
+function fancyAlert(arg) {
+  if(arg) {
+    $.facebox({div:'#foo'})
+  }
+}
+```
+
+First Header | Second Header
+------------ | -------------
+Content from cell 1 | Content from cell 2
+Content in the first column | Content in the second column
+</div>
+
+<p>Output:</p>
+
+<pre class="markdown-output"><code id="markdown-output"></code></pre>

packages/ckeditor5-markdown-gfm/tests/manual/markdown.js

@@ -0,0 +1,71 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console, window, document, setTimeout */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import Markdown from '@ckeditor/ckeditor5-markdown-gfm/src/markdown';
+import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
+import TodoList from '@ckeditor/ckeditor5-list/src/todolist';
+import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
+import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
+import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
+import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ Markdown, ArticlePluginSet, Code, CodeBlock, Strikethrough, TodoList, TableProperties, TableCellProperties ],
+		toolbar: [
+			'heading',
+			'|',
+			'bold',
+			'italic',
+			'strikethrough',
+			'underline',
+			'link',
+			'|',
+			'code',
+			'codeBlock',
+			'|',
+			'todoList',
+			'bulletedList',
+			'numberedList',
+			'|',
+			'outdent',
+			'indent',
+			'|',
+			'blockQuote',
+			'insertTable',
+			'|',
+			'undo',
+			'redo'
+		],
+		image: {
+			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+		},
+		table: {
+			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties' ],
+			tableToolbar: [ 'bold', 'italic' ]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		const outputElement = document.querySelector( '#markdown-output' );
+
+		editor.model.document.on( 'change', () => {
+			outputElement.innerText = editor.getData();
+		} );
+
+		// Set the initial data with delay so hightlight.js doesn't catch them.
+		setTimeout( () => {
+			outputElement.innerText = editor.getData();
+		}, 500 );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

packages/ckeditor5-markdown-gfm/tests/manual/markdown.md

@@ -0,0 +1,9 @@
+#### GitHub Flavored Markdown Editor
+
+- Play around with [GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/).
+- See the markdown generated in the "output" box.
+- You can use `editor.setData( markdownString )` to set markdown content:
+
+```js
+editor.setData( 'This\n\n*is*\n\n**MARKDOWN!**' );
+```