beartocode / carta Goto Github PK

carta will stop rendering stuff like highlightjs, <h1> if I do like below in +layout.svelte

import { ModeWatcher, setMode, resetMode } from 'mode-watcher';

btw, is there any easy way to add dual theme like light/dark in carta?

It would be nice to add a .sr-only class (see for example) with a label for each of the buttons in the toolbar so that it is sensible for non-visual users. Keyboard navigation is clean so far but without screen reader content, somebody tabbing through all the buttons would be a little lost before they get to the actual textarea.

GitHub's editor box that I'm typing this issue into uses arrow keys within the toolbar for navigation and uses tab to go between button groups only. That might be a nice enhancement, but it might increase the complexity a bit much.

Is this doable?
Kind of like being able to use svelte component as a plugin.

Another library that I've been using but it's blocking the main thread during parse. This library uses .svelte as plugins:
https://github.com/ssssota/svelte-exmarkdown

Would be cool to share info how I could render svelte components as plugin elements of diff parsed elements. My use case is mainly for images. Ibwant to render a lightbox component that relies on store for loading state. Any idea if this is easy to support?

Many thanks for this amazing library.

I'm unable to use this package with Cloudflare Pages since the bundle size becomes too large, this is probably due to shiki taking up a large amount of space.

I'd like to mention that I found some documentation that might be helpful, according to the shiki docs it's possible to use a "fine-grained bundle" to reduce the bundle size: shiki.style/guide/install#fine-grained-bundle

I'm using SvelteKit along with the latest version of carta (4.2.1), I've included some error messages along with some info on the bundle size below.

Output of rollup-plugin-visualizer

Vite output

.svelte-kit/output/client/_app/immutable/chunks/wasm.CsTmP73Z.js                      622.30 kB │ gzip: 231.14 kB
.svelte-kit/output/client/_app/immutable/chunks/cpp.CiNIqgXH.js                       628.27 kB │ gzip:  48.41 kB
.svelte-kit/output/client/_app/immutable/chunks/emacs-lisp.BEjL32p1.js                807.64 kB │ gzip: 203.35 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

Cloudflare

Error: Failed to publish your Function. Got error: Your Functions script is over the 1 MiB size limit (workers.api.error.script_too_large)

Thank you in advance.

Hi,
I am using Markdown (https://beartocode.github.io/carta/api/core#markdown-options) to render a markdown. The markdown includes code. I have created a component with Markdown and then I am using it in a parent component. Following is my Markdown component:

<script lang='ts'>
	import { Markdown, Carta } from 'carta-md';
	import '$lib/styles/github.scss';
	import DOMPurify from 'isomorphic-dompurify';
	import { code } from '@cartamd/plugin-code';
	let carta = new Carta({
		sanitizer: DOMPurify.sanitize,
		extensions: [code()]
	});
	export let noteText: string;
</script>

<Markdown bind:value={noteText} {carta} theme="github" />

The above throws the following error.

Uncaught (in promise) ShikiError: Language `python` not found, you may need to load it first
    at Object.getLanguage (chunk-64SPV7BA.js?v=a4fccd20:8133:13)
    at codeToTokensBase (chunk-64SPV7BA.js?v=a4fccd20:4713:29)
    at chunk-64SPV7BA.js?v=a4fccd20:4848:62
    at Array.map (<anonymous>)
    at codeToTokensWithThemes (chunk-64SPV7BA.js?v=a4fccd20:4848:51)
    at codeToTokens (chunk-64SPV7BA.js?v=a4fccd20:4916:25)
    at codeToHast (chunk-64SPV7BA.js?v=a4fccd20:5144:50)
    at Object.codeToHast (chunk-64SPV7BA.js?v=a4fccd20:8184:37)
    at @cartamd_plugin-code.js?v=a4fccd20:81:38
    at overload (chunk-5AD3OJQS.js?v=a4fccd20:195:12)

I have tried with other languages as well, but I get the same error. However, when I used MarkdownEditor, it is able to render code markdown properly without in both preview and editor tab. Not sure, If I am using it correctly.

Is there an exposed method for adding additional buttons to the menu buttons of carta? I'm thinking of adding a dedicated save button but could see a use for adding other custom buttons by maybe passing in the icon and callback function. Is this capability exposed somewhere?

Thanks for the library. I found it from a comment you left on a Reddit thread. It was easy to incorporate into my SvelteKit app. I like the scope of what you've chosen to take on here, and the UX is pretty nice.

I'm offering an internationalized app with multiple translations, but using the tabbed interface, I see that the tab names "Write" and "Preview" are hard coded. Could you support passing in an optional dictionary of strings for these and any other strings that appear in the interface?

If you like the idea, I'd be happy to contribute a PR. Might take me until after the December holidays to get to it though.

While the icons usually are self-explaining, sometimes a tooltip will make it easier to understand what they do.

[tl;dr] workaround:

  const carta = new Carta({
    extensions: [
      code({
        onError: () => {}
      })
    ]
  })

..to prevent throwing an exception, and silently ignore the error.

why this happens (short version):

There is a race condition involving the highlighter..
new languages are loaded by the Input component at the same time that the code plugin is trying to use them.

why this happens (long version):

Input.svelte#L98
Input.svelte#L93

  const highlightNestedLanguages = debounce(async (text: string) => {
    const highlighter = await carta.highlighter();
    const { updated } = await loadNestedLanguages(highlighter, text);
    if (updated) highlight(text);
  }, 300);

  $: highlightNestedLanguages(value);

Renderer.svelte#L39
Renderer.svelte#L31

  const debouncedRenderer = debounce(() => {
    carta
      .render(value)
      .then((rendered) => (renderedHtml = rendered))
      .then(() => events('render', void 0));
  }, carta.rendererDebounce ?? 300);

  $: debouncedRenderer(value);

carta.ts#L388

  public async render(markdown: string): Promise<string> {
    const processor = await this.asyncProcessor;
    const dirty = String(await processor.process(markdown));
    if (!dirty) return '';
    this.dispatcher.dispatchEvent(
      new CustomEvent<{ carta: Carta }>('carta-render', { detail: { carta: this } })
    );
    return (this.sanitizer && this.sanitizer(dirty)) ?? dirty;
  }

summary:

MarkdownEditor component includes both Input and Renderer components

• Input component includes a textarea and its value is export
  • when it changes, it detects the list of languages used by fenced code blocks and dynamically loads them into highlighter
• Renderer components has an input value prop
  • when it changes, remark processes the new value and updates its rendered HTML
  • the code remark extension uses the same instance of highlighter
  • when the updated value adds a new fenced code block but the language hasn't yet been loaded into highlighter, the the code remark extension throws an error:

      ShikiError: Language `xxx` not found, you may need to load it first
    

notes:

• the simplest way to trigger this race condition is to copy/paste a blob of markdown into the Input component's textarea
• I can't reproduce in your online demo
  • pretty sure it's because the GitHubExample uses tab mode, rather than split or auto
  • presumably, changing to the Preview tab triggers a render
• to reproduce:
  1. load docs from repo in dev server

       cd 'docs'
       npm install
       npm run dev

  2. add a new page with a minimal example of using the code extension in split mode
     • add file:

         src/routes/example/+page.svelte
       

     • edit content:

         <script lang="ts">
           import { Carta, MarkdownEditor } from 'carta-md'
           import { code } from '@cartamd/plugin-code'
       
           import 'carta-md/default.css'
       
           const carta = new Carta({
             extensions: [
               code()
             ]
           })
       
           let value = "```js\nconsole.log('Hello, World!');\n```"
         </script>
       
         <MarkdownEditor mode="split" bind:value {carta} />
       

  3. open in browser: example
     • SSR causes node.js to crash with error:
       ShikiError: Language 'js' not found, you may need to load it first
  4. prevent SSR
     • add file:

         src/routes/example/+page.server.js
       

     • edit content:

         export const ssr = false
         export const csr = true
       

     • restart dev server:

         npm run dev

  5. open in browser: example
     • before manually interacting with the textarea
       • input is styled
       • output is not styled
       • js console has log of error:
         Uncaught (in promise) ShikiError: Language 'js' not found, you may need to load it first
     • enter any character in the textarea
       • output is re-rendered and is now styled
       • js console does not display any additional errors

Hello,
I just wanted to thank you for your work, we already implemente it in our website https://toto.menu so restaurants can create richer descriptions.

You can close this issue

Just installed lates version of sveltekit with tailwind, and it looks like i am having some issue with the basic example you provide for sanitizers, it straight out throws an error.

app.js:16 ReferenceError: global is not defined
at node_modules/.pnpm/[email protected]/node_modules/isomorphic-dompurify/index.js (isomorphic-dompurify.js?v=697f9b3c:135780:22)
at __require2 (chunk-US62FMVV.js?v=697f9b3c:17:50)
at isomorphic-dompurify.js?v=697f9b3c:135786:16

First of all, thank you for this markdown editor. It looks very promising.

You mention in your Readme that it can be configured with tailwind typography. I would like to know how to do this best, especially for the previewing.

Perhaps anyone of you can assist?

Hi,

Thank you for the incredible work you have done for the svelte community. This project is truly valuable.
I would love to contribute to the development of this project.

I was just wondering if there are any plans to incorporate undo-redo for this markdown editor?
If not, I would love to code this functionality myself but I don't know where to start.

I would appreciate it if any ideas that would point me to the right direction so that I can implement this.

Thank you so much and I hope please let me know if this is against the guidelines to post this as an issue and if I should move this question to the discussions instead. Feel free to close this issue if deemed inappropriate. Thank you!

Could we start to implement mobile support?

I am building a hybrid mobile app and am looking for a md editor and renderer. I've been using https://github.com/ssssota/svelte-exmarkdown so far, but it is only renderer and your package has now come along.

I haven't dove into your specific code yet but could you perhaps be able to tell me if it would be possible to highlight code blocks by https://github.com/shikijs/shiki
I prefer non regex based highlighting for accuracy. Would be a great addition.

I am not able to edit on the demo with my phone, no editor UI comes up so I am assuming youbare only using it on desktop? I would love to help improve the mobile UX but perhaps you are already working on it?

Sanitizing the parsed markdown may interfere with things like marked plugins or even basic markdown syntax like images. So the sanitizing should run on the raw input and not the parsed markdown.
Maybe in addition a second option that allows for sanitizing the parsed markdown as well? But I'm not sure in what case someone would need that...

Firstly, I want to thank you on putting together this great library. Secondly, I think this should be possible, but couldn't figure out a way to do so. So I am using Markdown to render a markdown string. The string has couple of code lines and rest of it are normal text. I want to change the background color of code lines from rest of normal lines.

Currently it looks something like following:

I want to change it to something like, notice the code lines have slightly grayish background which is different from rest of the lines.

Hello,

Is there a way to render newlines? <br> is the only thing that seems to be working for me. https://www.markdownguide.org/basic-syntax/#line-break-best-practices suggests ending a line with two spaces should create a new line.

Is there an easy way to convert components to other like renderers in svelte-markdown or react-markdown.

I want to add a copy button in pre blocks but writing unified plugins seems too hard for me.

When rendering markdown, normally the headings need to be referencable by URL hash, so I add this plugin anchor to do this.

Looking for documentation on adding event listeners to the editor component. on:change / on:input do not seem to be triggering on textarea options

Thanks

if there are no theme setting like theme: 'github-light', code will be highlighter. but if include theme setting in code(). all code will be rendering as normal code block without highlight.

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

	import './github.scss';

	const carta = new Carta({
		sanitizer: false,
		extensions: [
			code({
				theme: 'github-light',
				langs: ['html', 'js', 'ts', 'python', 'ruby', 'php', 'java', 'c', 'csharp', 'cpp', 'css', 'sql', 'swift', 'go', 'kotlin', 'rust', 'bash', 'scala', 'julia', 'powershell', 'json', 'xml', 'yaml', 'latex', 'r', 'dart']
			})
		]
	});

	export let value = `This is an example inspired by [GitHub](https://github.com)
\`\`\`js
console.log('Hello, World!');
\`\`\`

\`\`\`python
def sum(a, b):
	return a + b
\`\`\`

`;
</script>

<MarkdownEditor bind:value mode="tabs" theme="github" {carta} />

<style>
	:global(.shiki),
	:global(.shiki span) {
		color: var(--shiki-dark) !important;
	}

	:global(button) {
		background: transparent;
		border: 0;
	}
</style>

I created a new sveltekit app and I get the following errors. Is there something I'm missing to be able to use the code plugin?

8:24:16 PM [vite] Error when evaluating SSR module /src/routes/+page.svelte: failed to import "@cartamd/plugin-code"
|- Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/tmp/delete/deletme/node_modules/carta-md/dist/internal/carta' imported from /tmp/delete/deletme/node_modules/carta-md/dist/index.js
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:327:11)
    at moduleResolve (node:internal/modules/esm/resolve:980:10)
    at defaultResolve (node:internal/modules/esm/resolve:1193:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:403:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:372:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:249:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
    at link (node:internal/modules/esm/module_job:75:36)

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/tmp/delete/deletme/node_modules/carta-md/dist/internal/carta' imported from /tmp/delete/deletme/node_modules/carta-md/dist/index.js
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:327:11)
    at moduleResolve (node:internal/modules/esm/resolve:980:10)
    at defaultResolve (node:internal/modules/esm/resolve:1193:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:403:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:372:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:249:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
    at link (node:internal/modules/esm/module_job:75:36) {
  url: 'file:///tmp/delete/deletme/node_modules/carta-md/dist/internal/carta',
  code: 'ERR_MODULE_NOT_FOUND'

I think it could be a really useful feature to allow a user to just paste in an image into the editor, and it becomes attached, similar to how GitHub does it.

HTMLElements paste event could be used for this.

default.css is using .carta-viewer class, which is only available with MarkdownViewer.
When using MarkdownEditor, the icons are not showing.

Fix: use .markdown-body class instead.

While we can embed videos using HTML like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=n1PmPV5KwExea0aZ&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

It's cleaner to just use the video ID or URL:

@[youtube](dQw4w9WgXcQ)
@[vimeo](https://vimeo.com/347119375)

Is there any easy way to overwrite button's text like "write" => "編集"
"Quota" => "引用"?

Async Marked extensions need to be awaited, and so currently they don't work.
In carta-md/$lib/internal/carta:

public async render(markdown: string): Promise<string> {
  return new Promise((resolve) => {
    marked.parse(markdown, (e, dirty) => {
      resolve((this.options?.sanitizer && this.options?.sanitizer(dirty)) ?? dirty);
    });
  });
}

As in the marked docs, this needs to be awaited if someone (me) passes an async extension. I think the same thing stands for the renderSSR function but I battled Marked for 5 hours now and I'm tired. I'll submit a PR when I can. A minimal repro of an async marked extension can be found here, if you want to get on this before me.

Hi,

First thank you for this amazing tool that is Carta. I really love your simple approach for a markdown Editor. I got easily lost on milkdown and your lib was doing exactly what I needed for my app.

I spotted a strange behavior while I was implementing your lib onto my UI.

Current behavior :
As the commit hide icons on small devices goal was to hide the icon on small device (such as small screen or mobile screen), the condition for checking the width of screen to hide or not the icons may have been incorrectly used.

the bind:clientWidth will actually give you the width of the div, and not the screen. If it was intentional, the following behavior happens when we voluntary wants the editor to have a smaller width on a wide screen :

Screenshot of the width of the div just before its limit :

Screenshot when the width is below the threshold :

As shown above, in a screen where the editor could easily display the icons, it will hide it because of the current threshold :

option 1 : If it was intentional to hide the icons depending on the div width and not the width screen :
To not disrupt the current implemented behavior, I was thinking of allowing the dev to inject is own function to hideIcons, and having the current behavior as its default one. It will not disrupt current implementations and also enable new ones to changes its behavior
I was thinking of maybe allowing an option to enable the dev to put is own condition to hide the icons.

option 2 : If the goal was to currently check the window width :
We could also implement the option 1, but we should fix the width source form the div to actually the window width.

I will try during the week to come up with a possible design solution for that.

Thanks again for this amazing lib !

Both isomorphic-dompurify and sanitize-html don't work on Cloudflare workers.

In the case of isomorphic-dompurify this is because it tries to access window on the server. This issue is documented here kkomelin/isomorphic-dompurify#228

sanitize-html uses path which is unsupported on cloudflare workers.

isomorphic-dompurify would work perfectly if we could somehow stop it from trying to use window on the server side.

What do you recommend we do in this case?

It is really a great job! 💯
I'm interested in learning how to integrate an image uploader into this project.
Would you be able to provide some guidance or ideas on how to proceed?

Now that Marked has been replaced with a combination of Unified, Remark and Rehype, the dependency to marked package should be removed.

I'm using <CartaEditor> within a <form> and would like to customize the formData entry name to be different than "md". Can there be a way to specify a custom name attribute?

Nice Job!

Would it be possible to add some kind of placeholder support?
Something like type @ and then get a list of possible names etc to be inserted.
But then again, not able to adjust any of the name/placeholder without first removing it again (so not just adding the text)?

#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>

My pcss defined light and dark mode,
but when I trying to apply it to github.scss like $background: var(--background); which not works.
Could you tell me how to set it?

Here is my pcss.
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
}

I'm noticing that in the MarkdownEditor the text cursor is not centered where I'm typing. It's actually way off. I start typing where there cursor is but the text is showing up on a different line.

The cursor is where the yellow is. but the text is coming out where the red is. The further I go down in the editor to larger the offset between the cursor and text.

I thought this was a tailwind issue cause the MD wasn't showing up in the preview window correctly.

I've tried using Tailwind Typography like the docs mention. But looks like the only way to use that is to wrap the the MarkdownEditor in a div like this.

<article class="prose lg:prose-xl"><MarkdownEditor mode="tabs" {carta} bind:value /></article>

This formats the MD correctly but the text cursor in the editor is still not correct.

Error on load

carta-md.js?v=7095f9a7:2455 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'scrollWidth')
at overflowing (carta-md.js?v=7095f9a7:2455:41)
at carta-md.js?v=7095f9a7:2456:14
at carta-md.js?v=7095f9a7:186:32

Hi there, recently updated to SvelteKit 2 and also using Svelte 5 with runes mode enabled, seems to break the package and I am unable to get it working.

Hello,
Awesome library.
I was playing around with this library and see how it would look for an app I am making. I'm also using Markedjs (version 9.1.5) library itself in a different part of my app.
but I noticed that markedjs version is different in cartamd.
After doing a brief search in this repository, I'm seeing 4.3.0 or 6.0.0.
I've also gotten a warning in the terminal:

 WARN  Issues with peer dependencies found
.
└─┬ @cartamd/plugin-emoji 2.7.2
  └── ✕ unmet peer marked@^4.3.0: found 9.1.5

Hello again. Sorry to be a bother.
I was testing out the new version (4.2.1) and everything is working perfectly.
However, I did notice one minor UX issue..

When MarkdownEditor mode is 'tabs' and the 'Preview' tab is active,
(I would assert that..) icons in the Toolbar component shouldn't be visible.

Besides being confusing to the user, clicking on any Toolbar icon produces the error:

Uncaught TypeError: can't access property "value", textarea is null

Would you be open to considering a PR that makes this change?

The buttons below should have type="button" to prevent form submission. The other toolbar buttons (i.e. formatting) appear to be OK.

<div class="carta-toolbar-left svelte-c0kkni">
   <button class="carta-active">Write</button> 
   <button class="">Preview</button>
</div>

I'm seeing the .carta-input and .carta-renderer is hard coded to be at height of 600px. Is there any options for the editor to take up 100% of the parent container without overflowing?

Just getting started with carta and after installing the main package and a couple of plugins in a sveltekit project, I tried to render a very simple md paragraph, and noticed that <li> don't have a bullet points by default. The text shows up fine, but there is no bullet before it.
I suspect that a stylesheet needs to be included, but by default, the bullet points are not present. So I tried including/removing the css included in the plugins, as well as "@tailwindcss/typography" but the problem remains.
The example page does show the bullet points, so I suspect this is just a basic omission on my part, but could you let me know what I'm missing?
Or is there a list-style-type directive I need to include elsewhere?
Here's what I have:

	import { Carta, CartaEditor, CartaViewer } from 'carta-md';
	import { emoji } from '@cartamd/plugin-emoji';
	import { slash } from '@cartamd/plugin-slash';
	import { code } from '@cartamd/plugin-code';
	import 'carta-md/default.css'; /* Default theme */
	import 'carta-md/light.css'; /* Input theme */
	import '@cartamd/plugin-emoji/default.css';
	import '@cartamd/plugin-code/default.css';

and I include the component like this:

<CartaEditor {carta} bind:value mode="tabs" placeholder="sample text"></CartaEditor>

The md I am using is:

**a simple list**
* item 1
* item 2
* item 3
'''    <---backticks
let y=0
$: ({tt}=data
'''     <--- also backticks

With the paragraph above, the bold text does show up as bold, and the code block is formatted with a dark font.
I am using "carta-md": "^3.4.0" and when I first installed it, I got an error to the effect that carta was not found so I also npm i carta. Not sure if that's part of the problem

This editor is so cool, kudos!

I'm not too familiar with svelte, but how hard would it be to compile this into JS and have a pure JS api to bind it to an element.

carta = new Cart()
render(carta, document.getElementById("editor")) 

That way it can be used in a react or vanilla project as well?

I had it working great in a tiny side project, so I decided to bring it into my main work project. Everything seemed fine, but when playing around something seemed off. The caret didn't match up with what I was selecting, and text would appear in totally unexpected places.
Turns out my root styles (CSS Remedy that I stole from Tailwind and my general root styles) were overriding the <textarea /> that Carta uses for input (really cool btw, hadn't thought of that).

So if anyone in the future is struggling, check what styles apply to the #md textarea, especially width, height and line-height.

Sidenote, maybe we could increase the selector specificity for some of the internal elements like textarea? I think the styles that were causing trouble for me were just

textarea {
   /* Whatever the hell it was */
}

having a specificity of (0, 0, 1). I think maybe changing the textarea selector in MarkdownInput.svelte to .carta-input > textarea would help?

When simply displaying a value using the Markdown tag, the output doesn't render when the value variable is set. Shouldn't it update when the value changes?

Here's a simple example demonstration:

<script>
	import { Carta, Markdown } from "carta-md";
	const carta = new Carta();
	let value = "asdf";
</script>

Plain (updates correctly): {value} 
<hr />
<Markdown {carta} {value} />
<button on:click={() => value += " x"}>Click</button>

I am just trying out the v4 of this library in a SvelteKit project, but the build fails, probably due to this issue of shiki trying to load files using fs - vercel/vercel#8726.

It would be nice if there was an easier way to use the markdown viewer in a 'read-only' mode, or what you have termed 'preview' mode.

It seems like it always starts in 'write' mode and you have to click 'preview' to get to preview mode. Im not seeing an easy way to start it in 'preview' mode and just hide those tabs entirely, unless I'm missing something.

Really cool project though :D Thanks!

The referenced domain is not working currently.

Initially I loved this library, seeing seamless integration of plugins.
But as i went to use it for advanced use cases, I felt disappointed.

First thing, I cannot change theme of code highlighter without re-initializing carta. So even following does not work:

carta.highlighter().then(async (h) => {
  h.setTheme(currentTheme);
});

I must have to re-init carta = new Carta({theme: currentTheme});

Second thing, live streaming of markdown is not supported directly only for Mardown viewer. I tried to copy internal Renderer component, it works but then especially with code and tikz there are limitations. It will throw errors like "javascript language not found, please load it first". May be this is due to smallest debounce time I set. but debounce time is still not valid solution, if library is trying to load language file from server as needed. what if request takes lot of time? Also debounce time makes streaming flow slower.
So i need to load all bundled languages at once, which is also not good practice, as why I load python when I actually do not need it.
Note that I cannot render html from server side. Server already returns markdown as EventStream. Think like I want to make chat bot.

Ultimately either there is no better way for such use case in this lib OR I am not getting right way from docs. I would appreciate if developers of this lib can throw some light and give me little help.

Thanks,
Jay