feat: creator meta

src/components/custom/tldraw/Canvas.js

@@ -18,8 +18,11 @@ function EverythingCanvas({
   autoFocus,
   hideUi,
   initialSnapshot,
-  plugins, // we could replace showAction, pass plugins to action button
 }) {
+  const parts = persistance.split("/");
+  const creatorId = parts[0];
+
+
   const [store] = useState(() => {
     if (initialSnapshot) {
       const newStore = createTLStore({
@@ -33,10 +36,34 @@ function EverythingCanvas({
   });
 
   const setAppToState = useCallback((editor) => {
-    // Do something
-    // Once the canvas mounts
-    // Can we set widget on top of canvas
-  }, []);
+    editor.user.updateUserPreferences({
+      id: creatorId,
+    })
+
+    editor.getInitialMetaForShape = (_shape) => {
+      return {
+        createdBy: editor.user.getId(),
+        createdAt: Date.now(),
+        updatedBy: editor.user.getId(),
+        updatedAt: Date.now(),
+      };
+    };
+    // We can also use the sideEffects API to modify a shape before
+    // its change is committed to the database. This will run for
+    // all shapes whenever they are updated.
+    // editor.sideEffects.registerBeforeChangeHandler(
+    //   "shape",
+    //   (record, _prev, source) => {
+    //     if (source !== "user") return record;
+    //     record.meta = {
+    //       ...record.meta,
+    //       updatedBy: editor.user.getId(),
+    //       updatedAt: Date.now(),
+    //     };
+    //     return record;
+    //   }
+    // );
+  }, [creatorId]);
 
   return (
     <div className={"tldraw__editor"}>
@@ -58,7 +85,7 @@ function EverythingCanvas({
         autoFocus={autoFocus ?? true}
         hideUi={hideUi ?? false}
       >
-        <ActionButton plugins={plugins} />
+        <ActionButton />
         <TldrawLogo />
       </Tldraw>
     </div>