fix getEditorContentsWithReplDecors for multiline decors

Author: al3xnag

packages/jsrepl/src/lib/code-editor-utils.ts

@@ -42,8 +42,10 @@ export function getEditorContentsWithReplDecors(editor: monaco.editor.ICodeEdito
   const lines = contents.split('\n')
 
   const linesWithDecors: string[] = lines.map((line, lineIndex) => {
-    const lineDecors = editor.getLineDecorations(startLineNumber + lineIndex) ?? []
+    const lineNumber = startLineNumber + lineIndex
+    const lineDecors = editor.getLineDecorations(lineNumber) ?? []
     const decorValues: string[] = lineDecors
+      .filter((decor) => decor.range.endLineNumber === lineNumber)
       .map((decor) => {
         const decorId = decor.options.afterContentClassName?.match(/jsrepl-decor-([0-9]+)/)?.[1]
         return decorId ? decorValuesMap[decorId] : null

packages/jsrepl/tests/playwright/repl-eval.test.ts

@@ -308,3 +308,31 @@ test('stuff', async ({ page }) => {
     `
   )
 })
+
+test('multiline decor', async ({ page }) => {
+  await visitPlayground(page, {
+    openedModels: ['/test.ts'],
+    activeModel: '/test.ts',
+    showPreview: false,
+    fs: new ReplFS.FS({
+      kind: ReplFS.Kind.Directory,
+      children: {
+        'test.ts': {
+          kind: ReplFS.Kind.File,
+          content: dedent`
+            console.log(1, 2,
+            3);
+          `,
+        },
+      },
+    }),
+  })
+
+  await assertMonacoContentsWithDecors(
+    page,
+    dedent`
+      console.log(1, 2,
+      3); // → 1 2 3
+    `
+  )
+})