From d81316435b3afd68229c1f61674d9d84a8b480ee Mon Sep 17 00:00:00 2001
From: Harel M <harel.mazor@gmail.com>
Date: Thu, 11 Sep 2025 13:09:26 +0300
Subject: [PATCH] Fix missing spec info (#1370)

## Launch Checklist

This fixes an issue with missing info in the spec field due to using the
redacted spec (the one without the docs).

Before - missing button near color when hovering

<img width="397" height="202" alt="image"
src="https://github.com/user-attachments/assets/6f261407-5348-4a71-a6d8-afaff5b27e03"
/>

After:
<img width="397" height="202" alt="image"
src="https://github.com/user-attachments/assets/d2de1b2d-d4cf-4394-b995-e50b957da72c"
/>

I think I already solved this in the past, too bad I didn't add the
relevant tests back then...

 - [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             |  1 +
 cypress/e2e/layers.cy.ts | 24 ++++++++++++++++++++++++
 src/components/App.tsx   |  3 ++-
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 10a5efca..0c68953b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Fixed an issue when clicking on a popup and then clicking on the map again
 - Fix modal close button possition
 - Fixed an issue with the generation of tranlations
+- Fix missing spec info when clicking next to a property
 - _...Add new stuff here..._
 
 ## 3.0.0
diff --git a/cypress/e2e/layers.cy.ts b/cypress/e2e/layers.cy.ts
index 90b61950..4c5093f0 100644
--- a/cypress/e2e/layers.cy.ts
+++ b/cypress/e2e/layers.cy.ts
@@ -467,6 +467,30 @@ describe("layers", () => {
         ],
       });
     });
+
+    it("should show spec info when hovering and clicking single line property", () => {
+      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);
+      then(get.elementByTestId("spec-field-doc")).shouldContainText("Rotates the ");
+    });
+
+    it("should show spec info when hovering and clicking multi line property", () => {
+      when.modal.fillLayers({
+        type: "symbol",
+        layer: "example",
+      });
+
+      when.hover("spec-field-container:text-offset");
+      then(get.elementByTestId("field-doc-button-Offset")).shouldBeVisible();
+      when.click("field-doc-button-Offset", 0);
+      then(get.elementByTestId("spec-field-doc")).shouldContainText("Offset distance");
+    });
   });
 
   describe("raster", () => {
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 9ba85167..b666d2a6 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -8,7 +8,8 @@ import {arrayMoveMutable} from 'array-move'
 import hash from "string-hash";
 import { PMTiles } from "pmtiles";
 import {Map, LayerSpecification, StyleSpecification, ValidationError, SourceSpecification} from 'maplibre-gl'
-import {latest, validateStyleMin} from '@maplibre/maplibre-gl-style-spec'
+import {validateStyleMin} from '@maplibre/maplibre-gl-style-spec'
+import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 
 import MapMaplibreGl from './MapMaplibreGl'
 import MapOpenLayers from './MapOpenLayers'