Example: change-tracking
import { defineBasicExtension } from 'prosekit/basic' import { createEditor, union, } from 'prosekit/core' import { defineCommitViewer, type Commit, } from 'prosekit/extensions/commit' import { defineReadonly } from 'prosekit/extensions/readonly' import { ProseKit } from 'prosekit/react' import { useMemo } from 'react' export default function DiffViewer({ commit }: { commit: Commit }) { const editor = useMemo(() => { const extension = union( defineBasicExtension(), defineReadonly(), defineCommitViewer(commit), ) return createEditor({ extension }) }, [commit]) return ( <ProseKit editor={editor}> <div className="box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow flex flex-col bg-white dark:bg-gray-950 color-black dark:color-white"> <div className="relative w-full flex-1 box-border overflow-y-scroll"> <div ref={editor.mount} className="ProseMirror box-border min-h-full px-[max(4rem,_calc(50%-20rem))] py-8 outline-none outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500"></div> </div> </div> </ProseKit> ) }
import 'prosekit/basic/style.css' import 'prosekit/basic/typography.css' import { defineBasicExtension } from 'prosekit/basic' import { createEditor, union, type NodeJSON, } from 'prosekit/core' import { defineCommitRecorder, type CommitRecorder, } from 'prosekit/extensions/commit' import { ProseKit } from 'prosekit/react' import { useMemo } from 'react' export default function Editor({ commitRecorder, defaultContent, }: { commitRecorder: CommitRecorder defaultContent?: NodeJSON }) { const editor = useMemo(() => { const extension = union( defineBasicExtension(), defineCommitRecorder(commitRecorder), ) return createEditor({ extension, defaultContent }) }, [commitRecorder, defaultContent]) return ( <ProseKit editor={editor}> <div className="box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow flex flex-col bg-white dark:bg-gray-950 color-black dark:color-white"> <div className="relative w-full flex-1 box-border overflow-y-scroll"> <div ref={editor.mount} className="ProseMirror box-border min-h-full px-[max(4rem,_calc(50%-20rem))] py-8 outline-none outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500"></div> </div> </div> </ProseKit> ) }
import 'prosekit/basic/style.css' import 'prosekit/basic/typography.css' import type { NodeJSON } from 'prosekit/core' import { CommitRecorder, type Commit, } from 'prosekit/extensions/commit' import { useCallback, useMemo, useState, } from 'react' import EditorDiff from './editor-diff' import EditorMain from './editor-main' export default function Editor() { const [commits, setCommits] = useState< { id: string; date: Date; commit: Commit }[] >([]) const [key, setKey] = useState(0) const [defaultContent, setDefaultContent] = useState<NodeJSON | undefined>() const commitRecorder = useMemo(() => new CommitRecorder(), []) const handleCommit = useCallback(() => { const commit = commitRecorder.commit() if (!commit) return const id = Math.random().toString(36).slice(2, 9) setCommits((commits) => [{ id, date: new Date(), commit }, ...commits]) }, [commitRecorder]) const handleRestore = useCallback( (id: string) => { const index = commits.findIndex((commit) => commit.id === id) if (index === -1) return const doc = commits[index].commit.doc setDefaultContent(doc) setCommits((commits) => commits.slice(index)) setKey((key) => key + 1) }, [commits], ) return ( <div className="grid grid-cols-2 gap-2"> <div className="flex flex-col gap-4"> <div className="max-h-md"> <EditorMain key={key} defaultContent={defaultContent} commitRecorder={commitRecorder} /> </div> <button onClick={handleCommit} className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-10 px-4 py-2"> Save </button> </div> <div className="flex flex-col gap-4"> {commits.map((commit) => ( <div key={commit.id}> <div className="max-h-md"> <EditorDiff commit={commit.commit} /> </div> <div className="w-full inline-flex justify-between p-1 text-sm"> <span className="opacity-50"> {commit.date.toLocaleTimeString()} </span> <button className="underline opacity-50 hover:opacity-100" onClick={() => handleRestore(commit.id)} > Restore </button> </div> </div> ))} </div> </div> ) }
<script lang="ts"> import { defineBasicExtension } from 'prosekit/basic' import { createEditor, union, } from 'prosekit/core' import { defineCommitViewer, type Commit, } from 'prosekit/extensions/commit' import { defineReadonly } from 'prosekit/extensions/readonly' import { ProseKit } from 'prosekit/svelte' interface Props { commit: Commit } const { commit }: Props = $props() const extension = union([ defineBasicExtension(), defineReadonly(), defineCommitViewer(commit), ]) const editor = createEditor({ extension }) const mount = (element: HTMLElement) => { editor.mount(element) return { destroy: () => editor.unmount() } } </script> <ProseKit {editor}> <div class="box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow flex flex-col bg-white dark:bg-gray-950 color-black dark:color-white"> <div class="relative w-full flex-1 box-border overflow-y-scroll"> <div use:mount class="ProseMirror box-border min-h-full px-[max(4rem,_calc(50%-20rem))] py-8 outline-none outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500"></div> </div> </div> </ProseKit>
<script lang="ts"> import 'prosekit/basic/style.css' import 'prosekit/basic/typography.css' import { defineBasicExtension } from 'prosekit/basic' import { createEditor, union, type NodeJSON, } from 'prosekit/core' import { CommitRecorder, defineCommitRecorder, } from 'prosekit/extensions/commit' import { ProseKit } from 'prosekit/svelte' export let commitRecorder: CommitRecorder export let defaultContent: NodeJSON const extension = union([ defineBasicExtension(), defineCommitRecorder(commitRecorder), ]) const editor = createEditor({ extension, defaultContent }) const mount = (element: HTMLElement) => { editor.mount(element) return { destroy: () => editor.unmount() } } </script> <ProseKit {editor}> <div class="box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow flex flex-col bg-white dark:bg-gray-950 color-black dark:color-white"> <div class="relative w-full flex-1 box-border overflow-y-scroll"> <div use:mount class="ProseMirror box-border min-h-full px-[max(4rem,_calc(50%-20rem))] py-8 outline-none outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500"></div> </div> </div> </ProseKit>
<script lang="ts"> import 'prosekit/basic/style.css' import 'prosekit/basic/typography.css' import type { NodeJSON } from 'prosekit/core' import { CommitRecorder, type Commit, } from 'prosekit/extensions/commit' import EditorDiff from './editor-diff.svelte' import EditorMain from './editor-main.svelte' let commits: { id: string; date: Date; commit: Commit }[] = [] let defaultContent: NodeJSON const commitRecorder = new CommitRecorder() function handleCommit() { const commit = commitRecorder.commit() if (!commit) return const id = Math.random().toString(36).slice(2, 9) commits = [{ id, date: new Date(), commit }, ...commits] } function handleRestore(id: string) { const index = commits.findIndex((commit) => commit.id === id) if (index === -1) return defaultContent = commits[index].commit.doc commits = commits.slice(index) } </script> <div class="grid grid-cols-2 gap-2"> <div class="flex flex-col gap-4"> <div class="max-h-md"> {#key defaultContent} <EditorMain {defaultContent} {commitRecorder} /> {/key} </div> <button on:click={handleCommit} class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-10 px-4 py-2"> Save </button> </div> <div class="flex flex-col gap-4"> {#each commits as commit (commit.id)} <div> <div class="max-h-md"> <EditorDiff commit={commit.commit} /> </div> <div class="w-full inline-flex justify-between p-1 text-sm"> <span class="opacity-50"> {commit.date.toLocaleTimeString()} </span> <button class="underline opacity-50 hover:opacity-100" on:click={() => handleRestore(commit.id)} > Restore </button> </div> </div> {/each} </div> </div>