BearToCode / carta

A lightweight, fast and extensible Svelte Markdown editor and viewer.
https://beartocode.github.io/carta/
MIT License
470 stars 22 forks source link

Mermaid Support #128

Open Pasithea0 opened 1 month ago

Pasithea0 commented 1 month ago

I'm trying to add mermaid charts to my site, but neither remark-mermaidjs or rehype-mermaid works.

Here is my code, but it does not work:

import rehypeMermaid from "rehype-mermaid";

  const mermaid: Plugin = {
      transformers: [{
          execution: "async",
          type: "rehype",
          transform({ processor }) {
              processor.use(rehypeMermaid, {
                // The default strategy is "inline-svg"
                // strategy: "img-png"
                // strategy: "img-svg"
                // strategy: "inline-svg"
                // strategy: "pre-mermaid"
              })
          }
      }]
  }

Any help is greatly appreciated!

BearToCode commented 1 month ago

I tried your example and it works for me: image

import { Carta, type Plugin } from 'carta-md';
import rehypeMermaid from 'rehype-mermaidjs';

const mermaid: Plugin = {
    transformers: [{
        execution: 'async',
        type: 'rehype',
        transform({ processor }) {
            processor.use(rehypeMermaid);
        }
    }]
};

const carta = new Carta({
    extensions: [mermaid],  
    sanitizer: false
});

If you are also using plugin-code, try moving this plugin first when you provide extensions to carta:

const carta = new Carta({
    extensions: [mermaid, code()],
});
Pasithea0 commented 4 weeks ago
  1. The text only appears if I disable the sanitizer.
  2. The mermaid chart disappears for some reason in the Markdown element

https://github.com/user-attachments/assets/d4f82635-2394-4cf3-a714-0872615f8ef5

BearToCode commented 3 weeks ago
  1. What sanitizer are you using? I tried dompurify and the text disappears from the boxes. I'm not able to figure out why this happens. You'll have better luck asking for help on the dompurify repo, providing an example of the generated HTML.
  2. This works fine for me (disabling the sanitizer). Try disabling all plugins and see if it still happens.