Илья

В общем, поступил так, взял готовое решение для Mardown React.

Код для вставки:

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import Markdown from 'react-markdown';
import { getPaymentURLByType } from 'utils/URLsCollections';

function RouterLink(text) {
  return (
    text.href.match(/^(https?:)?\/\//)
      ? <a href={text.href}>{text.children}</a>
      : <Link to={getPaymentURLByType(text.href)}>{text.children}</Link>
  );
}

class ParagraphComponent extends PureComponent {
  static propTypes = {
    caption: PropTypes.string,
    text: PropTypes.string,
  };

  static defaultProps = {
    caption: '',
    text: '',
  };

  render() {
    const { caption, text } = this.props;
    return (
      <div data-block>
        <h3>{caption}</h3>
        <Markdown
          source={text}
          renderers={{ link: RouterLink }}
        />
      </div>
    );
  }
}

export default ParagraphComponent;

Решение взято на время, т.к. не пойму, как используя такое решение

text.replace(/\[(.*?)\]\((.*?)\)/gi, `${<Link to={getPaymentURLByType('$2')}>{'$1'}</Link>}`)

Заменить в тексте [object Object] из-за того что использую template literal.

Задачу решил. Вот ответ.
Смотреть тут

Решил проблему. При автозаполнении хром например ставит вовсе не пробелы, а символ с нулевой шириной. Сделал вот так .replace(/[\u2060]/g, '')
и всё стало работать как надо. Трим и замену пробельных символов естественно убрал.

В общем, нашлось решение. Ходил вокруг него много раз, но благодаря Александру Таратину, который еще раз о нем сказал и удалось решить проблему.

Проблема крылась в том, что у меня есть отдельный файл, который создает в запросе свои header и httpConfig'и и надо было лишь добавить туда responseType: 'blob'

Вот так

export const getPdfConfig = axios.create({
    ...httpConfig,
    responseType: 'blob',
    headers: {
        ...customHeaders,
        'Content-Type': 'application/pdf',
    },
}).get;

Ну а затем использовать fileSaver.