Tidal Rich Text Editor
WorkWave Design System / Communication Center
Context
WorkWave's multi-channel messaging platform, Communication Center, needed a WYSIWYG (what you see is what you get) editor for an upcoming email integration feature. Users would need to be able to format rich text, insert images, links, and other media when composing emails. It would also need to be dynamic and adjust properties based on channel requirements.
Rather than pulling an editor package from the web, it was decided by product and engineering that we would design and develop our own. This would be our design system’s first fully custom and complex component. It was important that this component remain entirely agnostic, free from any specific product constraints. A considerable friction point in both designing and implementing this component was that our design system (Tidal) was in its early stages of adoption.
The framework
Since the editor was intended to be the first contribution to the Tidal design system, it was important to collaborate across both the Communication Center engineering team, and the design system engineering team. I worked closely with both teams to evaluate different rich text editor library packages that the developers could use as a foundation for the component's logic.
After careful consideration and some proof-of-concepts, we ultimately chose Lexical's open-source library as the base for the component. It was the most up-to-date and supported library in our search.
Process
I started by analyzing the core requirements of a WYSIWYG editor. From there, I determined which features could be accessible based on specific channels in my product, and matched them back to the generic requirements. While the WYSIWYG editor was a key component for my email feature work, it was highly important for the editor to be flexible enough to support all message channels (Email, SMS, WebChat) in my product, and also be generic for any product.
I gathered insights from various product managers and designers about the functionality that users might need from a rich text editor. After synthesizing this information, I determined the features that would be included in the first version of the editor.
Iteration
I explored various layouts and patterns before committing to one that worked for a variety of cases. Since our system was in an early phase of adoption, there were constant changes to specific components nested within the main component, and required frequent refactoring.
Being in communication with two distinct development teams, helped me shape better shape the component’s features. This allowed me to learn the code package’s constraints, decide where customizations would have to occur, and adapt quickly when problems would arise that would require new iterations of the component.
The iteration phase of the editor allowed me to explore the heavy detailed features such as the ability to insert media, links, merge codes/short codes, message templates and more. It was a considerable learning experience in both how the library package handled these features and how our system wanted to absorb/repurpose them.
Into the system & Communication Center
After documentation and hand off to both engineering teams, the editor was published to our design system. With the timely release of our email feature, the editor was in production for all users of Communication Center to interact with. It was also inserted into our user’s settings, where they can format email signatures as needed.
While my product was the first to use the editor, it is readily available across the system to be consumed by any product in the portfolio.
Future thinking
The editor helped establish a guideline for how engineers on product teams outside of the design system team could adapt and build to the system’s requirements. In the future, this will save engineers time when it comes to developing a custom component for their product as a potential Tidal candidate.
When given more time to improve the editor, I would like to simplify the architecture of the component even further. Since it is a complex component with a wide range of functions, there are certainly ways to streamline its usage, properties and placeholder content.