From 59009c0d111f4aab0cc8c37f77ab7e8ca441de92 Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Wed, 12 Jun 2024 19:53:19 +0200 Subject: [PATCH 1/2] fix code blocks paste bug --- src/components/Composer/index.native.tsx | 6 +++++- src/components/Composer/index.tsx | 11 +++++++++-- src/hooks/useMarkdownStyle.ts | 4 +++- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx index 5e5f126da773..9e66c0b20c99 100644 --- a/src/components/Composer/index.native.tsx +++ b/src/components/Composer/index.native.tsx @@ -1,3 +1,4 @@ +import type {MarkdownStyle} from '@expensify/react-native-live-markdown'; import type {ForwardedRef} from 'react'; import React, {useCallback, useEffect, useMemo, useRef} from 'react'; import type {TextInput} from 'react-native'; @@ -13,6 +14,9 @@ import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullCompo import * as EmojiUtils from '@libs/EmojiUtils'; import type {ComposerProps} from './types'; +const excludeNoStyles: Array = []; +const excludeReportMentionStyle: Array = ['mentionReport']; + function Composer( { shouldClear = false, @@ -37,7 +41,7 @@ function Composer( const {isFocused, shouldResetFocus} = useResetComposerFocus(textInput); const textContainsOnlyEmojis = useMemo(() => EmojiUtils.containsOnlyEmojis(value ?? ''), [value]); const theme = useTheme(); - const markdownStyle = useMarkdownStyle(value, !isGroupPolicyReport ? ['mentionReport'] : []); + const markdownStyle = useMarkdownStyle(value, !isGroupPolicyReport ? excludeReportMentionStyle : excludeNoStyles); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index eae27440d175..2060f0c182aa 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -1,3 +1,4 @@ +import type {MarkdownStyle} from '@expensify/react-native-live-markdown'; import lodashDebounce from 'lodash/debounce'; import type {BaseSyntheticEvent, ForwardedRef} from 'react'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; @@ -46,6 +47,9 @@ const getNextChars = (inputString: string, cursorPosition: number): string => { return subString.substring(0, spaceIndex); }; +const excludeNoStyles: Array = []; +const excludeReportMentionStyle: Array = ['mentionReport']; + // Enable Markdown parsing. // On web we like to have the Text Input field always focused so the user can easily type a new chat function Composer( @@ -79,7 +83,7 @@ function Composer( const textContainsOnlyEmojis = useMemo(() => EmojiUtils.containsOnlyEmojis(value ?? ''), [value]); const theme = useTheme(); const styles = useThemeStyles(); - const markdownStyle = useMarkdownStyle(value, !isGroupPolicyReport ? ['mentionReport'] : []); + const markdownStyle = useMarkdownStyle(value, !isGroupPolicyReport ? excludeReportMentionStyle : excludeNoStyles); const StyleUtils = useStyleUtils(); const textRef = useRef(null); const textInput = useRef(null); @@ -165,7 +169,7 @@ function Composer( if (textInput.current !== event.target && !(isContenteditableDivFocused && !event.clipboardData?.files.length)) { const eventTarget = event.target as HTMLInputElement | HTMLTextAreaElement | null; - + console.log('%%%%%\n', 'i enter here'); // tu nie wchodzi // To make sure the composer does not capture paste events from other inputs, we check where the event originated // If it did originate in another input, we return early to prevent the composer from handling the paste const isTargetInput = eventTarget?.nodeName === 'INPUT' || eventTarget?.nodeName === 'TEXTAREA' || eventTarget?.contentEditable === 'true'; @@ -182,6 +186,8 @@ function Composer( const clipboardDataHtml = event.clipboardData?.getData(TEXT_HTML) ?? ''; + console.log('%%%%%\n', 'clipboardDataHtml', clipboardDataHtml); + // If paste contains files, then trigger file management if (event.clipboardData?.files.length && event.clipboardData.files.length > 0) { // Prevent the default so we do not post the file name into the text box @@ -222,6 +228,7 @@ function Composer( } } } + console.log('%%%%%\n', 'onPaste returns false'); return false; }, [onPasteFile, checkComposerVisibility], diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts index 77ad5ce816f5..e21e2a77268c 100644 --- a/src/hooks/useMarkdownStyle.ts +++ b/src/hooks/useMarkdownStyle.ts @@ -5,7 +5,9 @@ import FontUtils from '@styles/utils/FontUtils'; import variables from '@styles/variables'; import useTheme from './useTheme'; -function useMarkdownStyle(message: string | null = null, excludeStyles: Array = []): MarkdownStyle { +const defaultEmptyArray: Array = []; + +function useMarkdownStyle(message: string | null = null, excludeStyles: Array = defaultEmptyArray): MarkdownStyle { const theme = useTheme(); const emojiFontSize = containsOnlyEmojis(message ?? '') ? variables.fontSizeOnlyEmojis : variables.fontSizeNormal; From a521faf35d741e6c7b904e5359dca45398c0b228 Mon Sep 17 00:00:00 2001 From: Jakub Szymczak Date: Wed, 12 Jun 2024 20:02:39 +0200 Subject: [PATCH 2/2] delete console logs --- src/components/Composer/index.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 2060f0c182aa..5bd8aa9175d3 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -169,7 +169,6 @@ function Composer( if (textInput.current !== event.target && !(isContenteditableDivFocused && !event.clipboardData?.files.length)) { const eventTarget = event.target as HTMLInputElement | HTMLTextAreaElement | null; - console.log('%%%%%\n', 'i enter here'); // tu nie wchodzi // To make sure the composer does not capture paste events from other inputs, we check where the event originated // If it did originate in another input, we return early to prevent the composer from handling the paste const isTargetInput = eventTarget?.nodeName === 'INPUT' || eventTarget?.nodeName === 'TEXTAREA' || eventTarget?.contentEditable === 'true'; @@ -186,8 +185,6 @@ function Composer( const clipboardDataHtml = event.clipboardData?.getData(TEXT_HTML) ?? ''; - console.log('%%%%%\n', 'clipboardDataHtml', clipboardDataHtml); - // If paste contains files, then trigger file management if (event.clipboardData?.files.length && event.clipboardData.files.length > 0) { // Prevent the default so we do not post the file name into the text box @@ -228,7 +225,6 @@ function Composer( } } } - console.log('%%%%%\n', 'onPaste returns false'); return false; }, [onPasteFile, checkComposerVisibility],