@eeacms/volto-eea-website-theme 1.6.4 → 1.8.0

package/CHANGELOG.md

@@ -4,6 +4,42 @@ 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).
 
+### [1.8.0](https://github.com/eea/volto-eea-website-theme/compare/1.7.0...1.8.0) - 8 February 2023
+
+#### :rocket: New Features
+
+- feat(align): Move text align to slate buttons - refs 160747 [Alin Voinea - [`24d8fe5`](https://github.com/eea/volto-eea-website-theme/commit/24d8fe5a74afc2b61dc622b368d3fe5b8b422390)]
+
+#### :nail_care: Enhancements
+
+- change(object-browser): Popup is hoverable in object browser nav #99 from eea/object_browser_nav_popup_hoverable [ichim-david - [`205c2c4`](https://github.com/eea/volto-eea-website-theme/commit/205c2c48803ce5814f71aea932038bf72272459e)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.8.0 [Alin Voinea - [`f15437f`](https://github.com/eea/volto-eea-website-theme/commit/f15437f9c9fd978431d3af48410d3ab9746be9fb)]
+- Popup is hoverable in object browser nav [andreiggr - [`a944bff`](https://github.com/eea/volto-eea-website-theme/commit/a944bff8026b40c481bec474f2b509dc5c8b044a)]
+### [1.7.0](https://github.com/eea/volto-eea-website-theme/compare/1.6.4...1.7.0) - 8 February 2023
+
+#### :rocket: New Features
+
+- feat(slate): Remove blockquote, italic, strikethrough slate button from expandedToolbarButtons - refs #160747 [Alin Voinea - [`c5a2684`](https://github.com/eea/volto-eea-website-theme/commit/c5a268428737374802a02c69fd6d24ddc5a8d3d3)]
+- feat(slate): Remove 'underline' and 'italic' hotkeys - refs #160747 [Alin Voinea - [`82b6404`](https://github.com/eea/volto-eea-website-theme/commit/82b6404b044cc15f3612cee36c0ddef5973dfeeb)]
+- feat(slate-buttons): Remove Italic, Strikethrough; Add Light, small - refs #160747 [Alin Voinea - [`7a78b42`](https://github.com/eea/volto-eea-website-theme/commit/7a78b42cf2158daa4a7d7ecc3f64611d4321147d)]
+
+#### :nail_care: Enhancements
+
+- change(object-browser): Use scale for img in obj browser and preview in popup #95 from eea/image_preview_object_browser [ichim-david - [`ac8f233`](https://github.com/eea/volto-eea-website-theme/commit/ac8f2333f46de737ccad5e10531f4deedc24c57f)]
+- change(header): Add link in search popup to the search landing page #94 from eea/search-popup [ichim-david - [`fe7aab9`](https://github.com/eea/volto-eea-website-theme/commit/fe7aab90fc51dbb3aa4fb961470fe9bd73938314)]
+- refactor(styleMenu): remove bordered styles #93 from eea/remove-bordered-styles [ichim-david - [`24bab89`](https://github.com/eea/volto-eea-website-theme/commit/24bab8912831e0b0ee30d8508400359c2f26893f)]
+- change(header): Add link in search popup to the landing page [kreafox - [`d1e97df`](https://github.com/eea/volto-eea-website-theme/commit/d1e97df9766ef43d34c09c7c993123edf4dc0e0a)]
+- change(header): Add link in search popup to the landing page [kreafox - [`9a8ec3a`](https://github.com/eea/volto-eea-website-theme/commit/9a8ec3aff4f37c562d6e377b9d4c2a48fc5c451a)]
+- refactor(styleMenu): remove bordered styles [nileshgulia1 - [`97a7079`](https://github.com/eea/volto-eea-website-theme/commit/97a707934343cde875a59f33751d2c61267ddf7d)]
+- refactor(config): Move some common settings from volto-eea-website-policy - refs #160747 [Alin Voinea - [`a40b6a3`](https://github.com/eea/volto-eea-website-theme/commit/a40b6a3719140a9be343e7d1aeca3d7098f3b1be)]
+- change(theme widget): the first value is no value [ichim-david - [`12b8a5a`](https://github.com/eea/volto-eea-website-theme/commit/12b8a5ada013d7f28c89b596e2675e8cb0bfbb5e)]
+
+#### :hammer_and_wrench: Others
+
+- Use scale for img in obj browser and preview in popup [andreiggr - [`e78e21d`](https://github.com/eea/volto-eea-website-theme/commit/e78e21d0b35d69242833914ff41455f24d31927b)]
 ### [1.6.4](https://github.com/eea/volto-eea-website-theme/compare/1.6.3...1.6.4) - 31 January 2023
 
 #### :bug: Bug Fixes
@@ -50,7 +86,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - For some reasons types is a string [Alin Voinea - [`3769a09`](https://github.com/eea/volto-eea-website-theme/commit/3769a0981181d5b633f3498daebbe96be8b4b833)]
 - Fix(redirect): o.filter - refs #157627 [Alin Voinea - [`deb23da`](https://github.com/eea/volto-eea-website-theme/commit/deb23da846444cc96539697fd798429ae0abe89e)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`f1fffc5`](https://github.com/eea/volto-eea-website-theme/commit/f1fffc5db96725440863d545580b4e76cce4b796)]
 ### [1.5.0](https://github.com/eea/volto-eea-website-theme/compare/1.4.2...1.5.0) - 9 January 2023
 
 #### :hammer_and_wrench: Others
@@ -84,7 +119,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 1.4.0 [Alin Voinea - [`bd42a0d`](https://github.com/eea/volto-eea-website-theme/commit/bd42a0d26e928cac5d99933194755da3db06b341)]
 - bump version to use as volto-eea-design-system [David Ichim - [`f4be047`](https://github.com/eea/volto-eea-website-theme/commit/f4be047328b46399b03b612d378b18aaf82e7dc1)]
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`9b7cfef`](https://github.com/eea/volto-eea-website-theme/commit/9b7cfefb4d34fc1c948015e491feb370f9795bd8)]
 - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`df252a9`](https://github.com/eea/volto-eea-website-theme/commit/df252a9bfed0bb86cadf53c59dd1603b1e2cd822)]
 ### [1.3.2](https://github.com/eea/volto-eea-website-theme/compare/1.3.1...1.3.2) - 16 December 2022
 
@@ -94,7 +128,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`a43c658`](https://github.com/eea/volto-eea-website-theme/commit/a43c658a7920c8df95e763b9a637f38ce77eba2c)]
 - Better razzle.config [Tiberiu Ichim - [`81dbf48`](https://github.com/eea/volto-eea-website-theme/commit/81dbf48815fb27facb4f82c9b764540fdf188b2e)]
 - Better razzle.config [Tiberiu Ichim - [`7bc9da2`](https://github.com/eea/volto-eea-website-theme/commit/7bc9da2cd837ab62a95cd29979cdd9b0055b7d67)]
 ### [1.3.1](https://github.com/eea/volto-eea-website-theme/compare/1.3.0...1.3.1) - 28 November 2022
@@ -103,9 +136,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - feat(Footer): Bring back footer contacts extra actions - refs #151856 [Alin Voinea - [`6c19413`](https://github.com/eea/volto-eea-website-theme/commit/6c194139420c9fd847692d180db1c1593e2483de)]
 
-#### :hammer_and_wrench: Others
-
-- yarn 3 [Alin Voinea - [`ea7a709`](https://github.com/eea/volto-eea-website-theme/commit/ea7a7094945312776e9b6f44e371178603e92139)]
 ### [1.3.0](https://github.com/eea/volto-eea-website-theme/compare/1.2.0...1.3.0) - 22 November 2022
 
 #### :rocket: New Features
@@ -146,7 +176,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Add subsite class to body [Tiberiu Ichim - [`74d700f`](https://github.com/eea/volto-eea-website-theme/commit/74d700fbfd6249a8604762a7e4e49cce857db0f3)]
 - Add subsite info to header [Tiberiu Ichim - [`47daf8b`](https://github.com/eea/volto-eea-website-theme/commit/47daf8bb6374a1222040626b19d4154df7ba1b83)]
 - fix eslint [Miu Razvan - [`eb8d0a7`](https://github.com/eea/volto-eea-website-theme/commit/eb8d0a790bc70c0aae256c6ff35f63c4885f338e)]
-- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`cc578a4`](https://github.com/eea/volto-eea-website-theme/commit/cc578a413b205a8e61e091fab3a88f94cedefc89)]
 ### [1.1.0](https://github.com/eea/volto-eea-website-theme/compare/1.0.0...1.1.0) - 28 October 2022
 
 #### :nail_care: Enhancements
@@ -194,7 +223,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`33b56ac`](https://github.com/eea/volto-eea-website-theme/commit/33b56acb13fbaf0c5b79e8fc6e13c4b699c79c90)]
 ### [0.7.3](https://github.com/eea/volto-eea-website-theme/compare/0.7.2...0.7.3) - 22 September 2022
 
 #### :hammer_and_wrench: Others
@@ -462,7 +490,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Header refactor, add custom logo #5 [ichim-david - [`4950235`](https://github.com/eea/volto-eea-website-theme/commit/49502358105437cfeac3b144e6d301cb59aa2346)]
 - Update footer.config with new publication card component [ichim-david - [`2e38e9a`](https://github.com/eea/volto-eea-website-theme/commit/2e38e9a417f835009d60c80d4eb4b30229f55e45)]
 - feature(breadcrumbs): implement eea-design-system breadcrumb as Volto component #32 #7 [ichim-david - [`181af41`](https://github.com/eea/volto-eea-website-theme/commit/181af4125ce2b9ddac56dab4723cb11c26633221)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`da8ceb6`](https://github.com/eea/volto-eea-website-theme/commit/da8ceb68ea68bfbc9504e48ccd4d68277f11ab9a)]
 - use breadcrumbs from eea-design-system [nileshgulia1 - [`db2f9e9`](https://github.com/eea/volto-eea-website-theme/commit/db2f9e9a4327420a3cce9a9903cd88549b129eab)]
 - Update theme.config [ichim-david - [`8eca4f4`](https://github.com/eea/volto-eea-website-theme/commit/8eca4f40397a4aeca6d39029c92db78968d37064)]
 - Added keyContent component to theme.config [ichim-david - [`d86f202`](https://github.com/eea/volto-eea-website-theme/commit/d86f202d0274d839487a88b51cae9a0e899beb23)]
@@ -504,5 +531,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- yarn bootstrap [Alin Voinea - [`6995e9e`](https://github.com/eea/volto-eea-website-theme/commit/6995e9e091f21fdbbdffa8a44fc0e2c626f6d46a)]
 - Initial commit [Alin Voinea - [`6a9c03a`](https://github.com/eea/volto-eea-website-theme/commit/6a9c03a7cebe71ca87e82cf58c42904063e9d8d3)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.6.4",
+  "version": "1.8.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -22,7 +22,7 @@
     "url": "git@github.com:eea/volto-eea-website-theme.git"
   },
   "dependencies": {
-    "@eeacms/volto-eea-design-system": "^1.0.0-alpha.12",
+    "@eeacms/volto-eea-design-system": "^1.0.0-alpha.15",
     "volto-subsites": "*"
   },
   "devDependencies": {

package/src/config.js

@@ -259,6 +259,9 @@ export const headerSearchBox = [
     isDefault: true,
     path: '/en/advanced-search',
     placeholder: 'Search...',
+    description:
+      'Looking for more information? Try searching the full EEA website content',
+    buttonTitle: 'Go to full site search',
   },
   {
     path: '/en/datahub',

package/src/customizations/@eeacms/volto-block-style/StyleWrapper/schema.js

@@ -12,32 +12,12 @@ export const StyleSchema = () => {
         title: 'Preset styles',
         fields: ['style_name'],
       },
-      {
-        id: 'text',
-        title: 'Text',
-        fields: ['textAlign', 'fontWeight'],
-      },
     ],
     properties: {
       style_name: {
         title: 'Style',
         widget: 'style_select',
       },
-      textAlign: {
-        title: 'Text align',
-        widget: 'style_text_align',
-      },
-      fontWeight: {
-        title: 'Font weight',
-        description: 'The weight (or boldness) of the font',
-        choices: [
-          ['300', 'Light'],
-          ['400', 'Regular'],
-          ['500', 'Medium'],
-          ['600', 'SemiBold'],
-          ['700', 'Bold'],
-        ],
-      },
     },
     required: [],
   };

package/src/customizations/@eeacms/volto-eea-design-system/ui/Header/HeaderSearchPopUp.js

@@ -59,7 +59,7 @@ function HeaderSearchPopUp({
           </div>
         </Container>
       </form>
-      {(activeView.description || activeView.buttonTitle) && (
+      {activeView.buttonTitle && (
         <div className="advanced-search">
           <Container>
             <p>{activeView.description}</p>

package/src/customizations/@plone/volto-slate/editor/README.txt

@@ -0,0 +1,2 @@
+This is customized because of stupid logic implemented in the attributes
+calculation. This should be moved to volto proper. The difference is in Element

package/src/customizations/@plone/volto-slate/editor/render.jsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { Node, Text } from 'slate';
+import cx from 'classnames';
+import { isEmpty, isEqual, omit } from 'lodash';
+import config from '@plone/volto/registry';
+
+const OMITTED = ['editor', 'path'];
+
+// TODO: read, see if relevant
+// https://reactjs.org/docs/higher-order-components.html#dont-use-hocs-inside-the-render-method
+export const Element = ({ element, attributes = {}, extras, ...rest }) => {
+  const { slate } = config.settings;
+  const { elements } = slate;
+  const El = elements[element.type] || elements['default'];
+
+  // CUSTOMIZATION Code fix
+  const attrs = Object.keys(attributes || {}).reduce(
+    (acc, k) => {
+      if (!isEmpty(attributes[k])) {
+        if (k === 'className') {
+          acc.className = cx(attributes.className, acc.className);
+        } else {
+          acc[k] = attributes[k];
+        }
+      }
+      return acc;
+    },
+    element.styleName ? { className: element.styleName } : {},
+  );
+  // END CUSTOMIZATION
+
+  attrs.ref = attributes?.ref; // never remove the ref
+
+  return (
+    <El
+      element={element}
+      {...omit(rest, OMITTED)}
+      attributes={attrs}
+      extras={extras}
+    />
+  );
+};
+
+export const Leaf = ({ children, ...rest }) => {
+  const { attributes, leaf, mode } = rest;
+  let { leafs } = config.settings.slate;
+
+  children = Object.keys(leafs).reduce((acc, name) => {
+    return Object.keys(leaf).includes(name)
+      ? leafs[name]({ children: acc })
+      : acc;
+  }, children);
+
+  const classNames = {
+    [`highlight-${leaf.highlightType}`]: mode !== 'view' && leaf.highlightType,
+    'highlight-selection': mode !== 'view' && leaf.isSelection,
+  };
+
+  // stylemenu support
+  for (const prop in leaf) {
+    if (prop.startsWith('style-')) {
+      classNames[prop.substring(6)] = true;
+    }
+  }
+
+  const klass = cx(classNames);
+
+  return mode === 'view' ? (
+    typeof children === 'string' ? (
+      children.split('\n').map((t, i) => {
+        // Softbreak support. Should do a plugin?
+        return (
+          <React.Fragment key={`${i}`}>
+            {children.indexOf('\n') > -1 &&
+            children.split('\n').length - 1 > i ? (
+              <>
+                {klass ? <span className={klass}>{t}</span> : t}
+                <br />
+              </>
+            ) : klass ? (
+              <span className={klass}>{t}</span>
+            ) : (
+              t
+            )}
+          </React.Fragment>
+        );
+      })
+    ) : (
+      <span className={klass}>{children}</span>
+    )
+  ) : (
+    <span {...attributes} className={klass}>
+      {children}
+    </span>
+  );
+};
+
+const serializeData = (node) => {
+  return JSON.stringify({ type: node.type, data: node.data });
+};
+
+export const serializeNodes = (nodes, getAttributes, extras = {}) => {
+  const editor = { children: nodes || [] };
+
+  const _serializeNodes = (nodes) => {
+    return (nodes || []).map(([node, path], i) => {
+      return Text.isText(node) ? (
+        <Leaf path={path} leaf={node} text={node} mode="view" key={path}>
+          {node.text}
+        </Leaf>
+      ) : (
+        <Element
+          path={path}
+          element={node}
+          mode="view"
+          key={path}
+          data-slate-data={node.data ? serializeData(node) : null}
+          attributes={
+            isEqual(path, [0])
+              ? getAttributes
+                ? getAttributes(node, path)
+                : null
+              : null
+          }
+          extras={extras}
+        >
+          {_serializeNodes(Array.from(Node.children(editor, path)))}
+        </Element>
+      );
+    });
+  };
+
+  return _serializeNodes(Array.from(Node.children(editor, [])));
+};
+
+/**
+ * Get the concatenated text string of a node's content.
+ *
+ * Note that this WILL include spaces between block node leafs in contrary to
+ * the original slate method. This function joins text of nodes with
+ * separating spaces to produce a string for indexing purposes.
+ *
+ */
+const ConcatenatedString = (node) => {
+  if (Text.isText(node)) {
+    return node.text.trim();
+  } else {
+    return node.children.map(ConcatenatedString).join(' ');
+  }
+};
+
+/**
+ * @function serializeNodesToText
+ *
+ * @param {Array[Node]} nodes
+ *
+ * @returns {string}
+ */
+export const serializeNodesToText = (nodes) => {
+  return nodes.map(ConcatenatedString).join('\n');
+};
+
+export const serializeNodesToHtml = (nodes) =>
+  renderToStaticMarkup(serializeNodes(nodes));

package/src/customizations/volto/components/manage/Sidebar/ObjectBrowserNav.jsx

@@ -71,10 +71,21 @@ const ObjectBrowserNav = ({
           >
             <span title={`${item['@id']} (${item['@type']})`}>
               <Popup
+                hoverable
                 key={item['@id']}
                 content={
                   <>
-                    <Icon name={homeSVG} size="18px" />{' '}
+                    {item['@type'] === 'Image' && (
+                      <Image
+                        style={{
+                          marginLeft: 'auto',
+                          marginRight: 'auto',
+                          marginBottom: '5px',
+                        }}
+                        src={`${item?.getURL}/@@images/image/mini`}
+                      />
+                    )}
+                    <Icon name={homeSVG} size="18px" />
                     {flattenToAppURL(item['@id'])} ( {item['@type']})
                   </>
                 }
@@ -82,7 +93,7 @@ const ObjectBrowserNav = ({
                   <span>
                     {item['@type'] === 'Image' ? (
                       <Image
-                        src={`${item?.getURL}/@@images/image`}
+                        src={`${item?.getURL}/@@images/image/icon`}
                         style={{
                           marginRight: '10px',
                           maxHeight: '24px',

package/src/customizations/volto/components/theme/View/EventView.jsx

@@ -6,9 +6,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
-import { Image, Grid } from 'semantic-ui-react';
+import { Image } from 'semantic-ui-react';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import { EventDetails } from '@plone/volto/components';
+import './style.less';
 
 const EventTextfieldView = ({ content }) => (
   <React.Fragment>
@@ -44,18 +45,14 @@ const EventView = (props) => {
 
   return (
     <div id="page-document" className="ui container viewwrapper event-view">
-      <Grid>
-        <Grid.Column mobile={12} tablet={7} computer={7}>
-          {hasBlocksData(content) ? (
-            <RenderBlocks {...props} />
-          ) : (
-            <EventTextfieldView {...props} />
-          )}
-        </Grid.Column>
-        <Grid.Column mobile={12} tablet={5} computer={5}>
-          <EventDetails content={content} />
-        </Grid.Column>
-      </Grid>
+      <div className="event-view-box">
+        <EventDetails content={content} />
+      </div>
+      {hasBlocksData(content) ? (
+        <RenderBlocks {...props} />
+      ) : (
+        <EventTextfieldView {...props} />
+      )}
     </div>
   );
 };

package/src/customizations/volto/components/theme/View/style.less

@@ -0,0 +1,17 @@
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple, reference, optional) '../../theme.config';
+
+.event-view-box {
+  position: relative;
+  top: -5vh;
+  right: 0vw;
+}
+
+@media only screen and (max-width: @largestMobileScreen) {
+  .event-view-box aside {
+    margin-left: 0 !important;
+    float: none !important;
+  }
+}

package/src/icons/content-box-src.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="90mm"
+   height="90mm"
+   version="1.1"
+   viewBox="0 0 90 90"
+   id="svg8"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs12" />
+  <text
+     x="44.72715"
+     y="38.463978"
+     fill="#000000"
+     font-family="sans-serif"
+     font-size="16.933px"
+     letter-spacing="0px"
+     stroke-width=".26458"
+     text-align="center"
+     text-anchor="middle"
+     word-spacing="0px"
+     style="line-height:1.5"
+     xml:space="preserve"
+     id="text6"><tspan
+       x="44.72715"
+       y="38.463978"
+       text-align="center"
+       id="tspan2">Content</tspan><tspan
+       x="44.72715"
+       y="63.863926"
+       text-align="center"
+       id="tspan4">Box</tspan></text>
+</svg>

package/src/icons/content-box.svg

@@ -1,5 +1,14 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
 <svg width="90mm" height="90mm" version="1.1" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg">
- <text x="44.72715" y="38.463978" fill="#000000" font-family="sans-serif" font-size="16.933px" letter-spacing="0px" stroke-width=".26458" text-align="center" text-anchor="middle" word-spacing="0px" style="line-height:1.5" xml:space="preserve"><tspan x="44.72715" y="38.463978" text-align="center">Content</tspan><tspan x="44.72715" y="63.863926" text-align="center">Box</tspan></text>
+ <g stroke-width=".26458" aria-label="ContentBox">
+  <path d="m21.961 27.071v1.7611q-0.84334-0.78547-1.8024-1.1741-0.95083-0.3886-2.0257-0.3886-2.1166 0-3.2411 1.2981-1.1245 1.2898-1.1245 3.7372 0 2.4391 1.1245 3.7372 1.1245 1.2898 3.2411 1.2898 1.0748 0 2.0257-0.3886 0.9591-0.3886 1.8024-1.1741v1.7446q-0.87642 0.5953-1.8603 0.89295-0.97563 0.29765-2.067 0.29765-2.8029 0-4.4151-1.7115-1.6123-1.7198-1.6123-4.688 0-2.9765 1.6123-4.688 1.6123-1.7198 4.4151-1.7198 1.1079 0 2.0836 0.29765 0.9839 0.28938 1.8438 0.87642z"/>
+  <path d="m28.063 30.27q-1.2237 0-1.9347 0.9591-0.71105 0.95083-0.71105 2.6127 0 1.6619 0.70278 2.621 0.71105 0.95083 1.943 0.95083 1.2154 0 1.9265-0.9591 0.71105-0.9591 0.71105-2.6127 0-1.6453-0.71105-2.6044-0.71105-0.96736-1.9265-0.96736zm0-1.2898q1.9843 0 3.1171 1.2898 1.1327 1.2898 1.1327 3.5718 0 2.2737-1.1327 3.5718-1.1327 1.2898-3.1171 1.2898-1.9926 0-3.1253-1.2898-1.1245-1.2981-1.1245-3.5718 0-2.282 1.1245-3.5718 1.1327-1.2898 3.1253-1.2898z"/>
+  <path d="m42.532 32.875v5.5892h-1.5213v-5.5396q0-1.3146-0.51262-1.9678-0.51262-0.65318-1.5379-0.65318-1.2319 0-1.943 0.78547-0.71105 0.78547-0.71105 2.1414v5.2337h-1.5296v-9.2602h1.5296v1.4386q0.54569-0.83508 1.2816-1.2485 0.74413-0.4134 1.7115-0.4134 1.5957 0 2.4143 0.99217 0.81854 0.9839 0.81854 2.9021z"/>
+  <path d="m47.071 26.574v2.6292h3.1336v1.1823h-3.1336v5.027q0 1.1327 0.30592 1.4552 0.31419 0.32246 1.265 0.32246h1.5627v1.2733h-1.5627q-1.7611 0-2.4308-0.65318-0.66971-0.66145-0.66971-2.3977v-5.027h-1.1162v-1.1823h1.1162v-2.6292z"/>
+  <path d="m60.126 33.454v0.74413h-6.9948q0.09922 1.5709 0.94256 2.3977 0.85161 0.81854 2.3647 0.81854 0.87642 0 1.695-0.21497 0.82681-0.21497 1.6371-0.64491v1.4386q-0.81854 0.34726-1.6784 0.52916-0.85988 0.1819-1.7446 0.1819-2.2158 0-3.5139-1.2898-1.2898-1.2898-1.2898-3.4891 0-2.2737 1.2237-3.6049 1.2319-1.3394 3.3155-1.3394 1.8686 0 2.9517 1.2071 1.0914 1.1989 1.0914 3.2659zm-1.5213-0.44648q-0.01654-1.2485-0.70279-1.9926-0.67798-0.74413-1.8024-0.74413-1.2733 0-2.0422 0.71932-0.76066 0.71932-0.87642 2.0257z"/>
+  <path d="m70.321 32.875v5.5892h-1.5213v-5.5396q0-1.3146-0.51262-1.9678-0.51262-0.65318-1.5379-0.65318-1.2319 0-1.943 0.78547-0.71105 0.78547-0.71105 2.1414v5.2337h-1.5296v-9.2602h1.5296v1.4386q0.54569-0.83508 1.2816-1.2485 0.74413-0.4134 1.7115-0.4134 1.5957 0 2.4143 0.99217 0.81854 0.9839 0.81854 2.9021z"/>
+  <path d="m74.86 26.574v2.6292h3.1336v1.1823h-3.1336v5.027q0 1.1327 0.30592 1.4552 0.31419 0.32246 1.265 0.32246h1.5627v1.2733h-1.5627q-1.7611 0-2.4308-0.65318-0.66971-0.66145-0.66971-2.3977v-5.027h-1.1162v-1.1823h1.1162v-2.6292z"/>
+  <path d="m32.321 57.969v4.5226h2.6789q1.3477 0 1.9926-0.55396 0.65318-0.56223 0.65318-1.7115 0-1.1575-0.65318-1.7032-0.64491-0.55396-1.9926-0.55396zm0-5.0766v3.7206h2.4722q1.2237 0 1.819-0.45474 0.60357-0.46301 0.60357-1.4056 0-0.93429-0.60357-1.3973-0.5953-0.46301-1.819-0.46301zm-1.6702-1.3725h4.2663q1.9099 0 2.9434 0.79374 1.0335 0.79373 1.0335 2.2572 0 1.1327-0.52916 1.8024-0.52916 0.66971-1.5544 0.83507 1.2319 0.26458 1.9099 1.1079 0.68625 0.83508 0.68625 2.0918 0 1.6536-1.1245 2.5548-1.1245 0.90122-3.1997 0.90122h-4.4317z"/>
+  <path d="m45.79 55.67q-1.2237 0-1.9347 0.9591-0.71105 0.95083-0.71105 2.6127 0 1.6619 0.70279 2.621 0.71105 0.95083 1.943 0.95083 1.2154 0 1.9265-0.9591 0.71105-0.9591 0.71105-2.6127 0-1.6453-0.71105-2.6044-0.71105-0.96736-1.9265-0.96736zm0-1.2898q1.9843 0 3.1171 1.2898 1.1327 1.2898 1.1327 3.5718 0 2.2737-1.1327 3.5718-1.1327 1.2898-3.1171 1.2898-1.9926 0-3.1253-1.2898-1.1245-1.2981-1.1245-3.5718 0-2.282 1.1245-3.5718 1.1327-1.2898 3.1253-1.2898z"/>
+  <path d="m59.738 54.604-3.3486 4.5061 3.5222 4.7541h-1.7942l-2.6954-3.6379-2.6954 3.6379h-1.7942l3.5966-4.8451-3.2907-4.4151h1.7942l2.4556 3.299 2.4556-3.299z"/>
+ </g>
 </svg>

package/src/icons/light-src.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="36"
+   height="36"
+   viewBox="0 0 36 36"
+   version="1.1"
+   id="svg4"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <text
+     xml:space="preserve"
+     style="font-size:42.6667px;line-height:1.25;font-family:'Serto Urhoy';-inkscape-font-specification:'Serto Urhoy';letter-spacing:0px;word-spacing:0px"
+     x="5.9687409"
+     y="30.979166"
+     id="text349"><tspan
+       id="tspan347"
+       x="5.9687409"
+       y="30.979166"
+       style="font-size:42.6667px">L</tspan></text>
+</svg>

package/src/icons/light.svg

@@ -0,0 +1,5 @@
+<svg width="36" height="36" version="1.1" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+ <g aria-label="L">
+  <path d="m26.906 30.979-16.646 0.02083q-1.1667 0-1.1667-0.875 0-0.89583 1.1667-0.89583h1.4792l0.02083-20.875h-1.4792q-1.1667 0-1.1667-0.89583 0-0.875 1.1042-0.875h4.8333q1.1042 0 1.1042 0.875 0 0.89583-1.1667 0.89583h-1.4792v20.875h11.646l-0.02083-1.4792q0-1.1667 0.89583-1.1667 0.875 0 0.875 1.1042z"/>
+ </g>
+</svg>

package/src/icons/small-src.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="36"
+   height="36"
+   viewBox="0 0 36 36"
+   version="1.1"
+   id="svg4"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <text
+     xml:space="preserve"
+     style="font-size:42.6667px;line-height:1.25;font-family:'Serto Urhoy';-inkscape-font-specification:'Serto Urhoy';letter-spacing:0px;word-spacing:0px"
+     x="5.9687409"
+     y="30.979166"
+     id="text349"><tspan
+       id="tspan347"
+       x="5.9687409"
+       y="30.979166"
+       style="font-size:42.6667px">s</tspan></text>
+</svg>

package/src/icons/small.svg

@@ -0,0 +1,5 @@
+<svg width="36" height="36" version="1.1" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+ <g aria-label="s">
+  <path d="m24.427 26.5q0 2.625-2.625 4.0208-2.125 1.125-5 1.125-3.75 0-6.125-1.8958 0.0625 1.2917-0.79167 1.2917-0.79167 0-0.79167-1.0625v-3.25q0-1.0625 0.79167-1.0625 0.58333 0 0.83333 0.91667 0.35417 1.3125 0.39583 1.3958 1.375 2.1042 5.625 2.1042 2.1667 0 3.875-0.75 2.2292-0.95833 2.2292-2.8333 0-2.2708-3.3542-3.0417-3.125-0.5625-6.2292-1.125-3.3542-0.95833-3.3542-3.7292 0-2.25 2.375-3.4583 1.8958-0.95833 4.375-0.95833 3.2708 0 5.3125 1.6042-0.0625-1.0417 0.79167-1.0417 0.8125 0 0.8125 1.0625v2.7083q0 1.0625-0.8125 1.0625-0.52083 0-0.8125-0.95833-0.35417-1.2083-1.1458-1.7917-1.4167-1.0417-4.0833-1.0417-1.7708 0-3.25 0.58333-1.9583 0.79167-1.9583 2.2917 0 1.6667 2.4375 2.2708l5.125 0.83333q3.2083 0.625 4.4583 2.2083 0.89583 1.1458 0.89583 2.5208z"/>
+ </g>
+</svg>

package/src/index.js

@@ -8,10 +8,9 @@ import SubsiteClass from './components/theme/SubsiteClass';
 import HomePageView from '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageView';
 import HomePageInverseView from '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageInverseView';
 import { Icon } from '@plone/volto/components';
-import paintSVG from '@plone/volto/icons/paint.svg';
 import contentBoxSVG from './icons/content-box.svg';
 import voltoCustomMiddleware from './middleware/voltoCustom';
-import { List } from 'semantic-ui-react';
+import installSlate from './slate';
 
 const applyConfig = (config) => {
   // EEA specific settings
@@ -20,6 +19,24 @@ const applyConfig = (config) => {
     ...(config.settings.eea || {}),
   };
 
+  // Insert scripts on Error pages
+  if (config.settings?.serverConfig?.extractScripts) {
+    config.settings.serverConfig.extractScripts.errorPages = true;
+  }
+
+  // Disable tags on View
+  config.settings.showTags = false;
+
+  // Enable Title block
+  config.blocks.blocksConfig.title.restricted = false;
+
+  // Enable description block (also for cypress)
+  config.blocks.blocksConfig.description.restricted = false;
+  config.blocks.requiredBlocks = [];
+
+  // Date format for EU
+  config.settings.dateLocale = 'en-gb';
+
   // Custom Homepage layouts
   config.views.layoutViews = {
     ...(config.views.layoutViews || {}),
@@ -31,6 +48,7 @@ const applyConfig = (config) => {
     homepage_view: 'Homepage view',
     homepage_inverse_view: 'Homepage white view',
   };
+
   // Apply accordion block customization
   if (config.blocks.blocksConfig.accordion) {
     config.blocks.blocksConfig.accordion.semanticIcon = 'ri-arrow-down-s-line';
@@ -88,67 +106,20 @@ const applyConfig = (config) => {
     },
   ];
 
-  if (config.settings.slate) {
-    // Align Slate Lists to EEA Design System
-    config.settings.slate.elements.ul = ({ attributes, children }) => (
-      <List bulleted as="ul" {...attributes}>
-        {children}
-      </List>
-    );
-
-    config.settings.slate.elements.ol = ({ attributes, children }) => (
-      <List ordered as="ol" {...attributes}>
-        {children}
-      </List>
-    );
-
-    config.settings.slate.elements.li = ({ attributes, children }) => (
-      <List.Item as="li" {...attributes}>
-        {children}
-      </List.Item>
-    );
-
-    // Slate StyleMenu configuration
-    config.settings.slate.styleMenu = {
-      ...(config.settings.slate.styleMenu || {}),
-      blockStyles: [
-        {
-          cssClass: 'primary',
-          label: 'Primary',
-          icon: () => <Icon name={paintSVG} size="18px" />,
-        },
-        {
-          cssClass: 'secondary',
-          label: 'Secondary',
-          icon: () => <Icon name={paintSVG} size="18px" />,
-        },
-        {
-          cssClass: 'tertiary',
-          label: 'Tertiary',
-          icon: () => <Icon name={paintSVG} size="18px" />,
-        },
-        {
-          cssClass: 'bordered',
-          label: 'Bordered',
-          icon: () => <Icon name={paintSVG} size="18px" />,
-        },
-      ],
-    };
-  }
+  config = installSlate(config);
 
   // Custom block-style colors
   config.settings.available_colors = eea.colors;
 
   // Site theme colors
-
   config.settings.themeColors = [
-    { value: 'default', title: 'Default' },
+    { value: undefined, title: 'No theme' },
     { value: 'primary', title: 'Primary' },
     { value: 'secondary', title: 'Secondary' },
     { value: 'tertiary', title: 'Tertiary' },
   ];
 
-  // Custom block styles
+  // Custom preset styles - content-box
   config.settings.previewText = '';
   config.settings.pluggableStyles = [
     ...(config.settings.pluggableStyles || []),
@@ -210,7 +181,7 @@ const applyConfig = (config) => {
     },
   ];
 
-  // Custom blocks
+  // Custom blocks: Title
   return [installCustomTitle].reduce((acc, apply) => apply(acc), config);
 };
 

package/src/slate.js

@@ -0,0 +1,323 @@
+import React from 'react';
+import { List } from 'semantic-ui-react';
+import { MarkElementButton, ToolbarButton } from '@plone/volto-slate/editor/ui';
+import installCallout from '@plone/volto-slate/editor/plugins/Callout';
+import { Icon } from '@plone/volto/components';
+import { Editor, Transforms } from 'slate';
+import { useSlate } from 'slate-react';
+
+import formatClearIcon from '@plone/volto/icons/format-clear.svg';
+import paintSVG from '@plone/volto/icons/paint.svg';
+import alignLeftIcon from '@plone/volto/icons/align-left.svg';
+import alignRightIcon from '@plone/volto/icons/align-right.svg';
+import alignCenterIcon from '@plone/volto/icons/align-center.svg';
+import alignJustifyIcon from '@plone/volto/icons/align-justify.svg';
+import lightIcon from './icons/light.svg';
+import smallIcon from './icons/small.svg';
+
+const toggleBlockClassFormat = (editor, format) => {
+  const levels = Array.from(Editor.levels(editor, editor.selection));
+  const [, [, path]] = levels;
+  Transforms.setNodes(
+    editor,
+    { styleName: format },
+    {
+      at: path,
+    },
+  );
+  return;
+};
+
+const isBlockClassActive = (editor, format) => {
+  if (!editor.selection) return false;
+  const levels = Array.from(Editor.levels(editor, editor.selection));
+  const [, [node]] = levels;
+  return node.styleName === format;
+};
+
+function BlockClassButton({ format, icon, ...props }) {
+  const editor = useSlate();
+
+  const isActive = isBlockClassActive(editor, format);
+
+  const handleMouseDown = React.useCallback(
+    (event) => {
+      event.preventDefault();
+      toggleBlockClassFormat(editor, format);
+    },
+    [editor, format], // , isActive
+  );
+
+  return (
+    <ToolbarButton
+      {...props}
+      active={isActive}
+      onMouseDown={handleMouseDown}
+      icon={icon}
+    />
+  );
+}
+
+const clearFormatting = (editor) => {
+  Transforms.setNodes(editor, {
+    type: 'p',
+    styleName: null,
+  });
+  Transforms.unwrapNodes(editor, {
+    match: (n) => n.type && n.type !== 'p',
+    mode: 'all',
+    split: false,
+  });
+};
+
+const ClearFormattingButton = ({ icon, ...props }) => {
+  const editor = useSlate();
+
+  const handleMouseDown = React.useCallback(
+    (event) => {
+      event.preventDefault();
+      clearFormatting(editor);
+    },
+    [editor],
+  );
+
+  return <ToolbarButton {...props} onMouseDown={handleMouseDown} icon={icon} />;
+};
+
+export default function installSlate(config) {
+  if (config.settings.slate) {
+    // Callout slate button
+    config = installCallout(config);
+
+    config.settings.slate.buttons.clearformatting = (props) => (
+      <ClearFormattingButton title="Clear formatting" icon={formatClearIcon} />
+    );
+
+    // Remove blockquote, italic, strikethrough slate button from toolbarButtons
+    config.settings.slate.toolbarButtons = config.settings.slate.toolbarButtons.filter(
+      (item) => !['blockquote', 'italic', 'strikethrough'].includes(item),
+    );
+
+    // Remove blockquote, italic, strikethrough slate button from expandedToolbarButtons
+    config.settings.slate.expandedToolbarButtons = config.settings.slate.expandedToolbarButtons.filter(
+      (item) => !['blockquote', 'italic', 'strikethrough'].includes(item),
+    );
+
+    // Remove 'underline' and 'italic' hotkeys
+    config.settings.slate.hotkeys = Object.keys(config.settings.slate.hotkeys)
+      .filter((item) => !['mod+u', 'mod+i'].includes(item))
+      .reduce((out, key) => {
+        out[key] = config.settings.slate.hotkeys[key];
+        return out;
+      }, {});
+
+    // Small button
+    if (!config.settings.slate.toolbarButtons.includes('small')) {
+      config.settings.slate.elements.small = ({ children }) => (
+        <small>{children}</small>
+      );
+
+      config.settings.slate.buttons.small = (props) => (
+        <MarkElementButton
+          title="Small"
+          format="small"
+          icon={smallIcon}
+          {...props}
+        />
+      );
+
+      config.settings.slate.inlineElements = [
+        ...config.settings.slate.inlineElements,
+        'small',
+      ];
+
+      config.settings.slate.toolbarButtons = [
+        ...config.settings.slate.toolbarButtons.slice(0, 1),
+        'small',
+        ...config.settings.slate.toolbarButtons.slice(1),
+      ];
+
+      config.settings.slate.hotkeys['mod+s'] = {
+        format: 'small',
+        type: 'inline',
+      };
+    }
+
+    // Light button
+    if (!config.settings.slate.toolbarButtons.includes('light')) {
+      config.settings.slate.elements.light = ({ children }) => (
+        <span className="fw-light">{children}</span>
+      );
+
+      config.settings.slate.buttons.light = (props) => (
+        <MarkElementButton
+          title="Light"
+          format="light"
+          icon={lightIcon}
+          {...props}
+        />
+      );
+
+      config.settings.slate.inlineElements = [
+        ...config.settings.slate.inlineElements,
+        'light',
+      ];
+
+      config.settings.slate.toolbarButtons = [
+        ...config.settings.slate.toolbarButtons.slice(0, 1),
+        'light',
+        ...config.settings.slate.toolbarButtons.slice(1),
+      ];
+
+      config.settings.slate.hotkeys['mod+l'] = {
+        format: 'light',
+        type: 'inline',
+      };
+    }
+
+    // Align Slate Lists to EEA Design System
+    config.settings.slate.elements.ul = ({ attributes, children }) => (
+      <List bulleted as="ul" {...attributes}>
+        {children}
+      </List>
+    );
+
+    config.settings.slate.elements.ol = ({ attributes, children }) => (
+      <List ordered as="ol" {...attributes}>
+        {children}
+      </List>
+    );
+
+    config.settings.slate.elements.li = ({ attributes, children }) => (
+      <List.Item as="li" {...attributes}>
+        {children}
+      </List.Item>
+    );
+
+    // Slate StyleMenu configuration
+    config.settings.slate.styleMenu = {
+      ...(config.settings.slate.styleMenu || {}),
+      blockStyles: [
+        {
+          cssClass: 'primary',
+          label: 'Primary',
+          icon: () => <Icon name={paintSVG} size="18px" />,
+        },
+        {
+          cssClass: 'secondary',
+          label: 'Secondary',
+          icon: () => <Icon name={paintSVG} size="18px" />,
+        },
+        {
+          cssClass: 'tertiary',
+          label: 'Tertiary',
+          icon: () => <Icon name={paintSVG} size="18px" />,
+        },
+      ],
+    };
+
+    // Text Align buttons
+
+    // Align left
+    if (!config.settings.slate.toolbarButtons.includes('text-left')) {
+      config.settings.slate.buttons['text-left'] = (props) => (
+        <BlockClassButton
+          format="text-left"
+          icon={alignLeftIcon}
+          title="Align left"
+          {...props}
+        />
+      );
+
+      config.settings.slate.toolbarButtons = [
+        ...config.settings.slate.toolbarButtons,
+        'separator',
+        'text-left',
+      ];
+
+      config.settings.slate.expandedToolbarButtons = [
+        ...config.settings.slate.expandedToolbarButtons,
+        'separator',
+        'text-left',
+      ];
+    }
+
+    // Align center
+    if (!config.settings.slate.toolbarButtons.includes('text-center')) {
+      config.settings.slate.buttons['text-center'] = (props) => (
+        <BlockClassButton
+          format="text-center"
+          icon={alignCenterIcon}
+          title="Align center"
+          {...props}
+        />
+      );
+
+      config.settings.slate.toolbarButtons = [
+        ...config.settings.slate.toolbarButtons,
+        'text-center',
+      ];
+
+      config.settings.slate.expandedToolbarButtons = [
+        ...config.settings.slate.expandedToolbarButtons,
+        'text-center',
+      ];
+    }
+
+    // Align right
+    if (!config.settings.slate.toolbarButtons.includes('text-right')) {
+      config.settings.slate.buttons['text-right'] = (props) => (
+        <BlockClassButton
+          format="text-right"
+          icon={alignRightIcon}
+          title="Align right"
+          {...props}
+        />
+      );
+
+      config.settings.slate.toolbarButtons = [
+        ...config.settings.slate.toolbarButtons,
+        'text-right',
+      ];
+
+      config.settings.slate.expandedToolbarButtons = [
+        ...config.settings.slate.expandedToolbarButtons,
+        'text-right',
+      ];
+    }
+
+    // Align justify
+    if (!config.settings.slate.toolbarButtons.includes('text-justify')) {
+      config.settings.slate.buttons['text-justify'] = (props) => (
+        <BlockClassButton
+          format="text-justify"
+          icon={alignJustifyIcon}
+          title="Align justify"
+          {...props}
+        />
+      );
+
+      config.settings.slate.toolbarButtons = [
+        ...config.settings.slate.toolbarButtons,
+        'text-justify',
+        'separator',
+      ];
+
+      config.settings.slate.expandedToolbarButtons = [
+        ...config.settings.slate.expandedToolbarButtons,
+        'text-justify',
+        'separator',
+      ];
+    }
+
+    // Clear formatting
+    if (!config.settings.slate.toolbarButtons.includes('clearformatting')) {
+      config.settings.slate.toolbarButtons = [
+        ...config.settings.slate.toolbarButtons,
+        'clearformatting',
+      ];
+    }
+  }
+
+  return config;
+}