Merge pull request #20 from eea/develop

Release

CHANGELOG.md

@@ -4,6 +4,16 @@ 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).
 
+### [0.3.4](https://github.com/eea/volto-anchors/compare/0.3.3...0.3.4) - 26 July 2023
+
+#### :rocket: New Features
+
+- feat: add dropdown menu for items in toc getting out of viewport - refs #254302 [Crețu Mihaela - [`db39fec`](https://github.com/eea/volto-anchors/commit/db39fecb6a07d4c9476b1fc16c3c7cd77f08f3c3)]
+
+#### :hammer_and_wrench: Others
+
+- test: Cypress test - refs #253277 [Crețu Mihaela - [`263be0a`](https://github.com/eea/volto-anchors/commit/263be0af99c60f6cad32381f4d95bdf74bd0e329)]
+- test: Add Cypress tests [Crețu Mihaela - [`5c680b9`](https://github.com/eea/volto-anchors/commit/5c680b9866b5779ad4d573f02fdd3d3a95758694)]
 ### [0.3.3](https://github.com/eea/volto-anchors/compare/0.3.2...0.3.3) - 24 July 2023
 
 #### :hammer_and_wrench: Others

README.md

@@ -18,7 +18,7 @@
 
 ## Features
 
-![Anchors](https://github.com/eea/volto-anchors/raw/docs/docs/volto-anchors.gif)
+![Anchors](https://github.com/eea/volto-anchors/raw/develop/docs/volto-anchors.gif)
 
 ## Getting started
 

cypress/e2e/01-anchors-basics.cy.js

@@ -65,4 +65,145 @@ describe('Block Tests: Anchors', () => {
     cy.get('h2[id="title-1"]').contains('Title 1');
     cy.get('h2[id="title-2"]').contains('Title 2');
   });
+
+  it('Add Block: add horizontal TOC', () => {
+    // Change page title
+    cy.clearSlateTitle();
+    cy.getSlateTitle().type('Volto Anchors');
+    cy.getSlate().click();
+
+    // Add TOC block
+    cy.get('.ui.basic.icon.button.block-add-button').first().click();
+    cy.get(".blocks-chooser .ui.form .field.searchbox input[type='text']").type(
+      'table of contents',
+    );
+    cy.get('.button.toc').click();
+    cy.get('#sidebar-properties .form .react-select-container').first().click();
+    cy.contains('Horizontal Menu').click();
+    cy.contains('Sticky').click();
+
+    // Add headings
+    cy.get('.ui.drag.block.inner.slate')
+      .click()
+      .type('Lorem ipsum dolor sit amet')
+      .click();
+    cy.get('.ui.drag.block.inner.slate span span span').setSelection(
+      'Lorem ipsum dolor sit amet',
+    );
+    cy.get('.slate-inline-toolbar .button-wrapper a[title="Title"]').click({
+      force: true,
+    });
+    cy.get('.ui.drag.block.inner.slate').click().type('{enter}');
+
+    cy.get('.ui.drag.block.inner.slate')
+      .eq(1)
+      .click()
+      .type('Lorem ipsum dolor sit amet')
+      .click();
+    cy.get('.ui.drag.block.inner.slate span span span')
+      .eq(1)
+      .setSelection('Lorem ipsum dolor sit amet');
+    cy.get('.slate-inline-toolbar .button-wrapper a[title="Title"]').click({
+      force: true,
+    });
+    cy.get('.ui.drag.block.inner.slate').eq(1).click().type('{enter}');
+
+    cy.get('.ui.drag.block.inner.slate')
+      .eq(2)
+      .click()
+      .type('Lorem ipsum dolor sit amet')
+      .click();
+    cy.get('.ui.drag.block.inner.slate span span span')
+      .eq(2)
+      .setSelection('Lorem ipsum dolor sit amet');
+    cy.get('.slate-inline-toolbar .button-wrapper a[title="Title"]').click({
+      force: true,
+    });
+    cy.get('.ui.drag.block.inner.slate').eq(2).click().type('{enter}');
+
+    cy.get('.ui.drag.block.inner.slate')
+      .eq(3)
+      .click()
+      .type('Lorem ipsum dolor sit amet')
+      .click();
+    cy.get('.ui.drag.block.inner.slate span span span')
+      .eq(3)
+      .setSelection('Lorem ipsum dolor sit amet');
+    cy.get('.slate-inline-toolbar .button-wrapper a[title="Title"]').click({
+      force: true,
+    });
+    cy.get('.ui.drag.block.inner.slate').eq(3).click().type('{enter}');
+
+    cy.get('.ui.drag.block.inner.slate')
+      .eq(4)
+      .click()
+      .type('Lorem ipsum dolor sit amet')
+      .click();
+    cy.get('.ui.drag.block.inner.slate span span span')
+      .eq(4)
+      .setSelection('Lorem ipsum dolor sit amet');
+    cy.get('.slate-inline-toolbar .button-wrapper a[title="Title"]').click({
+      force: true,
+    });
+    cy.get('.ui.drag.block.inner.slate').eq(4).click().type('{enter}');
+
+    cy.get('.ui.drag.block.inner.slate')
+      .eq(5)
+      .click()
+      .type('Lorem ipsum dolor sit amet')
+      .click();
+    cy.get('.ui.drag.block.inner.slate span span span')
+      .eq(5)
+      .setSelection('Lorem ipsum dolor sit amet');
+    cy.get('.slate-inline-toolbar .button-wrapper a[title="Title"]').click({
+      force: true,
+    });
+    cy.get('.ui.drag.block.inner.slate').eq(5).click().type('{enter}');
+
+    cy.get('.ui.drag.block.inner.slate')
+      .eq(6)
+      .click()
+      .type('Lorem ipsum dolor sit amet')
+      .click();
+    cy.get('.ui.drag.block.inner.slate span span span')
+      .eq(6)
+      .setSelection('Lorem ipsum dolor sit amet');
+    cy.get('.slate-inline-toolbar .button-wrapper a[title="Title"]').click({
+      force: true,
+    });
+    cy.get('.ui.drag.block.inner.slate').eq(6).click().type('{enter}');
+
+    cy.get('.ui.drag.block.inner.slate')
+      .eq(7)
+      .click()
+      .type('Lorem ipsum dolor sit amet')
+      .click();
+    cy.get('.ui.drag.block.inner.slate span span span')
+      .eq(7)
+      .setSelection('Lorem ipsum dolor sit amet');
+    cy.get('.slate-inline-toolbar .button-wrapper a[title="Title"]').click({
+      force: true,
+    });
+    cy.get('.ui.drag.block.inner.slate').eq(7).click().type('{enter}');
+
+    // Save page
+    cy.get('#toolbar-save').click();
+    cy.url().should('eq', Cypress.config().baseUrl + '/cypress/my-page');
+
+    // Check if the page contains the TOC and the dropdown button
+    cy.contains('Volto Anchors');
+    cy.get('.table-of-contents  .dropdown').contains('More').click();
+
+    // Ensure that the dropdown menu is visible
+    cy.get('.menu.transition').should('be.visible');
+    cy.get('body').type('{downArrow}');
+    cy.get('body').type('{downArrow}');
+
+    // Verify that the item from the dropdown menu is focused
+    cy.get('.item.focused').should('have.text', 'Lorem ipsum dolor sit amet');
+
+    // Press the "Enter" key adn verify that the dropdown is closed
+    cy.get('body').type('{enter}');
+    cy.get('.menu.transition').should('not.be.visible');
+  });
 });

package.json

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

src/customizations/volto/components/manage/Blocks/ToC/Schema.jsx

@@ -0,0 +1,51 @@
+const TableOfContentsSchema = ({ data }) => {
+  const { variation = 'default' } = data;
+
+  return {
+    title: 'Table of Contents',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'title',
+          'hide_title',
+          ...(variation === 'default' ? ['ordered'] : ['sticky']),
+          'levels',
+        ],
+      },
+    ],
+    properties: {
+      title: {
+        title: 'Block title',
+      },
+      hide_title: {
+        title: 'Hide title',
+        type: 'boolean',
+      },
+      levels: {
+        title: 'Entries',
+        isMulti: true,
+        choices: [
+          ['h1', 'h1'],
+          ['h2', 'h2'],
+          ['h3', 'h3'],
+          ['h4', 'h4'],
+          ['h5', 'h5'],
+          ['h6', 'h6'],
+        ],
+      },
+      ordered: {
+        title: 'Ordered',
+        type: 'boolean',
+      },
+      sticky: {
+        title: 'Sticky',
+        type: 'boolean',
+      },
+    },
+    required: [],
+  };
+};
+
+export default TableOfContentsSchema;