ソースを参照

IDs should always include the marker.

Piotrek Koszuliński 6 年 前
コミット
80a710bf16

+ 2 - 2
packages/ckeditor5-mention/docs/_snippets/features/mention-customization.js

@@ -51,8 +51,8 @@ function MentionCustomization( editor ) {
 			key: 'mention',
 			value: viewItem => {
 				// The mention feature expects that the mention attribute value
-				// in the model is a plain object with set of additional attributes.
-				// In order to create proper object use `toMentionAttribute` helper method:
+				// in the model is a plain object with a set of additional attributes.
+				// In order to create a proper object use the toMentionAttribute() helper method:
 				const mentionAttribute = editor.plugins.get( 'Mention' ).toMentionAttribute( viewItem, {
 					// Add any other properties that you need.
 					link: viewItem.getAttribute( 'href' ),

+ 13 - 1
packages/ckeditor5-mention/src/mentioncommand.js

@@ -9,6 +9,7 @@
 
 import Command from '@ckeditor/ckeditor5-core/src/command';
 import toMap from '@ckeditor/ckeditor5-utils/src/tomap';
+import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 import { _addMentionAttributes } from './mentionediting';
 
 /**
@@ -23,6 +24,7 @@ import { _addMentionAttributes } from './mentionediting';
  *		// It will replace one character before selection focus with '#1234' text
  *		// with mention attribute filled with passed attributes.
  *		editor.execute( 'mention', {
+ *			marker: '#',
  *			mention: {
  *				id: '#1234',
  *				name: 'Foo',
@@ -34,12 +36,13 @@ import { _addMentionAttributes } from './mentionediting';
  *		// It will replace one character before selection focus with 'Teh "Big Foo"' text
  *		// with attribute filled with passed attributes.
  *		editor.execute( 'mention', {
+ *			marker: '#',
  *			mention: {
  *				id: '#1234',
  *				name: 'Foo',
  *				title: 'Big Foo'
  *			},
- *			text: 'The "Big Foo"'
+ *			text: 'The "Big Foo"',
  *			range: model.createRange( focus, focus.getShiftedBy( -1 ) )
  *		} );
  *
@@ -62,6 +65,7 @@ export default class MentionCommand extends Command {
 	 * @param {Object} [options] Options for the executed command.
 	 * @param {Object|String} options.mention Mention object to insert. If passed a string it will be used to create a plain object with
 	 * name attribute equal to passed string.
+	 * @param {String} options.marker The marker character (e.g. `'@'`).
 	 * @param {String} [options.text] The text of inserted mention. Defaults to full mention string composed from `marker` and
 	 * `mention` string or `mention.id` if object is passed.
 	 * @param {String} [options.range] Range to replace. Note that replace range might be shorter then inserted text with mention attribute.
@@ -81,6 +85,14 @@ export default class MentionCommand extends Command {
 
 		const mention = _addMentionAttributes( { _text: mentionText, id: mentionID }, mentionData );
 
+		if ( mentionID.charAt( 0 ) != options.marker ) {
+			throw new CKEditorError( 'foo' );
+		}
+
+		if ( options.marker.length != 1 ) {
+			throw new CKEditorError( 'foo2' );
+		}
+
 		model.change( writer => {
 			const currentAttributes = toMap( selection.getAttributes() );
 			const attributesWithMention = new Map( currentAttributes.entries() );

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

@@ -299,9 +299,7 @@ export default class MentionUI extends Plugin {
 					this._items.clear();
 
 					for ( const feedItem of feed ) {
-						const fullId = marker + feedItem;
-
-						const item = typeof feedItem != 'object' ? { id: fullId, text: fullId } : feedItem;
+						const item = typeof feedItem != 'object' ? { id: feedItem, text: feedItem } : feedItem;
 
 						this._items.add( { item, marker } );
 					}

+ 8 - 10
packages/ckeditor5-mention/tests/manual/mention-custom-renderer.js

@@ -3,9 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-/* global console, window */
-
-import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+/* global console, window, document */
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import Mention from '../../src/mention';
@@ -14,7 +12,7 @@ import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articleplugi
 import Font from '@ckeditor/ckeditor5-font/src/font';
 
 ClassicEditor
-	.create( global.document.querySelector( '#editor' ), {
+	.create( document.querySelector( '#editor' ), {
 		plugins: [ ArticlePluginSet, Underline, Font, Mention ],
 		toolbar: [
 			'heading',
@@ -29,7 +27,7 @@ ClassicEditor
 				{
 					feed: getFeed,
 					itemRenderer: item => {
-						const span = global.document.createElementNS( 'http://www.w3.org/1999/xhtml', 'span' );
+						const span = document.createElement( 'span' );
 
 						span.classList.add( 'custom-item' );
 						span.id = `mention-list-item-id-${ item.itemId }`;
@@ -42,11 +40,11 @@ ClassicEditor
 				{
 					marker: '#',
 					feed: [
-						{ id: '1002', text: 'Some bug in editor' },
-						{ id: '1003', text: 'Introduce this feature' },
-						{ id: '1004', text: 'Missing docs' },
-						{ id: '1005', text: 'Another bug' },
-						{ id: '1006', text: 'More bugs' }
+						{ id: '#1002', text: 'Some bug in editor' },
+						{ id: '#1003', text: 'Introduce this feature' },
+						{ id: '#1004', text: 'Missing docs' },
+						{ id: '#1005', text: 'Another bug' },
+						{ id: '#1006', text: 'More bugs' }
 					],
 					itemRenderer: item => `Issue ${ item.id }: ${ item.text }`
 				}

+ 5 - 3
packages/ckeditor5-mention/tests/manual/mention-custom-view.js

@@ -30,9 +30,11 @@ class CustomMentionAttributeView extends Plugin {
 			},
 			model: {
 				key: 'mention',
-				value: viewItem => editor.plugins.get( 'Mention' ).toMentionAttribute( viewItem, {
-					link: viewItem.getAttribute( 'href' )
-				} )
+				value: viewItem => {
+					return editor.plugins.get( 'Mention' ).toMentionAttribute( viewItem, {
+						link: viewItem.getAttribute( 'href' )
+					} );
+				}
 			},
 			converterPriority: 'high'
 		} );

+ 6 - 0
packages/ckeditor5-mention/tests/mentioncommand.js

@@ -58,6 +58,7 @@ describe( 'MentionCommand', () => {
 			setData( model, '<paragraph>foo @Jo[]bar</paragraph>' );
 
 			command.execute( {
+				marker: '@',
 				mention: '@John',
 				range: model.createRange( selection.focus.getShiftedBy( -3 ), selection.focus )
 			} );
@@ -69,6 +70,7 @@ describe( 'MentionCommand', () => {
 			setData( model, '<paragraph>foo @Jo[]bar</paragraph>' );
 
 			command.execute( {
+				marker: '@',
 				mention: { id: '@John', userId: '123456' },
 				range: model.createRange( selection.focus.getShiftedBy( -3 ), selection.focus )
 			} );
@@ -82,6 +84,7 @@ describe( 'MentionCommand', () => {
 			setData( model, '<paragraph>foo @Jo[]bar</paragraph>' );
 
 			command.execute( {
+				marker: '@',
 				mention: '@John',
 				text: '@John Doe',
 				range: model.createRange( selection.focus.getShiftedBy( -3 ), selection.focus )
@@ -97,6 +100,7 @@ describe( 'MentionCommand', () => {
 			const start = end.getShiftedBy( -3 );
 
 			command.execute( {
+				marker: '#',
 				mention: '#John',
 				range: model.createRange( start, end ),
 			} );
@@ -108,6 +112,7 @@ describe( 'MentionCommand', () => {
 			setData( model, '<paragraph>foo []bar</paragraph>' );
 
 			command.execute( {
+				marker: '@',
 				mention: '@John'
 			} );
 
@@ -120,6 +125,7 @@ describe( 'MentionCommand', () => {
 			setData( model, '<paragraph><$text bold="true">foo@John[]bar</$text></paragraph>' );
 
 			command.execute( {
+				marker: '@',
 				mention: '@John',
 				range: model.createRange( selection.focus.getShiftedBy( -5 ), selection.focus )
 			} );

+ 18 - 15
packages/ckeditor5-mention/tests/mentionui.js

@@ -25,7 +25,10 @@ describe( 'MentionUI', () => {
 
 	const staticConfig = {
 		feeds: [
-			{ feed: [ 'Barney', 'Lily', 'Marshall', 'Robin', 'Ted' ] }
+			{
+				feed: [ '@Barney', '@Lily', '@Marshall', '@Robin', '@Ted' ],
+				marker: '@'
+			}
 		]
 	};
 
@@ -286,7 +289,7 @@ describe( 'MentionUI', () => {
 			const bigList = {
 				marker: '@',
 				feed: [
-					'a01', 'a02', 'a03', 'a04', 'a05', 'a06', 'a07', 'a08', 'a09', 'a10', 'a11', 'a12'
+					'@a01', '@a02', '@a03', '@a04', '@a05', '@a06', '@a07', '@a08', '@a09', '@a10', '@a11', '@a12'
 				]
 			};
 
@@ -559,7 +562,7 @@ describe( 'MentionUI', () => {
 
 		describe( 'asynchronous list with custom trigger', () => {
 			beforeEach( () => {
-				const issuesNumbers = [ '100', '101', '102', '103' ];
+				const issuesNumbers = [ '#100', '#101', '#102', '#103' ];
 
 				return createClassicTestEditor( {
 					feeds: [
@@ -761,7 +764,7 @@ describe( 'MentionUI', () => {
 
 		describe( 'default list item', () => {
 			// Create map of expected feed items as objects as they will be stored internally.
-			const feedItems = staticConfig.feeds[ 0 ].feed.map( text => ( { text: `@${ text }`, id: `@${ text }` } ) );
+			const feedItems = staticConfig.feeds[ 0 ].feed.map( text => ( { text: `${ text }`, id: `${ text }` } ) );
 
 			beforeEach( () => {
 				return createClassicTestEditor( staticConfig );
@@ -884,11 +887,11 @@ describe( 'MentionUI', () => {
 
 		describe( 'custom list item (string)', () => {
 			const issues = [
-				{ id: '1002', title: 'Some bug in editor.' },
-				{ id: '1003', title: 'Introduce this feature.' },
-				{ id: '1004', title: 'Missing docs.' },
-				{ id: '1005', title: 'Another bug.' },
-				{ id: '1006', title: 'More bugs' }
+				{ id: '@1002', title: 'Some bug in editor.' },
+				{ id: '@1003', title: 'Introduce this feature.' },
+				{ id: '@1004', title: 'Missing docs.' },
+				{ id: '@1005', title: 'Another bug.' },
+				{ id: '@1006', title: 'More bugs' }
 			];
 
 			beforeEach( () => {
@@ -1001,11 +1004,11 @@ describe( 'MentionUI', () => {
 
 		describe( 'custom list item (DOM Element)', () => {
 			const issues = [
-				{ id: '1002', title: 'Some bug in editor.' },
-				{ id: '1003', title: 'Introduce this feature.' },
-				{ id: '1004', title: 'Missing docs.' },
-				{ id: '1005', title: 'Another bug.' },
-				{ id: '1006', title: 'More bugs' }
+				{ id: '@1002', title: 'Some bug in editor.' },
+				{ id: '@1003', title: 'Introduce this feature.' },
+				{ id: '@1004', title: 'Missing docs.' },
+				{ id: '@1005', title: 'Another bug.' },
+				{ id: '@1006', title: 'More bugs' }
 			];
 
 			beforeEach( () => {
@@ -1019,7 +1022,7 @@ describe( 'MentionUI', () => {
 							itemRenderer: item => {
 								const span = global.document.createElementNS( 'http://www.w3.org/1999/xhtml', 'span' );
 
-								span.innerHTML = `<span id="issue-${ item.id }">@${ item.title }</span>`;
+								span.innerHTML = `<span id="issue-${ item.id.slice( 1 ) }">@${ item.title }</span>`;
 
 								return span;
 							}