diff --git a/README.md b/README.md
index f361191..27af504 100644
--- a/README.md
+++ b/README.md
@@ -269,7 +269,9 @@ function handleEditChange(updatedData) {
}
// Set up the onEditChange listener
-onEditChange(handleEditChange);
+//After initiating the bridge you can use its onEditChange method
+const bridge = initBridge('https://hydra.pretagov.com');
+bridge.onEditChange(handleEditChange);
```
### Level 4: Enable Managing Blocks directly on your frontend
diff --git a/examples/hydra-nextjs/src/app/[blogs]/[slug]/page.js b/examples/hydra-nextjs/src/app/[blogs]/[slug]/page.js
index 9068aea..939ffc9 100644
--- a/examples/hydra-nextjs/src/app/[blogs]/[slug]/page.js
+++ b/examples/hydra-nextjs/src/app/[blogs]/[slug]/page.js
@@ -1,19 +1,20 @@
-"use client";
-import { notFound } from "next/navigation";
-import { usePathname } from "next/navigation";
-import { onEditChange, getTokenFromCookie } from "@volto-hydra/hydra-js";
-import { useEffect, useState } from "react";
-import BlocksList from "@/components/BlocksList";
+'use client';
+import { notFound } from 'next/navigation';
+import { usePathname } from 'next/navigation';
+import { initBridge, getTokenFromCookie } from '#utils/hydra';
+import { useEffect, useState } from 'react';
+import BlocksList from '@/components/BlocksList';
import { fetchContent } from '#utils/api';
export default function Blog({ params }) {
+ const bridge = initBridge('https://hydra.pretagov.com');
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const pathname = usePathname();
useEffect(() => {
async function getData(token = null) {
try {
- const apiPath = "https://hydra.pretagov.com";
+ const apiPath = 'https://hydra.pretagov.com';
const path = pathname;
const content = await fetchContent(apiPath, { token, path });
setData(content);
@@ -26,19 +27,19 @@ export default function Blog({ params }) {
const url = new URL(window.location.href);
const tokenFromUrl =
- url.searchParams.get("access_token") || getTokenFromCookie();
+ url.searchParams.get('access_token') || getTokenFromCookie();
getData(tokenFromUrl);
}, [pathname]);
const [value, setValue] = useState(data);
useEffect(() => {
- onEditChange((updatedData) => {
+ bridge.onEditChange((updatedData) => {
if (updatedData) {
setValue(updatedData);
}
});
- },[]);
+ }, [bridge]);
if (loading) {
return
Loading...
;
@@ -59,5 +60,5 @@ export default function Blog({ params }) {
return notFound();
}
- return "";
+ return '';
}
diff --git a/examples/hydra-nextjs/src/app/[blogs]/page.js b/examples/hydra-nextjs/src/app/[blogs]/page.js
index 4670024..fe0d4aa 100644
--- a/examples/hydra-nextjs/src/app/[blogs]/page.js
+++ b/examples/hydra-nextjs/src/app/[blogs]/page.js
@@ -1,11 +1,12 @@
-"use client";
-import { notFound } from "next/navigation";
-import { useEffect, useState } from "react";
-import { onEditChange, getTokenFromCookie } from "@volto-hydra/hydra-js";
-import BlocksList from "@/components/BlocksList";
+'use client';
+import { notFound } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { initBridge, getTokenFromCookie } from '#utils/hydra';
+import BlocksList from '@/components/BlocksList';
import { fetchContent } from '#utils/api';
export default function Home({ params }) {
+ const bridge = initBridge('https://hydra.pretagov.com');
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [value, setValue] = useState(data);
@@ -13,7 +14,7 @@ export default function Home({ params }) {
useEffect(() => {
async function getData(token = null) {
try {
- const apiPath = "https://hydra.pretagov.com";
+ const apiPath = 'https://hydra.pretagov.com';
const path = `${params.blogs}`;
const content = await fetchContent(apiPath, { token, path });
setData(content);
@@ -26,17 +27,17 @@ export default function Home({ params }) {
const url = new URL(window.location.href);
const tokenFromUrl =
- url.searchParams.get("access_token") || getTokenFromCookie();
+ url.searchParams.get('access_token') || getTokenFromCookie();
getData(tokenFromUrl);
}, [params.blogs]);
useEffect(() => {
- onEditChange((updatedData) => {
+ bridge.onEditChange((updatedData) => {
if (updatedData) {
setValue(updatedData);
}
});
- },[]);
+ }, [bridge]);
if (loading) {
return Loading...
;
diff --git a/examples/hydra-nextjs/src/app/layout.js b/examples/hydra-nextjs/src/app/layout.js
index 64e66d1..40c7ad5 100644
--- a/examples/hydra-nextjs/src/app/layout.js
+++ b/examples/hydra-nextjs/src/app/layout.js
@@ -1,17 +1,11 @@
-"use client";
-import "../styles.css";
-import "semantic-ui-css/semantic.min.css";
-import { useEffect } from "react";
-import { initBridge } from "@volto-hydra/hydra-js";
-import TranstackProviders from "@/providers/TranstackProviders";
-import { Container } from "semantic-ui-react";
-import Menu from "@/components/Menu";
+'use client';
+import '../styles.css';
+import 'semantic-ui-css/semantic.min.css';
+import TranstackProviders from '@/providers/TranstackProviders';
+import { Container } from 'semantic-ui-react';
+import Menu from '@/components/Menu';
export default function RootLayout({ children }) {
- useEffect(() => {
- initBridge("https://hydra.pretagov.com");
- }, []);
-
return (
<>
diff --git a/examples/hydra-nextjs/src/app/page.js b/examples/hydra-nextjs/src/app/page.js
index d107055..d50fc65 100644
--- a/examples/hydra-nextjs/src/app/page.js
+++ b/examples/hydra-nextjs/src/app/page.js
@@ -1,19 +1,20 @@
-"use client";
-import { notFound } from "next/navigation";
-import React, { useEffect, useState } from "react";
-import { getTokenFromCookie, onEditChange } from "@volto-hydra/hydra-js";
-import { fetchContent } from "#utils/api";
-import BlocksList from "@/components/BlocksList";
+'use client';
+import { notFound } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+import { getTokenFromCookie, initBridge } from '#utils/hydra';
+import { fetchContent } from '#utils/api';
+import BlocksList from '@/components/BlocksList';
export default function Home() {
+ const brige = initBridge('https://hydra.pretagov.com');
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
async function getData(token = null) {
try {
- const apiPath = "https://hydra.pretagov.com";
- const path = "";
+ const apiPath = 'https://hydra.pretagov.com';
+ const path = '';
const content = await fetchContent(apiPath, { token, path });
setData(content);
} catch (error) {
@@ -25,19 +26,19 @@ export default function Home() {
const url = new URL(window.location.href);
const tokenFromUrl =
- url.searchParams.get("access_token") || getTokenFromCookie();
+ url.searchParams.get('access_token') || getTokenFromCookie();
getData(tokenFromUrl);
}, []);
const [value, setValue] = useState(data);
useEffect(() => {
- onEditChange((updatedData) => {
+ brige.onEditChange((updatedData) => {
if (updatedData) {
setValue(updatedData);
}
});
- }, []);
+ }, [brige]);
if (loading) {
return Loading...
;
diff --git a/examples/hydra-nextjs/src/components/BlocksList/BlocksList.js b/examples/hydra-nextjs/src/components/BlocksList/BlocksList.js
index b7f65b6..06105b5 100644
--- a/examples/hydra-nextjs/src/components/BlocksList/BlocksList.js
+++ b/examples/hydra-nextjs/src/components/BlocksList/BlocksList.js
@@ -1,22 +1,33 @@
-import React from "react";
-import SlateBlock from "@/components/SlateBlock";
+/* eslint-disable @next/next/no-img-element */
+import React from 'react';
+import SlateBlock from '@/components/SlateBlock';
const BlocksList = ({ data }) => {
return (
{data.blocks_layout.items.map((id) => {
- if (data.blocks[id]["@type"] === "slate") {
+ if (data.blocks[id]['@type'] === 'slate') {
const slateValue = data.blocks[id].value;
return (
-
);
- } else if (data.blocks[id]["@type"] === "image") {
- const image_url = data.blocks[id].url;
+ } else if (data.blocks[id]['@type'] === 'image') {
+ const image_url = data.blocks[id]?.image_scales
+ ? `${data.blocks[id].url}/++api++/${data.blocks[id]?.image_scales.image[0].download}`
+ : data.blocks[id].url;
+ const size = data.blocks[id].size;
+ const align = data.blocks[id].align;
return (
-
-
+
);
}
diff --git a/packages/hydra-js/hydra.js b/packages/hydra-js/hydra.js
index 1f74a31..a58219a 100644
--- a/packages/hydra-js/hydra.js
+++ b/packages/hydra-js/hydra.js
@@ -11,6 +11,8 @@ class Bridge {
this.deleteButton = null;
this.clickOnBtn = false;
this.quantaToolbar = null;
+ this.currentPathname =
+ typeof window !== 'undefined' ? window.location.pathname : null;
this.init();
}
@@ -20,11 +22,19 @@ class Bridge {
}
if (window.self !== window.top) {
- this.navigationHandler = (event) => {
- window.parent.postMessage(
- { type: 'URL_CHANGE', url: event.destination.url },
- this.adminOrigin,
- );
+ // Handle URL changes generically (no chromium-specific code here)
+ this.navigationHandler = (e) => {
+ const newPathname = new URL(e.destination.url).pathname;
+ if (
+ newPathname !== this.currentPathname ||
+ this.currentPathname === null
+ ) {
+ this.currentUrl = newPathname;
+ window.parent.postMessage(
+ { type: 'URL_CHANGE', url: e.destination.url },
+ this.adminOrigin,
+ );
+ }
};
// Ensure we don't add multiple listeners