@plone/volto 16.0.0-alpha.12 → 16.0.0-alpha.15

package/.eslintrc

@@ -32,14 +32,19 @@
   "settings": {
     "import/resolver": {
       "alias": {
-        "map": [["@plone/volto", "./src"], ["@package", "./src"], ["@root", "./src"]],
+        "map": [
+          ["@plone/volto", "./src"],
+          ["@plone/volto-slate", "./packages/volto-slate/src"],
+          ["@package", "./src"],
+          ["@root", "./src"]
+        ],
         "extensions": [".js", ".jsx", ".json"]
       },
       "babel-plugin-root-import": {
         "rootPathSuffix": "src"
       }
     },
-    "import/core-modules": [ "load-volto-addons" ]
+    "import/core-modules": ["load-volto-addons"]
   },
   "globals": {
     "root": true,

package/.github/workflows/acceptance.yml

@@ -133,6 +133,72 @@ jobs:
           name: cypress-videos
           path: cypress/videos
 
+  corevoltoslate:
+    runs-on: ubuntu-latest
+    name: Core Volto Slate
+    timeout-minutes: 45
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x]
+    steps:
+      - uses: actions/checkout@v2
+
+      # node setup
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      # node cache
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - uses: actions/cache@v1
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      ## node install
+      - run: yarn --frozen-lockfile
+
+      - name: Cypress acceptance tests
+        uses: cypress-io/github-action@v2
+        env:
+          BABEL_ENV: production
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          CYPRESS_RETRIES: 2
+          # Recommended: pass the GitHub token lets this action correctly
+          # determine the unique run id necessary to re-run the checks
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          record: true
+          parallel: false # Since they run on different node versions, we can't parallel
+          browser: chrome
+          # headless: true
+          group: Core Volto Slate ${{ matrix.node-version }}
+          config: integrationFolder=cypress/tests
+          spec: cypress/tests/core/volto-slate/**/*.js
+          start: |
+            make start-test-acceptance-server
+            make start-test-acceptance-frontend
+          wait-on: 'npx wait-on --httpTimeout 20000 http-get://localhost:55001/plone http://localhost:3000'
+
+      # Upload Cypress screenshots
+      - uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+      # Upload Cypress videos
+      - uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: cypress-videos
+          path: cypress/videos
+
   core6:
     runs-on: ubuntu-latest
     name: Core Basic - Plone 6
@@ -505,7 +571,6 @@ jobs:
             make start-test-acceptance-frontend-workingcopy
           wait-on: 'npx wait-on --httpTimeout 20000 http-get://localhost:55001/plone http://localhost:3000'
 
-
       # Upload Cypress screenshots
       - uses: actions/upload-artifact@v1
         if: failure()
@@ -557,7 +622,7 @@ jobs:
 
       # Generator own tests
       - name: Generator tests
-        run:  yarn && yarn test
+        run: yarn && yarn test
         working-directory: ${{env.generator-directory}}
 
       # install Yeoman and the generator

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Change Log
 
+## 16.0.0-alpha.15 (2022-07-21)
+
+### Breaking
+
+- Integrate volto-state add-on. @tiberiuichim @razvanmiu @eea
+
+### Documentation
+
+- volto-slate documentation @nileshgulia1
+
+## 16.0.0-alpha.14 (2022-07-20)
+
+### Breaking
+
+- Action `listUsers`to be called with Object. Distinguish between search for id or search for fullname, email, username @ksuess
+
+### Feature
+
+- Add user group membership control panel @ksuess
+- Action `listUsers`: Support search for fullname, email, username. @ksuess
+
+### Bugfix
+
+- Fix typo in de locale @wolbernd
+
+## 16.0.0-alpha.13 (2022-07-18)
+
+### Feature
+
+- Add schema to video block sidebar @iRohitSingh @danielamormocea
+
+### Bugfix
+
+- Prevent the `defaultView` to show anything if the content is not loaded yet. This fixes showing the non-blocks enabled view for a fraction of a second before showing the blocks-enabled one once the content is loaded. @sneridagh
+
+### Documentation
+
+- `aria-*` attributes are now parsed correctly by jsx-lexer 2.0. @stevepiercy
+
 ## 16.0.0-alpha.12 (2022-07-13)
 
 ### Feature

package/addon-registry.js

@@ -184,6 +184,32 @@ class AddonConfigurationRegistry {
         this.packages[name] = Object.assign(this.packages[name] || {}, pkg);
       });
     }
+    this.initSlate();
+  }
+
+  initSlate() {
+    if (this.packages['@plone/volto-slate']) return;
+
+    const slatePath = path.normalize(
+      `${this.voltoPath}/packages/volto-slate/src`,
+    );
+    const slatePackageJsonPath = path.normalize(
+      `${this.voltoPath}/packages/volto-slate/package.json`,
+    );
+
+    // some tests set the root in a location that doesn't have the packages
+    if (!fs.existsSync(slatePath)) return;
+
+    this.packages['@plone/volto-slate'] = {
+      modulePath: slatePath,
+      packageJson: slatePackageJsonPath,
+      version: require(slatePackageJsonPath).version,
+      isPublishedPackage: false,
+      isRegisteredAddon: false,
+      name: '@plone/volto-slate',
+      addons: [],
+    };
+    this.addonNames.push('@plone/volto-slate');
   }
 
   /**
@@ -297,10 +323,13 @@ class AddonConfigurationRegistry {
    * Returns a mapping name:diskpath to be uses in webpack's resolve aliases
    */
   getResolveAliases() {
-    const pairs = Object.keys(this.packages).map((o) => [
-      o,
-      this.packages[o].modulePath,
-    ]);
+    const pairs = [
+      ...Object.keys(this.packages).map((o) => [
+        o,
+        this.packages[o].modulePath,
+      ]),
+    ];
+
     return fromEntries(pairs);
   }
 

package/cypress/support/commands.js

@@ -7,6 +7,9 @@ const PLONE_SITE_ID = Cypress.env('SITE_ID') || 'plone';
 const PLONE_API_URL =
   Cypress.env('API_PATH') || `http://${HOSTNAME}:55001/${PLONE_SITE_ID}`;
 
+const SLATE_SELECTOR = '.content-area .slate-editor [contenteditable=true]';
+const SLATE_TITLE_SELECTOR = '.block.inner.title [contenteditable="true"]';
+
 // --- AUTOLOGIN -------------------------------------------------------------
 Cypress.Commands.add('autologin', (usr, pass) => {
   let api_url, user, password;
@@ -116,7 +119,7 @@ Cypress.Commands.add(
             title: contentTitle,
             blocks: {
               'd3f1c443-583f-4e8e-a682-3bf25752a300': { '@type': 'title' },
-              '7624cf59-05d0-4055-8f55-5fd6597d84b0': { '@type': 'text' },
+              '7624cf59-05d0-4055-8f55-5fd6597d84b0': { '@type': 'slate' },
             },
             blocks_layout: {
               items: [
@@ -164,6 +167,7 @@ Cypress.Commands.add(
     }
   },
 );
+
 // Remove content
 Cypress.Commands.add('removeContent', ({ path = '' }) => {
   let api_url, auth;
@@ -180,6 +184,7 @@ Cypress.Commands.add('removeContent', ({ path = '' }) => {
       pass: 'secret',
     };
   }
+
   return cy.request({
     method: 'DELETE',
     url: `${api_url}/${path}`,
@@ -190,6 +195,100 @@ Cypress.Commands.add('removeContent', ({ path = '' }) => {
   });
 });
 
+// --- Add DX Content-Type ----------------------------------------------------------
+Cypress.Commands.add('addContentType', (name) => {
+  let api_url, auth;
+  api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+  auth = {
+    user: 'admin',
+    pass: 'secret',
+  };
+  return cy
+    .request({
+      method: 'POST',
+      url: `${api_url}/@controlpanels/dexterity-types/${name}`,
+      headers: {
+        Accept: 'application/json',
+      },
+      auth: auth,
+      body: {
+        title: name,
+      },
+    })
+    .then(() => console.log(`${name} content-type added.`));
+});
+
+// --- Remove DX behavior ----------------------------------------------------------
+Cypress.Commands.add('removeContentType', (name) => {
+  let api_url, auth;
+  api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+  auth = {
+    user: 'admin',
+    pass: 'secret',
+  };
+  return cy
+    .request({
+      method: 'DELETE',
+      url: `${api_url}/@controlpanels/dexterity-types/${name}`,
+      headers: {
+        Accept: 'application/json',
+      },
+      auth: auth,
+      body: {},
+    })
+    .then(() => console.log(`${name} content-type removed.`));
+});
+
+// --- Add DX field ----------------------------------------------------------
+Cypress.Commands.add('addSlateJSONField', (type, name) => {
+  let api_url, auth;
+  api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+  auth = {
+    user: 'admin',
+    pass: 'secret',
+  };
+  return cy
+    .request({
+      method: 'POST',
+      url: `${api_url}/@types/${type}`,
+      headers: {
+        Accept: 'application/json',
+      },
+      auth: auth,
+      body: {
+        id: name,
+        title: name,
+        description: 'Slate JSON Field',
+        factory: 'SlateJSONField',
+        required: false,
+      },
+    })
+    .then(() => console.log(`${name} SlateJSONField field added to ${type}`));
+});
+
+// --- Remove DX field ----------------------------------------------------------
+Cypress.Commands.add('removeSlateJSONField', (type, name) => {
+  let api_url, auth;
+  api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+  auth = {
+    user: 'admin',
+    pass: 'secret',
+  };
+  return cy
+    .request({
+      method: 'DELETE',
+      url: `${api_url}/@types/${type}/${name}`,
+      headers: {
+        Accept: 'application/json',
+      },
+      auth: auth,
+      body: {},
+    })
+    .then(() =>
+      console.log(`${name} SlateJSONField field removed from ${type}`),
+    );
+});
+
 // --- CREATE USER --------------------------------------------------------
 Cypress.Commands.add(
   'createUser',
@@ -199,6 +298,16 @@ Cypress.Commands.add(
     email = 'editor@local.dev',
     password = 'secret',
     roles = ['Member', 'Reader', 'Editor'],
+    groups = {
+      '@id': 'http://localhost:3000/@users',
+      items: [
+        {
+          id: 'AuthenticatedUsers',
+          title: 'AuthenticatedUsers',
+        },
+      ],
+      items_total: 1,
+    },
   }) => {
     let api_url, auth, path;
     if (Cypress.env('API') === 'guillotina') {
@@ -232,6 +341,7 @@ Cypress.Commands.add(
           email: email,
           password: password,
           roles: roles,
+          groups: groups,
         },
       })
       .then(() => console.log(`User ${username} created`));
@@ -269,6 +379,59 @@ Cypress.Commands.add('removeUser', (username = 'editor') => {
     .then(() => console.log(`User ${username} removed`));
 });
 
+// --- GROUP -----------------------------------------------------------------
+
+Cypress.Commands.add(
+  'createGroup',
+  ({
+    groupname = 'teachers',
+    email = 'teachers@local.dev',
+    password = 'secret',
+    roles = ['Member', 'Reader'],
+    users = {
+      '@id': 'http://localhost:3000/@groups',
+      items: [],
+      items_total: 0,
+    },
+  }) => {
+    let api_url, auth, path;
+    if (Cypress.env('API') === 'guillotina') {
+      api_url = GUILLOTINA_API_URL;
+      auth = {
+        user: 'root',
+        pass: 'root',
+      };
+      path = 'groups';
+    } else {
+      api_url = PLONE_API_URL;
+      auth = {
+        user: 'admin',
+        pass: 'secret',
+      };
+      path = '@groups';
+    }
+
+    return cy
+      .request({
+        method: 'POST',
+        url: `${api_url}/${path}`,
+        headers: {
+          Accept: 'application/json',
+        },
+        auth: auth,
+        body: {
+          '@type': 'Group',
+          groupname: groupname,
+          email: email,
+          password: password,
+          roles: roles,
+          users: users,
+        },
+      })
+      .then(() => console.log(`Group ${groupname} created`));
+  },
+);
+
 // --- SET WORKFLOW ----------------------------------------------------------
 Cypress.Commands.add(
   'setWorkflow',
@@ -371,7 +534,12 @@ Cypress.Commands.add('setRegistry', (record, value) => {
 
 // Low level command reused by `setSelection` and low level command `setCursor`
 Cypress.Commands.add('selection', { prevSubject: true }, (subject, fn) => {
-  cy.wrap(subject).trigger('mousedown').then(fn).trigger('mouseup');
+  cy.wrap(subject)
+    .trigger('mousedown')
+    .wait(1000) //multiple waits between selecting the text to ensure toolbar is visible.
+    .then(fn)
+    .wait(1000)
+    .trigger('mouseup');
 
   cy.document().trigger('selectionchange');
   return cy.wrap(subject);
@@ -438,6 +606,128 @@ Cypress.Commands.add(
   },
 );
 
+Cypress.Commands.add(
+  'pasteClipboard',
+  { prevSubject: true },
+  (query, htmlContent) => {
+    return cy
+      .wrap(query)
+      .type(' ')
+      .trigger('paste', createHtmlPasteEvent(htmlContent));
+  },
+);
+
+Cypress.Commands.add('toolbarSave', () => {
+  // Save
+  cy.get('#toolbar-save', { timeout: 10000 }).click();
+  cy.waitForResourceToLoad('@navigation');
+  cy.waitForResourceToLoad('@breadcrumbs');
+  cy.waitForResourceToLoad('@actions');
+  cy.waitForResourceToLoad('@types');
+});
+
+Cypress.Commands.add('clearSlate', (selector) => {
+  return cy
+    .get(selector)
+    .focus()
+    .click()
+    .wait(1000)
+    .type('{selectAll}')
+    .wait(1000)
+    .type('{backspace}');
+});
+
+Cypress.Commands.add('getSlate', (createNewSlate = false) => {
+  let slate;
+  cy.getIfExists(
+    SLATE_SELECTOR,
+    () => {
+      slate = cy.get(SLATE_SELECTOR).last();
+    },
+    () => {
+      if (createNewSlate) {
+        cy.get('.block.inner').last().type('{enter}');
+        slate = cy.get(SLATE_SELECTOR, { timeout: 10000 }).last();
+      } else {
+        slate = cy.get(SLATE_SELECTOR, { timeout: 10000 }).last();
+      }
+    },
+  );
+  return slate;
+});
+
+Cypress.Commands.add('getSlateTitle', () => {
+  return cy.get(SLATE_TITLE_SELECTOR, {
+    timeout: 10000,
+  });
+});
+
+Cypress.Commands.add('clearSlateTitle', () => {
+  return cy.clearSlate(SLATE_TITLE_SELECTOR);
+});
+
+// Slate commands
+Cypress.Commands.add('typeInSlate', { prevSubject: true }, (subject, text) => {
+  return (
+    cy
+      .wrap(subject)
+      .then((subject) => {
+        subject[0].dispatchEvent(
+          new InputEvent('beforeinput', {
+            inputType: 'insertText',
+            data: text,
+          }),
+        );
+        return subject;
+      })
+      // TODO: do this only for Electron-based browser which does not understand instantaneously
+      // that the user inserted some text in the block
+      .wait(1000)
+  );
+});
+
+Cypress.Commands.add('lineBreakInSlate', { prevSubject: true }, (subject) => {
+  return (
+    cy
+      .wrap(subject)
+      .then((subject) => {
+        subject[0].dispatchEvent(
+          new InputEvent('beforeinput', { inputType: 'insertLineBreak' }),
+        );
+        return subject;
+      })
+      // TODO: do this only for Electron-based browser which does not understand instantaneously
+      // that the block was split
+      .wait(1000)
+  );
+});
+
+Cypress.Commands.add('setSlateSelection', (subject, query, endQuery) => {
+  cy.get('.slate-editor.selected [contenteditable=true]')
+    .focus()
+    .click()
+    .setSelection(subject, query, endQuery)
+    .wait(1000); // this wait is needed for the selection change to be detected after
+});
+
+Cypress.Commands.add('getSlateEditorAndType', (type) => {
+  cy.getSlate().focus().click().type(type);
+});
+
+Cypress.Commands.add('setSlateCursor', (subject, query, endQuery) => {
+  cy.get('.slate-editor.selected [contenteditable=true]')
+    .focus()
+    .click()
+    .setCursor(subject, query, endQuery)
+    .wait(1000); // this wait is needed for the selection change to be detected after
+});
+
+Cypress.Commands.add('clickSlateButton', (button) => {
+  cy.get(`.slate-inline-toolbar .button-wrapper a[title="${button}"]`, {
+    timeout: 10000,
+  }).click({ force: true }); //force click is needed to ensure the button in visible in view.
+});
+
 // Helper functions
 function getTextNode(el, match) {
   const walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
@@ -460,6 +750,18 @@ function setBaseAndExtent(...args) {
   document.getSelection().setBaseAndExtent(...args);
 }
 
+function createHtmlPasteEvent(htmlContent) {
+  return Object.assign(
+    new Event('paste', { bubbles: true, cancelable: true }),
+    {
+      clipboardData: {
+        getData: () => htmlContent,
+        types: ['text/html'],
+      },
+    },
+  );
+}
+
 Cypress.Commands.add('navigate', (route = '') => {
   return cy.window().its('appHistory').invoke('push', route);
 });

package/cypress/support/index.js

@@ -28,3 +28,5 @@ afterEach(function () {
     teardown();
   }
 });
+
+export * from './volto-slate';

package/cypress/support/volto-slate.js

@@ -0,0 +1,78 @@
+export const slateBeforeEach = (contentType = 'Document') => {
+  cy.autologin();
+  cy.createContent({
+    contentType: contentType,
+    contentId: 'my-page',
+    contentTitle: 'My Page',
+  });
+  cy.visit('/my-page');
+  cy.waitForResourceToLoad('@navigation');
+  cy.waitForResourceToLoad('@breadcrumbs');
+  cy.waitForResourceToLoad('@actions');
+  cy.waitForResourceToLoad('@types');
+  cy.waitForResourceToLoad('my-page');
+  cy.navigate('/my-page/edit');
+};
+
+export const getSelectedSlateEditor = () => {
+  return cy.get('.slate-editor.selected [contenteditable=true]').click();
+};
+
+export const createSlateBlock = () => {
+  cy.get('.ui.basic.icon.button.block-add-button').first().click();
+  cy.get('.blocks-chooser .title').contains('Text').click();
+  cy.get('.ui.basic.icon.button.slate').contains('Text').click();
+  return getSelectedSlateEditor();
+};
+
+export const getSlateBlockValue = (sb) => {
+  return sb.invoke('attr', 'data-slate-value').then((str) => {
+    return typeof str === 'undefined' ? [] : JSON.parse(str);
+  });
+};
+
+export const createSlateBlockWithList = ({
+  numbered,
+  firstItemText,
+  secondItemText,
+}) => {
+  let s1 = createSlateBlock();
+
+  s1.typeInSlate(firstItemText + secondItemText);
+
+  // select all contents of slate block
+  // - this opens hovering toolbar
+  cy.contains(firstItemText + secondItemText).then((el) => {
+    selectSlateNodeOfWord(el);
+  });
+
+  // TODO: do not hardcode these selectors:
+  if (numbered) {
+    // this is the numbered list option in the hovering toolbar
+    cy.get('.slate-inline-toolbar > :nth-child(9)').click();
+  } else {
+    // this is the bulleted list option in the hovering toolbar
+    cy.get('.slate-inline-toolbar > :nth-child(10)').click();
+  }
+
+  // move the text cursor
+  const sse = getSelectedSlateEditor();
+  sse.type('{leftarrow}');
+  for (let i = 0; i < firstItemText.length; ++i) {
+    sse.type('{rightarrow}');
+  }
+
+  // simulate pressing Enter
+  getSelectedSlateEditor().lineBreakInSlate();
+
+  return s1;
+};
+
+export const selectSlateNodeOfWord = (el) => {
+  return cy.window().then((win) => {
+    var event = new CustomEvent('Test_SelectWord', {
+      detail: el[0],
+    });
+    win.document.dispatchEvent(event);
+  });
+};