8
0
فهرست منبع

Merge pull request #46 from ckeditor/t/43

Fix: Closes #43.
Piotrek Koszuliński 6 سال پیش
والد
کامیت
ecaeceffde

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

@@ -518,7 +518,7 @@ function getBalloonPanelPositions( positionName ) {
 function createPattern( marker, minimumCharacters ) {
 	const numberOfCharacters = minimumCharacters == 0 ? '*' : `{${ minimumCharacters },}`;
 
-	return `(^| )(${ marker })([_a-zA-Z0-9À-ž]${ numberOfCharacters }?)$`;
+	return `(^| )(\\${ marker })([_a-zA-Z0-9À-ž]${ numberOfCharacters }?)$`;
 }
 
 // Creates a test callback for marker to be used in text watcher instance.

+ 6 - 12
packages/ckeditor5-mention/src/textwatcher.js

@@ -12,6 +12,10 @@ import EmitterMixin from '@ckeditor/ckeditor5-utils/src/emittermixin';
 
 /**
  * Text watcher feature.
+ *
+ * Fires {@link module:mention/textwatcher~TextWatcher#event:matched matched} and
+ * {@link module:mention/textwatcher~TextWatcher#event:unmatched unmatched} events on typing or selection changes.
+ *
  * @private
  */
 export default class TextWatcher {
@@ -57,19 +61,9 @@ export default class TextWatcher {
 			this._evaluateTextBeforeSelection();
 		} );
 
-		editor.model.document.on( 'change', ( evt, batch ) => {
+		editor.model.document.on( 'change:data', ( evt, batch ) => {
 			if ( batch.type == 'transparent' ) {
-				return;
-			}
-
-			const changes = Array.from( editor.model.document.differ.getChanges() );
-			const entry = changes[ 0 ];
-
-			// Typing is represented by only a single change.
-			const isTypingChange = changes.length == 1 && entry.name == '$text' && entry.length == 1;
-
-			if ( !isTypingChange ) {
-				return;
+				return false;
 			}
 
 			this._evaluateTextBeforeSelection();

+ 5 - 0
packages/ckeditor5-mention/tests/manual/mention.html

@@ -1,4 +1,9 @@
 <div id="editor">
 	<p>Hello <span class="mention" data-mention="@Ted">@Ted</span>.</p>
 	<p>Hello <span class="mention" data-mention="@Ted">@Ted</span><span class="mention" data-mention="@Ted">@Ted</span>.</p>
+
+	<figure class="image">
+		<img src="sample.jpg" />
+		<figcaption>CKEditor logo - caption</figcaption>
+	</figure>
 </div>

+ 3 - 0
packages/ckeditor5-mention/tests/manual/mention.js

@@ -24,6 +24,9 @@ ClassicEditor
 			'|', 'insertTable',
 			'|', 'undo', 'redo'
 		],
+		image: {
+			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+		},
 		mention: {
 			feeds: [
 				{

BIN
packages/ckeditor5-mention/tests/manual/sample.jpg


+ 67 - 0
packages/ckeditor5-mention/tests/mentionui.js

@@ -1222,6 +1222,73 @@ describe( 'MentionUI', () => {
 			} );
 		} );
 
+		describe( 'multiple feeds configuration', () => {
+			beforeEach( () => {
+				return createClassicTestEditor( {
+					feeds: [
+						{
+							marker: '@',
+							feed: [ '@a1', '@a2', '@a3' ]
+						},
+						{
+							marker: '$',
+							feed: [ '$a1', '$a2', '$a3', '$a4', '$a5' ]
+						}
+					]
+				} );
+			} );
+
+			it( 'should show panel for matched marker', () => {
+				setData( model, '<paragraph>foo []</paragraph>' );
+
+				model.change( writer => {
+					writer.insertText( '@', doc.selection.getFirstPosition() );
+				} );
+
+				return waitForDebounce()
+					.then( () => {
+						expect( panelView.isVisible ).to.be.true;
+						expect( editor.model.markers.has( 'mention' ) ).to.be.true;
+						expect( listView.items ).to.have.length( 3 );
+
+						listView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
+					} )
+					.then( waitForDebounce )
+					.then( () => {
+						expect( panelView.isVisible ).to.be.false;
+						expect( editor.model.markers.has( 'mention' ) ).to.be.false;
+
+						model.change( writer => {
+							writer.insertText( '$', doc.selection.getFirstPosition() );
+						} );
+					} )
+					.then( waitForDebounce )
+					.then( () => {
+						expect( panelView.isVisible ).to.be.true;
+						expect( editor.model.markers.has( 'mention' ) ).to.be.true;
+						expect( listView.items ).to.have.length( 5 );
+
+						listView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
+					} )
+					.then( waitForDebounce )
+					.then( () => {
+						expect( panelView.isVisible ).to.be.false;
+						expect( editor.model.markers.has( 'mention' ) ).to.be.false;
+
+						model.change( writer => {
+							writer.insertText( '@', doc.selection.getFirstPosition() );
+						} );
+					} )
+					.then( waitForDebounce )
+					.then( () => {
+						expect( panelView.isVisible ).to.be.true;
+						expect( editor.model.markers.has( 'mention' ) ).to.be.true;
+
+						expect( listView.items ).to.have.length( 3 );
+					} );
+			} );
+		} );
+
 		function testExecuteKey( name, keyCode, feedItems ) {
 			it( 'should execute selected button on ' + name, () => {
 				setData( model, '<paragraph>foo []</paragraph>' );