Feature/adding query md experimental support

[davidporter-id-au]

This is an experimental feature which allows a query to return preformatted data (in this instance markdown, though if it's useful, presumably other types as well).

This is still being tested, so it's not going to be super discoverable (and I have no idea what I'm doing on the frontend, so also will try and wall off these changes for a bit until we're more certain they'll be of use).

The idea is that a query should be able return a response struct like this:

  "cadenceResponseType": "formattedData",
  "format": "<mime-type format>",
  "data" <formatted data specific to the format>
}

for example:

{
  "cadenceResponseType": "formattedData",
  "format": "text/markdown",
  "data" "### heading 123 \n[lorem ipsum](https://link) **dolor** sit amet, consectetur adipiscing elit. In id auctor dolor, in condimentum diam. Integer non dignissim odio, eget vehicula orci. Morbi id volutpat augue. Cras vel dui et mauris interdum ultricies. Nam euismod"
}

where cadenceResponseType is expected to always be the fixed string formattedData and format refers to the mime-type classification.

If it works, and if the format returned is supported, this can be rendered in the query UI. The react-md package in this instance takes care to sanitize the inputs since this would otherwise be an obvious XSS vector.

Testing:

• tested locally, seems like I didn't completely break the existing JSON format (hopefully).

[Assem-Uber]

Added styles for different use cases and added support to (autolink literals, footnotes, strikethrough, tables, tasklists)

Handled responsiveness

[Assem-Uber]

Keeping the test text for reference

export const sampleContent = `
# Heading Level 1
This is a top-level heading with an underline border.

## Heading Level 2
This is a second-level heading, also with an underline border.

### Heading Level 3
This is a third-level heading without an underline.

#### Heading Level 4
This is a fourth-level heading.

##### Heading Level 5
This is a fifth-level heading.

###### Heading Level 6
This is a sixth-level heading with tertiary content color.

## Paragraphs and Text Formatting

This is a regular paragraph with some text. It demonstrates the default paragraph styling with proper margins and typography.

This paragraph contains **bold text** and *italic text* to test emphasis styling. You can also combine them like ***bold and italic***.

Here's a paragraph with \`inline code\` to test the code styling with background color and padding.

Here's a [regular link](https://example.com) to test link styling including hover and visited states.

## Unordered Lists

- First item in an unordered list
- Second item with some longer text to test line wrapping
- Third item
  - Nested item level 1
  - Another nested item
    - Deeply nested item level 2
- Back to top level

## Ordered Lists

1. First numbered item
2. Second numbered item with more content
   1. Nested numbered item
   2. Another nested item
      - Deeply nested item

## Code Blocks

Here's a code block to test pre-formatted text styling:

\`\`\`javascript
function testFunction() {
  const message = "Hello, World!";
  console.log(message);
  
  // This tests syntax highlighting
  for (let i = 0; i < 10; i++) {
    console.log('Count: \${i}');
  }
}
\`\`\`

## Horizontal Rules

Here's content before a horizontal rule.

---

And here's content after the horizontal rule.

## Images

![Sample Image](/_next/static/media/cadence-logo-black.1bf95a4d.svg)

## Task Lists

- [ ] Task 1
- [x] Task 2
- [ ] Task 3

## Blockquotes

> This is a blockquote. It can contain multiple sentences and will be styled with a left border and background.

## Tables

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Row 1    | \`code\`   | **bold** |
| Row 2    | *italic* | [link](https://example.com) |
| Row 3    | <mark>highlight</mark> | Normal text |

## Delete

This text has ~~deleted content~~
`;