<script lang="ts">
  import Panel from '../elements/Panel.svelte';

  export let data: WidgetMarkdown;
  export let preview: WidgetRenderedMarkdown | undefined = undefined;
  export let handle: boolean = false;
  export let isPreview: boolean = false;
</script>

<Panel preview={isPreview} {handle}>
  <div class="contents markdown">
    {#key data}
      {#key preview}
        {#if preview}
          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
          {@html preview.html}
        {:else}
          <p class="break-words whitespace-pre-line">{data.content.trim()}</p>
        {/if}
      {/key}
    {/key}
  </div>
</Panel>
