Would be nice to have a way to add same page anchor links in the Lexical Links Feature.

[adampilks]

Right now the Lexical Link feature requires a URL or a collection reference to be added, and the admin link preview is bound to this being there. Would be nice to be able to allow #some-heading-id style links as these are commonly used to jump to other content in pages.

Right now in order to achieve this I have added a custom anchor field to the links feature, and ask the content writers to link to the same page, and add this anchor. But this means the content is referencing itself which is not ideal.

[danielkoller]

Yes, that would be really great.

[geminigeek]

Yes looking for same, anyone figured how it can be done

[Karmalor]

Hey hey, if anyone is still looking for a solution to this, I've figure out a quick & easy way to achieve. I first added a field to the config.ts file of the block I would like to add anchors tags to:

fields: [
   {
      name: "anchorId",
      label: "Anchor Tag ID",
      type: "text",
   },
],

Then in that block's Component.tsx file I extract "anchorId" from the props:

const { richText, selectedDocs, ctaButtonLabel, anchorId } = props;

And add it dynamically as the "id" of, say, the main div of the component:

<div className="container" id={anchorId || undefined}>
   ...component contents
</div>

In the admin panel, I added a link to the header, and have it point to a custom URL that is "whatever I entered for anchorId".