Skip to content

Commit

Permalink
Composer: mention tagging now works in middle of text (close #105)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pfrazee
pfrazee committed Feb 2, 2023
1 parent b14cf93 commit 163363c
Show file tree
Hide file tree
Showing 3 changed files with 144 additions and 19 deletions.
84 changes: 84 additions & 0 deletions __tests__/lib/strings/mention-manip.test.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import {
getMentionAt,
insertMentionAt,
} from '../../../src/lib/strings/mention-manip'

describe('getMentionAt', () => {
type Case = [string, number, string | undefined]
const cases: Case[] = [
['hello @alice goodbye', 0, undefined],
['hello @alice goodbye', 1, undefined],
['hello @alice goodbye', 2, undefined],
['hello @alice goodbye', 3, undefined],
['hello @alice goodbye', 4, undefined],
['hello @alice goodbye', 5, undefined],
['hello @alice goodbye', 6, 'alice'],
['hello @alice goodbye', 7, 'alice'],
['hello @alice goodbye', 8, 'alice'],
['hello @alice goodbye', 9, 'alice'],
['hello @alice goodbye', 10, 'alice'],
['hello @alice goodbye', 11, 'alice'],
['hello @alice goodbye', 12, 'alice'],
['hello @alice goodbye', 13, undefined],
['hello @alice goodbye', 14, undefined],
['@alice', 0, 'alice'],
['@alice hello', 0, 'alice'],
['@alice hello', 1, 'alice'],
['@alice hello', 2, 'alice'],
['@alice hello', 3, 'alice'],
['@alice hello', 4, 'alice'],
['@alice hello', 5, 'alice'],
['@alice hello', 6, 'alice'],
['@alice hello', 7, undefined],
['alice@alice', 0, undefined],
['alice@alice', 6, undefined],
]

it.each(cases)(
'given input string %p and cursor position %p, returns %p',
(str, cursorPos, expected) => {
const output = getMentionAt(str, cursorPos)
expect(output?.value).toEqual(expected)
},
)
})

describe('insertMentionAt', () => {
type Case = [string, number, string]
const cases: Case[] = [
['hello @alice goodbye', 0, 'hello @alice goodbye'],
['hello @alice goodbye', 1, 'hello @alice goodbye'],
['hello @alice goodbye', 2, 'hello @alice goodbye'],
['hello @alice goodbye', 3, 'hello @alice goodbye'],
['hello @alice goodbye', 4, 'hello @alice goodbye'],
['hello @alice goodbye', 5, 'hello @alice goodbye'],
['hello @alice goodbye', 6, 'hello @alice.com goodbye'],
['hello @alice goodbye', 7, 'hello @alice.com goodbye'],
['hello @alice goodbye', 8, 'hello @alice.com goodbye'],
['hello @alice goodbye', 9, 'hello @alice.com goodbye'],
['hello @alice goodbye', 10, 'hello @alice.com goodbye'],
['hello @alice goodbye', 11, 'hello @alice.com goodbye'],
['hello @alice goodbye', 12, 'hello @alice.com goodbye'],
['hello @alice goodbye', 13, 'hello @alice goodbye'],
['hello @alice goodbye', 14, 'hello @alice goodbye'],
['@alice', 0, '@alice.com '],
['@alice hello', 0, '@alice.com hello'],
['@alice hello', 1, '@alice.com hello'],
['@alice hello', 2, '@alice.com hello'],
['@alice hello', 3, '@alice.com hello'],
['@alice hello', 4, '@alice.com hello'],
['@alice hello', 5, '@alice.com hello'],
['@alice hello', 6, '@alice.com hello'],
['@alice hello', 7, '@alice hello'],
['alice@alice', 0, 'alice@alice'],
['alice@alice', 6, 'alice@alice'],
]

it.each(cases)(
'given input string %p and cursor position %p, returns %p',
(str, cursorPos, expected) => {
const output = insertMentionAt(str, cursorPos, 'alice.com')
expect(output).toEqual(expected)
},
)
})
37 changes: 37 additions & 0 deletions src/lib/strings/mention-manip.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
interface FoundMention {
value: string
index: number
}

export function getMentionAt(
text: string,
cursorPos: number,
): FoundMention | undefined {
let re = /(^|\s)@([a-z0-9.]*)/gi
let match
while ((match = re.exec(text))) {
const spaceOffset = match[1].length
const index = match.index + spaceOffset
if (
cursorPos >= index &&
cursorPos <= index + match[0].length - spaceOffset
) {
return {value: match[2], index}
}
}
return undefined
}

export function insertMentionAt(
text: string,
cursorPos: number,
mention: string,
) {
const target = getMentionAt(text, cursorPos)
if (target) {
return `${text.slice(0, target.index)}@${mention} ${text.slice(
target.index + target.value.length + 1, // add 1 to include the "@"
)}`
}
return text
}
42 changes: 23 additions & 19 deletions src/view/com/composer/ComposePost.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@ import {observer} from 'mobx-react-lite'
import {
ActivityIndicator,
KeyboardAvoidingView,
NativeSyntheticEvent,
Platform,
SafeAreaView,
ScrollView,
StyleSheet,
TextInputSelectionChangeEventData,
TouchableOpacity,
TouchableWithoutFeedback,
View,
Expand Down Expand Up @@ -42,6 +44,7 @@ import {
import {getLinkMeta} from '../../../lib/link-meta'
import {downloadAndResize} from '../../../lib/images'
import {UserLocalPhotosModel} from '../../../state/models/user-local-photos'
import {getMentionAt, insertMentionAt} from '../../../lib/strings/mention-manip'
import {PhotoCarouselPicker, cropPhoto} from './PhotoCarouselPicker'
import {SelectedPhoto} from './SelectedPhoto'
import {usePalette} from '../../lib/hooks/usePalette'
Expand All @@ -50,6 +53,11 @@ const MAX_TEXT_LENGTH = 256
const DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH
const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}

interface Selection {
start: number
end: number
}

export const ComposePost = observer(function ComposePost({
replyTo,
imagesOpen,
Expand All @@ -65,6 +73,7 @@ export const ComposePost = observer(function ComposePost({
const pal = usePalette('default')
const store = useStores()
const textInput = useRef<PasteInputRef>(null)
const textInputSelection = useRef<Selection>({start: 0, end: 0})
const [isProcessing, setIsProcessing] = useState(false)
const [processingState, setProcessingState] = useState('')
const [error, setError] = useState('')
Expand Down Expand Up @@ -198,10 +207,10 @@ export const ComposePost = observer(function ComposePost({
const onChangeText = (newText: string) => {
setText(newText)

const prefix = extractTextAutocompletePrefix(newText)
if (typeof prefix === 'string') {
const prefix = getMentionAt(newText, textInputSelection.current?.start || 0)
if (prefix) {
autocompleteView.setActive(true)
autocompleteView.setPrefix(prefix)
autocompleteView.setPrefix(prefix.value)
} else {
autocompleteView.setActive(false)
}
Expand All @@ -228,6 +237,16 @@ export const ComposePost = observer(function ComposePost({
const finalImgPath = await cropPhoto(imgFile.uri)
onSelectPhotos([...selectedPhotos, finalImgPath])
}
const onSelectionChange = (
evt: NativeSyntheticEvent<TextInputSelectionChangeEventData>,
) => {
// NOTE we track the input selection using a ref to avoid excessive renders -prf
textInputSelection.current = evt.nativeEvent.selection
}
const onSelectAutocompleteItem = (item: string) => {
setText(insertMentionAt(text, textInputSelection.current?.start || 0, item))
autocompleteView.setActive(false)
}
const onPressCancel = () => hackfixOnClose()
const onPressPublish = async () => {
if (isProcessing) {
Expand Down Expand Up @@ -265,10 +284,6 @@ export const ComposePost = observer(function ComposePost({
hackfixOnClose()
Toast.show(`Your ${replyTo ? 'reply' : 'post'} has been published`)
}
const onSelectAutocompleteItem = (item: string) => {
setText(replaceTextAutocompletePrefix(text, item))
autocompleteView.setActive(false)
}

const canPost = text.length <= MAX_TEXT_LENGTH
const progressColor =
Expand Down Expand Up @@ -399,6 +414,7 @@ export const ComposePost = observer(function ComposePost({
scrollEnabled
onChangeText={(str: string) => onChangeText(str)}
onPaste={onPaste}
onSelectionChange={onSelectionChange}
placeholder={selectTextInputPlaceholder}
placeholderTextColor={pal.colors.textLight}
style={[
Expand Down Expand Up @@ -494,18 +510,6 @@ export const ComposePost = observer(function ComposePost({
)
})

const atPrefixRegex = /@([a-z0-9.]*)$/i
function extractTextAutocompletePrefix(text: string) {
const match = atPrefixRegex.exec(text)
if (match) {
return match[1]
}
return undefined
}
function replaceTextAutocompletePrefix(text: string, item: string) {
return text.replace(atPrefixRegex, `@${item} `)
}

const styles = StyleSheet.create({
outer: {
flexDirection: 'column',
Expand Down

0 comments on commit 163363c

Please sign in to comment.