@plone/volto 17.0.0-alpha.13 → 17.0.0-alpha.15

package/src/hooks/clipboard/useClipboard.js

@@ -0,0 +1,26 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+export default function useClipboard(clipboardText = '') {
+  const stringToCopy = useRef(clipboardText);
+  const [copied, setCopied] = useState(false);
+
+  //synchronous: window.clipboardData.setData(options.format || "text", text);
+  const copyToClipboard = async (text) => {
+    if ('clipboard' in navigator) {
+      return await navigator.clipboard.writeText(text);
+    } else {
+      return document.execCommand('copy', true, text);
+    }
+  };
+
+  const copyAction = useCallback(() => {
+    const copiedString = copyToClipboard(stringToCopy.current);
+    setCopied(copiedString);
+  }, [stringToCopy]);
+
+  useEffect(() => {
+    stringToCopy.current = clipboardText;
+  }, [clipboardText]);
+
+  return [copied, copyAction, setCopied];
+}

package/src/hooks/content/useContent.js

@@ -0,0 +1,31 @@
+import { useSelector, shallowEqual } from 'react-redux';
+
+/**
+ * useContent hook
+ *
+ * This hook returns the current content that is stored in the Redux store in the
+ * `content` reducer, and returns it along with the related state (loading/loaded/error).
+ *
+ * @export
+ * @return {{ data: ContentData, loading: boolean, loaded: boolean, error: Error }}
+ */
+export function useContent() {
+  const data = useSelector((state) => state.content.data, shallowEqual);
+  const loading = useSelector((state) => state.content.get.loading);
+  const loaded = useSelector((state) => state.content.get.loaded);
+  const error = useSelector((state) => state.content.get.error, shallowEqual);
+
+  return { data, loading, loaded, error };
+}
+
+// For reference purposes: Potential future useQuery version
+// export function useContent() {
+//   // the cache will need to know the current location
+//   const pathname = useLocation();
+//   const query = useQuery(getContentQuery({ path }))
+
+//   // This might not be needed if we rename the properties
+//   const {isLoading: loading, isSuccess: loaded, ...rest} = query;
+
+//   return { loading, loaded, ...rest };
+// }

package/src/hooks/index.js

@@ -0,0 +1,2 @@
+export useClipboard from '@plone/volto/hooks/clipboard/useClipboard';
+export useToken from '@plone/volto/hooks/userSession/useToken';

package/src/middleware/index.js

@@ -4,8 +4,8 @@
  * @example import { api } from 'middleware';
  */
 
-export api from '@plone/volto/middleware/api';
-export blacklistRoutes from './blacklistRoutes';
+export { default as api } from '@plone/volto/middleware/api';
+export { default as blacklistRoutes } from './blacklistRoutes';
 export {
   protectLoadStart,
   protectLoadEnd,

package/src/start-server.js

@@ -4,7 +4,7 @@ import http from 'http';
 import app from './server';
 import debug from 'debug';
 
-export default () => {
+export default function server() {
   const server = http.createServer(app);
   // const host = process.env.HOST || 'localhost';
   const port = process.env.PORT || 3000;
@@ -46,4 +46,4 @@ export default () => {
       currentApp = newApp;
     });
   };
-};
+}

package/theme/themes/pastanaga/extras/blocks.less

@@ -477,7 +477,9 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
 
   &.new-add-block {
     bottom: -26px;
-    left: 50%;
+    left: calc(
+      50% - 12px
+    ); // This is to compensate the width of the icon and center it correctly
     padding: 0 !important;
     border: none !important;
     background: white !important;