@eeacms/volto-group-block 6.2.1 → 6.3.1

package/.husky/pre-commit

@@ -0,0 +1,2 @@
+[ -n "$CI" ] && exit 0
+yarn lint-staged

package/CHANGELOG.md

@@ -4,6 +4,39 @@ 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).
 
+### [6.3.1](https://github.com/eea/volto-group-block/compare/6.3.0...6.3.1) - 18 September 2023
+
+#### :bug: Bug Fixes
+
+- fix: rendering of listing blocks inside defaultTemplate #257871 [nileshgulia1 - [`40ad609`](https://github.com/eea/volto-group-block/commit/40ad6093fb38acda35f7955795ec4cd90f11378c)]
+
+#### :house: Internal changes
+
+- style: lint-staged reorder in package.json [Alin Voinea - [`f29c1df`](https://github.com/eea/volto-group-block/commit/f29c1df1b8fce6d4a93db08ccc944f1ac8bc8b8b)]
+
+#### :hammer_and_wrench: Others
+
+- test: EN locales, pre-commit fix, feature PRs checks Refs #257193 [valentinab25 - [`2e9d601`](https://github.com/eea/volto-group-block/commit/2e9d60101dfe24420a126dbf360d0f32b6a1f9af)]
+- test: Add cypress test for group block in DX Layout - refs #254894 [Crețu Mihaela - [`06d23ed`](https://github.com/eea/volto-group-block/commit/06d23ed82c959d6569ed57902b2e36bdc0fec970)]
+### [6.3.0](https://github.com/eea/volto-group-block/compare/6.2.1...6.3.0) - 5 September 2023
+
+#### :rocket: New Features
+
+- feat(group): Variations support refs #157040 #26 from eea/variationsSupport [ichim-david - [`8342ae8`](https://github.com/eea/volto-group-block/commit/8342ae8d843bd672339f9472e1e806cbfeac8d1b)]
+
+#### :bug: Bug Fixes
+
+- fix: update and fix jest tests [nileshgulia1 - [`97df2cc`](https://github.com/eea/volto-group-block/commit/97df2cc6ac5c3283707ff72bb3d4cd762d5a3b2f)]
+
+#### :hammer_and_wrench: Others
+
+- Release #39 from eea/develop [ichim-david - [`283e1e8`](https://github.com/eea/volto-group-block/commit/283e1e8dd1047415bae054cfd502d1691deaeb59)]
+- Release 6.3.0 [Alin Voinea - [`3d74bb5`](https://github.com/eea/volto-group-block/commit/3d74bb5342e3882e0ddee1aa8edab7e90949def6)]
+- test: Fix eslint and yarn i18n [Alin Voinea - [`763f764`](https://github.com/eea/volto-group-block/commit/763f76448625e05b53a2bde86ca48dda0cb263cb)]
+- i18n: Add en [Alin Voinea - [`f3385cd`](https://github.com/eea/volto-group-block/commit/f3385cd33bfbe3efe514fd82fd140d17e33051e1)]
+- test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`3aa996b`](https://github.com/eea/volto-group-block/commit/3aa996b4c115da6f37ca771f07f10d58fbfa33e8)]
+- fix eslint warnings [nileshgulia1 - [`cfdf2e9`](https://github.com/eea/volto-group-block/commit/cfdf2e900bcc456fa5a24ce7b03859170ad024ba)]
+- feature: add variations support [nileshgulia1 - [`d981c6b`](https://github.com/eea/volto-group-block/commit/d981c6b59c669712d60feb9cfb04022e228ac001)]
 ### [6.2.1](https://github.com/eea/volto-group-block/compare/6.2.0...6.2.1) - 18 August 2023
 
 #### :bug: Bug Fixes

package/cypress.config.js

@@ -2,12 +2,12 @@ const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
   viewportWidth: 1280,
-  defaultCommandTimeout: 8888,
+  defaultCommandTimeout: 5000,
   chromeWebSecurity: false,
   reporter: 'junit',
   video: true,
   retries: {
-    runMode: 8,
+    runMode: 1,
     openMode: 0,
   },
   reporterOptions: {

package/docker-compose.yml

@@ -1,11 +1,12 @@
 version: "3"
 services:
   backend:
-    image: plone/plone-backend:${PLONE_VERSION:-6}
+    image: eeacms/plone-backend
     ports:
       - "8080:8080"
     environment:
       SITE: "Plone"
+      PROFILES: "eea.kitkat:testing"
 
   frontend: 
     build:
@@ -23,6 +24,9 @@ services:
     volumes:
       - ./:/app/src/addons/${ADDON_PATH}
     environment:
+      CI: "true"
+      NODE_ENV: "development"
+      RAZZLE_JEST_CONFIG: "src/addons/${ADDON_PATH}/jest-addon.config.js"
       RAZZLE_INTERNAL_API_PATH: "http://backend:8080/Plone"
       RAZZLE_DEV_PROXY_API_PATH: "http://backend:8080/Plone"
       HOST: "0.0.0.0"

package/locales/de/LC_MESSAGES/volto.po

@@ -11,4 +11,12 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: Unknown Block {block}
+msgid "Unknown Block"
+msgstr ""
 
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: delete
+msgid "delete"
+msgstr ""

package/locales/en/LC_MESSAGES/volto.po

@@ -0,0 +1,22 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: Unknown Block {block}
+msgid "Unknown Block"
+msgstr ""
+
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: delete
+msgid "delete"
+msgstr ""

package/locales/it/LC_MESSAGES/volto.po

@@ -11,4 +11,12 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: Unknown Block {block}
+msgid "Unknown Block"
+msgstr ""
 
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: delete
+msgid "delete"
+msgstr ""

package/locales/ro/LC_MESSAGES/volto.po

@@ -11,4 +11,12 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: Unknown Block {block}
+msgid "Unknown Block"
+msgstr ""
 
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: delete
+msgid "delete"
+msgstr ""

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-06-28T10:48:22.678Z\n"
+"POT-Creation-Date: 2023-08-29T17:38:01.779Z\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"
@@ -13,4 +13,12 @@ msgstr ""
 "Preferred-Encodings: utf-8\n"
 "Domain: volto\n"
 
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: Unknown Block {block}
+msgid "Unknown Block"
+msgstr ""
 
+#: components/manage/Blocks/Group/EditBlockWrapper
+# defaultMessage: delete
+msgid "delete"
+msgstr ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-group-block",
-  "version": "6.2.1",
+  "version": "6.3.1",
   "description": "volto-group-block: Volto block to be used to group other blocks",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -22,8 +22,31 @@
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "husky": "*",
+    "lint-staged": "*",
     "md5": "^2.3.0"
   },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,json}": [
+      "make lint-fix",
+      "make prettier-fix"
+    ],
+    "src/**/*.{jsx}": [
+      "make i18n"
+    ],
+    "theme/**/*.{css,less}": [
+      "make stylelint-fix"
+    ],
+    "src/**/*.{css,less}": [
+      "make stylelint-fix"
+    ],
+    "theme/**/*.overrides": [
+      "make stylelint-fix"
+    ],
+    "src/**/*.overrides": [
+      "make stylelint-fix"
+    ]
+  },
   "scripts": {
     "release": "release-it",
     "release-major-beta": "release-it major --preRelease=beta",
@@ -41,6 +64,7 @@
     "lint:fix": "make lint-fix",
     "i18n": "make i18n",
     "cypress:run": "make cypress-run",
-    "cypress:open": "make cypress-open"
+    "cypress:open": "make cypress-open",
+    "prepare": "husky install"
   }
 }

package/src/components/index.js

@@ -1,3 +1,4 @@
-export GroupBlockEdit from './manage/Blocks/Group/Edit';
-export GroupBlockView from './manage/Blocks/Group/View';
-export GroupBlockLayout from './manage/Blocks/Group/LayoutSchema';
+export { default as GroupBlockDefaultBody } from './manage/Blocks/Group/DefaultBody';
+export { default as GroupBlockEdit } from './manage/Blocks/Group/Edit';
+export { default as GroupBlockView } from './manage/Blocks/Group/View';
+export { default as GroupBlockLayout } from './manage/Blocks/Group/LayoutSchema';

package/src/components/manage/Blocks/Group/Body.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { GroupBlockDefaultBody } from '@eeacms/volto-group-block/components';
+
+const Body = (props) => {
+  const { variation } = props;
+
+  const BodyComponent = variation?.template || GroupBlockDefaultBody;
+
+  return <BodyComponent {...props} />;
+};
+
+Body.propTypes = {
+  variation: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default Body;

package/src/components/manage/Blocks/Group/DefaultBody.jsx

@@ -0,0 +1,105 @@
+import { Button } from 'semantic-ui-react';
+import { BlocksForm, Icon, RenderBlocks } from '@plone/volto/components';
+import EditBlockWrapper from './EditBlockWrapper';
+
+import helpSVG from '@plone/volto/icons/help.svg';
+
+const GroupBlockDefaultBody = (props) => {
+  const {
+    block,
+    data,
+    onChangeBlock,
+    onChangeField,
+    pathname,
+    selected,
+    selectedBlock,
+    onSelectBlock,
+    setSelectedBlock,
+    manage,
+    childBlocksForm,
+    multiSelected,
+    formDescription,
+    isEditMode,
+  } = props;
+  const metadata = props.metadata || props.properties;
+  const blockState = {};
+
+  // Get editing instructions from block settings or props
+  let instructions = data?.instructions?.data || data?.instructions;
+  if (!instructions || instructions === '<p><br/></p>') {
+    instructions = formDescription;
+  }
+  return isEditMode ? (
+    <BlocksForm
+      metadata={metadata}
+      properties={childBlocksForm}
+      manage={manage}
+      selectedBlock={selected ? selectedBlock : null}
+      allowedBlocks={data.allowedBlocks}
+      title={data.placeholder}
+      description={instructions}
+      onSelectBlock={(id, l, e) => {
+        const isMultipleSelection = e
+          ? e.shiftKey || e.ctrlKey || e.metaKey
+          : false;
+        onSelectBlock(id, isMultipleSelection, e, selectedBlock);
+      }}
+      onChangeFormData={(newFormData) => {
+        onChangeBlock(block, {
+          ...data,
+          data: newFormData,
+        });
+      }}
+      onChangeField={(id, value) => {
+        if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
+          blockState[id] = value;
+          onChangeBlock(block, {
+            ...data,
+            data: {
+              ...data.data,
+              ...blockState,
+            },
+          });
+        } else {
+          onChangeField(id, value);
+        }
+      }}
+      pathname={pathname}
+    >
+      {({ draginfo }, editBlock, blockProps) => (
+        <EditBlockWrapper
+          draginfo={draginfo}
+          blockProps={blockProps}
+          disabled={data.disableInnerButtons}
+          extraControls={
+            <>
+              {instructions && (
+                <>
+                  <Button
+                    icon
+                    basic
+                    title="Section help"
+                    onClick={() => {
+                      setSelectedBlock();
+                      const tab = manage ? 0 : 1;
+                      props.setSidebarTab(tab);
+                    }}
+                  >
+                    <Icon name={helpSVG} className="" size="19px" />
+                  </Button>
+                </>
+              )}
+            </>
+          }
+          multiSelected={multiSelected.includes(blockProps.block)}
+        >
+          {editBlock}
+        </EditBlockWrapper>
+      )}
+    </BlocksForm>
+  ) : (
+    <RenderBlocks metadata={metadata} content={data?.data || {}} />
+  );
+};
+
+export default GroupBlockDefaultBody;

package/src/components/manage/Blocks/Group/Edit.jsx

@@ -1,46 +1,35 @@
 import React, { useState, useCallback } from 'react';
 import { isEmpty, without } from 'lodash';
+import {
+  emptyBlocksForm,
+  withBlockExtensions,
+  getBlocksLayoutFieldname,
+} from '@plone/volto/helpers';
+import BodyComponent from './Body';
+
 import config from '@plone/volto/registry';
 import {
-  BlocksForm,
   SidebarPortal,
-  Icon,
   BlockDataForm,
   BlocksToolbar,
 } from '@plone/volto/components';
-import {
-  emptyBlocksForm,
-  getBlocksLayoutFieldname,
-} from '@plone/volto/helpers';
 import PropTypes from 'prop-types';
-import { Button, Segment } from 'semantic-ui-react';
-import EditBlockWrapper from './EditBlockWrapper';
+import { Segment } from 'semantic-ui-react';
 import EditSchema from './EditSchema';
+
 import CounterComponent from './CounterComponent';
-import helpSVG from '@plone/volto/icons/help.svg';
 import './editor.less';
 
 const Edit = (props) => {
-  const {
-    block,
-    data,
-    onChangeBlock,
-    onChangeField,
-    pathname,
-    selected,
-    manage,
-    formDescription,
-  } = props;
-  const metadata = props.metadata || props.properties;
+  const { block, data, onChangeBlock, selected, formDescription } = props;
   const [multiSelected, setMultiSelected] = useState([]);
   const data_blocks = data?.data?.blocks;
-  const properties = isEmpty(data_blocks) ? emptyBlocksForm() : data.data;
+  const childBlocksForm = isEmpty(data_blocks) ? emptyBlocksForm() : data.data;
 
   const [selectedBlock, setSelectedBlock] = useState(
-    properties.blocks_layout.items[0],
+    childBlocksForm.blocks_layout.items[0],
   );
 
-  const blockState = {};
   const handleKeyDown = (
     e,
     index,
@@ -131,15 +120,15 @@ const Edit = (props) => {
   React.useEffect(() => {
     if (
       isEmpty(data_blocks) &&
-      properties.blocks_layout.items[0] !== selectedBlock
+      childBlocksForm.blocks_layout.items[0] !== selectedBlock
     ) {
-      setSelectedBlock(properties.blocks_layout.items[0]);
+      setSelectedBlock(childBlocksForm.blocks_layout.items[0]);
       onChangeBlock(block, {
         ...data,
-        data: properties,
+        data: childBlocksForm,
       });
     }
-  }, [onChangeBlock, properties, selectedBlock, block, data, data_blocks]);
+  }, [onChangeBlock, childBlocksForm, selectedBlock, block, data, data_blocks]);
 
   // Get editing instructions from block settings or props
   let instructions = data?.instructions?.data || data?.instructions;
@@ -167,6 +156,16 @@ const Edit = (props) => {
       >
         {data.title || 'Section'}
       </legend>
+      <BodyComponent
+        {...props}
+        isEditMode={true}
+        selectedBlock={selectedBlock}
+        setSelectedBlock={setSelectedBlock}
+        multiSelected={multiSelected}
+        setMultiSelected={setMultiSelected}
+        onSelectBlock={onSelectBlock}
+        childBlocksForm={childBlocksForm}
+      />
       {selected ? (
         <BlocksToolbar
           selectedBlock={Object.keys(selectedBlock || {})[0]}
@@ -189,74 +188,6 @@ const Edit = (props) => {
       ) : (
         ''
       )}
-      <BlocksForm
-        metadata={metadata}
-        properties={properties}
-        manage={manage}
-        selectedBlock={selected ? selectedBlock : null}
-        allowedBlocks={data.allowedBlocks}
-        title={data.placeholder}
-        description={instructions}
-        onSelectBlock={(id, l, e) => {
-          const isMultipleSelection = e
-            ? e.shiftKey || e.ctrlKey || e.metaKey
-            : false;
-          onSelectBlock(id, isMultipleSelection, e, selectedBlock);
-        }}
-        onChangeFormData={(newFormData) => {
-          onChangeBlock(block, {
-            ...data,
-            data: newFormData,
-          });
-        }}
-        onChangeField={(id, value) => {
-          if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
-            blockState[id] = value;
-            onChangeBlock(block, {
-              ...data,
-              data: {
-                ...data.data,
-                ...blockState,
-              },
-            });
-          } else {
-            onChangeField(id, value);
-          }
-        }}
-        pathname={pathname}
-      >
-        {({ draginfo }, editBlock, blockProps) => (
-          <EditBlockWrapper
-            draginfo={draginfo}
-            blockProps={blockProps}
-            disabled={data.disableInnerButtons}
-            extraControls={
-              <>
-                {instructions && (
-                  <>
-                    <Button
-                      icon
-                      basic
-                      title="Section help"
-                      onClick={() => {
-                        setSelectedBlock();
-                        const tab = manage ? 0 : 1;
-                        props.setSidebarTab(tab);
-                      }}
-                    >
-                      <Icon name={helpSVG} className="" size="19px" />
-                    </Button>
-                  </>
-                )}
-              </>
-            }
-            multiSelected={multiSelected.includes(blockProps.block)}
-          >
-            {editBlock}
-          </EditBlockWrapper>
-        )}
-      </BlocksForm>
-
       {props.data.maxChars && (
         <CounterComponent {...props} setSelectedBlock={setSelectedBlock} />
       )}
@@ -293,4 +224,4 @@ Edit.propTypes = {
   manage: PropTypes.bool.isRequired,
 };
 
-export default Edit;
+export default withBlockExtensions(Edit);

package/src/components/manage/Blocks/Group/Edit.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Edit from './Edit';
+import { default as Edit } from './Edit';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import thunk from 'redux-thunk';
@@ -15,6 +15,21 @@ const store = mockStore({
   },
 });
 
+jest.mock('@plone/volto/components', () => ({
+  BlocksForm: jest.fn(() => <div className="blocks-form">RenderBlocks</div>),
+  Icon: () => <div>Icon</div>,
+  SidebarPortal: () => <div>SidebarPortal</div>,
+  BlocksToolbar: () => <div>BlocksToolbar</div>,
+  BlockDataForm: () => <div>BlockDataForm</div>,
+  RenderBlocks: jest.fn(() => <div>RenderBlocks</div>),
+}));
+
+jest.mock('@plone/volto/helpers', () => ({
+  withBlockExtensions: jest.fn((Component) => Component),
+  emptyBlocksForm: jest.fn(),
+  getBlocksLayoutFieldname: jest.fn(),
+}));
+
 describe('Edit', () => {
   const onChangeBlock = jest.fn();
   const onChangeField = jest.fn();
@@ -41,6 +56,7 @@ describe('Edit', () => {
     pathname: '/',
     selected: true,
     manage: true,
+    variation: {},
   };
 
   it('should render without crashing', () => {
@@ -101,6 +117,7 @@ describe('Edit', () => {
       pathname: '/',
       selected: true,
       manage: true,
+      variation: {},
     };
     const mockOnFocusPreviousBlock = jest.fn();
     const mockOnFocusNextBlock = jest.fn();
@@ -163,6 +180,7 @@ describe('Edit', () => {
       pathname: '/',
       selected: true,
       manage: true,
+      variation: {},
     };
     const mockOnFocusPreviousBlock = jest.fn();
     const mockOnFocusNextBlock = jest.fn();

package/src/components/manage/Blocks/Group/View.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { RenderBlocks } from '@plone/volto/components';
+import { withBlockExtensions } from '@plone/volto/helpers';
+import BodyComponent from './Body';
 
 const View = (props) => {
   const { data } = props;
-  const metadata = props.metadata || props.properties;
   const CustomTag = `${data.as || 'div'}`;
   const customId = data?.title
     ?.toLowerCase()
@@ -12,9 +12,9 @@ const View = (props) => {
     ?.replace(/\s+/gi, '-');
   return (
     <CustomTag id={customId}>
-      <RenderBlocks {...props} metadata={metadata} content={data?.data || {}} />
+      <BodyComponent {...props} />
     </CustomTag>
   );
 };
 
-export default View;
+export default withBlockExtensions(View);

package/src/components/manage/Blocks/Group/View.test.jsx

@@ -7,6 +7,11 @@ import '@testing-library/jest-dom/extend-expect';
 
 jest.mock('@plone/volto/components', () => ({
   RenderBlocks: jest.fn(() => <div>RenderBlocks</div>),
+  BodyComponent: () => <div>BodyComponent</div>,
+}));
+
+jest.mock('@plone/volto/helpers', () => ({
+  withBlockExtensions: jest.fn((Component) => Component),
 }));
 
 describe('View', () => {
@@ -15,6 +20,7 @@ describe('View', () => {
       data: {},
       metadata: {},
       properties: {},
+      variation: {},
     };
     const component = renderer.create(<View {...props} />);
 
@@ -24,9 +30,12 @@ describe('View', () => {
 
   it('renders with default tag and without crashing', () => {
     const props = {
-      data: {},
+      data: {
+        variation: {},
+      },
       metadata: {},
       properties: {},
+      variation: {},
     };
     const { container } = render(<View {...props} />);
     expect(container.querySelector('div')).toBeInTheDocument();
@@ -40,6 +49,7 @@ describe('View', () => {
         data: { key: 'value' },
       },
       properties: {},
+      variation: {},
     };
     const { container } = render(<View {...props} />);
     expect(container.querySelector('section')).toBeInTheDocument();
@@ -55,6 +65,7 @@ describe('View', () => {
       },
       metadata: { meta: 'data' },
       properties: { prop: 'erty' },
+      variation: {},
     };
     render(<View {...props} />);
     expect(RenderBlocks).toHaveBeenCalledWith(

package/src/index.js

@@ -1,6 +1,10 @@
 import { getBlocks } from '@plone/volto/helpers';
-import { GroupBlockEdit, GroupBlockView, GroupBlockLayout } from './components';
-
+import {
+  GroupBlockEdit,
+  GroupBlockView,
+  GroupBlockLayout,
+  GroupBlockDefaultBody,
+} from './components';
 import codeSVG from '@plone/volto/icons/row.svg';
 
 const applyConfig = (config) => {
@@ -45,6 +49,14 @@ const applyConfig = (config) => {
       addPermission: [],
       view: [],
     },
+    variations: [
+      {
+        id: 'default',
+        isDefault: true,
+        title: 'Default',
+        template: GroupBlockDefaultBody,
+      },
+    ],
     tocEntries: (block = {}, tocData) => {
       // integration with volto-block-toc
       const headlines = tocData.levels || ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];