Detect facets when composer is opened with mention (#9625)

* highlight the initial mention

* fix mention initalisation on web

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

@@ -241,7 +241,7 @@ export function TextInput({
           }
         },
       },
-      content: generateJSON(richtext.text.toString(), extensions, {
+      content: generateJSON(richTextToHTML(richtext), extensions, {
         preserveWhitespace: 'full',
       }),
       autofocus: 'end',
@@ -382,6 +382,36 @@ export function TextInput({
   )
 }
 
+/**
+ * Helper function to initialise the editor with RichText, which expects HTML
+ *
+ * All the extensions are able to initialise themselves from plain text, *except*
+ * for the Mention extension - we need to manually convert it into a `<span>` element
+ *
+ * It also escapes HTML characters
+ */
+function richTextToHTML(richtext: RichText): string {
+  let html = ''
+
+  for (const segment of richtext.segments()) {
+    if (segment.mention) {
+      html += `<span data-type="mention" data-id="${escapeHTML(segment.mention.did)}"></span>`
+    } else {
+      html += escapeHTML(segment.text)
+    }
+  }
+
+  return html
+}
+
+function escapeHTML(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
 function editorJsonToText(
   json: JSONContent,
   isLastDocumentChild: boolean = false,