Funding Request: Improve Editing UX for Neos 9.1

[tobias (Tobias Gruber)]

As discussed during the Neos 9 release sprint in Vienna and Neos Con 2025 we would like to focus on an improved Neos Editing Experience for Neos 9.1.

In addition to the Trash Bin feature based on our new Content Repository, we would like to implement further UX improvements. These were selected from the Wall of Ideas, the sponsors dinner, already existing tickets and the post-Con-sprint.

Suggested improvements:

The full list of suggestions can be found in this Github project.

1. Drag & drop to rearrange content instead of cut & paste
2. Node Actions Toolbars directly around node to reduce travel time
3. Highlighted Preview Mode - editors know it is active
4. Bring Archeopteryx Link Editing into the Core: Improve usability and extensibility of Link Editor · Issue #2669 · neos/neos-ui · GitHub
5. Bonus: find outside contributors to help with improving the accessibility of the Neos UI (mindscreen offered to help with this)

Who could work on this?

• @sebobo
• @Marc
• maybe @markusguenther ?
• you?

What do we need?

We apply for 20.000€ of funding from the Neos Foundation.

• Yes
• No
• Abstain

Please give your feedback and/or vote until 13 August 2025.

Thank you
Sebobo and Tobias

[sebobo (Sebastian Helzle)]

So it seems, everybody is happy with the project, thanks for your trust!

Then I can proceed with the others. I will make a date for a first preview & feedback session for the prototypes that I’m working on and announce it on Slack.

[sebobo (Sebastian Helzle)]

Quick update:

• I worked and invoiced 34 hours on this budget in August 2025
• Progress:
  • Item 1 - Drag & drop content
    • Reviewable PR available
      • We might further improve the styling of the drop indicators after getting feedback
  • Item 2 - Node toolbars
    • Prototype makes good progress
      • I started using the CK included toolbars and functionality and remove lots custom Neos code code
      • I integrated the full CK styling and adapt it to the Neos theme
      • I’m currently checking which CK provided toolbars works best for which functionality
      • Tina from Sandstorm and our Marc created various layouts to play with our toolbar options
  • Item 3 - Highlighted preview mode
    • Rough prototype implemented - some discussion required
  • Item 4 - New Link editing
    • Archaeopteryx is quite huge in terms of files and complexity
    • Marc and me are still discussing strategies how we can integrate the link editor
      • Separate package in development collection or part of Neos.Ui
    • We first have to shrink and probably take specific pieces from Archaeopteryx
      • E.g. phone number validator represents takes > 50% of the plugin size
  • Bonus item - Fix drag & drop text in inline editor
    • Reviewable PR available
    • This item was found while working on drag & drop didn’t take long to fix for 9.1 by fixing two issues which kept CKEditor from working fully in the Neos guest frame
• I did a first presentation in Slack to show people the progress and get feedback
  • Only 2 people joined but the discussion was good and feedback was already quite helpful
  • Further presentations planned

So far I’m quite happy with the progress we made and that I was able to already finish some nice improvements that I feel already help when working on content. The toolbar topic opened lots of possibilities for the future as we can use the latest CKEditor version to bring more features into Neos and reduce the amount of custom code we have to maintain. That means I expect more functionality to be included more easily and less issues in the inline editor.

[sebobo (Sebastian Helzle)]

Quick update:

• I worked and invoiced 32 hours on this budget in September 2025

• Progress:

  • Item 2 - Node toolbars

    • I am now in the fine tuning of the toolbars in regards to positioning and UX.

    • There is now the sticky “node label” on the top right of the selected node with a context menu and the nodetype icon and the nodes label.

    • The insert buttons are contextual positioned based on the cursor position.

    • The CKeditor toolbar is now more aligned with the Neos styles and also got further improvements to its position and behaviour.

    • After we merge the new link editor we will also integrate the link editing with a custom CK plugin into the toolbar and remove the old link editor.

      

  • Item 4 - New Link editing

    • Marc made huge progress with integrating the new link editor in the Neos.Ui.

    • We had regular calls and a presentation to improve the integration technically and regarding the UX

  • Bonus item - A new “selection” display

    • During our discussions we realised that the “Currently selected” above the inspector is not very useful and has some issues. Therefore we now use the empty bar we previously used for the inline editing buttons for a new “breadcrumb” that allows navigating to the parent nodes of the currently selected nodes. This helps with staying in context and also allows traversing in fullscreen mode.

      

  • Bonus item - Improved fullscreen editing mode

    • While discussing the toolbars we made some changes to the CSS Grid of the UI and made the inspector workable in the fullscreen mode. This means that properties like images can now be edited without leaving the fullscreen mode. This can further be improved but also makes this mode much more usable.

      

• We did 2 more presentations in Slack for the editing and the link editor and got very valuable feedback.

[Marc (Marc Henry Schultz)]

Hey you heard what Sebastian did so far now to my state of things console.log(marcHenry$.current):

I worked 6.5 hours on this budget in August and 64 hours in September

Overall Designs

The designs we tried out can be found online now in figma (though some information is still lost from the original local drafts…)

just to show one design: The floating “plus” quick Node insert (which Sebastian already implemented):

The New Link Editor

Integration and overhaul of the Sitegeist.Archaeopteryx package
Testable / Reviewable PR

Challenges for integrating the Plugin into the Neos.Ui

A good adaption of this plugin was not trivial as outlined in Our Neos UI Editing UX overhaul (9.1):

@Marc

It’s a lot of work to similize the code from Archaeopteryx to Neos Ui to not make it foreign matter. This step is the right choice so we contribute new patterns back to the Neos Ui and eventually show how to replace the NodeTree with server Queries.
The client code can be reduced from 3 of the original 7 js-packages by tying the Neos Ui and the new LinkEditor well together. This opens new ways how we write components as functional ones without using @neos and @connect as decorator.
In other regards the Archaeopteryx uses new patterns and new dependencies which are from today’s perspective questionable and don’t fit well together with the Neos Ui. The additional dependencies like rx-js, react-final-form, styled-components and react-error-boundary must be replaced in favour of using and extending our code or using native react or observable patterns.

All styled components have now been adjusted to use CSS-Modules. For state handling the full blown state managements library rx-js was replaced by a minimal implementation of createChannel() and react-final-form and final-form were removed in favour of plain observables and a new observable utility pickState().

All other new dev dependencies (typescript helpers) and runtime dependencies (react error helper) were removed and replaced by alternative patterns.

This leaves us with a tidy change that now “only” spans 4 js-packages.

Ui & Ux Differences to the Archaeopteryx

Additionally to its code we found that a the Archaeopteryx must be improved regarding its Ui and Ux:

• The link options should be hidden by default and behave equal for every kind of link
• The link preview should be shown above the tabs
• The phone number tab should not separate country calling code as select box from the phone number and only provide a single input
• the mail to tab should use soft input validation instead of rejecting invalid mails
• the web tab should allow a single anchor as relative link
• the web tab should not require the editor to enter protocol path and anchor separately but only contain a single field
  • this single input field should promt to format links as https in case a domain is provided like in the old link editor
• the asset tab should allow anchor links as this might be used in combination with PDFs

Some of the Ui and Ux will probably still change - for example in Dresden we agreed to introduce a vertical navigation and also the behaviour of the link options were heavy under discussion.

Automated Testing

Additionally to the Behat behaviour test for the new endpoints that handle the Node-Tree display, a fair share of automated test cover the Link editor now via browser (testcafe).

Removing technical debt (my voluntary work *g)

With the introduction of the new Link Editor we want to find new patterns to access state and dependencies. Our current React class-components with their high-order-functions / decorators @neos and @connect are not the promoted future of the holy React gods. The Archaeopteryx already used functional-components with custom react hooks. But to integrate the Link Editor we decided to go into the direction of global functions with functional-components. Global functions will behave like our new translate() function from !!!FEATURE: Reform i18n mechanism

• TASK: Introduce global getConfiguration() and cleanup configuration provider
• TASK: Introduce api to use global-state for global registry

To access redux state we can now use the regular hook to make components reactive:

• TASK: Introduce aliased useSelector hook for Neos global State

And while not particular fun, the new Link Editors PHP Behat and Unit tests warranted for a general introduction of Behat on the 9.0 branch - i did this in combination with replacing CircleCi with Github in all parts to have a streamlined CI like in Neos and Flow.

• TASK: use GitHub ci and run behaviour tests and TASK: Fix-up #4008 use GitHub ci

You want to read more?

The post Our Neos UI Editing UX overhaul (9.1) further summarises our intentions as to why we overhaul the node creation and the link editor as well as the inline toolbar.

Feel free to look into our #guild-ux slack channel to be notified of our latest progress