SwaggerEditor@next: Spec in JSON in one line

[vitjaz]

System

• OS: Windows 10 Pro 21H1 (build 19043.1466)
• Browser: Chrome (108.0.5359.125)
• Swagger-Editor version: ^5.0.0-alpha.44

My problem

When I pass a specification in json format to the prop spec, it is parsed into one line in swaggerEditor. There is no such problem with yaml. It doesn't matter if I'm passing just an object or using the JSON parse/stringify methods.

Code

Page A Vue 3

<template>
  <iframe
    src="http://localhost:3000/"
    width="100%"
    frameborder="0"
    ref="targetIframe"
    @load="postMessage"
  />
</template>

<script setup lang="ts">
type TProps = {
  content: any;
  url: string;
};

const { content, url } = defineProps<TProps>();
          ^^^^^^ here is my object
const postMessage = () => {
  const iframe = window.document.querySelector("iframe");
  if (iframe) {
    iframe.contentWindow!.postMessage(
      {
        url: url,
        content: JSON.stringify(content),
        // content: CONTENT_YAML,
      },
      "*"
    );
  }
};
</script>

index.js SwaggerEditor@next

import React from 'react';
import ReactDOM from 'react-dom';
import 'swagger-ui-react/swagger-ui.css';

import SwaggerEditor from './App.jsx';

window.addEventListener('message', (e) => {
  let url = '';
  let data = '';
  if (e.origin === 'http://127.0.0.1:5173') {
    console.log(e.data.content);
    url = e.data.url;
    data = e.data.content;
    ReactDOM.render(
      <SwaggerEditor url={url} spec={JSON.parse(data)} />,
      document.getElementById('swagger-editor')
    );
  }
});

Screenshots

[char0n]

@vitjaz thanks for creating this issue.