Skip to content

Commit 0dab685

Browse files
hejsztynxhejsztynx
committed
docs: code review suggestions
1 parent 05bb967 commit 0dab685

4 files changed

Lines changed: 81 additions & 84 deletions

File tree

‎docs/docs/guides/custom-context-menu.md‎

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ import type {
5454
EnrichedTextInputInstance,
5555
OnChangeSelectionEvent,
5656
} from 'react-native-enriched-html';
57-
import { useMemo, useRef, useState } from 'react';
57+
import { useRef, useState } from 'react';
5858
import { View, StyleSheet, Alert } from 'react-native';
5959

6060
export default function App() {
@@ -65,42 +65,39 @@ export default function App() {
6565

6666
const hasRangedSelection = !!selection && selection.start !== selection.end;
6767

68-
const contextMenuItems: ContextMenuItem[] = useMemo(
69-
() => [
70-
{
71-
// `text` and `selection` describe what the user long-pressed.
72-
text: 'Show selection',
73-
onPress: ({ text, selection: range }) => {
74-
Alert.alert(
75-
'Selection',
76-
`"${text}" at [${range.start}, ${range.end}]`
77-
);
78-
},
68+
const contextMenuItems: ContextMenuItem[] = () => [
69+
{
70+
// `text` and `selection` describe what the user long-pressed.
71+
text: 'Show selection',
72+
onPress: ({ text, selection: range }) => {
73+
Alert.alert(
74+
'Selection',
75+
`"${text}" at [${range.start}, ${range.end}]`
76+
);
7977
},
80-
{
81-
// Menu items can call any editor command through the ref.
82-
text: 'Bold',
83-
onPress: () => {
84-
ref.current?.toggleBold();
85-
},
78+
},
79+
{
80+
// Menu items can call any editor command through the ref.
81+
text: 'Bold',
82+
onPress: () => {
83+
ref.current?.toggleBold();
8684
},
87-
{
88-
// Only useful with a ranged selection, so hide it otherwise; when
89-
// shown, `selection` lets you target the exact range you were given.
90-
text: 'Link to Software Mansion',
91-
visible: hasRangedSelection,
92-
onPress: ({ text, selection: range }) => {
93-
ref.current?.setLink(
94-
range.start,
95-
range.end,
96-
text,
97-
'https://swmansion.com'
98-
);
99-
},
85+
},
86+
{
87+
// Only useful with a ranged selection, so hide it otherwise; when
88+
// shown, `selection` lets you target the exact range you were given.
89+
text: 'Link to Software Mansion',
90+
visible: hasRangedSelection,
91+
onPress: ({ text, selection: range }) => {
92+
ref.current?.setLink(
93+
range.start,
94+
range.end,
95+
text,
96+
'https://swmansion.com'
97+
);
10098
},
101-
],
102-
[hasRangedSelection]
103-
);
99+
},
100+
];
104101

105102
return (
106103
<View style={styles.container}>

‎docs/docs/guides/emojis.mdx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,3 @@ const htmlStyle = {
7777
Type `:` followed by a name - `:fire`, `:heart` - then tap a suggestion. The shortcode is replaced with a single emoji that you can place anywhere in the text.
7878

7979
<InteractiveExample src={EmojiEditorSrc} component={EmojiEditor} />
80-
81-
:::info
82-
83-
If you want to see the whole code used to build this example, you can find it by switching the tab from `Preview` to `Code`.
84-
85-
:::

‎docs/src/examples/EmojiEditor.tsx‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ type Emoji = { shortcode: string; char: string };
1313
// `onPress` fires - so `setMention` would do nothing. Preventing the default
1414
// mousedown keeps focus in the editor. It's a no-op on native, where tapping a
1515
// Pressable never steals focus.
16-
const keepEditorFocused: any =
16+
const keepEditorFocused: { onMouseDown: (e: React.MouseEvent) => void } | null =
1717
Platform.OS === 'web'
1818
? { onMouseDown: (e: { preventDefault(): void }) => e.preventDefault() }
1919
: null;
@@ -25,17 +25,6 @@ const EMOJIS: Emoji[] = [
2525
{ shortcode: 'rocket', char: '🚀' },
2626
];
2727

28-
// The emoji glyph is the whole mention, so keep it visually plain.
29-
const htmlStyle: HtmlStyle = {
30-
mention: {
31-
':': {
32-
color: '#232736',
33-
backgroundColor: 'transparent',
34-
textDecorationLine: 'none',
35-
},
36-
},
37-
};
38-
3928
export default function App() {
4029
const ref = useRef<EnrichedTextInputInstance>(null);
4130
const [open, setOpen] = useState(false);
@@ -48,11 +37,21 @@ export default function App() {
4837
return EMOJIS.filter(emoji => emoji.shortcode.startsWith(q));
4938
}, [open, query]);
5039

40+
const openPicker = () => {
41+
setOpen(true);
42+
setQuery('');
43+
};
44+
5145
const closePicker = () => {
5246
setOpen(false);
5347
setQuery('');
5448
};
5549

50+
const updateQuery = ({ text }: OnChangeMentionEvent) => {
51+
setOpen(true);
52+
setQuery(text);
53+
};
54+
5655
const pick = (emoji: Emoji) => {
5756
// Replaces the ":smile" the user typed with the emoji glyph.
5857
ref.current?.setMention(':', emoji.char, {
@@ -69,14 +68,8 @@ export default function App() {
6968
htmlStyle={htmlStyle}
7069
placeholder="Type ':' then a name, e.g. :smile"
7170
mentionIndicators={[':']}
72-
onStartMention={() => {
73-
setOpen(true);
74-
setQuery('');
75-
}}
76-
onChangeMention={({ text }: OnChangeMentionEvent) => {
77-
setOpen(true);
78-
setQuery(text);
79-
}}
71+
onStartMention={openPicker}
72+
onChangeMention={updateQuery}
8073
onEndMention={closePicker}
8174
/>
8275
{suggestions.length > 0 && (
@@ -97,6 +90,17 @@ export default function App() {
9790
);
9891
}
9992

93+
// The emoji glyph is the whole mention, so keep it visually plain.
94+
const htmlStyle: HtmlStyle = {
95+
mention: {
96+
':': {
97+
color: '#232736',
98+
backgroundColor: 'transparent',
99+
textDecorationLine: 'none',
100+
},
101+
},
102+
};
103+
100104
const styles = StyleSheet.create({
101105
container: { gap: 8 },
102106
input: {

‎docs/src/examples/MentionOnlyEditor.tsx‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ type Suggestion = { id: string; name: string };
1313
// `onPress` fires - so `setMention` would do nothing. Preventing the default
1414
// mousedown keeps focus in the editor. It's a no-op on native, where tapping a
1515
// Pressable never steals focus.
16-
const keepEditorFocused: any =
16+
const keepEditorFocused: { onMouseDown: (e: React.MouseEvent) => void } | null =
1717
Platform.OS === 'web'
1818
? { onMouseDown: (e: { preventDefault(): void }) => e.preventDefault() }
1919
: null;
@@ -32,33 +32,17 @@ const CHANNELS: Suggestion[] = [
3232
{ id: 'c4', name: 'announcements' },
3333
];
3434

35-
// Each mention kind is styled by its indicator.
36-
const htmlStyle: HtmlStyle = {
37-
mention: {
38-
'@': {
39-
color: '#2b7a4b',
40-
backgroundColor: '#d8f3e3',
41-
textDecorationLine: 'none',
42-
},
43-
'#': {
44-
color: '#2b5f9e',
45-
backgroundColor: '#d8e6f9',
46-
textDecorationLine: 'none',
47-
},
48-
},
49-
};
50-
5135
export default function App() {
5236
const ref = useRef<EnrichedTextInputInstance>(null);
53-
// The indicator of the mention being edited ('@' | '#'), or null when idle.
5437
const [indicator, setIndicator] = useState<string | null>(null);
5538
const [query, setQuery] = useState('');
5639

5740
const suggestions = useMemo(() => {
5841
if (indicator === null) return [];
5942
const source = indicator === '#' ? CHANNELS : USERS;
60-
const q = query.toLowerCase();
61-
return source.filter(item => item.name.toLowerCase().startsWith(q));
43+
return source.filter(item =>
44+
item.name.toLowerCase().startsWith(query.toLowerCase())
45+
);
6246
}, [indicator, query]);
6347

6448
const openPicker = (nextIndicator: string) => {
@@ -80,6 +64,11 @@ export default function App() {
8064
closePicker();
8165
};
8266

67+
const updateQuery = ({ indicator: ind, text }: OnChangeMentionEvent) => {
68+
setIndicator(ind);
69+
setQuery(text);
70+
};
71+
8372
return (
8473
<View style={styles.container}>
8574
<EnrichedTextInput
@@ -89,10 +78,7 @@ export default function App() {
8978
placeholder="Type '@' for people or '#' for channels..."
9079
mentionIndicators={['@', '#']}
9180
onStartMention={openPicker}
92-
onChangeMention={({ indicator: ind, text }: OnChangeMentionEvent) => {
93-
setIndicator(ind);
94-
setQuery(text);
95-
}}
81+
onChangeMention={updateQuery}
9682
onEndMention={closePicker}
9783
/>
9884
{suggestions.length > 0 && (
@@ -115,6 +101,22 @@ export default function App() {
115101
);
116102
}
117103

104+
// Each mention kind is styled by its indicator.
105+
const htmlStyle: HtmlStyle = {
106+
mention: {
107+
'@': {
108+
color: '#2b7a4b',
109+
backgroundColor: '#d8f3e3',
110+
textDecorationLine: 'none',
111+
},
112+
'#': {
113+
color: '#2b5f9e',
114+
backgroundColor: '#d8e6f9',
115+
textDecorationLine: 'none',
116+
},
117+
},
118+
};
119+
118120
const styles = StyleSheet.create({
119121
container: { gap: 8 },
120122
input: {

0 commit comments

Comments
 (0)