GSoC 2024: Decoupled editor for Plone headless - Updates & Discussion

Hi All,

So today/tonight (if u r on otherside of the world :slight_smile: ) mark the End of Community Bonding Period and with my mentors Dylan and Jeff's immense support, here are the key things we have accomplished:

  • We wrote user stories from the editor's perspective, dividing them into manageable parts and defining technical requirements.
  • Did training included studying Volto addon development and creating a simple block addon to preview websites using iframes. (source code)
  • We designed an initial approach for the addon, allowing users to log in, access the toolbar, and select frontend URLs then show preview through an iframe block.
  • Please visit volto-hydra GitHub project to know more about current iteration tasks.

I know there's other thread discussing about Plone headless Story but I'll be using this thread to discuss and keep the community updated about the Demo and APIs which we will build and add features during the GSoC period.

Thanks and your feedback is appreciated.

3 Likes

Hi everyone,

Little bit late but as promised we reached the mid journey for this project and we are here with the PoC of addon to convert volto into decoupled editor. This is still under contruction :slight_smile: ( I mean under development ... lil joke hehe ).

So, before I start blabbering about out my learning and challenges and other not so interested stuff for the majority, I would like to invite whoever is interested to buiid a frontend using the framework of your choice to tryout editing it using Volto Hydra Demo site.
Here, you can find a nice guide on how to build and integrate your frontend with editor.
Also, you can checkout the readme there for currently available features and for current progress of the project check out the Project's Roadmap.

Key Challenges:
Till now I faced multiple challenges either they were technical or time management issues. Key challenges were,

  • eliminating cors error while establishing the bridge between iframe & adminUI
  • avoiding unnecessary re-renders of the adminUI
  • Dynamically updating allowed blocks based on postMessage events from the iframe.For this, implemented a global state with a getter function to update and access allowedBlocksList in both iframe.jsx and index.js.
  • Enforcing contenteditable attributes across nested elements.so, implemented a recursive function to set contenteditable=true for the selected block and its children consistently.
  • Retaining cursor position after text changes within contenteditable elements. For, this I stopped re-fetching of the data by onEditChange hook until the editor is in 'Inline edit mode" but the data is still sent to the adminUI so the the data changed in the iframe and data on the sidebar will remain synced.
    ...

Checkout the issues page for more previous and current challenges. And also feel free to discuss, ask or point out issues here!

2 Likes

I will definitely try with Svelte :slight_smile:

1 Like

cool! and also feel free to ping me if there's anything confusing, our aim is to make it as simpler as we could for integrators :))

Hi Again!

So, this weekend was the the final submission of this GSoC project And I am veryyy excited to announce to the community that me and my mentors have successfully build a PoC showcasing the possibility of A Volto decoupled editor for headless Plone.

This wasn't too easy project as for beginner but from PoC pov we aimed to show that this can be built by re-usiing the existing volto parts and shadowing some Views in volto to preview an Iframe with keeping in mind that editor experience is not compromised and integrator's instructions are easy as much as possible.

We planned a list of features we wanted to showcase and we achieved to accomplish a long list of features but it should be pointed out that the these features I implemented are not perfect or efficient but a way to tell the community that it is a possibility to do so.

So, above is just the Abstract and if you are more interested or want to spark some fire in the community :)) check out this GSoC'24 FINAL REPORT for very detailed report on what we worked on, how we worked on and why we worked on these things.

Hope to bring something useful out of this and please share your thoughts regarding this whatever they might be, we would love to hear you out!

@djay & @JeffersonBledsoe Thanks for guiding me through this journey and hopefully in the future :))

Thanks,

Ps. Just a random question in my mind, do we got a name for our plone community members like plonites?...ploners?....or plonizers? :slight_smile:

6 Likes

Plonista (plural Plonistas?)

1 Like