createUuid

src/pages/editor/Editor.tsx

@@ -18,6 +18,8 @@ const Editor: FC = () => {
     useEffect(() => {
         if (data?.data && data?.data?.content) {
             const json = JSON.parse(data?.data?.content)
+            console.log(json);
+
             if (json) {
                 loadPages(json)
             }

src/pages/editor/store/editorStore.ts

@@ -160,6 +160,30 @@ type EditorStoreType = {
 
 const createTableCellId = (row: number, col: number) => `cell-${row}-${col}`;
 
+const createUuid = (): string => {
+  if (typeof globalThis.crypto?.randomUUID === "function") {
+    return globalThis.crypto.randomUUID();
+  }
+
+  if (typeof globalThis.crypto?.getRandomValues === "function") {
+    const bytes = new Uint8Array(16);
+    globalThis.crypto.getRandomValues(bytes);
+
+    // RFC4122 v4 bits
+    bytes[6] = (bytes[6] & 0x0f) | 0x40;
+    bytes[8] = (bytes[8] & 0x3f) | 0x80;
+
+    const hex = Array.from(bytes, (byte) => byte.toString(16).padStart(2, "0"));
+    return `${hex.slice(0, 4).join("")}-${hex.slice(4, 6).join("")}-${hex.slice(6, 8).join("")}-${hex.slice(8, 10).join("")}-${hex.slice(10, 16).join("")}`;
+  }
+
+  return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+};
+
+const createScopedId = (prefix: string) => `${prefix}-${createUuid()}`;
+const isInvalidPageId = (id?: string) =>
+  !id || id === "page-undefined" || id.endsWith("-undefined");
+
 const createInitialCells = (
   rows: number,
   cols: number,
@@ -183,7 +207,7 @@ const createInitialCells = (
 };
 
 const createInitialPage = (name: string): Page => ({
-  id: `page-${crypto.randomUUID?.()}`,
+  id: createScopedId("page"),
   name,
   objects: [],
   guides: [],
@@ -617,7 +641,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
       }));
 
       const newPage: Page = {
-        id: `page-${crypto.randomUUID?.()}`,
+        id: createScopedId("page"),
         name: `${pageToDuplicate.name} (کپی)`,
         objects: duplicatedObjects,
         guides: [...pageToDuplicate.guides],
@@ -971,6 +995,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
       if (pages.length === 0) return;
       const normalizedPages = pages.map((page) => ({
         ...page,
+        id: isInvalidPageId(page.id) ? createScopedId("page") : page.id,
         guides: page.guides || [],
       }));
       const firstPage = normalizedPages[0];