Merge branch 'main' into feature/react

# Conflicts:
#	yarn.lock

docs/package.json

@@ -29,7 +29,7 @@
     "tippy.js": "^6.3.1",
     "vue-github-button": "^1.1.2",
     "y-indexeddb": "^9.0.6",
-    "y-prosemirror": "^1.0.6",
+    "y-prosemirror": "^1.0.7",
     "y-webrtc": "^10.1.7",
     "y-websocket": "^1.3.11",
     "yjs": "^13.5.1"

docs/src/docPages/installation/svelte.md

@@ -7,7 +7,7 @@ The following guide describes how to integrate tiptap with your Svelte project.
 
 TODO
 
-Svelte REPL: https://svelte.dev/repl/c839da77db2444e5b23a752266613639?version=3.31.2
+Svelte REPL: https://svelte.dev/repl/3651789dcfcb40de80b1ba36263d4bbd?version=3.31.2
 
 App.svelte
 ```html
@@ -21,8 +21,8 @@ App.svelte
 Editor.svelte
 ```html
 <script type="module">
-	import { onMount } from 'svelte'
-	import { Editor } from '@tiptap/core'
+  import { onMount, onDestroy } from 'svelte'
+  import { Editor } from '@tiptap/core'
   import { defaultExtensions } from '@tiptap/starter-kit'
 
   let element
@@ -32,21 +32,37 @@ Editor.svelte
     editor = new Editor({
       element: element,
       extensions: defaultExtensions(),
+      content: '<p>Hello <strong>Svelte</strong>!<p>',
+      onTransaction: () => {
+        // force re-render so `editor.isActive` works as expected
+        editor = editor
+      },
     })
   })
+
+  onDestroy(() => {
+    editor.destroy()
+  })
 </script>
 
 {#if editor}
-  <button on:click={editor.chain().focus().toggleBold().run()} class:error={editor.isActive('bold')}>
-    bold
+  <button on:click={() => editor.chain().focus().toggleBold().run()} class:active={editor.isActive('bold')}>
+    Bold
   </button>
-  <button on:click={editor.chain().focus().toggleItalic().run()} class:error={editor.isActive('italic')}>
-    italic
+  <button on:click={() => editor.chain().focus().toggleItalic().run()} class:active={editor.isActive('italic')}>
+    Italic
   </button>
-  <button on:click={editor.chain().focus().toggleStrike().run()} class:error={editor.isActive('strike')}>
-    strike
+  <button on:click={() => editor.chain().focus().toggleStrike().run()} class:active={editor.isActive('strike')}>
+    Strike
   </button>
 {/if}
 
 <div bind:this={element} />
+
+<style>
+  button.active {
+    background: black;
+    color: white;
+  }
+</style>
 ```