svelte tiptap

+page.svelte

<script>
  import { onMount, onDestroy } from 'svelte'
  import { Editor } from '@tiptap/core'
  import StarterKit from '@tiptap/starter-kit'

  let element
  let editor
  let content = ""

  onMount(() => {
    editor = new Editor({
      element: element,
      extensions: [
        StarterKit,
      ],
      content: '<p>Hello World! 🌍️ </p>',
      onTransaction: () => {
        // force re-render so `editor.isActive` works as expected
        editor = editor
        content = editor.getHTML()
      },
    })
  })

  onDestroy(() => {
    if (editor) {
      editor.destroy()
    }
  })
</script>

{#if editor}
<div class="toolbar">
  <button
    on:click={() => editor.chain().focus().toggleHeading({ level: 1}).run()}
    class:active={editor.isActive('heading', { level: 1 })}
  >
    H1
  </button>
  <button
    on:click={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
    class:active={editor.isActive('heading', { level: 2 })}
  >
    H2
  </button>
  <button on:click={() => editor.chain().focus().setParagraph().run()} class:active={editor.isActive('paragraph')}>
    P
  </button>
</div>
{/if}

<div class="editor-input" bind:this={element} />

<br>
<h2>Formatted Content</h2>
<div>{@html content}</div>
<br>
<h2>Raw Content</h2>
<div>{content}</div>

<style>
  .editor-input {
    margin-top: 0.5rem;
  }

  .toolbar {
    display: flex;
    gap: 0.1rem;
  }

  button {
    background-color: green;
    box-shadow: 0 0 5px 3px black;
  }

  button.active {
    background: greenyellow;
    color: black;
    box-shadow: 0 0 5px 0px black;
  }
</style>