Skip to content

Commit d81aaa7

Browse files
vepsalavepsala
committed
fix(persistence): disable saving by default
1 parent d66b6b5 commit d81aaa7

File tree

7 files changed

+168
-78
lines changed

7 files changed

+168
-78
lines changed

‎src/app/email-canvas/index.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,17 @@ import {
1010
useDocument,
1111
useSelectedMainTab,
1212
useSelectedScreenSize,
13+
usePersistenceEnabled
1314
} from '@editor/editor-context';
1415
import ToggleInspectorPanelButton from '../inspector-drawer/toggle-inspector-panel-button';
1516
import ToggleSamplesPanelButton from '../templates-drawer/toggle-samples-panel-button';
1617

1718
import HtmlPanel from './html-panel';
1819
import JsonPanel from './json-panel';
1920
import MainTabsGroup from './main-tabs-group';
20-
import ShareButton from './share-button';
2121
import SaveButton from './save-button';
2222
import NewTemplateButton from './new-template-button';
23-
import { useEmailEditor } from '../context';
24-
import { SampleTemplate } from '..';
23+
import { SampleTemplate } from '../index';
2524

2625
interface TemplatePanelProps {
2726
loadTemplates?: () => Promise<SampleTemplate[]>;
@@ -32,7 +31,7 @@ export default function TemplatePanel({ loadTemplates, saveAs }: TemplatePanelPr
3231
const document = useDocument();
3332
const selectedMainTab = useSelectedMainTab();
3433
const selectedScreenSize = useSelectedScreenSize();
35-
const { currentTemplateId } = useEmailEditor();
34+
const persistenceEnabled = usePersistenceEnabled();
3635

3736
let mainBoxSx: SxProps = {
3837
height: '100%',
@@ -44,7 +43,8 @@ export default function TemplatePanel({ loadTemplates, saveAs }: TemplatePanelPr
4443
width: 370,
4544
height: 800,
4645
boxShadow:
47-
'rgba(33, 36, 67, 0.04) 0px 10px 20px, rgba(33, 36, 67, 0.04) 0px 2px 6px, rgba(33, 36, 67, 0.04) 0px 0px 1px',
46+
'rgba(33, 36, 67, 0.04) 0px 10px 20px, rgba(33, 36, 67, 0.08) 0px 2px 4px',
47+
borderRadius: '16px',
4848
};
4949
}
5050

@@ -80,6 +80,8 @@ export default function TemplatePanel({ loadTemplates, saveAs }: TemplatePanelPr
8080
}
8181
};
8282

83+
const showSaveButtons = persistenceEnabled;
84+
8385
return (
8486
<>
8587
<Stack
@@ -115,8 +117,12 @@ export default function TemplatePanel({ loadTemplates, saveAs }: TemplatePanelPr
115117
</Tooltip>
116118
</ToggleButton>
117119
</ToggleButtonGroup>
118-
<NewTemplateButton loadTemplates={loadTemplates} saveAs={saveAs} />
119-
<SaveButton loadTemplates={loadTemplates} saveAs={saveAs} />
120+
{showSaveButtons && (
121+
<>
122+
<NewTemplateButton loadTemplates={loadTemplates} saveAs={saveAs} />
123+
<SaveButton loadTemplates={loadTemplates} saveAs={saveAs} />
124+
</>
125+
)}
120126
</Stack>
121127
</Stack>
122128
<ToggleInspectorPanelButton />

‎src/app/index.tsx‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@ import React, { forwardRef, useImperativeHandle, useEffect } from 'react';
22
import { Stack, useTheme } from '@mui/material';
33

44
import { TEditorConfiguration } from '@editor/core';
5-
import { useDocument, resetDocument, useInspectorDrawerOpen, useSamplesDrawerOpen } from '@editor/editor-context';
5+
import {
6+
useDocument,
7+
resetDocument,
8+
useInspectorDrawerOpen,
9+
useSamplesDrawerOpen,
10+
setPersistenceEnabled
11+
} from '@editor/editor-context';
612
import { EmailEditorProvider, useEmailEditor, EmailEditorContextType, EmailEditorProviderProps } from './context';
713
import InspectorDrawer, { INSPECTOR_DRAWER_WIDTH } from './inspector-drawer';
814
import SamplesDrawer, { SAMPLES_DRAWER_WIDTH } from './templates-drawer';
@@ -47,6 +53,17 @@ export interface EmailEditorProps {
4753
* @default true
4854
*/
4955
samplesDrawerEnabled?: boolean;
56+
/**
57+
* Whether to enable template persistence functionality and show save buttons.
58+
* When false (default), save functionality and related UI elements will be hidden.
59+
* When true, make sure to provide the necessary callbacks (onSave, saveAs, etc.).
60+
*
61+
* IMPORTANT: If you set this to true, you must provide callbacks to handle persistence
62+
* operations (onSave, saveAs, etc.). Otherwise, the save buttons will appear but won't
63+
* be functional.
64+
* @default false
65+
*/
66+
persistenceEnabled?: boolean;
5067
/**
5168
* Callback to load samples dynamically.
5269
* This will be called when the samples drawer is opened.
@@ -85,7 +102,7 @@ function useDrawerTransition(cssProperty: 'margin-left' | 'margin-right', open:
85102
}
86103

87104
// Internal component that connects the App with the EmailEditor context
88-
const EmailEditorInternal = forwardRef<EmailEditorRef, Omit<EmailEditorProps, 'initialTemplate' | 'initialTemplateId' | 'initialTemplateName' | 'onSave' | 'onChange'>>((props, ref) => {
105+
const EmailEditorInternal = forwardRef<EmailEditorRef, Omit<EmailEditorProps, 'initialTemplate' | 'initialTemplateId' | 'initialTemplateName' | 'onSave' | 'onChange' | 'persistenceEnabled'>>((props, ref) => {
89106
const {
90107
drawerEnterDuration = 225,
91108
drawerExitDuration = 225,
@@ -169,6 +186,7 @@ const EmailEditor = forwardRef<EmailEditorRef, EmailEditorProps>((props, ref) =>
169186
drawerEnterDuration,
170187
drawerExitDuration,
171188
samplesDrawerEnabled,
189+
persistenceEnabled = false,
172190
loadSamples,
173191
loadTemplates,
174192
loadTemplate,
@@ -177,12 +195,15 @@ const EmailEditor = forwardRef<EmailEditorRef, EmailEditorProps>((props, ref) =>
177195
saveAs,
178196
} = props;
179197

180-
// Initialize with the provided template
198+
// Initialize with the provided template and settings
181199
useEffect(() => {
182200
if (initialTemplate) {
183201
resetDocument(initialTemplate);
184202
}
185-
}, [initialTemplate]);
203+
204+
// Set persistence mode
205+
setPersistenceEnabled(persistenceEnabled);
206+
}, [initialTemplate, persistenceEnabled]);
186207

187208
return (
188209
<SnackbarProvider>

‎src/app/inspector-drawer/index.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,19 @@ export interface InspectorDrawerProps {
3636
* Callback to copy a template with a new name
3737
*/
3838
copyTemplate?: (templateName: string, content: any) => void;
39+
40+
/**
41+
* Indicates whether the template is saving enabled
42+
*/
43+
savingEnabled?: boolean;
3944
}
4045

4146
export default function InspectorDrawer({
4247
enterDuration = 225,
4348
exitDuration = 225,
4449
deleteTemplate,
45-
copyTemplate
50+
copyTemplate,
51+
savingEnabled = true
4652
}: InspectorDrawerProps = {}) {
4753
const selectedSidebarTab = useSelectedSidebarTab();
4854
const inspectorDrawerOpen = useInspectorDrawerOpen();
@@ -54,7 +60,10 @@ export default function InspectorDrawer({
5460
case 'styles':
5561
return <StylesPanel />;
5662
case 'template-settings':
57-
return <TemplatePanel deleteTemplate={deleteTemplate} copyTemplate={copyTemplate} />;
63+
return <TemplatePanel
64+
deleteTemplate={deleteTemplate}
65+
copyTemplate={copyTemplate}
66+
/>;
5867
}
5968
};
6069

‎src/app/inspector-drawer/template-panel.tsx‎

Lines changed: 50 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React from 'react';
2-
import { Button, Stack } from '@mui/material';
2+
import { Button, Stack, Typography } from '@mui/material';
33
import { DeleteOutlined, ContentCopyOutlined } from '@mui/icons-material';
44

55
import { useEmailEditor } from '../context';
6-
import { useDocument } from '@editor/editor-context';
6+
import { useDocument, usePersistenceEnabled } from '@editor/editor-context';
77
import BaseSidebarPanel from './configuration-panel/input-panels/helpers/base-sidebar-panel';
88
import TemplateDownloadButton from './template-panel-download-button';
9-
import TemplateImportButton from './template-panel-import-button';
109

1110
export interface TemplatePanelProps {
1211
loadTemplates?: () => Promise<any[]>;
@@ -17,6 +16,7 @@ export interface TemplatePanelProps {
1716
export default function TemplatePanel({ deleteTemplate, copyTemplate }: TemplatePanelProps) {
1817
const { currentTemplateId, currentTemplateName } = useEmailEditor();
1918
const document = useDocument();
19+
const persistenceEnabled = usePersistenceEnabled();
2020

2121
const handleDelete = () => {
2222
if (!currentTemplateId || !window.confirm('Are you sure you want to delete this template?')) {
@@ -28,7 +28,7 @@ export default function TemplatePanel({ deleteTemplate, copyTemplate }: Template
2828
deleteTemplate(currentTemplateId);
2929

3030
// Refresh the page to load a new template
31-
window.location.hash = '#';
31+
window.location.hash = '';
3232
window.location.reload();
3333
}
3434
};
@@ -53,32 +53,54 @@ export default function TemplatePanel({ deleteTemplate, copyTemplate }: Template
5353
<>
5454
<BaseSidebarPanel title="Template">
5555
<Stack spacing={2}>
56-
<Button
57-
variant="outlined"
58-
color="primary"
59-
startIcon={<ContentCopyOutlined />}
60-
onClick={handleCopyToSamples}
61-
fullWidth
62-
>
63-
Save as Sample Template
64-
</Button>
65-
<Button
66-
variant="outlined"
67-
color="error"
68-
startIcon={<DeleteOutlined />}
69-
onClick={handleDelete}
70-
fullWidth
71-
>
72-
Delete Template
73-
</Button>
74-
</Stack>
75-
</BaseSidebarPanel>
76-
<BaseSidebarPanel title="Import/Export">
77-
<Stack spacing={2}>
78-
<TemplateDownloadButton />
79-
<TemplateImportButton />
56+
{!persistenceEnabled && (
57+
<Typography
58+
variant="body2"
59+
color="text.secondary"
60+
sx={{
61+
padding: 1,
62+
bgcolor: 'rgba(0,0,0,0.04)',
63+
borderRadius: 1,
64+
fontSize: '0.8rem'
65+
}}
66+
>
67+
Save functionality is disabled. To enable saving, provide the necessary callback functions.
68+
</Typography>
69+
)}
70+
{persistenceEnabled && (
71+
<>
72+
<Button
73+
variant="outlined"
74+
color="primary"
75+
startIcon={<ContentCopyOutlined />}
76+
onClick={handleCopyToSamples}
77+
fullWidth
78+
disabled={!copyTemplate}
79+
>
80+
Save as Sample Template
81+
</Button>
82+
<Button
83+
variant="outlined"
84+
color="error"
85+
startIcon={<DeleteOutlined />}
86+
onClick={handleDelete}
87+
fullWidth
88+
disabled={!deleteTemplate}
89+
>
90+
Delete Template
91+
</Button>
92+
</>
93+
)}
8094
</Stack>
8195
</BaseSidebarPanel>
96+
97+
{persistenceEnabled && (
98+
<BaseSidebarPanel title="Export">
99+
<Stack spacing={2}>
100+
<TemplateDownloadButton />
101+
</Stack>
102+
</BaseSidebarPanel>
103+
)}
82104
</>
83105
);
84106
}

0 commit comments

Comments
 (0)