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

package/CHANGELOG.md

@@ -4,7 +4,21 @@ 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.7.0](https://github.com/eea/volto-eea-website-theme/compare/1.6.4...1.7.0) - 7 February 2023
+### [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
 
@@ -25,7 +39,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Release 1.7.0 [Alin Voinea - [`065c0d0`](https://github.com/eea/volto-eea-website-theme/commit/065c0d05cb43458463e3ca293bd51b32d2e89f34)]
 - 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
 

package/package.json

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

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/@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,6 +71,7 @@ const ObjectBrowserNav = ({
           >
             <span title={`${item['@id']} (${item['@type']})`}>
               <Popup
+                hoverable
                 key={item['@id']}
                 content={
                   <>

package/src/index.js

@@ -8,14 +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 { MarkElementButton } from '@plone/volto-slate/editor/ui';
-import installCallout from '@plone/volto-slate/editor/plugins/Callout';
-import paintSVG from '@plone/volto/icons/paint.svg';
 import contentBoxSVG from './icons/content-box.svg';
-import lightIcon from './icons/light.svg';
-import smallIcon from './icons/small.svg';
 import voltoCustomMiddleware from './middleware/voltoCustom';
-import { List } from 'semantic-ui-react';
+import installSlate from './slate';
 
 const applyConfig = (config) => {
   // EEA specific settings
@@ -111,141 +106,7 @@ const applyConfig = (config) => {
     },
   ];
 
-  if (config.settings.slate) {
-    // Callout slate button
-    config = installCallout(config);
-
-    // 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',
-      };
-    }
-
-    // Clear formatting
-    if (!config.settings.slate.toolbarButtons.includes('clearformatting')) {
-      config.settings.slate.toolbarButtons = [
-        ...config.settings.slate.toolbarButtons,
-        'clearformatting',
-      ];
-    }
-
-    // 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" />,
-        },
-      ],
-    };
-  }
+  config = installSlate(config);
 
   // Custom block-style colors
   config.settings.available_colors = eea.colors;

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;
+}