Feature: #103043 - Modernize tree rendering and implement RTL and dark mode

See forge#103043

Description

The Tree feature in TYPO3 stands as one of its most iconic and widely used components, offering a visual representation of site structures to editors globally. Serving various purposes, such as file management, category/record selection, navigation, and more, the Tree has been a cornerstone for content handling.

Originally introduced in Version 8 with a performance-oriented approach, the SVG-Tree, powered by d3js, has faithfully served the community for the past seven years. While it excelled in providing a fast and efficient experience, it had its share of challenges, particularly due to its reliance on SVG and d3js.

Challenges with the SVG-Tree:

  • Limited functionality due to SVG constraints

  • Maintenance complexities with code-built SVG

  • Accessibility challenges

  • Difficulty in extension and innovation

  • Lack of native drag and drop

  • Complexity hindering understanding for many

Recognizing these challenges, we embarked on a journey to reimagine the Tree component, paving the way for a more adaptable and user-friendly experience.

Introducing the Modern Reactive Tree:

The new Tree, built on contemporary web standards, bids farewell to the SVG-Tree's limitations. Embracing native drag and drop APIs, standard HTML markup, and CSS for styling, the Modern Reactive Tree promises improved maintainability and accessibility.

Key Enhancements:

  • Unified Experience: All features are now consolidated into the base tree, ensuring a seamless and consistent user experience. This encompasses data loading and processing, selection, keyboard navigation, drag and drop, and basic node editing.

  • User Preferences: The tree now dynamically adjusts to user preferences, supporting both light/dark mode and left-to-right (LTR) or right-to-left (RTL) writing modes.

  • Reactive Rendering: Adopting a modern reactive rendering approach, the tree and its nodes now autonomously redraw themselves based on property changes, ensuring a smoother and more responsive interface.

  • Native Drag and Drop: Leveraging native drag and drop functionality opens up avenues for future enhancements, such as dragging content directly onto a page or seamlessly moving elements between browser windows.

  • Improved API Endpoints: All endpoints delivering data for the tree now adhere to a defined API definition, enhancing consistency and compatibility with existing integrations.

  • Unified Dragging Tooltip Handling: The dragging tooltip handling has been adjusted to a unified component that can be utilized across all components, ensuring synchronization across browser windows.

  • Dynamic Tree Status Storage: The Pagetree status is no longer stored in the database. Instead, it is now stored in the local storage of the user's browser. This change empowers the browser to control the tree status, making it more convenient for users to transition between multiple browsers or machines.

  • Enhanced Virtual Scroll: The virtual scroll of the tree has been improved, ensuring that only nodes currently visible to the user are rendered to the DOM. Additionally, the focus on selected nodes is maintained even when scrolled out of view, providing a smoother and more user-friendly experience.

As we transition to this Modern Reactive Tree, we anticipate a renewed era of flexibility, ease of use, and potential for exciting future features.

Impact

The TYPO3 CMS Tree modernization brings:

  • Personalization: Adapts to user preferences for a tailored interface.

  • Reactive Design: Ensures smoother interactions.

  • Efficient Integration: Improved API endpoints for seamless data exchange.

  • Consistency Across Devices: Unified dragging and dynamic storage for a consistent experience.

  • Enhanced Performance: Optimal rendering during navigation.

These changes collectively enhance usability, adaptability, and performance, elevating the TYPO3 CMS Tree experience.