8
0
Quellcode durchsuchen

Stub custom view manual test.

Maciej Gołaszewski vor 6 Jahren
Ursprung
Commit
59e4a88e64

+ 4 - 4
packages/ckeditor5-mention/tests/manual/mention-custom-renderer.md

@@ -7,10 +7,10 @@ The mention configuration with custom balloon panel item renderer.
 The list is returned in promise (no timeout) and is filtered for any match of `label` and `username` (custom feed):
 
 The feed:
-- `{ id: '1', label: 'Barney Stinson', username: 'swarley' },`
-- `{ id: '2', label: 'Lily Aldrin', username: 'lilypad' },`
-- `{ id: '3', label: 'Marshall Eriksen', username: 'marshmallow' },`
-- `{ id: '4', label: 'Robin Scherbatsky', username: 'rsparkles' },`
+- `{ id: '1', label: 'Barney Stinson', username: 'swarley' }`
+- `{ id: '2', label: 'Lily Aldrin', username: 'lilypad' }`
+- `{ id: '3', label: 'Marshall Eriksen', username: 'marshmallow' }`
+- `{ id: '4', label: 'Robin Scherbatsky', username: 'rsparkles' }`
 - `{ id: '5', label: 'Ted Mosby', username: 'tdog' }`
 
 The item is rendered as `<span>` instead of default button.

+ 27 - 0
packages/ckeditor5-mention/tests/manual/mention-custom-view.html

@@ -0,0 +1,27 @@
+<div id="editor">
+	<p>Have you met... </p>
+</div>
+
+<style>
+	.mention {
+		background: hsla(341, 100%, 87%, 0.4);
+		color: hsl(340, 100%, 31%);
+	}
+
+	.custom-item {
+		display: block;
+		padding: 1em;
+	}
+
+	.custom-item.ck-on {
+		color: white;
+	}
+
+	.custom-item .custom-item-username {
+		color: #666;
+	}
+
+	.custom-item.ck-on .custom-item-username{
+		color: #ddd;
+	}
+</style>

+ 55 - 0
packages/ckeditor5-mention/tests/manual/mention-custom-view.js

@@ -0,0 +1,55 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global console, window */
+
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Enter from '@ckeditor/ckeditor5-enter/src/enter';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Typing from '@ckeditor/ckeditor5-typing/src/typing';
+import Undo from '@ckeditor/ckeditor5-undo/src/undo';
+import Widget from '@ckeditor/ckeditor5-widget/src/widget';
+import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
+import ShiftEnter from '@ckeditor/ckeditor5-enter/src/shiftenter';
+import Table from '@ckeditor/ckeditor5-table/src/table';
+import Mention from '../../src/mention';
+import Link from '@ckeditor/ckeditor5-link/src/link';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
+
+ClassicEditor
+	.create( global.document.querySelector( '#editor' ), {
+		plugins: [ Enter, Typing, Paragraph, Heading, Link, Bold, Italic, Underline, Undo, Clipboard, Widget, ShiftEnter, Table, Mention ],
+		toolbar: [ 'heading', '|', 'bold', 'italic', 'underline', 'link', '|', 'insertTable', '|', 'undo', 'redo' ],
+		mention: [
+			{
+				feed: getFeed
+			}
+		]
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+function getFeed( feedText ) {
+	return Promise.resolve( [
+		{ id: '1', label: 'Barney Stinson', link: 'https://www.imdb.com/title/tt0460649/characters/nm0000439' },
+		{ id: '2', label: 'Lily Aldrin', link: 'https://www.imdb.com/title/tt0460649/characters/nm0004989?ref_=tt_cl_t5' },
+		{ id: '3', label: 'Marshall Eriksen', link: 'https://www.imdb.com/title/tt0460649/characters/nm0781981' },
+		{ id: '4', label: 'Robin Scherbatsky', link: 'https://www.imdb.com/title/tt0460649/characters/nm1130627' },
+		{ id: '5', label: 'Ted Mosby', link: 'https://www.imdb.com/title/tt0460649/characters/nm1102140' }
+	].filter( item => {
+		const searchString = feedText.toLowerCase();
+
+		return item.label.toLowerCase().includes( searchString ) || item.username.toLowerCase().includes( searchString );
+	} ) );
+}

+ 27 - 0
packages/ckeditor5-mention/tests/manual/mention-custom-view.md

@@ -0,0 +1,27 @@
+## Mention
+
+**NOTE**: Playground for testing model implementation.
+
+### Configuration
+
+The mention with custom feed and view representation.
+
+The list is returned in promise (no timeout) and is filtered for any match of `label` and `username` (custom feed):
+
+The feed:
+- `{ label: 'Barney Stinson', link: 'https://www.imdb.com/title/tt0460649/characters/nm0000439' }`
+- `{ label: 'Lily Aldrin', link: 'https://www.imdb.com/title/tt0460649/characters/nm0004989?ref_=tt_cl_t5' }`
+- `{ label: 'Marshall Eriksen', link: 'https://www.imdb.com/title/tt0460649/characters/nm0781981' }`
+- `{ label: 'Robin Scherbatsky', link: 'https://www.imdb.com/title/tt0460649/characters/nm1130627' }`
+- `{ label: 'Ted Mosby', link: 'https://www.imdb.com/title/tt0460649/characters/nm1102140' }`
+
+The item is rendered as `<span>` instead of default button.
+
+### Interaction
+
+You can interact with mention panel with keyboard:
+
+- move arrows up/down to select item
+- use <kbd>enter</kbd> or <kbd>tab</kbd> to select item.
+
+**Note**: Mouse trigger not yet implemented.