Allow VisualEditorUrls to match a pattern

[WaschBaer0395]

Summary

It would be nice if the VIsualEditor could match a whole set of urls automatically

Basic Example

No response

Motivation

lets say we have a page /events and it contains several events /events/1 events/2 where event/number is the detailpage
the amount of events can change depending on how many events are currently in the collection set to published

i would like the VisualEditor to know that it should work on all of those ( right now it does work when manually navigating there, but when i klick save it refreshes and then is not in edit mode anymore cause the url list dosent contain this speicfic route)

Detailed Design

allow us to write this in the url list: ...website.com/events/[id]... where [id] is linked to the collection containing all events, so it knows that the editor should work with lets say the 100 events in that collection
or a general setting to allow all routes of aspecific type /events/... /events/ events/partyevents/
or allow using wildcard chars /events/*

Requirements List

Must Have:

• A way to use wildcard char, [slug], [id] or patterns for LiveEditor Urls

Drawbacks

i dont see any downside in my eyes ?

Alternatives

impossible for us right now to allow editing for the above described usecase

Adoption Strategy

there wouldnt be any changes, other than that you can now also use wildcards, patterns or directly use [slug] [id] linked to a collection to tell the editor a whole range of editor urls that it can work with

Unresolved Questions

No response

[WaschBaer0395]

used a little trick to get this functionality working

import { defineNuxtPlugin } from "#app";

export default defineNuxtPlugin((nuxtApp) => {
  const prepareForLiveEdit = () => {
    const isInIframe = window.self !== window.top;
    const isFromDirectus = document.referrer.includes("<YOUR DIRECTUS BACKEND URL HERE>");
    const url = new URL(window.location.href);
    let changed = false;

    if (isInIframe && isFromDirectus) {
      if (!url.searchParams.has("visualediting")) {
        url.searchParams.set("visualediting", "true");
        changed = true;
      }
      if (!url.searchParams.has("token")) {
        url.searchParams.set("token", "<YOUR_TOKEN>");
        changed = true;
      }
      if (changed) {
        window.history.replaceState({}, "", url.toString());
      }
    }
  };

  nuxtApp.hook("page:finish", () => {
    prepareForLiveEdit();
  });
});

this way it checks if the site is loaded in an iframe from the directus backend, and appends ?visualediting=true&token=TOKEN everytime you navigate on the page now it will update the url to always have those parameters appended.. means you dont need to specify visualEditor URLS anymore