@widergy/energy-ui 3.158.1 → 3.160.0

package/dist/esm/components/UTLabel/components/Markdown/components/BlockQuote/index.js

@@ -0,0 +1,40 @@
+import React, { memo } from 'react';
+import { objectOf, string } from 'prop-types';
+import WithCustomHandler from '../WithCustomHandler';
+import styles from './styles.module.scss';
+const BlockQuote = _ref => {
+  let {
+    children,
+    classes
+  } = _ref;
+  const lines = [];
+  if (Array.isArray(children)) {
+    children.forEach(child => {
+      var _child$props;
+      if (typeof child === 'string') {
+        const parts = child.split('\n').filter(line => line.trim());
+        lines.push(...parts);
+      } else if ((child === null || child === void 0 ? void 0 : child.type) === 'p' && child !== null && child !== void 0 && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.children) {
+        const pChildren = child.props.children;
+        if (Array.isArray(pChildren)) {
+          pChildren.forEach(pChild => {
+            if (typeof pChild === 'string' && pChild.trim()) {
+              lines.push(pChild.trim());
+            }
+          });
+        } else if (typeof pChildren === 'string' && pChildren.trim()) {
+          lines.push(pChildren.trim());
+        }
+      }
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.blockquote, " ").concat(classes === null || classes === void 0 ? void 0 : classes.blockquote)
+  }, lines.map(line => /*#__PURE__*/React.createElement("div", {
+    key: line
+  }, line)));
+};
+BlockQuote.propTypes = {
+  classes: objectOf(string)
+};
+export default /*#__PURE__*/memo(WithCustomHandler(BlockQuote));

package/dist/esm/components/UTLabel/components/Markdown/components/BlockQuote/styles.module.scss

@@ -0,0 +1,17 @@
+.blockquote {
+  margin: 0 0 24px 0;
+  padding-left: 12px;
+  position: relative;
+  white-space: pre-line;
+
+  &:before {
+    background: var(--gray01);
+    border-radius: 3;
+    content: '';
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    width: 2px;
+  }
+}

package/dist/esm/components/UTLabel/components/Markdown/components/Citation/constants.js

@@ -0,0 +1,11 @@
+export const EXTENSION_ICON = {
+  doc: 'IconFileTypeDoc',
+  docx: 'IconFileTypeDocx',
+  jpg: 'IconFileTypeJpg',
+  pdf: 'IconFileTypePdf',
+  txt: 'IconFileTypeTxt',
+  xls: 'IconFileTypeXls',
+  xml: 'IconFileTypeXml',
+  zip: 'IconFileTypeZip'
+};
+export const DEFAULT_ICON = 'IconFile';

package/dist/esm/components/UTLabel/components/Markdown/components/Citation/index.js

@@ -0,0 +1,35 @@
+import React, { memo } from 'react';
+import { string } from 'prop-types';
+import UTIcon from '../../../../../UTIcon';
+import WithCustomHandler from '../WithCustomHandler';
+import { getIcon } from './utils';
+import styles from './styles.module.scss';
+const Citation = _ref => {
+  let {
+    label,
+    url
+  } = _ref;
+  const onClick = () => window.open(url, '_blank', 'noopener,noreferrer');
+  const icon = getIcon(label, url);
+  const onKeyDown = e => {
+    if (e.key === 'Enter' || e.key === ' ') onClick();
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(UTIcon, {
+    colorTheme: "gray",
+    name: icon,
+    size: 20
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.label
+  }, label));
+};
+Citation.propTypes = {
+  label: string,
+  url: string
+};
+export default /*#__PURE__*/memo(WithCustomHandler(Citation));

package/dist/esm/components/UTLabel/components/Markdown/components/Citation/styles.module.scss

@@ -0,0 +1,37 @@
+.container {
+  align-items: center;
+  background-color: var(--light03);
+  border-color: transparent;
+  border-radius: 30px;
+  border-style: solid;
+  border-width: 1px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  grid-gap: 8px;
+  padding: 4px 8px;
+  transition:
+    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  width: fit-content;
+
+  &:hover {
+    background-color: var(--light04);
+  }
+
+  &:active {
+    background-color: var(--light05);
+  }
+}
+
+.label {
+  color: var(--gray04);
+  font-size: var(--UT-label-size-small, 0.875rem);
+  font-weight: var(--UT-label-weight-regular, 400);
+  line-height: var(--UT-label-lh-small, 1.25rem);
+  margin: 0;
+}

package/dist/esm/components/UTLabel/components/Markdown/components/Citation/utils.js

@@ -0,0 +1,11 @@
+import { DEFAULT_ICON, EXTENSION_ICON } from './constants';
+const getFileExtension = str => {
+  if (!str) return null;
+  const match = str.match(/\.([a-zA-Z0-9]+)(?:\?|$)/);
+  return match ? match[1].toLowerCase() : null;
+};
+export const getIcon = (label, url) => {
+  const extension = getFileExtension(label) || getFileExtension(url);
+  const icon = extension && EXTENSION_ICON[extension] || DEFAULT_ICON;
+  return icon;
+};

package/dist/esm/components/UTLabel/components/Markdown/components/CitationGroup/index.js

@@ -0,0 +1,15 @@
+import React, { memo, useState } from 'react';
+import WithCustomHandler from '../WithCustomHandler';
+import styles from './styles.module.scss';
+const CitationGroup = _ref => {
+  let {
+    children
+  } = _ref;
+  const [isHovered, setIsHovered] = useState(false);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.citationGroup, " ").concat(isHovered ? styles.isHovered : ''),
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false)
+  }, children);
+};
+export default /*#__PURE__*/memo(WithCustomHandler(CitationGroup));

package/dist/esm/components/UTLabel/components/Markdown/components/CitationGroup/styles.module.scss

@@ -0,0 +1,29 @@
+.citationGroup {
+  -webkit-overflow-scrolling: touch;
+  display: flex;
+  grid-gap: 8px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 4px;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+
+  &::-webkit-scrollbar {
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 4px;
+  }
+
+  &.isHovered {
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--light05);
+    }
+  }
+}

package/dist/esm/components/UTLabel/components/Markdown/components/Links/constants.js

@@ -0,0 +1,2 @@
+export const DATA_FOOTNOTE_REF = 'data-footnote-ref';
+export const DATA_FOOTNOTE_BACKREF = 'data-footnote-backref';

package/dist/esm/components/UTLabel/components/Markdown/components/Links/index.js

@@ -0,0 +1,38 @@
+import React, { memo } from 'react';
+import { bool, string } from 'prop-types';
+import WithCustomHandler from '../WithCustomHandler';
+import { DATA_FOOTNOTE_REF, DATA_FOOTNOTE_BACKREF } from './constants';
+import styles from './styles.module.scss';
+const Links = _ref => {
+  let {
+    [DATA_FOOTNOTE_REF]: dataFootnoteRef,
+    [DATA_FOOTNOTE_BACKREF]: dataFootnoteBackref,
+    children,
+    href,
+    id,
+    markdownExtended
+  } = _ref;
+  if (markdownExtended && dataFootnoteRef !== undefined) return /*#__PURE__*/React.createElement("a", {
+    href: href,
+    id: id,
+    className: styles.isFootNoteRef
+  }, children);
+  if (markdownExtended && dataFootnoteBackref !== undefined) return /*#__PURE__*/React.createElement("a", {
+    href: href,
+    id: id,
+    className: styles.isFootNoteRef
+  }, href.substring(20));
+  return /*#__PURE__*/React.createElement("a", {
+    href: href,
+    rel: "noopener noreferrer",
+    target: "_blank"
+  }, children);
+};
+Links.propTypes = {
+  [DATA_FOOTNOTE_REF]: string,
+  [DATA_FOOTNOTE_BACKREF]: string,
+  href: string,
+  id: string,
+  markdownExtended: bool
+};
+export default /*#__PURE__*/memo(WithCustomHandler(Links));

package/dist/esm/components/UTLabel/components/Markdown/components/Links/styles.module.scss

@@ -0,0 +1,3 @@
+.isFootNoteRef {
+  text-decoration: none !important;
+}

package/dist/esm/components/UTLabel/components/Markdown/components/ListItem/index.js

@@ -0,0 +1,44 @@
+import React, { Fragment, memo } from 'react';
+import { object } from 'prop-types';
+import UTIcon from '../../../../../UTIcon';
+import WithCustomHandler from '../WithCustomHandler';
+import { cleanElementProps } from '../../utils';
+import styles from './styles.module.scss';
+const ListItem = _ref => {
+  var _node$properties;
+  let {
+    children,
+    node,
+    ...props
+  } = _ref;
+  const classList = Array.isArray(node === null || node === void 0 || (_node$properties = node.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.className) ? node.properties.className : [];
+  const isTaskListItem = classList.includes('task-list-item');
+  if (isTaskListItem) {
+    var _node$children, _checkbox$properties;
+    const checkbox = node === null || node === void 0 || (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children[0];
+    const isChecked = Boolean(checkbox === null || checkbox === void 0 || (_checkbox$properties = checkbox.properties) === null || _checkbox$properties === void 0 ? void 0 : _checkbox$properties.checked);
+    const contentNodes = Array.isArray(children) ? children.slice(1) : children;
+    return /*#__PURE__*/React.createElement("li", {
+      className: styles.taskListItem
+    }, isChecked ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(UTIcon, {
+      area: true,
+      colorTheme: "success",
+      name: "IconCheck",
+      size: 16
+    }), /*#__PURE__*/React.createElement("span", {
+      className: styles.itemContentChecked
+    }, contentNodes)) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: styles.taskItemIconUnchecked
+    }), /*#__PURE__*/React.createElement("span", null, contentNodes)));
+  }
+  const safeChildren = Array.isArray(children) ? children : children ? [children] : [];
+  const mergedProps = {
+    ...cleanElementProps(props),
+    ...((node === null || node === void 0 ? void 0 : node.properties) || {})
+  };
+  return /*#__PURE__*/React.createElement('li', mergedProps, safeChildren);
+};
+ListItem.propTypes = {
+  node: object
+};
+export default /*#__PURE__*/memo(WithCustomHandler(ListItem));

package/dist/esm/components/UTLabel/components/Markdown/components/ListItem/styles.module.scss

@@ -0,0 +1,21 @@
+.taskListItem {
+  align-items: center;
+  display: flex;
+  grid-gap: 8px;
+  list-style-type: none;
+  margin: 0;
+}
+
+.taskItemIconUnchecked {
+  border: 1px solid var(--gray01);
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: inline-block;
+  flex-shrink: 0;
+  height: 20px;
+  width: 20px;
+}
+
+.itemContentChecked {
+  text-decoration: line-through;
+}

package/dist/esm/components/UTLabel/components/Markdown/components/Section/index.js

@@ -0,0 +1,52 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { memo } from 'react';
+import { objectOf, object, string } from 'prop-types';
+import { cleanElementProps } from '../../utils';
+import styles from './styles.module.scss';
+const Section = _ref => {
+  var _node$properties;
+  let {
+    children,
+    classes,
+    node,
+    ...props
+  } = _ref;
+  const isFootnotesSection = (node === null || node === void 0 || (_node$properties = node.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.dataFootnotes) !== undefined;
+  if (!isFootnotesSection) {
+    return /*#__PURE__*/React.createElement('section', cleanElementProps(props), children);
+  }
+  const reactChildren = React.Children.toArray(children);
+  const ol = reactChildren.find(c => (c === null || c === void 0 ? void 0 : c.type) === 'ol');
+  if (!ol) return /*#__PURE__*/React.createElement("div", null);
+  const liNodes = React.Children.toArray(ol.props.children).filter(c => {
+    var _c$props;
+    return (c === null || c === void 0 || (_c$props = c.props) === null || _c$props === void 0 || (_c$props = _c$props.node) === null || _c$props === void 0 ? void 0 : _c$props.tagName) === 'li';
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classes === null || classes === void 0 ? void 0 : classes.customFootnotes, " ").concat(styles.customFootnotes)
+  }, liNodes.map(li => {
+    const liChildren = React.Children.toArray(li.props.children);
+    const p = liChildren.find(ch => (ch === null || ch === void 0 ? void 0 : ch.type) === 'p');
+    const sourceChildren = p ? React.Children.toArray(p.props.children) : liChildren;
+    const textNodes = sourceChildren.filter(ch => typeof ch === 'string' || typeof ch === 'number');
+    const elementNodes = sourceChildren.filter(ch => !(typeof ch === 'string' || typeof ch === 'number'));
+    const textContent = textNodes.join('').trim();
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.customFootnoteItem
+    }, /*#__PURE__*/React.createElement("div", null, elementNodes.map(el => {
+      var _el$props;
+      if ((el === null || el === void 0 ? void 0 : el.type) === 'a' && typeof ((_el$props = el.props) === null || _el$props === void 0 ? void 0 : _el$props.href) === 'string') {
+        return /*#__PURE__*/React.createElement("a", _extends({
+          href: el.props.href,
+          key: el.props.href
+        }, el.props || {}), el.props.children);
+      }
+      return /*#__PURE__*/React.cloneElement(el);
+    })), textContent ? /*#__PURE__*/React.createElement("span", null, textContent) : null);
+  }));
+};
+Section.propTypes = {
+  classes: objectOf(string),
+  node: object
+};
+export default /*#__PURE__*/memo(Section);

package/dist/esm/components/UTLabel/components/Markdown/components/Section/styles.module.scss

@@ -0,0 +1,13 @@
+.customFootnotes {
+  margin: 0 0 24px 0;
+}
+
+.customFootnoteItem {
+  display: flex;
+
+   a {
+    font-size: 0.75em;
+    margin-right: 4px;
+    vertical-align: super;
+  }
+}

package/dist/esm/components/UTLabel/components/Markdown/components/WithCustomHandler/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { func } from 'prop-types';
+const WithCustomHandler = (Component, props) => {
+  const {
+    customHandler,
+    ...restProps
+  } = props;
+  if (customHandler) {
+    const CustomRenderer = customHandler(props);
+    if (CustomRenderer) return CustomRenderer;
+  }
+  return /*#__PURE__*/React.createElement(Component, restProps);
+};
+WithCustomHandler.propTypes = {
+  customHandler: func
+};
+export default Component => props => WithCustomHandler(Component, props);

package/dist/esm/components/UTLabel/components/Markdown/constants.js

@@ -0,0 +1,59 @@
+import breaks from 'remark-breaks';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
+import BlockQuote from './components/BlockQuote';
+import Citation from './components/Citation';
+import CitationGroup from './components/CitationGroup';
+import Links from './components/Links';
+import ListItem from './components/ListItem';
+import Section from './components/Section';
+import remarkCitations from './customPlugins/remarkCitations';
+import remarkDeflist from './customPlugins/remarkDeflist';
+export const COMPONENTS_NAMES = {
+  BLOCKQUOTE: 'blockquote',
+  CITATION: 'citation',
+  CITATION_GROUP: 'citationgroup',
+  DEFINITION_LIST: 'dl',
+  DEFINITION_TERM: 'dt',
+  DEFINITION_DESCRIPTION: 'dd',
+  LINK: 'a',
+  LIST_ITEM: 'li',
+  HEADING_2: 'h2',
+  PARAGRAPH: 'p',
+  SECTION: 'section'
+};
+export const NODE_TYPES = {
+  BLOCKQUOTE: 'blockquote',
+  CITATION: 'citation',
+  CITATION_GROUP: 'citationgroup',
+  DEFINITION_LIST: 'definitionList',
+  DEFINITION_TERM: 'definitionTerm',
+  DEFINITION_DESCRIPTION: 'definitionDescription',
+  HEADING: 'heading',
+  LINK: 'link',
+  LIST_ITEM: 'listItem',
+  PARAGRAPH: 'paragraph',
+  TABLE_CELL: 'tableCell',
+  TEXT: 'text'
+};
+export const BASE_CONFIG = {
+  disallowedElements: [COMPONENTS_NAMES.PARAGRAPH, COMPONENTS_NAMES.BLOCKQUOTE],
+  remarkPlugins: [breaks],
+  rehypePlugins: [rehypeRaw],
+  components: {
+    [COMPONENTS_NAMES.LINK]: Links
+  }
+};
+export const EXTENDED_CONFIG = {
+  disallowedElements: [],
+  remarkPlugins: [remarkGfm, remarkDeflist, remarkCitations, breaks],
+  rehypePlugins: [rehypeRaw],
+  components: {
+    [COMPONENTS_NAMES.BLOCKQUOTE]: BlockQuote,
+    [COMPONENTS_NAMES.CITATION]: Citation,
+    [COMPONENTS_NAMES.CITATION_GROUP]: CitationGroup,
+    [COMPONENTS_NAMES.LINK]: Links,
+    [COMPONENTS_NAMES.LIST_ITEM]: ListItem,
+    [COMPONENTS_NAMES.SECTION]: Section
+  }
+};

package/dist/esm/components/UTLabel/components/Markdown/customPlugins/remarkCitations.js

@@ -0,0 +1,182 @@
+import { visit } from 'unist-util-visit';
+import { COMPONENTS_NAMES, NODE_TYPES } from '../constants';
+
+/**
+ * Detecta el patrón de citas en un texto y lo convierte en componentes.
+ *
+ * Busca el patrón [Documento1.pdf†https://example.com/doc1.pdf] en el contenido.
+ * Si hay una sola cita, muestra un UTChip (componente Citation).
+ * Si hay múltiples citas, las renderiza dentro de un div contenedor (componente CitationGroup).
+ *
+ * @returns {Function} Función que procesa el árbol AST de remark
+ */
+export default () => {
+  const pattern = /\[([^\]]+?)†(https?:\/\/[^\]]+?)\]/g;
+  return tree => {
+    visit(tree, node => {
+      const parentsToProcess = [NODE_TYPES.PARAGRAPH, NODE_TYPES.HEADING, NODE_TYPES.LIST_ITEM, NODE_TYPES.BLOCKQUOTE, NODE_TYPES.TABLE_CELL];
+      if (!parentsToProcess.includes(node.type) || !Array.isArray(node.children)) return;
+      const {
+        children
+      } = node;
+      const getText = n => {
+        if (n.type === NODE_TYPES.TEXT) return n.value || '';
+        if (n.type === NODE_TYPES.LINK) {
+          return Array.isArray(n.children) ? n.children.map(getText).join('') : '';
+        }
+        if (Array.isArray(n.children)) return n.children.map(getText).join('');
+        return '';
+      };
+      const parts = children.map(child => {
+        const text = getText(child);
+        return {
+          node: child,
+          text,
+          length: text.length
+        };
+      });
+      const combined = parts.map(p => p.text).join('');
+      if (!combined.includes('†')) return;
+      const matches = [...combined.matchAll(pattern)];
+      if (matches.length === 0) return;
+      const findPartIndexByChar = charIndex => {
+        let acc = 0;
+        return parts.reduce((accumulator, part, idx) => {
+          if (accumulator.found) return accumulator;
+          const next = acc + part.length;
+          if (charIndex < next) {
+            return {
+              found: true,
+              partIndex: idx,
+              offsetInPart: charIndex - acc
+            };
+          }
+          acc = next;
+          return {
+            found: false,
+            partIndex: -1,
+            offsetInPart: -1
+          };
+        }, {
+          found: false,
+          partIndex: -1,
+          offsetInPart: -1
+        });
+      };
+      const newChildren = [];
+      let cursorChar = 0;
+      let consumedPartIndex = 0;
+      matches.forEach(match => {
+        const [full, label, url] = match;
+        const matchStart = match.index;
+        const matchEnd = matchStart + full.length;
+        if (matchStart > cursorChar) {
+          const endInfo = findPartIndexByChar(matchStart - 1);
+          for (let i = consumedPartIndex; i <= endInfo.partIndex; i += 1) {
+            const part = parts[i];
+            const partStartChar = parts.slice(0, i).reduce((a, b) => a + b.length, 0);
+            const takeFrom = Math.max(cursorChar - partStartChar, 0);
+            const takeTo = Math.min(matchStart - partStartChar, part.length);
+            if (takeFrom === 0 && takeTo === part.length) {
+              newChildren.push(part.node);
+            } else {
+              const textSlice = part.text.slice(takeFrom, takeTo);
+              if (textSlice) newChildren.push({
+                type: NODE_TYPES.TEXT,
+                value: textSlice
+              });
+            }
+          }
+          consumedPartIndex = endInfo.partIndex + 1;
+        }
+        const matchStartInfo = findPartIndexByChar(matchStart);
+        const matchEndInfo = findPartIndexByChar(matchEnd - 1);
+        if (matchStartInfo.partIndex > consumedPartIndex) {
+          for (let i = consumedPartIndex; i < matchStartInfo.partIndex; i += 1) {
+            newChildren.push(parts[i].node);
+          }
+        }
+        newChildren.push({
+          type: COMPONENTS_NAMES.CITATION,
+          data: {
+            hName: COMPONENTS_NAMES.CITATION,
+            hProperties: {
+              label,
+              url
+            }
+          }
+        });
+        consumedPartIndex = matchEndInfo.partIndex + 1;
+        cursorChar = matchEnd;
+      });
+      if (cursorChar < combined.length) {
+        const startInfo = findPartIndexByChar(cursorChar);
+        if (startInfo.found) {
+          const partStartChar = parts.slice(0, startInfo.partIndex).reduce((a, b) => a + b.length, 0);
+          const takeFrom = cursorChar - partStartChar;
+          const firstPart = parts[startInfo.partIndex];
+          if (takeFrom < firstPart.length) {
+            const slice = firstPart.text.slice(takeFrom);
+            if (slice) newChildren.push({
+              type: NODE_TYPES.TEXT,
+              value: slice
+            });
+          }
+          for (let i = Math.max(consumedPartIndex, startInfo.partIndex + 1); i < parts.length; i += 1) {
+            newChildren.push(parts[i].node);
+          }
+        } else {
+          for (let i = consumedPartIndex; i < parts.length; i += 1) {
+            newChildren.push(parts[i].node);
+          }
+        }
+      } else {
+        for (let i = consumedPartIndex; i < parts.length; i += 1) {
+          newChildren.push(parts[i].node);
+        }
+      }
+      const groupedChildren = [];
+      let i = 0;
+      while (i < newChildren.length) {
+        const child = newChildren[i];
+        if (child.type === COMPONENTS_NAMES.CITATION) {
+          let citationCount = 1;
+          let j = i + 1;
+          let endIndex = i + 1;
+          while (j < newChildren.length) {
+            const nextChild = newChildren[j];
+            if (nextChild.type === COMPONENTS_NAMES.CITATION) {
+              citationCount += 1;
+              endIndex = j + 1;
+              j += 1;
+            } else if (nextChild.type === NODE_TYPES.TEXT && nextChild.value.trim() === '') {
+              j += 1;
+            } else {
+              break;
+            }
+          }
+          if (citationCount >= 2) {
+            const citationGroup = {
+              type: COMPONENTS_NAMES.CITATION_GROUP,
+              children: newChildren.slice(i, endIndex),
+              data: {
+                hName: COMPONENTS_NAMES.CITATION_GROUP
+              }
+            };
+            groupedChildren.push(citationGroup);
+            i = endIndex;
+          } else {
+            groupedChildren.push(child);
+            i += 1;
+          }
+        } else {
+          groupedChildren.push(child);
+          i += 1;
+        }
+      }
+      if (groupedChildren.length > 0) {
+        node.children = groupedChildren;
+      }
+    });
+  };
+};