DEV Community

wolfiton
wolfiton

Posted on

Sapper SSR svelte: trying to add toast ui to the default template in index.svelte

Hi everyone,

I am trying to add toast-ui editor to the default sapper webpack template.
Update:
Create a github repo with the problem here
This is my index.svelte from src/routes and my moddifications so far:

<script>
  import { onMount } from "svelte";
  import marked from "marked";

  let markdown = "# Example Title\n\n- this\n- is\n- a list";

  onMount(async () => {
    let Editor = await import('@toast-ui/editor');
    const editor = new Editor({
      target: document.querySelector("#editor"),
      height: "500px",
      initialEditType: "markdown",
      previewStyle: "vertical"
    });
    editor.getHtml();
  });
</script>

<style>
  h1,
  figure,
  p {
    text-align: center;
    margin: 0 auto;
  }

  h1 {
    font-size: 2.8em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 0.5em 0;
  }

  figure {
    margin: 0 0 1em 0;
  }

  img {
    width: 100%;
    max-width: 400px;
    margin: 0 0 1em 0;
  }

  p {
    margin: 1em auto;
  }

  @media (min-width: 480px) {
    h1 {
      font-size: 4em;
    }
  }
</style>

<svelte:head>
  <title>Sapper project template</title>
</svelte:head>

<h1>Great success!</h1>

<figure>
  <img alt="Success Kid" src="successkid.jpg" />
  <figcaption>Have fun with Sapper!</figcaption>
</figure>
<textarea bind:value={markdown} placeholder="Enter markdown here" />
<div class="preview">
  {@html marked(markdown)}
</div>
<div id="editor" />
<p>
  <strong>
    Try editing this file (src/routes/index.svelte) to test live reloading.
  </strong>
</p>

My question is how to make this work and get rid of this error:

TypeError: Editor is not a constructor

Thanks in advance

Top comments (1)

Collapse
 
wolfiton profile image
wolfiton • Edited

Hi,

I come from the svelte discord because I didn't receive more help than where I am now.

So I am also trying to see what I can learn here.

Thanks @mattwaler for the suggestion