github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-24 14:12:10 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: Improve selecting text over line breaks

Browse Source
This commit is contained in:
Robin Ward
2016-09-13 11:36:17 -04:00
parent e46204d195
commit aa7c735d34
2 changed files with 38 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/assets/javascripts/discourse/lib/utilities.js.es6
View File

@ -102,14 +102,18 @@ export function selectedText() {
} }
} }
html = html.replace(/<br>/g, "\n");
// Strip out any .click elements from the HTML before converting it to text // Strip out any .click elements from the HTML before converting it to text
var div = document.createElement('div'); const div = document.createElement('div');
div.innerHTML = html; div.innerHTML = html;
var $div = $(div);
const $div = $(div);
// Find all emojis and replace with its title attribute. // Find all emojis and replace with its title attribute.
$div.find('img.emoji').replaceWith(function() { return this.title; }); $div.find('img.emoji').replaceWith(() => this.title);
$('.clicks', $div).remove(); $('.clicks', $div).remove();
var text = div.textContent || div.innerText || ""; const text = div.textContent || div.innerText || "";
return String(text).trim(); return String(text).trim();
} }

72
app/assets/javascripts/discourse/views/quote-button.js.es6
View File

@ -13,10 +13,8 @@ export default Ember.View.extend({
isMouseDown: false, isMouseDown: false,
isTouchInProgress: false, isTouchInProgress: false,
/** // The button is visible whenever there is something in the buffer
The button is visible whenever there is something in the buffer // (ie. something has been selected)
(ie. something has been selected)
**/
visible: Em.computed.notEmpty('controller.buffer'), visible: Em.computed.notEmpty('controller.buffer'),
render(buffer) { render(buffer) {
@ -32,12 +30,9 @@ export default Ember.View.extend({
@method didInsertElement @method didInsertElement
**/ **/
didInsertElement() { didInsertElement() {
const controller = this.get('controller'), const controller = this.get('controller');
view = this;
var onSelectionChanged = function() { let onSelectionChanged = () => this.selectText(window.getSelection().anchorNode, controller);
view.selectText(window.getSelection().anchorNode, controller);
};
// Windows Phone hack, it is not firing the touch events // Windows Phone hack, it is not firing the touch events
// best we can do is debounce this so we dont keep locking up // best we can do is debounce this so we dont keep locking up
@ -50,43 +45,36 @@ export default Ember.View.extend({
onSelectionChanged = _.debounce(onSelectionChanged, 500); onSelectionChanged = _.debounce(onSelectionChanged, 500);
} }
$(document) $(document).on("mousedown.quote-button", e => {
.on("mousedown.quote-button", function(e) { this.set('isMouseDown', true);
view.set('isMouseDown', true);
if (ignoreElements(e)) { return; } if (ignoreElements(e)) { return; }
// deselects only when the user left click // deselects only when the user left click
// (allows anyone to `extend` their selection using shift+click) // (allows anyone to `extend` their selection using shift+click)
if (!window.getSelection().isCollapsed && if (!window.getSelection().isCollapsed &&
e.which === 1 && e.which === 1 &&
!e.shiftKey) controller.deselectText(); !e.shiftKey) controller.deselectText();
}) }).on('mouseup.quote-button', e => {
.on('mouseup.quote-button', function(e) { if (ignoreElements(e)) { return; }
if (ignoreElements(e)) { return; }
view.selectText(e.target, controller); this.selectText(e.target, controller);
view.set('isMouseDown', false); this.set('isMouseDown', false);
}) }).on('selectionchange', () => {
.on('selectionchange', function() { // there is no need to handle this event when the mouse is down
// there is no need to handle this event when the mouse is down // or if there a touch in progress
// or if there a touch in progress if (this.get('isMouseDown') || this.get('isTouchInProgress')) { return; }
if (view.get('isMouseDown') || view.get('isTouchInProgress')) return; // `selection.anchorNode` is used as a target
// `selection.anchorNode` is used as a target onSelectionChanged();
onSelectionChanged(); });
});
// Android is dodgy, touchend often will not fire // Android is dodgy, touchend often will not fire
// https://code.google.com/p/android/issues/detail?id=19827 // https://code.google.com/p/android/issues/detail?id=19827
if (!isAndroid) { if (!isAndroid) {
$(document) $(document)
.on('touchstart.quote-button', function(){ .on('touchstart.quote-button', () => this.set('isTouchInProgress', true))
view.set('isTouchInProgress', true); .on('touchend.quote-button', () => this.set('isTouchInProgress', false));
}) }
.on('touchend.quote-button', function(){
view.set('isTouchInProgress', false);
});
}
}, },
selectText(target, controller) { selectText(target, controller) {