how to add the plugins to the toolbox?

[PrestigeDevop]

Hello ,

I'm not sure how to make a plugin for the toolbox so that it appears on the toolbar ?

I want it to Insert predefined text or do some other functionality to the selected text, I'm probably doing it wrong as I'm not using the renderer components /function directly (Carta.renderSSR)

The only thing I'm using is the MarkdownEditor .

which doesn't render some of the content correctly in "preview" tab e.g the youtube videos with the video plugin:

so what I'm doing atm is just letting the users use it normally and apply custom scss and render the blog ( which is stored in a db directly from the output as a html ) in the blog view route , like so :

onMount(() => {
        // the post.content sanitize with iframe is only possible in client side rendering
        safeContent = DOMPurify.sanitize(post.content ?? '', dompurifyOptions);
    });

I've read the tutorial on how to add custom component but this is not a plugin .. is it?

if so .. how to nest it into the toolbox to add some functionality to the input e,g I would like to add something like this :

> [!TIP]
> This is a _styled_ tip using html.

> [!IMPORTANT]
> This is a tip using html.

> [!WARNING]
> This is a tip using html..

> [!Code]
> This is a tip using html.```

[PrestigeDevop]

I'm not using Carta.render , as I said , I'm rendering it with onMount

 // the post.content sanitize with iframe is only possible in client side rendering
        safeContent = DOMPurify.sanitize(post.content ?? '', dompurifyOptions);

<main>
    <div class="style" style={post.backgroundImage ? `background: url('${post.backgroundImage}') no-repeat center center fixed; background-size: cover;` : ''}>
        {@render children()}
        <div id="post-conetnt">
        <div class="post-content">
             <div class="carta-theme__github post-content">{@html sanitizeContent(post.content)}</div>
    </div>
</main>

is that the reasons why video plugin doesn't show ?
from my understanding (transformer) is what replace md content into html elements right?

I'm not familiar with Remark nor Rehype , I would like to use a normal svelte component and nest it into the toolbars if possible ?

ExtensionComponent[]

Additional components to be added to the editor or viewer. [https://beartocode.github.io/carta/api/extension#plugin-properties]

[BearToCode]

Hello,
here the answers to some of you questions:

I'm not sure how to make a plugin for the toolbox so that it appears on the toolbar ?

If you want to add a button, you can do so by providing an Icon to a Plugin, which is then used for creating the carta instance used in your MarkdownEditor.

which doesn't render some of the content correctly in "preview" tab e.g the youtube videos with the video plugin:

The video plugin was developed by the community. Are you sure it was actually used in your instance?

const carta = new Carta({
  extensions: [plugin]
});

I've read the tutorial on how to add custom component but this is not a plugin .. is it?

Custom components are only useful when you want to render a Svelte Component. From what I understand, your content will still be static, so it is not necessary.

if so .. how to nest it into the toolbox to add some functionality to the input e,g I would like to add something like this :

> [!TIP]
> This is a _styled_ tip using html.

> [!IMPORTANT]
> This is a tip using html.

> [!WARNING]
> This is a tip using html..

> [!Code]
> This is a tip using html.

If you want, there is already a remark plugin that does that: remark-github-blockquote-alert. You need to wrap it in a carta Plugin to use it: here are the docs and here an example with a different plugin.

is that the reasons why video plugin doesn't show ?

It's hard to tell from what I can see, but since:

I'm not using Carta.render , as I said , I'm rendering it with onMount

You must Carta.render to be able to use those plugins when renderin Markdown!

[PrestigeDevop]

okay , at this point I'm done trying build my own , without a step by step guide. lol