@eeacms/volto-slate-footnote 7.2.0 → 7.2.1

package/CHANGELOG.md

@@ -4,6 +4,15 @@ 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.2.1](https://github.com/eea/volto-slate-footnote/compare/7.2.0...7.2.1) - 30 January 2025
+
+#### :bug: Bug Fixes
+
+- fix: Improve the algorithm of link detection and html insertion to remove bugs - refs 282898 [dobri1408 - [`4e03b60`](https://github.com/eea/volto-slate-footnote/commit/4e03b6003df6e1fae89343bade9fc35425fb7de9)]
+
+#### :hammer_and_wrench: Others
+
+- i18n: Add german translations [Valentin Dumitru - [`aedee6f`](https://github.com/eea/volto-slate-footnote/commit/aedee6fab827de485137e703854f98d8a29b45e9)]
 ### [7.2.0](https://github.com/eea/volto-slate-footnote/compare/7.1.1...7.2.0) - 28 November 2024
 
 ### [7.1.1](https://github.com/eea/volto-slate-footnote/compare/7.1.0...7.1.1) - 16 September 2024

package/locales/de/LC_MESSAGES/volto.po

@@ -11,22 +11,57 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#. Default: "Edit footnote"
 #: editor/index
-# defaultMessage: Edit footnote
 msgid "Edit footnote"
-msgstr ""
+msgstr "Fußnote bearbeiten"
+
+#. Default: "Footnotes"
+#: index
+msgid "Footnotes"
+msgstr "Fußnoten"
 
+#. Default: "No options"
 #: editor/MultiSelectSearchWidget
-# defaultMessage: No options
 msgid "No options"
-msgstr ""
+msgstr "Keine Optionen"
 
+#. Default: "Remove footnote"
 #: editor/index
-# defaultMessage: Remove footnote
 msgid "Remove footnote"
-msgstr ""
+msgstr "Fußnote entfernen"
 
+#. Default: "Select…"
 #: editor/MultiSelectSearchWidget
-# defaultMessage: Select…
 msgid "Select…"
-msgstr ""
+msgstr "Auswählen..."
+
+#. Default: "Block title"
+#: Blocks/Footnote/schema
+msgid "blockTitle"
+msgstr "Blocktitel"
+
+#. Default: "Friendly name to be displayed as block title"
+#: Blocks/Footnote/schema
+msgid "blockTitleDescription"
+msgstr "Name, der als Blocktitel angezeigt werden soll"
+
+#. Default: "Default"
+#: Blocks/Footnote/schema
+msgid "default"
+msgstr "Standard"
+
+#. Default: "Entire document"
+#: Blocks/Footnote/schema
+msgid "entireDocument"
+msgstr "Ganzes Dokument"
+
+#. Default: "Lookup citation references on the entire document"
+#: Blocks/Footnote/schema
+msgid "entireDocumentDescription"
+msgstr "Nachschlagen von Zitierangaben im gesamten Dokument"
+
+#. Default: "Footnote block"
+#: Blocks/Footnote/schema
+msgid "footnoteBlock"
+msgstr "Fußnoten-Block"

package/locales/en/LC_MESSAGES/volto.po

@@ -11,22 +11,57 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#. Default: "Edit footnote"
 #: editor/index
-# defaultMessage: Edit footnote
 msgid "Edit footnote"
 msgstr ""
 
+#. Default: "Footnotes"
+#: index
+msgid "Footnotes"
+msgstr ""
+
+#. Default: "No options"
 #: editor/MultiSelectSearchWidget
-# defaultMessage: No options
 msgid "No options"
 msgstr ""
 
+#. Default: "Remove footnote"
 #: editor/index
-# defaultMessage: Remove footnote
 msgid "Remove footnote"
 msgstr ""
 
+#. Default: "Select…"
 #: editor/MultiSelectSearchWidget
-# defaultMessage: Select…
 msgid "Select…"
 msgstr ""
+
+#. Default: "Block title"
+#: Blocks/Footnote/schema
+msgid "blockTitle"
+msgstr ""
+
+#. Default: "Friendly name to be displayed as block title"
+#: Blocks/Footnote/schema
+msgid "blockTitleDescription"
+msgstr ""
+
+#. Default: "Default"
+#: Blocks/Footnote/schema
+msgid "default"
+msgstr ""
+
+#. Default: "Entire document"
+#: Blocks/Footnote/schema
+msgid "entireDocument"
+msgstr ""
+
+#. Default: "Lookup citation references on the entire document"
+#: Blocks/Footnote/schema
+msgid "entireDocumentDescription"
+msgstr ""
+
+#. Default: "Footnote block"
+#: Blocks/Footnote/schema
+msgid "footnoteBlock"
+msgstr ""

package/locales/it/LC_MESSAGES/volto.po

@@ -11,22 +11,57 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#. Default: "Edit footnote"
 #: editor/index
-# defaultMessage: Edit footnote
 msgid "Edit footnote"
 msgstr ""
 
+#. Default: "Footnotes"
+#: index
+msgid "Footnotes"
+msgstr ""
+
+#. Default: "No options"
 #: editor/MultiSelectSearchWidget
-# defaultMessage: No options
 msgid "No options"
 msgstr ""
 
+#. Default: "Remove footnote"
 #: editor/index
-# defaultMessage: Remove footnote
 msgid "Remove footnote"
 msgstr ""
 
+#. Default: "Select…"
 #: editor/MultiSelectSearchWidget
-# defaultMessage: Select…
 msgid "Select…"
 msgstr ""
+
+#. Default: "Block title"
+#: Blocks/Footnote/schema
+msgid "blockTitle"
+msgstr ""
+
+#. Default: "Friendly name to be displayed as block title"
+#: Blocks/Footnote/schema
+msgid "blockTitleDescription"
+msgstr ""
+
+#. Default: "Default"
+#: Blocks/Footnote/schema
+msgid "default"
+msgstr ""
+
+#. Default: "Entire document"
+#: Blocks/Footnote/schema
+msgid "entireDocument"
+msgstr ""
+
+#. Default: "Lookup citation references on the entire document"
+#: Blocks/Footnote/schema
+msgid "entireDocumentDescription"
+msgstr ""
+
+#. Default: "Footnote block"
+#: Blocks/Footnote/schema
+msgid "footnoteBlock"
+msgstr ""

package/locales/ro/LC_MESSAGES/volto.po

@@ -11,22 +11,57 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#. Default: "Edit footnote"
 #: editor/index
-# defaultMessage: Edit footnote
 msgid "Edit footnote"
 msgstr ""
 
+#. Default: "Footnotes"
+#: index
+msgid "Footnotes"
+msgstr ""
+
+#. Default: "No options"
 #: editor/MultiSelectSearchWidget
-# defaultMessage: No options
 msgid "No options"
 msgstr ""
 
+#. Default: "Remove footnote"
 #: editor/index
-# defaultMessage: Remove footnote
 msgid "Remove footnote"
 msgstr ""
 
+#. Default: "Select…"
 #: editor/MultiSelectSearchWidget
-# defaultMessage: Select…
 msgid "Select…"
 msgstr ""
+
+#. Default: "Block title"
+#: Blocks/Footnote/schema
+msgid "blockTitle"
+msgstr ""
+
+#. Default: "Friendly name to be displayed as block title"
+#: Blocks/Footnote/schema
+msgid "blockTitleDescription"
+msgstr ""
+
+#. Default: "Default"
+#: Blocks/Footnote/schema
+msgid "default"
+msgstr ""
+
+#. Default: "Entire document"
+#: Blocks/Footnote/schema
+msgid "entireDocument"
+msgstr ""
+
+#. Default: "Lookup citation references on the entire document"
+#: Blocks/Footnote/schema
+msgid "entireDocumentDescription"
+msgstr ""
+
+#. Default: "Footnote block"
+#: Blocks/Footnote/schema
+msgid "footnoteBlock"
+msgstr ""

package/locales/volto.pot

@@ -1,34 +1,69 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-08-29T17:14:46.877Z\n"
+"POT-Creation-Date: 2025-01-14T11:22:56.136Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
-"MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=1; plural=0;\n"
+"MIME-Version: 1.0\n"
 "Language-Code: en\n"
 "Language-Name: English\n"
 "Preferred-Encodings: utf-8\n"
 "Domain: volto\n"
 
+#. Default: "Edit footnote"
 #: editor/index
-# defaultMessage: Edit footnote
 msgid "Edit footnote"
 msgstr ""
 
+#. Default: "Footnotes"
+#: index
+msgid "Footnotes"
+msgstr ""
+
+#. Default: "No options"
 #: editor/MultiSelectSearchWidget
-# defaultMessage: No options
 msgid "No options"
 msgstr ""
 
+#. Default: "Remove footnote"
 #: editor/index
-# defaultMessage: Remove footnote
 msgid "Remove footnote"
 msgstr ""
 
+#. Default: "Select…"
 #: editor/MultiSelectSearchWidget
-# defaultMessage: Select…
 msgid "Select…"
 msgstr ""
+
+#. Default: "Block title"
+#: Blocks/Footnote/schema
+msgid "blockTitle"
+msgstr ""
+
+#. Default: "Friendly name to be displayed as block title"
+#: Blocks/Footnote/schema
+msgid "blockTitleDescription"
+msgstr ""
+
+#. Default: "Default"
+#: Blocks/Footnote/schema
+msgid "default"
+msgstr ""
+
+#. Default: "Entire document"
+#: Blocks/Footnote/schema
+msgid "entireDocument"
+msgstr ""
+
+#. Default: "Lookup citation references on the entire document"
+#: Blocks/Footnote/schema
+msgid "entireDocumentDescription"
+msgstr ""
+
+#. Default: "Footnote block"
+#: Blocks/Footnote/schema
+msgid "footnoteBlock"
+msgstr ""

package/package.json

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

package/src/Blocks/Footnote/FootnotesBlockEdit.jsx

@@ -18,6 +18,8 @@ const FootnotesBlockEdit = (props) => {
     instructions = props.formDescription;
   }
 
+  const blockSchema = schema(props.intl);
+
   return (
     <>
       <FootnotesBlockView {...props} properties={properties} />
@@ -29,8 +31,8 @@ const FootnotesBlockEdit = (props) => {
         )}
         {!data?.readOnlySettings && (
           <InlineForm
-            schema={schema}
-            title={schema.title}
+            schema={blockSchema}
+            title={blockSchema.title}
             onChangeField={(id, value) => {
               onChangeBlock(block, {
                 ...data,

package/src/Blocks/Footnote/FootnotesBlockView.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { escapeRegExp } from 'lodash';
+
 import {
   openAccordionOrTabIfContainsFootnoteReference,
   getAllBlocksAndSlateFields,
@@ -8,10 +8,9 @@ import {
 import './less/public.less';
 
 import { UniversalLink } from '@plone/volto/components';
+import { renderTextWithLinks } from '../../editor/utils';
 
 const alphabet = 'abcdefghijklmnopqrstuvwxyz';
-const urlRegex =
-  /\b((http|https|ftp):\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(:\d+)?(\/[^\s]*)?\b/g;
 
 /**
  * @summary The React component that displays the list of footnotes inserted
@@ -78,47 +77,6 @@ const FootnotesBlockView = (props) => {
     startList = citationIndice;
   }
 
-  const renderTextWithLinks = (text) => {
-    if (!text) return null;
-    const links = text.match(urlRegex);
-    if (!links) {
-      return (
-        <div
-          dangerouslySetInnerHTML={{
-            __html: text,
-          }}
-        />
-      );
-    }
-    let result = [];
-    const parts = text.split(
-      new RegExp(`(${links.map((link) => escapeRegExp(link)).join('|')})`),
-    );
-    parts.forEach((part, index) => {
-      if (links.includes(part)) {
-        result.push(
-          <UniversalLink
-            key={`link-${index}`}
-            href={part}
-            openLinkInNewTab={false}
-          >
-            {part}
-          </UniversalLink>,
-        );
-        return;
-      }
-
-      result.push(
-        <span
-          dangerouslySetInnerHTML={{
-            __html: part,
-          }}
-        />,
-      );
-    });
-
-    return <div>{result}</div>;
-  };
   return (
     <div className="footnotes-listing-block">
       <h3 title={placeholder}>{title}</h3>
@@ -141,7 +99,7 @@ const FootnotesBlockView = (props) => {
                 key={`footnote-${zoteroId || uid}`}
                 id={`footnote-${zoteroId || uid}`}
               >
-                <div>{renderTextWithLinks(footnoteText)}</div>
+                <div>{renderTextWithLinks(footnoteText, zoteroId)}</div>
                 {refsList ? (
                   <>
                     {/** some footnotes are never parent so we need the parent to reference */}

package/src/Blocks/Footnote/FootnotesBlockView.test.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FootnotesBlockView from './FootnotesBlockView';
+
+jest.mock('@plone/volto/components', () => ({
+  UniversalLink: ({ children, href }) => <a href={href}>{children}</a>,
+}));
+
+jest.mock('@eeacms/volto-slate-footnote/editor/utils', () => ({
+  openAccordionOrTabIfContainsFootnoteReference: jest.fn(),
+  renderTextWithLinks: jest.fn(),
+  getAllBlocksAndSlateFields: jest.fn(() => [
+    { id: 'block1', footnote: 'Footnote with no link' },
+    { id: 'block2', footnote: 'Footnote with link http://example.com' },
+    { id: 'block3', footnote: 'Footnote with <b>HTML</b>' },
+  ]),
+  makeFootnoteListOfUniqueItems: jest.fn((blocks) => ({
+    note1: {
+      uid: '1',
+      footnote: 'First note with a reference',
+      zoteroId: 'zotero1',
+      refs: { ref1: 'ref1' },
+    },
+    note2: {
+      uid: '2',
+      footnote: 'Second note with multiple references',
+      zoteroId: null,
+      refs: { ref2: 'ref2', ref3: 'ref3' },
+    },
+    note3: {
+      uid: '3',
+      footnote: '<i>Note with HTML</i>',
+      zoteroId: 'zotero3',
+      refs: {},
+    },
+  })),
+}));
+
+describe('FootnotesBlockView', () => {
+  const propsVariations = [
+    {
+      description: 'renders with global metadata',
+      props: {
+        data: { title: 'Global Metadata', global: true, placeholder: 'Global' },
+        properties: { test: 'metadata' },
+        tabData: null,
+        content: null,
+        metadata: { test: 'metadata' },
+      },
+    },
+    {
+      description: 'renders with tabData',
+      props: {
+        data: { title: 'Tab Data', global: false, placeholder: 'Tab' },
+        properties: { test: 'tabProperties' },
+        tabData: { test: 'tabData' },
+        content: null,
+      },
+    },
+    {
+      description: 'renders with content',
+      props: {
+        data: { title: 'Content Data', global: false, placeholder: 'Content' },
+        properties: { test: 'contentProperties' },
+        tabData: null,
+        content: { test: 'contentData' },
+      },
+    },
+    {
+      description: 'renders with no metadata',
+      props: {
+        data: { title: 'No Metadata', global: false, placeholder: 'Default' },
+        properties: { test: 'defaultProperties' },
+        tabData: null,
+        content: null,
+      },
+    },
+  ];
+
+  test.each(propsVariations)('$description', ({ props }) => {
+    render(<FootnotesBlockView {...props} />);
+  });
+});

package/src/Blocks/Footnote/schema.js

@@ -1,23 +1,52 @@
-export const FootnoteBlockSchema = {
-  title: 'Footnotes block',
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  footnoteBlock: {
+    id: 'footnoteBlock',
+    defaultMessage: 'Footnote block',
+  },
+  default: {
+    id: 'default',
+    defaultMessage: 'Default',
+  },
+  blockTitle: {
+    id: 'blockTitle',
+    defaultMessage: 'Block title',
+  },
+  blockTitleDescription: {
+    id: 'blockTitleDescription',
+    defaultMessage: 'Friendly name to be displayed as block title',
+  },
+  entireDocument: {
+    id: 'entireDocument',
+    defaultMessage: 'Entire document',
+  },
+  entireDocumentDescription: {
+    id: 'entireDocumentDescription',
+    defaultMessage: 'Lookup citation references on the entire document',
+  },
+});
+
+export const FootnoteBlockSchema = (intl) => ({
+  title: intl.formatMessage(messages.footnoteBlock),
   fieldsets: [
     {
       id: 'default',
-      title: 'Default',
+      title: intl.formatMessage(messages.default),
       fields: ['title', 'global'],
     },
   ],
   properties: {
     title: {
-      title: 'Block title',
-      description: 'Friendly name to be displayed as block title',
+      title: intl.formatMessage(messages.blockTitle),
+      description: intl.formatMessage(messages.blockTitleDescription),
       type: 'string',
     },
     global: {
-      title: 'Entire document',
-      description: 'Lookup citation references on the entire document',
+      title: intl.formatMessage(messages.entireDocument),
+      description: intl.formatMessage(messages.entireDocumentDescription),
       type: 'boolean',
     },
   },
   required: [],
-};
+});

package/src/editor/render.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Popup, List } from 'semantic-ui-react';
 import { useEditorContext } from '@plone/volto-slate/hooks';
+
 import { getAllBlocksAndSlateFields } from '@eeacms/volto-slate-footnote/editor/utils';
 import {
   makeFootnoteListOfUniqueItems,
@@ -8,7 +9,9 @@ import {
 } from './utils';
 import { isEmpty } from 'lodash';
 import { useSelector } from 'react-redux';
-import { UniversalLink } from '@plone/volto/components';
+
+import { renderTextWithLinks } from './utils';
+import { useHistory } from 'react-router-dom';
 
 /**
  * Removes '<?xml version="1.0"?>' from footnote
@@ -16,14 +19,13 @@ import { UniversalLink } from '@plone/volto/components';
  * @returns {string} formatted footnote
  */
 
-const urlRegex = /https?:\/\/[^\s]+/g;
-
 export const FootnoteElement = (props) => {
   const { attributes, children, element, mode, extras } = props;
   const { data = {} } = element;
   const { uid, zoteroId } = data;
   const editor = useEditorContext();
   const ref = React.useRef();
+  const history = useHistory();
 
   const initialFormData = useSelector((state) => state?.content?.data || {});
   const blockProps = editor?.getBlockProps ? editor.getBlockProps() : null;
@@ -51,35 +53,6 @@ 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
@@ -142,16 +115,20 @@ export const FootnoteElement = (props) => {
               <List divided relaxed selection>
                 <List.Item
                   href={`#footnote-${citationRefId}`}
-                  onClick={() =>
+                  onClick={(e) => {
                     openAccordionOrTabIfContainsFootnoteReference(
                       `#footnote-${citationRefId}`,
-                    )
-                  }
+                    );
+                    if (e.target.tagName !== 'A') {
+                      e.preventDefault();
+                      history.push(`#footnote-${citationRefId}`);
+                    }
+                  }}
                   key={`#footnote-${citationRefId}`}
                 >
                   <List.Content>
                     <List.Description>
-                      {renderTextWithLinks(footnoteText)}
+                      {renderTextWithLinks(footnoteText, zoteroId)}
                     </List.Description>
                   </List.Content>
                 </List.Item>
@@ -164,16 +141,22 @@ export const FootnoteElement = (props) => {
                     return (
                       <List.Item
                         href={`#footnote-${item.zoteroId || item.uid}`}
-                        onClick={() =>
+                        onClick={(e) => {
                           openAccordionOrTabIfContainsFootnoteReference(
                             `#footnote-${item.zoteroId || item.uid}`,
-                          )
-                        }
+                          );
+                          if (e.target.tagName !== 'A') {
+                            e.preventDefault();
+                            history.push(
+                              `#footnote-${item.zoteroId || item.uid}`,
+                            );
+                          }
+                        }}
                         key={`#footnote-${item.zoteroId || item.uid}`}
                       >
                         <List.Content>
                           <List.Description>
-                            {renderTextWithLinks(footnoteText)}
+                            {renderTextWithLinks(footnoteText, item.zoteroId)}
                           </List.Description>
                         </List.Content>
                       </List.Item>
@@ -202,11 +185,15 @@ export const FootnoteElement = (props) => {
             <List divided relaxed selection>
               <List.Item
                 href={`#footnote-${citationRefId}`}
-                onClick={() =>
+                onClick={(e) => {
                   openAccordionOrTabIfContainsFootnoteReference(
                     `#footnote-${citationRefId}`,
-                  )
-                }
+                  );
+                  if (e.target.tagName !== 'A') {
+                    e.preventDefault();
+                    history.push(`#footnote-${citationRefId}`);
+                  }
+                }}
                 key={`#footnote-${citationRefId}`}
               >
                 <List.Content>
@@ -219,11 +206,15 @@ export const FootnoteElement = (props) => {
                 data.extra.map((item) => (
                   <List.Item
                     href={`#footnote-${item.zoteroId || item.uid}`}
-                    onClick={() =>
+                    onClick={(e) => {
                       openAccordionOrTabIfContainsFootnoteReference(
                         `#footnote-${item.zoteroId || item.uid}`,
-                      )
-                    }
+                      );
+                      if (e.target.tagName !== 'A') {
+                        e.preventDefault();
+                        history.push(`#footnote-${citationRefId}`);
+                      }
+                    }}
                     key={`#footnote-${item.zoteroId || item.uid}`}
                   >
                     <List.Content>

package/src/editor/utils.js

@@ -1,6 +1,11 @@
 import config from '@plone/volto/registry';
 import { Node } from 'slate';
 import { getAllBlocks } from '@plone/volto-slate/utils';
+import { escapeRegExp } from 'lodash';
+import { UniversalLink } from '@plone/volto/components';
+const urlRegex =
+  /\b((http|https|ftp):\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(:\d+)?(\/[^\s<>)]*)?(?=\s|$|<|>|\))/g;
+
 /**
  * retrive all slate children of nested objects
  * @param {object} path - the keys that we want to extract the slate children from
@@ -9,7 +14,7 @@ import { getAllBlocks } from '@plone/volto-slate/utils';
  * path:{items:'value'}
  * @returns string
  */
-const retriveValuesOfSlateFromNestedPath = (path, value) => {
+export const retriveValuesOfSlateFromNestedPath = (path, value) => {
   if (Array.isArray(value)) {
     let allSlateValue = [];
     value.forEach((element) => {
@@ -276,3 +281,72 @@ const iterateFootnoteObj = (notesObjResultTemp, node, parentUid) => {
     };
   }
 };
+
+export function isValidHTML(htmlString) {
+  if (
+    __CLIENT__ &&
+    typeof window !== 'undefined' &&
+    typeof DOMParser !== 'undefined'
+  ) {
+    // The environment is client-side, and DOMParser is available
+    const parser = new DOMParser();
+    const parsedDocument = parser.parseFromString(htmlString, 'text/html');
+    const errors = parsedDocument.querySelectorAll('parsererror');
+    return errors.length === 0;
+  }
+  return false;
+}
+
+export const renderTextWithLinks = (text, zoteroId) => {
+  if (!text) return null;
+
+  const links = text.match(urlRegex);
+  let isValid = false;
+  if (zoteroId && isValidHTML(text)) isValid = true;
+
+  if (!links) {
+    if (isValid)
+      return (
+        <span
+          dangerouslySetInnerHTML={{
+            __html: text,
+          }}
+        />
+      );
+    else return text;
+  }
+  let result = [];
+  const parts = text.split(
+    new RegExp(`(${links.map((link) => escapeRegExp(link)).join('|')})`),
+  );
+  parts.forEach((part, index) => {
+    if (links.includes(part) && zoteroId) {
+      result.push(`
+          <a key=link-${index} href=${part} rel="noopener">
+            ${part}
+          </a>`);
+      return;
+    } else if (links.includes(part)) {
+      result.push(
+        <UniversalLink
+          key={`link-${index}`}
+          href={part}
+          openLinkInNewTab={false}
+        >
+          {part}
+        </UniversalLink>,
+      );
+      return;
+    } else result.push(part);
+  });
+
+  if (isValid)
+    return (
+      <span
+        dangerouslySetInnerHTML={{
+          __html: result.reduce((acc, c) => acc + c, ''),
+        }}
+      />
+    );
+  else return <div>{result}</div>;
+};

package/src/editor/utils.test.js

@@ -1,6 +1,8 @@
 import {
   openAccordionOrTabIfContainsFootnoteReference,
   getAllBlocksAndSlateFields,
+  isValidHTML,
+  retriveValuesOfSlateFromNestedPath,
 } from './utils';
 import { getAllBlocks } from '@plone/volto-slate/utils';
 
@@ -8,6 +10,47 @@ jest.mock('@plone/volto-slate/utils', () => ({
   getAllBlocks: jest.fn(),
 }));
 
+describe('retriveValuesOfSlateFromNestedPath', () => {
+  test('should return values for a given string path in an object', () => {
+    const obj = { key: ['value1', 'value2'] };
+    expect(retriveValuesOfSlateFromNestedPath('key', obj)).toEqual([
+      'value1',
+      'value2',
+    ]);
+  });
+
+  test('should return an empty array when the path is not found', () => {
+    const obj = { key: [] };
+    expect(retriveValuesOfSlateFromNestedPath('key', obj)).toEqual([]);
+  });
+
+  test('should return values from an array of objects', () => {
+    const objArray = [{ key: ['value1'] }, { key: ['value2'] }];
+    expect(retriveValuesOfSlateFromNestedPath('key', objArray)).toEqual([
+      'value1',
+      'value2',
+    ]);
+  });
+
+  test('should handle nested object paths', () => {
+    const obj = { level1: { level2: ['value'] } };
+    expect(
+      retriveValuesOfSlateFromNestedPath({ level1: 'level2' }, obj),
+    ).toEqual(['value']);
+  });
+
+  test('should return an empty array for invalid inputs', () => {
+    expect(retriveValuesOfSlateFromNestedPath('key', null)).toEqual([]);
+    expect(retriveValuesOfSlateFromNestedPath('key', undefined)).toEqual([]);
+    expect(retriveValuesOfSlateFromNestedPath({}, {})).toEqual([]);
+  });
+
+  test('should return empty array if given an empty path object', () => {
+    expect(retriveValuesOfSlateFromNestedPath({}, { key: 'value' })).toEqual(
+      [],
+    );
+  });
+});
 describe('openAccordionOrTabIfContainsFootnoteReference', () => {
   it('should open accordion if it contains footnote reference', () => {
     document.body.innerHTML = `
@@ -197,3 +240,29 @@ describe('getAllBlocksAndSlateFields', () => {
     expect(result).toEqual(expected);
   });
 });
+
+describe('isValidHTML', () => {
+  beforeAll(() => {
+    global.DOMParser = class {
+      parseFromString(str, type) {
+        const doc = {
+          querySelectorAll: (selector) => {
+            if (selector === 'parsererror' && str.includes('<error>')) {
+              return [{}]; // Simulate an error
+            }
+            return [];
+          },
+        };
+        return doc;
+      }
+    };
+  });
+
+  test('returns true for valid HTML', () => {
+    expect(isValidHTML('<div>Hello</div>')).toBe(true);
+  });
+
+  test('returns false for invalid HTML', () => {
+    expect(isValidHTML('<error>Invalid HTML</error>')).toBe(false);
+  });
+});

package/src/index.js

@@ -6,6 +6,14 @@ import FootnotesBlockSchema from './Blocks/Footnote/FootnotesBlockSchema';
 import { FOOTNOTE } from './constants';
 import installFootnoteEditor from './editor';
 import SearchWidget from '@eeacms/volto-slate-footnote/editor/MultiSelectSearchWidget';
+import { defineMessages } from 'react-intl';
+
+defineMessages({
+  footnotes: {
+    id: 'Footnotes',
+    defaultMessage: 'Footnotes',
+  },
+});
 
 /**
  * @summary Called from Volto to configure new or existing Volto block types.