Skip to content

feat: wip on integrating y-diff #1655

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 7 commits into
base: switch-ydocs
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 33 additions & 2 deletions examples/07-collaboration/01-partykit/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@ import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import YPartyKitProvider from "y-partykit/provider";
import * as Y from "yjs";
import { useEffect } from "react";
import { useState } from "react";

// Sets up Yjs document and PartyKit Yjs provider.
const doc = new Y.Doc();
const provider = new YPartyKitProvider(
"blocknote-dev.yousefed.partykit.dev",
// Use a unique name as a "room" for your application.
"your-project-name",
"your-project-name-nick",
doc
);

Expand All @@ -28,7 +30,36 @@ export default function App() {
},
},
});
const [forked, setForked] = useState(false);
useEffect(() => {
editor.on("forked", setForked);
}, [editor]);

// Renders the editor instance.
return <BlockNoteView editor={editor} />;
return (
<>
<button
onClick={() => {
editor.forkYjsSync();
}}>
Pause syncing
</button>
<button
onClick={() => {
editor.resumeYjsSync(true);
}}>
Play (accept changes)
</button>
<button
onClick={() => {
editor.resumeYjsSync(false);
}}>
Play (reject changes)
</button>
<div>
<p>Forked: {forked ? "Yes" : "No"}</p>
</div>
<BlockNoteView editor={editor} />
</>
);
}
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,10 @@
"canvas",
"esbuild",
"nx"
]
],
"overrides": {
"yjs": "^14.0.0-0"
}
},
"packageManager": "[email protected]+sha512.2d92c86b7928dc8284f53494fb4201f983da65f0fb4f0d40baafa5cf628fa31dae3e5968f12466f17df7e97310e30f343a648baea1b9b350685dafafffdf5808",
"private": true,
Expand Down
6 changes: 2 additions & 4 deletions packages/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,6 @@
"@tiptap/core": "^2.11.5",
"@tiptap/extension-bold": "^2.11.5",
"@tiptap/extension-code": "^2.11.5",
"@tiptap/extension-collaboration": "^2.11.5",
"@tiptap/extension-collaboration-cursor": "^2.11.5",
"@tiptap/extension-gapcursor": "^2.11.5",
"@tiptap/extension-history": "^2.11.5",
"@tiptap/extension-horizontal-rule": "^2.11.5",
Expand Down Expand Up @@ -111,9 +109,9 @@
"remark-stringify": "^11.0.0",
"unified": "^11.0.5",
"uuid": "^8.3.2",
"y-prosemirror": "^1.3.4",
"y-prosemirror": "npm:@y/[email protected]",
"y-protocols": "^1.0.6",
"yjs": "^13.6.15"
"yjs": "^14.0.0-0"
},
"devDependencies": {
"@types/emoji-mart": "^3.0.14",
Expand Down
157 changes: 153 additions & 4 deletions packages/core/src/editor/BlockNoteEditor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ import {
import { Dictionary } from "../i18n/dictionary.js";
import { en } from "../i18n/locales/index.js";

import { redo, undo } from "@tiptap/pm/history";
import {
TextSelection,
type Command,
Expand All @@ -101,8 +102,13 @@ import {
} from "@tiptap/pm/state";
import { dropCursor } from "prosemirror-dropcursor";
import { EditorView } from "prosemirror-view";
import { undoCommand, redoCommand, ySyncPluginKey } from "y-prosemirror";
import { undo, redo } from "@tiptap/pm/history";
import {
redoCommand,
undoCommand,
yCursorPluginKey,
ySyncPluginKey,
yUndoPluginKey,
} from "y-prosemirror";
import { createInternalHTMLSerializer } from "../api/exporters/html/internalHTMLSerializer.js";
import { inlineContentToNodes } from "../api/nodeConversions/blockToNode.js";
import { nodeToBlock } from "../api/nodeConversions/nodeToBlock.js";
Expand All @@ -113,8 +119,11 @@ import {
import { nestedListsToBlockNoteStructure } from "../api/parsers/html/util/nestedLists.js";
import { CodeBlockOptions } from "../blocks/CodeBlockContent/CodeBlockContent.js";
import type { ThreadStore, User } from "../comments/index.js";
import { CursorPlugin } from "../extensions/Collaboration/CursorPlugin.js";
import "../style.css";
import { EventEmitter } from "../util/EventEmitter.js";
import { SyncPlugin } from "../extensions/Collaboration/SyncPlugin.js";
import { UndoPlugin } from "../extensions/Collaboration/UndoPlugin.js";

export type BlockNoteExtensionFactory = (
editor: BlockNoteEditor<any, any, any>
Expand All @@ -124,6 +133,7 @@ export type BlockNoteExtension =
| AnyExtension
| {
plugin: Plugin;
priority?: number;
};

export type BlockCache<
Expand Down Expand Up @@ -393,6 +403,7 @@ export class BlockNoteEditor<
SSchema extends StyleSchema = DefaultStyleSchema
> extends EventEmitter<{
create: void;
forked: boolean;
}> {
/**
* The underlying prosemirror schema
Expand Down Expand Up @@ -472,6 +483,8 @@ export class BlockNoteEditor<

private readonly showSelectionPlugin: ShowSelectionPlugin;

private cursorPlugin: CursorPlugin;

/**
* The `uploadFile` method is what the editor uses when files need to be uploaded (for example when selecting an image to upload).
* This method should set when creating the editor as this is application-specific.
Expand Down Expand Up @@ -622,6 +635,7 @@ export class BlockNoteEditor<
this.tableHandles = this.extensions["tableHandles"] as any;
this.comments = this.extensions["comments"] as any;
this.showSelectionPlugin = this.extensions["showSelection"] as any;
this.cursorPlugin = this.extensions["yCursorPlugin"] as any;

if (newOptions.uploadFile) {
const uploadFile = newOptions.uploadFile;
Expand All @@ -643,7 +657,7 @@ export class BlockNoteEditor<
this.headless = newOptions._headless;

const collaborationEnabled =
"collaboration" in this.extensions ||
"ySyncPlugin" in this.extensions ||
"liveblocksExtension" in this.extensions;

if (collaborationEnabled && newOptions.initialContent) {
Expand Down Expand Up @@ -696,6 +710,7 @@ export class BlockNoteEditor<
// "blocknote" extensions (prosemirror plugins)
return Extension.create({
name: key,
priority: ext.priority,
addProseMirrorPlugins: () => [ext.plugin],
});
}),
Expand Down Expand Up @@ -928,6 +943,139 @@ export class BlockNoteEditor<
};
}

/**
* To find a fragment in another ydoc, we need to search for it.
*/
private findTypeInOtherYdoc<T extends Y.AbstractType<any>>(
ytype: T,
otherYdoc: Y.Doc
): T {
const ydoc = ytype.doc!;
if (ytype._item === null) {
/**
* If is a root type, we need to find the root key in the original ydoc
* and use it to get the type in the other ydoc.
*/
const rootKey = Array.from(ydoc.share.keys()).find(
(key) => ydoc.share.get(key) === ytype
);
if (rootKey == null) {
throw new Error("type does not exist in other ydoc");
}
return otherYdoc.get(rootKey, ytype.constructor as new () => T) as T;
} else {
/**
* If it is a sub type, we use the item id to find the history type.
*/
const ytypeItem = ytype._item;
const otherStructs =
otherYdoc.store.clients.get(ytypeItem.id.client) ?? [];
const itemIndex = Y.findIndexSS(otherStructs, ytypeItem.id.clock);
const otherItem = otherStructs[itemIndex] as Y.Item;
const otherContent = otherItem.content as Y.ContentType;
return otherContent.type as T;
}
}

/**
* Whether the editor is editing a forked document,
* preserving a reference to the original document and the forked document.
*/
public get isForkedFromRemote() {
return this.forkedState !== undefined;
}

/**
* Stores whether the editor is editing a forked document,
* preserving a reference to the original document and the forked document.
*/
private forkedState:
| {
originalFragment: Y.XmlFragment;
forkedFragment: Y.XmlFragment;
}
| undefined;

/**
* Fork the Y.js document from syncing to the remote,
* allowing modifications to the document without affecting the remote.
* These changes can later be rolled back or applied to the remote.
*/
public forkYjsSync() {
if (this.forkedState) {
return;
}

const originalFragment = this.options.collaboration?.fragment;

if (!originalFragment) {
// No original fragment found, so no need to fork
return;
}

const doc = new Y.Doc();
// Copy the original document to a new Yjs document
Y.applyUpdate(doc, Y.encodeStateAsUpdate(originalFragment.doc!));

const update = Y.encodeStateAsUpdate(doc);
const blob = new Blob([update], { type: "application/octet-stream" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `${Date.now()}.update`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);

// Find the forked fragment in the new Yjs document
const forkedFragment = this.findTypeInOtherYdoc(originalFragment, doc);

this.forkedState = {
originalFragment,
forkedFragment,
};

// Need to reset all the yjs plugins
[yCursorPluginKey, yUndoPluginKey, ySyncPluginKey].forEach((key) => {
this._tiptapEditor.unregisterPlugin(key);
});
// Register them again, based on the new forked fragment
this._tiptapEditor.registerPlugin(new SyncPlugin(forkedFragment).plugin);
this._tiptapEditor.registerPlugin(new UndoPlugin().plugin);
// No need to register the cursor plugin again, it's a local fork
this.emit("forked", true);
}

/**
* Resume syncing the Y.js document to the remote
* If `keepChanges` is true, any changes that have been made to the forked document will be applied to the original document.
* Otherwise, the original document will be restored and the changes will be discarded.
*/
public resumeYjsSync(keepChanges = false) {
if (!this.forkedState) {
return;
}
// Remove the forked fragment's plugins
this._tiptapEditor.unregisterPlugin(ySyncPluginKey);
this._tiptapEditor.unregisterPlugin(yUndoPluginKey);

const { originalFragment, forkedFragment } = this.forkedState!;
if (keepChanges) {
// Apply any changes that have been made to the fork, onto the original doc
const update = Y.encodeStateAsUpdate(forkedFragment.doc!);
Y.applyUpdate(originalFragment.doc!, update);
}
// Register the plugins again, based on the original fragment
this._tiptapEditor.registerPlugin(new SyncPlugin(originalFragment).plugin);
this.cursorPlugin = new CursorPlugin(this.options.collaboration!);
this._tiptapEditor.registerPlugin(this.cursorPlugin.plugin);
this._tiptapEditor.registerPlugin(new UndoPlugin().plugin);
// Reset the forked state
this.forkedState = undefined;
this.emit("forked", false);
}

/**
* @deprecated, use `editor.document` instead
*/
Expand Down Expand Up @@ -1488,7 +1636,8 @@ export class BlockNoteEditor<
"Cannot update collaboration user info when collaboration is disabled."
);
}
this._tiptapEditor.commands.updateUser(user);

this.cursorPlugin.updateUser(user);
}

/**
Expand Down
19 changes: 14 additions & 5 deletions packages/core/src/editor/BlockNoteExtensions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ import { createDropFileExtension } from "../api/clipboard/fromClipboard/fileDrop
import { createPasteFromClipboardExtension } from "../api/clipboard/fromClipboard/pasteExtension.js";
import { createCopyToClipboardExtension } from "../api/clipboard/toClipboard/copyExtension.js";
import { BackgroundColorExtension } from "../extensions/BackgroundColor/BackgroundColorExtension.js";
import { createCollaborationExtensions } from "../extensions/Collaboration/createCollaborationExtensions.js";
import { CursorPlugin } from "../extensions/Collaboration/CursorPlugin.js";
import { UndoPlugin } from "../extensions/Collaboration/UndoPlugin.js";
import { SyncPlugin } from "../extensions/Collaboration/SyncPlugin.js";
import { CommentMark } from "../extensions/Comments/CommentMark.js";
import { CommentsPlugin } from "../extensions/Comments/CommentsPlugin.js";
import type { ThreadStore } from "../comments/index.js";
Expand Down Expand Up @@ -106,6 +108,15 @@ export const getBlockNoteExtensions = <
ret[ext.name] = ext;
}

if (opts.collaboration) {
ret["ySyncPlugin"] = new SyncPlugin(opts.collaboration.fragment);
ret["yUndoPlugin"] = new UndoPlugin();

if (opts.collaboration.provider?.awareness) {
ret["yCursorPlugin"] = new CursorPlugin(opts.collaboration);
}
}

// Note: this is pretty hardcoded and will break when user provides plugins with same keys.
// Define name on plugins instead and not make this a map?
ret["formattingToolbar"] = new FormattingToolbarProsemirrorPlugin(
Expand Down Expand Up @@ -285,10 +296,8 @@ const getTipTapExtensions = <

LINKIFY_INITIALIZED = true;

if (opts.collaboration) {
tiptapExtensions.push(...createCollaborationExtensions(opts.collaboration));
} else {
// disable history extension when collaboration is enabled as Yjs takes care of undo / redo
if (!opts.collaboration) {
// disable history extension when collaboration is enabled as y-prosemirror takes care of undo / redo
tiptapExtensions.push(History);
}

Expand Down
Loading
Loading