How to add edit link to wagtail-autocomplete items

Wagtail-autocomplete is a good solution for creating relations between pages. By default you can only search for a page and add or remove relation. Here is a solution to add edit icon that allows to edit related page in new tab.

1. In views.py we put page edit url to edit variable:

def render_page(page):
    if getattr(page, 'specific', None):
        # For support of non-Page models like Snippets.
        page = page.specific
    if callable(getattr(page, 'autocomplete_label', None)):
        title = page.autocomplete_label()
    else:
        title = page.title
    edit = reverse('wagtailadmin_pages:edit', args=[page.id])
    return dict(pk=page.pk, title=title, edit=edit)

1. In dist.js we look for this code (prettify first!):

return e.createElement("div", {
                                key: n.pk,
                                className: ee("selection")
                            }, e.createElement("span", {
                                className: ee("selection__label")
                            }, n.title), e.createElement("button", {
                                type: "button",
                                className: ee("selection__button"),
                                onClick: t.handleRemove.bind(t, n)
                            }, e.createElement(k, {
                                className: ee("selection__icon")
                            }), e.createElement("span", {
                                className: ee("sr-only")
                            }, "Remove")))
                        }))))

And we make it look like this:

return e.createElement("div", {
                            key: n.pk,
                            className: ee("selection")
                        }, e.createElement("span", {
                            className: ee("selection__label")
                        }, n.title),

                        e.createElement("div", {
                            className: ee("selection__controls")
                        },

                        // edit icon here
                        e.createElement("a", {
                            href: n.edit,
                            target: '__blank',
                            className: ee("edit__button")},
                            e.createElement("svg", {
                                className: ("icon icon-edit icon--item-action")},
                                e.createElement("use", { href: '#icon-edit'}),
                        )),

                        e.createElement("button", {
                            type: "button",
                            className: ee("selection__button"),
                            onClick: t.handleRemove.bind(t, n)
                        }, e.createElement(k, {
                            className: ee("selection__icon")
                        }), e.createElement("span", {
                            className: ee("sr-only")
                        }, "Remove"))))
                    }))))

1. Now we need to uninstall wagtail-autocomplete from pip and put our wagtailautocomplete folder with modified files directly to our app folder (where we have home, search etc. so it can be found by Wagtail).