How can I use a custom component for links?

[SebastianStehle]

Hi,

I would like to render a custom link view when the url has a certain format. I tried it with a custom view first, which was kind of working (have not figured out everything yet), but then I realized that I can just use react component, which makes my code so much easier.

I tried the following:

type EditingOptions = { baseUrl: string, appName: string };

export class CustomLinkExtension extends LinkExtension {
    constructor(private readonly customOptions: LinkOptions & EditingOptions) {
        super(customOptions);
    }

    ReactComponent = (props: NodeViewComponentProps) => {
        return (
            <RenderView {...props} {...this.customOptions} />
        );
    };
}

export const RenderView = ({ appName, baseUrl, node, forwardRef }: NodeViewComponentProps & EditingOptions) => {
    const content = getContentId(node.attrs.src, appName, baseUrl);

    if (!content) {
        return (
            <span ref={forwardRef}></span>
        );
    }

    return (
        <div className='squidex-editor-content-link'>
            <div className='squidex-editor-content-schema'>{content.schemaName}</div>
            <div className='squidex-editor-content-name' ref={forwardRef}>{content.schemaName}</div>
        </div>
    );
};

I have 2 issues:

1. I only want to to render the custom link if the node content is pure text (it is added from another extension), but I don't know how to do that.
2. The react component is never called. I tried something similar with images and it works as expected there.

[SebastianStehle]

I realized that I can also use nodeViewComponents. When I use that I get the following error:

This is a custom error, possibly thrown by an external library.\n\nYou are attempting to use a node view for a mark type. This is not supported yet.

So I guess I have to write a custom node extension. Would that work with the normal link?