Support/migrate to Svelte 5 (#60)

README.md

@@ -8,7 +8,7 @@
 [![Monthly Downloads](https://badgen.net/npm/dm/svelte-tiptap)](https://www.npmjs.com/package/svelte-tiptap)
 [![License](https://badgen.net/npm/license/svelte-tiptap)](https://github.com/sibiraj-s/svelte-tiptap/blob/master/LICENSE)
 
-> [!IMPORTANT]
+> [!NOTE]
 > This is the documentation for **svelte-tiptap v1**, which is compatible with Svelte 4.
 > If you're using Svelte 5, check out the latest version [here](https://github.com/sibiraj-s/svelte-tiptap/?tab=readme-ov-file#svelte-tiptap).
 
@@ -38,7 +38,7 @@ A Simple editor.
   import { createEditor, Editor, EditorContent } from 'svelte-tiptap';
   import StarterKit from '@tiptap/starter-kit';
 
-  let editor: Readable<Editor>;
+  let editor = $state() as Readable<Editor>;
 
   onMount(() => {
     editor = createEditor({
@@ -144,8 +144,7 @@ export const SvelteCounterExtension = Node.create({
   import cx from 'clsx';
   import { NodeViewWrapper } from 'svelte-tiptap';
 
-  export let node: NodeViewProps['node'];
-  export let updateAttributes: NodeViewProps['updateAttributes'];
+  let { node, updateAttributes }: NodeViewProps = $props();
 
   const handleClick = () => {
     updateAttributes({ count: node.attrs.count + 1 });
@@ -156,7 +155,7 @@ export const SvelteCounterExtension = Node.create({
   <span>Svelte Component</span>
 
   <div>
-    <button on:click={handleClick} type="button">
+    <button onclick={handleClick} type="button">
       This button has been clicked {node.attrs.count} times.
     </button>
   </div>
@@ -173,7 +172,7 @@ import StarterKit from '@tiptap/starter-kit';
 
 import { SvelteCounterExtension } from './SvelteExtension';
 
-let editor: Readable<Editor>;
+let editor = $state() as Readable<Editor>;
 
 onMount(() => {
   editor = createEditor({
@@ -194,9 +193,7 @@ Refer https://www.tiptap.dev/guide/node-views/react/#all-available-props for the
 ```ts
 import type { NodeViewProps } from '@tiptap/core';
 
-export let node: NodeViewProps['node'];
-export let updateAttributes: NodeViewProps['updateAttributes'];
-// ...define other props as needed.
+let { node, updateAttributes }: NodeViewProps = $props();
 
 // update attributes
 const handleClick = () => {