How to install remark/rehype plugin?

[leonwang908]

https://github.com/BearToCode/carta/issues/20 looks like usage in this link is not suitable for carta 4, and I got a bit confused on official document. can you give me an example?

here is my code and it's not working at all.

<script lang="ts">
    import { Carta, MarkdownEditor } from 'carta-md';
    import type { UnifiedTransformer } from 'carta-md';
    import rehypeExternalLinks from 'rehype-external-links';
    import { code } from '@cartamd/plugin-code';

    import '$lib/styles/github.scss'; /* Default theme */

    const newlines = {
        breaks: true
    };

    const externalLinksTransformer = (): UnifiedTransformer<'sync'> => ({
        execution: 'sync',
        type: 'rehype',
        transform: ({ processor }) => {
            processor.use(rehypeExternalLinks, {
                target: '_blank',
                rel: ['noopener', 'noreferrer']
            });
        }
    });

    const carta = new Carta({
        extensions: [newlines, externalLinksTransformer]
    });

    export let value = '';
</script>

[BearToCode]

Hello, try with the following:

<script lang="ts">
    import { Carta } from 'carta-md';
    import type { Plugin, UnifiedTransformer } from 'carta-md';
    import rehypeExternalLinks from 'rehype-external-links';

    import '$lib/styles/github.scss'; /* Default theme */

    const externalLinksTransformer: UnifiedTransformer<'sync'> = {
        execution: 'sync',
        type: 'rehype',
        transform: ({ processor }) => {
            processor.use(rehypeExternalLinks, {
                target: '_blank',
                rel: ['noopener', 'noreferrer']
            });
        }
    };

    const externalLinks = (): Plugin => ({
        transformers: [externalLinksTransformer]
    })

    const carta = new Carta({
        sanitizer: false, // Use yours instead
        extensions: [externalLinks()]
    });
</script>

[leonwang908]

This one works, thank you!

for the break: true stuff, where should I set it?

[BearToCode]

Can you explain what you want to achieve with:

const newlines = {
  breaks: true
};

[leonwang908]

I am trying to enable new line by enter key. In default setting remark will disable it. https://github.com/BearToCode/carta/issues/20

I assumed remark is like markdown-it can set like

new MarkdownIt({
  html: false,
  linkify: true,
  breaks: true,
)}

[BearToCode]

You need to use a dedicated plugin for it: remark-breaks. You can create a transformer similar to the one used before, but setting type: 'remark'

[leonwang908]

this one solved my problem, thank you very much!

btw, just wondering. what difference between remark-breaks and breaks: true in issue #20?

[BearToCode]

In the old version of Carta another parser was used. It has now been updated to a syntax-tree based parser, which is a combination of Unified, Remark and Rehype. From a user point of view, it should be the same

[leonwang908]

understand, thank you!