@eeacms/volto-clms-theme 1.0.159 → 1.0.160

package/CHANGELOG.md

@@ -4,6 +4,11 @@ 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.0.160](https://github.com/eea/volto-clms-theme/compare/1.0.159...1.0.160) - 22 December 2022
+
+#### :hammer_and_wrench: Others
+
+- clean up duplicate SlateContextToolbar buttons [bipoza - [`9e5b2f6`](https://github.com/eea/volto-clms-theme/commit/9e5b2f6b6e98fba35faf0203a2ee6b3e5a0e5001)]
 ### [1.0.159](https://github.com/eea/volto-clms-theme/compare/1.0.158...1.0.159) - 22 December 2022
 
 #### :hammer_and_wrench: Others

package/README.md

@@ -53,6 +53,12 @@
 
 1. Happy editing!
 
+## Things to keep in mind before migrating to Volto 16
+1. Remove the volto-slate override. This override is a patch to clean up duplicate SlateContextToolbar buttons. This is not necessary in Volto 16.
+
+   ````bash
+   rm -rf src/customizations/volto-slate
+   ````
 ## Release
 
 ### Automatic release using Jenkins

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.159",
+  "version": "1.0.160",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/customizations/volto-slate/editor/ui/InlineToolbar.jsx

@@ -0,0 +1,73 @@
+import React from 'react'; // , useState
+import SlateToolbar from 'volto-slate/editor/ui/SlateToolbar';
+import SlateContextToolbar from 'volto-slate/editor/ui/SlateContextToolbar';
+import config from '@plone/volto/registry';
+import { hasRangeSelection } from 'volto-slate/utils';
+import { ReactEditor } from 'slate-react';
+import cx from 'classnames';
+
+/**
+ * The main Slate toolbar. All the others are just wrappers, UI or used here
+ * This override is a patch to clean up duplicate SlateContextToolbar buttons. This is not necessary in Volto 16.
+ */
+const InlineToolbar = (props) => {
+  const {
+    editor,
+    className,
+    showExpandedToolbar,
+    setShowExpandedToolbar,
+  } = props;
+
+  const { slate } = config.settings;
+  const [showMainToolbar, setShowMainToolbar] = React.useState(
+    !!(editor.selection && hasRangeSelection(editor)),
+  );
+
+  React.useEffect(() => {
+    let el;
+    try {
+      el = ReactEditor.toDOMNode(editor, editor);
+    } catch {
+      return;
+    }
+    const toggleToolbar = () => {
+      const selection = window.getSelection();
+      const { activeElement } = window.document;
+      if (activeElement !== el) return;
+      if (!selection.isCollapsed && !showMainToolbar) {
+        setShowMainToolbar(true);
+      } else if (selection.isCollapsed && showMainToolbar) {
+        setShowMainToolbar(false);
+      }
+    };
+    window.document.addEventListener('selectionchange', toggleToolbar);
+    return () => document.removeEventListener('selectionchange', toggleToolbar);
+  }, [editor, showMainToolbar]);
+
+  const showContextToolbar =
+    slate.contextToolbarButtons.map((plug) => plug(editor)).filter((c) => !!c)
+      .length > 0;
+  return (
+    <>
+      <SlateToolbar
+        className={cx(className, {
+          upper: showContextToolbar,
+        })}
+        selected={true}
+        enableExpando={slate.enableExpandedToolbar}
+        showExpandedToolbar={showExpandedToolbar}
+        setShowExpandedToolbar={setShowExpandedToolbar}
+        show={showMainToolbar}
+      />
+      <SlateContextToolbar
+        editor={editor}
+        plugins={slate.contextToolbarButtons.filter((obj, pos, arr) => {
+          return arr.map((mapObj) => mapObj.name).indexOf(obj.name) === pos;
+        })}
+        show={showContextToolbar}
+      />
+    </>
+  );
+};
+
+export default InlineToolbar;