@eeacms/volto-slate-footnote 7.0.1 → 7.1.1

package/CHANGELOG.md

@@ -4,6 +4,17 @@ 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).
 
+### [7.1.1](https://github.com/eea/volto-slate-footnote/compare/7.1.0...7.1.1) - 16 September 2024
+
+### [7.1.0](https://github.com/eea/volto-slate-footnote/compare/7.0.1...7.1.0) - 13 September 2024
+
+#### :rocket: New Features
+
+- feat: autodetect links and use universal link - refs #274052 [dobri1408 - [`9c13101`](https://github.com/eea/volto-slate-footnote/commit/9c13101b62b1df150e1b3dbb93807df60a074ad5)]
+
+#### :hammer_and_wrench: Others
+
+- Release 7.1.0 [alin - [`c15afb0`](https://github.com/eea/volto-slate-footnote/commit/c15afb0be79ba9c4e3a46e3c190a41db468e88cd)]
 ### [7.0.1](https://github.com/eea/volto-slate-footnote/compare/7.0.0...7.0.1) - 23 August 2024
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/Blocks/Footnote/FootnotesBlockView.jsx

@@ -3,13 +3,13 @@ import {
   openAccordionOrTabIfContainsFootnoteReference,
   getAllBlocksAndSlateFields,
   makeFootnoteListOfUniqueItems,
-  makeFootnote,
 } from '@eeacms/volto-slate-footnote/editor/utils';
 import './less/public.less';
 
 import { UniversalLink } from '@plone/volto/components';
 
 const alphabet = 'abcdefghijklmnopqrstuvwxyz';
+const urlRegex = /https?:\/\/[^\s]+/g;
 
 /**
  * @summary The React component that displays the list of footnotes inserted
@@ -19,6 +19,7 @@ const alphabet = 'abcdefghijklmnopqrstuvwxyz';
  * @param {Object} props Contains the properties `data` and `properties` as
  * received from the Volto form.
  */
+
 const FootnotesBlockView = (props) => {
   const { data, properties, tabData, content } = props;
   const { title, global, placeholder = 'Footnotes' } = data;
@@ -75,6 +76,35 @@ const FootnotesBlockView = (props) => {
     startList = citationIndice;
   }
 
+  const renderTextWithLinks = (text) => {
+    if (!text) return null;
+    const parts = text.split(urlRegex);
+    const links = text.match(urlRegex);
+    let result = [];
+
+    parts.forEach((part, index) => {
+      result.push(
+        <div
+          dangerouslySetInnerHTML={{
+            __html: part,
+          }}
+        />,
+      );
+
+      if (links && links[index]) {
+        result.push(
+          <UniversalLink
+            key={`link-${index}`}
+            href={links[index]}
+            openLinkInNewTab={false}
+          >
+            {links[index]}
+          </UniversalLink>,
+        );
+      }
+    });
+    return result;
+  };
   return (
     <div className="footnotes-listing-block">
       <h3 title={placeholder}>{title}</h3>
@@ -85,16 +115,19 @@ const FootnotesBlockView = (props) => {
             const { uid, footnote, zoteroId, parentUid } = note;
             const { refs } = note;
             const refsList = refs ? Object.keys(refs) : null;
+
+            // const history = createBrowserHistory();
+            // const api = new Api();
+            // const store = configureStore(window.__data, history, api);
+            const footnoteText = !footnote
+              ? ''
+              : footnote.replace('<?xml version="1.0"?>', '');
             return (
               <li
                 key={`footnote-${zoteroId || uid}`}
                 id={`footnote-${zoteroId || uid}`}
               >
-                <div
-                  dangerouslySetInnerHTML={{
-                    __html: makeFootnote(footnote),
-                  }}
-                />
+                <div>{renderTextWithLinks(footnoteText)}</div>
                 {refsList ? (
                   <>
                     {/** some footnotes are never parent so we need the parent to reference */}

package/src/editor/render.jsx

@@ -15,9 +15,8 @@ import { UniversalLink } from '@plone/volto/components';
  * @param {string} footnote
  * @returns {string} formatted footnote
  */
-const makeFootnote = (footnote) => {
-  return footnote ? footnote.replace('<?xml version="1.0"?>', '') : '';
-};
+
+const urlRegex = /https?:\/\/[^\s]+/g;
 
 export const FootnoteElement = (props) => {
   const { attributes, children, element, mode, extras } = props;
@@ -37,7 +36,7 @@ export const FootnoteElement = (props) => {
   const notesObjResult = isEmpty(metadata)
     ? makeFootnoteListOfUniqueItems(storeBlocks)
     : makeFootnoteListOfUniqueItems(blocks);
-  // will cosider zotero citations and footnote
+  // will consider zotero citations and footnote
   // notesObjResult contains all zotero/footnote as unique, and contain refs for other zotero/footnote
   const indiceIfZoteroId = data.extra
     ? [
@@ -52,6 +51,35 @@ export const FootnoteElement = (props) => {
     : // no extra citations (no multiples)
       `[${Object.keys(notesObjResult).indexOf(zoteroId) + 1}]`;
 
+  const renderTextWithLinks = (text) => {
+    if (!text) return null;
+    const parts = text.split(urlRegex);
+    const links = text.match(urlRegex);
+    let result = [];
+
+    parts.forEach((part, index) => {
+      result.push(
+        <div
+          dangerouslySetInnerHTML={{
+            __html: part,
+          }}
+        />,
+      );
+
+      if (links && links[index]) {
+        result.push(
+          <UniversalLink
+            key={`link-${index}`}
+            href={links[index]}
+            openLinkInNewTab={false}
+          >
+            {links[index]}
+          </UniversalLink>,
+        );
+      }
+    });
+    return result;
+  };
   const citationIndice = zoteroId // ZOTERO
     ? indiceIfZoteroId
     : // FOOTNOTES
@@ -76,13 +104,17 @@ export const FootnoteElement = (props) => {
     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
+    // if not found in parent, search in refs, it might be a footnote referenced multiple times
     Object.keys(notesObjResult).find(
       (noteKey) =>
         notesObjResult[noteKey].uid === uid ||
         (notesObjResult[noteKey].refs && notesObjResult[noteKey].refs[uid]),
     );
 
+  const footnoteText = !data.footnote
+    ? ''
+    : data.footnote.replace('<?xml version="1.0"?>', '');
+
   return (
     <>
       {mode === 'view' ? (
@@ -109,7 +141,6 @@ export const FootnoteElement = (props) => {
             <Popup.Content>
               <List divided relaxed selection>
                 <List.Item
-                  as={UniversalLink}
                   href={`#footnote-${citationRefId}`}
                   onClick={() =>
                     openAccordionOrTabIfContainsFootnoteReference(
@@ -120,37 +151,34 @@ export const FootnoteElement = (props) => {
                 >
                   <List.Content>
                     <List.Description>
-                      <div
-                        dangerouslySetInnerHTML={{
-                          __html: makeFootnote(data.footnote),
-                        }}
-                      />{' '}
+                      {renderTextWithLinks(footnoteText)}
                     </List.Description>
                   </List.Content>
                 </List.Item>
                 {data.extra &&
-                  data.extra.map((item) => (
-                    <List.Item
-                      as={UniversalLink}
-                      href={`#footnote-${item.zoteroId || item.uid}`}
-                      onClick={() =>
-                        openAccordionOrTabIfContainsFootnoteReference(
-                          `#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>
-                  ))}
+                  data.extra.map((item) => {
+                    const footnoteText = !item.footnote
+                      ? ''
+                      : item.footnote.replace('<?xml version="1.0"?>', '');
+
+                    return (
+                      <List.Item
+                        href={`#footnote-${item.zoteroId || item.uid}`}
+                        onClick={() =>
+                          openAccordionOrTabIfContainsFootnoteReference(
+                            `#footnote-${item.zoteroId || item.uid}`,
+                          )
+                        }
+                        key={`#footnote-${item.zoteroId || item.uid}`}
+                      >
+                        <List.Content>
+                          <List.Description>
+                            {renderTextWithLinks(footnoteText)}
+                          </List.Description>
+                        </List.Content>
+                      </List.Item>
+                    );
+                  })}
               </List>
             </Popup.Content>
           </Popup>
@@ -173,7 +201,6 @@ export const FootnoteElement = (props) => {
           <Popup.Content>
             <List divided relaxed selection>
               <List.Item
-                as={UniversalLink}
                 href={`#footnote-${citationRefId}`}
                 onClick={() =>
                   openAccordionOrTabIfContainsFootnoteReference(
@@ -184,18 +211,13 @@ export const FootnoteElement = (props) => {
               >
                 <List.Content>
                   <List.Description>
-                    <div
-                      dangerouslySetInnerHTML={{
-                        __html: makeFootnote(data.footnote),
-                      }}
-                    />{' '}
+                    {renderTextWithLinks(footnoteText)}
                   </List.Description>
                 </List.Content>
               </List.Item>
               {data.extra &&
                 data.extra.map((item) => (
                   <List.Item
-                    as={UniversalLink}
                     href={`#footnote-${item.zoteroId || item.uid}`}
                     onClick={() =>
                       openAccordionOrTabIfContainsFootnoteReference(
@@ -206,11 +228,7 @@ export const FootnoteElement = (props) => {
                   >
                     <List.Content>
                       <List.Description>
-                        <div
-                          dangerouslySetInnerHTML={{
-                            __html: makeFootnote(item.footnote),
-                          }}
-                        />{' '}
+                        {renderTextWithLinks(item.footnote)}
                       </List.Description>
                     </List.Content>
                   </List.Item>

package/src/editor/utils.js

@@ -1,15 +1,6 @@
 import config from '@plone/volto/registry';
 import { Node } from 'slate';
 import { getAllBlocks } from '@plone/volto-slate/utils';
-
-/**
- * remove <?xml version="1.0"?> from the string
- * @param {*} footnote - xml format
- * @returns string
- */
-export const makeFootnote = (footnote) => {
-  return footnote ? footnote.replace('<?xml version="1.0"?>', '') : '';
-};
 /**
  * retrive all slate children of nested objects
  * @param {object} path - the keys that we want to extract the slate children from

package/src/editor/utils.test.js

@@ -1,5 +1,4 @@
 import {
-  makeFootnote,
   openAccordionOrTabIfContainsFootnoteReference,
   getAllBlocksAndSlateFields,
 } from './utils';
@@ -9,19 +8,6 @@ jest.mock('@plone/volto-slate/utils', () => ({
   getAllBlocks: jest.fn(),
 }));
 
-describe('makeFootnote', () => {
-  it('should remove xml version string from footnote', () => {
-    const xmlString = '<?xml version="1.0"?>Test text';
-    const expectedResult = 'Test text';
-    expect(makeFootnote(xmlString)).toEqual(expectedResult);
-  });
-
-  it('should return empty string when footnote is null or undefined', () => {
-    expect(makeFootnote(null)).toEqual('');
-    expect(makeFootnote(undefined)).toEqual('');
-  });
-});
-
 describe('openAccordionOrTabIfContainsFootnoteReference', () => {
   it('should open accordion if it contains footnote reference', () => {
     document.body.innerHTML = `