npm - @eeacms/volto-slate-footnote - Versions diffs - 3.2.0 → 4.0.3 - Mend

@eeacms/volto-slate-footnote 3.2.0 → 4.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/CHANGELOG.md +30 -5
package/Jenkinsfile +53 -22
package/README.md +87 -0
package/package.json +4 -2
package/src/Blocks/Footnote/FootnotesBlockView.jsx +24 -3
package/src/editor/FootnoteEditor.jsx +50 -41
package/src/editor/MultiSelectSearchWidget.jsx +53 -34
package/src/editor/render.jsx +26 -86
package/src/editor/utils.js +93 -42

package/CHANGELOG.md CHANGED Viewed

@@ -4,8 +4,38 @@ 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).
+#### [4.0.3](https://github.com/eea/volto-slate-footnote/compare/4.0.2...4.0.3)
+- Add SonarQube badges [`5d05ecf`](https://github.com/eea/volto-slate-footnote/commit/5d05ecfd933ec64693998d88f6b6c69e3866cb0b)
+- Refs #142010 - Optimize Volto-addons gitflow pipelines [`1081079`](https://github.com/eea/volto-slate-footnote/commit/1081079444f5ac806e9d56765c4ccf0b9e415a73)
+#### [4.0.2](https://github.com/eea/volto-slate-footnote/compare/4.0.1...4.0.2)
+> 30 September 2021
+- Make footnotes aware of Metadata / Metadata section block / Slate Table [`#27`](https://github.com/eea/volto-slate-footnote/pull/27)
+- Multiple citations [`#26`](https://github.com/eea/volto-slate-footnote/pull/26)
+- Remove :asDefault dependency from volto-slate [`13dad5e`](https://github.com/eea/volto-slate-footnote/commit/13dad5ed23043fa7a24682e1ac6addc86632bfe0)
+#### [4.0.1](https://github.com/eea/volto-slate-footnote/compare/4.0.0...4.0.1)
+> 29 September 2021
+- Make footnotes aware of Metadata / Metadata section block (#22) [`#25`](https://github.com/eea/volto-slate-footnote/pull/25)
+- make footnotes aware of Metadata / Metadata section block [`#22`](https://github.com/eea/volto-slate-footnote/pull/22)
+### [4.0.0](https://github.com/eea/volto-slate-footnote/compare/3.2.0...4.0.0)
+> 24 September 2021
+- Release 4.0.0 [`#24`](https://github.com/eea/volto-slate-footnote/pull/24)
+- Use new slate namespaced pluginids [`#23`](https://github.com/eea/volto-slate-footnote/pull/23)
 #### [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)
@@ -18,7 +48,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - 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)
@@ -49,7 +78,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Bump version to 2.4.0 [`bef0d34`](https://github.com/eea/volto-slate-footnote/commit/bef0d34c2b9c20915578ffaefb4fd30cbf42f0a1)
 - Fix Slate point from DOM crash [`c852f79`](https://github.com/eea/volto-slate-footnote/commit/c852f7987ffe8db433235b70792002d40ade690f)
 - Fix crash on copy&paste beforeInsert condition [`85172cf`](https://github.com/eea/volto-slate-footnote/commit/85172cff3e2ea95a86d4b4fb452f3c0287b80e8f)
-- Add Sonarqube tag using frontend addons list [`b471c41`](https://github.com/eea/volto-slate-footnote/commit/b471c418d198b1bde95acfe0b256f642bacc6865)
 #### [2.3.1](https://github.com/eea/volto-slate-footnote/compare/2.3.0...2.3.1)
@@ -73,7 +101,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 > 13 May 2021
-- [JENKINS] - Auto-release pipeline [`#7`](https://github.com/eea/volto-slate-footnote/pull/7)
 #### [2.2.0](https://github.com/eea/volto-slate-footnote/compare/2.1.1...2.2.0)
@@ -122,7 +149,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Fix show multiple footnotes for the same citation on copy paste [`#3`](https://github.com/eea/volto-slate-footnote/pull/3)
 - Release 1.0.1 [`7efbb88`](https://github.com/eea/volto-slate-footnote/commit/7efbb8877ac7c1cce40a6799527102e1d131d08f)
 - Release on npm by default [`0e96df2`](https://github.com/eea/volto-slate-footnote/commit/0e96df2605d86ebe4260ba43fa78c10227c87526)
-- [JENKINS] - Fix eslint [`7c01ec2`](https://github.com/eea/volto-slate-footnote/commit/7c01ec2a70916788541eaa00a3757e2593fb7ff7)
 - fix show multiple footnotes for the same citation on copy paste [`fe3391d`](https://github.com/eea/volto-slate-footnote/commit/fe3391d3b27f77cc2df663532497e27986509b14)
 ### [1.0.0](https://github.com/eea/volto-slate-footnote/compare/0.3.1...1.0.0)
@@ -132,7 +158,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Release 1.0.0 [`7ae4302`](https://github.com/eea/volto-slate-footnote/commit/7ae4302133411806168b5ea17bec5a267413e2cb)
 - Add missing dependency: volto-slate [`e2a6625`](https://github.com/eea/volto-slate-footnote/commit/e2a662538b3b53006a30c171e84e6cbce0c20720)
 - Update docs [`9efeb4e`](https://github.com/eea/volto-slate-footnote/commit/9efeb4e33ec8f58e6101875b593e34f1098cac20)
-- [JENKINS] - Add pipeline, update docs [`d5b6d50`](https://github.com/eea/volto-slate-footnote/commit/d5b6d50d878e596aac4713d7b2293ab4e001d993)
 #### [0.3.1](https://github.com/eea/volto-slate-footnote/compare/0.3.0...0.3.1)

package/Jenkinsfile CHANGED Viewed

@@ -4,13 +4,37 @@ pipeline {
   environment {
         GIT_NAME = "volto-slate-footnote"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims"
-        DEPENDENCIES = ""
+        SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,sustainability.eionet.europa.eu,forest.eea.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater"
+        DEPENDENCIES = "volto-slate:asDefault"
     }
   stages {
+    stage('Release') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          branch 'master'
+        }
+      }
+      steps {
+        node(label: 'docker') {
+          withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN'),string(credentialsId: 'eea-jenkins-npm-token', variable: 'NPM_TOKEN')]) {
+            sh '''docker pull eeacms/gitflow'''
+            sh '''docker run -i --rm --name="$BUILD_TAG-gitflow-master" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" -e GIT_TOKEN="$GITHUB_TOKEN" -e NPM_TOKEN="$NPM_TOKEN" -e LANGUAGE=javascript eeacms/gitflow'''
+          }
+        }
+      }
+    }
     stage('Code') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          not { changelog '.*^Automated release [0-9\\.]+$' }
+          not { branch 'master' }
+        }
+      }
       steps {
         parallel(
@@ -36,6 +60,15 @@ pipeline {
     }
     stage('Tests') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          anyOf {
+           not { changelog '.*^Automated release [0-9\\.]+$' }
+           branch 'master'
+          }
+        }
+      }
       steps {
         parallel(
@@ -75,6 +108,15 @@ pipeline {
     }
     stage('Integration tests') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          anyOf {
+           not { changelog '.*^Automated release [0-9\\.]+$' }
+           branch 'master'
+          }
+        }
+      }
       steps {
         parallel(
@@ -122,10 +164,16 @@ pipeline {
     }
     stage('Report to SonarQube') {
-      // Exclude Pull-Requests
       when {
         allOf {
           environment name: 'CHANGE_ID', value: ''
+          anyOf {
+            branch 'master'
+            allOf {
+              branch 'develop'
+              not { changelog '.*^Automated release [0-9\\.]+$' }
+            }
+          }
         }
       }
       steps {
@@ -156,8 +204,8 @@ pipeline {
       steps {
         node(label: 'docker') {
           script {
-            if ( env.CHANGE_BRANCH != "develop" &&  !( env.CHANGE_BRANCH.startsWith("hotfix")) ) {
-                error "Pipeline aborted due to PR not made from develop or hotfix branch"
+            if ( env.CHANGE_BRANCH != "develop" ) {
+                error "Pipeline aborted due to PR not made from develop branch"
             }
            withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN')]) {
             sh '''docker pull eeacms/gitflow'''
@@ -168,23 +216,6 @@ pipeline {
       }
     }
-    stage('Release') {
-      when {
-        allOf {
-          environment name: 'CHANGE_ID', value: ''
-          branch 'master'
-        }
-      }
-      steps {
-        node(label: 'docker') {
-          withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN'),string(credentialsId: 'eea-jenkins-npm-token', variable: 'NPM_TOKEN')]) {
-            sh '''docker pull eeacms/gitflow'''
-            sh '''docker run -i --rm --name="$BUILD_TAG-gitflow-master" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" -e GIT_TOKEN="$GITHUB_TOKEN" -e NPM_TOKEN="$NPM_TOKEN" -e LANGUAGE=javascript eeacms/gitflow'''
-          }
-        }
-      }
-    }
   }
   post {

package/README.md CHANGED Viewed

@@ -1,7 +1,19 @@
 # volto-slate-footnote
 [![Releases](https://img.shields.io/github/v/release/eea/volto-slate-footnote)](https://github.com/eea/volto-slate-footnote/releases)
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-slate-footnote%2Fmaster&subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-slate-footnote/job/master/display/redirect)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-slate-footnote-master&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-slate-footnote-master)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-slate-footnote-master&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-slate-footnote-master)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-slate-footnote-master&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-slate-footnote-master)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-slate-footnote-master&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-slate-footnote-master)
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-slate-footnote%2Fdevelop&subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-slate-footnote/job/develop/display/redirect)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-slate-footnote-develop&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-slate-footnote-develop)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-slate-footnote-develop&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-slate-footnote-develop)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-slate-footnote-develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-slate-footnote-develop)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-slate-footnote-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-slate-footnote-develop)
 [Volto Slate](https://github.com/eea/volto-slate/tree/develop) Footnotes
@@ -75,6 +87,81 @@
 1. Happy editing!
+## Release
+### Automatic release using Jenkins
+*  The automatic release is started by creating a [Pull Request](../../compare/master...develop) from `develop` to `master`. The pull request status checks correlated to the branch and PR Jenkins jobs need to be processed successfully. 1 review from a github user with rights is mandatory.
+* It runs on every commit on `master` branch, which is protected from direct commits, only allowing pull request merge commits.
+* The automatic release is done by [Jenkins](https://ci.eionet.europa.eu). The status of the release job can be seen both in the Readme.md badges and the green check/red cross/yellow circle near the last commit information. If you click on the icon, you will have the list of checks that were run. The `continuous-integration/jenkins/branch` link goes to the Jenkins job execution webpage.
+* Automated release scripts are located in the `eeacms/gitflow` docker image, specifically [js-release.sh](https://github.com/eea/eea.docker.gitflow/blob/master/src/js-release.sh) script. It  uses the `release-it` tool.
+* As long as a PR request is open from develop to master, the PR Jenkins job will automatically re-create the CHANGELOG.md and package.json files to be production-ready.
+* The version format must be MAJOR.MINOR.PATCH. By default, next release is set to next minor version (with patch 0).
+* You can manually change the version in `package.json`.  The new version must not be already present in the tags/releases of the repository, otherwise it will be automatically increased by the script. Any changes to the version will trigger a `CHANGELOG.md` re-generation.
+* Automated commits and commits with [JENKINS] or [YARN] in the commit log are excluded from `CHANGELOG.md` file.
+### Manual release from the develop branch ( beta release )
+#### Installation and configuration of release-it
+You need to first install the [release-it](https://github.com/release-it/release-it)  client.
+   ```
+   npm install -g release-it
+   ```
+Release-it uses the configuration written in the [`.release-it.json`](./.release-it.json) file located in the root of the repository.
+Release-it is a tool that automates 4 important steps in the release process:
+1. Version increase in `package.json` ( increased from the current version in `package.json`)
+2. `CHANGELOG.md` automatic generation from commit messages ( grouped by releases )
+3. GitHub release on the commit with the changelog and package.json modification on the develop branch
+4. NPM release ( by default it's disabled, but can be enabled in the configuration file )
+To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens)
+   ```
+   export GITHUB_TOKEN=XXX-XXXXXXXXXXXXXXXXXXXXXX
+   ```
+ To configure npm, you can use the `npm login` command or use a configuration file with a TOKEN :
+   ```
+   echo "//registry.npmjs.org/:_authToken=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY" > .npmrc
+   ```
+#### Using release-it tool
+There are 3 yarn scripts that can be run to do the release
+##### yarn release-beta
+Automatically calculates and presents 3 beta versions - patch, minor and major for you to choose ( or Other for manual input).
+```
+? Select increment (next version):
+❯ prepatch (0.1.1-beta.0)
+  preminor (0.2.0-beta.0)
+  premajor (1.0.0-beta.0)
+  Other, please specify...
+```
+##### yarn release-major-beta
+Same as `yarn release-beta`, but with premajor version pre-selected.
+##### yarn release
+Generic command, does not automatically add the `beta` to version, but you can still manually write it if you choose Other.
+#### Important notes
+> Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.
+> Do not keep Pull Requests from develop to master branches open when you are doing beta releases from the develop branch. As long as a PR to master is open, an automatic script will run on every commit and will update both the version and the changelog to a production-ready state - ( MAJOR.MINOR.PATCH mandatory format for version).
 ## How to contribute
 See [DEVELOP.md](DEVELOP.md).

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-slate-footnote",
-  "version": "3.2.0",
+  "version": "4.0.3",
   "description": "volto-slate-footnote: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -19,7 +19,7 @@
     "url": "git@github.com:eea/volto-slate-footnote.git"
   },
   "addons": [
-    "volto-slate:asDefault"
+    "volto-slate"
   ],
   "dependencies": {
     "volto-slate": "*"
@@ -30,6 +30,8 @@
   },
   "scripts": {
     "release": "release-it",
+    "release-major-beta": "release-it major --preRelease=beta",
+    "release-beta": "release-it --preRelease=beta",
     "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",
     "test": "make test",
     "test:fix": "make test-update",

package/src/Blocks/Footnote/FootnotesBlockView.jsx CHANGED Viewed

@@ -1,5 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { getAllBlocksAndSlateFields } from '@eeacms/volto-slate-footnote/editor/utils';
+import {
+  openAccordionIfContainsFootnoteReference,
+  getAllBlocksAndSlateFields,
+} from '@eeacms/volto-slate-footnote/editor/utils';
 import './less/public.less';
 import {
@@ -57,7 +60,7 @@ const FootnotesBlockView = (props) => {
                 {refsList ? (
                   <>
                     {/** some footnotes are never parent so we need the parent to reference */}
-                    {/** int this case the first from refs has reference to the parent*/}
+                    {/** in this case the first from refs has reference to the parent*/}
                     <sup
                       id={`cite_ref-${refsList[0]}`}
                       key={`indice-${refsList[0]}`}
@@ -65,6 +68,11 @@ const FootnotesBlockView = (props) => {
                       <a
                         href={`#ref-${parentUid || uid}`}
                         aria-label="Back to content"
+                        onClick={() =>
+                          openAccordionIfContainsFootnoteReference(
+                            `#ref-${parentUid || uid}`,
+                          )
+                        }
                       >
                         {alphabet[0]}
                       </a>{' '}
@@ -72,7 +80,15 @@ const FootnotesBlockView = (props) => {
                     {/** 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">
+                        <a
+                          href={`#ref-${ref}`}
+                          aria-label="Back to content"
+                          onClick={() =>
+                            openAccordionIfContainsFootnoteReference(
+                              `#ref-${ref}`,
+                            )
+                          }
+                        >
                           {alphabet[index + 1]}
                         </a>{' '}
                       </sup>
@@ -84,6 +100,11 @@ const FootnotesBlockView = (props) => {
                     <a
                       href={`#ref-${parentUid || uid}`}
                       aria-label="Back to content"
+                      onClick={() =>
+                        openAccordionIfContainsFootnoteReference(
+                          `#ref-${parentUid || uid}`,
+                        )
+                      }
                     >
                       ↵
                     </a>{' '}

package/src/editor/FootnoteEditor.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { isEqual } from 'lodash';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { ReactEditor } from 'slate-react';
 import { setPluginOptions } from 'volto-slate/actions';
@@ -8,6 +8,8 @@ import briefcaseSVG from '@plone/volto/icons/briefcase.svg';
 import checkSVG from '@plone/volto/icons/check.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import { Node } from 'slate';
+import { useSelector } from 'react-redux';
+import { isEmpty } from 'lodash';
 import { getAllBlocksAndSlateFields } from '@eeacms/volto-slate-footnote/editor/utils';
 const FootnoteEditor = (props) => {
@@ -23,8 +25,10 @@ const FootnoteEditor = (props) => {
     onChangeValues,
   } = props;
   const dispatch = useDispatch();
+  const pid = `${editor.uid}-${pluginId}`;
   const [formData, setFormData] = React.useState({});
   const active = getActiveElement(editor);
+  const initialFormData = useSelector((state) => state?.content?.data || {});
   if (!active) {
     /* eslint no-console: 0 */
@@ -35,53 +39,43 @@ const FootnoteEditor = (props) => {
   const blockProps = editor?.getBlockProps ? editor.getBlockProps() : {};
   const metadata = blockProps.metadata || blockProps.properties || {};
-  const blocks = getAllBlocksAndSlateFields(metadata);
-  const filteredBlocks = [];
+  const metadataBlocks = getAllBlocksAndSlateFields(metadata);
+  const storeBlocks = getAllBlocksAndSlateFields(initialFormData);
+  const uniqueFootnoteBlocks = [];
+  const flatAllBlocks = isEmpty(metadata) ? storeBlocks : metadataBlocks;
+  /**
+   * Will add only the items that are unique by text
+   * @param {Object[]} uniqueFootnoteBlocks
+   * @param {Object} itemToManage
+   */
+  const manageAddBlockToUniqueBlocks = (uniqueFootnoteBlocks, itemToManage) => {
+    if (
+      !uniqueFootnoteBlocks.find((item) => item.title === itemToManage.footnote)
+    ) {
+      uniqueFootnoteBlocks.push({
+        ...itemToManage,
+        title: itemToManage.footnote || itemToManage.value,
+        label: itemToManage.footnote || itemToManage.value,
+        value: itemToManage.footnote || itemToManage.value,
+      });
+    }
+  };
   // make a list of filtered footnotes that have unique title
   // to be used as choices for the multi search widget
   // add label and value for the multi search widget
   // flatten blocks to add all extra in the list
-  blocks
+  flatAllBlocks
     .filter((b) => b['@type'] === 'slate')
     .forEach(({ value }) => {
       if (!value) return;
       Array.from(Node.elements(value[0])).forEach(([block]) => {
         block.children.forEach((node) => {
-          if (node.data && node.type === 'footnote' && node.data.extra) {
-            if (
-              !filteredBlocks.find((item) => item.title === node.data.footnote)
-            ) {
-              filteredBlocks.push({
-                ...node.data,
-                title: node.data.footnote || node.data.value,
-                label: node.data.footnote || node.data.value,
-                value: node.data.footnote || node.data.value,
-              });
-            }
-            node.data.extra.forEach((ftitem) => {
-              if (
-                !filteredBlocks.find((item) => item.title === ftitem.footnote)
-              ) {
-                filteredBlocks.push({
-                  ...ftitem,
-                  title: ftitem.footnote || ftitem.value,
-                  label: ftitem.footnote || ftitem.value,
-                  value: ftitem.footnote || ftitem.value,
-                });
-              }
-            });
-          } else if (
-            node.data &&
-            node.type === 'footnote' &&
-            !filteredBlocks.find((item) => item.title === node.data.footnote)
-          ) {
-            filteredBlocks.push({
-              ...node.data,
-              title: node.data.footnote,
-              label: node.data.footnote,
-              value: node.data.footnote,
+          if (node.data && node.type === 'footnote') {
+            manageAddBlockToUniqueBlocks(uniqueFootnoteBlocks, node.data);
+            (node.data.extra || []).forEach((ftitem) => {
+              manageAddBlockToUniqueBlocks(uniqueFootnoteBlocks, ftitem);
             });
           }
         });
@@ -105,6 +99,21 @@ const FootnoteEditor = (props) => {
     elRef.current = null;
   }
+  useEffect(() => {
+    if (isElement) {
+      elRef.current = elementNode;
+      setFormData({
+        footnote: {
+          ...elementNode.data,
+          label: elementNode.data.footnote,
+          value: elementNode.data.footnote,
+        },
+      });
+    } else if (!isElement) {
+      elRef.current = null;
+    }
+  }, [isElement, elRef, elementNode]); // eslint-disable-line
   const saveDataToEditor = React.useCallback(
     (formData) => {
       if (hasValue(formData.footnote)) {
@@ -132,7 +141,7 @@ const FootnoteEditor = (props) => {
             ...schema.properties,
             footnote: {
               ...schema.properties.footnote,
-              choices: filteredBlocks,
+              choices: uniqueFootnoteBlocks,
             },
           },
         };
@@ -150,14 +159,14 @@ const FootnoteEditor = (props) => {
             }}
             formData={formData}
             dataBoss={formData}
-            source={filteredBlocks}
+            source={uniqueFootnoteBlocks}
             headerActions={
               <>
                 <button
                   onClick={() => {
                     saveDataToEditor(formData);
                     dispatch(
-                      setPluginOptions(pluginId, {
+                      setPluginOptions(pid, {
                         show_sidebar_editor: false,
                       }),
                     );
@@ -170,7 +179,7 @@ const FootnoteEditor = (props) => {
                   onClick={() => {
                     checkForCancel();
                     dispatch(
-                      setPluginOptions(pluginId, {
+                      setPluginOptions(pid, {
                         show_sidebar_editor: false,
                       }),
                     );

package/src/editor/MultiSelectSearchWidget.jsx CHANGED Viewed

@@ -3,7 +3,7 @@
  * @module components/manage/Widgets/ArrayWidget
  */
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { defineMessages } from 'react-intl';
 import {
   Option,
@@ -30,11 +30,33 @@ const messages = defineMessages({
 const MultiSelectSearchWidget = injectLazyLibs('reactSelectAsyncCreateable')(
   (props) => {
-    const parentFootnote = props.value;
-    const extraValues = props.value.extra ? props.value.extra : [];
-    const [selectedOption, setSelectedOption] = useState(
-      parentFootnote.value ? [...[parentFootnote], ...extraValues] : [],
-    );
+    const [selectedOption, setSelectedOption] = useState([]);
+    const [defaultOptions, setDefaultOptions] = useState([]);
+    const [parentFootnote, setParentFootnote] = useState(props.value);
+    useEffect(() => {
+      if (props.value) {
+        const parentFootnoteCurrent = props.value;
+        const extraValues =
+          parentFootnoteCurrent && props.value.extra ? props.value.extra : [];
+        const selectedOptionCurrent = parentFootnoteCurrent.value
+          ? [...[parentFootnoteCurrent], ...extraValues]
+          : [];
+        setSelectedOption(selectedOptionCurrent);
+        // from choices (list of all footnotes available including current in value) get all not
+        // found in current in value
+        // consider that new footnotes have value and footnote undefined
+        const defaultOptions = (props.choices || []).filter(
+          (item) =>
+            !selectedOption.find(({ label }) => label === item.label) &&
+            item.value,
+        );
+        setDefaultOptions(defaultOptions);
+        setParentFootnote(props.value);
+      }
+    }, [props]); // eslint-disable-line
     /**
      * evaluate on Regex to filter results
@@ -53,77 +75,74 @@ const MultiSelectSearchWidget = injectLazyLibs('reactSelectAsyncCreateable')(
     /**
      * If the list is empty or the first is not parent, return true
-     * @param {Object[]} selectedOption list of objects - footnotes
+     * @param {Object[]} optionsList list of objects - footnotes
      * @returns {boolean}
      */
-    const isParetFootnoteRemoved = (selectedOption) =>
-      !selectedOption[0] || selectedOption[0].value !== parentFootnote.value;
+    const isParetFootnoteRemoved = (optionsList) =>
+      !optionsList[0] || optionsList[0].value !== parentFootnote.value;
     /**
      * replace all parentFootnote data except uid, with the first from the list
-     * @param {Object[]} selectedOption list of objects - footnotes
+     * @param {Object[]} optionsList list of objects - footnotes
      * @returns {Object}
      */
-    const setParentFootnoteFromExtra = (selectedOption) => {
-      const { footnote, label, value } = selectedOption[0] || [];
+    const setParentFootnoteFromExtra = (optionsList) => {
+      const { footnote, label, value } = optionsList[0] || [];
       return {
         ...parentFootnote,
-        footnote: footnote || selectedOption[0]?.value,
+        footnote: footnote || optionsList[0]?.value,
         label,
         value,
-        extra: selectedOption.slice(1),
+        extra: optionsList.slice(1),
       };
     };
     /**
-     * Will make the footnotes object, that will be saved as first from selectedOption
+     * Will make the footnotes object, that will be saved as first from optionsList
      * the rest will be added to extra
-     * @param {*} selectedOption
+     * @param {Object[]} optionsList
      * @returns
      */
-    const setFootnoteFromSelection = (selectedOption) => {
-      const extra = selectedOption.slice(1).map((item) => {
+    const setFootnoteFromSelection = (optionsList) => {
+      const extra = optionsList.slice(1).map((item) => {
         const obj = {
-          uid: nanoid(5),
           ...item,
           footnote: item.value,
         };
-        const { __isNew__: remove, ...rest } = obj;
+        const { __isNew__: remove, extra, ...rest } = obj;
         return rest;
       });
       return { ...parentFootnote, extra };
     };
     /**
      * Handle the field change, will remake the result based on the new selected list
      * @method handleChange
-     * @param {array} selectedOption The selected options (already aggregated).
+     * @param {array} optionsList The selected options (already aggregated).
      * @returns {undefined}
      */
-    const handleChange = (selectedOption) => {
-      setSelectedOption(selectedOption);
+    const handleChange = (optionsList) => {
+      const formattedSelectedOptions = optionsList.map((option) => ({
+        footnoteId: nanoid(5), // to be overwritten if already exists (keep as a reference to same text)
+        ...option,
+        uid: nanoid(5), // overwrite existing, thus creating new record for the same text
+        footnote: option.value,
+      }));
+      setSelectedOption(formattedSelectedOptions);
       // manage case if parent footnotes (first from the options) was removed
-      const resultSelected = isParetFootnoteRemoved(selectedOption)
-        ? setParentFootnoteFromExtra(selectedOption)
-        : setFootnoteFromSelection(selectedOption);
+      const resultSelected = isParetFootnoteRemoved(formattedSelectedOptions)
+        ? setParentFootnoteFromExtra(formattedSelectedOptions)
+        : setFootnoteFromSelection(formattedSelectedOptions);
       props.onChange({
         footnote: resultSelected,
       });
     };
-    // from choices (list of all footnotes available including current in value) get all not found in current in value
-    // consider that new footnotes have value and footnote undefined
-    const defaultOptions = (props.choices || []).filter(
-      (item) =>
-        !selectedOption.find(({ label }) => label === item.label) && item.value,
-    );
     const AsyncCreatableSelect = props.reactSelectAsyncCreateable.default;
     return (
       <FormFieldWrapper {...props}>
         <AsyncCreatableSelect

package/src/editor/render.jsx CHANGED Viewed

@@ -2,7 +2,12 @@ import React, { useEffect, useState } from 'react';
 import { Popup, List } from 'semantic-ui-react';
 import { useEditorContext } from 'volto-slate/hooks';
 import { getAllBlocksAndSlateFields } from '@eeacms/volto-slate-footnote/editor/utils';
-import { makeFootnoteListOfUniqueItems } from './utils';
+import {
+  makeFootnoteListOfUniqueItems,
+  openAccordionIfContainsFootnoteReference,
+} from './utils';
+import { isEmpty } from 'lodash';
+import { useSelector } from 'react-redux';
 /**
  * Removes '<?xml version="1.0"?>' from footnote
@@ -15,24 +20,6 @@ const makeFootnote = (footnote) => {
   return free;
 };
-/**
- * Will open accordion if contains footnote reference
- * @param {string} footnoteId
- */
-const openAccordionIfContainsFootnoteReference = (footnoteId) => {
-  if (typeof window !== 'undefined') {
-    const footnote = document.querySelector(footnoteId);
-    if (footnote !== null && footnote.closest('.accordion') !== null) {
-      const comp = footnote.closest('.accordion').querySelector('.title');
-      if (!comp.className.includes('active')) {
-        comp.click();
-      }
-    }
-  }
-  return true;
-};
 export const FootnoteElement = (props) => {
   const { attributes, children, element, mode, extras } = props;
   const { data = {} } = element;
@@ -40,6 +27,7 @@ export const FootnoteElement = (props) => {
   const editor = useEditorContext();
   const [citationIndice, setCitationIndice] = useState(null); // list of indices to reference
   const [citationRefId, setCitationRefId] = useState(null); // indice of element to be referenced
+  const initialFormData = useSelector((state) => state?.content?.data || {});
   useEffect(() => {
     const blockProps = editor?.getBlockProps ? editor.getBlockProps() : null;
@@ -47,7 +35,11 @@ export const FootnoteElement = (props) => {
       ? blockProps.metadata || blockProps.properties
       : extras?.metadata || {};
     const blocks = getAllBlocksAndSlateFields(metadata);
-    const notesObjResult = makeFootnoteListOfUniqueItems(blocks);
+    const storeBlocks = getAllBlocksAndSlateFields(initialFormData);
+    const notesObjResult = isEmpty(metadata)
+      ? makeFootnoteListOfUniqueItems(storeBlocks)
+      : makeFootnoteListOfUniqueItems(blocks);
     // will cosider zotero citations and footnote
     // notesObjResult contains all zotero/footnote as unique, and contain refs for other zotero/footnote
@@ -67,72 +59,20 @@ export const FootnoteElement = (props) => {
         : // no extra citations (no multiples)
           `[${Object.keys(notesObjResult).indexOf(zoteroId) + 1}]`
       : // FOOTNOTES
-      // not all footnotes will be found in notesObjResult because they might have different uid
-      notesObjResult[data.uid]
-      ? // footnotes from extra
-        data.extra
-        ? [
-            // parent footnote
-            `[${Object.keys(notesObjResult).indexOf(data.uid) + 1}]`,
-            ...data.extra.map((footnoteObj, index) => {
-              return notesObjResult[footnoteObj.uid]
-                ? // take footnote if uid is found
-                  `[${
-                    Object.keys(notesObjResult).indexOf(footnoteObj.uid) + 1
-                  }]`
-                : // if uid is not found look for it in other footnotes refs
-                  `[${
-                    Object.keys(notesObjResult).indexOf(
-                      Object.keys(notesObjResult).find(
-                        (noteKey) =>
-                          notesObjResult[noteKey].refs &&
-                          notesObjResult[noteKey].refs[data.uid],
-                      ),
-                    ) + 1
-                  }]`;
-            }),
-          ].join('')
-        : // no extra footnotes (no multiples)
-          `[${Object.keys(notesObjResult).indexOf(data.uid) + 1}]`
-      : // footnotes not found in notesObjResult
-      data.extra
-      ? [
-          // look for it in other footnotes refs - parent
-          `[${
-            Object.keys(notesObjResult).indexOf(
-              Object.keys(notesObjResult).find(
-                (noteKey) =>
-                  notesObjResult[noteKey].refs &&
-                  notesObjResult[noteKey].refs[data.uid],
-              ),
-            ) + 1
-          }]`,
-          ...data.extra.map((footnoteObj, index) => {
-            return notesObjResult[footnoteObj.uid]
-              ? // footnotes from extra might be found in notesObjResult
-                `[${Object.keys(notesObjResult).indexOf(footnoteObj.uid) + 1}]`
-              : // if uid is not found look for it in other footnotes refs
-                `[${
-                  Object.keys(notesObjResult).indexOf(
-                    Object.keys(notesObjResult).find(
-                      (noteKey) =>
-                        notesObjResult[noteKey].refs &&
-                        notesObjResult[noteKey].refs[data.uid],
-                    ),
-                  ) + 1
-                }]`;
-          }),
-        ].join('')
-      : // no extra footnotes
-        `[${
-          Object.keys(notesObjResult).indexOf(
-            Object.keys(notesObjResult).find(
-              (noteKey) =>
-                notesObjResult[noteKey].refs &&
-                notesObjResult[noteKey].refs[data.uid],
-            ),
-          ) + 1
-        }]`;
+        // parent footnote
+        [data, ...(data.extra || [])]
+          .map((footnoteObj, index) => {
+            return `[${
+              Object.keys(notesObjResult).indexOf(
+                Object.keys(notesObjResult).find(
+                  (key) =>
+                    notesObjResult[key].footnote === footnoteObj.footnote,
+                ),
+              ) + 1
+            }]`;
+          })
+          .join('');
     const findReferenceId =
       // search within parent citations first, otherwise the uid might be inside a refs obj that comes before
       Object.keys(notesObjResult).find(

package/src/editor/utils.js CHANGED Viewed

@@ -13,6 +13,76 @@ export const makeFootnote = (footnote) => {
   return free;
 };
+/**
+ * Will open accordion if contains footnote reference
+ * @param {string} footnoteId
+ */
+export const openAccordionIfContainsFootnoteReference = (footnoteId) => {
+  if (typeof window !== 'undefined') {
+    const footnote = document.querySelector(footnoteId);
+    if (footnote !== null && footnote.closest('.accordion') !== null) {
+      const comp = footnote.closest('.accordion').querySelector('.title');
+      if (!comp.className.includes('active')) {
+        comp.click();
+      }
+    }
+  }
+  return true;
+};
+const blockTypesOperations = {
+  metadataSection: (block, properties) => {
+    const fields = block.fields;
+    const flatMetadataSectionBlocks = fields
+      .filter((field) => field?.field?.widget === 'slate')
+      .reduce((accumulator, currentField) => {
+        const fieldId = currentField.field.id;
+        const propertiesBlocks = (properties[fieldId] || []).map(
+          (propertyBlockValue) => ({
+            '@type': 'slate',
+            id: fieldId,
+            value: [propertyBlockValue],
+          }),
+        );
+        return [...accumulator, ...propertiesBlocks];
+      }, []);
+    return flatMetadataSectionBlocks;
+  },
+  metadata: (block, properties) => {
+    const fId = block.data.id;
+    return block?.data?.widget === 'slate'
+      ? [
+          {
+            '@type': 'slate',
+            id: fId,
+            value: properties[fId]?.length ? properties[fId] : null,
+          },
+        ]
+      : [];
+  },
+  slateTable: (block) => {
+    const flatSlateBlocks = (block?.table?.rows || []).reduce(
+      (accumulator, currentRow) => {
+        const cellsBlocks = (currentRow.cells || []).map((cell) => ({
+          '@type': 'slate',
+          ...cell,
+        }));
+        return [...accumulator, ...cellsBlocks];
+      },
+      [],
+    );
+    return flatSlateBlocks;
+  },
+  defaultOperation: (block) => {
+    return [block];
+  },
+};
 /**
  * Extends volto-slate getAllBlocks functionality also to SlateJSONFields
  * inserted within blocks via Metadata / Metadata section block
@@ -21,36 +91,17 @@ export const makeFootnote = (footnote) => {
  */
 export const getAllBlocksAndSlateFields = (properties) => {
   const blocks = getAllBlocks(properties, []);
-  const flat_blocks = [];
-  for (const b_idx in blocks) {
-    const block = blocks[b_idx];
-    if (block['@type'] === 'metadataSection') {
-      const fields = block.fields;
-      for (const f_idx in fields) {
-        const field = fields[f_idx];
-        if (field?.field?.widget === 'slate') {
-          const field_id = field.field.id;
-          flat_blocks.push({
-            '@type': 'slate',
-            id: field_id,
-            value: properties[field_id]?.length ? properties[field_id] : null,
-          });
-        }
-      }
-    } else if (block['@type'] === 'metadata') {
-      if (block?.data?.widget === 'slate') {
-        const f_id = block.data.id;
-        flat_blocks.push({
-          '@type': 'slate',
-          id: f_id,
-          value: properties[f_id]?.length ? properties[f_id] : null,
-        });
-      }
-    } else {
-      flat_blocks.push(block);
-    }
-  }
-  return flat_blocks;
+  const flatBlocksResult = blocks.reduce((accumulator, currentblock) => {
+    return [
+      ...accumulator,
+      ...(blockTypesOperations[currentblock['@type']]
+        ? blockTypesOperations[currentblock['@type']](currentblock, properties)
+        : blockTypesOperations.defaultOperation(currentblock)),
+    ];
+  }, []);
+  return flatBlocksResult;
 };
 /**
@@ -85,18 +136,18 @@ export const makeFootnoteListOfUniqueItems = (blocks) => {
               );
             }
             // for footnotes - create refs, on identical text
-          } else if (node.data.extra) {
-            iterateFootnoteObj(notesObjResult, node.data);
-            node.data.extra.forEach((footnoteObjItem) =>
-              // since is called in case of extra, the parent is needed
-              iterateFootnoteObj(
-                notesObjResult,
-                footnoteObjItem,
-                node.data.uid,
-              ),
-            );
           } else {
             iterateFootnoteObj(notesObjResult, node.data);
+            if (node.data.extra) {
+              node.data.extra.forEach((footnoteObjItem) =>
+                // since is called in case of extra, the parent is needed
+                iterateFootnoteObj(
+                  notesObjResult,
+                  footnoteObjItem,
+                  node.data.uid,
+                ),
+              );
+            }
           }
         }
       });
@@ -161,11 +212,11 @@ const iterateFootnoteObj = (notesObjResultTemp, node, parentUid) => {
       : { ...node };
     // the element is found, just add it's own uid to the list of refs, the parent is already known
   } else if (notesObjResultTemp[found].refs) {
-    notesObjResultTemp[found].refs[node.uid] = true;
+    notesObjResultTemp[found].refs[uid] = true;
   } else {
     // element found but doesn't have refs yet, this means that it is a parent, so add it's existing uid and the current one
     notesObjResultTemp[found].refs = {
-      [notesObjResultTemp[found].uid]: true,
+      [found]: true,
       [uid]: true,
     };
   }