@eeacms/volto-eea-website-theme 1.17.2 → 1.18.1

package/CHANGELOG.md

@@ -4,12 +4,43 @@ 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.18.1](https://github.com/eea/volto-eea-website-theme/compare/1.18.0...1.18.1) - 26 June 2023
+
+#### :bug: Bug Fixes
+
+- fix: don't break slate [Miu Razvan - [`e71afc4`](https://github.com/eea/volto-eea-website-theme/commit/e71afc4e336a12069ae196370de82bc96fc7e35c)]
+
+### [1.18.0](https://github.com/eea/volto-eea-website-theme/compare/1.17.2...1.18.0) - 20 June 2023
+
+#### :rocket: New Features
+
+- feat: ThemesWidget update advanced-search link - refs #145772 [Alin Voinea - [`036f471`](https://github.com/eea/volto-eea-website-theme/commit/036f4711ace0985e2b542c64a1cbe28fd97911bd)]
+- feat: Add ThemeasWidget for taxonomy_themes and fix tags link - refs #145772 [Alin Voinea - [`903de63`](https://github.com/eea/volto-eea-website-theme/commit/903de638be2e2b2a9c550200706271fc72f09e36)]
+
+#### :bug: Bug Fixes
+
+- fix: clearformat only selection [nileshgulia1 - [`e8aab36`](https://github.com/eea/volto-eea-website-theme/commit/e8aab36c0c86e2a2a01ca53673a89c596949a4b1)]
+- fix(slate): backport feature from volto-slate that sets classes on style options [David Ichim - [`5ed97f3`](https://github.com/eea/volto-eea-website-theme/commit/5ed97f34a4714dcbaa11296ca64d043a24464d3e)]
+
+#### :nail_care: Enhancements
+
+- change(footer): removed fallback to empty array for footer actions #153 from eea/footer_actions [ichim-david - [`8fb9c08`](https://github.com/eea/volto-eea-website-theme/commit/8fb9c082a7fac14e31c7e568cc85cb7095b0524d)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.18.0 #154 from eea/develop [ichim-david - [`9e47abb`](https://github.com/eea/volto-eea-website-theme/commit/9e47abb88ec371b142caf177d114ccff49a53082)]
+- Refs #254132 - Bump to 1.18.0. [GhitaB - [`51f483b`](https://github.com/eea/volto-eea-website-theme/commit/51f483b3dba6cff13471fc512d372b577991f6f4)]
+- Refs #254132 - Do not initialize actions with []. Make sure actions in footerOpts are used if set. [GhitaB - [`8c0afb5`](https://github.com/eea/volto-eea-website-theme/commit/8c0afb539b0c96928545bc9a6974a189c9e886b8)]
+- test: Fix sonarqube - Convert the conditional to a boolean to avoid leaked value [Alin Voinea - [`195eb19`](https://github.com/eea/volto-eea-website-theme/commit/195eb19b8aa40a95bca6aafc7720bdc6b8e02340)]
 ### [1.17.2](https://github.com/eea/volto-eea-website-theme/compare/1.17.1...1.17.2) - 14 June 2023
 
 #### :rocket: New Features
 
 - feat: config nextcloud subtitles languages - refs #253430 [dobri1408 - [`1fc72df`](https://github.com/eea/volto-eea-website-theme/commit/1fc72df37adbb9f9c03f4adb6ad800d7e603ed90)]
 
+#### :hammer_and_wrench: Others
+
+- Release #150 from eea/develop [ichim-david - [`52f1f78`](https://github.com/eea/volto-eea-website-theme/commit/52f1f782a1d815c6df5be1aabe34f67715637d0f)]
 ### [1.17.1](https://github.com/eea/volto-eea-website-theme/compare/1.17.0...1.17.1) - 12 June 2023
 
 #### :nail_care: Enhancements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.17.2",
+  "version": "1.18.1",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/theme/Widgets/ThemesWidget.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import cx from 'classnames';
+import Tag from '@eeacms/volto-eea-design-system/ui/Tag/Tag';
+
+export const ThemesWidget = ({ value, children, className }) => {
+  return value ? (
+    <span className={cx(className, 'token', 'widget')}>
+      {value.map((tag) => (
+        <Tag
+          href={`https://www.eea.europa.eu/en/advanced-search?filters[0][field]=topic&filters[0][values][0]=${tag.title}&filters[0][type]=any&filters[1][field]=language&filters[1][type]=any&filters[1][values][0]=en&sort-field=issued.date&sort-direction=desc`}
+          key={tag.token}
+        >
+          {children ? children(tag.title) : tag.title}
+        </Tag>
+      ))}
+    </span>
+  ) : (
+    ''
+  );
+};

package/src/components/theme/Widgets/TokenWidget.jsx

@@ -6,7 +6,10 @@ export const TokenWidget = ({ value, children, className }) =>
   value ? (
     <span className={cx(className, 'token', 'widget')}>
       {value.map((tag) => (
-        <Tag href={`http://search.apps.eea.europa.eu/?q=${tag}`} key={tag}>
+        <Tag
+          href={`https://www.eea.europa.eu/en/advanced-search?q=${tag}`}
+          key={tag}
+        >
           {children ? children(tag) : tag}
         </Tag>
       ))}

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

@@ -0,0 +1 @@
+This customization fixes bugs with styleMenu not highlighting selected styles in some scenarios. This should be removed after https://github.com/plone/volto/pull/4852

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

@@ -0,0 +1,157 @@
+import React from 'react';
+import { useSlate } from 'slate-react';
+import { Dropdown } from 'semantic-ui-react';
+import { useIntl, defineMessages } from 'react-intl';
+import cx from 'classnames';
+import { omit } from 'lodash';
+import { isBlockStyleActive, isInlineStyleActive, toggleStyle } from './utils';
+import config from '@plone/volto/registry';
+import { ToolbarButton } from '@plone/volto-slate/editor/ui';
+import paintSVG from '@plone/volto/icons/paint.svg';
+
+const messages = defineMessages({
+  inlineStyle: {
+    id: 'Inline Style',
+    defaultMessage: 'Inline Style',
+  },
+  paragraphStyle: {
+    id: 'Paragraph Style',
+    defaultMessage: 'Paragraph Style',
+  },
+  additionalStyles: {
+    id: 'Additional Styles',
+    defaultMessage: 'Additional Styles',
+  },
+});
+
+const StyleMenuButton = ({ icon, active, ...props }) => (
+  <ToolbarButton {...props} icon={icon} active={active} />
+);
+
+const MenuOpts = ({ editor, toSelect, option, type }) => {
+  const isActive = toSelect.includes(option);
+  return (
+    <Dropdown.Item
+      as="span"
+      active={isActive}
+      className={cx(`${type}-${option.value}`, { active: isActive })}
+      {...omit(option, ['isBlock'])}
+      data-isblock={option.isBlock}
+      onClick={(event, selItem) => {
+        toggleStyle(editor, {
+          cssClass: selItem.value,
+          isBlock: selItem.isBlock,
+        });
+      }}
+    />
+  );
+};
+
+const StylingsButton = (props) => {
+  const editor = useSlate();
+  const intl = useIntl();
+
+  // Converting the settings to a format that is required by dropdowns.
+  const inlineOpts = [
+    ...config.settings.slate.styleMenu.inlineStyles.map((def) => {
+      return {
+        value: def.cssClass,
+        text: def.label,
+        icon: def.icon,
+        isBlock: false,
+      };
+    }),
+  ];
+  const blockOpts = [
+    ...config.settings.slate.styleMenu.blockStyles.map((def) => {
+      return {
+        value: def.cssClass,
+        text: def.label,
+        icon: def.icon,
+        isBlock: true,
+      };
+    }),
+  ];
+
+  // Calculating the initial selection.
+  const toSelect = [];
+  // block styles
+  for (const val of blockOpts) {
+    const ia = isBlockStyleActive(editor, val.value);
+    if (ia) {
+      toSelect.push(val);
+    }
+  }
+  // inline styles
+  for (const val of inlineOpts) {
+    const ia = isInlineStyleActive(editor, val.value);
+    if (ia) {
+      toSelect.push(val);
+    }
+  }
+
+  const menuItemProps = {
+    toSelect,
+    editor,
+  };
+  const showMenu = inlineOpts.length || blockOpts.length;
+  return showMenu ? (
+    <Dropdown
+      id="style-menu"
+      pointing="top left"
+      multiple
+      value={toSelect}
+      disabled={config.settings.slate.styleMenu.disabled ?? false}
+      additionLabel={intl.formatMessage(messages.additionalStyles)}
+      trigger={
+        <StyleMenuButton
+          title={intl.formatMessage(messages.additionalStyles)}
+          icon={paintSVG}
+          active={toSelect.length > 0}
+        />
+      }
+    >
+      <Dropdown.Menu>
+        {inlineOpts.length ? (
+          <>
+            <Dropdown.Header
+              content={intl.formatMessage(messages.inlineStyle)}
+            />
+            {inlineOpts.map((option, index) => (
+              <MenuOpts
+                {...menuItemProps}
+                type="inline-style"
+                option={option}
+                key={index}
+              />
+            ))}
+          </>
+        ) : (
+          ''
+        )}
+
+        {blockOpts.length ? (
+          <>
+            <Dropdown.Header
+              content={intl.formatMessage(messages.paragraphStyle)}
+            />
+            {blockOpts.map((option, index) => (
+              <MenuOpts
+                {...menuItemProps}
+                type="block-style"
+                option={option}
+                key={index}
+              />
+            ))}
+          </>
+        ) : (
+          ''
+        )}
+      </Dropdown.Menu>
+    </Dropdown>
+  ) : (
+    ''
+  );
+};
+
+export default StylingsButton;

package/src/customizations/@plone/volto-slate/editor/plugins/StyleMenu/utils.js

@@ -0,0 +1,168 @@
+/* eslint no-console: ["error", { allow: ["warn", "error"] }] */
+import { Editor, Transforms } from 'slate';
+import { isBlockActive } from '@plone/volto-slate/utils';
+import config from '@plone/volto/registry';
+
+/**
+ * Toggles a style (e.g. in the StyleMenu plugin).
+ * @param {Editor} editor
+ * @param {object} options
+ * @param {boolean} options.isRequested Whether the given style is requested by
+ * the user. The style is only applied if it is requested and only removed if it
+ * is not requested.
+ */
+export const toggleStyle = (editor, { cssClass, isBlock, isRequested }) => {
+  if (isBlock) {
+    toggleBlockStyle(editor, cssClass);
+  } else {
+    toggleInlineStyle(editor, cssClass);
+  }
+};
+
+export const toggleBlockStyle = (editor, style) => {
+  // We have 6 boolean variables which need to be accounted for.
+  // See https://docs.google.com/spreadsheets/d/1mVeMuqSTMABV2BhoHPrPAFjn7zUksbNgZ9AQK_dcd3U/edit?usp=sharing
+  const { slate } = config.settings;
+
+  const isListItem = isBlockActive(editor, slate.listItemType);
+  const isActive = isBlockStyleActive(editor, style);
+  const wantsList = false;
+
+  if (isListItem && !wantsList) {
+    toggleBlockStyleAsListItem(editor, style);
+  } else if (isListItem && wantsList && !isActive) {
+    // switchListType(editor, format); // this will deconstruct to Volto blocks
+  } else if (!isListItem && wantsList) {
+    // changeBlockToList(editor, format);
+  } else if (!isListItem && !wantsList) {
+    internalToggleBlockStyle(editor, style);
+  } else {
+    console.warn('toggleBlockStyle case not covered, please examine:', {
+      wantsList,
+      isActive,
+      isListItem,
+    });
+  }
+};
+
+export const toggleInlineStyle = (editor, style) => {
+  // We have 6 boolean variables which need to be accounted for.
+  // See https://docs.google.com/spreadsheets/d/1mVeMuqSTMABV2BhoHPrPAFjn7zUksbNgZ9AQK_dcd3U/edit?usp=sharing
+  const { slate } = config.settings;
+
+  const isListItem = isBlockActive(editor, slate.listItemType);
+  const isActive = isInlineStyleActive(editor, style);
+  const wantsList = false;
+
+  if (isListItem && !wantsList) {
+    toggleInlineStyleAsListItem(editor, style);
+  } else if (isListItem && wantsList && !isActive) {
+    // switchListType(editor, format); // this will deconstruct to Volto blocks
+  } else if (!isListItem && wantsList) {
+    // changeBlockToList(editor, format);
+  } else if (!isListItem && !wantsList) {
+    internalToggleInlineStyle(editor, style);
+  } else {
+    console.warn('toggleInlineStyle case not covered, please examine:', {
+      wantsList,
+      isActive,
+      isListItem,
+    });
+  }
+};
+
+export const isBlockStyleActive = (editor, style) => {
+  const keyName = `style-${style}`;
+  const sn = Array.from(
+    Editor.nodes(editor, {
+      match: (n) => {
+        const isStyle = typeof n.styleName === 'string' || n[keyName];
+        return !Editor.isEditor(n) && isStyle;
+      },
+      mode: 'all',
+    }),
+  );
+
+  for (const [n] of sn) {
+    if (typeof n.styleName === 'string') {
+      if (n.styleName.split(' ').filter((x) => x === style).length > 0) {
+        return true;
+      }
+    } else if (
+      n[keyName] &&
+      keyName.split('-').filter((x) => x === style).length > 0
+    )
+      return true;
+  }
+  return false;
+};
+
+export const isInlineStyleActive = (editor, style) => {
+  const m = Editor.marks(editor);
+  const keyName = `style-${style}`;
+  if (m && m[keyName]) {
+    return true;
+  }
+  return false;
+};
+
+export const internalToggleBlockStyle = (editor, style) => {
+  toggleBlockStyleInSelection(editor, style);
+};
+
+export const internalToggleInlineStyle = (editor, style) => {
+  toggleInlineStyleInSelection(editor, style);
+};
+
+/*
+ * Applies a block format unto a list item. Will split the list and deconstruct the
+ * block
+ */
+export const toggleBlockStyleAsListItem = (editor, style) => {
+  toggleBlockStyleInSelection(editor, style);
+};
+
+/*
+ * Applies an inline style unto a list item.
+ */
+export const toggleInlineStyleAsListItem = (editor, style) => {
+  toggleInlineStyleInSelection(editor, style);
+};
+
+function toggleInlineStyleInSelection(editor, style) {
+  const m = Editor.marks(editor);
+  const keyName = 'style-' + style;
+
+  if (m && m[keyName]) {
+    Editor.removeMark(editor, keyName);
+  } else {
+    Editor.addMark(editor, keyName, true);
+  }
+}
+
+function toggleBlockStyleInSelection(editor, style) {
+  const sn = Array.from(
+    Editor.nodes(editor, {
+      mode: 'highest',
+      match: (n) => {
+        return !Editor.isEditor(n);
+      },
+    }),
+  );
+
+  for (const [n, p] of sn) {
+    let cn = n.styleName;
+    if (typeof n.styleName !== 'string') {
+      cn = style;
+    } else if (n.styleName.split(' ').filter((x) => x === style).length > 0) {
+      cn = cn
+        .split(' ')
+        .filter((x) => x !== style)
+        .join(' ');
+    } else {
+      // the style is not set but other styles are set
+      cn = cn.split(' ').concat(style).join(' ');
+    }
+    Transforms.setNodes(editor, { styleName: cn }, { at: p });
+  }
+}

package/src/customizations/volto/components/theme/Footer/Footer.jsx

@@ -13,11 +13,11 @@ import isArray from 'lodash/isArray';
 const Footer = () => {
   const { eea } = config.settings;
   const {
-    footerActions = [],
-    copyrightActions = [],
-    socialActions = [],
-    contactActions = [],
-    contactExtraActions = [],
+    footerActions,
+    copyrightActions,
+    socialActions,
+    contactActions,
+    contactExtraActions,
   } = useSelector(
     (state) => ({
       footerActions: state.actions?.actions?.footer_actions,

package/src/index.js

@@ -7,6 +7,7 @@ import CustomCSS from '@eeacms/volto-eea-website-theme/components/theme/CustomCS
 import NotFound from '@eeacms/volto-eea-website-theme/components/theme/NotFound/NotFound';
 import DraftBackground from '@eeacms/volto-eea-website-theme/components/theme/DraftBackground/DraftBackground';
 import { TokenWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TokenWidget';
+import { ThemesWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/ThemesWidget';
 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';
@@ -111,11 +112,10 @@ const applyConfig = (config) => {
     config.blocks.blocksConfig.hero.copyrightPrefix = 'Image';
   }
 
-  // Custom TokenWidget
-  if (config.widgets.views) {
-    config.widgets.views.id.subjects = TokenWidget;
-    config.widgets.views.widget.tags = TokenWidget;
-  }
+  // Custom Widgets
+  config.widgets.views.id.taxonomy_themes = ThemesWidget;
+  config.widgets.views.id.subjects = TokenWidget;
+  config.widgets.views.widget.tags = TokenWidget;
 
   // /voltoCustom.css express-middleware
   // /ok express-middleware - see also: https://github.com/plone/volto/pull/4432

package/src/slate.js

@@ -17,6 +17,8 @@ import clearIcon from './icons/eraser.svg';
 
 const toggleBlockClassFormat = (editor, format) => {
   const levels = Array.from(Editor.levels(editor, editor.selection));
+  // TODO: someone fix this
+  if (levels.length < 2) return false;
   const [, [, path]] = levels;
   Transforms.setNodes(
     editor,
@@ -30,7 +32,9 @@ const toggleBlockClassFormat = (editor, format) => {
 
 const isBlockClassActive = (editor, format) => {
   if (!editor.selection) return false;
+  // TODO: someone fix this
   const levels = Array.from(Editor.levels(editor, editor.selection));
+  if (levels.length < 2) return false;
   const [, [node]] = levels;
   return node.styleName === format;
 };
@@ -66,7 +70,7 @@ const clearFormatting = (editor) => {
         // console.log('node', n, p);
         return Text.isText(n);
       },
-      at: [0], // uncomment if you want everything to be cleared
+      //at: [0], // uncomment if you want everything to be cleared
     }),
   );
 
@@ -215,6 +219,8 @@ export default function installSlate(config) {
       </List.Item>
     );
 
+    config.settings.slate.allowedHeadlineElements.push('zotero');
+
     // Slate StyleMenu configuration
     config.settings.slate.styleMenu = {
       ...(config.settings.slate.styleMenu || {}),