diff --git a/app/assets/javascripts/discourse/components/d-editor.js.es6 b/app/assets/javascripts/discourse/components/d-editor.js.es6 index f9fc95e31f..d522832496 100644 --- a/app/assets/javascripts/discourse/components/d-editor.js.es6 +++ b/app/assets/javascripts/discourse/components/d-editor.js.es6 @@ -12,6 +12,7 @@ import { emojiSearch } from 'pretty-text/emoji'; import { emojiUrlFor } from 'discourse/lib/text'; import { getRegister } from 'discourse-common/lib/get-owner'; import { findRawTemplate } from 'discourse/lib/raw-templates'; +import { determinePostReplaceSelection } from 'discourse/lib/utilities'; import deprecated from 'discourse-common/lib/deprecated'; // Our head can be a static string or a function that returns a string @@ -525,11 +526,27 @@ export default Ember.Component.extend({ _replaceText(oldVal, newVal) { const val = this.get('value'); - const loc = val.indexOf(oldVal); - if (loc !== -1) { - this.set('value', val.replace(oldVal, newVal)); - this._selectText(loc + newVal.length, 0); + const needleStart = val.indexOf(oldVal); + + if (needleStart === -1) { + // Nothing to replace. + return; } + + const textarea = this.$('textarea.d-editor-input')[0]; + + // Determine post-replace selection. + const newSelection = determinePostReplaceSelection({ + selection: { start: textarea.selectionStart, end: textarea.selectionEnd }, + needle: { start: needleStart, end: needleStart + oldVal.length }, + replacement: { start: needleStart, end: needleStart + newVal.length } + }); + + // Replace value (side effect: cursor at the end). + this.set('value', val.replace(oldVal, newVal)); + + // Restore cursor. + this._selectText(newSelection.start, newSelection.end - newSelection.start); }, _addText(sel, text) { diff --git a/app/assets/javascripts/discourse/lib/utilities.js.es6 b/app/assets/javascripts/discourse/lib/utilities.js.es6 index fcf6737527..27b55bbdd7 100644 --- a/app/assets/javascripts/discourse/lib/utilities.js.es6 +++ b/app/assets/javascripts/discourse/lib/utilities.js.es6 @@ -300,5 +300,35 @@ export function defaultHomepage() { return Discourse.SiteSettings.top_menu.split("|")[0].split(",")[0]; } +export function determinePostReplaceSelection({ selection, needle, replacement }) { + const diff = (replacement.end - replacement.start) - (needle.end - needle.start); + + if (selection.end <= needle.start) { + // Selection ends (and starts) before needle. + return { start: selection.start, end: selection.end }; + } else if (selection.start <= needle.start) { + // Selection starts before needle... + if (selection.end < needle.end) { + // ... and ends inside needle. + return { start: selection.start, end: needle.start }; + } else { + // ... and spans needle completely. + return { start: selection.start, end: selection.end + diff }; + } + } else if (selection.start < needle.end) { + // Selection starts inside needle... + if (selection.end <= needle.end) { + // ... and ends inside needle. + return { start: replacement.end, end: replacement.end }; + } else { + // ... and spans end of needle. + return { start: replacement.end, end: selection.end + diff }; + } + } else { + // Selection starts (and ends) behind needle. + return { start: selection.start + diff, end: selection.end + diff }; + } +} + // This prevents a mini racer crash export default {}; diff --git a/test/javascripts/components/d-editor-test.js.es6 b/test/javascripts/components/d-editor-test.js.es6 index 4fefd8c819..1a594cd2da 100644 --- a/test/javascripts/components/d-editor-test.js.es6 +++ b/test/javascripts/components/d-editor-test.js.es6 @@ -760,7 +760,7 @@ componentTest('emoji', { } }); -testCase("replace-text event", function(assert, textarea) { +testCase("replace-text event", function(assert) { this.set('value', "red green blue"); @@ -770,7 +770,96 @@ testCase("replace-text event", function(assert, textarea) { andThen(() => { assert.equal(this.get('value'), 'red yellow blue'); - assert.equal(textarea.selectionStart, 10); - assert.equal(textarea.selectionEnd, 10); }); }); + +(() => { + // Tests to check cursor/selection after replace-text event. + const BEFORE = 'red green blue'; + const NEEDLE = 'green'; + const REPLACE = 'yellow'; + const AFTER = BEFORE.replace(NEEDLE, REPLACE); + + const CASES = [ + { + description: 'cursor at start remains there', + before: [0, 0], + after: [0, 0] + },{ + description: 'cursor before needle becomes cursor before replacement', + before: [BEFORE.indexOf(NEEDLE), 0], + after: [AFTER.indexOf(REPLACE), 0] + },{ + description: 'cursor at needle start + 1 moves behind replacement', + before: [BEFORE.indexOf(NEEDLE) + 1, 0], + after: [AFTER.indexOf(REPLACE) + REPLACE.length, 0] + },{ + description: 'cursor at needle end - 1 stays behind replacement', + before: [BEFORE.indexOf(NEEDLE) + NEEDLE.length - 1, 0], + after: [AFTER.indexOf(REPLACE) + REPLACE.length, 0] + },{ + description: 'cursor behind needle becomes cursor behind replacement', + before: [BEFORE.indexOf(NEEDLE) + NEEDLE.length, 0], + after: [AFTER.indexOf(REPLACE) + REPLACE.length, 0] + },{ + description: 'cursor at end remains there', + before: [BEFORE.length, 0], + after: [AFTER.length, 0] + },{ + description: 'selection spanning needle start becomes selection until replacement start', + before: [BEFORE.indexOf(NEEDLE) - 1, 2], + after: [AFTER.indexOf(REPLACE) - 1, 1] + },{ + description: 'selection spanning needle end becomes selection from replacement end', + before: [BEFORE.indexOf(NEEDLE) + NEEDLE.length - 1, 2], + after: [AFTER.indexOf(REPLACE) + REPLACE.length, 1] + },{ + description: 'selection spanning needle becomes selection spanning replacement', + before: [BEFORE.indexOf(NEEDLE) - 1, NEEDLE.length + 2], + after: [AFTER.indexOf(REPLACE) - 1, REPLACE.length + 2] + },{ + description: 'complete selection remains complete', + before: [0, BEFORE.length], + after: [0, AFTER.length] + } + ]; + + function setSelection(textarea, [start, len]) { + textarea.selectionStart = start; + textarea.selectionEnd = start + len; + } + + function getSelection(textarea) { + const start = textarea.selectionStart; + const end = textarea.selectionEnd; + return [start, end - start]; + } + + function formatTextWithSelection(text, [start, len]) { + return [ + '"', + text.substr(0, start), + '<', + text.substr(start, len), + '>', + text.substr(start+len), + '"', + ].join(''); + } + + for (let i = 0; i < CASES.length; i++) { + const CASE = CASES[i]; + testCase(`replace-text event: ${CASE.description}`, function(assert, textarea) { + this.set('value', BEFORE); + setSelection(textarea, CASE.before); + andThen(() => { + this.container.lookup('app-events:main').trigger('composer:replace-text', 'green', 'yellow'); + }); + andThen(() => { + let expect = formatTextWithSelection(AFTER, CASE.after); + let actual = formatTextWithSelection(this.get('value'), getSelection(textarea)); + assert.equal(actual, expect); + }); + }); + } +})();