Wrong cursorOffset with multi-line comment

[hyrious]

Environments:

• Prettier Version: 2.8.8
• Running Prettier via: Node.js API
• Runtime: Node.js 18.16.0
• Operating System: macOS
• Prettier plugins (if any):

Steps to reproduce:

Save this script and run it:

import prettier from "prettier";

const code = `
// All messages are represented in JSON.
// So, the prettierd.py controls a subprocess which spawns "node {this_file}".
import {  } from "fs"
`; //   ^ cursor here

console.log(
  prettier.formatWithCursor(code, {
    cursorOffset: 129,
    parser: "babel",
  })
); // => { cursorOffset: 65 }

Expected behavior:

Expect the returned cursorOffset to be around 129, right in the {}.

Actual behavior:

It returns 65, which is in the comments.

Frankly, I don't even find a minimal case to reproduce this issue (the code above is all I could make, changing any line of the comment may make the result correct).

[kachkaev]

Please use the issue template. Prettier Playground supports ranges if this is what you are trying to show:

[hyrious]

@kachkaev Ok, I've updated the format.

The playground does not help here since it cannot set the cursor position.

[fisker]

@hyrious

The cursor tracking does not always return the expected position, I feel lots of problems in this part.
#14812 may fix your case.

Do you have more test cases?

[fisker]

the code above is all I could make, changing any line of the comment may make the result correct

Your right about this, this is strange. I can't change the code either.

My script to test

import * as mainPrettier from "./index.js";
import stablePrettier from "./node_modules/prettier/index.js";

const code = `
// All messages are represented in JSON.
// So, the prettierd.py controls a subprocess which spawns "node {this_file}".
import {<|>  } from "fs"
`;

const cursorOffset = code.indexOf("<|>");
const codeToFormat = code.replace("<|>", "");

console.table([
  {
    prettier: mainPrettier.version,
    originalCursorOffset: cursorOffset,
    cursorOffset: (
      await mainPrettier.formatWithCursor(codeToFormat, {
        cursorOffset,
        parser: "babel",
      })
    ).cursorOffset,
  },
  {
    prettier: stablePrettier.version,
    originalCursorOffset: cursorOffset,
    cursorOffset: (
      await stablePrettier.formatWithCursor(codeToFormat, {
        cursorOffset,
        parser: "babel",
      })
    ).cursorOffset,
  },
]);

[fisker]

Smaller reproduction

// All m are represented in JSON.
// So, the prettierd.py controls a subprocess which spawns "node {this_file}".
import {<|>  } from "fs"

Change the first m letter in first line to a, generates different result.

[fisker]

import { diffArrays } from "diff";

const code = `
// All m are represented in JSON.
// So, the prettierd.py controls a subprocess which spawns "node {this_file}".
import {} from "fs";
`.trim();

function diff(string) {
  return diffArrays([...'import {  } from "fs";'], [...string]);
}

console.log([diff(code), diff(code.replace("m", "a"))]);

The results are so different, maybe bug in diff?

[
  [
    { count: 1, added: undefined, removed: true, value: [Array] },
    { count: 7, added: true, removed: undefined, value: [Array] },
    { count: 1, value: [Array] },
    { count: 7, added: true, removed: undefined, value: [Array] },
    { count: 1, value: [Array] },
    { count: 22, added: true, removed: undefined, value: [Array] },
    { count: 1, value: [Array] },
    { count: 7, added: true, removed: undefined, value: [Array] },
    { count: 1, value: [Array] },
    { count: 1, added: true, removed: undefined, value: [Array] },
    { count: 1, value: [Array] },
    { count: 8, added: true, removed: undefined, value: [Array] },
    { count: 1, value: [Array] },
    { count: 1, added: undefined, removed: true, value: [Array] },
    { count: 8, added: true, removed: undefined, value: [Array] },
    { count: 1, value: [Array] },
    { count: 1, added: true, removed: undefined, value: [Array] },
    { count: 1, value: [Array] },
    { count: 40, added: true, removed: undefined, value: [Array] },
    { count: 1, value: [Array] },
    { count: 9, added: true, removed: undefined, value: [Array] },
    { count: 1, value: [Array] },
    { count: 3, added: true, removed: undefined, value: [Array] },
    { count: 10, value: [Array] }
  ],
  [
    { count: 25, added: true, removed: undefined, value: [Array] },
    { count: 1, value: [Array] },
    { count: 88, added: true, removed: undefined, value: [Array] },
    { count: 7, value: [Array] },
    { count: 2, added: undefined, removed: true, value: [Array] },
    { count: 12, value: [Array] }
  ]
]

[fisker]

Raised an issue kpdecker/jsdiff#400

[fisker]

Shortest string I can find

import { diffArrays } from "diff";

const code = `
// m represent o, 1 represent 1 1 {}
import {} from "fs";
`.trim();

function diff(string) {
  return diffArrays([...'import {  } from "fs";'], [...string]);
}

console.log([
  diff(code),
  diff(code.replace("o", "a")),
  diff(code.replace("m", "a")),
]);

[so1ve]

jsdiff is almost... dead? I think the project has been abandoned by its author and this bug may not be fixed in a while.

---

Just curious. Never mind.

[fisker]

I know that. My PR has been there for over a year kpdecker/jsdiff#351

Anyway, #14812 will fix your issue, so not that important.