Afin de dynamiser le site, il faut configurer le storage manager pour sauvegarder les données du projet dans un fichier json ou dans une liste SP. Dans cet exemple, nous utiliserons un fichier json.

Dans src/webparts/monSuperSite/grapejs/index.tsx :

    const [pages, setPages] = useState<any[]>([]);
    useEffect(() => {
        editorRef.current = grapesjs.init({
            // ...
            storageManager: {
                type: "remote-local",
                autosave: true,
                autoload: true,
                stepsBeforeSave: 1,
            },
            // ...
        });


        editorRef.current.Storage.add('remote-local', {
            async load() {
                try {
                    const content = await sp.web.getFolderByServerRelativePath(folderName).files.getByUrl(fileName).getJSON()
                    setPages(content.pages)
                    // Update Pages state
                    return content;
                } catch (err) {
                    console.error("Error on load : ", err);
                    // Fallback sur le localStorage
                    const localStorage = editorRef.current.Storage.get('local');
                    await localStorage.load();
                }

            },

            async store(data) {
                try {
                    const fileExists = await sp.web.getFolderByServerRelativePath(folderName).files.getByUrl(fileName).exists();
                    const content = JSON.stringify(data);
                    const folder = sp.web.getFolderByServerRelativePath(folderName);

                    if (fileExists) {
                        await folder.files.getByUrl(fileName).setContent(content);
                    } else {
                        await folder.files.addUsingPath(fileName, content)
                        console.log(`File ${fileName} created`);
                    }

                    // Update Pages state
                    setPages(editorRef.current.Pages.getAll())

                } catch (err) {
                    console.error("Error on store : ", err);
                    // Fallback sur le localStorage
                    const localStorage = editorRef.current.Storage.get('local');
                    await localStorage.store(data, editorRef.current.Storage.getStorageOptions('local'));
                }
            },
        });

        // Commande pour sauvegarder manuellement le projet (à déclencher via un bouton)
        editorRef.current.Commands.add("save-db", {
            run: async (editor) => {
                editor.store(editor.getProjectData);
            },
        });

        const handleSave = () => {
            if (editorRef.current) {
                editorRef.current.Commands.run('save-db');
            }
        }

        return () => {
            editorRef.current && editorRef.current.destroy();
        };
    }, []);