Tina Visual Editing

[ajolipa]

In this PR

This is a work in progress to implement visual editing for user-generated content in TinaCMS. This branch currently implements it for both paths and posts, and each of these has one issue I haven't been able to figure out. I'm including both here since I'm not sure which will turn out to be the most tractable.

• Posts: This is the more serious issue but also the one I suspect is an easier fix. When editing the body of a post above an inserted map component, the page crashes with the following console errors:

Uncaught TypeError: can't access property "removeLayer", this.style is undefined
    removeLayer maplibre-gl.js:46
    g21 Map.js:74
    o26 WarpedImageLayerPeripleo.js:46
    React 14
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-DWA4UIM3.js:12
    js index.js:6
    __require chunk-DWA4UIM3.js:12
    React 2
    __require chunk-DWA4UIM3.js:12
    js React
    __require chunk-DWA4UIM3.js:12
    js React
    __require chunk-DWA4UIM3.js:12
    <anonymous> client.js:2

and a bunch of similar things. I believe the issue has to do with how the PlaceInsert component is being unmounted when the data passed to the body of the post changes so that the map is in a new position in the list of children, but I haven't been able to figure out how to make it handle this state change more elegantly.

• Paths: The issue here I find so far completely baffling; when the editing sidebar is present, clicking on any interactive part of the path viewer seems to just make Tina think you're trying to add a new place to the path:

Recording.2025-09-18.154832.mp4

This can be worked around by collapsing the side panel and navigating to the desired leg of the path and then reopening the panel, but that is not an ideal user experience.

[netlify]

✅ Deploy Preview for pss-scavenger-hunt ready!

Name	Link
🔨 Latest commit	f4bc80f
🔍 Latest deploy log	https://app.netlify.com/projects/pss-scavenger-hunt/deploys/68cc62869b1a1b0008d1e3cb
😎 Deploy Preview	https://deploy-preview-249--pss-scavenger-hunt.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for padp-staging ready!

Name	Link
🔨 Latest commit	f4bc80f
🔍 Latest deploy log	https://app.netlify.com/projects/padp-staging/deploys/68cc6286bb30f80008235ead
😎 Deploy Preview	https://deploy-preview-249--padp-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for gbof-c19nyc-staging ready!

Name	Link
🔨 Latest commit	f4bc80f
🔍 Latest deploy log	https://app.netlify.com/projects/gbof-c19nyc-staging/deploys/68cc62860a78550008ac00e9
😎 Deploy Preview	https://deploy-preview-249--gbof-c19nyc-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for juel-staging ready!

Name	Link
🔨 Latest commit	f4bc80f
🔍 Latest deploy log	https://app.netlify.com/projects/juel-staging/deploys/68cc628653394c00083cdad5
😎 Deploy Preview	https://deploy-preview-249--juel-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[rsimon]

Hi @ajolipa, I saw this just now. Looks like it could be some kind of race condition inside that Peripleo component's effect hooks. I'll take a look!

[rsimon]

Hi @ajolipa,

I found a likely culprit for the first error. I don't have a full setup of core-data-places locally, so couldn't test this end-to-end. But I did get a very similar error with a local test setup, where I unmounted a map with a raster layer. From what I can see, your PlaceInsert is built on top of a standard Peripleo MapLibre map, so it should be pretty close to my test case.

I'll publish a new Peripleo release, with the fixes that helped in my case. So, one thing you should try is to update to new Peripleo (will be v0.8.8).

However: I think you are not only running into this problem inside Peripleo. From the logs above, it looks like it also happens here:

https://github.com/performant-software/react-components/blob/09dd32bdd9b42e068799e8975ba9e5e26239c9ca/packages/geospatial/src/utils/Map.js#L74

If that's the actual error location, you'd have to apply a similar fix there as I've applied in Peripleo here:

https://github.com/peripleo/peripleo/blob/f2c7fdfbb3ea1352d3c4dc0175a67626f073d378/packages/peripleo-maplibre/src/map/utils.ts#L145-L157

I.e. in Map.js, line 74 should be:

const removeLayer = (map, layerId) => map?.style && map.removeLayer(layerId);

This should fix it (fingers crossed) for your own WarpedImageLayer. The other layer types come directly from Peripleo, so there the updated 0.8.8 version will hopefully help.

For explanation (as far as I even have one...): it definitely looks like a race condition. Here's my guess of what's going on:

• When you unmount the <Map> React component, the MapLibre map internally starts its own unmounting process.
• At this point, the MapLibre map object still exists. But, internally, some parts are already destroyed before the child React components start unmounting. That's specifically the case for the style (according to your error log; and I also confirmed the same thing in my test setup).
• Therefore - although not ideal - I'm now testing whether map.style exists, rather than just map. In my example, I added an additional catch block. But that shouldn't trigger anymore (at least not in this case), since the map.style check seems to do the trick reliably.

[rsimon]

Done - v0.8.8 is now published.

Two more questions, while we're at it:

• I saw that core-data-places is still at React 18. Therefore I also left Peripleo at React 18. Let me know if there's a plan to move to React 19 at some point. (I don't think this would impact Peripleo, but you never know.)
• Peripleo is still at MapLibre 4. MapLibre has since moved on to version 5. I'll take a quick look what the breaking changes are. But I guess if MapLibre 4 works for you, there's no immediate need to make the jump yet. (FWIW: I did update to the latest 4.x.x version in Peripleo 0.8.8.)

[rsimon]

Hi @ajolipa,

for testing, I now also published beta prerelease packages: v0.9.0-beta (for both @peripleo/peripleo and @peripleo/maplibre). These packages:

• Should support React 18 and 19
• Use MapLibre 5

MapLibre 5 did introduce some breaking changes, so if you attempt to upgrade, a thorough regression test is probably sensible.