Merge branch 'develop' into fix-reloading

Author: raclim

.gitignore

@@ -4,6 +4,7 @@
 .env.staging
 .vscode/
 node_modules/
+minio/
 npm-debug.log
 dump.rdb
 static/dist/

Dockerfile

@@ -25,7 +25,7 @@ RUN npm run build
 
 FROM base AS production
 ENV NODE_ENV=production
-COPY package.json package-lock.json index.js ./
+COPY package.json package-lock.json index.js .eslintrc ./
 RUN npm install --production
 COPY --from=build $APP_HOME/dist ./dist
 CMD ["npm", "run", "start:prod"]

client/i18n.js

@@ -18,8 +18,7 @@ import {
   uk,
   sv,
   tr,
-  enIN,
-  ne
+  enIN
 } from 'date-fns/locale';
 
 import { getPreferredLanguage } from './utils/language-utils';
@@ -101,8 +100,7 @@ export function languageKeyToDateLocale(lang) {
     'zh-CN': zhCN,
     'zh-TW': zhTW,
     tr,
-    ur: enIN,
-    ne
+    ur: enIN
   };
   return languageMap[lang];
 }

client/modules/IDE/actions/project.js

@@ -13,6 +13,7 @@ import {
   showErrorModal,
   setPreviousPath
 } from './ide';
+import { clearLocalBackup } from '../utils/localBackup';
 import { clearState, saveState } from '../../../persistState';
 
 const ROOT_URL = getConfig('API_URL');
@@ -164,6 +165,8 @@ export function saveProject(
         .then((response) => {
           dispatch(endSavingProject());
           dispatch(setUnsavedChanges(false));
+          // Clear the localStorage backup after successful server save (#3891)
+          clearLocalBackup(state.project.id);
           const { hasChanges, synchedProject } = getSynchedProject(
             getState(),
             response.data

client/modules/IDE/actions/uploader.js

@@ -3,6 +3,7 @@ import { apiClient } from '../../../utils/apiClient';
 import { getConfig } from '../../../utils/getConfig';
 import { isTestEnvironment } from '../../../utils/checkTestEnv';
 import { handleCreateFile } from './files';
+import { showErrorModal } from './ide';
 
 const s3BucketUrlBase = getConfig('S3_BUCKET_URL_BASE');
 const awsRegion = getConfig('AWS_REGION');
@@ -22,7 +23,7 @@ function isS3Upload(file) {
   return !TEXT_FILE_REGEX.test(file.name) || file.size >= MAX_LOCAL_FILE_SIZE;
 }
 
-export async function dropzoneAcceptCallback(userId, file, done) {
+export async function dropzoneAcceptCallback(userId, file, done, dispatch) {
   // if a user would want to edit this file as text, local interceptor
   if (!isS3Upload(file)) {
     try {
@@ -51,6 +52,13 @@ export async function dropzoneAcceptCallback(userId, file, done) {
       file.postData = response.data;
       done();
     } catch (error) {
+      if (error?.response?.status === 403) {
+        if (dispatch) {
+          dispatch(showErrorModal('uploadLimit'));
+        }
+        done('Upload limit reached.');
+        return;
+      }
       done(
         error?.response?.data?.responseText?.message ||
           error?.message ||

client/modules/IDE/components/Banner.jsx

@@ -7,7 +7,7 @@ import { CrossIcon } from '../../../common/icons';
  * Banner displays a dismissible announcement bar with a link and a close icon.
  * It's typically used to highlight opportunities, but use and design can be flexible.
  *
- * This component is **presentational only** — visibility logic (open/close state) should be
+ * This component is presentational only — visibility logic (open/close state) should be
  * controlled by the parent via the `onClose` handler.
  *
  * @param {Object} props
@@ -26,6 +26,7 @@ const Banner = ({ onClose }) => {
   // URL can be updated depending on the opportunity or announcement.
   const bannerURL = 'https://processingfoundation.org/donate';
 
+  // currently holds donation copy, will switch back when temp maintenance is done
   const bannerCopy = (
     <>
       <Trans i18nKey="Banner.Copy" components={{ bold: <strong /> }} />

client/modules/IDE/components/Editor/index.jsx

@@ -72,6 +72,7 @@ import UnsavedChangesIndicator from '../UnsavedChangesIndicator';
 import { EditorContainer, EditorHolder } from './MobileEditor';
 import { FolderIcon } from '../../../../common/icons';
 import { IconButton } from '../../../../common/IconButton';
+import { saveLocalBackup } from '../../utils/localBackup';
 
 import contextAwareHinter from '../../../../utils/contextAwareHinter';
 import showRenameDialog from '../../../../utils/showRenameDialog';
@@ -217,7 +218,14 @@ class Editor extends React.Component {
         this.props.setUnsavedChanges(true);
         this.props.hideRuntimeErrorWarning();
         this.props.updateFileContent(this.props.file.id, this._cm.getValue());
-        if (this.props.autorefresh && this.props.isPlaying) {
+
+        // Save a local backup to localStorage for crash recovery (#3891).
+        // This ensures work is recoverable even if the tab crashes
+        // (e.g. from an infinite loop) before the server autosave fires.
+        const projectId = this.props.project?.id || 'unsaved';
+        saveLocalBackup(projectId, this.props.files);
+
+        if (this.props.autorefresh) {
           this.props.clearConsole();
           this.props.startSketch();
         }
@@ -228,21 +236,73 @@ class Editor extends React.Component {
       this._cm.on('keyup', this.handleKeyUp);
     }
 
-    this._cm.on('keydown', (_cm, e) => {
-      // Skip hinting if the user is pasting (Ctrl/Cmd+V) or using modifier keys (Ctrl/Alt)
-      if (
-        ((e.ctrlKey || e.metaKey) && e.key === 'v') ||
-        e.ctrlKey ||
-        e.altKey
-      ) {
-        return;
+    // Mobile autocomplete support (CM5 IME + contenteditable input)
+    const triggerHint = (cm) => {
+      const mode = cm.getOption('mode');
+      if (mode !== 'css' && mode !== 'javascript') return;
+
+      const cursor = cm.getCursor();
+      const token = cm.getTokenAt(cursor);
+
+      // Android keyboards often append a trailing space after each word.
+      // When that happens, stripping the space so the hinter sees the word.
+      if (token.string === ' ' && cursor.ch > 0 && cursor.ch === token.end) {
+        const prevToken = cm.getTokenAt({
+          line: cursor.line,
+          ch: cursor.ch - 1
+        });
+        if (prevToken.string && /[a-z]/i.test(prevToken.string)) {
+          cm.replaceRange(
+            '',
+            { line: cursor.line, ch: cursor.ch - 1 },
+            cursor,
+            '+trimHint'
+          );
+          this.showHint(cm);
+          return;
+        }
       }
-      const mode = this._cm.getOption('mode');
-      if (/^[a-z]$/i.test(e.key) && (mode === 'css' || mode === 'javascript')) {
-        this.showHint(_cm);
+      if (token.string && /[a-z]/i.test(token.string)) {
+        this.showHint(cm);
+      }
+    };
+
+    // Desktop: fires on each keystroke via CM5's textarea input path.
+    this._cm.on('change', (_cm, changeObj) => {
+      if (changeObj.origin !== '+input') return;
+      if (/[a-z]/i.test(changeObj.text.join(''))) {
+        triggerHint(_cm);
       }
     });
 
+    // Mobile (word commit): fires when a composed word is accepted.
+    this._compositionEndHandler = () => {
+      setTimeout(() => {
+        if (this._cm) triggerHint(this._cm);
+      }, 150);
+    };
+    this._cm
+      .getInputField()
+      .addEventListener('compositionend', this._compositionEndHandler);
+
+    // Mobile (per-character): forces CM5 to process composing text
+    // during typing so autocomplete appears before keyboard dismissal.
+    this._compositionFlushTimer = null;
+    this._compositionUpdateHandler = (e) => {
+      if (!e.data || !/[a-z]/i.test(e.data)) return;
+      clearTimeout(this._compositionFlushTimer);
+      this._compositionFlushTimer = setTimeout(() => {
+        const display = this._cm && this._cm.display;
+        if (display && display.input && display.input.composing) {
+          display.input.composing.done = true;
+          display.input.readFromDOMSoon();
+        }
+      }, 200);
+    };
+    this._cm
+      .getInputField()
+      .addEventListener('compositionupdate', this._compositionUpdateHandler);
+
     this._cm.getWrapperElement().style[
       'font-size'
     ] = `${this.props.fontSize}px`;
@@ -372,6 +432,20 @@ class Editor extends React.Component {
   componentWillUnmount() {
     if (this._cm) {
       this._cm.off('keyup', this.handleKeyUp);
+      const inputField = this._cm.getInputField();
+      if (this._compositionEndHandler) {
+        inputField.removeEventListener(
+          'compositionend',
+          this._compositionEndHandler
+        );
+      }
+      if (this._compositionUpdateHandler) {
+        inputField.removeEventListener(
+          'compositionupdate',
+          this._compositionUpdateHandler
+        );
+      }
+      clearTimeout(this._compositionFlushTimer);
     }
     this.props.provideController(null);
   }
@@ -733,7 +807,6 @@ Editor.propTypes = {
   setUnsavedChanges: PropTypes.func.isRequired,
   startSketch: PropTypes.func.isRequired,
   autorefresh: PropTypes.bool.isRequired,
-  isPlaying: PropTypes.bool.isRequired,
   theme: PropTypes.string.isRequired,
   unsavedChanges: PropTypes.bool.isRequired,
   files: PropTypes.arrayOf(
@@ -756,11 +829,15 @@ Editor.propTypes = {
   provideController: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
   setSelectedFile: PropTypes.func.isRequired,
-  expandConsole: PropTypes.func.isRequired
+  expandConsole: PropTypes.func.isRequired,
+  project: PropTypes.shape({
+    id: PropTypes.string
+  })
 };
 
 Editor.defaultProps = {
-  htmlFile: null
+  htmlFile: null,
+  project: {}
 };
 
 function mapStateToProps(state) {

client/modules/IDE/components/ErrorModal.jsx

@@ -2,6 +2,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import prettyBytes from 'pretty-bytes';
+import { getConfig } from '../../../utils/getConfig';
+import { parseNumber } from '../../../utils/parseStringToType';
+
+const uploadLimit = parseNumber(getConfig('UPLOAD_LIMIT')) || 250000000;
+const uploadLimitText = prettyBytes(uploadLimit);
 
 const ErrorModal = ({ type, service, closeModal }) => {
   const { t } = useTranslation();
@@ -51,6 +57,18 @@ const ErrorModal = ({ type, service, closeModal }) => {
     return <p>{t('ErrorModal.SavedDifferentWindow')}</p>;
   }
 
+  function uploadLimitReached() {
+    return (
+      <p>
+        {t('UploadFileModal.SizeLimitError', { sizeLimit: uploadLimitText })}
+        <Link to="/assets" onClick={closeModal}>
+          assets
+        </Link>
+        .
+      </p>
+    );
+  }
+
   return (
     <div className="error-modal__content">
       {(() => { // eslint-disable-line
@@ -60,6 +78,8 @@ const ErrorModal = ({ type, service, closeModal }) => {
           return staleSession();
         } else if (type === 'staleProject') {
           return staleProject();
+        } else if (type === 'uploadLimit') {
+          return uploadLimitReached();
         } else if (type === 'oauthError') {
           return oauthError();
         }
@@ -73,7 +93,8 @@ ErrorModal.propTypes = {
     'forceAuthentication',
     'staleSession',
     'staleProject',
-    'oauthError'
+    'oauthError',
+    'uploadLimit'
   ]).isRequired,
   closeModal: PropTypes.func.isRequired,
   service: PropTypes.oneOf(['google', 'github'])

client/modules/IDE/components/FileUploader.jsx

@@ -69,7 +69,7 @@ function FileUploader() {
       acceptedFiles: fileExtensionsAndMimeTypes,
       dictDefaultMessage: t('FileUploader.DictDefaultMessage'),
       accept: (file, done) => {
-        dropzoneAcceptCallback(userId, file, done);
+        dropzoneAcceptCallback(userId, file, done, dispatch);
       },
       sending: dropzoneSendingCallback
     });

client/modules/IDE/hooks/useHandleMessageEvent.js

@@ -59,6 +59,7 @@ export default function useHandleMessageEvent() {
     if (hasInfiniteLoop) {
       dispatch(stopSketch());
       dispatch(expandConsole());
+      dispatch(dispatchConsoleEvent(decodedMessages));
       return;
     }