cosveti-sync 0.0.1 → 0.0.2

package/README.md

@@ -1,6 +1,7 @@
 # cosveti-sync
 
-Real-time collaborative editing for TipTap in Svelte with Convex synchronization
+Real-time collaborative editing for TipTap in Svelte with Convex synchronization.
+Translated to svelte from [React version](https://github.com/get-convex/prosemirror-sync)
 
 ## Features
 
@@ -26,6 +27,9 @@ yarn add cosveti-sync
 
 # pnpm
 pnpm add cosveti-sync
+
+# bun
+bun install cosveti-sync
 ```
 
 This package has the following peer dependencies that you'll also need to install:
@@ -41,119 +45,33 @@ This package has the following peer dependencies that you'll also need to instal
 First, set up the backend API in your Convex project. Create a file like `convex/tiptapSync.ts`:
 
 ```typescript
-import { TiptapSyncSvelte } from 'cosveti-sync';
-import { defineComponent } from './_generated/server';
-import { api } from './_generated/api';
-
-// Initialize the component
-const tiptapSyncComponent = defineComponent('./component');
-
-// Create the sync instance
-const tiptapSyncSvelte = new TiptapSyncSvelte(tiptapSyncComponent);
-
-// Export the sync API with optional permission checks
-export const {
-  getSnapshot,
-  submitSnapshot,
-  latestVersion,
-  getSteps,
-  submitSteps
-} = tiptapSyncSvelte.syncApi({
-  // Optional: Add read/write permission checks
-  checkRead: async (ctx, id) => {
-    // Add your authorization logic here
-  },
-  checkWrite: async (ctx, id) => {
-    // Add your authorization logic here
-  },
-  // Optional: Callback when a new snapshot is available
-  onSnapshot: async (ctx, id, snapshot, version) => {
-    // Do something when a new snapshot is saved
-  }
-});
-
-// Export the API for the client to use
-export default {
-  tiptapSyncSvelte
-};
+import { TiptapSyncSvelte } from '../lib/client/index.js';
+import { components } from './_generated/api.js';
+
+const tiptapSyncSvelte = new TiptapSyncSvelte(components.tiptapSyncSvelte);
+export const { getSnapshot, submitSnapshot, latestVersion, getSteps, submitSteps } =
+	tiptapSyncSvelte.syncApi();
+
 ```
 
-### 2. Client-Side Usage
+### 2. Convex Config 
 
-In your Svelte component, use the `useTiptapSync` hook:
+First, set up the backend API in your Convex project. Create a file like `convex/convex.config.ts`:
 
-```svelte
-<script lang="ts">
-  import { useTiptapSync } from 'cosveti-sync';
-  import { api } from '$convex/_generated/api';
-  import { useConvexClient } from 'convex-svelte';
-  import { Editor } from '@tiptap/core';
-  import { StarterKit } from '@tiptap/starter-kit';
-  import { onMount } from 'svelte';
-
-  // Get the Convex client (assuming convex-svelte is set up)
-  const convex = useConvexClient();
-
-  // Initialize the sync functionality
-  const { isSyncEnabled, extension, isLoading, initialContent, create } = $derived(
-    useTiptapSync(
-      convex,
-      api.tiptapSyncSvelte,
-      'your-document-id', // Unique document ID
-      {
-        onSyncError: (error) => {
-          console.error('Sync error:', error);
-        },
-        snapshotDebounceMs: 1000, // Debounce snapshot submissions (default: 1000ms)
-        debug: false // Enable debug logging (default: false)
-      }
-    )
-  );
-
-  let editorContainer: HTMLElement;
-  let editor: Editor;
-
-  onMount(() => {
-    if (!$extension) return;
-
-    editor = new Editor({
-      element: editorContainer,
-      extensions: [
-        StarterKit,
-        $extension // Add the sync extension from useTiptapSync
-      ],
-      content: $initialContent
-    });
-  });
-
-  function handleCreateDocument() {
-    create({
-      type: 'doc',
-      content: [
-        { type: 'paragraph', content: [{ type: 'text', text: 'Hello world!' }] }
-      ]
-    });
-  }
-</script>
+```typescript
+import { defineApp } from 'convex/server';
 
-{#if $isLoading}
-  <div>Loading editor...</div>
-{:else if !$initialContent}
-  <button on:click={handleCreateDocument}>
-    Create New Document
-  </button>
-{:else if $extension}
-  <div>
-    <button
-      on:click={() => $isSyncEnabled.update(n => !n)}
-    >
-      {$isSyncEnabled ? 'Pause Sync' : 'Resume Sync'}
-    </button>
-    <div bind:this={editorContainer}></div>
-  </div>
-{/if}
+import tiptapSyncSvelte from '../lib/component/convex.config.js';
+
+const app = defineApp();
+
+app.use(tiptapSyncSvelte);
+
+export default app;
 ```
 
+
+
 ## API Documentation
 
 ### `useTiptapSync()`
@@ -203,68 +121,53 @@ Here's a complete example showing how to integrate the library:
 
 ```svelte
 <script lang="ts">
-  import { useTiptapSync } from 'cosveti-sync';
-  import { api } from '$convex/_generated/api';
-  import { useConvexClient } from 'convex-svelte';
-  import { Editor } from '@tiptap/core';
-  import { StarterKit } from '@tiptap/starter-kit';
-  import { onMount, onDestroy } from 'svelte';
-
-  const convex = useConvexClient();
-  const documentId = 'my-shared-document';
-
-  const {
-    isSyncEnabled,
-    extension,
-    isLoading,
-    initialContent,
-    create
-  } = $derived(
-    useTiptapSync(convex, api.tiptapSyncSvelte, documentId)
-  );
-
-  let editorContainer: HTMLElement;
-  let editor: Editor;
-
-  $: if ($extension && $initialContent && !editor) {
-    editor = new Editor({
-      element: editorContainer,
-      extensions: [
-        StarterKit,
-        $extension
-      ],
-      content: $initialContent
-    });
-  }
-
-  onDestroy(() => {
-    editor?.destroy();
-  });
-
-  function handleCreate() {
-    create({
-      type: 'doc',
-      content: [{ type: 'paragraph', content: [{ type: 'text', text: 'New document' }] }]
-    });
-  }
+	import { useTiptapSync } from '$lib/index.js';
+	import { api } from '$convex/_generated/api.js';
+	import type { ConvexClient } from 'convex/browser';
+	import { useConvexClient } from 'convex-svelte';
+	import Editor from './Editor.svelte';
+
+	// This is if you have used convex-svelte pakage in +layout.svelte to setup the client
+	const convex: ConvexClient = useConvexClient();
+
+	const { isSyncEnabled, extension, isLoading, initialContent, create } = $derived(
+		useTiptapSync(convex, api.tiptapSyncSvelte, 'test-doc-id')
+	);
+
+	let editor = $state<Editor>();
 </script>
 
-<div class="editor-container">
-  {#if $isLoading}
-    <p>Loading...</p>
-  {:else if !$initialContent}
-    <button on:click={handleCreate}>Create Document</button>
-  {:else if $extension}
-    <div class="controls">
-      <button
-        on:click={() => $isSyncEnabled.update(enabled => !enabled)}
-      >
-        {$isSyncEnabled ? 'Pause Sync' : 'Resume Sync'}
-      </button>
-    </div>
-    <div bind:this={editorContainer} class="editor"></div>
-  {/if}
-</div>
+{#if $isLoading}
+	Loading...
+{:else if !$initialContent}
+	<button
+		onclick={() => {
+			create({ type: 'doc', content: [] });
+		}}
+		>Create doc
+	</button>
+{:else if $extension != undefined}
+	<div class="py-4 text-center text-xl font-bold">
+		Shadcn Example
+		<button
+			onclick={() => {
+				isSyncEnabled.update((n) => !n);
+				console.log($isSyncEnabled);
+			}}
+		>
+			{#if $isSyncEnabled}Pause Sync{:else}Resume Sync{/if}
+		</button>
+		<div class="z-50 mt-12 size-full w-screen rounded-md border border-dashed bg-background">
+			<Editor
+				class="h-120 max-h-screen overflow-y-scroll pr-2 pl-6"
+				additionalExtensions={$extension}
+				content={$initialContent}
+				bind:editor
+			/>
+		</div>
+	</div>
+{/if}
+
 ```
 
 ## License

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "cosveti-sync",
 	"description": "A convex component for syncing tiptap in a svelte project",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",