Bug: [VS Code Extension] Visual Editor breaks when 'src' has newline

[Greg-Hitchon]

Description

When using the VS Code Extension (v1.10.0) it causes issues if src is a multi-line object:

Works:

import { createMachine } from "xstate";
export default
  createMachine({
  id: "New Machine",
  initial: "First State",
  states: {
    "First State": {
      on: {
        Event: {
          target: "Second State",
        },
      },
    },
    "Second State": {
      invoke: {
        src: { type: "something" },
        id: "sdg",
      },
    },
  },
})

Breaks after changing anything in the editor:

import { createMachine } from "xstate";
export default

  /** @xstate-layout N4IgpgJg5mDOIC5QDkwHcAEBZAhgYwAsBLAOzADoAxIgJ1gBcMBlenesAYgFEA3ME+gG0ADAF1EoAA4B7WEXpFpJCSAAeiAIwA2ABzkAzAE5hW4YYDsAFg0AmDWcsAaEAE9NJ8pcPedlq7ftDSwBfUOcSaQg4FVRMXEJSCmo6RhY2MBUZOQUlFXUEAFYtZzcEcy1ybx8-azsHMJBY7HxiMnImMDwlCGZWdkzZeUVlJDVEG3MNT11JoJ0bSztDEsQdfQam+NaM0ayh3NH8nRWEAFpbcmEr4Q0CmwKdcx1jLRtQ0KA */
  createMachine({
    id: "New Machine",
    initial: "First State",
    states: {
      "First State": {
        on: {
          Event: {
            target: "Second State",
          },
        },
      },
      "Second State": {
        invoke: {
          src: {
            type: "something"
          },
          id: "sdg",
        },
      },
    },
  })

Expected result

Should not add random \r characters and quotes

Actual result

Saves extra \r characters and adds quotes.

import { createMachine } from "xstate";
export default

  /** @xstate-layout N4IgpgJg5mDOIC5QDkwHcAEBZAhgYwAsBLAOzADoAxIgJ1gBcMBlenesAYgFEA3ME+gG0ADAF1EoAA4B7WEXpFpJCSAAeiAIwA2ABzkAzAE5hW4YYDsAFg0AmDWcsAaEAE9NJ8pcPedlq7ftDSwBfUOcSaQg4FVRMXEJSCmo6RhY2MBUZOQUlFXUEAFYdZzcEDX0bcm8fP2s7BzCQWOx8YjJyJjA8JQhmVnZM2XlFZSQ1RBtzDU9dKaCdG0s7QxLEHX1G5vi2jLGs4dyx-PtVhABaLVDQoA */
  createMachine({
  "id": "New Machine",
  "initial": "First State",
  "states": {
    "First State": {
      "on": {
        "Event": {
          "target": "Second State"
        }
      }
    },
    "Second State": {
      "invoke": {
        "src": {\r
            type: "something"\r
          },
        "id": "sdg"
      }
    }
  }
})

Reproduction

https://stately.ai/viz/4164f182-44a6-4234-9efa-8ca0acaa0aad

Additional context

No response

[Andarist]

The code-syncing algorithm is being rewritten and we should release the new version soon. I'm QAing it extensively right now. As far as I know that rewrite should fix this issue - especially the random \r characters. I will let you know when we release it.