Beautify texts in Strapi before showing them in GraphQL

I created a blog:

  • frontend - Next.js
  • backend - Strapi for API

Post has content (full text) in markdown in Strapi.

Is it possible to do typographing and parsing oembed links on the server-side in Strapi before sending it to GraphQL?

I would like:

  • Strapi to save original editor’s text in a database,
  • GraphQL to show text with typographed phrases and parsed oembed links.
  • Next.js show typographed phrases and iframe codes with minimal changes on the front side.

If yes, how and at which Strapi file I could do it?

Now Next.js has component PostFull.js, and I would like to make it faster on front side:

import Markdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import rehypeSanitize from 'rehype-sanitize';
import Typograf from 'typograf';
import styles from './PostFull.module.css';

const PostFull = ({ id, fulltext }) => {

    const tp = new Typograf({ locale: ['ru', 'en-US'] });
    const postFulltextTypografed = tp.execute(`${fulltext}`);

    return (
        <article className={styles.article} itemScope={true} itemType="http://schema.org/Article">
            ...
            <div className={styles.body}>
                <div className={styles.content} itemProp="articleBody">
                    <Markdown rehypePlugins={[rehypeRaw, rehypeSanitize]}>
                            {postFulltextTypografed}
                    </Markdown>
                </div>
            </div>
        </article>
    );
};

export default PostFull;

It works well, except for the post with any kind of embeds.

Some posts have youtube embeds, for example:

Text paragraph 1

https://www.youtube.com/watch?v=PRfV5TvRjEA

Text paragraph 2

There was a suggestion to use custom components (link: mdx-embed.com) instead of simple text of youtube’s url.

I don’t want to push editors to use custom components in their text, especially for the big archive of old texts.

There are plugins for markdown, for example, remark-oembed (npm sergioramos/remark-oembed) that can parse links in markdown and convert them to the real embed code.

Also for the editor’s text, I would like to use a typograph (npm typograf). It’s very useful for Cyrillic text.