# Avoid replacing match in MatchDecorator (decorator to add link icon after URLs)

**URL:** <https://discuss.codemirror.net/t/avoid-replacing-match-in-matchdecorator-decorator-to-add-link-icon-after-urls/4719>\
**Category:** v6\
**Created:** [July 15, 2022, 7:15pm UTC](https://discuss.codemirror.net/t/avoid-replacing-match-in-matchdecorator-decorator-to-add-link-icon-after-urls/4719 "2022-07-15T19:15:49Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![treyhunner](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/treyhunner/32/2271_2.png) [@treyhunner](https://discuss.codemirror.net/u/treyhunner)\
**Post date:** [July 19, 2022, 4:14pm UTC](https://discuss.codemirror.net/t/avoid-replacing-match-in-matchdecorator-decorator-to-add-link-icon-after-urls/4719/3 "2022-07-19T16:14:53Z")

</div>

That worked great. Thanks @marijn!

![image](https://discuss.codemirror.net/uploads/default/original/2X/e/ea8968cc491a31a5fceb3de54c737fc5d414173f.png)

For looking to add a link icon after each URL, here’s what I did:

```auto
class HyperLink extends WidgetType {
    constructor(state) {
        super();
        this.state = state;
    }
    eq(other) {
        return (
            this.state.url === other.state.url
            && this.state.at === other.state.at
        );
    }
    toDOM() {
        const wrapper = document.createElement('a');
        wrapper.href = this.state.url;
        wrapper.target = "_blank";
        wrapper.innerHTML = `<i class="fas fa-link mx-1"></i>`;
        wrapper.className = "cm-link";
        wrapper.rel = "nofollow";
        return wrapper;
    }
};

const linkDecorator = new MatchDecorator({
    regexp: /https?:\/\/[a-z0-9\._/~%\-\+&\#\?!=\(\)@]*/ig,
    decorate: (add, from, to, match, view) => {
        const url = match[0];
        const start = to, end = to;
        const linkIcon = new HyperLink({at: start, url});
        add(start, end, Decoration.widget({widget: linkIcon, side: 1}));
    },
});

const urlPlugin = ViewPlugin.fromClass(
    class URLView {
        constructor(view) {
            this.decorator = linkDecorator;
            this.decorations = this.decorator.createDeco(view);
        }
        update(update) {
            if (update.docChanged || update.viewportChanged) {
                this.decorations = this.decorator.updateDeco(update, this.decorations);
            }
        }
    }, {decorations: v => v.decorations}
);

```

Example [here](https://pym.dev/p/28r9m/) and [here](https://pym.dev/p/2gwzp/)

---

_[View the full topic](https://discuss.codemirror.net/t/avoid-replacing-match-in-matchdecorator-decorator-to-add-link-icon-after-urls/4719)._