imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: implement autocomplete replacement

Browse source
This commit is contained in:
Aviral Dasgupta 2016-07-03 22:15:13 +05:30
parent 8961c87cf9
commit cccc58b47f
13 changed files with 271 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/autocomplete/AutocompleteProvider.js
View file

@ -14,25 +14,36 @@ export default class AutocompleteProvider {
* Of the matched commands in the query, returns the first that contains or is contained by the selection, or null.
*/
getCurrentCommand(query: string, selection: {start: number, end: number}): ?Array<string> {
if(this.commandRegex == null)
if (this.commandRegex == null) {
return null;
}
let match = null;
while((match = this.commandRegex.exec(query)) != null) {
let match;
while ((match = this.commandRegex.exec(query)) != null) {
let matchStart = match.index,
matchEnd = matchStart + match[0].length;
console.log(match);
if(selection.start <= matchEnd && selection.end >= matchStart) {
return match;
if (selection.start <= matchEnd && selection.end >= matchStart) {
return {
command: match,
range: {
start: matchStart,
end: matchEnd,
},
};
}
}
this.commandRegex.lastIndex = 0;
return null;
return {
command: null,
range: {
start: -1,
end: -1,
},
};
}
getCompletions(query: String, selection: {start: number, end: number}) {
getCompletions(query: string, selection: {start: number, end: number}) {
return Q.when([]);
}

4
src/autocomplete/Autocompleter.js
View file

@ -9,14 +9,14 @@ const PROVIDERS = [
CommandProvider,
DuckDuckGoProvider,
RoomProvider,
EmojiProvider
EmojiProvider,
].map(completer => completer.getInstance());
export function getCompletions(query: string, selection: {start: number, end: number}) {
return PROVIDERS.map(provider => {
return {
completions: provider.getCompletions(query, selection),
provider
provider,
};
});
}

43
src/autocomplete/CommandProvider.js
View file

@ -1,42 +1,45 @@
import React from 'react';
import AutocompleteProvider from './AutocompleteProvider';
import Q from 'q';
import Fuse from 'fuse.js';
import {TextualCompletion} from './Components';
const COMMANDS = [
{
command: '/me',
args: '<message>',
description: 'Displays action'
description: 'Displays action',
},
{
command: '/ban',
args: '<user-id> [reason]',
description: 'Bans user with given id'
description: 'Bans user with given id',
},
{
command: '/deop'
command: '/deop',
args: '<user-id>',
description: 'Deops user with given id',
},
{
command: '/encrypt'
},
{
command: '/invite'
command: '/invite',
args: '<user-id>',
description: 'Invites user with given id to current room'
},
{
command: '/join',
args: '<room-alias>',
description: 'Joins room with given alias'
description: 'Joins room with given alias',
},
{
command: '/kick',
args: '<user-id> [reason]',
description: 'Kicks user with given id'
description: 'Kicks user with given id',
},
{
command: '/nick',
args: '<display-name>',
description: 'Changes your display nickname'
}
description: 'Changes your display nickname',
},
];
let COMMAND_RE = /(^\/\w*)/g;
@ -47,19 +50,23 @@ export default class CommandProvider extends AutocompleteProvider {
constructor() {
super(COMMAND_RE);
this.fuse = new Fuse(COMMANDS, {
keys: ['command', 'args', 'description']
keys: ['command', 'args', 'description'],
});
}
getCompletions(query: string, selection: {start: number, end: number}) {
let completions = [];
const command = this.getCurrentCommand(query, selection);
if(command) {
let {command, range} = this.getCurrentCommand(query, selection);
if (command) {
completions = this.fuse.search(command[0]).map(result => {
return {
title: result.command,
subtitle: result.args,
description: result.description
completion: result.command + ' ',
component: (<TextualCompletion
title={result.command}
subtitle={result.args}
description={result.description}
/>),
range,
};
});
}
@ -71,7 +78,7 @@ export default class CommandProvider extends AutocompleteProvider {
}
static getInstance(): CommandProvider {
if(instance == null)
if (instance == null)
instance = new CommandProvider();
return instance;

14
src/autocomplete/Components.js
View file

@ -1,13 +1,19 @@
export function TextualCompletion(props: {
import React from 'react';
export function TextualCompletion({
title,
subtitle,
description,
}: {
title: ?string,
subtitle: ?string,
description: ?string
}) {
return (
<div className="mx_Autocomplete_Completion">
<span>{completion.title}</span>
<em>{completion.subtitle}</em>
<span style={{color: 'gray', float: 'right'}}>{completion.description}</span>
<span>{title}</span>
<em>{subtitle}</em>
<span style={{color: 'gray', float: 'right'}}>{description}</span>
</div>
);
}

57
src/autocomplete/DuckDuckGoProvider.js
View file

@ -1,9 +1,12 @@
import React from 'react';
import AutocompleteProvider from './AutocompleteProvider';
import Q from 'q';
import 'whatwg-fetch';
import {TextualCompletion} from './Components';
const DDG_REGEX = /\/ddg\s+(.+)$/g;
const REFERER = 'vector';
const REFERRER = 'vector';
let instance = null;
@ -14,42 +17,62 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
static getQueryUri(query: String) {
return `http://api.duckduckgo.com/?q=${encodeURIComponent(query)}`
+ `&format=json&no_redirect=1&no_html=1&t=${encodeURIComponent(REFERER)}`;
+ `&format=json&no_redirect=1&no_html=1&t=${encodeURIComponent(REFERRER)}`;
}
getCompletions(query: string, selection: {start: number, end: number}) {
let command = this.getCurrentCommand(query, selection);
if(!query || !command)
let {command, range} = this.getCurrentCommand(query, selection);
if (!query || !command) {
return Q.when([]);
}
return fetch(DuckDuckGoProvider.getQueryUri(command[1]), {
method: 'GET'
method: 'GET',
})
.then(response => response.json())
.then(json => {
let results = json.Results.map(result => {
return {
title: result.Text,
description: result.Result
completion: result.Text,
component: (
<TextualCompletion
title={result.Text}
description={result.Result} />
),
range,
};
});
if(json.Answer) {
if (json.Answer) {
results.unshift({
title: json.Answer,
description: json.AnswerType
completion: json.Answer,
component: (
<TextualCompletion
title={json.Answer}
description={json.AnswerType} />
),
range,
});
}
if(json.RelatedTopics && json.RelatedTopics.length > 0) {
if (json.RelatedTopics && json.RelatedTopics.length > 0) {
results.unshift({
title: json.RelatedTopics[0].Text
completion: json.RelatedTopics[0].Text,
component: (
<TextualCompletion
title={json.RelatedTopics[0].Text} />
),
range,
});
}
if(json.AbstractText) {
if (json.AbstractText) {
results.unshift({
title: json.AbstractText
completion: json.AbstractText,
component: (
<TextualCompletion
title={json.AbstractText} />
),
range,
});
}
// console.log(results);
return results;
});
}
@ -59,9 +82,9 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
}
static getInstance(): DuckDuckGoProvider {
if(instance == null)
if (instance == null) {
instance = new DuckDuckGoProvider();
}
return instance;
}
}

14
src/autocomplete/EmojiProvider.js
View file

@ -1,6 +1,7 @@
import React from 'react';
import AutocompleteProvider from './AutocompleteProvider';
import Q from 'q';
import {emojioneList, shortnameToImage} from 'emojione';
import {emojioneList, shortnameToImage, shortnameToUnicode} from 'emojione';
import Fuse from 'fuse.js';
const EMOJI_REGEX = /:\w*:?/g;
@ -16,18 +17,19 @@ export default class EmojiProvider extends AutocompleteProvider {
getCompletions(query: string, selection: {start: number, end: number}) {
let completions = [];
let command = this.getCurrentCommand(query, selection);
if(command) {
let {command, range} = this.getCurrentCommand(query, selection);
if (command) {
completions = this.fuse.search(command[0]).map(result => {
let shortname = EMOJI_SHORTNAMES[result];
let imageHTML = shortnameToImage(shortname);
return {
title: shortname,
completion: shortnameToUnicode(shortname),
component: (
<div className="mx_Autocomplete_Completion">
<span dangerouslySetInnerHTML={{__html: imageHTML}}></span> {shortname}
</div>
)
),
range,
};
}).slice(0, 4);
}
@ -39,7 +41,7 @@ export default class EmojiProvider extends AutocompleteProvider {
}
static getInstance() {
if(instance == null)
if (instance == null)
instance = new EmojiProvider();
return instance;
}

24
src/autocomplete/RoomProvider.js
View file

@ -1,7 +1,9 @@
import React from 'react';
import AutocompleteProvider from './AutocompleteProvider';
import Q from 'q';
import MatrixClientPeg from '../MatrixClientPeg';
import Fuse from 'fuse.js';
import {TextualCompletion} from './Components';
const ROOM_REGEX = /(?=#)([^\s]*)/g;
@ -10,32 +12,35 @@ let instance = null;
export default class RoomProvider extends AutocompleteProvider {
constructor() {
super(ROOM_REGEX, {
keys: ['displayName', 'userId']
keys: ['displayName', 'userId'],
});
this.fuse = new Fuse([], {
keys: ['name', 'roomId', 'aliases']
keys: ['name', 'roomId', 'aliases'],
});
}
getCompletions(query: string, selection: {start: number, end: number}) {
let client = MatrixClientPeg.get();
let completions = [];
const command = this.getCurrentCommand(query, selection);
if(command) {
const {command, range} = this.getCurrentCommand(query, selection);
if (command) {
// the only reason we need to do this is because Fuse only matches on properties
this.fuse.set(client.getRooms().filter(room => !!room).map(room => {
return {
name: room.name,
roomId: room.roomId,
aliases: room.getAliases()
aliases: room.getAliases(),
};
}));
completions = this.fuse.search(command[0]).map(room => {
return {
title: room.name,
subtitle: room.roomId
completion: room.roomId,
component: (
<TextualCompletion title={room.name} subtitle={room.roomId} />
),
range,
};
}).slice(0, 4);;
}).slice(0, 4);
}
return Q.when(completions);
}
@ -45,8 +50,9 @@ export default class RoomProvider extends AutocompleteProvider {
}
static getInstance() {
if(instance == null)
if (instance == null) {
instance = new RoomProvider();
}
return instance;
}

23
src/autocomplete/UserProvider.js
View file

@ -1,6 +1,8 @@
import React from 'react';
import AutocompleteProvider from './AutocompleteProvider';
import Q from 'q';
import Fuse from 'fuse.js';
import {TextualCompletion} from './Components';
const USER_REGEX = /@[^\s]*/g;
@ -9,23 +11,27 @@ let instance = null;
export default class UserProvider extends AutocompleteProvider {
constructor() {
super(USER_REGEX, {
keys: ['displayName', 'userId']
keys: ['displayName', 'userId'],
});
this.users = [];
this.fuse = new Fuse([], {
keys: ['displayName', 'userId']
})
keys: ['displayName', 'userId'],
});
}
getCompletions(query: string, selection: {start: number, end: number}) {
let completions = [];
let command = this.getCurrentCommand(query, selection);
if(command) {
let {command, range} = this.getCurrentCommand(query, selection);
if (command) {
this.fuse.set(this.users);
completions = this.fuse.search(command[0]).map(user => {
return {
title: user.displayName || user.userId,
description: user.userId
completion: user.userId,
component: (
<TextualCompletion
title={user.displayName || user.userId}
description={user.userId} />
),
};
}).slice(0, 4);
}
@ -41,8 +47,9 @@ export default class UserProvider extends AutocompleteProvider {
}
static getInstance(): UserProvider {
if(instance == null)
if (instance == null) {
instance = new UserProvider();
}
return instance;
}
}