restructured the readme to make clearer

README.md

@@ -70,12 +70,34 @@ To test against a local hydra instance
  make start
  ```
 
-### Make your frontend editable
+### Deploy your frontend
+
+Use netlify or similar and make your frontend public and then let us know by creating a ticket and we will advertise your frontend
+on https://hydra.pretagov.com for others to test.
+
+But be sure to subscribe to the project so you can keep your frontend updated with changes to the hydra api as more 
+capabilities are added. If there are bugs lets us know.
+
+## Make your frontend editable
+
+As an integrator you have a choice on how nice you want the editor user experience to be.
+Each level requires more work to integrate but makes editing easier.
+
+As the GSoC projects progresses more of these levels will be enabled so you can try them out.
+see [Hydra GSoC project progresses](https://github.com/orgs/collective/projects/3/views/4)
+
+### Level 1: Show changes after save
+
+This is the most basic form of integration.
+You can 
+- add and remove pages
+- navigate either using your frontend or the AdminUI
+- edit a page, but only via the sidebar and you will only see changes after you click save
+
+To do this you will include the hydra iframe bridge which creates a two way link between the hydra editor and your frontend.
 
 - Take the latest [hydra.js](https://github.com/collective/volto-hydra/tree/main/packages/hydra-js) frome hydra-js package and include it in your frontend
 - Your frontend will know to initialise the hydra iframe bridge when it is being edited using hydra as it will recieve a ```?_edit=true```, [checkout below](#asynchronously-load-the-bridge) to load `hydra.js` asynchronously.
-- Initialising hydra iframe bridge creates a two way link between the hydra editor and your frontend. You will be able to optionally register call backs 
- for events allowing you to add more advanced editor functionality depending on your needs.
 
 #### Authenticate frontend to access private content
 
@@ -111,11 +133,7 @@ export default function Blog({ params }) {
 }
 ```
 
-Reference Issue: [#6](https://github.com/collective/volto-hydra/issues/6)
-
-Now your editors login to hydra and navigate the site within the editor or via the frontend displayed in the middle of the screen. They can add, remove objects and do normal plone toolbar functions as well as edit a page metadata via the sidebar.
-
-### How to initialise the bridge.
+#### How to initialise the bridge.
 
 - Import `initBridge` from [hydra.js](https://github.com/collective/volto-hydra/tree/main/packages/hydra-js).
 - Call the `initBridge` and pass the origin of your adminUI as the argument to the initBridge method.
@@ -126,9 +144,10 @@ Now your editors login to hydra and navigate the site within the editor or via t
  initBridge("https://hydra.pretagov.com");
  ```
 - This will enable the 2 way link between hydra and your frontend.
-- Log into https://hydra.pretagov.com/ and paste in your local running frontend to test.
+- Log into https://hydra.pretagov.com/ (or your test hydra), go to ```User Preferences``` and paste in your local running frontend to test.
+ - You can also add this url to the env ```RAZZLE_DEFAULT_IFRAME_URL``` on your hydra instance to have this frontend selectable by the user. 
 
-### Asynchronously Load the Bridge
+#### Asynchronously Load the Bridge
 
 Since the script has a considerable size, it’s recommended to load the bridge only when necessary, such as in edit mode.
 To load the bridge asynchronously, add a function that checks if the bridge is already present. If it isn't, the function will load it and then call a callback function. This ensures the bridge is loaded only when needed.
@@ -158,13 +177,22 @@ if (window.location.search.includes('_edit=true')) {
 }
 ```
 
-#### Show changes after save
+#### Preventing reloads
+If you wish to make the editing experience faster you can register for ```onSave``` and ```onRoute``` callbacks to prevent reloads of the frontend
+
+TODO: not implemented yet
+
+
+### Level 2: Click to select blocks on your frontend
 
-This is the most basic form of integration. For this no additional integraion is needed. 
+TODO: not implemented yet
 
-If you wish to make the editing experience faster you can register for ```onSave``` and ```onRoute``` callbacks to prevent reloads of the frontend (TODO)
+You will add data attributes to your rendered block html so hydra knows where they are on the page and it
+will automatically handle click events and show a quanta toolbar when selecting a block.
 
-#### Enable Show changes while editing
+It will allow you to naviate to the parent block (TODO)
+
+### 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. 
 
@@ -190,27 +218,24 @@ function handleEditChange(updatedData) {
 onEditChange(initialData, handleEditChange);
 ```
 
-#### Enable Managing Blocks directly on your frontend
-
-You will add data attributes to your rendered block html so hydra knows where they are on the page and it
-will automatically handle click events and show a quanta toolbar when selecting a block.
+### Level 4: Enable Managing Blocks directly on your frontend
 
 TODO: not implemented yet
 
-#### Enable Editing blocks inplace
+If you completed level 2 & 3 and made blocks clickable and enabled live updates then the editor will automatically gain the management of blocks on the frontend using the quanta toolbar
+- Add blocks (TODO)
+- remove blocks (TODO)
+- drag and drop blocks (TODO)
+- cut, copy and paste blocks (TODO)
+ 
+You will still need to edit the blocks themselves via the sidebar
 
-You will add data attributes to where a blocks text is editable and subscribe to ```onBlockFieldChanged``` events to handle fine grained 
-changes to text being edited such as turning text bold or creating a link. Hydra will notice where you have indicated a block field can 
-be clicked on and will automatically make it inplace editable handling shortcuts, typing and selections for you.
+### Level 5: Enable Editing blocks text and images inplace
 
 TODO: not implemented yet
 
-### Deploy your frontend
-
-Use netlify or similar and make your frontend public and then let us know by creating a ticket and we will advertise your frontend
-on https://hydra.pretagov.com for others to test.
+You will add data attributes to where a blocks text is editable and subscribe to ```onBlockFieldChanged``` events to handle fine grained 
+changes to text being edited such as turning text bold or creating a link. Hydra will notice where you have indicated a block field can 
+be clicked on and will automatically make it inplace editable handling shortcuts, typing and selections for you.
 
-But be sure to subscribe to the project so you can keep your frontend updated with changes to the hydra api as more 
-capabilities are added. If there are bugs lets us know.
 
-TODO: more integrations will be added below as the [Hydra GSoC project progresses](https://github.com/orgs/collective/projects/3/views/4)