How to implement a custom Mark?

[xypnox]

I am trying to implement the double bracket para syntax for internal linking: [[note1]], [[note2]] etc where note1 is the id of the note. On clicking the note the editor will load it's contents.

What I want to achieve is different styling for internal and external links, and adding different icons for external and internal links. Thus, I need to add a different mark and cannot reuse the strategy discussed in Adding support for [[double bracket]] internal links #277.

Moreover, having the two links styled differently will make syntactical sense and the resulting notes will be compatible with other tools that support the [[]] syntax such as Roam Research, Obsidian, etc.

I started with duplicating the Link mark and reusing it as a para mark. However, I realized that the parsing and mark logic is very specific and I could not find guides on what the regex and different parameters are for.

Can someone provide pointers on how to implement a custom mark?

Perhaps a tutorial on adding a custom mark will make it easier to extend the editor for generic usage.

[tommoor]

Hey, as expressed in the previous comment you linked I think this logic can all be attached to the existing Link mark – it will make things much easier.

You might also consider the double bracket syntax and the "display internal links differently" as separate features which will help with development. For the later we could introduce a new callback prop that allows the editor to ask the parent application if a link is considered "internal" when rendering it. isInternalLink(href: string): boolean

thoughts?

[xypnox]

I like the idea of having an isInternalLink to render an internal link differently.

I wanted to implement the double para syntax differently as I found the following differences from an external link.

1. The internal link need not be a https:// or a webpage link. This results in a more compact syntax.
2. The internal link may not be a markdown document.
3. Can also enable internal embeds syntax ![[]]
4. Allow autocomplete on editing the link and different options specific only to internal link such as:
   1. Creating the id if it doesn't exist.
   2. Opening side by side or in the same editor.
5. The generated output will be semantic and usable with other tools.
6. Internal link with title syntax as well [[Title|id]]
7. Separating the two will allow different styles and icons for both.

I do understand that implementing a mark is more complex than extending the link. However I feel that it would result in better UX as the two usecases, of a web link and an internal link are distinct.