Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Composer: mention tagging now works in middle of text (close #105) #139

Merged
merged 1 commit into from
Feb 2, 2023
Merged

Composer: mention tagging now works in middle of text (close #105) #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 84 additions & 0 deletions __tests__/lib/strings/mention-manip.test.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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