Skip to content

Commit 55e6451

Browse files
boris0301boris0301
committed
feat: added diagram preview and edit functionality
1 parent 55d6a59 commit 55e6451

File tree

10 files changed

+269
-111
lines changed

10 files changed

+269
-111
lines changed

‎appsscript.json

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,5 @@
1515
"https://www.googleapis.com/auth/script.external_request",
1616
"https://www.googleapis.com/auth/documents"
1717
],
18-
"addOns": {
19-
"common": {
20-
"name": "Mermaid Chart",
21-
"logoUrl": "https://www.mermaidchart.com/img/mermaid-chart-48.png",
22-
"useLocaleFromApp": true,
23-
"universalActions": [
24-
{
25-
"label": "Learn more about Mermaid Chart",
26-
"openLink": "www.mermaidchart.com"
27-
}
28-
],
29-
"layoutProperties": {
30-
"primaryColor": "#424242",
31-
"secondaryColor": "#ff3670"
32-
}
33-
}
34-
},
3518
"runtimeVersion": "V8"
3619
}

‎src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { serverFunctions } from '../../utils/serverFunctions';
33
import { buildUrl, handleDialogClose } from '../../utils/helpers';
44
import useAuth from '../../hooks/useAuth';
55

6+
const editUrl = localStorage.getItem('editUrl');
7+
68
const EditDiagramDialog = () => {
79
const { authState, authStatus } = useAuth();
810
const [diagramsUrl, setDiagramsUrl] = useState('');
@@ -12,28 +14,34 @@ const EditDiagramDialog = () => {
1214

1315
const getMetadata = async () => {
1416
try {
17+
if (editUrl) {
18+
const iframeUrl = buildUrl(editUrl, authState.token);
19+
setDiagramsUrl(iframeUrl);
20+
localStorage.removeItem('editUrl');
21+
return;
22+
}
1523
const metadata = await serverFunctions.readSelectedImageMetadata();
16-
if (typeof metadata === 'string') {
17-
const params = new URLSearchParams(metadata);
18-
const projectID = params.get('projectID');
19-
const documentID = params.get('documentID');
20-
const major = params.get('major');
21-
const minor = params.get('minor');
22-
if (projectID && documentID && major && minor) {
23-
const iframeUrl = buildUrl(
24-
`/app/projects/${projectID}/diagrams/${documentID}/version/v.${major}.${minor}/edit`,
25-
authState.token
26-
);
27-
setDiagramsUrl(iframeUrl);
28-
}
24+
if (typeof metadata !== 'string') return;
25+
26+
const params = new URLSearchParams(metadata);
27+
const projectID = params.get('projectID');
28+
const documentID = params.get('documentID');
29+
const major = params.get('major');
30+
const minor = params.get('minor');
31+
if (projectID && documentID && major && minor) {
32+
const iframeUrl = buildUrl(
33+
`/app/projects/${projectID}/diagrams/${documentID}/version/v.${major}.${minor}/edit`,
34+
authState.token
35+
);
36+
setDiagramsUrl(iframeUrl);
2937
}
3038
} catch (error) {
3139
console.log(error);
3240
}
3341
};
3442

3543
getMetadata();
36-
}, [authState]);
44+
}, [authState, editUrl]);
3745

3846
useEffect(() => {
3947
const handleMessage = async (e: MessageEvent) => {

‎src/client/preview-diagram-dialog/components/preview-diagram-dialog.tsx

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { useEffect, useState } from 'react';
2+
import { buildUrl } from '../../utils/helpers';
3+
import useAuth from '../../hooks/useAuth';
4+
import { CircularProgress, Container, Typography } from '@mui/material';
5+
6+
const previewUrl = localStorage.getItem('previewUrl');
7+
8+
const PreviewDiagramDialog = () => {
9+
const { authState, authStatus } = useAuth();
10+
const [diagramsUrl, setDiagramsUrl] = useState('');
11+
12+
useEffect(() => {
13+
if (!authState?.authorized || !previewUrl) return;
14+
const url = buildUrl(previewUrl, authState.token);
15+
setDiagramsUrl(url);
16+
}, [authState, previewUrl]);
17+
18+
if (authStatus === 'idle' || authStatus === 'loading') {
19+
return (
20+
<Container
21+
sx={{
22+
display: 'flex',
23+
flexDirection: 'column',
24+
alignItems: 'center',
25+
justifyContent: 'center',
26+
height: '96.5vh',
27+
}}
28+
>
29+
<CircularProgress />
30+
</Container>
31+
);
32+
}
33+
34+
if (authStatus === 'error') {
35+
return (
36+
<Container
37+
sx={{
38+
display: 'flex',
39+
flexDirection: 'column',
40+
alignItems: 'center',
41+
justifyContent: 'center',
42+
height: '96.5vh',
43+
}}
44+
>
45+
<Typography variant="h5" gutterBottom my={2} textAlign="center">
46+
Error
47+
</Typography>
48+
<Typography paragraph textAlign="center">
49+
Something went wrong. Please try again later.
50+
</Typography>
51+
</Container>
52+
);
53+
}
54+
55+
return (
56+
<div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
57+
<iframe
58+
src={diagramsUrl}
59+
title="diagrams"
60+
style={{
61+
border: 'none',
62+
width: '100%',
63+
height: '96.5vh',
64+
}}
65+
/>
66+
</div>
67+
);
68+
};
69+
70+
export default PreviewDiagramDialog;

‎src/client/preview-diagram-dialog/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<base target="_top" />
5+
<!-- Add any external scripts and stylesheets here -->
6+
<script
7+
crossorigin
8+
src="https://unpkg.com/[email protected]/umd/react.production.min.js"
9+
></script>
10+
<script
11+
crossorigin
12+
src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"
13+
></script>
14+
<script
15+
crossorigin
16+
src="https://unpkg.com/@mui/[email protected]/umd/material-ui.production.min.js"
17+
></script>
18+
<script
19+
crossorigin
20+
src="https://unpkg.com/[email protected]/dist/index.js"
21+
></script>
22+
<script
23+
crossorigin
24+
src="https://unpkg.com/@types/[email protected]/index.d.ts"
25+
></script>
26+
</head>
27+
<body>
28+
<section id="index">
29+
<script type="module" src="./index.jsx"></script>
30+
<!-- bundled js and css will get inlined here during build-->
31+
</section>
32+
</body>
33+
</html>

‎src/client/preview-diagram-dialog/index.jsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import ReactDOM from 'react-dom';
2+
import PreviewDiagramDialog from './components/preview-diagram-dialog';
3+
import './styles.css';
4+
5+
const container = document.getElementById('index');
6+
const root = ReactDOM.createRoot(container);
7+
root.render(<PreviewDiagramDialog />);

‎src/client/preview-diagram-dialog/styles.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/* needed to make consistent test snapshots across OSs */
2+
body {
3+
font-family: Arial !important;
4+
}

0 commit comments

Comments
 (0)