@plone/volto 16.0.0-alpha.14 → 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,15 @@
 # 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

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',
@@ -435,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);
@@ -502,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);
@@ -524,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);
+  });
+};

package/locales/ca/LC_MESSAGES/volto.po

@@ -2615,7 +2615,8 @@ msgstr "Canvia a"
 msgid "Table"
 msgstr "Taula"
 
-#: components/manage/Blocks/ToC/View
+#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
+#: components/manage/Blocks/ToC/variations/HorizontalMenu
 # defaultMessage: Table of Contents
 msgid "Table of Contents"
 msgstr "Taula de continguts"

package/locales/de/LC_MESSAGES/volto.po

@@ -2612,7 +2612,8 @@ msgstr "Wechseln zu"
 msgid "Table"
 msgstr "Tabelle"
 
-#: components/manage/Blocks/ToC/View
+#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
+#: components/manage/Blocks/ToC/variations/HorizontalMenu
 # defaultMessage: Table of Contents
 msgid "Table of Contents"
 msgstr "Inhaltsverzeichnis"

package/locales/en/LC_MESSAGES/volto.po

@@ -2606,7 +2606,8 @@ msgstr ""
 msgid "Table"
 msgstr ""
 
-#: components/manage/Blocks/ToC/View
+#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
+#: components/manage/Blocks/ToC/variations/HorizontalMenu
 # defaultMessage: Table of Contents
 msgid "Table of Contents"
 msgstr ""

package/locales/es/LC_MESSAGES/volto.po

@@ -2616,7 +2616,8 @@ msgstr "Cambiar a"
 msgid "Table"
 msgstr "Tabla"
 
-#: components/manage/Blocks/ToC/View
+#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
+#: components/manage/Blocks/ToC/variations/HorizontalMenu
 # defaultMessage: Table of Contents
 msgid "Table of Contents"
 msgstr "Tabla de contenidos"

package/locales/eu/LC_MESSAGES/volto.po

@@ -2613,7 +2613,8 @@ msgstr "Aldatu hona"
 msgid "Table"
 msgstr "Taula"
 
-#: components/manage/Blocks/ToC/View
+#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
+#: components/manage/Blocks/ToC/variations/HorizontalMenu
 # defaultMessage: Table of Contents
 msgid "Table of Contents"
 msgstr "Edukien taula"

package/locales/fr/LC_MESSAGES/volto.po

@@ -2623,7 +2623,8 @@ msgstr ""
 msgid "Table"
 msgstr "Table"
 
-#: components/manage/Blocks/ToC/View
+#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
+#: components/manage/Blocks/ToC/variations/HorizontalMenu
 # defaultMessage: Table of Contents
 msgid "Table of Contents"
 msgstr "Table des matières"

package/locales/it/LC_MESSAGES/volto.po

@@ -2606,7 +2606,8 @@ msgstr "Vai a"
 msgid "Table"
 msgstr "Tabella"
 
-#: components/manage/Blocks/ToC/View
+#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
+#: components/manage/Blocks/ToC/variations/HorizontalMenu
 # defaultMessage: Table of Contents
 msgid "Table of Contents"
 msgstr "Indice dei contenuti"

package/locales/ja/LC_MESSAGES/volto.po

@@ -2614,7 +2614,8 @@ msgstr ""
 msgid "Table"
 msgstr "テーブル"
 
-#: components/manage/Blocks/ToC/View
+#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
+#: components/manage/Blocks/ToC/variations/HorizontalMenu
 # defaultMessage: Table of Contents
 msgid "Table of Contents"
 msgstr "目次"

package/locales/nl/LC_MESSAGES/volto.po

@@ -2625,7 +2625,8 @@ msgstr ""
 msgid "Table"
 msgstr ""
 
-#: components/manage/Blocks/ToC/View
+#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
+#: components/manage/Blocks/ToC/variations/HorizontalMenu
 # defaultMessage: Table of Contents
 msgid "Table of Contents"
 msgstr ""

package/locales/pt/LC_MESSAGES/volto.po

@@ -2614,7 +2614,8 @@ msgstr ""
 msgid "Table"
 msgstr "Tabela"
 
-#: components/manage/Blocks/ToC/View
+#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
+#: components/manage/Blocks/ToC/variations/HorizontalMenu
 # defaultMessage: Table of Contents
 msgid "Table of Contents"
 msgstr ""

package/locales/pt_BR/LC_MESSAGES/volto.po

@@ -2616,7 +2616,8 @@ msgstr "Mudar para"
 msgid "Table"
 msgstr "Tabela"
 
-#: components/manage/Blocks/ToC/View
+#: components/manage/Blocks/ToC/variations/DefaultTocRenderer
+#: components/manage/Blocks/ToC/variations/HorizontalMenu
 # defaultMessage: Table of Contents
 msgid "Table of Contents"
 msgstr "Tabela de conteúdos"