Story - add caption

ts/util/grapheme.ts

@@ -1,7 +1,7 @@
 // Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import { map, size } from './iterables';
+import { map, size, take, join } from './iterables';
 
 export function getGraphemes(str: string): Iterable<string> {
   const segments = new Intl.Segmenter().segment(str);
@@ -13,6 +13,25 @@ export function count(str: string): number {
   return size(segments);
 }
 
+/** @return truncated string and size (after any truncation) */
+export function truncateAndSize(
+  str: string,
+  toSize?: number
+): [string, number] {
+  const segments = new Intl.Segmenter().segment(str);
+  const originalSize = size(segments);
+  if (toSize === undefined || originalSize <= toSize) {
+    return [str, originalSize];
+  }
+  return [
+    join(
+      map(take(segments, toSize), s => s.segment),
+      ''
+    ),
+    toSize,
+  ];
+}
+
 export function isSingleGrapheme(str: string): boolean {
   if (str === '') {
     return false;

ts/util/lint/exceptions.json

@@ -15,6 +15,27 @@
     "updated": "2018-09-18T19:19:27.699Z",
     "reasonDetail": "Part of runtime library for C++ transpiled code"
   },
+  {
+    "rule": "React-useRef",
+    "path": "ts/components/AddCaptionModal.tsx",
+    "line": "  const scrollerRef = React.useRef<HTMLDivElement>(null);",
+    "reasonCategory": "usageTrusted",
+    "updated": "2022-10-03T16:06:12.837Z"
+  },
+  {
+    "rule": "React-useRef",
+    "path": "ts/components/CompositionInput.tsx",
+    "line": "  const scrollerRefInner = React.useRef<HTMLDivElement>(null);",
+    "reasonCategory": "usageTrusted",
+    "updated": "2022-10-03T16:06:12.837Z"
+  },
+  {
+    "rule": "React-useRef",
+    "path": "ts/components/CompositionTextArea.tsx",
+    "line": "  const inputApiRef = React.useRef<InputApi | undefined>();",
+    "reasonCategory": "usageTrusted",
+    "updated": "2022-10-03T16:06:12.837Z"
+  },
   {
     "rule": "jQuery-append(",
     "path": "components/mp3lameencoder/lib/Mp3LameEncoder.js",
@@ -8986,13 +9007,6 @@
     "reasonCategory": "usageTrusted",
     "updated": "2021-07-30T16:57:33.618Z"
   },
-  {
-    "rule": "React-useRef",
-    "path": "ts/components/CompositionInput.tsx",
-    "line": "  const scrollerRef = React.useRef<HTMLDivElement>(null);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-07-30T16:57:33.618Z"
-  },
   {
     "rule": "React-useRef",
     "path": "ts/components/CompositionInput.tsx",
@@ -9050,13 +9064,6 @@
     "reasonCategory": "usageTrusted",
     "updated": "2021-07-30T16:57:33.618Z"
   },
-  {
-    "rule": "React-useRef",
-    "path": "ts/components/ForwardMessageModal.tsx",
-    "line": "  const inputApiRef = React.useRef<InputApi | undefined>();",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-07-30T16:57:33.618Z"
-  },
   {
     "rule": "React-useRef",
     "path": "ts/components/GradientDial.tsx",