@eeacms/volto-n2k 1.0.1 → 1.0.2

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.2](https://github.com/eea/volto-n2k/compare/1.0.1...1.0.2) - 4 November 2022
+
+#### :hammer_and_wrench: Others
+
+- Remove volto-slate dependency [Miu Razvan - [`a966c5b`](https://github.com/eea/volto-n2k/commit/a966c5b0d79552706683fd9620161b9e5e559e10)]
 ### [1.0.1](https://github.com/eea/volto-n2k/compare/1.0.0...1.0.1) - 2 November 2022
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -13,7 +13,6 @@
     "react"
   ],
   "addons": [
-    "volto-slate",
     "@eeacms/volto-datablocks",
     "@eeacms/volto-openlayers-map",
     "@eeacms/volto-resize-helper",
@@ -30,7 +29,6 @@
     "@eeacms/volto-openlayers-map": "*",
     "@eeacms/volto-tabs-block": "*",
     "@eeacms/volto-bise": "*",
-    "volto-slate": "*",
     "d3": "^7.6.1",
     "d3-shape": "^3.1.0",
     "react-lazy-load-image-component": "1.5.1",

package/src/actions/hashlink.js

@@ -0,0 +1,13 @@
+export function setHashLink(hash, data = {}) {
+  return {
+    type: 'SET_HASH_LINK',
+    hash,
+    data,
+  };
+}
+
+export function resetHashLink() {
+  return {
+    type: 'RESET_HASH_LINK',
+  };
+}

package/src/actions/index.js

@@ -0,0 +1 @@
+export * from './hashlink';

package/src/components/manage/Blocks/ImageText/Edit.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import config from '@plone/volto/registry';
 import { SidebarPortal } from '@plone/volto/components';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
-import SlateEditor from 'volto-slate/editor/SlateEditor';
+import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
 import { Editor } from 'slate';
 import getSchema from './schema';
 import cx from 'classnames';

package/src/components/manage/Blocks/ImageText/View.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { UniversalLink } from '@plone/volto/components';
-import { serializeNodes } from 'volto-slate/editor/render';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
 import { Editor } from 'slate';
 import cx from 'classnames';
 import './styles.less';

package/src/components/manage/Blocks/NavigationAnchors/View.jsx

@@ -5,8 +5,8 @@ import { Menu, Container, Sticky } from 'semantic-ui-react';
 import qs from 'querystring';
 import cx from 'classnames';
 import { UniversalLink } from '@plone/volto/components';
-import { withHashLink } from 'volto-slate/hooks';
 import { StickyContext } from '@eeacms/volto-bise/components';
+import { withHashLink } from '@eeacms/volto-n2k/hocs';
 import './styles.less';
 
 const formatLink = (str, obj) => {

package/src/components/manage/Blocks/SlateLink/render.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { UniversalLink } from '@plone/volto/components';
 import { withRouter } from 'react-router';
 import { useSelector } from 'react-redux';
-import { withHashLink } from 'volto-slate/hooks';
+import { withHashLink } from '@eeacms/volto-n2k/hocs';
 import qs from 'querystring';
 import './styles.less';
 

package/src/components/manage/Blocks/SlateSVG/index.js

@@ -1,5 +1,5 @@
 import { defineMessages } from 'react-intl';
-import { makeInlineElementPlugin } from 'volto-slate/components/ElementEditor';
+import { makeInlineElementPlugin } from '@plone/volto-slate/elementEditor';
 import { SlateSvgSchema } from './schema';
 import { withSlateSvg } from './extensions';
 import { SLATESVG } from './constants';

package/src/components/theme/AppExtras/HashLink.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { withRouter } from 'react-router';
+import { withHashLink } from '@eeacms/volto-n2k/hocs';
+
+import config from '@plone/volto/registry';
+
+const scrollToTarget = (target, offsetHeight = 0) => {
+  const bodyRect = document.body.getBoundingClientRect().top;
+  const targetRect = target.getBoundingClientRect().top;
+  const targetPosition = targetRect - bodyRect - offsetHeight;
+
+  return window.scrollTo({
+    top: targetPosition,
+    behavior: 'smooth',
+  });
+};
+
+function HashLink({ history, pathname, hashlink, resetHashLink }) {
+  const { settings } = config;
+  const blacklist = settings.hashlinkBlacklist || [];
+  const id = hashlink.hash;
+  const type = hashlink.data.type || '';
+
+  React.useEffect(() => {
+    const unlisten = history.listen((location) => {
+      if (location.pathname !== pathname) {
+        resetHashLink();
+      }
+    });
+    return () => {
+      unlisten();
+    };
+    /* eslint-disable-next-line */
+  }, []);
+
+  React.useEffect(() => {
+    if (hashlink.counter > 0 && blacklist.indexOf(type) === -1) {
+      const element = document.getElementById(id);
+      const headerWrapper = document.querySelector('.header-wrapper');
+      const offsetHeight =
+        hashlink.data.offsetHeight || headerWrapper?.offsetHeight || 0;
+      if (element) {
+        scrollToTarget(element, offsetHeight);
+      }
+    }
+    /* eslint-disable-next-line */
+  }, [hashlink.counter]);
+
+  return <React.Fragment />;
+}
+
+export default withRouter(withHashLink(HashLink));

package/src/components/theme/AppExtras/index.js

@@ -1,4 +1,5 @@
 import CopyPaste from './CopyPaste';
+import HashLink from './HashLink';
 
 export default (config) => {
   config.settings.appExtras = [
@@ -7,6 +8,10 @@ export default (config) => {
       match: '/**/edit',
       component: CopyPaste,
     },
+    {
+      match: '',
+      component: HashLink,
+    },
   ];
 
   return config;

package/src/hocs/index.js

@@ -2,5 +2,6 @@ import useResizeObserver from './useResizeObserver';
 
 import withScreenSize from './withScreenSize';
 import withLocalStorage from './withLocalStorage';
+import withHashLink from './withHashLink';
 
-export { useResizeObserver, withScreenSize, withLocalStorage };
+export { useResizeObserver, withScreenSize, withLocalStorage, withHashLink };

package/src/hocs/withHashLink.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { setHashLink, resetHashLink } from '@eeacms/volto-n2k/actions/hashlink';
+
+export default function withHashLink(WrappedComponent) {
+  return connect(
+    (state) => {
+      return {
+        hashlink: state.hashlink,
+      };
+    },
+    { setHashLink, resetHashLink },
+  )((props) => {
+    return (
+      <WrappedComponent
+        {...props}
+        setHashLink={props.setHashLink}
+        resetHashLink={props.resetHashLink}
+      />
+    );
+  });
+}

package/src/index.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import loadable from '@loadable/component';
 
-import localStorage from './store';
+import { hashlink, localStorage } from './reducers';
 
 import installAppExtras from './components/theme/AppExtras';
 
@@ -39,7 +39,7 @@ import installSpeciesProtectedSites from './components/manage/Blocks/SpeciesProt
 import installStackedBarChart from './components/manage/Blocks/StackedBarChart';
 import installTilesImages from './components/manage/Blocks/TilesImages';
 
-import { LINK } from 'volto-slate/constants';
+import { LINK } from '@plone/volto-slate/constants';
 
 import { Header, Footer } from '@eeacms/volto-n2k/components';
 
@@ -64,6 +64,7 @@ const applyConfig = (config) => {
   config.addonReducers = {
     ...config.addonReducers,
     localStorage,
+    hashlink,
   };
 
   config.settings.persistentReducers.push('localStorage');
@@ -133,7 +134,6 @@ const applyConfig = (config) => {
 
   return [
     installAppExtras,
-
     installBodyClass,
     installBubbleChart,
     installCarouselHorizontal,

package/src/reducers/hashlink.js

@@ -0,0 +1,27 @@
+const initialState = {
+  hash: null,
+  data: {},
+  counter: 0,
+};
+
+export default function hashlink(state = initialState, action = {}) {
+  const { type, hash, data = {} } = action;
+  switch (type) {
+    case 'SET_HASH_LINK':
+      return {
+        ...state,
+        hash,
+        data,
+        counter: state.counter + 1,
+      };
+    case 'RESET_HASH_LINK':
+      return {
+        ...state,
+        hash: null,
+        data: {},
+        counter: 0,
+      };
+    default:
+      return state;
+  }
+}

package/src/reducers/index.js

@@ -0,0 +1,2 @@
+export { default as hashlink } from './hashlink';
+export { default as localStorage } from './store';