Editor custom tool to insert a text with a link

1 Answer 68 Views
Editor
Juan
Top achievements
Rank 1
Juan asked on 22 Feb 2022, 10:51 PM

Hello,

I've been trying to add a custom tool to my Kendo Editor that allows me to insert some text with a specific link whatever the cursor is positioned at.

There's not enough documentation regarding custom tools that mentions how to achieve this, I've search everywhere and nothing to be found.

This is what I have so far in my custom tool:

let node = view?.state.schema.text(settings.text, [view?.state.schema.marks.link.create({ title: "Test", href: "http://www.google.com" })]);

    return (
        <Button
            type="button"
            onClick={() => {
                EditorUtils.insertNode(
                    view,
                    node
                );
            }}
            disabled={!canInsert}
            onMouseDown={(e) => e.preventDefault()}
            onPointerDown={(e) => e.preventDefault()}
            {...settings.props}
        >
            {settings.props.label}
        </Button>
    );

I've been reading the ProseMirror documentation to see if I could find any clues.

I understand that inserted "nodes" can have a list of "marks" passed to enhance a given node, so I'm passing the link mark to the text node, however it seems like it's completely ignoring it and it just adds a regular text.

Any help would be greatly appreciated.

Thanks,

Juan

1 Answer, 1 is accepted

Sort by
0
Accepted
Filip
Telerik team
answered on 23 Feb 2022, 01:01 PM

Hello, Juan,

There is a similar demo available that can be useful in our documentation here:

https://www.telerik.com/kendo-react-ui/knowledge-base/add-custom-tools-to-the-editor-and-customize-built-in-tools/#toc-insert-span-with-a-classname

We created an example for your use case which can be found here:

https://stackblitz.com/edit/react-icnaqf-26wpqw?file=app/main.jsx

The main idea is to again create a mark that holds the text and the image that needs to be rendered.

I hope this helps.

Regards, FilipProgress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Juan
Top achievements
Rank 1
commented on 23 Feb 2022, 04:24 PM

Oh this is perfect!

Exactly what I needed.

Thank you so much Filip!

Tags
Editor
Asked by
Juan
Top achievements
Rank 1
Answers by
Filip
Telerik team
Share this question
or