@eeacms/volto-slate-footnote 7.2.4 → 7.2.6

package/CHANGELOG.md

@@ -4,6 +4,22 @@ 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.6](https://github.com/eea/volto-slate-footnote/compare/7.2.5...7.2.6) - 22 September 2025
+
+#### :bug: Bug Fixes
+
+- fix(footnotes): popup width due to large links [David Ichim - [`a054b56`](https://github.com/eea/volto-slate-footnote/commit/a054b56b3c4df7ca3fd1caf102bfdb4002fc9b49)]
+
+#### :nail_care: Enhancements
+
+- change(render): removed fixed bottom left position [David Ichim - [`9caf528`](https://github.com/eea/volto-slate-footnote/commit/9caf52809d783d54ac6a7839143351f32fd99c01)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`da8e341`](https://github.com/eea/volto-slate-footnote/commit/da8e341c427e5f3575f5011cf8df09fd435a55f6)]
+
+### [7.2.5](https://github.com/eea/volto-slate-footnote/compare/7.2.4...7.2.5) - 9 September 2025
+
 ### [7.2.4](https://github.com/eea/volto-slate-footnote/compare/7.2.3...7.2.4) - 11 July 2025
 
 #### :bug: Bug Fixes

package/package.json

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

package/src/Blocks/Footnote/less/public.less

@@ -2,6 +2,20 @@
   & :target {
     background: yellow;
   }
+
+  ol {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+
+    li {
+      overflow-wrap: break-word;
+
+      a {
+        overflow-wrap: break-word;
+        word-break: break-all;
+      }
+    }
+  }
 }
 
 .slateFootnotes {

package/src/editor/SearchWidget.test.jsx

@@ -1,8 +1,27 @@
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import SearchWidget from './SearchWidget';
 import '@testing-library/jest-dom/extend-expect';
 
+jest.mock('semantic-ui-react', () => {
+  const Card = ({ children }) => <div>{children}</div>;
+  Card.Content = ({ children }) => <div>{children}</div>;
+  Card.Header = ({ children }) => <div>{children}</div>;
+  Card.Description = ({ children }) => <div>{children}</div>;
+
+  return {
+    Search: ({ onSearchChange, value }) => (
+      <input
+        type="text"
+        value={value || ''}
+        onChange={(e) => onSearchChange(e, { value: e.target.value })}
+      />
+    ),
+    Card,
+    Segment: ({ children }) => <div>{children}</div>,
+  };
+});
+
 describe('SearchWidget', () => {
   const choices = [
     { footnote: 'Citation 1' },
@@ -10,61 +29,30 @@ describe('SearchWidget', () => {
     { footnote: 'Citation 3' },
   ];
 
-  it('renders the search input and displays the choices', () => {
+  it('renders the search widget', () => {
     const onChange = jest.fn();
     render(<SearchWidget choices={choices} onChange={onChange} value="" />);
 
     expect(screen.getByRole('textbox')).toBeInTheDocument();
     expect(screen.getByText('Citation')).toBeInTheDocument();
-    expect(screen.queryAllByRole('option')).toHaveLength(0);
-    expect(screen.getByText('No results found.')).toBeInTheDocument();
   });
 
-  it('filters the choices based on the search input', async () => {
-    const onChange = jest.fn();
-    const { container } = render(
-      <SearchWidget choices={choices} onChange={onChange} value="" />,
-    );
-
-    const searchInput = screen.getByRole('textbox');
-    fireEvent.change(searchInput, { target: { value: 'Citation 2' } });
-
-    await waitFor(() => {
-      expect(container.querySelectorAll('.result')).toHaveLength(1);
-      expect(
-        container.querySelector('div[footnote="Citation 2"]'),
-      ).toBeInTheDocument();
-    });
-  });
-
-  it('calls the onChange callback when a choice is selected', () => {
+  it('calls onChange when input changes', () => {
     const onChange = jest.fn();
     render(<SearchWidget choices={choices} onChange={onChange} value="" />);
 
-    const searchInput = screen.getByRole('textbox');
-    fireEvent.change(searchInput, { target: { value: 'Citation 2' } });
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: 'test' } });
 
-    waitFor(() => {
-      const option = screen.getByText('Citation 2');
-      fireEvent.click(option);
-      expect(onChange).toHaveBeenCalledWith({ footnote: 'Citation 2' });
-    });
+    expect(onChange).toHaveBeenCalledWith({ footnote: 'test' });
   });
 
-  it('updates the value prop when the search input changes', () => {
+  it('displays initial value', () => {
     const onChange = jest.fn();
     render(
-      <SearchWidget
-        choices={choices}
-        onChange={onChange}
-        value="Initial value"
-      />,
+      <SearchWidget choices={choices} onChange={onChange} value="Initial" />,
     );
 
-    const searchInput = screen.getByRole('textbox');
-    expect(searchInput).toHaveValue('Initial value');
-
-    fireEvent.change(searchInput, { target: { value: 'New value' } });
-    expect(onChange).toHaveBeenCalledWith({ footnote: 'New value' });
+    expect(screen.getByRole('textbox')).toHaveValue('Initial');
   });
 });

package/src/editor/render.jsx

@@ -121,8 +121,6 @@ export const FootnoteElement = (props) => {
               open={open}
               onOpen={() => setOpen(true)}
               onClose={() => setOpen(false)}
-              position="bottom left"
-              pinned={true}
               mountNode={ref.current}
               on={['click', 'hover', 'focus']}
               trigger={

package/src/editor/styles.less

@@ -34,6 +34,11 @@ body {
   a[role='listitem']:hover {
     background-color: #ffff !important;
   }
+
+  .description-content {
+    min-width: 400px;
+    word-break: break-word;
+  }
 }
 
 .footnote-edit-node {

package/src/editor/utils.js

@@ -3,8 +3,20 @@ 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;
+
+const protocol = '((http|https|ftp):\\/\\/)?';
+const domain = '([a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,}';
+const port = '(:\\d+)?';
+const fileExtensions =
+  'pdf|doc|docx|xls|xlsx|png|jpg|jpeg|gif|htm|html|xml|txt|csv|zip|ppt|pptx';
+const pathWithFile = `(\\/[^<>]*\\.(${fileExtensions})(?=[,;.!?\\s)]|$)|\\/[^\\s<>]*)?`;
+const queryString = '(\\?[^\\s<>]*)?';
+const trailingPunctuation = '(?=[\\s,;.!?]|$|\\)[\\s,;.!?]|\\)$)';
+
+const urlRegex = new RegExp(
+  `\\b${protocol}${domain}${port}${pathWithFile}${queryString}${trailingPunctuation}`,
+  'gi',
+);
 
 /**
  * retrive all slate children of nested objects
@@ -297,10 +309,50 @@ export function isValidHTML(htmlString) {
   return false;
 }
 
+const cleanUrls = (urls, text) => {
+  if (!urls) return urls;
+
+  return urls.map((url) => {
+    // Handle URLs ending with punctuation that should not be part of the URL
+    // Remove trailing punctuation if it's followed by whitespace or end of string
+    const trailingPunctuationMatch = url.match(/^(.+?)([.!?;,]+)$/);
+    if (trailingPunctuationMatch) {
+      const [, urlPart] = trailingPunctuationMatch;
+      const urlIndex = text.indexOf(url);
+      const afterUrl = text.substring(urlIndex + url.length);
+
+      // If punctuation is followed by whitespace or end of string, remove it
+      if (afterUrl.match(/^\s/) || afterUrl === '') {
+        return urlPart;
+      }
+    }
+
+    // Handle URLs that end with unmatched closing parenthesis
+    // This happens when a URL is wrapped in parentheses like "(https://example.com)"
+    if (url.endsWith(')')) {
+      const urlIndex = text.indexOf(url);
+      const beforeUrl = text.substring(0, urlIndex);
+
+      // Check if this closing parenthesis is unmatched (URL is wrapped in parentheses)
+      const openParensInUrl = (url.match(/\(/g) || []).length;
+      const closeParensInUrl = (url.match(/\)/g) || []).length;
+
+      // If there's an extra closing parenthesis and the URL is preceded by an opening parenthesis
+      if (closeParensInUrl > openParensInUrl && beforeUrl.endsWith('(')) {
+        return url.slice(0, -1); // Remove the trailing closing parenthesis
+      }
+    }
+
+    return url;
+  });
+};
+
 export const renderTextWithLinks = (text, zoteroId) => {
   if (!text) return null;
 
-  const links = text.match(urlRegex);
+  const rawLinks = text.match(urlRegex);
+  const links = cleanUrls(rawLinks, text);
+
   let isValid = false;
   if (zoteroId && isValidHTML(text)) isValid = true;
 
@@ -348,5 +400,5 @@ export const renderTextWithLinks = (text, zoteroId) => {
         }}
       />
     );
-  else return <div>{result}</div>;
+  else return <div className="description-content">{result}</div>;
 };

package/src/editor/utils.test.js

@@ -1,15 +1,52 @@
+import React from 'react';
 import {
   openAccordionOrTabIfContainsFootnoteReference,
   getAllBlocksAndSlateFields,
   isValidHTML,
   retriveValuesOfSlateFromNestedPath,
+  renderTextWithLinks,
+  makeFootnoteListOfUniqueItems,
 } from './utils';
 import { getAllBlocks } from '@plone/volto-slate/utils';
+import { UniversalLink } from '@plone/volto/components';
 
 jest.mock('@plone/volto-slate/utils', () => ({
   getAllBlocks: jest.fn(),
 }));
 
+jest.mock('@plone/volto/components', () => ({
+  UniversalLink: jest.fn(({ href, children }) => <a href={href}>{children}</a>),
+}));
+
+jest.mock('@plone/volto/registry', () => ({
+  __esModule: true,
+  default: {
+    settings: {
+      footnotes: ['citation', 'footnote'],
+      blocksWithFootnotesSupport: {
+        slate: ['value'],
+        slateTable: ['table'],
+      },
+    },
+  },
+}));
+
+// Mock Slate's Node module
+jest.mock('slate', () => ({
+  Node: {
+    elements: function* (node) {
+      // Simple implementation for testing
+      if (node && node.children) {
+        for (const child of node.children) {
+          if (child.type) {
+            yield [child, []];
+          }
+        }
+      }
+    },
+  },
+}));
+
 describe('retriveValuesOfSlateFromNestedPath', () => {
   test('should return values for a given string path in an object', () => {
     const obj = { key: ['value1', 'value2'] };
@@ -244,7 +281,7 @@ describe('getAllBlocksAndSlateFields', () => {
 describe('isValidHTML', () => {
   beforeAll(() => {
     global.DOMParser = class {
-      parseFromString(str, type) {
+      parseFromString(str) {
         const doc = {
           querySelectorAll: (selector) => {
             if (selector === 'parsererror' && str.includes('<error>')) {
@@ -266,3 +303,261 @@ describe('isValidHTML', () => {
     expect(isValidHTML('<error>Invalid HTML</error>')).toBe(false);
   });
 });
+
+describe('renderTextWithLinks', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return null for empty text', () => {
+    expect(renderTextWithLinks(null)).toBeNull();
+    expect(renderTextWithLinks('')).toBeNull();
+  });
+
+  it('should return plain text when no links are found', () => {
+    const text = 'This is plain text without links';
+    expect(renderTextWithLinks(text)).toBe(text);
+  });
+
+  it('should detect and render simple HTTP URL', () => {
+    const text = 'Visit http://example.com for info';
+    const result = renderTextWithLinks(text);
+    expect(result).toBeDefined();
+    expect(result.type).toBe('div');
+    expect(result.props.children).toBeDefined();
+    expect(result.props.children.length).toBeGreaterThan(0);
+  });
+
+  it('should detect and render simple HTTPS URL', () => {
+    const text = 'Visit https://example.com for info';
+    const result = renderTextWithLinks(text);
+    expect(result).toBeDefined();
+    expect(result.type).toBe('div');
+    expect(result.props.children).toBeDefined();
+  });
+
+  it('should handle URL with file extension', () => {
+    const text = 'Download https://example.com/file.pdf';
+    const result = renderTextWithLinks(text);
+    expect(result).toBeDefined();
+    expect(result.type).toBe('div');
+  });
+
+  it('should handle URL wrapped in parentheses', () => {
+    const text = '(https://example.com/page) for details';
+    const result = renderTextWithLinks(text);
+    expect(result).toBeDefined();
+    expect(result.type).toBe('div');
+  });
+
+  it('should handle multiple URLs', () => {
+    const text = 'Visit https://example.com and http://test.org';
+    const result = renderTextWithLinks(text);
+    expect(result).toBeDefined();
+    expect(result.type).toBe('div');
+    expect(
+      result.props.children.filter((c) => c && c.type === UniversalLink).length,
+    ).toBe(2);
+  });
+
+  it('should render HTML when zoteroId is provided', () => {
+    global.__CLIENT__ = true;
+    global.DOMParser = class {
+      parseFromString() {
+        return { querySelectorAll: () => [] };
+      }
+    };
+    const text = '<em>Test</em> content';
+    const result = renderTextWithLinks(text, 'zotero123');
+    expect(result).toBeDefined();
+    expect(result.type).toBe('span');
+  });
+
+  it('should handle URL without protocol', () => {
+    const text = 'Visit example.com';
+    const result = renderTextWithLinks(text);
+    expect(result).toBeDefined();
+    expect(result.type).toBe('div');
+  });
+});
+
+describe('makeFootnoteListOfUniqueItems', () => {
+  it('should return empty object for empty blocks', () => {
+    const result = makeFootnoteListOfUniqueItems([]);
+    expect(result).toEqual({});
+  });
+
+  it('should handle blocks without footnote support', () => {
+    const blocks = [{ '@type': 'unsupported', value: 'test' }];
+    const result = makeFootnoteListOfUniqueItems(blocks);
+    expect(result).toEqual({});
+  });
+
+  it('should process slate blocks with citations', () => {
+    const blocks = [
+      {
+        '@type': 'slate',
+        value: [
+          {
+            children: [
+              {
+                type: 'citation',
+                data: {
+                  zoteroId: 'zot123',
+                  uid: 'uid1',
+                  footnote: 'Citation text',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ];
+    const result = makeFootnoteListOfUniqueItems(blocks);
+    expect(result).toHaveProperty('zot123');
+    expect(result.zot123.uid).toBe('uid1');
+  });
+
+  it('should handle multiple references to same zoteroId', () => {
+    const blocks = [
+      {
+        '@type': 'slate',
+        value: [
+          {
+            children: [
+              {
+                type: 'citation',
+                data: {
+                  zoteroId: 'zot123',
+                  uid: 'uid1',
+                  footnote: 'Citation text',
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        '@type': 'slate',
+        value: [
+          {
+            children: [
+              {
+                type: 'citation',
+                data: {
+                  zoteroId: 'zot123',
+                  uid: 'uid2',
+                  footnote: 'Citation text',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ];
+    const result = makeFootnoteListOfUniqueItems(blocks);
+    expect(result.zot123.refs).toBeDefined();
+    expect(result.zot123.refs).toHaveProperty('uid1');
+    expect(result.zot123.refs).toHaveProperty('uid2');
+  });
+
+  it('should handle footnotes with extra citations', () => {
+    const blocks = [
+      {
+        '@type': 'slate',
+        value: [
+          {
+            children: [
+              {
+                type: 'citation',
+                data: {
+                  zoteroId: 'zot123',
+                  uid: 'uid1',
+                  footnote: 'Main citation',
+                  extra: [
+                    {
+                      zoteroId: 'zot456',
+                      uid: 'uid2',
+                      footnote: 'Extra citation',
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ];
+    const result = makeFootnoteListOfUniqueItems(blocks);
+    expect(result).toHaveProperty('zot123');
+    expect(result).toHaveProperty('zot456');
+    expect(result.zot456.uid).toBe('uid1');
+  });
+
+  it('should handle regular footnotes without zoteroId', () => {
+    const blocks = [
+      {
+        '@type': 'slate',
+        value: [
+          {
+            children: [
+              {
+                type: 'footnote',
+                data: {
+                  uid: 'uid1',
+                  footnote: 'Footnote text',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ];
+    const result = makeFootnoteListOfUniqueItems(blocks);
+    expect(result).toHaveProperty('uid1');
+    expect(result.uid1.footnote).toBe('Footnote text');
+  });
+
+  it('should handle identical footnote texts', () => {
+    const blocks = [
+      {
+        '@type': 'slate',
+        value: [
+          {
+            children: [
+              {
+                type: 'footnote',
+                data: {
+                  uid: 'uid1',
+                  footnote: 'Same text',
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        '@type': 'slate',
+        value: [
+          {
+            children: [
+              {
+                type: 'footnote',
+                data: {
+                  uid: 'uid2',
+                  footnote: 'Same text',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ];
+    const result = makeFootnoteListOfUniqueItems(blocks);
+    const keys = Object.keys(result);
+    expect(keys.length).toBe(1);
+    expect(result[keys[0]].refs).toBeDefined();
+  });
+});
+
+// Removed test for deprecated openAccordionIfContainsFootnoteReference alias