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

compose: Fix bug where inserted content would not be scrolled into view. 

On chromium browsers, the scroll position is not restored when the text
in a textarea is replaced. So instead of directly replacing the text,
we call the `insert_and_scroll_into_view` function with `replace_all`
set to true.
This commit is contained in:
N-Shar-ma 2024-03-05 05:19:38 +05:30 committed by Tim Abbott
parent ef0be22899
commit b4d53c7930
2 changed files with 86 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/compose_ui.ts
View File

@ -569,7 +569,7 @@ export function format_text(
after_lines = "\n" + after_lines; after_lines = "\n" + after_lines;
} }
text = before_lines + selected_lines + after_lines; text = before_lines + selected_lines + after_lines;
setFieldText(field, text); insert_and_scroll_into_view(text, $textarea, true);
// If no text was selected, that is, marking was added to the line with the // If no text was selected, that is, marking was added to the line with the
// cursor, nothing will be selected and the cursor will remain as it was. // cursor, nothing will be selected and the cursor will remain as it was.
if (selected_text === "") { if (selected_text === "") {
@ -601,7 +601,7 @@ export function format_text(
text.slice(range.start, range.end) + text.slice(range.start, range.end) +
linebreak_end + linebreak_end +
text.slice(range.end + syntax_end.length); text.slice(range.end + syntax_end.length);
setFieldText(field, text); insert_and_scroll_into_view(text, $textarea, true);
field.setSelectionRange( field.setSelectionRange(
range.start - syntax_start.length, range.start - syntax_start.length,
range.end - syntax_start.length, range.end - syntax_start.length,
@ -615,7 +615,7 @@ export function format_text(
text.slice(range.start + syntax_start.length, range.end - syntax_end.length) + text.slice(range.start + syntax_start.length, range.end - syntax_end.length) +
linebreak_end + linebreak_end +
text.slice(range.end); text.slice(range.end);
setFieldText(field, text); insert_and_scroll_into_view(text, $textarea, true);
field.setSelectionRange( field.setSelectionRange(
range.start, range.start,
range.end - syntax_start.length - syntax_end.length, range.end - syntax_start.length - syntax_end.length,
@ -644,7 +644,7 @@ export function format_text(
if (text.startsWith("\n")) { if (text.startsWith("\n")) {
text = text.slice(1); text = text.slice(1);
} }
setFieldText(field, text); insert_and_scroll_into_view(text, $textarea, true);
field.setSelectionRange( field.setSelectionRange(
range.start, range.start,
range.end - spoiler_syntax_start.length - spoiler_syntax_end.length, range.end - spoiler_syntax_start.length - spoiler_syntax_end.length,
@ -664,7 +664,7 @@ export function format_text(
if (text.startsWith("\n")) { if (text.startsWith("\n")) {
text = text.slice(1); text = text.slice(1);
} }
setFieldText(field, text); insert_and_scroll_into_view(text, $textarea, true);
field.setSelectionRange( field.setSelectionRange(
range.start, range.start,
range.end - spoiler_syntax_start_without_break.length - spoiler_syntax_end.length, range.end - spoiler_syntax_start_without_break.length - spoiler_syntax_end.length,
@ -678,7 +678,7 @@ export function format_text(
text.slice(0, range.start - spoiler_syntax_start_without_break.length) + text.slice(0, range.start - spoiler_syntax_start_without_break.length) +
selected_text + selected_text +
text.slice(range.end + spoiler_syntax_end.length); text.slice(range.end + spoiler_syntax_end.length);
setFieldText(field, text); insert_and_scroll_into_view(text, $textarea, true);
field.setSelectionRange( field.setSelectionRange(
range.start - spoiler_syntax_start_without_break.length, range.start - spoiler_syntax_start_without_break.length,
range.end - spoiler_syntax_start_without_break.length, range.end - spoiler_syntax_start_without_break.length,
@ -692,7 +692,7 @@ export function format_text(
text.slice(0, range.start - spoiler_syntax_start.length) + text.slice(0, range.start - spoiler_syntax_start.length) +
selected_text + selected_text +
text.slice(range.end + spoiler_syntax_end.length); text.slice(range.end + spoiler_syntax_end.length);
setFieldText(field, text); insert_and_scroll_into_view(text, $textarea, true);
field.setSelectionRange( field.setSelectionRange(
range.start - spoiler_syntax_start.length, range.start - spoiler_syntax_start.length,
range.end - spoiler_syntax_start.length, range.end - spoiler_syntax_start.length,
@ -722,7 +722,7 @@ export function format_text(
) + ) +
selected_text + selected_text +
text.slice(range.end + spoiler_syntax_end.length); text.slice(range.end + spoiler_syntax_end.length);
setFieldText(field, text); insert_and_scroll_into_view(text, $textarea, true);
field.setSelectionRange( field.setSelectionRange(
new_selection_start, new_selection_start,
range.end - spoiler_syntax_start_without_break.length, range.end - spoiler_syntax_start_without_break.length,
@ -746,7 +746,7 @@ export function format_text(
text.slice(0, range.start - spoiler_syntax_start_without_break.length) + text.slice(0, range.start - spoiler_syntax_start_without_break.length) +
text.slice(new_range_start, new_range_end) + text.slice(new_range_start, new_range_end) +
text.slice(new_range_end + spoiler_syntax_end.length); text.slice(new_range_end + spoiler_syntax_end.length);
setFieldText(field, text); insert_and_scroll_into_view(text, $textarea, true);
field.setSelectionRange( field.setSelectionRange(
new_range_start - spoiler_syntax_start_without_break.length - (header ? 0 : 1), new_range_start - spoiler_syntax_start_without_break.length - (header ? 0 : 1),
new_range_end - spoiler_syntax_start_without_break.length - (header ? 0 : 1), new_range_end - spoiler_syntax_start_without_break.length - (header ? 0 : 1),
@ -813,7 +813,7 @@ export function format_text(
space_between_description_and_url(description, url) + space_between_description_and_url(description, url) +
url + url +
text.slice(range.end + 1); text.slice(range.end + 1);
setFieldText(field, text); insert_and_scroll_into_view(text, $textarea, true);
field.setSelectionRange( field.setSelectionRange(
range.start - 3 + space_between_description_and_url(description, url).length, range.start - 3 + space_between_description_and_url(description, url).length,
range.start - range.start -
@ -846,7 +846,7 @@ export function format_text(
space_between_description_and_url(selected_text, url) + space_between_description_and_url(selected_text, url) +
url + url +
text.slice(text.indexOf(")", range.end) + 1); text.slice(text.indexOf(")", range.end) + 1);
setFieldText(field, text); insert_and_scroll_into_view(text, $textarea, true);
field.setSelectionRange(range.start - 1, range.end - 1); field.setSelectionRange(range.start - 1, range.end - 1);
return; return;
} }
@ -870,7 +870,7 @@ export function format_text(
space_between_description_and_url(description, url) + space_between_description_and_url(description, url) +
url + url +
text.slice(range.end); text.slice(range.end);
setFieldText(field, text); insert_and_scroll_into_view(text, $textarea, true);
field.setSelectionRange( field.setSelectionRange(
range.start, range.start,
range.start + range.start +
@ -940,7 +940,7 @@ export function format_text(
text.slice(0, range.start - italic_syntax.length) + text.slice(0, range.start - italic_syntax.length) +
text.slice(range.start, range.end) + text.slice(range.start, range.end) +
text.slice(range.end + italic_syntax.length); text.slice(range.end + italic_syntax.length);
setFieldText(field, text); insert_and_scroll_into_view(text, $textarea, true);
field.setSelectionRange( field.setSelectionRange(
range.start - italic_syntax.length, range.start - italic_syntax.length,
range.end - italic_syntax.length, range.end - italic_syntax.length,
@ -976,7 +976,7 @@ export function format_text(
range.end - italic_syntax.length, range.end - italic_syntax.length,
) + ) +
text.slice(range.end); text.slice(range.end);
setFieldText(field, text); insert_and_scroll_into_view(text, $textarea, true);
field.setSelectionRange(range.start, range.end - italic_syntax.length * 2); field.setSelectionRange(range.start, range.end - italic_syntax.length * 2);
break; break;
} }

104
web/tests/compose_ui.test.js
View File

@ -544,10 +544,15 @@ function get_textarea_state() {
return before_text + selected_text + after_text; return before_text + selected_text + after_text;
} }
run_test("format_text - bold and italic", ({override}) => { run_test("format_text - bold and italic", ({override, override_rewire}) => {
override(text_field_edit, "setFieldText", (_field, text) => { override_rewire(
$textarea.val = () => text; compose_ui,
}); "insert_and_scroll_into_view",
(content, _textarea, replace_all) => {
assert.ok(replace_all);
$textarea.val = () => content;
},
);
override( override(
text_field_edit, text_field_edit,
"wrapFieldSelection", "wrapFieldSelection",
@ -634,10 +639,15 @@ run_test("format_text - bold and italic", ({override}) => {
assert.equal(get_textarea_state(), "before <**abc**> after"); assert.equal(get_textarea_state(), "before <**abc**> after");
}); });
run_test("format_text - bulleted and numbered lists", ({override}) => { run_test("format_text - bulleted and numbered lists", ({override_rewire}) => {
override(text_field_edit, "setFieldText", (_field, text) => { override_rewire(
$textarea.val = () => text; compose_ui,
}); "insert_and_scroll_into_view",
(content, _textarea, replace_all) => {
assert.ok(replace_all);
$textarea.val = () => content;
},
);
// Toggling on bulleted list // Toggling on bulleted list
init_textarea_state("<first_item\nsecond_item>"); init_textarea_state("<first_item\nsecond_item>");
@ -686,10 +696,15 @@ run_test("format_text - bulleted and numbered lists", ({override}) => {
assert.equal(get_textarea_state(), "<first_item\nsecond_item>"); assert.equal(get_textarea_state(), "<first_item\nsecond_item>");
}); });
run_test("format_text - strikethrough", ({override}) => { run_test("format_text - strikethrough", ({override, override_rewire}) => {
override(text_field_edit, "setFieldText", (_field, text) => { override_rewire(
$textarea.val = () => text; compose_ui,
}); "insert_and_scroll_into_view",
(content, _textarea, replace_all) => {
assert.ok(replace_all);
$textarea.val = () => content;
},
);
override(text_field_edit, "wrapFieldSelection", (_field, syntax_start, syntax_end) => { override(text_field_edit, "wrapFieldSelection", (_field, syntax_start, syntax_end) => {
const new_val = const new_val =
$textarea.val().slice(0, $textarea.range().start) + $textarea.val().slice(0, $textarea.range().start) +
@ -733,10 +748,15 @@ run_test("format_text - strikethrough", ({override}) => {
assert.equal(get_textarea_state(), "before <abc> after"); assert.equal(get_textarea_state(), "before <abc> after");
}); });
run_test("format_text - latex", ({override}) => { run_test("format_text - latex", ({override, override_rewire}) => {
override(text_field_edit, "setFieldText", (_field, text) => { override_rewire(
$textarea.val = () => text; compose_ui,
}); "insert_and_scroll_into_view",
(content, _textarea, replace_all) => {
assert.ok(replace_all);
$textarea.val = () => content;
},
);
override(text_field_edit, "wrapFieldSelection", (_field, syntax_start, syntax_end) => { override(text_field_edit, "wrapFieldSelection", (_field, syntax_start, syntax_end) => {
const new_val = const new_val =
$textarea.val().slice(0, $textarea.range().start) + $textarea.val().slice(0, $textarea.range().start) +
@ -799,10 +819,15 @@ run_test("format_text - latex", ({override}) => {
assert.equal(get_textarea_state(), "Before\n<abc\ndef>\nAfter"); assert.equal(get_textarea_state(), "Before\n<abc\ndef>\nAfter");
}); });
run_test("format_text - code", ({override}) => { run_test("format_text - code", ({override, override_rewire}) => {
override(text_field_edit, "setFieldText", (_field, text) => { override_rewire(
$textarea.val = () => text; compose_ui,
}); "insert_and_scroll_into_view",
(content, _textarea, replace_all) => {
assert.ok(replace_all);
$textarea.val = () => content;
},
);
override(text_field_edit, "wrapFieldSelection", (_field, syntax_start, syntax_end) => { override(text_field_edit, "wrapFieldSelection", (_field, syntax_start, syntax_end) => {
const new_val = const new_val =
$textarea.val().slice(0, $textarea.range().start) + $textarea.val().slice(0, $textarea.range().start) +
@ -865,10 +890,15 @@ run_test("format_text - code", ({override}) => {
assert.equal(get_textarea_state(), "before\n<abc\ndef>\nafter"); assert.equal(get_textarea_state(), "before\n<abc\ndef>\nafter");
}); });
run_test("format_text - quote", ({override}) => { run_test("format_text - quote", ({override, override_rewire}) => {
override(text_field_edit, "setFieldText", (_field, text) => { override_rewire(
$textarea.val = () => text; compose_ui,
}); "insert_and_scroll_into_view",
(content, _textarea, replace_all) => {
assert.ok(replace_all);
$textarea.val = () => content;
},
);
override(text_field_edit, "wrapFieldSelection", (_field, syntax_start, syntax_end) => { override(text_field_edit, "wrapFieldSelection", (_field, syntax_start, syntax_end) => {
const new_val = const new_val =
$textarea.val().slice(0, $textarea.range().start) + $textarea.val().slice(0, $textarea.range().start) +
@ -924,10 +954,15 @@ run_test("format_text - quote", ({override}) => {
assert.equal(get_textarea_state(), "before\n<abc\ndef>\nafter"); assert.equal(get_textarea_state(), "before\n<abc\ndef>\nafter");
}); });
run_test("format_text - spoiler", ({override}) => { run_test("format_text - spoiler", ({override, override_rewire}) => {
override(text_field_edit, "setFieldText", (_field, text) => { override_rewire(
$textarea.val = () => text; compose_ui,
}); "insert_and_scroll_into_view",
(content, _textarea, replace_all) => {
assert.ok(replace_all);
$textarea.val = () => content;
},
);
override(text_field_edit, "wrapFieldSelection", (_field, syntax_start, syntax_end) => { override(text_field_edit, "wrapFieldSelection", (_field, syntax_start, syntax_end) => {
const new_val = const new_val =
$textarea.val().slice(0, $textarea.range().start) + $textarea.val().slice(0, $textarea.range().start) +
@ -991,10 +1026,15 @@ run_test("format_text - spoiler", ({override}) => {
assert.equal(get_textarea_state(), "before\n<abc>\nafter"); assert.equal(get_textarea_state(), "before\n<abc>\nafter");
}); });
run_test("format_text - link", ({override}) => { run_test("format_text - link", ({override, override_rewire}) => {
override(text_field_edit, "setFieldText", (_field, text) => { override_rewire(
$textarea.val = () => text; compose_ui,
}); "insert_and_scroll_into_view",
(content, _textarea, replace_all) => {
assert.ok(replace_all);
$textarea.val = () => content;
},
);
override(text_field_edit, "wrapFieldSelection", (_field, syntax_start, syntax_end) => { override(text_field_edit, "wrapFieldSelection", (_field, syntax_start, syntax_end) => {
const new_val = const new_val =
$textarea.val().slice(0, $textarea.range().start) + $textarea.val().slice(0, $textarea.range().start) +