feat: margin document

Author: duylongpro99

README.md

@@ -1,4 +1,9 @@
 # Thanks AI support me to write readme - haha
+# Wanna try? 
+  Go
+  ```markdown
+  [https://v0-new-project-d2azd6z3jcc.vercel.app/](https://v0-new-project-d2azd6z3jcc.vercel.app/)
+  ```
 # Write Document - Collaborative Document Editor
 
 A real-time collaborative document editor built with modern web technologies, offering a seamless writing and collaboration experience.

liveblocks.config.ts

@@ -12,6 +12,8 @@ declare global {
     Storage: {
       // Example, a conflict-free list
       // animals: LiveList<string>;
+      leftMg: number;
+      rightMg: number;
     };
 
     // Custom user info set when authenticating with a secret key

src/app/document/[documentId]/(ruler)/rulers.tsx

@@ -1,3 +1,4 @@
+import { useMutation, useStorage } from "@liveblocks/react/suspense";
 import React, { useRef, useState } from "react";
 import { Marker } from "./markers";
 
@@ -8,8 +9,15 @@ const MINIMUM_SPACE = 100;
 const INITIAL_MG = 56;
 
 export const Ruler: React.FC = () => {
-  const [leftMg, setLeftMg] = useState(INITIAL_MG);
-  const [rightMg, setRightMg] = useState(INITIAL_MG);
+  const leftMg = useStorage((root) => root.leftMg) ?? INITIAL_MG;
+  const rightMg = useStorage((root) => root.rightMg) ?? INITIAL_MG;
+  const setLeftMg = useMutation(({ storage }, position) => {
+    storage.set("leftMg", position);
+  }, []);
+
+  const setRightMg = useMutation(({ storage }, position) => {
+    storage.set("rightMg", position);
+  }, []);
 
   const [isDraggingLeft, setIsDraggingLeft] = useState(false);
   const [isDraggingRight, setIsDraggingRight] = useState(false);

src/app/document/[documentId]/avatar.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import React from "react";
 
 const SIZE = 36;

src/app/document/[documentId]/editor.tsx

@@ -21,11 +21,14 @@ import ResizeImage from "tiptap-extension-resize-image";
 import { FontSizeExtension } from "@/extensions/font-size";
 import { LineHeightExtension } from "@/extensions/line-height";
 import { useLiveblocksExtension } from "@liveblocks/react-tiptap";
+import { useStorage } from "@liveblocks/react/suspense";
 import TextStyle from "@tiptap/extension-text-style";
 import { Ruler } from "./(ruler)/rulers";
 import { Threads } from "./threads";
 
 export const Editor: React.FC = () => {
+  const leftMg = useStorage((root) => root.leftMg);
+  const rightMg = useStorage((root) => root.rightMg);
   const { setEditor } = useEditorStore();
   const liveblocks = useLiveblocksExtension();
 
@@ -57,7 +60,7 @@ export const Editor: React.FC = () => {
     },
     editorProps: {
       attributes: {
-        style: "padding-left: 56px; padding-right: 56px;",
+        style: `padding-left: ${leftMg ?? 56}px; padding-right: ${rightMg ?? 56}px;`,
         class:
           "focus:outline-none print:border-0 bg-white  border-[#c7c7c7] flex flex-col min-h-[1054px] w-[816px] pt-10 pr-14 pb-10 cursor-text",
       },

src/app/document/[documentId]/room.tsx

@@ -79,7 +79,13 @@ export function Room({ children }: { children: ReactNode }) {
         });
       }}
     >
-      <RoomProvider id={params.documentId}>
+      <RoomProvider
+        id={params.documentId}
+        initialStorage={{
+          leftMg: 56,
+          rightMg: 56,
+        }}
+      >
         <ClientSideSuspense
           fallback={<FullscreenLoader label="Document loading..." />}
         >