Skip to content

Commit

Permalink
Merge branch 'main' into @maksg/performance-fixes-ios
Browse files Browse the repository at this point in the history
  • Loading branch information
maksg committed Jun 7, 2024
2 parents 5e5985a + 945c704 commit c6cc8ff
Show file tree
Hide file tree
Showing 13 changed files with 380 additions and 244 deletions.
8 changes: 4 additions & 4 deletions example/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1111,12 +1111,12 @@ PODS:
- React-jsi (= 0.73.4)
- React-logger (= 0.73.4)
- React-perflogger (= 0.73.4)
- RNLiveMarkdown (0.1.54):
- RNLiveMarkdown (0.1.79):
- glog
- RCT-Folly (= 2022.05.16.00)
- React-Core
- RNLiveMarkdown/common (= 0.1.54)
- RNLiveMarkdown/common (0.1.54):
- RNLiveMarkdown/common (= 0.1.79)
- RNLiveMarkdown/common (0.1.79):
- glog
- RCT-Folly (= 2022.05.16.00)
- React-Core
Expand Down Expand Up @@ -1376,7 +1376,7 @@ SPEC CHECKSUMS:
React-runtimescheduler: ed48e5faac6751e66ee1261c4bd01643b436f112
React-utils: 6e5ad394416482ae21831050928ae27348f83487
ReactCommon: 840a955d37b7f3358554d819446bffcf624b2522
RNLiveMarkdown: 2f6f838a2089bd7337020a82800cb0c05c48c5d9
RNLiveMarkdown: a4ddf419a109cd3f916db22ee19f8b8293b4f7e4
SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
Yoga: 64cd2a583ead952b0315d5135bf39e053ae9be70

Expand Down
8 changes: 8 additions & 0 deletions ios/MarkdownTextInputDecoratorView.mm
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,14 @@ - (void)didMoveToWindow {
_textView = (RCTUITextView *)_backedTextInputView;
[_textView setMarkdownUtils:_markdownUtils];
NSLayoutManager *layoutManager = _textView.layoutManager; // switching to TextKit 1 compatibility mode

// Correct content height in TextKit 1 compatibility mode. (See https://github.com/Expensify/App/issues/41567)
// Consider removing this fix if it is no longer needed after migrating to TextKit 2.
CGSize contentSize = _textView.contentSize;
CGRect textBounds = [layoutManager usedRectForTextContainer:_textView.textContainer];
contentSize.height = textBounds.size.height + _textView.textContainerInset.top + _textView.textContainerInset.bottom;
[_textView setContentSize:contentSize];

layoutManager.allowsNonContiguousLayout = NO; // workaround for onScroll issue
object_setClass(layoutManager, [MarkdownLayoutManager class]);
[layoutManager setValue:_markdownUtils forKey:@"markdownUtils"];
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@expensify/react-native-live-markdown",
"version": "0.1.76",
"version": "0.1.82",
"description": "Drop-in replacement for React Native's TextInput component with Markdown formatting.",
"main": "lib/commonjs/index",
"module": "lib/module/index",
Expand Down
3 changes: 3 additions & 0 deletions parser/babel.config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["module:@react-native/babel-preset"]
}
10 changes: 4 additions & 6 deletions parser/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
// @ts-expect-error - to review how it's implemented in ExpensiMark
// eslint-disable-next-line import/no-unresolved
import {ExpensiMark} from 'expensify-common/lib/ExpensiMark';
import ExpensiMark from 'expensify-common/dist/ExpensiMark';
import _ from 'underscore';

type MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'emoji' | 'mention-here' | 'mention-user' | 'mention-report' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax';
Expand All @@ -14,7 +13,7 @@ type Token = ['TEXT' | 'HTML', string];
type StackItem = {tag: string; children: Array<StackItem | string>};

function parseMarkdownToHTML(markdown: string): string {
const parser = ExpensiMark;
const parser = new ExpensiMark();
const html = parser.replace(markdown, {
shouldKeepRawInput: true,
});
Expand Down Expand Up @@ -155,10 +154,9 @@ function parseTreeToTextAndRanges(tree: StackItem): [string, Range[]] {
appendSyntax('# ');
addChildrenWithStyle(node, 'h1');
} else if (node.tag.startsWith('<pre')) {
const content = _.unescape(node.tag.match(/data-code-raw="([^"]*)"/)![1]!); // always present

appendSyntax('```');
addChildrenWithStyle(content, 'pre');
const content = node.children.join('').replaceAll('&#32;', ' ');
addChildrenWithStyle(`\n${content}`, 'pre');
appendSyntax('```');
} else if (node.tag.startsWith('<a href="')) {
const rawHref = node.tag.match(/href="([^"]*)"/)![1]!; // always present
Expand Down
11 changes: 6 additions & 5 deletions parser/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,23 @@
"main": "index.js",
"scripts": {
"test": "jest",
"build": "esbuild index.ts --bundle --minify --outfile=react-native-live-markdown-parser.js",
"run": "node react-native-live-markdown-parser.js",
"postinstall": "patch-package"
"build": "esbuild index.ts --bundle --outfile=build/index.esbuild.js && babel build/index.esbuild.js --out-file build/index.babel.js && esbuild build/index.babel.js --bundle --minify --outfile=react-native-live-markdown-parser.js && rm -rf build",
"run": "node react-native-live-markdown-parser.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.24.7",
"@babel/core": "^7.24.7",
"@react-native/babel-preset": "0.73.21",
"@types/underscore": "^1.11.15",
"esbuild": "0.19.4",
"esbuild-plugin-tsc": "^0.4.0",
"jest": "^29.7.0",
"typescript": "^5.3.3"
},
"dependencies": {
"expensify-common": "Expensify/expensify-common#a018512b1e0fce4d4b5a61c00ca826b8887007ad",
"patch-package": "^8.0.0",
"expensify-common": "2.0.10",
"underscore": "^1.13.6"
}
}
178 changes: 0 additions & 178 deletions parser/patches/expensify-common+1.0.0.patch

This file was deleted.

63 changes: 33 additions & 30 deletions parser/react-native-live-markdown-parser.js

Large diffs are not rendered by default.

16 changes: 12 additions & 4 deletions src/MarkdownTextInput.web.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {StyleSheet} from 'react-native';
import * as ParseUtils from './web/parserUtils';
import * as CursorUtils from './web/cursorUtils';
import * as StyleUtils from './styleUtils';
import * as BrowserUtils from './web/browserUtils';
import type * as MarkdownTextInputDecoratorViewNativeComponent from './MarkdownTextInputDecoratorViewNativeComponent';
import './web/MarkdownTextInput.css';
import InputHistory from './web/InputHistory';
Expand Down Expand Up @@ -336,8 +337,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
return;
}
const changedText = e.target.innerText;

if (compositionRef.current) {
if (compositionRef.current && !BrowserUtils.isMobile) {
updateTextColor(divRef.current, changedText);
compositionRef.current = false;
return;
Expand All @@ -363,6 +363,12 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
default:
text = parseText(divRef.current, changedText, processedMarkdownStyle).text;
}

const selectionAfterTextChange = CursorUtils.getCurrentCursorPosition(divRef.current);
if (selectionAfterTextChange) {
contentSelection.current = selectionAfterTextChange;
}

if (pasteRef?.current) {
pasteRef.current = false;
updateSelection(e);
Expand Down Expand Up @@ -559,7 +565,8 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
}

const text = processedValue !== undefined ? processedValue : '';
parseText(divRef.current, text, processedMarkdownStyle, text.length);

parseText(divRef.current, text, processedMarkdownStyle, contentSelection.current?.end);
updateTextColor(divRef.current, value);
},
[multiline, processedMarkdownStyle, processedValue],
Expand All @@ -585,7 +592,8 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
if (autoFocus) {
divRef.current.focus();
}
}, [autoFocus]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

useEffect(() => {
// update content size when the input styles change
Expand Down
Loading

0 comments on commit c6cc8ff

Please sign in to comment.