mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-28 12:28:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1988 from matrix-org/t3chguy/refactor_slashcommands

Browse source 
refactor, consolidate and improve SlashCommands
This commit is contained in:
David Baker 2018-06-20 13:56:29 +01:00 committed by GitHub
commit a6d9c25b70
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 440 additions and 468 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

372
src/SlashCommands.js
View file

@ -14,28 +14,31 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import MatrixClientPeg from "./MatrixClientPeg";
import dis from "./dispatcher"; import React from 'react';
import Tinter from "./Tinter"; import MatrixClientPeg from './MatrixClientPeg';
import dis from './dispatcher';
import Tinter from './Tinter';
import sdk from './index'; import sdk from './index';
import { _t } from './languageHandler'; import {_t, _td} from './languageHandler';
import Modal from './Modal'; import Modal from './Modal';
import SettingsStore, {SettingLevel} from "./settings/SettingsStore"; import SettingsStore, {SettingLevel} from './settings/SettingsStore';
class Command { class Command {
constructor(name, paramArgs, runFn) { constructor({name, args='', description, runFn}) {
this.name = name; this.command = name;
this.paramArgs = paramArgs; this.args = args;
this.description = description;
this.runFn = runFn; this.runFn = runFn;
} }
getCommand() { getCommand() {
return "/" + this.name; return "/" + this.command;
} }
getCommandWithArgs() { getCommandWithArgs() {
return this.getCommand() + " " + this.paramArgs; return this.getCommand() + " " + this.args;
} }
run(roomId, args) { run(roomId, args) {
@ -47,16 +50,12 @@ class Command {
} }
} }
function reject(msg) { function reject(error) {
return { return {error};
error: msg,
};
} }
function success(promise) { function success(promise) {
return { return {promise};
promise: promise,
};
} }
/* Disable the "unexpected this" error for these commands - all of the run /* Disable the "unexpected this" error for these commands - all of the run
@ -65,8 +64,12 @@ function success(promise) {
/* eslint-disable babel/no-invalid-this */ /* eslint-disable babel/no-invalid-this */
const commands = { export const CommandMap = {
ddg: new Command("ddg", "<query>", function(roomId, args) { ddg: new Command({
name: 'ddg',
args: '<query>',
description: _td('Searches DuckDuckGo for results'),
runFn: function(roomId, args) {
const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog'); const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
// TODO Don't explain this away, actually show a search UI here. // TODO Don't explain this away, actually show a search UI here.
Modal.createTrackedDialog('Slash Commands', '/ddg is not a command', ErrorDialog, { Modal.createTrackedDialog('Slash Commands', '/ddg is not a command', ErrorDialog, {
@ -74,22 +77,28 @@ const commands = {
description: _t('To use it, just wait for autocomplete results to load and tab through them.'), description: _t('To use it, just wait for autocomplete results to load and tab through them.'),
}); });
return success(); return success();
},
}), }),
// Change your nickname nick: new Command({
nick: new Command("nick", "<display_name>", function(roomId, args) { name: 'nick',
args: '<display_name>',
description: _td('Changes your display nickname'),
runFn: function(roomId, args) {
if (args) { if (args) {
return success( return success(MatrixClientPeg.get().setDisplayName(args));
MatrixClientPeg.get().setDisplayName(args),
);
} }
return reject(this.getUsage()); return reject(this.getUsage());
},
}), }),
// Changes the colorscheme of your current room tint: new Command({
tint: new Command("tint", "<color1> [<color2>]", function(roomId, args) { name: 'tint',
args: '<color1> [<color2>]',
description: _td('Changes colour scheme of current room'),
runFn: function(roomId, args) {
if (args) { if (args) {
const matches = args.match(/^(#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}))( +(#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})))?$/); const matches = args.match(/^(#([\da-fA-F]{3}|[\da-fA-F]{6}))( +(#([\da-fA-F]{3}|[\da-fA-F]{6})))?$/);
if (matches) { if (matches) {
Tinter.tint(matches[1], matches[4]); Tinter.tint(matches[1], matches[4]);
const colorScheme = {}; const colorScheme = {};
@ -100,46 +109,53 @@ const commands = {
colorScheme.secondary_color = colorScheme.primary_color; colorScheme.secondary_color = colorScheme.primary_color;
} }
return success( return success(
SettingsStore.setValue("roomColor", roomId, SettingLevel.ROOM_ACCOUNT, colorScheme), SettingsStore.setValue('roomColor', roomId, SettingLevel.ROOM_ACCOUNT, colorScheme),
); );
} }
} }
return reject(this.getUsage()); return reject(this.getUsage());
},
}), }),
// Change the room topic topic: new Command({
topic: new Command("topic", "<topic>", function(roomId, args) { name: 'topic',
args: '<topic>',
description: _td('Sets the room topic'),
runFn: function(roomId, args) {
if (args) { if (args) {
return success( return success(MatrixClientPeg.get().setRoomTopic(roomId, args));
MatrixClientPeg.get().setRoomTopic(roomId, args),
);
} }
return reject(this.getUsage()); return reject(this.getUsage());
},
}), }),
// Invite a user invite: new Command({
invite: new Command("invite", "<userId>", function(roomId, args) { name: 'invite',
args: '<user-id>',
description: _td('Invites user with given id to current room'),
runFn: function(roomId, args) {
if (args) { if (args) {
const matches = args.match(/^(\S+)$/); const matches = args.match(/^(\S+)$/);
if (matches) { if (matches) {
return success( return success(MatrixClientPeg.get().invite(roomId, matches[1]));
MatrixClientPeg.get().invite(roomId, matches[1]),
);
} }
} }
return reject(this.getUsage()); return reject(this.getUsage());
},
}), }),
// Join a room join: new Command({
join: new Command("join", "#alias:domain", function(roomId, args) { name: 'join',
args: '<room-alias>',
description: _td('Joins room with given alias'),
runFn: function(roomId, args) {
if (args) { if (args) {
const matches = args.match(/^(\S+)$/); const matches = args.match(/^(\S+)$/);
if (matches) { if (matches) {
let roomAlias = matches[1]; let roomAlias = matches[1];
if (roomAlias[0] !== '#') { if (roomAlias[0] !== '#') return reject(this.getUsage());
return reject(this.getUsage());
} if (!roomAlias.includes(':')) {
if (!roomAlias.match(/:/)) {
roomAlias += ':' + MatrixClientPeg.get().getDomain(); roomAlias += ':' + MatrixClientPeg.get().getDomain();
} }
@ -153,27 +169,31 @@ const commands = {
} }
} }
return reject(this.getUsage()); return reject(this.getUsage());
},
}), }),
part: new Command("part", "[#alias:domain]", function(roomId, args) { part: new Command({
name: 'part',
args: '[<room-alias>]',
description: _td('Leave room'),
runFn: function(roomId, args) {
const cli = MatrixClientPeg.get();
let targetRoomId; let targetRoomId;
if (args) { if (args) {
const matches = args.match(/^(\S+)$/); const matches = args.match(/^(\S+)$/);
if (matches) { if (matches) {
let roomAlias = matches[1]; let roomAlias = matches[1];
if (roomAlias[0] !== '#') { if (roomAlias[0] !== '#') return reject(this.getUsage());
return reject(this.getUsage());
} if (!roomAlias.includes(':')) {
if (!roomAlias.match(/:/)) { roomAlias += ':' + cli.getDomain();
roomAlias += ':' + MatrixClientPeg.get().getDomain();
} }
// Try to find a room with this alias // Try to find a room with this alias
const rooms = MatrixClientPeg.get().getRooms(); const rooms = cli.getRooms();
for (let i = 0; i < rooms.length; i++) { for (let i = 0; i < rooms.length; i++) {
const aliasEvents = rooms[i].currentState.getStateEvents( const aliasEvents = rooms[i].currentState.getStateEvents('m.room.aliases');
"m.room.aliases",
);
for (let j = 0; j < aliasEvents.length; j++) { for (let j = 0; j < aliasEvents.length; j++) {
const aliases = aliasEvents[j].getContent().aliases || []; const aliases = aliasEvents[j].getContent().aliases || [];
for (let k = 0; k < aliases.length; k++) { for (let k = 0; k < aliases.length; k++) {
@ -182,82 +202,92 @@ const commands = {
break; break;
} }
} }
if (targetRoomId) { break; } if (targetRoomId) break;
} }
if (targetRoomId) { break; } if (targetRoomId) break;
}
if (!targetRoomId) {
return reject(_t("Unrecognised room alias:") + ' ' + roomAlias);
} }
if (!targetRoomId) return reject(_t('Unrecognised room alias:') + ' ' + roomAlias);
} }
} }
if (!targetRoomId) targetRoomId = roomId; if (!targetRoomId) targetRoomId = roomId;
return success( return success(
MatrixClientPeg.get().leave(targetRoomId).then( cli.leave(targetRoomId).then(function() {
function() {
dis.dispatch({action: 'view_next_room'}); dis.dispatch({action: 'view_next_room'});
}, }),
),
); );
},
}), }),
// Kick a user from the room with an optional reason kick: new Command({
kick: new Command("kick", "<userId> [<reason>]", function(roomId, args) { name: 'kick',
args: '<user-id> [reason]',
description: _td('Kicks user with given id'),
runFn: function(roomId, args) {
if (args) { if (args) {
const matches = args.match(/^(\S+?)( +(.*))?$/); const matches = args.match(/^(\S+?)( +(.*))?$/);
if (matches) { if (matches) {
return success( return success(MatrixClientPeg.get().kick(roomId, matches[1], matches[3]));
MatrixClientPeg.get().kick(roomId, matches[1], matches[3]),
);
} }
} }
return reject(this.getUsage()); return reject(this.getUsage());
},
}), }),
// Ban a user from the room with an optional reason // Ban a user from the room with an optional reason
ban: new Command("ban", "<userId> [<reason>]", function(roomId, args) { ban: new Command({
name: 'ban',
args: '<user-id> [reason]',
description: _td('Bans user with given id'),
runFn: function(roomId, args) {
if (args) { if (args) {
const matches = args.match(/^(\S+?)( +(.*))?$/); const matches = args.match(/^(\S+?)( +(.*))?$/);
if (matches) { if (matches) {
return success( return success(MatrixClientPeg.get().ban(roomId, matches[1], matches[3]));
MatrixClientPeg.get().ban(roomId, matches[1], matches[3]),
);
} }
} }
return reject(this.getUsage()); return reject(this.getUsage());
},
}), }),
// Unban a user from the room // Unban a user from ythe room
unban: new Command("unban", "<userId>", function(roomId, args) { unban: new Command({
name: 'unban',
args: '<user-id>',
description: _td('Unbans user with given id'),
runFn: function(roomId, args) {
if (args) { if (args) {
const matches = args.match(/^(\S+)$/); const matches = args.match(/^(\S+)$/);
if (matches) { if (matches) {
// Reset the user membership to "leave" to unban him // Reset the user membership to "leave" to unban him
return success( return success(MatrixClientPeg.get().unban(roomId, matches[1]));
MatrixClientPeg.get().unban(roomId, matches[1]),
);
} }
} }
return reject(this.getUsage()); return reject(this.getUsage());
},
}), }),
ignore: new Command("ignore", "<userId>", function(roomId, args) { ignore: new Command({
name: 'ignore',
args: '<user-id>',
description: _td('Ignores a user, hiding their messages from you'),
runFn: function(roomId, args) {
if (args) { if (args) {
const cli = MatrixClientPeg.get();
const matches = args.match(/^(\S+)$/); const matches = args.match(/^(\S+)$/);
if (matches) { if (matches) {
const userId = matches[1]; const userId = matches[1];
const ignoredUsers = MatrixClientPeg.get().getIgnoredUsers(); const ignoredUsers = cli.getIgnoredUsers();
ignoredUsers.push(userId); // de-duped internally in the js-sdk ignoredUsers.push(userId); // de-duped internally in the js-sdk
return success( return success(
MatrixClientPeg.get().setIgnoredUsers(ignoredUsers).then(() => { cli.setIgnoredUsers(ignoredUsers).then(() => {
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
Modal.createTrackedDialog('Slash Commands', 'User ignored', QuestionDialog, { Modal.createTrackedDialog('Slash Commands', 'User ignored', QuestionDialog, {
title: _t("Ignored user"), title: _t('Ignored user'),
description: ( description: <div>
<div> <p>{ _t('You are now ignoring %(userId)s', {userId}) }</p>
<p>{ _t("You are now ignoring %(userId)s", {userId: userId}) }</p> </div>,
</div>
),
hasCancelButton: false, hasCancelButton: false,
}); });
}), }),
@ -265,26 +295,31 @@ const commands = {
} }
} }
return reject(this.getUsage()); return reject(this.getUsage());
},
}), }),
unignore: new Command("unignore", "<userId>", function(roomId, args) { unignore: new Command({
name: 'unignore',
args: '<user-id>',
description: _td('Stops ignoring a user, showing their messages going forward'),
runFn: function(roomId, args) {
if (args) { if (args) {
const cli = MatrixClientPeg.get();
const matches = args.match(/^(\S+)$/); const matches = args.match(/^(\S+)$/);
if (matches) { if (matches) {
const userId = matches[1]; const userId = matches[1];
const ignoredUsers = MatrixClientPeg.get().getIgnoredUsers(); const ignoredUsers = cli.getIgnoredUsers();
const index = ignoredUsers.indexOf(userId); const index = ignoredUsers.indexOf(userId);
if (index !== -1) ignoredUsers.splice(index, 1); if (index !== -1) ignoredUsers.splice(index, 1);
return success( return success(
MatrixClientPeg.get().setIgnoredUsers(ignoredUsers).then(() => { cli.setIgnoredUsers(ignoredUsers).then(() => {
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
Modal.createTrackedDialog('Slash Commands', 'User unignored', QuestionDialog, { Modal.createTrackedDialog('Slash Commands', 'User unignored', QuestionDialog, {
title: _t("Unignored user"), title: _t('Unignored user'),
description: ( description: <div>
<div> <p>{ _t('You are no longer ignoring %(userId)s', {userId}) }</p>
<p>{ _t("You are no longer ignoring %(userId)s", {userId: userId}) }</p> </div>,
</div>
),
hasCancelButton: false, hasCancelButton: false,
}); });
}), }),
@ -292,10 +327,15 @@ const commands = {
} }
} }
return reject(this.getUsage()); return reject(this.getUsage());
},
}), }),
// Define the power level of a user // Define the power level of a user
op: new Command("op", "<userId> [<power level>]", function(roomId, args) { op: new Command({
name: 'op',
args: '<user-id> [<power-level>]',
description: _td('Define the power level of a user'),
runFn: function(roomId, args) {
if (args) { if (args) {
const matches = args.match(/^(\S+?)( +(-?\d+))?$/); const matches = args.match(/^(\S+?)( +(-?\d+))?$/);
let powerLevel = 50; // default power level for op let powerLevel = 50; // default power level for op
@ -305,59 +345,61 @@ const commands = {
powerLevel = parseInt(matches[3]); powerLevel = parseInt(matches[3]);
} }
if (!isNaN(powerLevel)) { if (!isNaN(powerLevel)) {
const room = MatrixClientPeg.get().getRoom(roomId); const cli = MatrixClientPeg.get();
if (!room) { const room = cli.getRoom(roomId);
return reject("Bad room ID: " + roomId); if (!room) return reject('Bad room ID: ' + roomId);
}
const powerLevelEvent = room.currentState.getStateEvents( const powerLevelEvent = room.currentState.getStateEvents('m.room.power_levels', '');
"m.room.power_levels", "", return success(cli.setPowerLevel(roomId, userId, powerLevel, powerLevelEvent));
);
return success(
MatrixClientPeg.get().setPowerLevel(
roomId, userId, powerLevel, powerLevelEvent,
),
);
} }
} }
} }
return reject(this.getUsage()); return reject(this.getUsage());
},
}), }),
// Reset the power level of a user // Reset the power level of a user
deop: new Command("deop", "<userId>", function(roomId, args) { deop: new Command({
name: 'deop',
args: '<user-id>',
description: _td('Deops user with given id'),
runFn: function(roomId, args) {
if (args) { if (args) {
const matches = args.match(/^(\S+)$/); const matches = args.match(/^(\S+)$/);
if (matches) { if (matches) {
const room = MatrixClientPeg.get().getRoom(roomId); const cli = MatrixClientPeg.get();
if (!room) { const room = cli.getRoom(roomId);
return reject("Bad room ID: " + roomId); if (!room) return reject('Bad room ID: ' + roomId);
}
const powerLevelEvent = room.currentState.getStateEvents( const powerLevelEvent = room.currentState.getStateEvents('m.room.power_levels', '');
"m.room.power_levels", "", return success(cli.setPowerLevel(roomId, args, undefined, powerLevelEvent));
);
return success(
MatrixClientPeg.get().setPowerLevel(
roomId, args, undefined, powerLevelEvent,
),
);
} }
} }
return reject(this.getUsage()); return reject(this.getUsage());
},
}), }),
// Open developer tools devtools: new Command({
devtools: new Command("devtools", "", function(roomId) { name: 'devtools',
const DevtoolsDialog = sdk.getComponent("dialogs.DevtoolsDialog"); description: _td('Opens the Developer Tools dialog'),
runFn: function(roomId) {
const DevtoolsDialog = sdk.getComponent('dialogs.DevtoolsDialog');
Modal.createDialog(DevtoolsDialog, {roomId}); Modal.createDialog(DevtoolsDialog, {roomId});
return success(); return success();
},
}), }),
// Verify a user, device, and pubkey tuple // Verify a user, device, and pubkey tuple
verify: new Command("verify", "<userId> <deviceId> <deviceSigningKey>", function(roomId, args) { verify: new Command({
name: 'verify',
args: '<user-id> <device-id> <device-signing-key>',
description: _td('Verifies a user, device, and pubkey tuple'),
runFn: function(roomId, args) {
if (args) { if (args) {
const matches = args.match(/^(\S+) +(\S+) +(\S+)$/); const matches = args.match(/^(\S+) +(\S+) +(\S+)$/);
if (matches) { if (matches) {
const cli = MatrixClientPeg.get();
const userId = matches[1]; const userId = matches[1];
const deviceId = matches[2]; const deviceId = matches[2];
const fingerprint = matches[3]; const fingerprint = matches[3];
@ -365,16 +407,16 @@ const commands = {
return success( return success(
// Promise.resolve to handle transition from static result to promise; can be removed // Promise.resolve to handle transition from static result to promise; can be removed
// in future // in future
Promise.resolve(MatrixClientPeg.get().getStoredDevice(userId, deviceId)).then((device) => { Promise.resolve(cli.getStoredDevice(userId, deviceId)).then((device) => {
if (!device) { if (!device) {
throw new Error(_t(`Unknown (user, device) pair:`) + ` (${userId}, ${deviceId})`); throw new Error(_t('Unknown (user, device) pair:') + ` (${userId}, ${deviceId})`);
} }
if (device.isVerified()) { if (device.isVerified()) {
if (device.getFingerprint() === fingerprint) { if (device.getFingerprint() === fingerprint) {
throw new Error(_t(`Device already verified!`)); throw new Error(_t('Device already verified!'));
} else { } else {
throw new Error(_t(`WARNING: Device already verified, but keys do NOT MATCH!`)); throw new Error(_t('WARNING: Device already verified, but keys do NOT MATCH!'));
} }
} }
@ -384,26 +426,29 @@ const commands = {
_t('WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and device' + _t('WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and device' +
' %(deviceId)s is "%(fprint)s" which does not match the provided key ' + ' %(deviceId)s is "%(fprint)s" which does not match the provided key ' +
'"%(fingerprint)s". This could mean your communications are being intercepted!', '"%(fingerprint)s". This could mean your communications are being intercepted!',
{deviceId: deviceId, fprint: fprint, userId: userId, fingerprint: fingerprint})); {
fprint,
userId,
deviceId,
fingerprint,
}));
} }
return MatrixClientPeg.get().setDeviceVerified(userId, deviceId, true); return cli.setDeviceVerified(userId, deviceId, true);
}).then(() => { }).then(() => {
// Tell the user we verified everything // Tell the user we verified everything
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
Modal.createTrackedDialog('Slash Commands', 'Verified key', QuestionDialog, { Modal.createTrackedDialog('Slash Commands', 'Verified key', QuestionDialog, {
title: _t("Verified key"), title: _t('Verified key'),
description: ( description: <div>
<div>
<p> <p>
{ {
_t("The signing key you provided matches the signing key you received " + _t('The signing key you provided matches the signing key you received ' +
"from %(userId)s's device %(deviceId)s. Device marked as verified.", 'from %(userId)s\'s device %(deviceId)s. Device marked as verified.',
{userId: userId, deviceId: deviceId}) {userId, deviceId})
} }
</p> </p>
</div> </div>,
),
hasCancelButton: false, hasCancelButton: false,
}); });
}), }),
@ -411,6 +456,16 @@ const commands = {
} }
} }
return reject(this.getUsage()); return reject(this.getUsage());
},
}),
// Command definitions for autocompletion ONLY:
// /me is special because its not handled by SlashCommands.js and is instead done inside the Composer classes
me: new Command({
name: 'me',
args: '<message>',
description: _td('Displays action'),
}), }),
}; };
/* eslint-enable babel/no-invalid-this */ /* eslint-enable babel/no-invalid-this */
@ -421,7 +476,6 @@ const aliases = {
j: "join", j: "join",
}; };
module.exports = {
/** /**
* Process the given text for /commands and perform them. * Process the given text for /commands and perform them.
* @param {string} roomId The room in which the command was performed. * @param {string} roomId The room in which the command was performed.
@ -430,11 +484,12 @@ module.exports = {
* processing the command, or 'promise' if a request was sent out. * processing the command, or 'promise' if a request was sent out.
* Returns null if the input didn't match a command. * Returns null if the input didn't match a command.
*/ */
processInput: function(roomId, input) { export function processCommandInput(roomId, input) {
// trim any trailing whitespace, as it can confuse the parser for // trim any trailing whitespace, as it can confuse the parser for
// IRC-style commands // IRC-style commands
input = input.replace(/\s+$/, ""); input = input.replace(/\s+$/, '');
if (input[0] === "/" && input[1] !== "/") { if (input[0] !== '/' || input[1] === '/') return null; // not a command
const bits = input.match(/^(\S+?)( +((.|\n)*))?$/); const bits = input.match(/^(\S+?)( +((.|\n)*))?$/);
let cmd; let cmd;
let args; let args;
@ -444,27 +499,16 @@ module.exports = {
} else { } else {
cmd = input; cmd = input;
} }
if (cmd === "me") return null;
if (aliases[cmd]) { if (aliases[cmd]) {
cmd = aliases[cmd]; cmd = aliases[cmd];
} }
if (commands[cmd]) { if (CommandMap[cmd]) {
return commands[cmd].run(roomId, args); // if it has no runFn then its an ignored/nop command (autocomplete only) e.g `/me`
if (!CommandMap[cmd].runFn) return null;
return CommandMap[cmd].run(roomId, args);
} else { } else {
return reject(_t("Unrecognised command:") + ' ' + input); return reject(_t('Unrecognised command:') + ' ' + input);
} }
} }
return null; // not a command
},
getCommandList: function() {
// Return all the commands plus /me and /markdown which aren't handled like normal commands
const cmds = Object.keys(commands).sort().map(function(cmdKey) {
return commands[cmdKey];
});
cmds.push(new Command("me", "<action>", function() {}));
cmds.push(new Command("markdown", "<on|off>", function() {}));
return cmds;
},
};

126
src/autocomplete/CommandProvider.js
View file

@ -18,101 +18,14 @@ limitations under the License.
*/ */
import React from 'react'; import React from 'react';
import { _t, _td } from '../languageHandler'; import {_t} from '../languageHandler';
import AutocompleteProvider from './AutocompleteProvider'; import AutocompleteProvider from './AutocompleteProvider';
import FuzzyMatcher from './FuzzyMatcher'; import FuzzyMatcher from './FuzzyMatcher';
import {TextualCompletion} from './Components'; import {TextualCompletion} from './Components';
import {CommandMap} from '../SlashCommands';
import type {SelectionRange} from "./Autocompleter"; import type {SelectionRange} from "./Autocompleter";
// TODO merge this with the factory mechanics of SlashCommands? const COMMANDS = Object.values(CommandMap);
// Warning: Since the description string will be translated in _t(result.description), all these strings below must be in i18n/strings/en_EN.json file
const COMMANDS = [
{
command: '/me',
args: '<message>',
description: _td('Displays action'),
},
{
command: '/ban',
args: '<user-id> [reason]',
description: _td('Bans user with given id'),
},
{
command: '/unban',
args: '<user-id>',
description: _td('Unbans user with given id'),
},
{
command: '/op',
args: '<user-id> [<power-level>]',
description: _td('Define the power level of a user'),
},
{
command: '/deop',
args: '<user-id>',
description: _td('Deops user with given id'),
},
{
command: '/invite',
args: '<user-id>',
description: _td('Invites user with given id to current room'),
},
{
command: '/join',
args: '<room-alias>',
description: _td('Joins room with given alias'),
},
{
command: '/part',
args: '[<room-alias>]',
description: _td('Leave room'),
},
{
command: '/topic',
args: '<topic>',
description: _td('Sets the room topic'),
},
{
command: '/kick',
args: '<user-id> [reason]',
description: _td('Kicks user with given id'),
},
{
command: '/nick',
args: '<display-name>',
description: _td('Changes your display nickname'),
},
{
command: '/ddg',
args: '<query>',
description: _td('Searches DuckDuckGo for results'),
},
{
command: '/tint',
args: '<color1> [<color2>]',
description: _td('Changes colour scheme of current room'),
},
{
command: '/verify',
args: '<user-id> <device-id> <device-signing-key>',
description: _td('Verifies a user, device, and pubkey tuple'),
},
{
command: '/ignore',
args: '<user-id>',
description: _td('Ignores a user, hiding their messages from you'),
},
{
command: '/unignore',
args: '<user-id>',
description: _td('Stops ignoring a user, showing their messages going forward'),
},
{
command: '/devtools',
args: '',
description: _td('Opens the Developer Tools dialog'),
},
];
const COMMAND_RE = /(^\/\w*)(?: .*)?/g; const COMMAND_RE = /(^\/\w*)(?: .*)?/g;
@ -128,20 +41,35 @@ export default class CommandProvider extends AutocompleteProvider {
const {command, range} = this.getCurrentCommand(query, selection); const {command, range} = this.getCurrentCommand(query, selection);
if (!command) return []; if (!command) return [];
// if the query is just `/` (and the user hit TAB or waits), show them all COMMANDS otherwise FuzzyMatch them let matches;
const matches = query === '/' ? COMMANDS : this.matcher.match(command[1]); if (command[0] !== command[1]) {
return matches.map((result) => { // The input looks like a command with arguments, perform exact match
return { const match = COMMANDS.find((o) => o.command === command[1]);
if (match) {
matches = [match];
}
}
// If we don't yet have matches
if (!matches) {
if (query === '/') {
// If they have just entered `/` show everything
matches = COMMANDS;
} else {
// otherwise fuzzy match against all of the fields
matches = this.matcher.match(command[1]);
}
}
return matches.map((result) => ({
// If the command is the same as the one they entered, we don't want to discard their arguments // If the command is the same as the one they entered, we don't want to discard their arguments
completion: result.command === command[1] ? command[0] : (result.command + ' '), completion: result.command === command[1] ? command[0] : (result.command + ' '),
component: (<TextualCompletion component: <TextualCompletion
title={result.command} title={result.command}
subtitle={result.args} subtitle={result.args}
description={_t(result.description)} description={_t(result.description)} />,
/>),
range, range,
}; }));
});
} }
getName() { getName() {

4
src/components/views/rooms/MessageComposerInput.js
View file

@ -28,7 +28,7 @@ import Promise from 'bluebird';
import MatrixClientPeg from '../../../MatrixClientPeg'; import MatrixClientPeg from '../../../MatrixClientPeg';
import type {MatrixClient} from 'matrix-js-sdk/lib/matrix'; import type {MatrixClient} from 'matrix-js-sdk/lib/matrix';
import SlashCommands from '../../../SlashCommands'; import {processCommandInput} from '../../../SlashCommands';
import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../../Keyboard'; import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../../Keyboard';
import Modal from '../../../Modal'; import Modal from '../../../Modal';
import sdk from '../../../index'; import sdk from '../../../index';
@ -721,7 +721,7 @@ export default class MessageComposerInput extends React.Component {
// Some commands (/join) require pills to be replaced with their text content // Some commands (/join) require pills to be replaced with their text content
const commandText = this.removeMDLinks(contentState, ['#']); const commandText = this.removeMDLinks(contentState, ['#']);
const cmd = SlashCommands.processInput(this.props.room.roomId, commandText); const cmd = processCommandInput(this.props.room.roomId, commandText);
if (cmd) { if (cmd) {
if (!cmd.error) { if (!cmd.error) {
this.historyManager.save(contentState, this.state.isRichtextEnabled ? 'html' : 'markdown'); this.historyManager.save(contentState, this.state.isRichtextEnabled ? 'html' : 'markdown');