Commit 65de10ec authored by Johann Hubert Sonntagbauer's avatar Johann Hubert Sonntagbauer Committed by Kushal Pandya

Refine cursor positioning in Markdown Editor for wrap tags.

parent d4a5c8e2
...@@ -39,7 +39,7 @@ function blockTagText(text, textArea, blockTag, selected) { ...@@ -39,7 +39,7 @@ function blockTagText(text, textArea, blockTag, selected) {
} }
} }
function moveCursor({ textArea, tag, wrapped, removedLastNewLine, select }) { function moveCursor({ textArea, tag, positionBetweenTags, removedLastNewLine, select }) {
var pos; var pos;
if (!textArea.setSelectionRange) { if (!textArea.setSelectionRange) {
return; return;
...@@ -51,7 +51,7 @@ function moveCursor({ textArea, tag, wrapped, removedLastNewLine, select }) { ...@@ -51,7 +51,7 @@ function moveCursor({ textArea, tag, wrapped, removedLastNewLine, select }) {
return textArea.setSelectionRange(startPosition, endPosition); return textArea.setSelectionRange(startPosition, endPosition);
} }
if (textArea.selectionStart === textArea.selectionEnd) { if (textArea.selectionStart === textArea.selectionEnd) {
if (wrapped) { if (positionBetweenTags) {
pos = textArea.selectionStart - tag.length; pos = textArea.selectionStart - tag.length;
} else { } else {
pos = textArea.selectionStart; pos = textArea.selectionStart;
...@@ -67,7 +67,6 @@ function moveCursor({ textArea, tag, wrapped, removedLastNewLine, select }) { ...@@ -67,7 +67,6 @@ function moveCursor({ textArea, tag, wrapped, removedLastNewLine, select }) {
export function insertMarkdownText({ textArea, text, tag, blockTag, selected, wrap, select }) { export function insertMarkdownText({ textArea, text, tag, blockTag, selected, wrap, select }) {
var textToInsert, var textToInsert,
inserted,
selectedSplit, selectedSplit,
startChar, startChar,
removedLastNewLine, removedLastNewLine,
...@@ -155,7 +154,7 @@ export function insertMarkdownText({ textArea, text, tag, blockTag, selected, wr ...@@ -155,7 +154,7 @@ export function insertMarkdownText({ textArea, text, tag, blockTag, selected, wr
return moveCursor({ return moveCursor({
textArea, textArea,
tag: tag.replace(textPlaceholder, selected), tag: tag.replace(textPlaceholder, selected),
wrap, positionBetweenTags: wrap && selected.length === 0,
removedLastNewLine, removedLastNewLine,
select, select,
}); });
...@@ -171,10 +170,6 @@ function updateText({ textArea, tag, blockTag, wrap, select }) { ...@@ -171,10 +170,6 @@ function updateText({ textArea, tag, blockTag, wrap, select }) {
return insertMarkdownText({ textArea, text, tag, blockTag, selected, wrap, select }); return insertMarkdownText({ textArea, text, tag, blockTag, selected, wrap, select });
} }
function replaceRange(s, start, end, substitute) {
return s.substring(0, start) + substitute + s.substring(end);
}
export function addMarkdownListeners(form) { export function addMarkdownListeners(form) {
return $('.js-md', form) return $('.js-md', form)
.off('click') .off('click')
......
---
title: Refine cursor positioning in Markdown Editor for wrap tags
merge_request: 23085
author: Johann Hubert Sonntagbauer
type: changed
...@@ -86,6 +86,29 @@ describe('init markdown', () => { ...@@ -86,6 +86,29 @@ describe('init markdown', () => {
expect(textArea.value).toEqual(`${initialValue}* `); expect(textArea.value).toEqual(`${initialValue}* `);
}); });
it('places the cursor inside the tags', () => {
const start = 'lorem ';
const end = ' ipsum';
const tag = '*';
textArea.value = `${start}${end}`;
textArea.setSelectionRange(start.length, start.length);
insertMarkdownText({
textArea,
text: textArea.value,
tag,
blockTag: null,
selected: '',
wrap: true,
});
expect(textArea.value).toEqual(`${start}**${end}`);
// cursor placement should be between tags
expect(textArea.selectionStart).toBe(start.length + tag.length);
});
}); });
describe('with selection', () => { describe('with selection', () => {
...@@ -98,16 +121,22 @@ describe('init markdown', () => { ...@@ -98,16 +121,22 @@ describe('init markdown', () => {
}); });
it('applies the tag to the selected value', () => { it('applies the tag to the selected value', () => {
const selectedIndex = text.indexOf(selected);
const tag = '*';
insertMarkdownText({ insertMarkdownText({
textArea, textArea,
text: textArea.value, text: textArea.value,
tag: '*', tag,
blockTag: null, blockTag: null,
selected, selected,
wrap: true, wrap: true,
}); });
expect(textArea.value).toEqual(text.replace(selected, `*${selected}*`)); expect(textArea.value).toEqual(text.replace(selected, `*${selected}*`));
// cursor placement should be after selection + 2 tag lengths
expect(textArea.selectionStart).toBe(selectedIndex + selected.length + 2 * tag.length);
}); });
it('replaces the placeholder in the tag', () => { it('replaces the placeholder in the tag', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment