Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

svelte example fails #10

Closed
amalshaji opened this issue Nov 8, 2020 · 11 comments
Closed

svelte example fails #10

amalshaji opened this issue Nov 8, 2020 · 11 comments

Comments

@amalshaji
Copy link

I tried running the svelte example and it fails with an error,

Module not found: Error: Can't resolve 'svelte/internal'

Are there any specific build steps? I just ran npm i

@pd4d10
Copy link
Owner

pd4d10 commented Nov 8, 2020

I just ran npm i

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

@amalshaji
Copy link
Author

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

@pd4d10
Copy link
Owner

pd4d10 commented Nov 8, 2020

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
Copy link
Author

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

@pd4d10
Copy link
Owner

pd4d10 commented Nov 8, 2020

.flat() wasn't supported

Upgrade the Node.js version should solve this problem

@amalshaji
Copy link
Author

amalshaji commented Nov 8, 2020

node --version
v15.1.0

Image uploaded to the editor is not working

no image

@pd4d10
Copy link
Owner

pd4d10 commented Nov 8, 2020

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']
         }, 
       }), 
  1. Customize sanitize schema to allow data: scheme:
<Editor sanitize={(schema) => {
  schema.protocols.src.push('data')
  return schema
}} />

@amalshaji
Copy link
Author

amalshaji commented Nov 8, 2020

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

@amalshaji amalshaji reopened this Nov 8, 2020
@amalshaji
Copy link
Author

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

@pd4d10
Copy link
Owner

pd4d10 commented Nov 8, 2020

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

@pd4d10
Copy link
Owner

pd4d10 commented Nov 8, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants