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.

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Add support for hillshade's color arrays and relief-color elevation expression
 - Change layers icons to make them a bit more distinct
 - Remove `@mdi` packages in favor of `react-icons`
+- Add markdown support for doc related to the style-spec fields
 - Added global state modal to allow editing the global state
 - _...Add new stuff here..._
 

cypress/e2e/layers.cy.ts

@@ -491,6 +491,20 @@ describe("layers", () => {
       when.click("field-doc-button-Offset", 0);
       then(get.elementByTestId("spec-field-doc")).shouldContainText("Offset distance");
     });
+
+    it.only("should hide spec info when clicking a second time", () => {
+      when.modal.fillLayers({
+        type: "symbol",
+        layer: "example",
+      });
+
+      when.hover("spec-field-container:text-rotate");
+      then(get.elementByTestId("field-doc-button-Rotate")).shouldBeVisible();
+      when.click("field-doc-button-Rotate", 0);
+      when.wait(200);
+      when.click("field-doc-button-Rotate", 0);
+      then(get.elementByTestId("spec-field-doc")).shouldNotBeVisible();
+    });
   });
 
   describe("raster", () => {

package.json

@@ -69,6 +69,7 @@
     "react-file-reader-input": "^2.0.0",
     "react-i18next": "^15.7.3",
     "react-icons": "^5.5.0",
+    "react-markdown": "^10.1.0",
     "reconnecting-websocket": "^4.4.0",
     "slugify": "^1.6.6",
     "string-hash": "^1.1.3",

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;