From a8001f500a22db47ca8b391e794a580e82262cf4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Mon, 5 Feb 2024 17:39:25 +0100 Subject: [PATCH 1/5] add live markdown preview web implementation to NewDot --- package-lock.json | 6 +++--- package.json | 2 +- src/components/Composer/index.tsx | 9 ++++++--- .../ComposerWithSuggestions/ComposerWithSuggestions.js | 2 +- 4 files changed, 11 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index dea6f963b989..01532c5dad1d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "license": "MIT", "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#c316611781f19815caebfed5540e0faf2a274785", + "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#58e189923bbf1d0b95c4cdd3d090a97fc7a754e1", "@expo/metro-runtime": "~3.1.1", "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-getcanonicallocales": "^2.2.0", @@ -3352,8 +3352,8 @@ }, "node_modules/@expensify/react-native-live-markdown": { "version": "0.1.0", - "resolved": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#c316611781f19815caebfed5540e0faf2a274785", - "integrity": "sha512-yF3oaBhqWQonl12LPELYLsgfmqCsGg2bu15g/h8XzVX3f/nzfPtrWE/ax2lWEIpIjk4/+aEu/VGNKLnlehjTxQ==", + "resolved": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#58e189923bbf1d0b95c4cdd3d090a97fc7a754e1", + "integrity": "sha512-SKyRZHq9NgLCqaGELOVfNpsoTBiC7AjS7JYvuM+m19bkKM5oL+wrdFwgLT8lpG5AXa+MUlac5Fzc2BcKtkrKRg==", "license": "MIT", "workspaces": [ "example" diff --git a/package.json b/package.json index e928ef59bb60..88f368e39646 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ }, "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#c316611781f19815caebfed5540e0faf2a274785", + "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#58e189923bbf1d0b95c4cdd3d090a97fc7a754e1", "@expo/metro-runtime": "~3.1.1", "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-getcanonicallocales": "^2.2.0", diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 516de55c73ba..6c8e9185cf90 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -1,3 +1,4 @@ +import {MarkdownTextInput} from '@expensify/react-native-live-markdown'; import type {BaseSyntheticEvent, ForwardedRef} from 'react'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {flushSync} from 'react-dom'; @@ -5,10 +6,10 @@ import {flushSync} from 'react-dom'; import type {DimensionValue, NativeSyntheticEvent, Text as RNText, TextInput, TextInputKeyPressEventData, TextInputSelectionChangeEventData} from 'react-native'; import {StyleSheet, View} from 'react-native'; import type {AnimatedTextInputRef} from '@components/RNTextInput'; -import RNTextInput from '@components/RNTextInput'; import Text from '@components/Text'; import useHtmlPaste from '@hooks/useHtmlPaste'; import useIsScrollBarVisible from '@hooks/useIsScrollBarVisible'; +import useMarkdownStyle from '@hooks/useMarkdownStyle'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -80,6 +81,7 @@ function Composer( const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); + const markdownStyle = useMarkdownStyle(); const {windowWidth} = useWindowDimensions(); const textRef = useRef(null); const textInput = useRef(null); @@ -327,13 +329,14 @@ function Composer( return ( <> - (textInput.current = el)} + ref={(el) => (textInput.current = el as AnimatedTextInputRef)} selection={selection} style={inputStyleMemo} + markdownStyle={markdownStyle} value={value} defaultValue={defaultValue} autoFocus={autoFocus} diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index 4b5a54a6c428..20f290d18764 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js @@ -483,7 +483,7 @@ function ComposerWithSuggestions({ } // if we're typing on another input/text area, do not focus - if (['INPUT', 'TEXTAREA'].includes(e.target.nodeName)) { + if (['INPUT', 'TEXTAREA', 'DIV'].includes(e.target.nodeName)) { return; } From 6f1dd13d231e79cd487e6226d3ebc48da542d6f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Tue, 6 Feb 2024 11:14:48 +0100 Subject: [PATCH 2/5] fix copying and pasting into markdown inputs --- package-lock.json | 6 +++--- package.json | 2 +- src/components/Composer/index.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 01532c5dad1d..45423725a79d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "license": "MIT", "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#58e189923bbf1d0b95c4cdd3d090a97fc7a754e1", + "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#c698ea795cd5ff9b5c40508e05a03ab5e09eb050", "@expo/metro-runtime": "~3.1.1", "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-getcanonicallocales": "^2.2.0", @@ -3352,8 +3352,8 @@ }, "node_modules/@expensify/react-native-live-markdown": { "version": "0.1.0", - "resolved": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#58e189923bbf1d0b95c4cdd3d090a97fc7a754e1", - "integrity": "sha512-SKyRZHq9NgLCqaGELOVfNpsoTBiC7AjS7JYvuM+m19bkKM5oL+wrdFwgLT8lpG5AXa+MUlac5Fzc2BcKtkrKRg==", + "resolved": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#c698ea795cd5ff9b5c40508e05a03ab5e09eb050", + "integrity": "sha512-GA77tHG21dc8TmmmOhL3t2A0uIGgrkQjtQPG6HaSsBdLlWCdesNb+BIMQfvmBbyGNF3EAIxv9/DE7ualnY7Omg==", "license": "MIT", "workspaces": [ "example" diff --git a/package.json b/package.json index 88f368e39646..53ed4a3be736 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ }, "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#58e189923bbf1d0b95c4cdd3d090a97fc7a754e1", + "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#c698ea795cd5ff9b5c40508e05a03ab5e09eb050", "@expo/metro-runtime": "~3.1.1", "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-getcanonicallocales": "^2.2.0", diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 6c8e9185cf90..a5c9e8952905 100755 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -170,7 +170,7 @@ function Composer( // 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'; + const isTargetInput = ['INPUT', 'TEXTAREA', 'SPAN'].includes(eventTarget?.nodeName ?? '') || eventTarget?.contentEditable === 'true'; if (isTargetInput) { return true; } From 849ed38059a3ca29ffc58b7485a8ead61754d18c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Tue, 6 Feb 2024 11:39:40 +0100 Subject: [PATCH 3/5] fix cursor positioning when selecting mention --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 45423725a79d..f46a60caed8c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "license": "MIT", "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#c698ea795cd5ff9b5c40508e05a03ab5e09eb050", + "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#567e18436201b8cfbacee05f19f55618cc148958", "@expo/metro-runtime": "~3.1.1", "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-getcanonicallocales": "^2.2.0", @@ -3352,8 +3352,8 @@ }, "node_modules/@expensify/react-native-live-markdown": { "version": "0.1.0", - "resolved": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#c698ea795cd5ff9b5c40508e05a03ab5e09eb050", - "integrity": "sha512-GA77tHG21dc8TmmmOhL3t2A0uIGgrkQjtQPG6HaSsBdLlWCdesNb+BIMQfvmBbyGNF3EAIxv9/DE7ualnY7Omg==", + "resolved": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#567e18436201b8cfbacee05f19f55618cc148958", + "integrity": "sha512-yvQITVJX8R/A5Kua/gV3pttRYZ7kAyIXvyG0EpItv13RnSOOPRnwgoemlQ7oy9aSmYBD5X0J+oRTibG+a6Y3Dw==", "license": "MIT", "workspaces": [ "example" diff --git a/package.json b/package.json index 53ed4a3be736..8c61bfc7085b 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ }, "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#c698ea795cd5ff9b5c40508e05a03ab5e09eb050", + "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#567e18436201b8cfbacee05f19f55618cc148958", "@expo/metro-runtime": "~3.1.1", "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-getcanonicallocales": "^2.2.0", From f6136b2a91f57b5cce98ceb65508d5cd5907db84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Wed, 7 Feb 2024 18:24:47 +0100 Subject: [PATCH 4/5] fix input behavior with large amount of text --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 70a78bb87531..73af5c4b102a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "license": "MIT", "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#567e18436201b8cfbacee05f19f55618cc148958", + "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#bbde776e14ef1582cc9503d4050af98320a11e3a", "@expo/metro-runtime": "~3.1.1", "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-getcanonicallocales": "^2.2.0", @@ -3352,8 +3352,8 @@ }, "node_modules/@expensify/react-native-live-markdown": { "version": "0.1.0", - "resolved": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#567e18436201b8cfbacee05f19f55618cc148958", - "integrity": "sha512-yvQITVJX8R/A5Kua/gV3pttRYZ7kAyIXvyG0EpItv13RnSOOPRnwgoemlQ7oy9aSmYBD5X0J+oRTibG+a6Y3Dw==", + "resolved": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#bbde776e14ef1582cc9503d4050af98320a11e3a", + "integrity": "sha512-3gEpB2xZV6ImHEtC1kTD+IfU/BFaxKa5RrNWbYJqk5gFEAD35e1qyYzmydt4y0lBqfseew7/Z7rvhsm6zB3pwQ==", "license": "MIT", "workspaces": [ "example" diff --git a/package.json b/package.json index 5e5c313b9fa3..d408f3072b75 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ }, "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#567e18436201b8cfbacee05f19f55618cc148958", + "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#bbde776e14ef1582cc9503d4050af98320a11e3a", "@expo/metro-runtime": "~3.1.1", "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-getcanonicallocales": "^2.2.0", From 3b933ad2a2d9bf3a897db94408863b9079cb2859 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Wed, 7 Feb 2024 19:20:52 +0100 Subject: [PATCH 5/5] fix styling errors --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 73af5c4b102a..562766921d47 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "license": "MIT", "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#bbde776e14ef1582cc9503d4050af98320a11e3a", + "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#77f85a5265043c6100f1fa65edd58901724faf08", "@expo/metro-runtime": "~3.1.1", "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-getcanonicallocales": "^2.2.0", @@ -3352,8 +3352,8 @@ }, "node_modules/@expensify/react-native-live-markdown": { "version": "0.1.0", - "resolved": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#bbde776e14ef1582cc9503d4050af98320a11e3a", - "integrity": "sha512-3gEpB2xZV6ImHEtC1kTD+IfU/BFaxKa5RrNWbYJqk5gFEAD35e1qyYzmydt4y0lBqfseew7/Z7rvhsm6zB3pwQ==", + "resolved": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#77f85a5265043c6100f1fa65edd58901724faf08", + "integrity": "sha512-EpXjQ+JBR3pRuYuT5iFzQw45hrCcr5ZmX/lji4i3Un/BOQ14JbTkQjjwo4hYX3EdOvfrAUSJs0ZVqeCEIMo3YQ==", "license": "MIT", "workspaces": [ "example" diff --git a/package.json b/package.json index d408f3072b75..b357041b6635 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ }, "dependencies": { "@dotlottie/react-player": "^1.6.3", - "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#bbde776e14ef1582cc9503d4050af98320a11e3a", + "@expensify/react-native-live-markdown": "git+ssh://git@github.com/Expensify/react-native-live-markdown.git#77f85a5265043c6100f1fa65edd58901724faf08", "@expo/metro-runtime": "~3.1.1", "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-getcanonicallocales": "^2.2.0",