@eeacms/volto-slate-footnote 3.0.0 → 4.0.0

package/CHANGELOG.md

@@ -4,8 +4,46 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [3.0.0](https://github.com/eea/volto-slate-footnote/compare/2.4.0...3.0.0)
+#### [4.0.0](https://github.com/eea/volto-slate-footnote/compare/3.2.0...4.0.0)
 
+- Use new slate namespaced pluginids [`#23`](https://github.com/eea/volto-slate-footnote/pull/23)
+- Add Sonarqube tag using climate-energy-frontend addons list [`80a159b`](https://github.com/eea/volto-slate-footnote/commit/80a159bb67698cddedadc494e7ae2da32a96faea)
+
+#### [3.2.0](https://github.com/eea/volto-slate-footnote/compare/3.1.1...3.2.0)
+
+> 13 September 2021
+
+- Release Multiple citations (#20) [`#21`](https://github.com/eea/volto-slate-footnote/pull/21)
+- Multiple citations [`#20`](https://github.com/eea/volto-slate-footnote/pull/20)
+- Release 3.2.0 [`6795fcd`](https://github.com/eea/volto-slate-footnote/commit/6795fcd1a4fc429bb70334fbdfa2cb0eedd748fa)
+
+#### [3.1.1](https://github.com/eea/volto-slate-footnote/compare/3.1.0...3.1.1)
+
+> 10 September 2021
+
+- Citations in metadata [`#19`](https://github.com/eea/volto-slate-footnote/pull/19)
+- Citations in metadata [`#18`](https://github.com/eea/volto-slate-footnote/pull/18)
+- Remove console.log [`b5d83e7`](https://github.com/eea/volto-slate-footnote/commit/b5d83e7c13240151f602d122ecf09ba9b8e335f3)
+- Fix slate json field default value in DX layout [`f2805bb`](https://github.com/eea/volto-slate-footnote/commit/f2805bbc15c51ebd914ee5f4eb9dd34ef32e095b)
+- Fix cypress api_url [`6a4966a`](https://github.com/eea/volto-slate-footnote/commit/6a4966a2f92e932e1d0df35351989cda535f15c8)
+- Add Sonarqube tag using ims-frontend addons list [`aed3984`](https://github.com/eea/volto-slate-footnote/commit/aed39840ecd467689eaf0adb352bd00ce95bdbbe)
+
+#### [3.1.0](https://github.com/eea/volto-slate-footnote/compare/3.0.0...3.1.0)
+
+> 9 September 2021
+
+- Release [`#17`](https://github.com/eea/volto-slate-footnote/pull/17)
+- render elements with multiple citations [`#15`](https://github.com/eea/volto-slate-footnote/pull/15)
+- make accordion reference toggle when clicking citations refs #137423 [`#16`](https://github.com/eea/volto-slate-footnote/pull/16)
+- Release 3.1.0 [`d87a1b0`](https://github.com/eea/volto-slate-footnote/commit/d87a1b0b893bb8fc090dcde193d3ac628471c352)
+- Fix cypress tests [`cb08192`](https://github.com/eea/volto-slate-footnote/commit/cb08192508964c274eaaed3dab2d2c5392c43d2d)
+
+### [3.0.0](https://github.com/eea/volto-slate-footnote/compare/2.4.0...3.0.0)
+
+> 3 September 2021
+
+- Release 3.0.0 [`#14`](https://github.com/eea/volto-slate-footnote/pull/14)
+- Cypress increase wait time [`06fe6e9`](https://github.com/eea/volto-slate-footnote/commit/06fe6e9cea79dc3a5d2a3e88db8d3cc35b967da3)
 - Update package metadata [`8d45704`](https://github.com/eea/volto-slate-footnote/commit/8d457042b24f4795eb453baebcb0bf0f6740d153)
 - Make it work with DX metadata [`a5139d2`](https://github.com/eea/volto-slate-footnote/commit/a5139d2af0e7947ba16d7c28912565683726554f)
 

package/Jenkinsfile

@@ -4,7 +4,7 @@ pipeline {
   environment {
         GIT_NAME = "volto-slate-footnote"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu"
         DEPENDENCIES = ""
     }
 

package/cypress/integration/01-slate-footnote-block.js

@@ -0,0 +1,80 @@
+import { slateBeforeEach, slateAfterEach } from '../support';
+
+describe('Slate citations', () => {
+  beforeEach(slateBeforeEach);
+  afterEach(slateAfterEach);
+
+  it('Add Footnotes block and create citation', () => {
+    // Complete chained commands
+    cy.getSlateEditorAndType('Colorless green ideas sleep furiously.');
+
+    // Footnote
+    cy.setSlateSelection('Colorless', 'green');
+    cy.clickSlateButton('Footnote');
+
+    cy.get('.sidebar-container .field-wrapper-footnote .react-select-container')
+      .click()
+      .type('Citation{enter}');
+    cy.get('.sidebar-container .form .header button:first-of-type').click();
+
+    // Add block
+    cy.getSlateEditorAndType('{enter}');
+
+    cy.get('.ui.basic.icon.button.block-add-button').first().click();
+    cy.get('.blocks-chooser .title').contains('Text').click();
+    cy.get('.content.active.text .button.slateFootnotes')
+      .contains('Footnotes')
+      .click();
+
+    // Configure block
+    cy.get('[id=sidebar-properties] [name=title]').click().type('Footnotes');
+    cy.get('[id=sidebar-properties] label[for=field-global]').click();
+
+    // Save
+    cy.get('#toolbar-save').click();
+    cy.url().should('eq', Cypress.config().baseUrl + '/cypress/my-page');
+
+    // then the page view should contain our changes
+    cy.get('span.citation-item').contains('Colorless green');
+    cy.contains('Footnotes');
+    cy.contains('Citation');
+  });
+
+  it('Add Footnotes block and create multiple citations', () => {
+    // Complete chained commands
+    cy.getSlateEditorAndType('Colorless green ideas sleep furiously.');
+
+    // Footnote
+    cy.setSlateSelection('Colorless', 'green');
+    cy.clickSlateButton('Footnote');
+
+    cy.get('.sidebar-container .field-wrapper-footnote .react-select-container')
+      .click()
+      .type('Citation{enter}')
+      .type('Yet another citation{enter}');
+    cy.get('.sidebar-container .form .header button:first-of-type').click();
+
+    // Add block
+    cy.getSlateEditorAndType('{enter}');
+
+    cy.get('.ui.basic.icon.button.block-add-button').first().click();
+    cy.get('.blocks-chooser .title').contains('Text').click();
+    cy.get('.content.active.text .button.slateFootnotes')
+      .contains('Footnotes')
+      .click();
+
+    // Configure block
+    cy.get('[id=sidebar-properties] [name=title]').click().type('Footnotes');
+    cy.get('[id=sidebar-properties] label[for=field-global]').click();
+
+    // Save
+    cy.get('#toolbar-save').click();
+    cy.url().should('eq', Cypress.config().baseUrl + '/cypress/my-page');
+
+    // then the page view should contain our changes
+    cy.get('span.citation-item').contains('Colorless green');
+    cy.contains('Footnotes');
+    cy.contains('Citation');
+    cy.contains('Yet another citation');
+  });
+});

package/cypress/support/commands.js

@@ -92,7 +92,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: [
@@ -125,6 +125,100 @@ Cypress.Commands.add(
   },
 );
 
+// --- 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: 'admin',
+  };
+  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: 'admin',
+  };
+  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: 'admin',
+  };
+  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: 'admin',
+  };
+  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}`),
+    );
+});
+
 // --- REMOVE CONTENT --------------------------------------------------------
 Cypress.Commands.add('removeContent', (path) => {
   let api_url, auth;
@@ -146,6 +240,41 @@ Cypress.Commands.add('removeContent', (path) => {
     .then(() => console.log(`${path} removed`));
 });
 
+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)
+  );
+});
+
 // --- SET WORKFLOW ----------------------------------------------------------
 Cypress.Commands.add(
   'setWorkflow',
@@ -247,6 +376,47 @@ Cypress.Commands.add(
   },
 );
 
+Cypress.Commands.add('getSlateEditorAndType', (type) => {
+  cy.get('.content-area .slate-editor [contenteditable=true]')
+    .focus()
+    .click()
+    .wait(1000)
+    .type(type);
+});
+
+Cypress.Commands.add('setSlateSelection', (subject, query, endQuery) => {
+  cy.get('.slate-editor.selected [contenteditable=true]')
+    .focus()
+    .click()
+    .setSelection(subject, query, endQuery)
+    .wait(1000);
+});
+
+Cypress.Commands.add('setSlateCursor', (subject, query, endQuery) => {
+  cy.get('.slate-editor.selected [contenteditable=true]')
+    .focus()
+    .click()
+    .setCursor(subject, query, endQuery)
+    .wait(1000);
+});
+
+Cypress.Commands.add('clickSlateButton', (button) => {
+  cy.get(`.slate-inline-toolbar .button-wrapper a[title="${button}"]`).click();
+});
+
+Cypress.Commands.add('toolbarSave', () => {
+  cy.wait(1000);
+
+  // Save
+  cy.get('#toolbar-save').click();
+  cy.waitForResourceToLoad('@navigation');
+  cy.waitForResourceToLoad('@breadcrumbs');
+  cy.waitForResourceToLoad('@actions');
+  cy.waitForResourceToLoad('@types');
+  cy.waitForResourceToLoad('my-page');
+  cy.url().should('eq', Cypress.config().baseUrl + '/cypress/my-page');
+});
+
 // Low level command reused by `setCursorBefore` and `setCursorAfter`, equal to `setCursorAfter`
 Cypress.Commands.add(
   'setCursor',

package/cypress/support/index.js

@@ -15,7 +15,6 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands';
-
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
@@ -24,7 +23,7 @@ import './commands';
 import '@cypress/code-coverage/support';
 coverage-end */
 
-export const setupBeforeEach = () => {
+export const slateBeforeEach = (contentType = 'Document') => {
   cy.autologin();
   cy.createContent({
     contentType: 'Folder',
@@ -32,7 +31,7 @@ export const setupBeforeEach = () => {
     contentTitle: 'Cypress',
   });
   cy.createContent({
-    contentType: 'Document',
+    contentType: contentType,
     contentId: 'my-page',
     contentTitle: 'My Page',
     path: 'cypress',
@@ -44,10 +43,85 @@ export const setupBeforeEach = () => {
   cy.waitForResourceToLoad('@types');
   cy.waitForResourceToLoad('my-page');
   cy.navigate('/cypress/my-page/edit');
-  cy.get(`.block.title [data-contents]`);
 };
 
-export const tearDownAfterEach = () => {
+export const slateAfterEach = () => {
   cy.autologin();
   cy.removeContent('cypress');
 };
+
+export const slateJsonBeforeEach = (contentType = 'slate') => {
+  cy.autologin();
+  cy.addContentType(contentType);
+  cy.addSlateJSONField(contentType, 'slate');
+  slateBeforeEach(contentType);
+};
+
+export const slateJsonAfterEach = (contentType = 'slate') => {
+  cy.autologin();
+  cy.removeContentType(contentType);
+  slateAfterEach();
+};
+
+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/cypress.json

@@ -1,9 +1,14 @@
 {
   "baseUrl": "http://localhost:3000",
   "viewportWidth": 1280,
-  "defaultCommandTimeout": 15000,
+  "defaultCommandTimeout": 8888,
+  "chromeWebSecurity": false,
   "reporter": "junit",
   "video": true,
+  "retries": {
+    "runMode": 8,
+    "openMode": 0
+  },
   "reporterOptions": {
     "mochaFile": "cypress/reports/cypress-[hash].xml",
     "jenkinsMode": true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-slate-footnote",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "volto-slate-footnote: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/Blocks/Footnote/FootnotesBlockView.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { getAllBlocks } from 'volto-slate/utils';
+import { getAllBlocksAndSlateFields } from '@eeacms/volto-slate-footnote/editor/utils';
+
 import './less/public.less';
 import {
   makeFootnoteListOfUniqueItems,
@@ -25,7 +26,7 @@ const FootnotesBlockView = (props) => {
   useEffect(() => {
     if (properties) {
       const globalMetadata = global ? metadata : properties;
-      const blocks = getAllBlocks(globalMetadata, []);
+      const blocks = getAllBlocksAndSlateFields(globalMetadata);
       const notesObjResult = makeFootnoteListOfUniqueItems(blocks);
 
       setNodesObjs(notesObjResult);
@@ -39,28 +40,51 @@ const FootnotesBlockView = (props) => {
         <ol>
           {Object.keys(notesObj).map((noteId) => {
             const note = notesObj[noteId];
-            const { uid, footnote, zoteroId } = note;
+            const { uid, footnote, zoteroId, parentUid } = note;
             const { refs } = note;
             const refsList = refs ? Object.keys(refs) : null;
 
             return (
-              <li key={uid} id={`footnote-${zoteroId || uid}`}>
+              <li
+                key={`footnote-${zoteroId || uid}`}
+                id={`footnote-${zoteroId || uid}`}
+              >
                 <div
                   dangerouslySetInnerHTML={{
                     __html: makeFootnote(footnote),
                   }}
                 />
                 {refsList ? (
-                  refsList.map((ref, index) => (
-                    <sup id={`cite_ref-${ref}`} key={`indice-${ref}`}>
-                      <a href={`#ref-${ref}`} aria-label="Back to content">
-                        {alphabet[index]}
+                  <>
+                    {/** some footnotes are never parent so we need the parent to reference */}
+                    {/** int this case the first from refs has reference to the parent*/}
+                    <sup
+                      id={`cite_ref-${refsList[0]}`}
+                      key={`indice-${refsList[0]}`}
+                    >
+                      <a
+                        href={`#ref-${parentUid || uid}`}
+                        aria-label="Back to content"
+                      >
+                        {alphabet[0]}
                       </a>{' '}
                     </sup>
-                  ))
+                    {/** following refs will have the uid of the one that references it*/}
+                    {refsList.slice(1).map((ref, index) => (
+                      <sup id={`cite_ref-${ref}`} key={`indice-${ref}`}>
+                        <a href={`#ref-${ref}`} aria-label="Back to content">
+                          {alphabet[index + 1]}
+                        </a>{' '}
+                      </sup>
+                    ))}
+                  </>
                 ) : (
                   <sup id={`cite_ref-${uid}`}>
-                    <a href={`#ref-${uid}`} aria-label="Back to content">
+                    {/** some footnotes are never parent so we need the parent to reference */}
+                    <a
+                      href={`#ref-${parentUid || uid}`}
+                      aria-label="Back to content"
+                    >
                       ↵
                     </a>{' '}
                   </sup>