diff --git a/webapp/channels/src/components/advanced_create_comment/advanced_create_comment.tsx b/webapp/channels/src/components/advanced_create_comment/advanced_create_comment.tsx index 00c2736531..f80da92306 100644 --- a/webapp/channels/src/components/advanced_create_comment/advanced_create_comment.tsx +++ b/webapp/channels/src/components/advanced_create_comment/advanced_create_comment.tsx @@ -227,6 +227,8 @@ class AdvancedCreateComment extends React.PureComponent { private isDraftSubmitting = false; private isDraftEdited = false; + private isNonFormattedPaste = false; + private timeoutId: number | null = null; private readonly textboxRef: React.RefObject; private readonly fileUploadRef: React.RefObject; @@ -306,6 +308,9 @@ class AdvancedCreateComment extends React.PureComponent { document.removeEventListener('keydown', this.focusTextboxIfNecessary); window.removeEventListener('beforeunload', this.saveDraftWithShow); this.saveDraftOnUnmount(); + if (this.timeoutId !== null) { + clearTimeout(this.timeoutId); + } } componentDidUpdate(prevProps: Props, prevState: State) { @@ -438,7 +443,7 @@ class AdvancedCreateComment extends React.PureComponent { const hasSelection = !isNil(selectionStart) && !isNil(selectionEnd) && selectionStart < selectionEnd; const hasTextUrl = isTextUrl(clipboardData); - const hasHTMLLinks = hasHtmlLink(clipboardData); + const hasHTMLLinks = !this.isNonFormattedPaste && hasHtmlLink(clipboardData); const htmlTable = getHtmlTable(clipboardData); const shouldApplyLinkMarkdown = hasSelection && hasTextUrl; const shouldApplyGithubCodeBlock = htmlTable && isGitHubCodeBlock(htmlTable.className); @@ -838,6 +843,16 @@ class AdvancedCreateComment extends React.PureComponent { const ctrlAltCombo = Keyboard.cmdOrCtrlPressed(e, true) && e.altKey; const shiftAltCombo = !Keyboard.cmdOrCtrlPressed(e) && e.shiftKey && e.altKey; + // fix for FF not capturing the paste without formatting event when using ctrl|cmd + shift + v + if (e.key === KeyCodes.V[0] && ctrlOrMetaKeyPressed) { + if (e.shiftKey) { + this.isNonFormattedPaste = true; + this.timeoutId = window.setTimeout(() => { + this.isNonFormattedPaste = false; + }, 250); + } + } + // listen for line break key combo and insert new line character if (Utils.isUnhandledLineBreakKeyCombo(e)) { this.setState({ diff --git a/webapp/channels/src/components/advanced_create_post/advanced_create_post.tsx b/webapp/channels/src/components/advanced_create_post/advanced_create_post.tsx index 0039f35f4b..a795c30b63 100644 --- a/webapp/channels/src/components/advanced_create_post/advanced_create_post.tsx +++ b/webapp/channels/src/components/advanced_create_post/advanced_create_post.tsx @@ -266,6 +266,8 @@ class AdvancedCreatePost extends React.PureComponent { private lastOrientation?: string; private saveDraftFrame?: number | null; private isDraftSubmitting = false; + private isNonFormattedPaste = false; + private timeoutId: number | null = null; private topDiv: React.RefObject; private textboxRef: React.RefObject; @@ -355,6 +357,9 @@ class AdvancedCreatePost extends React.PureComponent { window.removeEventListener('beforeunload', this.unloadHandler); this.removeOrientationListeners(); this.saveDraftWithShow(); + if (this.timeoutId !== null) { + clearTimeout(this.timeoutId); + } } getChannelMemberCountsByGroup = () => { @@ -929,7 +934,7 @@ class AdvancedCreatePost extends React.PureComponent { const hasSelection = !isNil(selectionStart) && !isNil(selectionEnd) && selectionStart < selectionEnd; const hasTextUrl = isTextUrl(clipboardData); - const hasHTMLLinks = hasHtmlLink(clipboardData); + const hasHTMLLinks = !this.isNonFormattedPaste && hasHtmlLink(clipboardData); const htmlTable = getHtmlTable(clipboardData); const shouldApplyLinkMarkdown = hasSelection && hasTextUrl; const shouldApplyGithubCodeBlock = htmlTable && isGitHubCodeBlock(htmlTable.className); @@ -1134,8 +1139,18 @@ class AdvancedCreatePost extends React.PureComponent { handleKeyDown = (e: React.KeyboardEvent) => { const messageIsEmpty = this.state.message.length === 0; const draftMessageIsEmpty = this.props.draft.message.length === 0; - const ctrlOrMetaKeyPressed = e.ctrlKey || e.metaKey; + + // fix for FF not capturing the paste without formatting event when using ctrl|cmd + shift + v + if (e.key === KeyCodes.V[0] && ctrlOrMetaKeyPressed) { + if (e.shiftKey) { + this.isNonFormattedPaste = true; + this.timeoutId = window.setTimeout(() => { + this.isNonFormattedPaste = false; + }, 250); + } + } + const ctrlEnterKeyCombo = (this.props.ctrlSend || this.props.codeBlockOnCtrlEnter) && Keyboard.isKeyPressed(e, KeyCodes.ENTER) && ctrlOrMetaKeyPressed;