Update Next.js + misc

.github/workflows/playwright.yml

@@ -9,27 +9,14 @@ jobs:
     timeout-minutes: 20
     runs-on: ubuntu-20.04
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '18'
 
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - name: Cache yarn
-        uses: actions/cache@v3
-        id: yarn-cache
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
       - name: Install dependencies
         run: |
-          yarn install
+          npm ci
           npm install -g firebase-tools
           firebase setup:emulators:database
       - name: Install Playwright Browsers
@@ -47,12 +34,12 @@ jobs:
           npm run dev &
 
       - name: Setup background services
-        run: echo '{"rules":{".read":true,".write":true}}' > database.rules.json && FIREBASE_AUTH_EMULATOR_HOST="127.0.0.1:9099" yarn start &
+        run: echo '{"rules":{".read":true,".write":true}}' > database.rules.json && FIREBASE_AUTH_EMULATOR_HOST="127.0.0.1:9099" npm start &
 
       - name: Run Playwright tests
-        run: firebase emulators:exec "yarn playwright test"
+        run: firebase emulators:exec "npm run test"
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report

README.md

@@ -266,3 +266,24 @@ If `firebase emulators:exec` fails for unknown reason, try running `firebase emu
 - Too large output
 - Classrooms
 - Copying files (#64, this broke already lol)
+
+### Updating Monaco Editor
+
+Make sure Monaco is compatible with `monaco-languageclient`!! https://github.com/TypeFox/monaco-languageclient/blob/main/docs/versions-and-history.md#monaco-editor--codingamemonaco-vscode-api-compatibility-table
+
+1. `npm install monaco-editor@latest`
+2. Modify `node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneServices.js`:
+
+   ```
+   -        return (isLinux || isMacintosh) ? '\n' : '\r\n';
+   +        return (isLinux || isMacintosh) ? '\n' : '\n';
+   ```
+
+   See `patches/monaco-editor+??.patch` for more details
+
+3. `npx patch-package monaco-editor`
+4. Commit the updated patch to Github
+5. `rm -r ./public/monaco-workers`
+6. `mkdir ./public/monaco-workers`
+7. `cp -r ./node_modules/monaco-editor-workers/dist/workers/editorWorker* ./public/monaco-workers`
+8. Test that everything works: LSP, browser sync, cross-platform sync, etc

e2e/windows_eol_fix.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test';
+import { host, waitForEditorToLoad } from './helpers';
+
+test.use({ userAgent: 'Windows' });
+
+test.describe('Windows EOL fix', () => {
+  // Monaco editor uses \r\n on Windows, but this breaks YJS.
+  // We manually patch monaco-editor to use \n everywhere.
+  test('should use \\n in windows for EOL instead of \\r\\n', async ({
+    page,
+    isMobile,
+  }) => {
+    test.skip(isMobile, "Monaco isn't used on mobile");
+
+    await page.goto(`${host}/n`);
+    await page.waitForSelector('button:has-text("Run Code")');
+
+    await waitForEditorToLoad(page);
+
+    // don't know why, but initially Monaco will be \n.
+    // this forces it to re-evaluate the EOL, which exposes the \r\n bug.
+    await page.evaluate(`this.monaco.editor.getModels()[0].setValue(".")`);
+    expect(
+      await page.evaluate(`this.monaco.editor.getModels()[0].getEOL()`)
+    ).toEqual('\n');
+  });
+});