Как импортировать функцию из пакета KeystoneJS?

Question

[Johny Sins]

Приветствую, буду очень благодарен если поможете с решением вопроса.

Я использую KeystoneJS для создания записей на моем сайте. Я разобрался как выводить с бэкенда эти записи на фронте React, все работает. Но мне нужно кастомизировать отступы абзацев, размер шрифта и еще пару моментов. В документации сказано использовать пакет "Переопределение средств визуализации по умолчанию". Это то что мне нужно как раз.

Но проблема состоит в том что я когда я пытаюсь импортировать функцию из этого пакета, компилятор ругается что такой функции там нет. Я не разбираюсь в TypeScript, и думаю что нужно сделать какие то действия что бы импортировать "тип" ts из нужного мне пакета.

// ошибка на строчке кода ниже. не может найти DocumentRendererProps, хотя он там есть
import { DocumentRenderer, DocumentRendererProps } from '@keystone-next/document-renderer';

  // мне не совсем понятная консутрукция с присваиванием ниже. я так понимаю это ts. как сделать это в js?
const renderers: DocumentRendererProps['renderers'] = {
  inline: {
    bold: ({ children }) => {
      return <strong>{children}</strong>;
    },
  },
  block: {
    paragraph: ({ children, textAlign }) => {
      return <p style={{ textAlign }}>{children}</p>;
    },
  },
};

<DocumentRenderer document={document} renderers={renderers} />;

Answer 1

[Aetae]

В typescript то что после двоеточия - это описание типов. Для js оно не нужно и в принципе, в его понимании, не существует.

Убери его, и всё заработает:

import { DocumentRenderer } from '@keystone-next/document-renderer';

const renderers = {
  inline: {
    bold: ({ children }) => {
      return <strong>{children}</strong>;
    },
  },
  block: {
    paragraph: ({ children, textAlign }) => {
      return <p style={{ textAlign }}>{children}</p>;
    },
  },
};

<DocumentRenderer document={document} renderers={renderers} />;

Comments

[Johny Sins]

спасибо большое. самое быстрое решение которое я получал.