merge with develop

Author: Claire Peng

client/i18n.js

@@ -70,7 +70,7 @@ export function languageKeyToLabel(lang) {
     it: 'Italiano',
     ja: '日本語',
     ko: '한국어',
-    'pt-BR': 'Português',
+    'pt-BR': 'Português do Brasil',
     sv: 'Svenska',
     'uk-UA': 'Українська',
     'zh-CN': '简体中文',

client/index.jsx

@@ -1,6 +1,6 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { render } from 'react-dom';
-import { Provider } from 'react-redux';
+import { Provider, useSelector } from 'react-redux';
 import { Router } from 'react-router-dom';
 
 import { useTranslation } from 'react-i18next';
@@ -21,6 +21,8 @@ const initialState = window.__INITIAL_STATE__;
 
 const store = configureStore(initialState);
 
+const DONATE_LOGO_IMAGE_URL = 'https://donorbox.org/images/white_logo.svg';
+
 if (
   window.location.href.indexOf('full') === -1 &&
   window.location.href.indexOf('embed') === -1
@@ -56,30 +58,30 @@ if (
     'background: #f1678e; color: #fff; text-decoration: none; font-family: Verdana, sans-serif; display: flex; gap: 8px; width: fit-content; font-size: 16px; border-radius: 0 0 5px 5px; line-height: 24px; position: fixed; top: 50%; transform-origin: center; z-index: 9999; overflow: hidden; padding: 8px 22px 8px 18px; right: 20px; left: auto; transform: translate(50%, -50%) rotate(90deg)'
   );
   buttonScript.setAttribute('data-button-cta', 'Donate');
-  buttonScript.setAttribute(
-    'data-img-src',
-    'https://donorbox.org/images/white_logo.svg'
-  );
+  buttonScript.setAttribute('data-img-src', DONATE_LOGO_IMAGE_URL);
 
   document.body.appendChild(buttonScript);
 }
 
 const App = () => {
   const { t } = useTranslation();
+  const language = useSelector((state) => state.preferences.language);
 
-  setTimeout(() => {
-    const donateButton = document.getElementsByClassName(
-      'dbox-donation-button'
-    )[0];
+  useEffect(() => {
+    setTimeout(() => {
+      const donateButton = document.getElementsByClassName(
+        'dbox-donation-button'
+      )[0];
 
-    if (donateButton) {
-      const donateLogoImage = document.createElement('img');
-      donateLogoImage.src = 'https://donorbox.org/images/white_logo.svg';
+      if (donateButton) {
+        const donateLogoImage = document.createElement('img');
+        donateLogoImage.src = DONATE_LOGO_IMAGE_URL;
 
-      donateButton.text = t('About.Donate');
-      donateButton.prepend(donateLogoImage);
-    }
-  }, 0);
+        donateButton.text = t('About.Donate');
+        donateButton.prepend(donateLogoImage);
+      }
+    }, 500);
+  }, [language]);
 
   return (
     <div>
@@ -91,13 +93,19 @@ const App = () => {
   );
 };
 
-render(
-  <Provider store={store}>
-    <ThemeProvider>
-      <Suspense fallback={<Loader />}>
-        <App />
-      </Suspense>
-    </ThemeProvider>
-  </Provider>,
-  document.getElementById('root')
-);
+// This prevents crashes in test environments (like Jest) where document.getElementById('root') may return null.
+const rootEl = document.getElementById('root');
+if (rootEl) {
+  render(
+    <Provider store={store}>
+      <ThemeProvider>
+        <Suspense fallback={<Loader />}>
+          <App />
+        </Suspense>
+      </ThemeProvider>
+    </Provider>,
+    rootEl
+  );
+}
+
+export default store;

client/modules/IDE/actions/project.js

@@ -413,7 +413,7 @@ export function deleteProject(id) {
       });
   };
 }
-export function changeVisibility(projectId, projectName, visibility) {
+export function changeVisibility(projectId, projectName, visibility, t) {
   return (dispatch, getState) => {
     const state = getState();
 
@@ -443,11 +443,25 @@ export function changeVisibility(projectId, projectName, visibility) {
               name: response.data.name
             });
 
-            dispatch(
-              setToastText(
-                `${projectName} is now ${newVisibility.toLowerCase()}`
-              )
-            );
+            let visibilityLabel;
+
+            switch (newVisibility) {
+              case 'Public':
+                visibilityLabel = t('Visibility.Public.Label');
+                break;
+              case 'Private':
+                visibilityLabel = t('Visibility.Private.Label');
+                break;
+              default:
+                visibilityLabel = newVisibility;
+            }
+
+            const visibilityToastText = t('Visibility.Changed', {
+              projectName,
+              newVisibility: visibilityLabel.toLowerCase()
+            });
+
+            dispatch(setToastText(visibilityToastText));
             dispatch(showToast(2000));
           }
         }

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

@@ -73,6 +73,13 @@ import { EditorContainer, EditorHolder } from './MobileEditor';
 import { FolderIcon } from '../../../../common/icons';
 import { IconButton } from '../../../../common/IconButton';
 
+import contextAwareHinter from '../../../../utils/contextAwareHinter';
+import showRenameDialog from '../../../../utils/showRenameDialog';
+import handleRename from '../../../../utils/rename-variable';
+import { jumpToDefinition } from '../../../../utils/jump-to-definition';
+import { ensureAriaLiveRegion } from '../../../../utils/ScreenReaderHelper';
+import { isMac } from '../../../../utils/device';
+
 emmet(CodeMirror);
 
 window.JSHINT = JSHINT;
@@ -109,6 +116,7 @@ class Editor extends React.Component {
 
   componentDidMount() {
     this.beep = new Audio(beepUrl);
+    ensureAriaLiveRegion();
     // this.widgets = [];
     this._cm = CodeMirror(this.codemirrorContainer, {
       theme: `p5-${this.props.theme}`,
@@ -154,6 +162,17 @@ class Editor extends React.Component {
 
     delete this._cm.options.lint.options.errors;
 
+    this._cm.getWrapperElement().addEventListener('click', (e) => {
+      const isCtrlClick = isMac() ? e.metaKey : e.ctrlKey;
+
+      if (isCtrlClick) {
+        const pos = this._cm.coordsChar({ left: e.clientX, top: e.clientY });
+        jumpToDefinition.call(this, pos);
+      }
+    });
+
+    const renameKey = isMac() ? 'Ctrl-F2' : 'F2';
+
     const replaceCommand =
       metaKey === 'Ctrl' ? `${metaKey}-H` : `${metaKey}-Option-F`;
     this._cm.setOption('extraKeys', {
@@ -172,6 +191,7 @@ class Editor extends React.Component {
       [`Shift-${metaKey}-E`]: (cm) => {
         cm.getInputField().blur();
       },
+      [renameKey]: (cm) => this.renameVariable(cm),
       [`Shift-Tab`]: false,
       [`${metaKey}-Enter`]: () => null,
       [`Shift-${metaKey}-Enter`]: () => null,
@@ -209,7 +229,14 @@ class Editor extends React.Component {
     }
 
     this._cm.on('keydown', (_cm, e) => {
-      // Show hint
+      // 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;
+      }
       const mode = this._cm.getOption('mode');
       if (/^[a-z]$/i.test(e.key) && (mode === 'css' || mode === 'javascript')) {
         this.showHint(_cm);
@@ -395,12 +422,15 @@ class Editor extends React.Component {
   }
 
   showHint(_cm) {
+    if (!_cm) return;
+
     if (!this.props.autocompleteHinter) {
       CodeMirror.showHint(_cm, () => {}, {});
       return;
     }
 
     let focusedLinkElement = null;
+
     const setFocusedLinkElement = (set) => {
       if (set && !focusedLinkElement) {
         const activeItemLink = document.querySelector(
@@ -415,6 +445,7 @@ class Editor extends React.Component {
         }
       }
     };
+
     const removeFocusedLinkElement = () => {
       if (focusedLinkElement) {
         focusedLinkElement.classList.remove('focused-hint-link');
@@ -437,12 +468,8 @@ class Editor extends React.Component {
           );
           if (activeItemLink) activeItemLink.click();
         },
-        Right: (cm, e) => {
-          setFocusedLinkElement(true);
-        },
-        Left: (cm, e) => {
-          removeFocusedLinkElement();
-        },
+        Right: (cm, e) => setFocusedLinkElement(true),
+        Left: (cm, e) => removeFocusedLinkElement(),
         Up: (cm, e) => {
           const onLink = removeFocusedLinkElement();
           e.moveFocus(-1);
@@ -461,30 +488,28 @@ class Editor extends React.Component {
       closeOnUnfocus: false
     };
 
-    if (_cm.options.mode === 'javascript') {
-      // JavaScript
-      CodeMirror.showHint(
-        _cm,
-        () => {
-          const c = _cm.getCursor();
-          const token = _cm.getTokenAt(c);
-
-          const hints = this.hinter
-            .search(token.string)
-            .filter((h) => h.item.text[0] === token.string[0]);
-
-          return {
-            list: hints,
-            from: CodeMirror.Pos(c.line, token.start),
-            to: CodeMirror.Pos(c.line, c.ch)
-          };
-        },
-        hintOptions
-      );
-    } else if (_cm.options.mode === 'css') {
-      // CSS
-      CodeMirror.showHint(_cm, CodeMirror.hint.css, hintOptions);
-    }
+    const triggerHints = () => {
+      if (_cm.options.mode === 'javascript') {
+        CodeMirror.showHint(
+          _cm,
+          () => {
+            const c = _cm.getCursor();
+            const token = _cm.getTokenAt(c);
+            const hints = contextAwareHinter(_cm, { hinter: this.hinter });
+            return {
+              list: hints,
+              from: CodeMirror.Pos(c.line, token.start),
+              to: CodeMirror.Pos(c.line, c.ch)
+            };
+          },
+          hintOptions
+        );
+      } else if (_cm.options.mode === 'css') {
+        CodeMirror.showHint(_cm, CodeMirror.hint.css, hintOptions);
+      }
+    };
+
+    setTimeout(triggerHints, 0);
   }
 
   showReplace() {
@@ -522,6 +547,34 @@ class Editor extends React.Component {
     }
   }
 
+  renameVariable(cm) {
+    const cursorCoords = cm.cursorCoords(true, 'page');
+    const selection = cm.getSelection();
+    const pos = cm.getCursor(); // or selection start
+    const token = cm.getTokenAt(pos);
+    const tokenType = token.type;
+    if (!selection) {
+      return;
+    }
+
+    const sel = cm.listSelections()[0];
+    const fromPos =
+      CodeMirror.cmpPos(sel.anchor, sel.head) <= 0 ? sel.anchor : sel.head;
+
+    showRenameDialog(
+      cm,
+      fromPos,
+      tokenType,
+      cursorCoords,
+      selection,
+      (newName) => {
+        if (newName && newName.trim() !== '' && newName !== selection) {
+          handleRename(fromPos, selection, newName, cm);
+        }
+      }
+    );
+  }
+
   initializeDocuments(files) {
     this._docs = {};
     files.forEach((file) => {

client/modules/IDE/components/Header/Toolbar.jsx

@@ -33,7 +33,6 @@ const Toolbar = (props) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const userIsOwner = user?.username === project.owner?.username;
-
   const showVisibilityDropdown = project?.owner && userIsOwner;
 
   const playButtonClass = classNames({
@@ -51,7 +50,7 @@ const Toolbar = (props) => {
 
   const handleVisibilityChange = useCallback(
     (sketchId, sketchName, newVisibility) => {
-      dispatch(changeVisibility(sketchId, sketchName, newVisibility));
+      dispatch(changeVisibility(sketchId, sketchName, newVisibility, t));
     },
     [changeVisibility]
   );

client/modules/IDE/components/KeyboardShortcutModal.jsx

@@ -8,6 +8,7 @@ function KeyboardShortcutModal() {
     metaKey === 'Ctrl' ? `${metaKeyName} + H` : `${metaKeyName} + ⌥ + F`;
   const newFileCommand =
     metaKey === 'Ctrl' ? `${metaKeyName} + Alt + N` : `${metaKeyName} + ⌥ + N`;
+  const renameCommand = metaKey === 'Ctrl' ? 'F2' : 'Ctrl + F2';
   return (
     <div className="keyboard-shortcuts">
       <h3 className="keyboard-shortcuts__title">
@@ -75,6 +76,10 @@ function KeyboardShortcutModal() {
           <span className="keyboard-shortcut__command">{newFileCommand}</span>
           <span>{t('KeyboardShortcuts.CodeEditing.CreateNewFile')}</span>
         </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">{renameCommand}</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.RenameVariable')}</span>
+        </li>
       </ul>
       <h3 className="keyboard-shortcuts__title">
         {t('KeyboardShortcuts.General')}

client/modules/IDE/components/SketchListRowBase.jsx

@@ -91,7 +91,7 @@ const SketchListRowBase = ({
 
   const handleVisibilityChange = useCallback(
     (sketchId, sketchName, newVisibility) => {
-      changeVisibility(sketchId, sketchName, newVisibility);
+      changeVisibility(sketchId, sketchName, newVisibility, t);
     },
     [changeVisibility]
   );