fix(ide-extension): display placeholders in message previews

.changeset/beige-mice-talk.md

@@ -0,0 +1,5 @@
+---
+"vs-code-extension": patch
+---
+
+Fixes an error so placeholders are displayed in message previews.

source-code/ide-extension/src/commands/editMessage.ts

@@ -3,6 +3,7 @@ import { setState, state } from '../state.js'
 import { msg } from '../utilities/message.js'
 import { EventEmitter, window } from 'vscode'
 import type { Message } from '@inlang/core/ast'
+import { getMessageAsString } from '../utilities/query.js'
 
 const onDidEditMessageEmitter = new EventEmitter<void>()
 export const onDidEditMessage = onDidEditMessageEmitter.event
@@ -17,11 +18,11 @@ export const editMessageCommand = {
       return msg("Couldn't retrieve resource", "warn", "notification")
     }
 
-    const message = query(currentResource).get({ id: messageId })
+    const message = getMessageAsString(query(currentResource).get({ id: messageId }))
 
     const newValue = await window.showInputBox({
       title: "Enter new value:",
-      value: message?.pattern.elements[0]!.value as string
+      value: message
     })
 
     if (newValue === undefined) {

source-code/ide-extension/src/decorations/contextTooltip.ts

@@ -2,6 +2,7 @@ import type { MessageReferenceMatch } from '@inlang/core/config';
 import { query } from '@inlang/core/query';
 import { MarkdownString, Uri } from 'vscode';
 import { state } from '../state.js';
+import { getMessageAsString } from '../utilities/query.js';
 
 const MISSING_TRANSLATION_MESSAGE = '[missing]'
 
@@ -22,12 +23,12 @@ function renderTranslationRow(row: ContextTableRow) {
 export function contextTooltip(message: MessageReferenceMatch) {
   const resources = state().resources.sort((a, b) => a.languageTag.name.localeCompare(b.languageTag.name))
   const messages = resources.reduce<ContextTableRow[]>((acc, r) => {
-    const m = query(r).get({ id: message.messageId })
+    const m = getMessageAsString(query(r).get({ id: message.messageId }))
     const args = encodeURIComponent(JSON.stringify([{ messageId: message.messageId, resource: r.languageTag.name }]));
 
     return [...acc, {
       language: r.languageTag.name,
-      message: m?.pattern.elements[0]!.value ? m.pattern.elements[0].value as string : MISSING_TRANSLATION_MESSAGE,
+      message: m ?? MISSING_TRANSLATION_MESSAGE,
       editCommand: Uri.parse(`command:inlang.editMessage?${args}`),
       openInEditorCommand: Uri.parse(`command:inlang.openInEditor?${args}`)
     }]

source-code/ide-extension/src/decorations/messagePreview.ts

@@ -3,6 +3,7 @@ import { query } from "@inlang/core/query"
 import { state } from "../state.js"
 import { contextTooltip } from "./contextTooltip.js"
 import { onDidEditMessage } from "../commands/editMessage.js"
+import { getMessageAsString } from '../utilities/query.js'
 
 const MAXIMUM_PREVIEW_LENGTH = 40
 
@@ -50,18 +51,15 @@ export async function messagePreview(args: { context: vscode.ExtensionContext })
 					documentText: activeTextEditor.document.getText(),
 				})
 				return messages.map((message) => {
-					const translation = query(refResource).get({
+					const translation = getMessageAsString(query(refResource).get({
 						id: message.messageId,
-					})?.pattern.elements
+					}))
 
-					const translationText =
-						translation && translation.length > 0 ? (translation[0]!.value as string) : undefined
-
-					const truncatedTranslationText =
-						translationText &&
-						(translationText.length > (MAXIMUM_PREVIEW_LENGTH || 0)
-							? `${translationText.slice(0, MAXIMUM_PREVIEW_LENGTH)}...`
-							: translationText)
+					const truncatedTranslation =
+						translation &&
+						(translation.length > (MAXIMUM_PREVIEW_LENGTH || 0)
+							? `${translation.slice(0, MAXIMUM_PREVIEW_LENGTH)}...`
+							: translation)
 					const range = new vscode.Range(
 						// VSCode starts to count lines and columns from zero
 						new vscode.Position(
@@ -75,10 +73,10 @@ export async function messagePreview(args: { context: vscode.ExtensionContext })
 						renderOptions: {
 							after: {
 								contentText:
-									truncatedTranslationText ??
+									truncatedTranslation ??
 									`ERROR: '${message.messageId}' not found in reference language '${referenceLanguage}'`,
-								backgroundColor: translationText ? "rgb(45 212 191/.15)" : "drgb(244 63 94/.15)",
-								border: translationText
+								backgroundColor: translation ? "rgb(45 212 191/.15)" : "drgb(244 63 94/.15)",
+								border: translation
 									? "1px solid rgb(45 212 191/.50)"
 									: "1px solid rgb(244 63 94/.50)",
 							},

source-code/ide-extension/src/utilities/query.ts

@@ -0,0 +1,17 @@
+import type { Message } from "@inlang/core/ast"
+
+export function getMessageAsString(message?: Message) {
+  if (!message?.pattern.elements || message.pattern.elements.length < 1) {
+    return undefined;
+  }
+
+  const elementsMap = message.pattern.elements.map((e) => {
+    if (e.type === 'Placeholder') {
+      // TODO: Use framework specific placeholder indication
+      return `{{${e.body.name}}}`
+    }
+
+    return e.value
+  })
+  return elementsMap.join('')
+}