feat: more progress into the version history demo

Author: nperez0111

examples/07-collaboration/10-versioning/src/App.tsx

@@ -1,5 +1,10 @@
 import "@blocknote/core/fonts/inter.css";
-import { SuggestionsExtension, VersioningExtension } from "@blocknote/core/y";
+import {
+  withCollaboration,
+  localStorageEndpoints,
+  SuggestionsExtension,
+  VersioningExtension,
+} from "@blocknote/core/y";
 import {
   BlockNoteViewEditor,
   FloatingComposerController,
@@ -82,23 +87,18 @@ export default function App() {
     );
   }, [doc, activeUser]);
 
-  const editor = useCreateBlockNote({
-    collaboration: {
-      provider,
-      suggestionDoc: suggestionModeDoc,
-      attributionManager: suggestionModeAttributionManager,
-      fragment: doc.get(),
-      user: { color: getRandomColor(), name: activeUser.username },
-    },
-    extensions: [
-      CommentsExtension({ threadStore, resolveUsers }),
-      SuggestionsExtension(),
-      VersioningExtension({
-        endpoints: {} as any,
+  const editor = useCreateBlockNote(
+    withCollaboration({
+      collaboration: {
+        provider,
+        suggestionDoc: suggestionModeDoc,
+        attributionManager: suggestionModeAttributionManager,
         fragment: doc.get(),
-      }),
-    ],
-  });
+        user: { color: getRandomColor(), name: activeUser.username },
+        versioningEndpoints: localStorageEndpoints,
+      },
+    }),
+  );
 
   const {
     enableSuggestions,
@@ -111,8 +111,8 @@ export default function App() {
     editor,
   });
 
-  const { selectSnapshot } = useExtension(VersioningExtension, { editor });
-  const { selectedSnapshotId } = useExtensionState(VersioningExtension, {
+  const { exitPreview } = useExtension(VersioningExtension, { editor });
+  const { previewedSnapshotId } = useExtensionState(VersioningExtension, {
     editor,
   });
 
@@ -124,7 +124,7 @@ export default function App() {
       disableSuggestions();
       setEditingMode("editing");
     }
-  }, [selectedSnapshotId]);
+  }, [previewedSnapshotId]);
   const [sidebar, setSidebar] = useState<
     "comments" | "versionHistory" | "none"
   >("none");
@@ -134,7 +134,7 @@ export default function App() {
       className={"full-collaboration"}
       editor={editor}
       editable={
-        (sidebar !== "versionHistory" || selectedSnapshotId === undefined) &&
+        (sidebar !== "versionHistory" || previewedSnapshotId === undefined) &&
         activeUser.role === "editor"
       }
       // In other examples, `BlockNoteView` renders both editor element itself,
@@ -160,7 +160,7 @@ export default function App() {
                 setSidebar((sidebar) =>
                   sidebar !== "versionHistory" ? "versionHistory" : "none",
                 );
-                selectSnapshot(undefined);
+                exitPreview();
               }}
             >
               <RiHistoryLine />
@@ -180,7 +180,7 @@ export default function App() {
           </div>
           <div className={"editor-section"}>
             {/* <h1>Editor</h1> */}
-            {selectedSnapshotId === undefined && (
+            {previewedSnapshotId === undefined && (
               <div className={"settings"}>
                 <SettingsSelect
                   label={"User"}

examples/07-collaboration/11-yhub/src/App.tsx

@@ -1,11 +1,11 @@
+import "./style.css";
 import "@blocknote/core/fonts/inter.css";
 import "@blocknote/mantine/style.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import { useCreateBlockNote } from "@blocknote/react";
 import { Awareness } from "@y/protocols/awareness";
 import { withCollaboration } from "@blocknote/core/y";
 import * as Y from "@y/y";
-import { useEffect } from "react";
 
 const doc = new Y.Doc();
 const provider = {
@@ -38,7 +38,7 @@ suggestingProvider.awareness.setLocalStateField("user", {
 const suggestingAttributionManager = Y.createAttributionManagerFromDiff(
   doc,
   suggestingDoc,
-  { attrs },
+  // { attrs },
 );
 suggestingAttributionManager.suggestionMode = false;
 
@@ -53,7 +53,7 @@ suggestionModeProvider.awareness.setLocalStateField("user", {
 const suggestionModeAttributionManager = Y.createAttributionManagerFromDiff(
   doc,
   suggestionModeDoc,
-  { attrs },
+  // { attrs },
 );
 suggestionModeAttributionManager.suggestionMode = true;
 

examples/07-collaboration/11-yhub/src/style.css

@@ -0,0 +1,67 @@
+ins {
+  background-color: hsl(120 100 90);
+  color: hsl(120 100 30);
+  position: relative;
+}
+
+ins:hover::after {
+  content: attr(data-user);
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 4px;
+  padding: 4px 8px;
+  background-color: rgba(0, 0, 0, 0.9);
+  color: white;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+.dark ins {
+  background-color: hsl(120 100 10);
+  color: hsl(120 80 70);
+}
+
+.dark ins:hover::after {
+  background-color: rgba(30, 30, 30, 0.95);
+  color: hsl(120 80 70);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+del {
+  background-color: hsl(0 100 90);
+  color: hsl(0 100 30);
+  position: relative;
+}
+
+del:hover::after {
+  content: attr(data-user);
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 4px;
+  padding: 4px 8px;
+  background-color: rgba(0, 0, 0, 0.9);
+  color: white;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+.dark del {
+  background-color: hsl(0 100 10);
+  color: hsl(0 80 70);
+}
+
+.dark del:hover::after {
+  background-color: rgba(30, 30, 30, 0.95);
+  color: hsl(0 80 70);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}