Merge branch 'develop' into memory-fix

Author: raclim

.gitignore

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

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/components/Editor/index.jsx

@@ -228,21 +228,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 +424,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);
   }

client/modules/User/components/CollectionItemRow.jsx

@@ -6,6 +6,7 @@ import { useDispatch } from 'react-redux';
 import { removeFromCollection } from '../../IDE/actions/collections';
 import { formatDateToString } from '../../../utils/formatDate';
 import RemoveIcon from '../../../images/close.svg';
+import { Tooltip } from '../../../common/Tooltip';
 
 const CollectionItemRow = ({ collection, item, isOwner }) => {
   const { t } = useTranslation();
@@ -48,13 +49,15 @@ const CollectionItemRow = ({ collection, item, isOwner }) => {
       <td>{sketchOwnerUsername}</td>
       <td className="collection-row__action-column">
         {isOwner && (
-          <button
-            className="collection-row__remove-button"
-            onClick={handleSketchRemove}
-            aria-label={t('Collection.SketchRemoveARIA')}
-          >
-            <RemoveIcon focusable="false" aria-hidden="true" />
-          </button>
+          <Tooltip content={t('Collection.SketchRemoveARIA')}>
+            <button
+              className="collection-row__remove-button"
+              onClick={handleSketchRemove}
+              aria-label={t('Collection.SketchRemoveARIA')}
+            >
+              <RemoveIcon focusable="false" aria-hidden="true" />
+            </button>
+          </Tooltip>
         )}
       </td>
     </tr>

client/modules/User/components/CollectionItemRow.unit.test.jsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import thunk from 'redux-thunk';
+import configureStore from 'redux-mock-store';
+import { reduxRender, screen, fireEvent, act } from '../../../test-utils';
+import { initialTestState } from '../../../testData/testReduxStore';
+import CollectionItemRow from './CollectionItemRow';
+
+jest.mock('../../../i18n');
+
+const mockStore = configureStore([thunk]);
+const store = mockStore(initialTestState);
+
+let subjectProps = {
+  collection: {
+    id: 'collection-123',
+    name: 'Test Collection'
+  },
+  item: {
+    createdAt: '2026-01-15T10:30:00.000Z',
+    isDeleted: false,
+    project: {
+      id: 'project-456',
+      name: 'My Sketch',
+      user: { username: 'testuser' },
+      visibility: 'Public'
+    }
+  },
+  isOwner: true
+};
+
+const subject = () => {
+  reduxRender(
+    <table>
+      <tbody>
+        <CollectionItemRow {...subjectProps} />
+      </tbody>
+    </table>,
+    { store }
+  );
+};
+
+describe('<CollectionItemRow />', () => {
+  afterEach(() => {
+    store.clearActions();
+  });
+
+  it('renders the sketch name as a link', () => {
+    subject();
+    const link = screen.getByRole('link', { name: 'My Sketch' });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '/testuser/sketches/project-456');
+  });
+
+  it('renders the owner username', () => {
+    subject();
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+  });
+
+  it('shows the remove button when user is the owner', () => {
+    subject();
+    expect(screen.getByRole('button', { name: /remove/i })).toBeInTheDocument();
+  });
+
+  describe('when user is not the owner', () => {
+    beforeAll(() => {
+      subjectProps = { ...subjectProps, isOwner: false };
+    });
+
+    afterAll(() => {
+      subjectProps = { ...subjectProps, isOwner: true };
+    });
+
+    it('does not show the remove button', () => {
+      subject();
+      expect(
+        screen.queryByRole('button', { name: /remove/i })
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  it('wraps the remove button with a tooltip', async () => {
+    subject();
+
+    const button = screen.getByRole('button', { name: /remove/i });
+    await act(async () => {
+      fireEvent.mouseEnter(button);
+    });
+    expect(button).toHaveClass('tooltipped');
+  });
+
+  describe('when the project is deleted', () => {
+    beforeAll(() => {
+      subjectProps = {
+        ...subjectProps,
+        item: {
+          ...subjectProps.item,
+          isDeleted: true,
+          project: undefined
+        }
+      };
+    });
+
+    it('shows the deleted sketch label', () => {
+      subject();
+      expect(screen.getByText('Sketch deleted')).toBeInTheDocument();
+    });
+  });
+});

client/modules/User/components/NewPasswordForm.tsx

@@ -34,7 +34,7 @@ export function NewPasswordForm(props: { resetPasswordToken: string }) {
                   className="form__input"
                   aria-label={t('NewPasswordForm.TitleARIA')}
                   type="password"
-                  id="Password"
+                  id="password"
                   autoComplete="new-password"
                   {...field.input}
                 />
@@ -49,14 +49,14 @@ export function NewPasswordForm(props: { resetPasswordToken: string }) {
           <Field name="confirmPassword">
             {(field) => (
               <p className="form__field">
-                <label htmlFor="confirm password" className="form__label">
+                <label htmlFor="confirmPassword" className="form__label">
                   {t('NewPasswordForm.ConfirmPassword')}
                 </label>
                 <input
                   className="form__input"
                   type="password"
                   aria-label={t('NewPasswordForm.ConfirmPasswordARIA')}
-                  id="confirm password"
+                  id="confirmPassword"
                   autoComplete="new-password"
                   {...field.input}
                 />

client/styles/abstracts/_variables.scss

@@ -57,7 +57,7 @@ $themes: (
     error-color: $p5js-pink,
     file-hover-color: $light,
     file-selected-color: $medium-light,
-    form-input-placeholder-text-color: $middle-light,
+    form-input-placeholder-text-color: $middle-gray,
     form-input-text-color: $dark,
     form-navigation-options-color: $middle-dark,
     form-secondary-title-color: $medium-dark,
@@ -91,7 +91,7 @@ $themes: (
     ide-border-color: $medium-light,
     inactive-text-color: $middle-dark,
     input-background-color: $lightest,
-    input-border-color: $middle-light,
+    input-border-color: $middle-dark,
     input-secondary-background-color: $lightest,
     input-selection-background-color: $medium-light,
     input-selection-text-color: $dark,
@@ -155,6 +155,7 @@ $themes: (
     error-color: $p5js-pink,
     file-hover-color: $dark,
     file-selected-color: $medium-dark,
+    form-input-placeholder-text-color: $middle-gray,
     form-navigation-options-color: $middle-light,
     form-secondary-title-color: $medium-light,
     form-title-color: $lightest,
@@ -187,7 +188,7 @@ $themes: (
     ide-border-color: $middle-dark,
     inactive-text-color: $middle-light,
     input-background-color: $dark,
-    input-border-color: $middle-dark,
+    input-border-color: $light,
     input-secondary-background-color: $medium-dark,
     input-selection-background-color: $lightest,
     input-selection-text-color: $darkest,

client/styles/components/_collection.scss

@@ -148,6 +148,22 @@
 .collection-row__action-column {
   width: #{math.div(60, $base-font-size)}rem;
   position: relative;
+
+  .tooltip-wrapper {
+    display: inline-flex;
+    width: auto;
+
+    .tooltipped::after {
+      right: 0;
+      left: auto;
+    }
+
+    .tooltipped-n::before,
+    .tooltipped::before {
+      right: #{math.div(10, $base-font-size)}rem;
+      left: auto;
+    }
+  }
 }
 
 .collection-row__remove-button {

common/p5Versions.js

@@ -1,4 +1,4 @@
-export const currentP5Version = '1.11.11'; // Don't update to 2.x until 2026
+export const currentP5Version = '1.11.12'; // Don't update to 2.x until 2026
 
 // Generated from https://www.npmjs.com/package/p5?activeTab=versions
 // Run this in the console:
@@ -17,7 +17,8 @@ export const p5Versions = [
   '2.0.2',
   '2.0.1',
   '2.0.0',
-  { version: '1.11.11', label: '(Default)' },
+  { version: '1.11.12', label: '(Default)' },
+  '1.11.11',
   '1.11.10',
   '1.11.9',
   '1.11.8',