From f50c53c740f3f5e2970d706463d026f09b0964f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= Date: Mon, 5 Feb 2024 16:42:15 +0100 Subject: [PATCH 01/11] add web implementation --- example/ios/Podfile.lock | 4 +- example/src/App.tsx | 24 +- package.json | 7 +- parser/__tests__/index.test.js | 36 +- parser/index.ts | 15 +- parser/react-native-live-markdown-parser.js | 14 +- src/MarkdownTextInput.tsx | 78 +-- src/MarkdownTextInput.web.tsx | 490 +++++++++++++++- src/__tests__/index.test.tsx | 265 ++++++++- src/react-native-web.d.ts | 1 + src/styleUtils.ts | 70 +++ src/web/InputHistory.ts | 90 +++ src/web/MarkdownTextInput.css | 24 + src/web/cursorUtils.ts | 87 +++ src/web/parserUtils.ts | 208 +++++++ tsconfig.json | 2 +- yarn.lock | 585 +++++++++++++++++++- 17 files changed, 1867 insertions(+), 133 deletions(-) create mode 100644 src/react-native-web.d.ts create mode 100644 src/styleUtils.ts create mode 100644 src/web/InputHistory.ts create mode 100644 src/web/MarkdownTextInput.css create mode 100644 src/web/cursorUtils.ts create mode 100644 src/web/parserUtils.ts diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index ef33d93c..0acf1c15 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -659,7 +659,7 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/yoga" SPEC CHECKSUMS: - boost: 57d2868c099736d80fcd648bf211b4431e51a558 + boost: 7dcd2de282d72e344012f7d6564d024930a6a440 CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54 FBLazyVector: dc178b8748748c036ef9493a5d59d6d1f91a36ce @@ -692,7 +692,7 @@ SPEC CHECKSUMS: React-jsiexecutor: 5a169b1dd1abad06bed40ab7e1aca883c657d865 React-jsinspector: 54205b269da20c51417e0fc02c4cde9f29a4bf1a React-logger: f42d2f2bc4cbb5d19d7c0ce84b8741b1e54e88c8 - react-native-live-markdown: 5722e2203fc2fab86dcb50fdaef92ca8b6c0fdec + react-native-live-markdown: 5df7530c7b987508b8634cee2c09092657e47021 React-NativeModulesApple: 9f72feb8a04020b32417f768a7e1e40eec91fef4 React-perflogger: cb433f318c6667060fc1f62e26eb58d6eb30a627 React-RCTActionSheet: 0af3f8ac067e8a1dde902810b7ad169d0a0ec31e diff --git a/example/src/App.tsx b/example/src/App.tsx index 6d14c907..39aae5be 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -53,8 +53,15 @@ function getReactNativeVersion() { return `${major}.${minor}.${patch}`; } +function getRandomColor() { + return `#${Math.floor(Math.random() * 16777215) + .toString(16) + .padStart(6, '0')}`; +} + export default function App() { const [value, setValue] = React.useState(DEFAULT_TEXT); + const [markdownStyle, setMarkdownStyle] = React.useState({}); // TODO: use MarkdownTextInput ref instead of TextInput ref const ref = React.useRef(null); @@ -89,6 +96,8 @@ export default function App() { onChangeText={setValue} style={styles.input} ref={ref} + markdownStyle={markdownStyle} + placeholder="Type here..." /> {/* TextInput singleline