Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

compose: Add format hinting for polls. 

Added a placeholder key to the polls slash command object. This is
selected and highlighted after being typed ahead in the compose box.
For slash commands without placeholder, everything works as before.

Formatting hints can easily be added for other slash commands too,
by adding a placeholder key to their object.

Fixes part of #20868
This commit is contained in:
N-Shar-ma 2022-01-23 14:54:05 +05:30 committed by Tim Abbott
parent d560d124a3
commit 048c9b99e3
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
static/js/composebox_typeahead.js
View File

@ -422,6 +422,7 @@ export const slash_commands = [
text: $t({defaultMessage: "/poll Where should we go to lunch today? (Create a poll)"}), text: $t({defaultMessage: "/poll Where should we go to lunch today? (Create a poll)"}),
name: "poll", name: "poll",
aliases: "", aliases: "",
placeholder: "Question",
}, },
{ {
text: $t({defaultMessage: "/todo (Create a todo list)"}), text: $t({defaultMessage: "/todo (Create a todo list)"}),
@ -884,6 +885,9 @@ export function content_typeahead_selected(item, event) {
let beginning = pieces[0]; let beginning = pieces[0];
let rest = pieces[1]; let rest = pieces[1];
const textbox = this.$element; const textbox = this.$element;
// this highlight object will hold the start and end indices
// for highlighting any placeholder text
const highlight = {};
switch (this.completing) { switch (this.completing) {
case "emoji": case "emoji":
@ -936,6 +940,11 @@ export function content_typeahead_selected(item, event) {
} }
case "slash": case "slash":
beginning = beginning.slice(0, -this.token.length - 1) + "/" + item.name + " "; beginning = beginning.slice(0, -this.token.length - 1) + "/" + item.name + " ";
if (item.placeholder) {
beginning = beginning + item.placeholder;
highlight.start = item.name.length + 2;
highlight.end = highlight.start + item.placeholder.length;
}
break; break;
case "stream": case "stream":
beginning = beginning.slice(0, -this.token.length - 1); beginning = beginning.slice(0, -this.token.length - 1);
@ -1012,10 +1021,18 @@ export function content_typeahead_selected(item, event) {
} }
} }
// Keep the cursor after the newly inserted text, as Bootstrap will call textbox.change() to // Keep the cursor after the newly inserted text / selecting the
// placeholder text, as Bootstrap will call textbox.change() to
// overwrite the text in the textbox. // overwrite the text in the textbox.
setTimeout(() => { setTimeout(() => {
textbox.caret(beginning.length, beginning.length); if (item.placeholder) {
// This placeholder block is exclusively for slash
// commands, which always appear at the start of the message.
textbox.get(0).setSelectionRange(highlight.start, highlight.end);
textbox.trigger("focus");
} else {
textbox.caret(beginning.length, beginning.length);
}
// Also, trigger autosize to check if compose box needs to be resized. // Also, trigger autosize to check if compose box needs to be resized.
compose_ui.autosize_textarea(textbox); compose_ui.autosize_textarea(textbox);
}, 0); }, 0);