Trying to determine how to use custom Svelte Components with Carta

[KyleFontenot]

I'm trying to understand if it is possible to replace the rendered output with my own Svelte components. If it is possible I'm having a hard time deciphering the Unified system in a way that'd point me in the right direction.
Let's just say that I want to replace the markdown syntax ![alt text](http://url.com) with my own Svelte Image component, how would I go about doing that?

[KyleFontenot]

I see here: #43 that there is a markedExtensions option, but I'm not seeing marked as an available option in a custom plugin, is that just for an older version?

I've used the svelte-markdown library to implement a marked tokenizer that is able to render a custom component. But moving to this more fully-featured Carta, I'm a little baffled that the only thing in the remark/rehype world is rehype-customComponents that only replaces with HTML tags.
What am I missing?
@BearToCode

[KyleFontenot]

I'm thinking if there was a kind of post process or rendering hook for the CartaViewer, maybe I can manipulate how Svelte renders. I guessing it would take a hast parser for svelte, similar to remark-render (just for svelte instead of vdom) and asyncProcessor in Carta would be able to use it.

[BearToCode]

Hi, since this is question is asked quite frequently, I created a dedicated guide on how to use Svelte components inside Carta. If you just want to replace images with a custom component, you could just skip to the last part, where rendered placeholders(<img>s in your case) are replaced with components. You can find the guide here.

Edit: there is now a dedicated plugin for using components

[KyleFontenot]

Incredible, thank you. You're a beast. And thank you for adding it into the main docs.

[KyleFontenot]

Your example on the docs posted actually doesn't seem to work:
https://stackblitz.com/edit/vitejs-vite-qcpp2g?file=src%2Flib%2FMarkdownEditor.svelte
@BearToCode

Any ideas why? Went down a big rabbit hole trying to get other things to work, but it doesn't seem to replace nodes properly at all. ?

My end goal is to be able to put attributes/props with either markdown directives, or attribute syntax to pass props into custom components. I understand that with custom props in markdown I may have to collect them as html attributes when rendering, I just can't get anything to work first.

[KyleFontenot]

As a workaround, I wanted to try to see if remark-directives (https://github.com/remarkjs/remark-directive?tab=readme-ov-file#use) would suit my needs better, but following their documentation directly with Carta doesnt inject the code directly; I don't get the same results using their examples.

remark-directive's code in conjunction with Carta's:

function styledBlockRemarkPlugin() {
  /**
   * @param {import('mdast').Root} tree
   *   Tree.
   * @returns {undefined}
   *   Nothing.
   */
  return (tree) => {
    visit(tree, (node) => {
      if (
        node.type === 'containerDirective' ||
        node.type === 'leafDirective' ||
        node.type === 'textDirective'
      ) {
        if (node.name !== 'note') return

        const data = node.data || (node.data = {})
        const tagName = node.type === 'textDirective' ? 'span' : 'div'

        data.hName = tagName
        data.hProperties = h(tagName, node.attributes || {}).properties
      }
    })
  }
}

const styledBlockDirective: UnifiedTransformer<'sync'> = {
  execution: 'sync', // Sync, since the plugin is synchronous
  type: 'remark', // Rehype, since it operates on HTML
  transform({ processor }) {
    processor
      .use(remarkParse)
      .use(remarkDirective)
      .use(styledBlockRemarkPlugin)
      .use(remarkRehype)
      .use(rehypeFormat)
      .use(rehypeStringify);
  }
};
export const directivePlugin = (): Plugin => ({
  transformers: [styledBlockDirective],
  listeners: [convertHashtags]
});
const carta = new Carta({
    sanitizer: sanitize,
    extensions: [directivePlugin()]
 })

It creates a div element like expected but not the class="warning" part. Have no clue where to even look.

[BearToCode]

Hello, I tried out your example and figured out the problem: the regex actually has to be const regex = /#(\w+)/g; and not regex = /#(w+)/g;. Notice the \ missing. I got no idea how that happened, I'm sorry you had to go through that... Anyway, you could have checked the example source code, which contains a functioning version.

[KyleFontenot]

I see, yes your example is working now, thank you.

I have many other things I can't get to work still though.
If you are using the regex: /#(\w+)/g, to look through the markdown, why is it a rehype transformer instead of a remark transformer? When would I use the remark transformer option?

[BearToCode]

That's because Carta operates as follow:

1. Uses remark-parse to convert the input into a Markdown syntax tree;
2. Apply all the transformers that work on the Markdown syntax tree; (type: 'remark')
3. Uses remark-rehype to convert the Markdown syntax tree to an HTML syntax tree;
4. Apply all the transformers that work on the HTML syntax tree; (type: 'rehype')
5. Uses rehype-stringify to convert the HTML syntax tree into a string.

So using type: 'rehype' means that the plugin specified works with the HTML syntax tree (step 4). Most plugins are like that since it's more common to go through the HTML syntax treen than the Markdown one

[KyleFontenot]

Ok good to know Carta goes through all that. I think I had to spread out the trees of each syntax to understand.

My problems I wasnt aware of before:

• Markdown syntax like ![alt text](url) wraps it in a <p> element for some mysterious reason. instead of a img or maybe a div ?? 🤷‍♂️
• remark-rehype strips all html tags by default, which is not what I was expecting. Throwing the .use(remarkRehype, {allowDangerousHtml: true}) transformer into Carta works. It might be convenient option setting for some people using Carta. If it sanitizes post-transformation, should be fine to allow dangerousHTML, right?
• I was using the wrong remark type before. Still dont understand why someone would use the remark type, and what the point is to UnifiedJS if it doesnt have a unifying syntax tree. Rehype seems to have more options and more knobs to control.

For allowing HTML I made a simple plugin like:

import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
export const allowDangerousHTML = (): Plugin => {
  const allowHTML: UnifiedTransformer<'sync'> = {
    execution: 'sync', 
    type: 'rehype',
    transform({ processor }) {
      processor
      .use(remarkRehype, {allowDangerousHtml: true})
      .use(rehypeStringify, {allowDangerousHtml: true})
    }
  };
  return {
    transformers: [allowHTML]
  }
}

And it works.

[KyleFontenot]

I am almost there, I have many things fixed. Thank you so much for your help. I'm only missing one thing now which I can't find in the Rehype ecosystem documentation, so I'm thinking outloud hoping someone may be able to answer.

My goal now is to be able to pass in props to the custom components via markdown.
I have it where the rehype node looks like (injecting in display: 'block' and float: 'left' as example props):

{
  "type": "element",
  "tagName": "img",
  "properties": {
    "src": "https://<examplepublicurl>",
    "alt": "sdfsdf",
    "float": "left",
    "display": "block",
  },
  "children": [],
  ...position
  }
}

It creates:

<img display="block" alt="sdfsdf" src="<examplepublicurl>" />

I'm stumped as to why display: "block" was processed into an HTML attribute, but float: "left" didn't create an attribute. I'm thinking that you can only attach properties to html tag prototype properties, but if that's the case, then why does the type property in Carta's documentation example work?
As a workaround I think I'll just use dataset properties; they seem to parse no problem.

[BearToCode]

I tried to add the float: left to the properties of the spans in the example and it is working fine. It is present both in the Rehype syntax tree and in the final HTML. Maybe double check your santizer? But yeah, I guess you can use the dataset properties if it works out for you.

[KyleFontenot]

Removing the sanitizer allows that to work. So i'll figure out how I can keep using the sanitizer.

As my personal use is trying to inject props into a img element, I thought that it would be more strict on attributes maybe (https://www.w3schools.com/tags/ref_attributes.asp). So, I tried injecting a global attribute, lang="en". Not only did it pass in the lang correctly, it allowed float to pass as an attribute. 🧐 no clue why that bypasses the sanitizer.

[BearToCode]

Well, very interesting... just out of curiosity, what sanitizer were you using? Maybe it's worth reporting it to the related repo if you find anything weird going on.
Anyway, I'm happy you got it working :)

[KyleFontenot]

I'm using isomorphic-dompurify .

---

Bingo, got it!:

const carta = new Carta({
    sanitizer: (input) => sanitize(input, {ADD_ATTR: ['float']}),
})