Fix passage suggest to allow spaces. Closes #1176

src/components/control/code-area/code-area.tsx

@@ -6,6 +6,7 @@ import {
 import 'codemirror/addon/display/placeholder';
 import 'codemirror/addon/hint/show-hint';
 import 'codemirror/addon/hint/show-hint.css';
+import 'codemirror/addon/search/searchcursor';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/mode/css/css';
 import 'codemirror/mode/javascript/javascript';

src/store/__tests__/use-codemirror-passage-hints.test.tsx

@@ -10,7 +10,11 @@ describe('useCodeMirrorPassageHints()', () => {
 			findWordAt: () => ({anchor: 0, head: 0}),
 			getCursor: jest.fn(),
 			getRange: () => 'a',
-			showHint: jest.fn()
+			showHint: jest.fn(),
+			getDoc: () => ({ getSearchCursor: () => ({
+				findPrevious: jest.fn(), 
+				from: () => ({ch: 0})
+			})})
 		};
 		const story = fakeStory(3);
 
@@ -32,7 +36,11 @@ describe('useCodeMirrorPassageHints()', () => {
 			findWordAt: () => ({anchor: 0, head: 0}),
 			getCursor: jest.fn(),
 			getRange: () => 'a',
-			showHint: jest.fn()
+			showHint: jest.fn(),
+			getDoc: () => ({ getSearchCursor: () => ({
+				findPrevious: jest.fn(), 
+				from: () => ({ch: 0})
+			})})
 		};
 		const story = fakeStory(3);
 

src/store/use-codemirror-passage-hints.ts

@@ -1,36 +1,25 @@
-import CodeMirror, {Editor, Handle} from 'codemirror';
+import CodeMirror, {Editor} from 'codemirror';
 import * as React from 'react';
 import {Story} from './stories';
 
-type HintExtraKeyHandler = (editor: Editor, hint: Handle) => void;
-
 export function useCodeMirrorPassageHints(story: Story) {
 	return React.useCallback(
 		(editor: Editor) => {
 			editor.showHint({
 				completeSingle: false,
-				extraKeys:
-					// Any of the characters below are an indication the user is finished
-					// typing a passage name in a link and the hint should close. We need
-					// to 'type' this character for the user since our handler consumes
-					// the event.
-					[']', '-', '|'].reduce<Record<string, HintExtraKeyHandler>>(
-						(result, character) => {
-							result[character] = (editor, hint) => {
-								const doc = editor.getDoc();
-
-								doc.replaceRange(character, doc.getCursor());
-								hint.close();
-							};
-
-							return result;
-						},
-						{}
-					),
+				closeCharacters: /\]/,
 				hint() {
-					const wordRange = editor.findWordAt(editor.getCursor());
+
+					const doc        = editor.getDoc();
+					const cursor     = editor.getCursor();
+					const wordRange  = editor.findWordAt(cursor);
+					const linkCursor = doc.getSearchCursor(/\[\[|->|\|/,cursor);
+					const linkMatch  = linkCursor.findPrevious();
+					const linkDelim  = Array.isArray(linkMatch) ? linkMatch[0] : '';
+					const linkStart  = linkCursor.from();
+					      linkStart.ch += linkDelim.length;
 					const word = editor
-						.getRange(wordRange.anchor, wordRange.head)
+						.getRange(linkStart, cursor)
 						.toLowerCase();
 
 					const comps = {
@@ -41,7 +30,7 @@ export function useCodeMirrorPassageHints(story: Story) {
 
 							return result;
 						}, []),
-						from: wordRange.anchor,
+						from: linkStart,
 						to: wordRange.head
 					};