Merge branch 'develop' into develop

client/modules/IDE/components/About.stories.jsx

@@ -0,0 +1,8 @@
+import About from './About';
+
+export default {
+  title: 'IDE/About',
+  component: About
+};
+
+export const Default = {};

client/modules/IDE/components/AssetPreview.stories.jsx

@@ -0,0 +1,13 @@
+import AssetPreview from './AssetPreview';
+
+export default {
+  title: 'IDE/AssetPreview',
+  component: AssetPreview
+};
+
+export const Default = {
+  args: {
+    url: 'https://p5js.org/assets/img/p5js.svg',
+    name: 'P5 Logo'
+  }
+};

client/modules/IDE/components/AssetSize.stories.jsx

@@ -0,0 +1,12 @@
+import AssetSize from './AssetSize';
+
+export default {
+  title: 'IDE/AssetSize',
+  component: AssetSize
+};
+
+export const Default = {
+  args: {
+    totalSize: 123
+  }
+};

client/modules/IDE/components/Console.stories.jsx

@@ -0,0 +1,8 @@
+import Console from './Console';
+
+export default {
+  title: 'IDE/Console',
+  component: Console
+};
+
+export const Default = {};

client/modules/IDE/components/ConsoleInput.stories.jsx

@@ -0,0 +1,8 @@
+import ConsoleInput from './ConsoleInput';
+
+export default {
+  title: 'IDE/ConsoleInput',
+  component: ConsoleInput
+};
+
+export const Default = {};

client/modules/IDE/components/CopyableInput.stories.jsx

@@ -0,0 +1,12 @@
+import CopyableInput from './CopyableInput';
+
+export default {
+  title: 'IDE/CopyableInput',
+  component: CopyableInput
+};
+
+export const Default = {
+  args: {
+    value: 'Lorem Ipsum'
+  }
+};

client/modules/IDE/components/EditableInput.jsx

@@ -31,6 +31,9 @@ function EditableInput({
       inputRef.current?.focus();
     }
   }, [isEditing]);
+  React.useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
 
   function beginEditing() {
     setIsEditing(true);

client/modules/IDE/components/EditableInput.stories.jsx

@@ -0,0 +1,13 @@
+import EditableInput from './EditableInput';
+
+export default {
+  title: 'IDE/EditableInput',
+  component: EditableInput
+};
+
+export const Default = {
+  args: {
+    value: '[email protected]',
+    label: 'Example'
+  }
+};

client/modules/IDE/components/Feedback.stories.jsx

@@ -0,0 +1,8 @@
+import Feedback from './Feedback';
+
+export default {
+  title: 'IDE/Feedback',
+  component: Feedback
+};
+
+export const Default = {};

client/modules/IDE/components/FileUploader.stories.jsx

@@ -0,0 +1,8 @@
+import FileUploader from './FileUploader';
+
+export default {
+  title: 'IDE/FileUploader',
+  component: FileUploader
+};
+
+export const Default = {};

client/modules/IDE/components/FloatingActionButton.stories.jsx

@@ -0,0 +1,8 @@
+import FloatingActionButton from './FloatingActionButton';
+
+export default {
+  title: 'IDE/FloatingActionButton',
+  component: FloatingActionButton
+};
+
+export const Default = {};

client/modules/IDE/components/KeyboardShortcutModal.stories.jsx

@@ -0,0 +1,8 @@
+import KeyboardShortcutModal from './KeyboardShortcutModal';
+
+export default {
+  title: 'IDE/KeyboardShortcutModal',
+  component: KeyboardShortcutModal
+};
+
+export const Default = {};

client/modules/IDE/components/NewFileForm.stories.jsx

@@ -0,0 +1,8 @@
+import NewFileForm from './NewFileForm';
+
+export default {
+  title: 'IDE/NewFileForm',
+  component: NewFileForm
+};
+
+export const Default = {};

client/modules/IDE/components/NewFileModal.stories.jsx

@@ -0,0 +1,8 @@
+import NewFileModal from './NewFileModal';
+
+export default {
+  title: 'IDE/NewFileModal',
+  component: NewFileModal
+};
+
+export const Default = {};

client/modules/IDE/components/NewFolderForm.stories.jsx

@@ -0,0 +1,8 @@
+import NewFolderForm from './NewFolderForm';
+
+export default {
+  title: 'IDE/NewFolderForm',
+  component: NewFolderForm
+};
+
+export const Default = {};

client/modules/IDE/components/NewFolderModal.stories.jsx

@@ -0,0 +1,8 @@
+import NewFolderModal from './NewFolderModal';
+
+export default {
+  title: 'IDE/NewFolderModal',
+  component: NewFolderModal
+};
+
+export const Default = {};

client/modules/IDE/components/ShareModal.stories.jsx

@@ -0,0 +1,8 @@
+import ShareModal from './ShareModal';
+
+export default {
+  title: 'IDE/ShareModal',
+  component: ShareModal
+};
+
+export const Default = {};

client/modules/IDE/components/SketchList.stories.jsx

@@ -0,0 +1,25 @@
+import SketchList from './SketchList';
+
+export default {
+  title: 'IDE/SketchList',
+  component: SketchList
+};
+
+export const Default = {
+  args: {
+    user: {
+      username: 'Joe Blogs',
+      authenticated: true
+    },
+    username: 'Joe Blogs',
+    loading: false,
+    sketches: [
+      {
+        id: '1',
+        name: 'Play Sketch',
+        createdAt: Date.now().toString(),
+        updatedAt: Date.now().toString()
+      }
+    ]
+  }
+};

client/modules/IDE/components/UploadFileModal.stories.jsx

@@ -0,0 +1,8 @@
+import UploadFileModal from './UploadFileModal';
+
+export default {
+  title: 'IDE/UploadFileModal',
+  component: UploadFileModal
+};
+
+export const Default = {};

client/modules/Preview/EmbedFrame.jsx

@@ -252,7 +252,7 @@ function injectLocalFiles(files, htmlFile, options) {
     'PREVIEW_SCRIPTS_URL'
   )}`;
   previewScripts.setAttribute('crossorigin', '');
-  sketchDoc.body.appendChild(previewScripts);
+  sketchDoc.head.appendChild(previewScripts);
 
   const sketchDocString = `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`;
   scriptOffs = getAllScriptOffsets(sketchDocString);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "p5.js-web-editor",
-  "version": "2.9.0",
+  "version": "2.9.2",
   "description": "The web editor for p5.js.",
   "scripts": {
     "clean": "rimraf dist",