Add react-markdown to better show the docs (#1378)

## Launch Checklist

This improves how the docs are being presented, since we added some
markdown in the docs it is better to have full support for this here as
well

Before:
<img width="645" height="254" alt="image"
src="https://github.com/user-attachments/assets/ce099ab9-eabd-4721-9550-5ea251439d93"
/>

After:
<img width="645" height="254" alt="image"
src="https://github.com/user-attachments/assets/884d1d69-4238-412e-b620-f9c0640723ca"
/>

The table below that is also stretched is fixes in the following PR:

https://github.com/maplibre/maputnik/pull/1377/files#diff-8d22a87c6893aa31e22f1db0804e1fe93534f38d9fb4433e71cd3878f8daa954

 - [x] Briefly describe the changes in this PR.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
 - [x] Write tests for all new functionality.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

src/components/Doc.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Markdown from "react-markdown";
 
 const headers = {
   js: "JS",
@@ -48,7 +49,11 @@ export default class Doc extends React.Component<DocProps> {
       <>
         {doc &&
           <div className="SpecDoc">
-            <div className="SpecDoc__doc" data-wd-key='spec-field-doc'>{doc}</div>
+            <div className="SpecDoc__doc" data-wd-key='spec-field-doc'>
+              <Markdown components={{
+                a: ({node: _node, href, children, ...props}) => <a href={href} target="_blank" {...props}>{children}</a>,
+              }}>{doc}</Markdown>
+            </div>
             {renderValues &&
               <ul className="SpecDoc__values">
                 {Object.entries(values).map(([key, value]) => {

src/styles/_input.scss

@@ -252,7 +252,7 @@
   margin-top: vars.$margin-3;
 }
 
-.SpecDoc__values code {
+.SpecDoc__values code, .SpecDoc__doc code {
   background: vars.$color-midgray;
   padding: 0.1em 0.3em;
   border-radius: 2px;