Skip to content

Commit b2ec796

Browse files
dipamsendipamsen
authored
Merge branch 'develop' into add-contenttype
2 parents eff0e3f + 886419f commit b2ec796

26 files changed

+16494
-22879
lines changed

‎.babelrc

+14
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,20 @@
6262
}
6363
]
6464
]
65+
},
66+
"test": {
67+
"presets": [
68+
"@babel/preset-env",
69+
[
70+
"@babel/preset-react",
71+
{
72+
"runtime": "automatic"
73+
}
74+
]
75+
],
76+
"plugins": [
77+
"babel-plugin-styled-components"
78+
]
6579
}
6680
},
6781
"plugins": [

‎.github/CONTRIBUTING.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ For first-time contributors or those who want to start with a small task, [check
4646
If you're looking for a bigger project to take on, look through the issues tagged [good medium issue](https://github.com/processing/p5.js-web-editor/labels/good%20medium%20issue). These issues are self-contained projects that may take longer to work on, but are great if you're looking to get more deeply involved in contributing!
4747

4848
### Project Board
49-
Many issues are related to each other and fall under bigger projects. To get a bigger picture, look at the [All Projects](https://github.com/processing/p5.js-web-editor/projects/4) board.
49+
Many issues are related to each other and fall under bigger projects. To get a bigger picture, look at the [All Projects](https://github.com/processing/p5.js-web-editor/projects/) board.
5050

5151
### Project Ideas
5252
If you're looking for inspiration for Google Summer of Code or a bigger project, there's a [project list](https://github.com/processing/processing/wiki/Project-List#p5js-web-editor) maintained on the Processing wiki.

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ Learn more about [our community](https://p5js.org/community/) and read our commu
1414

1515
## Getting Started
1616

17-
Make your first sketch in the [p5.js Editor](https://editor.p5js.org/)! Learn more about sketching with p5.js on the [Get Started](https://p5js.org/get-started/) and find everything you can do in the [Reference](https://p5js.org/reference/). You can also look at [examples](https://editor.p5js.org/p5/sketches) and remix them in the p5.js Editor.
17+
Make your first sketch in the [p5.js Editor](https://editor.p5js.org/)! Learn more about sketching with p5.js on the [Get Started](https://p5js.org/tutorials/get-started/) and find everything you can do in the [Reference](https://p5js.org/reference/). You can also look at [examples](https://editor.p5js.org/p5/sketches) and remix them in the p5.js Editor.
1818

1919

2020
## Issues

‎client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

+6-6
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
211211
-ms-flex-direction: column;
212212
flex-direction: column;
213213
gap: 0.16666666666666666rem;
214-
box-shadow: rgba(60,64,67,0.3) 0px 1px 2px 0px, rgba(60,64,67,0.15) 0px 1px 3px 1px;
214+
box-shadow: rgba(60,64,67,0.3) 0px 1px 2px 0px,rgba(60,64,67,0.15) 0px 1px 3px 1px;
215215
min-width: 10rem;
216216
border-radius: 0.16666666666666666rem;
217217
}
@@ -324,7 +324,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
324324
>
325325
<test-file-stub
326326
aria-hidden="true"
327-
classname="sc-fujyAs cSTVlM"
327+
classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
328328
focusable="false"
329329
/>
330330
</button>
@@ -340,7 +340,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
340340
>
341341
<test-file-stub
342342
aria-hidden="true"
343-
classname="sc-iqAclL iOZiVo"
343+
classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
344344
focusable="false"
345345
/>
346346
</button>
@@ -912,7 +912,7 @@ exports[`Nav renders editor version for mobile 1`] = `
912912
-ms-flex-direction: column;
913913
flex-direction: column;
914914
gap: 0.16666666666666666rem;
915-
box-shadow: rgba(60,64,67,0.3) 0px 1px 2px 0px, rgba(60,64,67,0.15) 0px 1px 3px 1px;
915+
box-shadow: rgba(60,64,67,0.3) 0px 1px 2px 0px,rgba(60,64,67,0.15) 0px 1px 3px 1px;
916916
min-width: 10rem;
917917
border-radius: 0.16666666666666666rem;
918918
}
@@ -1025,7 +1025,7 @@ exports[`Nav renders editor version for mobile 1`] = `
10251025
>
10261026
<test-file-stub
10271027
aria-hidden="true"
1028-
classname="sc-fujyAs cSTVlM"
1028+
classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
10291029
focusable="false"
10301030
/>
10311031
</button>
@@ -1041,7 +1041,7 @@ exports[`Nav renders editor version for mobile 1`] = `
10411041
>
10421042
<test-file-stub
10431043
aria-hidden="true"
1044-
classname="sc-iqAclL iOZiVo"
1044+
classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
10451045
focusable="false"
10461046
/>
10471047
</button>

‎client/modules/IDE/components/Header/resolveUtils.unit.test.jsx

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
// resolveUtils.unit.test.jsx
2+
3+
import resolvePathsForElementsWithAttribute from '../../../../../server/utils/resolveUtils';
4+
import { resolvePathToFile } from '../../../../../server/utils/filePath';
5+
6+
// Mock the dependencies
7+
jest.mock('../../../../../server/utils/filePath', () => ({
8+
resolvePathToFile: jest.fn()
9+
}));
10+
11+
jest.mock('../../../../../server/utils/fileUtils', () => ({
12+
MEDIA_FILE_REGEX: /\.(png|jpg|jpeg|gif|svg)$/i
13+
}));
14+
15+
describe('resolvePathsForElementsWithAttribute', () => {
16+
let mockSketchDoc;
17+
let mockFiles;
18+
19+
beforeEach(() => {
20+
jest.clearAllMocks();
21+
22+
// Create a mock DOM environment
23+
mockSketchDoc = document.implementation.createHTMLDocument();
24+
mockFiles = {
25+
'image.png': { url: 'https://example.com/image.png' },
26+
'missing.jpg': { url: null }
27+
};
28+
29+
resolvePathToFile.mockImplementation((fileName, files) => files[fileName]);
30+
});
31+
32+
it('should update the attribute when the file is resolved successfully', () => {
33+
const element = mockSketchDoc.createElement('img');
34+
element.setAttribute('src', 'image.png');
35+
mockSketchDoc.body.appendChild(element);
36+
37+
resolvePathsForElementsWithAttribute('src', mockSketchDoc, mockFiles);
38+
39+
expect(element.getAttribute('src')).toBe('https://example.com/image.png');
40+
});
41+
42+
it('should not update the attribute when the file resolution fails', () => {
43+
const element = mockSketchDoc.createElement('img');
44+
element.setAttribute('src', 'missing.jpg');
45+
mockSketchDoc.body.appendChild(element);
46+
47+
resolvePathsForElementsWithAttribute('src', mockSketchDoc, mockFiles);
48+
49+
expect(element.getAttribute('src')).toBe('missing.jpg');
50+
});
51+
52+
it('should not update the attribute when the value does not match MEDIA_FILE_REGEX', () => {
53+
const element = mockSketchDoc.createElement('img');
54+
element.setAttribute('src', 'document.pdf');
55+
mockSketchDoc.body.appendChild(element);
56+
57+
resolvePathsForElementsWithAttribute('src', mockSketchDoc, mockFiles);
58+
59+
expect(element.getAttribute('src')).toBe('document.pdf');
60+
});
61+
62+
it('should do nothing when no elements with the specified attribute are found', () => {
63+
resolvePathsForElementsWithAttribute('src', mockSketchDoc, mockFiles);
64+
65+
expect(mockSketchDoc.querySelectorAll('[src]').length).toBe(0);
66+
});
67+
});

‎client/modules/IDE/components/Sidebar.jsx

+56-48
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useRef } from 'react';
1+
import React, { useRef, useEffect } from 'react';
22
import classNames from 'classnames';
33
import { useTranslation } from 'react-i18next';
44
import { useDispatch, useSelector } from 'react-redux';
@@ -30,21 +30,37 @@ export default function SideBar() {
3030
);
3131
const isExpanded = useSelector((state) => state.ide.sidebarIsExpanded);
3232
const canEditProject = useSelector(selectCanEditSketch);
33+
const isAuthenticated = useSelector(getAuthenticated);
3334

3435
const sidebarOptionsRef = useRef(null);
3536

36-
const isAuthenticated = useSelector(getAuthenticated);
37+
useEffect(() => {
38+
function handleClickOutside(event) {
39+
if (
40+
projectOptionsVisible &&
41+
sidebarOptionsRef.current &&
42+
!sidebarOptionsRef.current.contains(event.target)
43+
) {
44+
setTimeout(() => dispatch(closeProjectOptions()), 300);
45+
}
46+
}
3747

38-
const onBlurComponent = () => {
39-
setTimeout(() => dispatch(closeProjectOptions()), 200);
40-
};
48+
if (projectOptionsVisible) {
49+
document.addEventListener('mousedown', handleClickOutside);
50+
} else {
51+
document.removeEventListener('mousedown', handleClickOutside);
52+
}
53+
54+
return () => {
55+
document.removeEventListener('mousedown', handleClickOutside);
56+
};
57+
}, [projectOptionsVisible, dispatch]);
4158

4259
const toggleProjectOptions = (e) => {
4360
e.preventDefault();
4461
if (projectOptionsVisible) {
4562
dispatch(closeProjectOptions());
4663
} else {
47-
sidebarOptionsRef.current?.focus();
4864
dispatch(openProjectOptions());
4965
}
5066
};
@@ -65,9 +81,7 @@ export default function SideBar() {
6581
dispatch(collapseSidebar());
6682
dispatch(closeProjectOptions());
6783
}}
68-
>
69-
{' '}
70-
</button>
84+
/>
7185
)}
7286
<section className={sidebarClass}>
7387
<header
@@ -77,60 +91,54 @@ export default function SideBar() {
7791
<h3 className="sidebar__title">
7892
<span>{t('Sidebar.Title')}</span>
7993
</h3>
80-
<div className="sidebar__icons">
94+
<div className="sidebar__icons" ref={sidebarOptionsRef}>
8195
<button
8296
aria-label={t('Sidebar.ToggleARIA')}
8397
className="sidebar__add"
8498
tabIndex="0"
85-
ref={sidebarOptionsRef}
8699
onClick={toggleProjectOptions}
87-
onBlur={onBlurComponent}
88100
>
89101
<PlusIcon focusable="false" aria-hidden="true" />
90102
</button>
91-
<ul className="sidebar__project-options">
92-
<li>
93-
<button
94-
onMouseDown={(e) => e.preventDefault()}
95-
aria-label={t('Sidebar.AddFolderARIA')}
96-
onClick={() => {
97-
dispatch(newFolder(rootFile.id));
98-
setTimeout(() => dispatch(closeProjectOptions()), 0);
99-
}}
100-
onBlur={onBlurComponent}
101-
>
102-
{t('Sidebar.AddFolder')}
103-
</button>
104-
</li>
105-
<li>
106-
<button
107-
onMouseDown={(e) => e.preventDefault()}
108-
aria-label={t('Sidebar.AddFileARIA')}
109-
onClick={() => {
110-
dispatch(newFile(rootFile.id));
111-
setTimeout(() => dispatch(closeProjectOptions()), 0);
112-
}}
113-
onBlur={onBlurComponent}
114-
>
115-
{t('Sidebar.AddFile')}
116-
</button>
117-
</li>
118-
{isAuthenticated && (
103+
{projectOptionsVisible && (
104+
<ul className="sidebar__project-options">
105+
<li>
106+
<button
107+
aria-label={t('Sidebar.AddFolderARIA')}
108+
onClick={() => {
109+
dispatch(newFolder(rootFile.id));
110+
setTimeout(() => dispatch(closeProjectOptions()), 300);
111+
}}
112+
>
113+
{t('Sidebar.AddFolder')}
114+
</button>
115+
</li>
119116
<li>
120117
<button
121-
onMouseDown={(e) => e.preventDefault()}
122-
aria-label={t('Sidebar.UploadFileARIA')}
118+
aria-label={t('Sidebar.AddFileARIA')}
123119
onClick={() => {
124-
dispatch(openUploadFileModal(rootFile.id));
125-
setTimeout(() => dispatch(closeProjectOptions()), 0);
120+
dispatch(newFile(rootFile.id));
121+
setTimeout(() => dispatch(closeProjectOptions()), 300);
126122
}}
127-
onBlur={onBlurComponent}
128123
>
129-
{t('Sidebar.UploadFile')}
124+
{t('Sidebar.AddFile')}
130125
</button>
131126
</li>
132-
)}
133-
</ul>
127+
{isAuthenticated && (
128+
<li>
129+
<button
130+
aria-label={t('Sidebar.UploadFileARIA')}
131+
onClick={() => {
132+
dispatch(openUploadFileModal(rootFile.id));
133+
setTimeout(() => dispatch(closeProjectOptions()), 300);
134+
}}
135+
>
136+
{t('Sidebar.UploadFile')}
137+
</button>
138+
</li>
139+
)}
140+
</ul>
141+
)}
134142
</div>
135143
</header>
136144
<ConnectedFileNode id={rootFile.id} canEdit={canEditProject} />

‎client/modules/Preview/EmbedFrame.jsx

+1-14
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import decomment from 'decomment';
88
import { resolvePathToFile } from '../../../server/utils/filePath';
99
import getConfig from '../../utils/getConfig';
1010
import {
11-
MEDIA_FILE_REGEX,
1211
MEDIA_FILE_QUOTED_REGEX,
1312
STRING_REGEX,
1413
PLAINTEXT_FILE_REGEX,
@@ -18,6 +17,7 @@ import {
1817
import { getAllScriptOffsets } from '../../utils/consoleUtils';
1918
import { registerFrame } from '../../utils/dispatcher';
2019
import { createBlobUrl } from './filesReducer';
20+
import resolvePathsForElementsWithAttribute from '../../../server/utils/resolveUtils';
2121

2222
let objectUrls = {};
2323
let objectPaths = {};
@@ -34,19 +34,6 @@ const Frame = styled.iframe`
3434
`}
3535
`;
3636

37-
function resolvePathsForElementsWithAttribute(attr, sketchDoc, files) {
38-
const elements = sketchDoc.querySelectorAll(`[${attr}]`);
39-
const elementsArray = Array.prototype.slice.call(elements);
40-
elementsArray.forEach((element) => {
41-
if (element.getAttribute(attr).match(MEDIA_FILE_REGEX)) {
42-
const resolvedFile = resolvePathToFile(element.getAttribute(attr), files);
43-
if (resolvedFile && resolvedFile.url) {
44-
element.setAttribute(attr, resolvedFile.url);
45-
}
46-
}
47-
});
48-
}
49-
5037
function resolveCSSLinksInString(content, files) {
5138
let newContent = content;
5239
let cssFileStrings = content.match(STRING_REGEX);

‎client/modules/User/components/AccountForm.jsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,10 @@ function AccountForm() {
9797
{t('AccountForm.EmailSent')}
9898
</span>
9999
) : (
100-
<Button onClick={handleInitiateVerification}>
100+
<Button
101+
onClick={handleInitiateVerification}
102+
className="form__resend-button"
103+
>
101104
{t('AccountForm.Resend')}
102105
</Button>
103106
)}

‎client/modules/User/components/LoginForm.jsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,9 @@ function LoginForm() {
101101
)}
102102
</Field>
103103
{submitError && !modifiedSinceLastSubmit && (
104-
<span className="form-error">{submitError}</span>
104+
<span className="form-error">
105+
{t('LoginForm.Errors.invalidCredentials')}
106+
</span>
105107
)}
106108
<Button type="submit" disabled={submitting}>
107109
{t('LoginForm.Submit')}

0 commit comments

Comments
 (0)