possibility to add prefixe to relative URL

[fab2713]

Hey @panphora,

It could be nice to have a way to add a prefixe to relative URL, because the document being edited does not necessarily have the same path/domain/… as the final published page and in this case the link would be broken in this editor.

This could be configured with a new component option named relativeUrlPrefixe for example, and the end of sanitizeUrl function could be modified like:

if (hasSafeProtocol) {
  return url;
} else if (isRelative) {
  return (this.relativeUrlPrefixe || "") + url;
} else {
  return "#";
}

Thanks in advance.

[fab2713]

I just realized that my proposed change does not apply to the correct function, because according to my tests, it might be better to modify the LinkTooltip class, which would also allow it to be configured editor by editor rather than globally.

Here is an example of my tests, which are a little more general than simply adding a prefix and seem to work well:

const urlPreviewRegExp = [[/^\//, "/preview/"], [/www\./, ""]];
const origFindLinkAtPosition = editor.linkTooltip.findLinkAtPosition;
editor.linkTooltip.findLinkAtPosition = (text, position) => {
    const result = origFindLinkAtPosition(text, position);
    if (result) {
        result.url = urlPreviewRegExp.reduce((value, re) => value.replace(...re), result.url);
    }
    return result;
};

[panphora]

Coming back to this — happy to add it, but the API shape isn't obvious. Your two messages in this thread sketched three different shapes:

1. Simple prefix string: `relativeUrlPrefix: '/preview'`
2. Override the LinkTooltip method: per-instance monkey-patch of `findLinkAtPosition`
3. Regex pairs: `[[/^\//, '/preview/'], [/www\./, '']]`

Each has tradeoffs:

• (1) is simplest but only handles one transformation
• (2) is most flexible but requires touching internals
• (3) is flexible but a bit clunky to declare

A fourth option would be a transformer function: `transformLinkUrl: (url) => url` — flexible, declarative, no internals exposed.

Which would you actually use? If you can confirm a preference and an example or two of your real-world transformation, I'll add it as a small option that lives on `LinkTooltip` (which is the right scope — `sanitizeUrl` is a different code path used elsewhere).

[fab2713]

Hey,

Thanks for your reply.

I think we can ignore my first message because, as I mentioned later, it didn't produce the desired result.
My monkey-patch code snippet was just a quick test to see if I could achieve the goal very quickly without modifying your library's code.

I think your fourth proposal would work just fine and would be both very flexible and clean.
But it’s important to me that the URL transformation function can be provided on a per-editor-instance basis (likely via constructor parameters), rather than simply being set globally.

This is an example of usage with the same regexp:

const urlPreviewRegExp = [[/^\//, "/preview/"], [/www\./, ""]];
const [editor] = new OverType(".overtype-editor", {
  transformLinkUrl: (url) => urlPreviewRegExp.reduce((value, re) => value.replace(...re), url),
});

Thank you very much in advance.

[panphora]

Shipped in v2.4.0. Added a per-instance transformLinkUrl(url) option that rewrites the URL shown in and opened from the link tooltip; your markdown text and the rendered preview are left untouched, and the result is run through OverType's URL sanitizer before opening.

const [editor] = new OverType('#editor', {
  transformLinkUrl: (url) => url.replace(/^\//, '/preview/')
});

Docs: README → Transforming Link URLs. Thanks for the suggestion and the follow-up discussion!