svelte example fails

[pd4d10]

svelte example fails

[pd4d10]

It is recommended to save Markdown text instead of HTML, because Markdown can be transformed to HTML losslessly, while the reverse can not.

[pd4d10]

I just ran npm i

Did you run it at examples/svelte folder? The examples are not included in the monorepo.

[amalshaji]

Yes, I downloaded the example/svelte folder, cd and ran npm i

[pd4d10]

Oh, it seems the package bytemd and plugins are not listed in the dependencies of the example.

The temporary solutions is to run yarn && yarn devat the root folder, which would link all packages to the root node_modules, which the example could access too.

[amalshaji]

It worked, except the .flat() wasn't supported by the browser, wrote one in rollup.config.json

[pd4d10]

.flat() wasn't supported

Upgrade the Node.js version should solve this problem

[amalshaji]

node --version
v15.1.0

Image uploaded to the editor is not working

[pd4d10]

Yeah, it is because the upload option is to simply convert image to base64, while the data: scheme is not allowed by default.

https://github.com/bytedance/bytemd/blob/cdb89e016eb58eca0e32519d21c445d1f80d5450/examples/svelte/src/App.svelte#L69-L73

There are two ways to solve this problem:

1. Change the upload option to uploading the image files to the server then return a URL (Recommended)

       importImage({ 
         upload(files) { 
           return uploadFilesToServer(files) // return ['https://xxx']
         }, 
       }), 

2. Customize sanitize schema to allow data: scheme:

<Editor sanitize={(schema) => {
  schema.protocols.src.push('data')
  return schema
}} />

[amalshaji]

Thanks for replying patiently. Now I feel the image doubt was pretty stupid; I should've gone through the source code.

[amalshaji]

How do I access the rendered HTML in the svelte example?

[pd4d10]

import { getProcessor } from 'bytemd'
const html = getProcessor({ plugins: [/*add your plugins*/] }).processSync('# markdown text').toString()