8
0
Quellcode durchsuchen

Setup custom attribute converter for mention manual test.

Maciej Gołaszewski vor 6 Jahren
Ursprung
Commit
4216d2af36

+ 1 - 2
packages/ckeditor5-mention/src/mentionui.js

@@ -141,7 +141,6 @@ export default class MentionUI extends Plugin {
 
 		this._mentionsView.on( 'execute', ( evt, data ) => {
 			const item = data.item;
-			const label = item.label || item;
 			const marker = data.marker;
 
 			const watcher = this._getWatcher( marker );
@@ -161,7 +160,7 @@ export default class MentionUI extends Plugin {
 			const range = editor.model.createRange( start, end );
 
 			editor.execute( 'mention', {
-				mention: label,
+				mention: item,
 				marker,
 				range
 			} );

+ 6 - 1
packages/ckeditor5-mention/tests/manual/mention-custom-view.html

@@ -1,5 +1,10 @@
 <div id="editor">
-	<p>Have you met... </p>
+	<p>Have you met... <a class="mention" data-mention="Ted Mosby" href="https://www.imdb.com/title/tt0460649/characters/nm1102140">Ted Mosby</a></p>
+
+	<h2>Test cases:</h2>
+	<ul>
+		<li><strong>Same mention twice in data:</strong> <a class="mention" data-mention="Ted Mosby" href="https://www.imdb.com/title/tt0460649/characters/nm1102140">Ted Mosby</a><a class="mention" data-mention="Ted Mosby" href="https://www.imdb.com/title/tt0460649/characters/nm1102140">Ted Mosby</a></li>
+	</ul>
 </div>
 
 <style>

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

@@ -22,10 +22,63 @@ 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';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+
+import priorities from '@ckeditor/ckeditor5-utils/src/priorities';
+
+const HIGHER_THEN_HIGHEST = priorities.highest + 50;
+
+class CustomMentionAttributeView extends Plugin {
+	init() {
+		const editor = this.editor;
+
+		editor.conversion.for( 'upcast' ).elementToAttribute( {
+			view: {
+				name: 'a',
+				key: 'data-mention',
+				classes: 'mention',
+				attributes: {
+					href: true
+				}
+			},
+			model: {
+				key: 'mention',
+				value: viewItem => {
+					const mentionValue = {
+						label: viewItem.getAttribute( 'data-mention' ),
+						link: viewItem.getAttribute( 'href' )
+					};
+
+					return mentionValue;
+				}
+			},
+			converterPriority: HIGHER_THEN_HIGHEST
+		} );
+
+		editor.conversion.for( 'downcast' ).attributeToElement( {
+			model: 'mention',
+			view: ( modelAttributeValue, viewWriter ) => {
+				if ( !modelAttributeValue ) {
+					return;
+				}
+
+				return viewWriter.createAttributeElement( 'a', {
+					class: 'mention',
+					'data-mention': modelAttributeValue.label,
+					'href': modelAttributeValue.link
+				} );
+			},
+			converterPriority: HIGHER_THEN_HIGHEST
+		} );
+	}
+}
 
 ClassicEditor
 	.create( global.document.querySelector( '#editor' ), {
-		plugins: [ Enter, Typing, Paragraph, Heading, Link, Bold, Italic, Underline, Undo, Clipboard, Widget, ShiftEnter, Table, Mention ],
+		plugins: [ Enter, Typing, Paragraph, Heading, Link, Bold, Italic, Underline, Undo, Clipboard, Widget, ShiftEnter, Table,
+			Mention,
+			CustomMentionAttributeView
+		],
 		toolbar: [ 'heading', '|', 'bold', 'italic', 'underline', 'link', '|', 'insertTable', '|', 'undo', 'redo' ],
 		mention: [
 			{
@@ -43,7 +96,7 @@ ClassicEditor
 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: '2', label: 'Lily Aldrin', link: 'https://www.imdb.com/title/tt0460649/characters/nm0004989' },
 		{ 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' }

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

@@ -15,7 +15,7 @@ The feed:
 - `{ 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.
+The mention is converted to link (`<a>`) with additional data of default span.
 
 ### Interaction
 

+ 2 - 2
packages/ckeditor5-mention/tests/mentionui.js

@@ -479,7 +479,7 @@ describe( 'MentionUI', () => {
 
 						const commandOptions = spy.getCall( 0 ).args[ 0 ];
 
-						expect( commandOptions ).to.have.property( 'mention', 'Ted' );
+						expect( commandOptions ).to.have.property( 'mention' ).that.deep.equal( { label: 'Ted' } );
 						expect( commandOptions ).to.have.property( 'marker', '@' );
 						expect( commandOptions ).to.have.property( 'range' );
 
@@ -555,7 +555,7 @@ describe( 'MentionUI', () => {
 
 					const commandOptions = spy.getCall( 0 ).args[ 0 ];
 
-					expect( commandOptions ).to.have.property( 'mention', 'Barney' );
+					expect( commandOptions ).to.have.property( 'mention' ).that.deep.equal( { label: 'Barney' } );
 					expect( commandOptions ).to.have.property( 'marker', '@' );
 					expect( commandOptions ).to.have.property( 'range' );