@adatechnology/conversations-ui 0.2.1 → 0.3.0

package/dist/preview/index.js

@@ -16,8 +16,8 @@ import {
   mediaTypeOf,
   simulatorPanelLabelsOf,
   toConversationSimulatorClient
-} from "../chunk-NHQDQJL2.js";
-import "../chunk-WCBDXZ3X.js";
+} from "../chunk-L4OE4ORQ.js";
+import "../chunk-PJNR6UMN.js";
 
 // src/preview/previewStore.ts
 var GLOBAL_CHANNEL = "global";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

package/src/InteractiveMessage.tsx

@@ -60,33 +60,31 @@ export function InteractiveMessage({ payload, onSelect, labels, className }: Int
           mostra os asteriscos literais, e formatá-los aqui deixaria o simulador mais bonito que o
           aparelho, que é o tipo de divergência que só aparece com o cliente na frente. */}
       {payload.header?.text ? (
-        <p className={cn('text-sm font-semibold text-gray-900 dark:text-gray-100', FORMATTING_CLASSES)}>
+        <div className={cn('text-sm font-semibold text-gray-900 dark:text-gray-100', FORMATTING_CLASSES)}>
           {parseWhatsAppFormatting(payload.header.text)}
-        </p>
+        </div>
       ) : null}
 
       {payload.body?.text ? (
-        <p
-          className={cn(
-            'whitespace-pre-wrap break-words text-sm text-gray-900 dark:text-gray-100',
-            FORMATTING_CLASSES,
-          )}
+        <div
+          className={cn('whitespace-pre-wrap break-words text-sm text-gray-900 dark:text-gray-100', FORMATTING_CLASSES)}
         >
           {parseWhatsAppFormatting(payload.body.text)}
-        </p>
+        </div>
       ) : null}
 
       {payload.footer?.text ? (
-        <p className={cn('text-xs text-gray-500 dark:text-gray-400', FORMATTING_CLASSES)}>
+        <div className={cn('text-xs text-gray-500 dark:text-gray-400', FORMATTING_CLASSES)}>
           {parseWhatsAppFormatting(payload.footer.text)}
-        </p>
+        </div>
       ) : null}
 
       {buttons.length > 0 ? (
         <div className="mt-1 flex flex-col gap-1 border-t border-gray-200 pt-1 dark:border-gray-700">
           {buttons.map((button) => (
             <button
-              data-cv-tooltip={button.title} aria-label={button.title}
+              data-cv-tooltip={button.title}
+              aria-label={button.title}
               key={button.id}
               type="button"
               disabled={!isInteractable}
@@ -102,7 +100,8 @@ export function InteractiveMessage({ payload, onSelect, labels, className }: Int
       {hasRows ? (
         <div className="mt-1 border-t border-gray-200 pt-1 dark:border-gray-700">
           <button
-            data-cv-tooltip={payload.action?.button ?? openListLabel} aria-label={payload.action?.button ?? openListLabel}
+            data-cv-tooltip={payload.action?.button ?? openListLabel}
+            aria-label={payload.action?.button ?? openListLabel}
             type="button"
             onClick={() => setIsListOpen((open) => !open)}
             aria-expanded={isListOpen}
@@ -122,7 +121,8 @@ export function InteractiveMessage({ payload, onSelect, labels, className }: Int
                   ) : null}
                   {(section.rows ?? []).map((row) => (
                     <button
-                      data-cv-tooltip={row.title} aria-label={row.title}
+                      data-cv-tooltip={row.title}
+                      aria-label={row.title}
                       key={row.id}
                       type="button"
                       disabled={!isInteractable}

package/src/MessageText.tsx

@@ -30,9 +30,7 @@ export function MessageText({ message }: MessageTextProps) {
       onClick={handleCopy}
       className="text-[14.2px] leading-[19px] whitespace-pre-wrap break-words select-all [&_strong]:font-bold [&_em]:italic [&_del]:line-through"
     >
-      <span>
-        {parseWhatsAppFormatting(message.content ?? '')}
-      </span>
+      <div>{parseWhatsAppFormatting(message.content ?? '')}</div>
       {copied && (
         <span className="absolute top-0 right-0 -translate-y-full bg-[#3b4a54] text-white text-[11px] px-1.5 py-0.5 rounded shadow-lg">
           Copiado!

package/src/blockFormattingNesting.test.tsx

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { InteractiveMessage } from './InteractiveMessage'
+import { MessageText } from './MessageText'
+
+const BLOCK_MESSAGE = 'Opções:\n- *um*\n1. dois\n> três'
+
+/** `<ul>`/`<div>`/`<blockquote>` dentro de `<span>` ou `<p>` é HTML inválido — o navegador reordena. */
+function hasBlockInsideInline(markup: string): boolean {
+  return /<(span|p)\b[^>]*>(?:(?!<\/\1>).)*<(ul|ol|div|blockquote)\b/s.test(markup)
+}
+
+describe('blocos da formatação do WhatsApp nos invólucros de mensagem', () => {
+  it('MessageText não põe lista nem citação dentro de elemento inline', () => {
+    const markup = renderToStaticMarkup(
+      <MessageText
+        message={{
+          id: 'm1',
+          type: 'text',
+          direction: 'inbound',
+          sender: 'customer',
+          timestamp: '2026-09-15T12:00:00.000Z',
+          content: BLOCK_MESSAGE,
+        }}
+      />,
+    )
+    expect(markup).toContain('<ul')
+    expect(markup).toContain('<blockquote')
+    expect(hasBlockInsideInline(markup)).toBe(false)
+  })
+
+  it('InteractiveMessage também não, no cabeçalho, corpo e rodapé', () => {
+    const markup = renderToStaticMarkup(
+      <InteractiveMessage
+        payload={{
+          type: 'button',
+          header: { text: BLOCK_MESSAGE },
+          body: { text: BLOCK_MESSAGE },
+          footer: { text: BLOCK_MESSAGE },
+        }}
+      />,
+    )
+    expect(markup).toContain('<ol')
+    expect(hasBlockInsideInline(markup)).toBe(false)
+  })
+})

package/src/flows/FlowWhatsAppPreview.tsx

@@ -1,5 +1,6 @@
 import { List } from 'lucide-react'
 import { parseWhatsAppFormatting } from '../lib/whatsapp-formatting'
+import { WhatsAppMessagePreview } from '../lib/WhatsAppMessagePreview'
 import { DEFAULT_FLOW_EDITOR_LABELS, type FlowEditorLabels } from './labels'
 import { rendersAsButtons, WHATSAPP_LIMITS } from './flowGraph'
 
@@ -26,53 +27,50 @@ export function FlowWhatsAppPreview({
   const hasOptions = (options?.length ?? 0) > 0
 
   return (
-    <div className="rounded-xl bg-[#e5ddd5] dark:bg-gray-900 p-3 space-y-1.5">
-      <div className="max-w-[85%]">
-        <div className="rounded-lg rounded-tl-none bg-white dark:bg-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 shadow-sm whitespace-pre-wrap break-words">
-          {body ? (
-            parseWhatsAppFormatting(body)
-          ) : (
-            <span className="italic text-gray-400">{labels.previewEmptyBody}</span>
+    <WhatsAppMessagePreview
+      belowBubble={
+        <>
+          {hasOptions && usesButtons && (
+            <div className="mt-1 space-y-1">
+              {options!.map(([id, label]) => (
+                <div
+                  key={id}
+                  className="rounded-lg bg-white dark:bg-gray-700 py-1.5 text-center text-sm font-medium text-cyan-600 dark:text-cyan-400 shadow-sm"
+                >
+                  {label || <span className="italic text-gray-400">{labels.previewEmptyOption}</span>}
+                </div>
+              ))}
+            </div>
           )}
+
           {hasOptions && !usesButtons && (
-            <div className="mt-2 -mx-3 -mb-2 border-t border-gray-100 dark:border-gray-600">
-              <div className="flex items-center justify-center gap-1.5 py-2 text-sm font-medium text-cyan-600 dark:text-cyan-400">
-                <List size={15} /> {labels.previewListButton}
-              </div>
+            <div className="mt-1.5 rounded-lg bg-white dark:bg-gray-700 shadow-sm divide-y divide-gray-100 dark:divide-gray-600 overflow-hidden">
+              {options!.slice(0, WHATSAPP_LIMITS.MAX_LIST_ROWS).map(([id, label]) => (
+                <div key={id} className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-800 dark:text-gray-100">
+                  <span className="h-3.5 w-3.5 rounded-full border border-gray-300 dark:border-gray-500 shrink-0" />
+                  {label || <span className="italic text-gray-400">{labels.previewEmptyOption}</span>}
+                </div>
+              ))}
             </div>
           )}
-        </div>
-
-        {hasOptions && usesButtons && (
-          <div className="mt-1 space-y-1">
-            {options!.map(([id, label]) => (
-              <div
-                key={id}
-                className="rounded-lg bg-white dark:bg-gray-700 py-1.5 text-center text-sm font-medium text-cyan-600 dark:text-cyan-400 shadow-sm"
-              >
-                {label || <span className="italic text-gray-400">{labels.previewEmptyOption}</span>}
-              </div>
-            ))}
+        </>
+      }
+      footer={
+        hasOptions && (
+          <p className="text-[11px] text-gray-500 dark:text-gray-400 px-1">
+            {usesButtons ? labels.previewModeButtons : labels.previewModeList}
+          </p>
+        )
+      }
+    >
+      {body ? parseWhatsAppFormatting(body) : <span className="italic text-gray-400">{labels.previewEmptyBody}</span>}
+      {hasOptions && !usesButtons && (
+        <div className="mt-2 -mx-3 -mb-2 border-t border-gray-100 dark:border-gray-600">
+          <div className="flex items-center justify-center gap-1.5 py-2 text-sm font-medium text-cyan-600 dark:text-cyan-400">
+            <List size={15} /> {labels.previewListButton}
           </div>
-        )}
-
-        {hasOptions && !usesButtons && (
-          <div className="mt-1.5 rounded-lg bg-white dark:bg-gray-700 shadow-sm divide-y divide-gray-100 dark:divide-gray-600 overflow-hidden">
-            {options!.slice(0, WHATSAPP_LIMITS.MAX_LIST_ROWS).map(([id, label]) => (
-              <div key={id} className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-800 dark:text-gray-100">
-                <span className="h-3.5 w-3.5 rounded-full border border-gray-300 dark:border-gray-500 shrink-0" />
-                {label || <span className="italic text-gray-400">{labels.previewEmptyOption}</span>}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {hasOptions && (
-        <p className="text-[11px] text-gray-500 dark:text-gray-400 px-1">
-          {usesButtons ? labels.previewModeButtons : labels.previewModeList}
-        </p>
+        </div>
       )}
-    </div>
+    </WhatsAppMessagePreview>
   )
 }

package/src/index.ts

@@ -174,6 +174,9 @@ export { useConversationRealtime, useGlobalRealtime } from './hooks/useConversat
 export { useConversationActions, useInboxActions } from './hooks/useConversationActions'
 
 export { parseWhatsAppFormatting, waToHTML, htmlToWA, waToHTMLInline } from './lib/whatsapp-formatting'
+export { WhatsAppMessagePreview } from './lib/WhatsAppMessagePreview'
+export type { WhatsAppMessagePreviewProps } from './lib/WhatsAppMessagePreview'
+export { WHATSAPP_MARKER_BY_ACTION } from './lib/composer-formatting'
 export { formatPhone, phoneInitials } from './lib/phone'
 // `formatDateTime` e `isSameDay` já eram usados pelas bolhas e pelo divisor de data; exportá-los
 // evita que cada host mantenha a própria cópia e acabe com timeline e transcript divergindo.

package/src/lib/WhatsAppMessagePreview.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2026 Ada Technology. MIT License.
+ */
+
+import type { ReactNode } from 'react'
+
+import { cn } from './cn'
+
+export interface WhatsAppMessagePreviewProps {
+  /** Conteúdo dentro do balão (texto já formatado, anexos, botão de lista). */
+  readonly children: ReactNode
+  /** Abaixo do balão, ainda na coluna dele — botões de resposta, linhas de lista. */
+  readonly belowBubble?: ReactNode
+  /** Rodapé fora da coluna do balão, sobre o fundo. */
+  readonly footer?: ReactNode
+  readonly className?: string
+}
+
+/** Balão recebido sobre o fundo do WhatsApp — o único estilo de pré-visualização do pacote. */
+export function WhatsAppMessagePreview({ children, belowBubble, footer, className }: WhatsAppMessagePreviewProps) {
+  return (
+    <div className={cn('rounded-xl bg-[#e5ddd5] dark:bg-gray-900 p-3 space-y-1.5', className)}>
+      <div className="max-w-[85%]">
+        <div className="rounded-lg rounded-tl-none bg-white dark:bg-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 shadow-sm whitespace-pre-wrap break-words">
+          {children}
+        </div>
+        {belowBubble}
+      </div>
+      {footer}
+    </div>
+  )
+}

package/src/lib/composer-formatting.ts

@@ -22,6 +22,14 @@ export const FORMATTING_ACTION = {
 } as const
 export type FormattingAction = (typeof FORMATTING_ACTION)[keyof typeof FORMATTING_ACTION]
 
+/** Notação do WhatsApp de cada ação — a mesma que `parseWhatsAppFormatting` reconhece. */
+export const WHATSAPP_MARKER_BY_ACTION = {
+  [FORMATTING_ACTION.BOLD]: '*',
+  [FORMATTING_ACTION.ITALIC]: '_',
+  [FORMATTING_ACTION.STRIKETHROUGH]: '~',
+  [FORMATTING_ACTION.MONOSPACE]: '```',
+} as const satisfies Record<FormattingAction, string>
+
 /** Monoespaçado fica de fora: não existe comando nativo, o campo trata à mão. */
 const EXEC_COMMAND_BY_ACTION = {
   [FORMATTING_ACTION.BOLD]: 'bold',

package/src/lib/whatsapp-formatting.test.tsx

@@ -30,8 +30,71 @@ describe('parseWhatsAppFormatting com marcador fechado', () => {
   })
 
   it('mantém negrito, itálico e tachado', () => {
-    expect(render('*a* _b_ ~c~')).toBe(
-      '<strong>a</strong><span> </span><em>b</em><span> </span><del>c</del>',
+    expect(render('*a* _b_ ~c~')).toBe('<strong>a</strong><span> </span><em>b</em><span> </span><del>c</del>')
+  })
+})
+
+describe('parseWhatsAppFormatting com quebras de linha', () => {
+  it('preserva quebra simples e linha em branco no texto sem bloco', () => {
+    expect(render('a\nb')).toBe('<span>a\nb</span>')
+    expect(render('a\n\nb')).toBe('<span>a\n\nb</span>')
+  })
+
+  it('não deixa o marcador atravessar a quebra de linha', () => {
+    expect(render('*a\nb*')).not.toContain('<strong>')
+    expect(render('_a\nb_')).not.toContain('<em>')
+    expect(render('~a\nb~')).not.toContain('<del>')
+    expect(render('`a\nb`')).not.toContain('<code')
+  })
+
+  it('continua formatando em cada linha', () => {
+    expect(render('*a*\n_b_')).toBe('<strong>a</strong><span>\n</span><em>b</em>')
+  })
+})
+
+describe('parseWhatsAppFormatting com blocos por linha', () => {
+  it('lista com * e - vira ul, com inline dentro', () => {
+    const markup = render('* *um*\n- dois')
+    expect(markup).toMatch(/^<ul[^>]*><li><strong>um<\/strong><\/li><li><span>dois<\/span><\/li><\/ul>$/)
+  })
+
+  it('lista numerada mantém o número digitado', () => {
+    const markup = render('1. a\n3. b')
+    expect(markup).toMatch(/^<ol[^>]*><li value="1"><span>a<\/span><\/li><li value="3"><span>b<\/span><\/li><\/ol>$/)
+  })
+
+  it('citação vira blockquote, uma linha por div', () => {
+    expect(render('> oi\n> _tchau_')).toMatch(
+      /^<blockquote[^>]*><div><span>oi<\/span><\/div><div><em>tchau<\/em><\/div><\/blockquote>$/,
+    )
+  })
+
+  it('preserva texto e linhas em branco em volta dos blocos', () => {
+    const markup = render('Olá\n\n- a\n\nTchau')
+    expect(markup).toBe(
+      '<div><span>Olá\n</span>\n</div><ul class="list-disc pl-5"><li><span>a</span></li></ul><div><span>\nTchau</span></div>',
+    )
+  })
+
+  it('asterisco sem espaço no início é negrito, não lista', () => {
+    expect(render('*oi*')).toBe('<strong>oi</strong>')
+  })
+
+  it('com bloco de código de várias linhas, fica só no inline', () => {
+    expect(render('- a\n```x\ny```')).not.toContain('<ul')
+  })
+})
+
+describe('parseWhatsAppFormatting — paridade com o WhatsApp em prosa', () => {
+  it('linha "- Oi" vira lista e "> x" vira citação, como no aparelho', () => {
+    expect(render('- Oi')).toContain('<ul')
+    expect(render('> x')).toContain('<blockquote')
+  })
+
+  it('texto, linha em branco, lista, linha em branco, texto mantém as duas linhas em branco', () => {
+    const markup = render('a\n\n- b\n\nc')
+    expect(markup).toBe(
+      '<div><span>a\n</span>\n</div><ul class="list-disc pl-5"><li><span>b</span></li></ul><div><span>\nc</span></div>',
     )
   })
 })

package/src/lib/whatsapp-formatting.tsx

@@ -39,7 +39,7 @@ function tokenize(text: string): FormatToken[] {
       continue
     }
     // Check for inline code
-    const inlineMatch = remaining.slice(i).match(/^`([^`]+)`/)
+    const inlineMatch = remaining.slice(i).match(/^`([^`\n]+)`/)
     if (inlineMatch && inlineMatch.index === 0) {
       if (buffer) {
         tokens.push(...parseInlineTokens(buffer))
@@ -66,19 +66,20 @@ function parseInlineTokens(text: string): FormatToken[] {
   let remaining = text
 
   while (remaining.length > 0) {
-    const boldMatch = remaining.match(/^\*([^*]+)\*/)
+    // Os marcadores não atravessam quebra de linha — o WhatsApp deixa `*a\nb*` literal.
+    const boldMatch = remaining.match(/^\*([^*\n]+)\*/)
     if (boldMatch) {
       result.push({ type: 'bold', content: boldMatch[1] })
       remaining = remaining.slice(boldMatch[0].length)
       continue
     }
-    const italicMatch = remaining.match(/^_([^_]+)_/)
+    const italicMatch = remaining.match(/^_([^_\n]+)_/)
     if (italicMatch) {
       result.push({ type: 'italic', content: italicMatch[1] })
       remaining = remaining.slice(italicMatch[0].length)
       continue
     }
-    const strikeMatch = remaining.match(/^~([^~]+)~/)
+    const strikeMatch = remaining.match(/^~([^~\n]+)~/)
     if (strikeMatch) {
       result.push({ type: 'strikethrough', content: strikeMatch[1] })
       remaining = remaining.slice(strikeMatch[0].length)
@@ -105,9 +106,95 @@ function parseInlineTokens(text: string): FormatToken[] {
   return result
 }
 
+const BULLETED_LINE = /^[*-] (.*)$/
+const NUMBERED_LINE = /^(\d+)\. (.*)$/
+const QUOTE_LINE = /^> (.*)$/
+
+type BlockKind = 'plain' | 'bulleted' | 'numbered' | 'quote'
+
+interface BlockGroup {
+  kind: BlockKind
+  lines: string[]
+}
+
+function blockKindOf(line: string): BlockKind {
+  if (BULLETED_LINE.test(line)) return 'bulleted'
+  if (NUMBERED_LINE.test(line)) return 'numbered'
+  if (QUOTE_LINE.test(line)) return 'quote'
+  return 'plain'
+}
+
+function groupLines(lines: string[]): BlockGroup[] {
+  const groups: BlockGroup[] = []
+  for (const line of lines) {
+    const kind = blockKindOf(line)
+    const last = groups[groups.length - 1]
+    if (last && last.kind === kind) last.lines.push(line)
+    else groups.push({ kind, lines: [line] })
+  }
+  return groups
+}
+
+function renderBlockGroup(group: BlockGroup, key: number): ReactNode {
+  if (group.kind === 'bulleted') {
+    return (
+      <ul key={key} className="list-disc pl-5">
+        {group.lines.map((line, index) => (
+          <li key={index}>{renderTokens(tokenize(line.replace(BULLETED_LINE, '$1')))}</li>
+        ))}
+      </ul>
+    )
+  }
+  if (group.kind === 'numbered') {
+    return (
+      <ol key={key} className="list-decimal pl-6">
+        {group.lines.map((line, index) => {
+          const [, number, content] = NUMBERED_LINE.exec(line) ?? []
+          return (
+            <li key={index} value={Number(number)}>
+              {renderTokens(tokenize(content ?? ''))}
+            </li>
+          )
+        })}
+      </ol>
+    )
+  }
+  if (group.kind === 'quote') {
+    return (
+      <blockquote
+        key={key}
+        className="border-l-4 border-gray-300 pl-2 text-gray-600 dark:border-gray-500 dark:text-gray-300"
+      >
+        {group.lines.map((line, index) => (
+          <div key={index}>{renderTokens(tokenize(line.replace(QUOTE_LINE, '$1')))}</div>
+        ))}
+      </blockquote>
+    )
+  }
+  const joined = group.lines.join('\n')
+  // Em `pre-wrap`, a última quebra de um bloco não desenha linha — a extra mantém a linha em branco.
+  const trailingBreak = group.lines[group.lines.length - 1] === '' ? '\n' : null
+  return (
+    <div key={key}>
+      {renderTokens(tokenize(joined))}
+      {trailingBreak}
+    </div>
+  )
+}
+
+/**
+ * Formatação do WhatsApp: inline (`*`, `_`, `~`, `` ` ``, ```` ``` ````) e, por linha, lista (`* `,
+ * `- `), lista numerada (`1. `) e citação (`> `). Sem linha de bloco, a saída é só inline, igual à de
+ * sempre. Com bloco de código de várias linhas, também — dividir por linha partiria o bloco.
+ */
 export function parseWhatsAppFormatting(text: string): ReactNode[] {
-  const tokens = tokenize(text)
+  const lines = text.split('\n')
+  const hasBlockLine = lines.some((line) => blockKindOf(line) !== 'plain')
+  if (!hasBlockLine || text.includes('```')) return renderTokens(tokenize(text))
+  return groupLines(lines).map(renderBlockGroup)
+}
 
+function renderTokens(tokens: FormatToken[]): ReactNode[] {
   return tokens.map((token, index) => {
     switch (token.type) {
       case 'bold':
@@ -117,7 +204,11 @@ export function parseWhatsAppFormatting(text: string): ReactNode[] {
       case 'strikethrough':
         return <del key={index}>{token.content}</del>
       case 'monospace':
-        return <code key={index} className="bg-gray-100 px-1 py-0.5 rounded text-sm">{token.content}</code>
+        return (
+          <code key={index} className="bg-gray-100 px-1 py-0.5 rounded text-sm">
+            {token.content}
+          </code>
+        )
       case 'codeblock':
         return (
           <pre key={index} className="bg-gray-100 p-2 rounded text-sm overflow-x-auto my-1">
@@ -135,7 +226,11 @@ function escapeHtml(text: string): string {
 }
 
 function unescapeHtml(text: string): string {
-  return text.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&nbsp;/g, ' ')
+  return text
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&nbsp;/g, ' ')
 }
 
 // Marcador da Private Use Area do Unicode — praticamente impossível de colidir com
@@ -196,12 +291,14 @@ export function htmlToWA(html: string): string {
   // O `<code>` que o cursor abre nasce só com a âncora de largura zero. Sem nada digitado dentro,
   // ele viraria um par de crases vazias no texto enviado.
   text = text.replace(EMPTY_CODE_REGEX, '')
-  text = text.replace(/<code data-wa="block"[^>]*>([\s\S]*?)<\/code>/gi, (_match, inner: string) => (
-    `\`\`\`${unescapeHtml(inner.replace(/<br\s*\/?>/gi, '\n'))}\`\`\``
-  ))
-  text = text.replace(/<code data-wa="inline"[^>]*>([\s\S]*?)<\/code>/gi, (_match, inner: string) => (
-    `\`${unescapeHtml(inner)}\``
-  ))
+  text = text.replace(
+    /<code data-wa="block"[^>]*>([\s\S]*?)<\/code>/gi,
+    (_match, inner: string) => `\`\`\`${unescapeHtml(inner.replace(/<br\s*\/?>/gi, '\n'))}\`\`\``,
+  )
+  text = text.replace(
+    /<code data-wa="inline"[^>]*>([\s\S]*?)<\/code>/gi,
+    (_match, inner: string) => `\`${unescapeHtml(inner)}\``,
+  )
 
   text = text
     .replace(/<br\s*\/?>/gi, '\n')