Merge branch 'main' into env-multiple-urls

README.md

@@ -194,9 +194,46 @@ will automatically handle click events and show a quanta toolbar when selecting
 
 It will allow you to naviate to the parent block (TODO)
 
+Add the `data-block-uid={<<BLOCK_UID>>}` attribute to your outer most container of the rendered block html.
+The `data-block-uid` requires the block's UID, which you need to provide in the outermost container of the block.
+
+For example, if you are using ploneClient to fetch `data`, it will be `data.blocks_layout.items[x]`.
+Now, Click on your blocks in iframe and the sidebar will show its settings.
+
+Usage:
+```js
+// Vanilla JS example to render Blocks 
+
+// Function to create the block list
+function createBlockList(data) {
+ const blockList = document.createElement('ul');
+
+ data.blocks_layout.items.forEach(id => {
+ if (data.blocks[id]["@type"] === "slate") {
+ const slateValue = data.blocks[id].value;
+ const listItem = document.createElement('li');
+ listItem.className = 'blog-list-item';
+ listItem.setAttribute('data-block-uid', id); // Set Attribute to enable Clicking on Blocks
+
+ const pre = document.createElement('pre');
+ pre.className = 'pre-block';
+ pre.textContent = JSON.stringify(slateValue, null, 2);
+
+ listItem.appendChild(pre);
+ blockList.appendChild(listItem);
+ }
+ });
+
+ document.body.appendChild(blockList);
+}
+
+// Call the function to render the blocks
+createBlockList(data);
+```
+
 ### Level 3: Enable Realtime changes while editing
 
-You will need to subscribe to an ```onEditChange``` event that will call the callback with the updated data. 
+You will need to subscribe to an ```onEditChange``` event that will call the callback with the updated data.
 
 The `onEditChange` method listens for changes in the Hydra and triggers a callback with updated data.
 The 'data' object follows the same format as you get from the [ploneClient](https://6.docs.plone.org/volto/client/quick-start.html?highlight=data#query-or-mutation-options-factories).

packages/hydra-js/hydra.js

@@ -3,9 +3,10 @@ class Bridge {
  constructor(adminOrigin) {
  this.adminOrigin = adminOrigin;
  this.token = null;
- this.navigationHandler = null; // Handler for navigation events
- this.realTimeDataHandler = null; // Handler for message events
- this.blockClickHandler = null; // Handler for block click events
+ this.navigationHandler = null;
+ this.realTimeDataHandler = null;
+ this.blockClickHandler = null;
+ this.currentlySelectedBlock = null;
  this.init();
  }
 
@@ -29,8 +30,16 @@ class Bridge {
  // Get the access token from the URL
  const url = new URL(window.location.href);
  const access_token = url.searchParams.get('access_token');
- this.token = access_token;
- this._setTokenCookie(access_token);
+ const isEditMode = url.searchParams.get('_edit') === 'true'; // Only when in edit mode
+
+ if (access_token) {
+ this.token = access_token;
+ this._setTokenCookie(access_token);
+ }
+
+ if (isEditMode) {
+ this.enableBlockClickListener();
+ }
  }
  }
 
@@ -61,11 +70,24 @@ class Bridge {
  document.cookie = `auth_token=${token}; expires=${expiryDate.toUTCString()}; path=/; domain=${domain};`;
  }
 
+ /**
+ * Enable the frontend to listen for clicks on blocks to open the settings
+ */
  enableBlockClickListener() {
  this.blockClickHandler = (event) => {
  const blockElement = event.target.closest('[data-block-uid]');
  if (blockElement) {
+ // Remove border and button from the previously selected block
+ if (this.currentlySelectedBlock) {
+ this.currentlySelectedBlock.classList.remove('volto-hydra--outline');
+ }
+
+ // Set the currently selected block
+ this.currentlySelectedBlock = blockElement;
+ // Add border to the currently selected block
+ this.currentlySelectedBlock.classList.add('volto-hydra--outline');
  const blockUid = blockElement.getAttribute('data-block-uid');
+
  window.parent.postMessage(
  { type: 'OPEN_SETTINGS', uid: blockUid },
  this.adminOrigin,
@@ -138,15 +160,6 @@ export function onEditChange(callback) {
  }
 }
 
-/**
- * Enable the frontend to listen for clicks on blocks to open the settings
- */
-export function enableBlockClickListener() {
- if (bridgeInstance) {
- bridgeInstance.enableBlockClickListener();
- }
-}
-
 // Make initBridge available globally
 if (typeof window !== 'undefined') {
  window.initBridge = initBridge;

packages/volto-hydra/src/actions.js

@@ -0,0 +1,8 @@
+import { SET_SELECTED_BLOCK } from './constants';
+
+export function setSelectedBlock(uid) {
+ return {
+ type: SET_SELECTED_BLOCK,
+ uid: uid,
+ };
+}

packages/volto-hydra/src/components/Iframe/View.jsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import Cookies from 'js-cookie';
 import isValidUrl from '../../utils/isValidUrl';
 import './styles.css';
+import { setSelectedBlock } from '../../actions';
 import usePresetUrls from '../../utils/usePresetsUrls';
 import UrlInput from '../UrlInput';
 
@@ -29,6 +30,7 @@ const getUrlWithAdminParams = (url, token) => {
 };
 
 const Iframe = () => {
+ const dispatch = useDispatch();
  const [url, setUrl] = useState('');
 
  const [src, setSrc] = useState('');
@@ -87,6 +89,12 @@ const Iframe = () => {
  handleNavigateToUrl(event.data.url);
  break;
 
+ case 'OPEN_SETTINGS':
+ if (history.location.pathname.endsWith('/edit')) {
+ dispatch(setSelectedBlock(event.data.uid));
+ }
+ break;
+
  default:
  break;
  }
@@ -99,7 +107,13 @@ const Iframe = () => {
  return () => {
  window.removeEventListener('message', messageHandler);
  };
- }, [handleNavigateToUrl, initialUrl, token]);
+ }, [
+ dispatch,
+ handleNavigateToUrl,
+ history.location.pathname,
+ initialUrl,
+ token,
+ ]);
 
  useEffect(() => {
  if (Object.keys(form).length > 0 && isValidUrl(initialUrl)) {

packages/volto-hydra/src/constants.js

@@ -0,0 +1 @@
+export const SET_SELECTED_BLOCK = 'SET_SELECTED_BLOCK';