Tidal Rich Text Editor
WorkWave
Designing and shipping the first fully custom component in WorkWave's Tidal design system: a WYSIWYG editor built on Lexical.
Context
WorkWave's multi-channel messaging platform needed a WYSIWYG editor for an upcoming email integration. Rather than pulling a package from the web, product and engineering decided to design and develop our own. It became our design system's first fully custom and complex component.
The framework
I worked closely with both the Communication Center engineering team and the design system engineering team to evaluate rich text editor library packages. After careful consideration and proof-of-concepts, we chose Lexical's open-source library as the foundation.
Process
I started by analyzing the core requirements of a WYSIWYG editor, then determined which features could be enabled based on specific channels. I gathered insights from various product managers and designers about the functionality users might need, and synthesized this into the feature set for version one.
Iteration
I explored various layouts and patterns before committing to one that worked for a variety of cases. Being in communication with two distinct development teams helped me shape the component's features, learn the code package's constraints, and adapt quickly when problems arose.
Into the system
After documentation and handoff 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 Communication Center users, and is readily available for any product in the portfolio.
Future thinking
The editor helped establish a guideline for how engineers on product teams outside the design system team could adapt and build to the system's requirements. In the future, I'd like to simplify the architecture further, streamlining its usage, properties, and placeholder content.