Use grapheme-splitter instead of lodash for saving emoji from being ripped apart (#10976)

* Use grapheme-splitter instead of lodash for saving emoji from being ripped apart

* Move to a more appropriate place

* Add tests and improve types

src/utils/strings.ts

@@ -21,6 +21,7 @@ limitations under the License.
  * @param text the plaintext to put in the user's clipboard
  */
 import { logger } from "matrix-js-sdk/src/logger";
+import GraphemeSplitter from "grapheme-splitter";
 
 export async function copyPlaintext(text: string): Promise<boolean> {
     try {
@@ -83,3 +84,15 @@ export function copyNode(ref?: Element | null): boolean {
 export function getSelectedText(): string {
     return window.getSelection()!.toString();
 }
+
+/**
+ * Returns the first grapheme in the given string,
+ * especially useful for strings containing emoji, will not break compound emoji up.
+ * @param str string to parse
+ * @returns the first grapheme or an empty string if given an empty string
+ */
+export function getFirstGrapheme(str: string): string {
+    const splitter = new GraphemeSplitter();
+    const result = splitter.iterateGraphemes(str).next();
+    return result.done ? "" : result.value;
+}