fix(line): truncate template title/altText on grapheme boundaries, not raw UTF-16

ly-wang19 · claude · ly-wang19 · commit af350dedcd7f · 2026-06-24T20:02:10.000+08:00
createConfirmTemplate/createButtonTemplate/createTemplateCarousel/createCarouselColumn/
createImageCarousel truncated title and altText with a raw `.slice(0, N)`, so an
emoji straddling a LINE field limit (e.g. a 40-char button title) was cut in half,
leaving a lone high surrogate that LINE renders as the replacement char or rejects.
Route those fields through the file's existing grapheme-safe truncateTemplateText
(already used for the text body) via a small truncateOptionalTemplateText wrapper.
Byte-identical for all-BMP input; only straddling-emoji truncation changes.

Co-Authored-By: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/extensions/line/src/message-cards.test.ts b/extensions/line/src/message-cards.test.ts
@@ -44,6 +44,16 @@ describe("createButtonTemplate", () => {
     expect((template.template as { title: string }).title.length).toBe(40);
   });
 
+  it("drops a surrogate-pair emoji from the title instead of splitting it", () => {
+    // 39 chars + an emoji land the truncation boundary inside the surrogate pair;
+    // a raw code-unit slice would keep only the lone high surrogate.
+    const template = createButtonTemplate(`${"x".repeat(39)}😀`, "Text", [messageAction("OK")]);
+    const title = (template.template as { title: string }).title;
+
+    expect(title).toBe("x".repeat(39));
+    expect(/[\uD800-\uDBFF](?![\uDC00-\uDFFF])/.test(title)).toBe(false);
+  });
+
   it("truncates text to 60 chars when no thumbnail is provided", () => {
     const longText = "x".repeat(100);
     const template = createButtonTemplate("Title", longText, [messageAction("OK")]);
diff --git a/extensions/line/src/template-messages.ts b/extensions/line/src/template-messages.ts
@@ -65,6 +65,10 @@ function truncateTemplateText(text: string, limit: number): string {
   return result;
 }
 
+function truncateOptionalTemplateText(value: string | undefined, limit: number): string | undefined {
+  return value === undefined ? undefined : truncateTemplateText(value, limit);
+}
+
 function formatProductCarouselText(description: string, price?: string): string {
   if (!price) {
     return description;
@@ -86,13 +90,13 @@ export function createConfirmTemplate(
 ): TemplateMessage {
   const template: ConfirmTemplate = {
     type: "confirm",
-    text: text.slice(0, 240), // LINE limit
+    text: truncateTemplateText(text, 240), // LINE limit
     actions: [confirmAction, cancelAction],
   };
 
   return {
     type: "template",
-    altText: altText?.slice(0, 400) ?? text.slice(0, 400),
+    altText: truncateOptionalTemplateText(altText, 400) ?? truncateTemplateText(text, 400),
     template,
   };
 }
@@ -120,7 +124,7 @@ export function createButtonTemplate(
   });
   const template: ButtonsTemplate = {
     type: "buttons",
-    title: title.slice(0, 40), // LINE limit
+    title: truncateTemplateText(title, 40), // LINE limit
     text: truncateTemplateText(text, textLimit),
     actions: actions.slice(0, 4), // LINE limit: max 4 actions
     thumbnailImageUrl: options?.thumbnailImageUrl,
@@ -132,7 +136,9 @@ export function createButtonTemplate(
 
   return {
     type: "template",
-    altText: options?.altText?.slice(0, 400) ?? `${title}: ${text}`.slice(0, 400),
+    altText:
+      truncateOptionalTemplateText(options?.altText, 400) ??
+      truncateTemplateText(`${title}: ${text}`, 400),
     template,
   };
 }
@@ -157,7 +163,7 @@ export function createTemplateCarousel(
 
   return {
     type: "template",
-    altText: options?.altText?.slice(0, 400) ?? "View carousel",
+    altText: truncateOptionalTemplateText(options?.altText, 400) ?? "View carousel",
     template,
   };
 }
@@ -179,7 +185,7 @@ export function createCarouselColumn(params: {
   // the buttons template already applies above.
   const textLimit = resolveTemplateTextLimit({ ...params, textOnlyLimit: 120 });
   return {
-    title: params.title?.slice(0, 40),
+    title: truncateOptionalTemplateText(params.title, 40),
     text: truncateTemplateText(params.text, textLimit),
     actions: params.actions.slice(0, 3), // LINE limit: max 3 actions per column
     thumbnailImageUrl: params.thumbnailImageUrl,
@@ -202,7 +208,7 @@ export function createImageCarousel(
 
   return {
     type: "template",
-    altText: altText?.slice(0, 400) ?? "View images",
+    altText: truncateOptionalTemplateText(altText, 400) ?? "View images",
     template,
   };
 }
