@eeacms/volto-slate-footnote 3.0.0 → 4.0.0

package/src/editor/FootnoteEditor.jsx

@@ -8,7 +8,7 @@ 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 { getAllBlocks } from 'volto-slate/utils';
+import { getAllBlocksAndSlateFields } from '@eeacms/volto-slate-footnote/editor/utils';
 
 const FootnoteEditor = (props) => {
   const {
@@ -22,10 +22,9 @@ const FootnoteEditor = (props) => {
     hasValue,
     onChangeValues,
   } = props;
-
   const dispatch = useDispatch();
+  const pid = `${editor.uid}-${pluginId}`;
   const [formData, setFormData] = React.useState({});
-
   const active = getActiveElement(editor);
 
   if (!active) {
@@ -35,12 +34,15 @@ const FootnoteEditor = (props) => {
   const [elementNode] = active;
   const isElement = isActiveElement(editor);
 
-  const blockProps = editor.getBlockProps();
-  const metadata = blockProps.metadata || blockProps.properties;
-  const blocks = getAllBlocks(metadata, []);
+  const blockProps = editor?.getBlockProps ? editor.getBlockProps() : {};
+  const metadata = blockProps.metadata || blockProps.properties || {};
+  const blocks = getAllBlocksAndSlateFields(metadata);
   const filteredBlocks = [];
 
   // 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
     .filter((b) => b['@type'] === 'slate')
     .forEach(({ value }) => {
@@ -48,7 +50,30 @@ const FootnoteEditor = (props) => {
 
       Array.from(Node.elements(value[0])).forEach(([block]) => {
         block.children.forEach((node) => {
-          if (
+          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)
@@ -56,6 +81,8 @@ const FootnoteEditor = (props) => {
             filteredBlocks.push({
               ...node.data,
               title: node.data.footnote,
+              label: node.data.footnote,
+              value: node.data.footnote,
             });
           }
         });
@@ -65,17 +92,24 @@ const FootnoteEditor = (props) => {
   // Update the form data based on the current element
   const elRef = React.useRef(null);
 
+  // add label and value for the multi search widget to be able to show/filter current data
   if (isElement && !isEqual(elementNode, elRef.current)) {
     elRef.current = elementNode;
-    setFormData(elementNode.data || {});
+    setFormData({
+      footnote: {
+        ...elementNode.data,
+        label: elementNode.data.footnote,
+        value: elementNode.data.footnote,
+      },
+    });
   } else if (!isElement) {
     elRef.current = null;
   }
 
   const saveDataToEditor = React.useCallback(
     (formData) => {
-      if (hasValue(formData)) {
-        insertElement(editor, formData);
+      if (hasValue(formData.footnote)) {
+        insertElement(editor, formData.footnote);
       } else {
         unwrapElement(editor);
       }
@@ -111,14 +145,12 @@ const FootnoteEditor = (props) => {
             icon={<VoltoIcon size="24px" name={briefcaseSVG} />}
             onChangeField={(value) => {
               if (!onChangeValues) {
-                return setFormData({
-                  ...formData,
-                  ...value,
-                });
+                return setFormData(value);
               }
               return onChangeValues('footnote', value, formData, setFormData);
             }}
             formData={formData}
+            dataBoss={formData}
             source={filteredBlocks}
             headerActions={
               <>
@@ -126,7 +158,7 @@ const FootnoteEditor = (props) => {
                   onClick={() => {
                     saveDataToEditor(formData);
                     dispatch(
-                      setPluginOptions(pluginId, {
+                      setPluginOptions(pid, {
                         show_sidebar_editor: false,
                       }),
                     );
@@ -139,7 +171,7 @@ const FootnoteEditor = (props) => {
                   onClick={() => {
                     checkForCancel();
                     dispatch(
-                      setPluginOptions(pluginId, {
+                      setPluginOptions(pid, {
                         show_sidebar_editor: false,
                       }),
                     );

package/src/editor/MultiSelectSearchWidget.jsx

@@ -0,0 +1,150 @@
+/**
+ * ArrayWidget component.
+ * @module components/manage/Widgets/ArrayWidget
+ */
+
+import React, { useState } from 'react';
+import { defineMessages } from 'react-intl';
+import {
+  Option,
+  DropdownIndicator,
+  selectTheme,
+  customSelectStyles,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
+import { escapeRegExp, filter } from 'lodash';
+import { nanoid } from 'volto-slate/utils';
+
+import { FormFieldWrapper } from '@plone/volto/components';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+const messages = defineMessages({
+  select: {
+    id: 'Select…',
+    defaultMessage: 'Select…',
+  },
+  no_options: {
+    id: 'No options',
+    defaultMessage: 'No options',
+  },
+});
+
+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] : [],
+    );
+
+    /**
+     * evaluate on Regex to filter results
+     * @param {Object} e - event
+     * @param {Object} data
+     */
+    const loadOptions = (search) => {
+      const re = new RegExp(escapeRegExp(search), 'i');
+      const isMatch = (result) => re.test(result.value);
+      const resultsFiltered = filter(props.choices, isMatch);
+
+      return new Promise((resolve, reject) => {
+        resolve(resultsFiltered);
+      });
+    };
+
+    /**
+     * If the list is empty or the first is not parent, return true
+     * @param {Object[]} selectedOption list of objects - footnotes
+     * @returns {boolean}
+     */
+    const isParetFootnoteRemoved = (selectedOption) =>
+      !selectedOption[0] || selectedOption[0].value !== parentFootnote.value;
+
+    /**
+     * replace all parentFootnote data except uid, with the first from the list
+     * @param {Object[]} selectedOption list of objects - footnotes
+     * @returns {Object}
+     */
+    const setParentFootnoteFromExtra = (selectedOption) => {
+      const { footnote, label, value } = selectedOption[0] || [];
+
+      return {
+        ...parentFootnote,
+        footnote: footnote || selectedOption[0]?.value,
+        label,
+        value,
+        extra: selectedOption.slice(1),
+      };
+    };
+
+    /**
+     * Will make the footnotes object, that will be saved as first from selectedOption
+     * the rest will be added to extra
+     * @param {*} selectedOption
+     * @returns
+     */
+    const setFootnoteFromSelection = (selectedOption) => {
+      const extra = selectedOption.slice(1).map((item) => {
+        const obj = {
+          uid: nanoid(5),
+          ...item,
+          footnote: item.value,
+        };
+
+        const { __isNew__: remove, ...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).
+     * @returns {undefined}
+     */
+    const handleChange = (selectedOption) => {
+      setSelectedOption(selectedOption);
+
+      // manage case if parent footnotes (first from the options) was removed
+      const resultSelected = isParetFootnoteRemoved(selectedOption)
+        ? setParentFootnoteFromExtra(selectedOption)
+        : setFootnoteFromSelection(selectedOption);
+
+      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
+          isDisabled={props.isDisabled}
+          className="react-select-container"
+          classNamePrefix="react-select"
+          defaultOptions={defaultOptions}
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{ DropdownIndicator, Option }}
+          isMulti
+          options={defaultOptions}
+          value={selectedOption || []}
+          loadOptions={loadOptions}
+          onChange={handleChange}
+          placeholder={props.intl.formatMessage(messages.select)}
+          noOptionsMessage={() => props.intl.formatMessage(messages.no_options)}
+        />
+      </FormFieldWrapper>
+    );
+  },
+);
+
+export default MultiSelectSearchWidget;

package/src/editor/extensions.js

@@ -11,6 +11,7 @@ export const withFootnote = (editor) => {
 
   editor.normalizeNode = (entry) => {
     const [node, path] = entry;
+
     if (node.type === FOOTNOTE && !node.data?.uid) {
       Transforms.setNodes(
         editor,
@@ -34,12 +35,10 @@ export const withFootnote = (editor) => {
 // this will be usefull when copy/pase items have the same uid
 export const withBeforeInsertFragment = (editor) => {
   const { beforeInsertFragment } = editor;
-
   editor.beforeInsertFragment = (parsed) => {
     if (parsed?.[0]?.children?.[0]?.data?.uid) {
       parsed[0].children[0].data.uid = nanoid(5);
     }
-
     return beforeInsertFragment ? beforeInsertFragment(parsed) : parsed;
   };
 

package/src/editor/render.jsx

@@ -1,48 +1,149 @@
 import React, { useEffect, useState } from 'react';
-import { Popup } from 'semantic-ui-react';
+import { Popup, List } from 'semantic-ui-react';
 import { useEditorContext } from 'volto-slate/hooks';
-import { getAllBlocks } from 'volto-slate/utils';
+import { getAllBlocksAndSlateFields } from '@eeacms/volto-slate-footnote/editor/utils';
 import { makeFootnoteListOfUniqueItems } from './utils';
 
+/**
+ * Removes '<?xml version="1.0"?>' from footnote
+ * @param {string} footnote
+ * @returns {string} formatted footnote
+ */
 const makeFootnote = (footnote) => {
   const free = footnote ? footnote.replace('<?xml version="1.0"?>', '') : '';
 
   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;
   const { uid, zoteroId } = data;
   const editor = useEditorContext();
-  const [citationIndice, setCitationIndice] = useState(null);
-  const [citationRefId, setCitationRefId] = useState(null);
+  const [citationIndice, setCitationIndice] = useState(null); // list of indices to reference
+  const [citationRefId, setCitationRefId] = useState(null); // indice of element to be referenced
 
   useEffect(() => {
-    const blockProps = editor ? editor.getBlockProps() : null;
+    const blockProps = editor?.getBlockProps ? editor.getBlockProps() : null;
     const metadata = blockProps
       ? blockProps.metadata || blockProps.properties
-      : extras.metadata;
-    const blocks = getAllBlocks(metadata, []);
+      : extras?.metadata || {};
+    const blocks = getAllBlocksAndSlateFields(metadata);
     const notesObjResult = makeFootnoteListOfUniqueItems(blocks);
 
-    const indice = zoteroId
-      ? Object.keys(notesObjResult).indexOf(zoteroId) + 1
-      : notesObjResult[data.uid]
-      ? Object.keys(notesObjResult).indexOf(data.uid) + 1
-      : Object.keys(notesObjResult).indexOf(
-          Object.keys(notesObjResult).find(
-            (noteKey) =>
-              notesObjResult[noteKey].refs &&
-              notesObjResult[noteKey].refs[data.uid],
-          ),
-        ) + 1;
-
-    const findReferenceId = Object.keys(notesObjResult).find(
-      (noteKey) =>
-        notesObjResult[noteKey].uid === uid ||
-        (notesObjResult[noteKey].refs && notesObjResult[noteKey].refs[uid]),
-    );
+    // will cosider zotero citations and footnote
+    // notesObjResult contains all zotero/footnote as unique, and contain refs for other zotero/footnote
+    const indice = zoteroId // ZOTERO
+      ? data.extra
+        ? [
+            `[${Object.keys(notesObjResult).indexOf(zoteroId) + 1}]`, // parent footnote
+            ...data.extra.map(
+              // citations from extra
+              (zoteroObj, index) =>
+                // all zotero citation are indexed by zoteroId in notesObjResult
+                `[${
+                  Object.keys(notesObjResult).indexOf(zoteroObj.zoteroId) + 1
+                }]`,
+            ),
+          ].join('')
+        : // 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
+        }]`;
+    const findReferenceId =
+      // search within parent citations first, otherwise the uid might be inside a refs obj that comes before
+      Object.keys(notesObjResult).find(
+        (noteKey) => notesObjResult[noteKey].uid === uid,
+      ) ||
+      // if not found in parent, search in refs, it might be a footnote references multiple times
+      Object.keys(notesObjResult).find(
+        (noteKey) =>
+          notesObjResult[noteKey].uid === uid ||
+          (notesObjResult[noteKey].refs && notesObjResult[noteKey].refs[uid]),
+      );
 
     setCitationIndice(indice);
     setCitationRefId(findReferenceId);
@@ -51,11 +152,7 @@ export const FootnoteElement = (props) => {
   return (
     <>
       {mode === 'view' ? (
-        <a
-          href={`#footnote-${citationRefId}`}
-          id={`ref-${uid}`}
-          aria-describedby="footnote-label"
-        >
+        <span id={`ref-${uid}`} aria-describedby="footnote-label">
           <Popup
             position="bottom left"
             trigger={
@@ -68,16 +165,57 @@ export const FootnoteElement = (props) => {
                 {children}
               </span>
             }
+            hoverable
           >
             <Popup.Content>
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: makeFootnote(data.footnote),
-                }}
-              />{' '}
+              <List divided relaxed selection>
+                <List.Item
+                  as="a"
+                  href={`#footnote-${citationRefId}`}
+                  onClick={() =>
+                    openAccordionIfContainsFootnoteReference(
+                      `#footnote-${citationRefId}`,
+                    )
+                  }
+                  key={`#footnote-${citationRefId}`}
+                >
+                  <List.Content>
+                    <List.Description>
+                      <div
+                        dangerouslySetInnerHTML={{
+                          __html: makeFootnote(data.footnote),
+                        }}
+                      />{' '}
+                    </List.Description>
+                  </List.Content>
+                </List.Item>
+                {data.extra &&
+                  data.extra.map((item) => (
+                    <List.Item
+                      as="a"
+                      href={`#footnote-${item.zoteroId || item.uid}`}
+                      onClick={() =>
+                        openAccordionIfContainsFootnoteReference(
+                          `#footnote-${item.zoteroId || item.uid}`,
+                        )
+                      }
+                      key={`#footnote-${item.zoteroId || item.uid}`}
+                    >
+                      <List.Content>
+                        <List.Description>
+                          <div
+                            dangerouslySetInnerHTML={{
+                              __html: makeFootnote(item.footnote),
+                            }}
+                          />{' '}
+                        </List.Description>
+                      </List.Content>
+                    </List.Item>
+                  ))}
+              </List>
             </Popup.Content>
           </Popup>
-        </a>
+        </span>
       ) : (
         <Popup
           position="bottom left"
@@ -91,13 +229,54 @@ export const FootnoteElement = (props) => {
               {children}
             </span>
           }
+          hoverable
         >
           <Popup.Content>
-            <div
-              dangerouslySetInnerHTML={{
-                __html: makeFootnote(data.footnote),
-              }}
-            />{' '}
+            <List divided relaxed selection>
+              <List.Item
+                as="a"
+                href={`#footnote-${citationRefId}`}
+                onClick={() =>
+                  openAccordionIfContainsFootnoteReference(
+                    `#footnote-${citationRefId}`,
+                  )
+                }
+                key={`#footnote-${citationRefId}`}
+              >
+                <List.Content>
+                  <List.Description>
+                    <div
+                      dangerouslySetInnerHTML={{
+                        __html: makeFootnote(data.footnote),
+                      }}
+                    />{' '}
+                  </List.Description>
+                </List.Content>
+              </List.Item>
+              {data.extra &&
+                data.extra.map((item) => (
+                  <List.Item
+                    as="a"
+                    href={`#footnote-${item.zoteroId || item.uid}`}
+                    onClick={() =>
+                      openAccordionIfContainsFootnoteReference(
+                        `#footnote-${item.zoteroId || item.uid}`,
+                      )
+                    }
+                    key={`#footnote-${item.zoteroId || item.uid}`}
+                  >
+                    <List.Content>
+                      <List.Description>
+                        <div
+                          dangerouslySetInnerHTML={{
+                            __html: makeFootnote(item.footnote),
+                          }}
+                        />{' '}
+                      </List.Description>
+                    </List.Content>
+                  </List.Item>
+                ))}
+            </List>
           </Popup.Content>
         </Popup>
       )}

package/src/editor/styles.less

@@ -4,8 +4,8 @@ body {
   counter-reset: footnotes;
 }
 
-a[aria-describedby='footnote-label'] {
-  color: inherit;
+span[aria-describedby='footnote-label'] {
+  color: #004b87;
   cursor: default;
   outline: none;
   text-decoration: none;
@@ -18,30 +18,6 @@ a[aria-describedby='footnote-label'] {
   }
 }
 
-.citation-indice {
-  color: inherit;
-  counter-increment: footnotes;
-  cursor: default;
-  outline: none;
-  text-decoration: none;
-
-  &::after {
-    margin-left: 2px;
-    color: blue;
-    content: '[' counter(footnotes) ']';
-    cursor: pointer;
-    font-size: 0.8em;
-    text-decoration: underline;
-  }
-
-  &:focus {
-    &::after {
-      outline: thin dotted;
-      outline-offset: 2px;
-    }
-  }
-}
-
 .footnote-edit-node {
   padding: 0px 4px;
   background-color: #e6f3ff;
@@ -51,7 +27,7 @@ a[aria-describedby='footnote-label'] {
 .footnote-edit-node::after,
 .citation-item::after {
   color: #0645ad;
-  content: ' [' attr(data-footnote-indice) ']';
+  content: attr(data-footnote-indice);
   font-size: 75%;
   vertical-align: super;
 }