[APP-834] Allow @ing someone in post directly from profile (#1241)

* setup `initMention` for mobile

* setup creating post with profile tagged on web

src/view/com/composer/Composer.tsx

@@ -45,6 +45,7 @@ import {Gallery} from './photos/Gallery'
 import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
 import {LabelsBtn} from './labels/LabelsBtn'
 import {SelectLangBtn} from './select-language/SelectLangBtn'
+import {insertMentionAt} from 'lib/strings/mention-manip'
 
 type Props = ComposerOpts & {
   onClose: () => void
@@ -55,6 +56,7 @@ export const ComposePost = observer(function ComposePost({
   onPost,
   onClose,
   quote: initQuote,
+  mention: initMention,
 }: Props) {
   const {track} = useAnalytics()
   const pal = usePalette('default')
@@ -64,7 +66,17 @@ export const ComposePost = observer(function ComposePost({
   const [isProcessing, setIsProcessing] = useState(false)
   const [processingState, setProcessingState] = useState('')
   const [error, setError] = useState('')
-  const [richtext, setRichText] = useState(new RichText({text: ''}))
+  const [richtext, setRichText] = useState(
+    new RichText({
+      text: initMention
+        ? insertMentionAt(
+            `@${initMention}`,
+            initMention.length + 1,
+            `${initMention}`,
+          ) // insert mention if passed in
+        : '',
+    }),
+  )
   const graphemeLength = useMemo(() => {
     return shortenLinks(richtext).graphemeLength
   }, [richtext])

src/view/com/composer/text-input/TextInput.web.tsx

@@ -114,7 +114,10 @@ export const TextInput = React.forwardRef(
             }
           },
         },
-        content: richtext.text.toString(),
+        content: textToEditorJson(richtext.text.toString()),
+        onFocus: ({editor: e}) => {
+          e.chain().focus().setTextSelection(richtext.text.length).run() // focus to the end of the text
+        },
         autofocus: true,
         editable: true,
         injectCSS: true,
@@ -166,6 +169,61 @@ function editorJsonToText(json: JSONContent): string {
   return text
 }
 
+function textToEditorJson(text: string): JSONContent {
+  if (text === '' || text.length === 0) {
+    return {
+      text: '',
+    }
+  }
+
+  const lines = text.split('\n')
+  const docContent: JSONContent[] = []
+
+  for (const line of lines) {
+    if (line.trim() === '') {
+      continue // skip empty lines
+    }
+
+    const paragraphContent: JSONContent[] = []
+    let position = 0
+
+    while (position < line.length) {
+      if (line[position] === '@') {
+        // Handle mentions
+        let endPosition = position + 1
+        while (endPosition < line.length && /\S/.test(line[endPosition])) {
+          endPosition++
+        }
+        const mentionId = line.substring(position + 1, endPosition)
+        paragraphContent.push({
+          type: 'mention',
+          attrs: {id: mentionId},
+        })
+        position = endPosition
+      } else {
+        // Handle regular text
+        let endPosition = line.indexOf('@', position)
+        if (endPosition === -1) endPosition = line.length
+        paragraphContent.push({
+          type: 'text',
+          text: line.substring(position, endPosition),
+        })
+        position = endPosition
+      }
+    }
+
+    docContent.push({
+      type: 'paragraph',
+      content: paragraphContent,
+    })
+  }
+
+  return {
+    type: 'doc',
+    content: docContent,
+  }
+}
+
 function editorJsonToLinks(json: JSONContent): string[] {
   let links: string[] = []
   if (json.content?.length) {