paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-01 20:44:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

compose: Add format hinting for spoilers.

Browse Source 
Until now, whenever typeahead autocompleted the spoiler syntax, there
was no indication if and how a visible header to the hidden content
could be added.

Now when autocompleting, the word "Header" is added as a placeholder
and highlighted, hinting at the format.

Fixes: #20868.
This commit is contained in:
N-Shar-ma
2022-09-05 14:06:06 +05:30
committed by Tim Abbott
parent c4d9d1d33b
commit 20620e68a4
2 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend_tests/node_tests/composebox_typeahead.js
View File

@@ -400,6 +400,14 @@ test("content_typeahead_selected", ({override}) => {
caret_called2 = true;
return this;
};
let range_called = false;
fake_this.$element.range = function (...args) {
const [arg1, arg2] = args;
// .range() used in setTimeout
assert.ok(arg2 > arg1);
range_called = true;
return this;
};
autosize_called = false;
set_timeout_called = false;
@@ -621,6 +629,12 @@ test("content_typeahead_selected", ({override}) => {
expected_value = "```python\n\n```";
assert.equal(actual_value, expected_value);
fake_this.query = "```spo";
fake_this.token = "spo";
actual_value = ct.content_typeahead_selected.call(fake_this, "spoiler");
expected_value = "```spoiler translated: Header\n\n```";
assert.equal(actual_value, expected_value);
// Test special case to not close code blocks if there is text afterward
fake_this.query = "```p\nsome existing code";
fake_this.token = "p";
@@ -638,6 +652,7 @@ test("content_typeahead_selected", ({override}) => {
assert.ok(caret_called1);
assert.ok(caret_called2);
assert.ok(range_called);
assert.ok(autosize_called);
assert.ok(set_timeout_called);
assert.ok(warned_for_stream_link);

21
static/js/composebox_typeahead.js
View File

@@ -862,16 +862,21 @@ export function content_typeahead_selected(item, event) {
// Isolate the end index of the triple backticks/tildes, including
// possibly a space afterward
const backticks = beginning.length - this.token.length;
beginning = beginning.slice(0, backticks) + item;
if (item === "spoiler") {
// to add in and highlight placeholder "Header"
const placeholder = $t({defaultMessage: "Header"});
highlight.start = beginning.length + 1;
beginning = beginning + " " + placeholder;
highlight.end = highlight.start + placeholder.length;
}
// If cursor is at end of input ("rest" is empty), then
// add a closing fence after the cursor
// If there is more text after the cursor, then don't
// touch "rest" (i.e. do not add a closing fence)
if (rest === "") {
// If cursor is at end of input ("rest" is empty), then
// complete the token before the cursor, and add a closing fence
// after the cursor
beginning = beginning.slice(0, backticks) + item + "\n";
beginning = beginning + "\n";
rest = "\n" + beginning.slice(Math.max(0, backticks - 4), backticks).trim() + rest;
} else {
// If more text after the input, then complete the token, but don't touch
// "rest" (i.e. do not add a closing fence)
beginning = beginning.slice(0, backticks) + item;
}
break;
}