Merge branch 'main' into widget-richtext

Author: martinjagodic

.github/workflows/nodejs.yml

@@ -2,8 +2,6 @@ name: Node CI
 
 on:
   push:
-    branches:
-      - main
   pull_request:
     types: [opened, synchronize, reopened]
 
@@ -27,74 +25,38 @@ jobs:
     strategy:
       matrix:
         os: [macos-latest, windows-latest, ubuntu-latest]
-        node-version: [18.x, 20.x]
+        node-version: [20.x, 22.x]
+      fail-fast: true
     if: ${{ needs.changes.outputs.cms == 'true' }}
     steps:
       - uses: actions/checkout@v3
-      - name: Use Node.js {{ matrix.node-version }}
+      - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           check-latest: true
+          cache: 'npm'
       - name: log versions
         run: node --version && npm --version && yarn --version
-      - name: install dependecies
-        run: npm install
+      - name: install dependencies
+        run: npm ci
       - name: run unit tests
         run: npm run test:ci
-        env:
-          CI: true
-          NODE_OPTIONS: --max-old-space-size=4096
       - name: build demo site
         run: npm run build:demo
+      - name: run e2e tests
+        if: matrix.os == 'ubuntu-latest' && matrix.node-version == '22.x'
+        run: npm run test:e2e:run-ci
         env:
-          NODE_OPTIONS: --max-old-space-size=4096
-      - uses: actions/upload-artifact@master
-        with:
-          name: dev-test-website-${{ runner.os }}-${{ matrix.node-version }}
-          path: dev-test
-
-  e2e-with-cypress:
-    needs: [changes, build]
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [18.x, 20.x]
-      fail-fast: false
-
-    if: ${{ needs.changes.outputs.cms == 'true' }}
-    steps:
-      - uses: actions/checkout@v3
-      - name: Use Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          check-latest: true
-      - uses: actions/download-artifact@master
-        with:
-          name: dev-test-website-${{ runner.os }}-18.x
-          path: dev-test
-      - name: npm install
-        run: |
-          node --version
-          npm --version
-          yarn --version
-          npm install
-      - name: e2e test
-        run: |
-          npm run test:e2e:run-ci
-        env:
-          IS_FORK: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == true }}
+          IS_FORK: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == true || github.repository_owner != 'decaporg' }}
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           NODE_OPTIONS: --max-old-space-size=4096
-          MACHINE_COUNT: 2
-          MACHINE_INDEX: ${{ matrix.node-version }}
           TZ: Europe/Amsterdam
-      - uses: actions/upload-artifact@v3
-        if: ${{ always() }}
+      - uses: actions/upload-artifact@v4
+        if: matrix.os == 'ubuntu-latest' && matrix.node-version == '22.x' && failure()
         with:
-          name: cypress-results-${{ matrix.node-version }}
+          name: cypress-results
           path: |
             cypress/screenshots
             cypress/videos
+

.gitignore

@@ -19,4 +19,4 @@ coverage/
 .env
 .temp/
 storybook-static/
-.nx/cache
+.nx

babel.config.js

@@ -8,24 +8,31 @@ const isESM = process.env.NODE_ENV === 'esm';
 
 console.log('Build Package:', path.basename(process.cwd()));
 
-const defaultPlugins = [
-  'lodash',
+// Always enabled plugins
+const basePlugins = [
   [
     'babel-plugin-transform-builtin-extend',
     {
       globals: ['Error'],
     },
   ],
+  'babel-plugin-inline-json-import',
+];
+
+// Legacy transforms for non-ESM builds
+// REVISIT: We probably don't need any of these since we use preset-env
+const legacyPlugins = [
   'transform-export-extensions',
   '@babel/plugin-proposal-class-properties',
   '@babel/plugin-proposal-object-rest-spread',
   '@babel/plugin-proposal-export-default-from',
   '@babel/plugin-proposal-nullish-coalescing-operator',
   '@babel/plugin-proposal-optional-chaining',
   '@babel/plugin-syntax-dynamic-import',
-  'babel-plugin-inline-json-import',
 ];
 
+const defaultPlugins = [...basePlugins, ...(isESM ? [] : legacyPlugins)];
+
 const svgo = {
   plugins: [
     {
@@ -42,14 +49,14 @@ const svgo = {
 function presets() {
   return [
     '@babel/preset-react',
-    '@babel/preset-env',
+    ...(!isESM ? [['@babel/preset-env', {}]] : []),
     [
       '@emotion/babel-preset-css-prop',
       {
         autoLabel: 'always',
       },
     ],
-    '@babel/typescript',
+    '@babel/preset-typescript',
   ];
 }
 
@@ -70,6 +77,12 @@ function plugins() {
           svgo,
         },
       ],
+      [
+        'inline-import',
+        {
+          extensions: ['.css'],
+        },
+      ],
     ];
   }
 

cypress/e2e/editorial_workflow_spec_test_backend.js

@@ -207,17 +207,16 @@ describe('Test Backend Editorial Workflow', () => {
     login();
 
     inSidebar(() => cy.contains('a', 'Pages').click());
-    inSidebar(() => cy.contains('a', 'Directory'));
+    inSidebar(() => cy.contains('a', /^Directory$/));
     inGrid(() => cy.contains('a', 'Root Page'));
-    inGrid(() => cy.contains('a', 'Directory'));
 
-    inSidebar(() => cy.contains('a', 'Directory').click());
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
 
-    inGrid(() => cy.contains('a', 'Sub Directory'));
-    inGrid(() => cy.contains('a', 'Another Sub Directory'));
+    inSidebar(() => cy.contains('a', /^Sub Directory$/));
+    inSidebar(() => cy.contains('a', 'Another Sub Directory'));
 
-    inSidebar(() => cy.contains('a', 'Sub Directory').click());
-    inGrid(() => cy.contains('a', 'Nested Directory'));
+    inSidebar(() => cy.contains('a', /^Sub Directory$/).click());
+    inSidebar(() => cy.contains('a', 'Nested Directory'));
     cy.url().should(
       'eq',
       'http://localhost:8080/#/collections/pages/filter/directory/sub-directory',
@@ -233,21 +232,17 @@ describe('Test Backend Editorial Workflow', () => {
     login();
 
     inSidebar(() => cy.contains('a', 'Pages').click());
-    inSidebar(() => cy.contains('a', 'Directory').click());
-    inGrid(() => cy.contains('a', 'Another Sub Directory').click());
-
-    cy.url().should(
-      'eq',
-      'http://localhost:8080/#/collections/pages/entries/directory/another-sub-directory/index',
-    );
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
+    inSidebar(() => cy.contains('a', 'Another Sub Directory').click());
+    inGrid(() => cy.contains('a', 'Another Sub Directory'));
   });
 
   it(`can create a new entry with custom path`, () => {
     login();
 
     inSidebar(() => cy.contains('a', 'Pages').click());
-    inSidebar(() => cy.contains('a', 'Directory').click());
-    inSidebar(() => cy.contains('a', 'Sub Directory').click());
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
+    inSidebar(() => cy.contains('a', /^Sub Directory$/).click());
     cy.contains('a', 'New Page').click();
 
     cy.get('[id^="path-field"]').should('have.value', 'directory/sub-directory');
@@ -262,18 +257,18 @@ describe('Test Backend Editorial Workflow', () => {
     publishEntryInEditor(publishTypes.publishNow);
     exitEditor();
 
-    inGrid(() => cy.contains('a', 'New Path Title'));
-    inSidebar(() => cy.contains('a', 'Directory').click());
-    inSidebar(() => cy.contains('a', 'Directory').click());
+    inSidebar(() => cy.contains('a', 'New Path Title'));
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
     inGrid(() => cy.contains('a', 'New Path Title').should('not.exist'));
   });
 
   it(`can't create an entry with an existing path`, () => {
     login();
 
     inSidebar(() => cy.contains('a', 'Pages').click());
-    inSidebar(() => cy.contains('a', 'Directory').click());
-    inSidebar(() => cy.contains('a', 'Sub Directory').click());
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
+    inSidebar(() => cy.contains('a', /^Sub Directory$/).click());
 
     cy.contains('a', 'New Page').click();
     cy.get('[id^="title-field"]').type('New Path Title');
@@ -292,7 +287,8 @@ describe('Test Backend Editorial Workflow', () => {
     login();
 
     inSidebar(() => cy.contains('a', 'Pages').click());
-    inGrid(() => cy.contains('a', 'Directory').click());
+    inSidebar(() => cy.contains('a', /^Directory$/).click());
+    inGrid(() => cy.contains('a', /^Directory$/).click());
 
     cy.get('[id^="path-field"]').should('have.value', 'directory');
     cy.get('[id^="path-field"]').clear();
@@ -310,7 +306,7 @@ describe('Test Backend Editorial Workflow', () => {
 
     inSidebar(() => cy.contains('a', 'New Directory').click());
 
-    inGrid(() => cy.contains('a', 'Sub Directory'));
-    inGrid(() => cy.contains('a', 'Another Sub Directory'));
+    inSidebar(() => cy.contains('a', /^Sub Directory$/));
+    inSidebar(() => cy.contains('a', 'Another Sub Directory'));
   });
 });

cypress/e2e/markdown_widget_code_block_spec.js

@@ -77,7 +77,8 @@ function codeBlock(content) {
     <div>
       <div></div>
       <div>
-        <div><label>Code Block</label>
+        <div>
+          <div><label>Code Block</label></div>
           <div><button><span><svg>
                   <path></path>
                 </svg></span></button>

cypress/run.mjs

@@ -2,40 +2,40 @@ import execa from 'execa';
 import { globby } from 'globby';
 
 async function runCypress() {
+  const args = ['run', '--browser', 'chrome', '--headless'];
+
+  const specs = await globby(['cypress/e2e/*spec*.js']);
+  if (specs.length === 0) {
+    console.log('No test files found in cypress/e2e/*spec*.js');
+    process.exit(1);
+  }
+
   if (process.env.IS_FORK === 'true') {
     const machineIndex = parseInt(process.env.MACHINE_INDEX);
     const machineCount = parseInt(process.env.MACHINE_COUNT);
-    const specs = await globby(['cypress/integration/*spec*.js']);
     const specsPerMachine = Math.floor(specs.length / machineCount);
     const start = (machineIndex - 1) * specsPerMachine;
     const machineSpecs =
       machineIndex === machineCount
         ? specs.slice(start)
         : specs.slice(start, start + specsPerMachine);
 
-    await execa(
-      'cypress',
-      ['run', '--browser', 'chrome', '--headless', '--spec', machineSpecs.join(',')],
-      { stdio: 'inherit', preferLocal: true },
-    );
+    args.push('--spec', machineSpecs.join(','));
   } else {
-    await execa(
-      'cypress',
-      [
-        'run',
-        '--browser',
-        'chrome',
-        '--headless',
-        '--record',
-        '--parallel',
-        '--ci-build-id',
-        process.env.GITHUB_SHA,
-        '--group',
-        'GitHub CI',
-      ],
-      { stdio: 'inherit', preferLocal: true },
+    args.push(
+      '--record',
+      '--parallel',
+      '--ci-build-id',
+      process.env.GITHUB_SHA,
+      '--group',
+      'GitHub CI',
+      '--spec',
+      specs.join(','),
     );
   }
+
+  console.log('Running Cypress with args:', args.join(' '));
+  await execa('cypress', args, { stdio: 'inherit', preferLocal: true });
 }
 
 runCypress();

cypress/support/e2e.js

@@ -26,3 +26,9 @@ addMatchImageSnapshotCommand({
 Cypress.on('uncaught:exception', () => false);
 
 import './commands';
+
+afterEach(function () {
+  if (this.currentTest.state === 'failed') {
+    Cypress.runner.stop();
+  }
+});