Draft-js-plugins: Linkify and react-router

[jamesfzhang]

How do you integrate the linkify plugin with react-router's <Link> component? Ideally, I'd like to have relative links use <Link> (routes in the app), and external links to use <a>.

[adrianmcli]

I think we are considering allowing the use of your own component for the Linkify plugin. Take a look at issue https://github.com/draft-js-plugins/draft-js-plugins/pull/271

[haydenbleasel]

@jamesfzhang @adrianmcli Took a bit of digging but here's what I got:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { fromJS } from 'immutable';
import _ from 'lodash';

function getMentionLink (arrays) {
    const mention = _.chain(arrays).map((array) => {
        const object = {};
        const key = array[0];
        const value = array[1];

        object[key] = value;

        return object;
    }).flatten().find('link').value();

    return mention.link;
}

const mentionComponent = ({ entityKey, mention, className, decoratedText }) => (
    <Link className={className} to={getMentionLink(mention._root.entries)}>{decoratedText}</Link>
);

function UserSuggestions ({ firstName, lastName, objectId, photo }) {
    const name = `${firstName} ${lastName}`;
    const link = `/profile/${objectId}`;
    const avatar = photo;

    return { name, link, avatar };
}

const mentionSuggestions = fromJS(props.users.map(UserSuggestions));
const mentionPlugin = createMentionPlugin({ mentionComponent });

[juliankrispel]

custom mention components are supported, please refer to the docs.

I'm closing this issue, if you think this issue is still relevant please let us know why and we'll consider reopening it. Thank you for contributing ✌️