[pull] main from liveblocks:main

docs/pages/get-started/yjs-superdoc-javascript.mdx

@@ -84,13 +84,17 @@ collaboration to your JavaScript application using the APIs from the
       const yDoc = yProvider.getYDoc();
 
       function initSuperDoc() {
+        // Get the current user's info from Liveblocks
+        const { id, info } = room.getSelf();
+
         new SuperDoc({
           selector: "#superdoc",
           toolbar: "#superdoc-toolbar",
           documentMode: "editing",
           user: {
-            name: "User " + Math.floor(Math.random() * 1000),
-            email: "user@example.com",
+            email: id,
+            name: info?.name ?? "Anonymous",
+            image: info?.avatar ?? undefined,
           },
           modules: {
             // The collaboration contract is the same for every Yjs provider:

docs/pages/get-started/yjs-superdoc-nextjs.mdx

@@ -151,7 +151,11 @@ collaboration to your Next.js application using the APIs from the
             <SuperDocEditor
               documentMode="editing"
               // Identify the current user for live cursors
-              user={{ name: userInfo.name, email: userId }}
+              user={{
+                email: userId,
+                name: userInfo?.name ?? "Anonymous",
+                image: userInfo?.avatar ?? undefined,
+              }}
               modules={modules}
               style={{ height: "100%" }}
             />

docs/pages/get-started/yjs-superdoc-react.mdx

@@ -151,7 +151,11 @@ collaboration to your React application using the APIs from the
             <SuperDocEditor
               documentMode="editing"
               // Identify the current user for live cursors
-              user={{ name: userInfo.name, email: userId }}
+              user={{
+                email: userId,
+                name: userInfo?.name ?? "Anonymous",
+                image: userInfo?.avatar ?? undefined,
+              }}
               modules={modules}
               style={{ height: "100%" }}
             />

docs/pages/get-started/yjs-superdoc-svelte.mdx

@@ -76,13 +76,17 @@ collaboration to your Svelte application using the APIs from the
         let superdoc;
 
         function initSuperDoc() {
+          // Get the current user's info from Liveblocks
+          const { id, info } = room.getSelf();
+
           superdoc = new SuperDoc({
             selector: "#superdoc",
             toolbar: "#superdoc-toolbar",
             documentMode: "editing",
             user: {
-              name: "User " + Math.floor(Math.random() * 1000),
-              email: "user@example.com",
+              email: id,
+              name: info?.name ?? "Anonymous",
+              image: info?.avatar ?? undefined,
             },
             modules: {
               // The collaboration contract is the same for every Yjs provider:

docs/pages/get-started/yjs-superdoc-vuejs.mdx

@@ -75,13 +75,17 @@ collaboration to your Vue.js application using the APIs from the
       let superdoc = null;
 
       function initSuperDoc() {
+        // Get the current user's info from Liveblocks
+        const { id, info } = room.getSelf();
+
         superdoc = new SuperDoc({
           selector: "#superdoc",
           toolbar: "#superdoc-toolbar",
           documentMode: "editing",
           user: {
-            name: "User " + Math.floor(Math.random() * 1000),
-            email: "user@example.com",
+            email: id,
+            name: info?.name ?? "Anonymous",
+            image: info?.avatar ?? undefined,
           },
           modules: {
             // The collaboration contract is the same for every Yjs provider:

examples/nextjs-yjs-superdoc/src/components/CollaborativeEditor.tsx

@@ -36,7 +36,11 @@ export function CollaborativeEditor() {
         <SuperDocEditor
           documentMode="editing"
           // Place the current user's info into Yjs awareness for live cursors
-          user={{ name: userInfo.name, email: userId }}
+          user={{
+            email: userId,
+            name: userInfo?.name ?? "Anonymous",
+            image: userInfo?.avatar ?? undefined,
+          }}
           modules={modules}
           style={{ height: "100%" }}
         />

examples/nextjs-yjs-superdoc/src/globals.css

@@ -34,3 +34,8 @@ main {
   padding: 16px;
   background: #e8eaee;
 }
+
+.presentation-editor__remote-label {
+  margin: -5px 0 0 -1px;
+  border-bottom-left-radius: 0 !important;
+}

packages/liveblocks-server/src/MetadataDB.ts

@@ -15,38 +15,32 @@
  * along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import type { Awaitable, Json } from "@liveblocks/core";
+import type { Json } from "@liveblocks/core";
 import type { Decoder } from "decoders";
 
 import type { IStorageDriver } from "~/interfaces";
 
 export interface MetadataDB {
   // Getter supports optional decoder
-  get(key: string): Promise<Json | undefined>;
-  get<T>(decoder: Decoder<T>, key: string): Promise<T | undefined>;
+  get(key: string): Json | undefined;
+  get<T>(decoder: Decoder<T>, key: string): T | undefined;
 
-  put(key: string, value: Json): Awaitable<void>;
-  delete(key: string): Awaitable<void>;
+  put(key: string, value: Json): void;
+  delete(key: string): void;
 }
 
 /**
  * Returns a thin wrapper around an IStorageDriver to provide MetadataDB
  * functionality, including type-safe reads.
  */
 export function makeMetadataDB(driver: IStorageDriver): MetadataDB {
-  async function get(key: string): Promise<Json | undefined>;
-  async function get<T>(
-    decoder: Decoder<T>,
-    key: string
-  ): Promise<T | undefined>;
-  async function get<T>(
-    a1: string | Decoder<T>,
-    a2?: string
-  ): Promise<T | Json | undefined> {
+  function get(key: string): Json | undefined;
+  function get<T>(decoder: Decoder<T>, key: string): T | undefined;
+  function get<T>(a1: string | Decoder<T>, a2?: string): T | Json | undefined {
     if (a2 === undefined) {
-      return await driver.get_meta(a1 as string);
+      return driver.get_meta(a1 as string);
     } else {
-      return (a1 as Decoder<T>).value(await driver.get_meta(a2));
+      return (a1 as Decoder<T>).value(driver.get_meta(a2));
     }
   }