Merge pull request #6280 from ggazzo/issues-2087

Clipboard [Firefox version < 50]
RocketChat · Mar 29, 2017 · c99e40b · c99e40b
2 parents 7a2e9f7 + 6bd33bb
commit c99e40b
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 4 deletions.
diff --git a/packages/rocketchat-ui-message/client/messageBox.coffee b/packages/rocketchat-ui-message/client/messageBox.coffee
@@ -118,6 +118,45 @@ Template.messageBox.helpers
 	showSandstorm: ->
 		return Meteor.settings.public.sandstorm && !Meteor.isCordova
 
+firefoxPasteUpload = (fn) ->
+	user = navigator.userAgent.match(/Firefox\/(\d+)\.\d/)
+	if !user or user[1] > 49
+		return fn
+	return (event, instance) ->
+		if (event.originalEvent.ctrlKey or event.originalEvent.metaKey) and (event.keyCode == 86)
+			textarea = instance.find("textarea")
+			selectionStart = textarea.selectionStart
+			selectionEnd = textarea.selectionEnd
+			contentEditableDiv = instance.find('#msg_contenteditable')
+			contentEditableDiv.focus()
+			Meteor.setTimeout ->
+				pastedImg = contentEditableDiv.querySelector 'img'
+				textareaContent = textarea.value
+				startContent = textareaContent.substring(0, selectionStart)
+				endContent = textareaContent.substring(selectionEnd)
+				restoreSelection = (pastedText) ->
+					textarea.value = startContent + pastedText + endContent
+					textarea.selectionStart = selectionStart + pastedText.length
+					textarea.selectionEnd = textarea.selectionStart
+				contentEditableDiv.innerHTML = '' if pastedImg
+				textarea.focus
+				return if (!pastedImg || contentEditableDiv.innerHTML.length > 0)
+					[].slice.call(contentEditableDiv.querySelectorAll("br")).forEach (el) ->
+						contentEditableDiv.replaceChild(new Text("\n") , el)
+						restoreSelection(contentEditableDiv.innerText)
+				imageSrc = pastedImg.getAttribute("src")
+				if imageSrc.match(/^data:image/)
+					fetch(imageSrc)
+					.then((img)->
+						return img.blob())
+					.then (blob)->
+						fileUpload [{
+							file: blob
+							name: 'Clipboard'
+						}]
+			, 150
+		fn?.apply @, arguments
+
 
 Template.messageBox.events
 	'click .join': (event) ->
@@ -159,7 +198,6 @@ Template.messageBox.events
 
 		if not e.originalEvent.clipboardData?
 			return
-
 		items = e.originalEvent.clipboardData.items
 		files = []
 		for item in items
@@ -174,8 +212,8 @@ Template.messageBox.events
 		else
 			instance.isMessageFieldEmpty.set(false)
 
-	'keydown .input-message': (event) ->
-		chatMessages[@_id].keydown(@_id, event, Template.instance())
+	'keydown .input-message': firefoxPasteUpload((event, instance) ->
+		chatMessages[@_id].keydown(@_id, event, Template.instance()))
 
 	'input .input-message': (event) ->
 		chatMessages[@_id].valueChanged(@_id, event, Template.instance())
@@ -320,4 +358,4 @@ Meteor.startup ->
 
 			navigator.geolocation.watchPosition success, error
 		else
-			RocketChat.Geolocation.set false
+			RocketChat.Geolocation.set false
diff --git a/packages/rocketchat-ui-message/client/messageBox.html b/packages/rocketchat-ui-message/client/messageBox.html
@@ -5,6 +5,7 @@
 			{{#if allowedToSend}}
 			<div class="message-input border-component-color">
 				<div class="input-message-container content-background-color">
+					<div id="msg_contenteditable" contenteditable="true" style="height: 0; width: 0; overflow: hidden"></div>
 					<textarea dir="auto" name="msg" maxlength="{{maxMessageLength}}" class="message-form-text input-message autogrow-short" placeholder="{{_ 'Message'}}"></textarea>
 
 					<div class="inner-left-toolbar">