<script lang="javascript">
  import { marked } from 'marked'

  let value = $state(`# Heading 1
This is a paragraph that I need to put in *here is some italics*
1. This is a list
2. This is a second list
3. 

## Heading 2
---
**Bold**

Regular; hmm double enter gets a new \<p>

> This is a quote
> This is starting to work
> It will only line over on width basis I guess that makes sense
`)

  $inspect("n", value)
</script>

<svelte:head>
	<title></title>
	<meta name="description" content="" />
</svelte:head>

<section>
	<div>
    <h1>Editor</h1>
    <div>
      <textarea bind:value={value}>

      </textarea>
    </div> 
  </div>
  <div id="preview">
    <h1>Preview</h1>
    <div>
      {@html marked.parse(value)}
    </div>
  </div>
</section>

<style lang="scss">
  @use '/src/app.scss' as *;
	section {
    width: 100%;
    display: flex;
    gap: 1rem;
    div{
      margin: 0 auto;
      flex-basis: 45%;
      textarea {
        resize: none;
        width: 100%;
        height: 40rem;
        line-height: 1.5;
        border-radius: 5px;
        border: 1px solid $green;
        background: $green-42;
        color: $yellow;
        font-family: "Garamond";
      }
    }
    em{
      // font-weight: 240;
      color: black;
    }
    #preview{
      :global(h1){
        font-family: "Initials";
      }
      :global(hr){
        color: $green;
      }
      :global(blockquote) {
        background: $green-42;
        border-left: 1rem solid $green;
        padding: 0.5rem 1rem;
        &:before {
          color: $orange;
          content: open-quote;
          font-size: 2rem;
          line-height: 0.1rem;
          vertical-align: -0.6rem;
        }
        &:p {
          display: inline;
        }
      }

    }
	}
</style>