Merge pull request #68 from ckeditor/t/ckeditor5/1490

Other: Moved the `TextWatcher` util to `@ckeditor/ckeditor5-typing`. BREAKING CHANGES: The `TextWatcher` util was moved to `@ckeditor/ckeditor5-typing`.
ckeditor · Jun 27, 2019 · a644043 · a644043
2 parents e31b272 + 39791e8
commit a644043
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 199 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@ckeditor/ckeditor5-core": "^12.1.1",
     "@ckeditor/ckeditor5-ui": "^13.0.0",
+    "@ckeditor/ckeditor5-typing": "^12.0.2",
     "@ckeditor/ckeditor5-utils": "^12.1.1"
   },
   "devDependencies": {

diff --git a/src/mentionui.js b/src/mentionui.js
@@ -17,7 +17,7 @@ import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon';
 
-import TextWatcher from './textwatcher';
+import TextWatcher from '@ckeditor/ckeditor5-typing/src/textwatcher';
 
 import MentionsView from './ui/mentionsview';
 import DomWrapperView from './ui/domwrapperview';
@@ -213,17 +213,11 @@ export default class MentionUI extends Plugin {
 			const item = data.item;
 			const marker = data.marker;
 
-			const watcher = this._getWatcher( marker );
-
-			const text = watcher.last;
-
-			const textMatcher = createTextMatcher( marker );
-			const matched = textMatcher( text );
-			const matchedTextLength = matched.marker.length + matched.feedText.length;
+			const mentionMarker = editor.model.markers.get( 'mention' );
 
 			// Create a range on matched text.
 			const end = model.createPositionAt( model.document.selection.focus );
-			const start = end.getShiftedBy( -matchedTextLength );
+			const start = model.createPositionAt( mentionMarker.getStart() );
 			const range = model.createRange( start, end );
 
 			this._hideUIAndRemoveMarker();
@@ -274,18 +268,15 @@ export default class MentionUI extends Plugin {
 	 * @private
 	 * @param {String} marker
 	 * @param {Number} minimumCharacters
-	 * @returns {module:mention/textwatcher~TextWatcher}
+	 * @returns {module:typing/textwatcher~TextWatcher}
 	 */
 	_setupTextWatcherForFeed( marker, minimumCharacters ) {
 		const editor = this.editor;
 
-		const watcher = new TextWatcher( editor, createTestCallback( marker, minimumCharacters ), createTextMatcher( marker ) );
+		const watcher = new TextWatcher( editor.model, createTestCallback( marker, minimumCharacters ) );
 
 		watcher.on( 'matched', ( evt, data ) => {
-			const matched = data.matched;
-
 			const selection = editor.model.document.selection;
-
 			const focus = selection.focus;
 
 			// The text watcher listens only to changed range in selection - so the selection attributes are not yet available
@@ -301,8 +292,7 @@ export default class MentionUI extends Plugin {
 				return;
 			}
 
-			const { feedText, marker } = matched;
-
+			const feedText = getFeedText( marker, data.text );
 			const matchedTextLength = marker.length + feedText.length;
 
 			// Create a marker range.
@@ -348,19 +338,6 @@ export default class MentionUI extends Plugin {
 		return watcher;
 	}
 
-	/**
-	 * Returns the registered text watcher for the marker.
-	 *
-	 * @private
-	 * @param {String} marker
-	 * @returns {module:mention/textwatcher~TextWatcher}
-	 */
-	_getWatcher( marker ) {
-		const { watcher } = this._mentionsConfigurations.get( marker );
-
-		return watcher;
-	}
-
 	/**
 	 * Shows the mentions balloon. If the panel is already visible, it will reposition it.
 	 *
@@ -585,17 +562,12 @@ function createTestCallback( marker, minimumCharacters ) {
 //
 // @param {String} marker
 // @returns {Function}
-function createTextMatcher( marker ) {
+function getFeedText( marker, text ) {
 	const regExp = createRegExp( marker, 0 );
 
-	return text => {
-		const match = text.match( regExp );
+	const match = text.match( regExp );
 
-		const marker = match[ 2 ];
-		const feedText = match[ 3 ];
-
-		return { marker, feedText };
-	};
+	return match[ 3 ];
 }
 
 // The default feed callback.

diff --git a/src/textwatcher.js b/src/textwatcher.js
diff --git a/tests/mentionui.js b/tests/mentionui.js
@@ -585,33 +585,53 @@ describe( 'MentionUI', () => {
 			} );
 
 			it( 'should not show panel when selection is inside a mention', () => {
-				setData( model, '<paragraph>foo [@Lily] bar</paragraph>' );
-				model.change( writer => {
-					writer.setAttribute( 'mention', { id: '@Lily', _uid: 1234 }, doc.selection.getFirstRange() );
-				} );
+				setData( model, '<paragraph>foo @Lily bar[]</paragraph>' );
 
 				model.change( writer => {
-					writer.setSelection( doc.getRoot().getChild( 0 ), 7 );
+					const range = writer.createRange(
+						writer.createPositionAt( doc.getRoot().getChild( 0 ), 4 ),
+						writer.createPositionAt( doc.getRoot().getChild( 0 ), 9 )
+					);
+
+					writer.setAttribute( 'mention', { id: '@Lily', _uid: 1234 }, range );
 				} );
 
 				return waitForDebounce()
+					.then( () => {
+						model.change( writer => {
+							writer.setSelection( doc.getRoot().getChild( 0 ), 0 );
+						} );
+
+						expect( panelView.isVisible ).to.be.false;
+
+						model.change( writer => {
+							writer.setSelection( doc.getRoot().getChild( 0 ), 7 );
+						} );
+					} )
 					.then( () => {
 						expect( panelView.isVisible ).to.be.false;
 						expect( editor.model.markers.has( 'mention' ) ).to.be.false;
 					} );
 			} );
 
 			it( 'should not show panel when selection is at the end of a mention', () => {
-				setData( model, '<paragraph>foo [@Lily] bar</paragraph>' );
-				model.change( writer => {
-					writer.setAttribute( 'mention', { id: '@Lily', _uid: 1234 }, doc.selection.getFirstRange() );
-				} );
+				setData( model, '<paragraph>foo @Lily bar[]</paragraph>' );
 
 				model.change( writer => {
-					writer.setSelection( doc.getRoot().getChild( 0 ), 9 );
+					const range = writer.createRange(
+						writer.createPositionAt( doc.getRoot().getChild( 0 ), 4 ),
+						writer.createPositionAt( doc.getRoot().getChild( 0 ), 9 )
+					);
+
+					writer.setAttribute( 'mention', { id: '@Lily', _uid: 1234 }, range );
 				} );
 
 				return waitForDebounce()
+					.then( () => {
+						model.change( writer => {
+							writer.setSelection( doc.getRoot().getChild( 0 ), 9 );
+						} );
+					} )
 					.then( () => {
 						expect( panelView.isVisible ).to.be.false;
 						expect( editor.model.markers.has( 'mention' ) ).to.be.false;
@@ -695,10 +715,14 @@ describe( 'MentionUI', () => {
 			} );
 
 			it( 'should not show panel when selection moves inside existing mention', () => {
-				setData( model, '<paragraph>foo [@Lily] bar</paragraph>' );
+				setData( model, '<paragraph>foo @Lily bar[]</paragraph>' );
 
 				model.change( writer => {
-					writer.setAttribute( 'mention', { id: '@Lily', _uid: 1234 }, doc.selection.getFirstRange() );
+					const range = writer.createRange(
+						writer.createPositionAt( doc.getRoot().getChild( 0 ), 4 ),
+						writer.createPositionAt( doc.getRoot().getChild( 0 ), 9 )
+					);
+					writer.setAttribute( 'mention', { id: '@Lily', _uid: 1234 }, range );
 				} );
 
 				return waitForDebounce()