MarkdownField.svelte

<script>
  import { getSitecoreContext } from "jss-svelte";
  import marked from "marked";

  export let field = null;
  export let cssClass = "";

  let eeElement = null;

  const sitecoreContext = getSitecoreContext();
  const { context } = sitecoreContext;
  const { pageEditing } = context;

  let fieldValue = field.value;
  let markdown = "";

  const updateExperienceEditorField = () => {
    if (eeElement) {
      var elements = eeElement.getElementsByClassName("scWebEditInput");

      if (!elements.length) {
        console.warn("Unable to locate web edit field.");
        return;
      }

      const element = elements[0];

      // don't judge me
      const id = element.id.replace("_edit", "");
      document.getElementById(id).value = fieldValue;

      Sitecore.PageModes.ChromeManager.setModified(true);
    }
  };

  const handleTextAreaChange = () => {
    markdown = marked(fieldValue);
    updateExperienceEditorField();
  };
</script>

<style>
  textarea {
    width: 100%;
    height: 300px;
  }
  .ee {
    display: none;
  }
  .preview {
    text-align: left;
  }
</style>

{#if pageEditing}
  <div class="ee" bind:this={eeElement}>
    {@html field.editable}
  </div>
  <div class="row">
    <div class="col-md-6">
      <textarea
        bind:value={fieldValue}
        placeholder="type something interesting"
        on:keyup={handleTextAreaChange} />
    </div>
    <div class="col-md-6 preview">
      {@html markdown}
    </div>
  </div>
{:else}
  <div class={cssClass}>
    {@html markdown}
  </div>
{/if}