Our own Editor Team Lead and Sr. Software Engineer, Millie Macdonald, has been named a finalist in the 2021 Australian Women in Digital Awards. It’s an amazing achievement and we’re exceptionally proud of her, and her work.
Millie is an integral leader in our core editor team. The work that she’s done on the TinyMCE editor, directly impacts the lives of millions of people globally – from small start-ups, to large companies – and has contributed to revolutionising the software that directly helps us democratise content creation.
Her nomination and finalist status are a tribute to the dedicated work her team has done over the past 12 months, on our premium feature, PowerPaste (see below for a breakdown of the project).
Women in Digital Awards: making incredible women visible
The Women in Digital Awards were conceived from the idea that 'you can't be what you can't see' and it’s a celebration of incredible women within the digital industries and the businesses that support them. Across 13 categories ranging from Founder of the Year to Technical Leader of the Year, the awards provide a platform for women who are dedicated to their craft, their business, and helping lift up others within their industry.
Winners are announced at a gala Award Night on 12 November 2021. On hearing of her finalist status, Millie said, “I’m honoured to be acknowledged as a finalist for the Software Engineer of the Year, powered by TechnologyOne, alongside four other incredible women and organisations. Congratulations to us all and good luck to all the other finalists!”
See the full lineup of phenomenal women in digital finalists @Women in Digital #WIDAwards #WIDAwardsFinalist
The PowerPaste project that earned a finalist place
Millie recently said of her PowerPaste project nomination:
“As someone who writes as a hobby, I've personally had issues with copy+pasting content between GDocs and other publishing apps and sites. In fact, I've had so many problems with formatting not carrying over or spacing looking weird, that the instances are too numerous to mention… and I’m sure everyone’s had the same things happen to them.
So for me, this project had a very concrete, personal impact, because a great editing experience and improvement in that copy-paste function makes my life easier. I have in fact used TinyMCE since the project was completed, to clean up HTML I've copied from one writing app (before pasting it into other apps), when I knew those apps don't normally play well together. It passed the test with flying colours!”
The project: Google Docs support for TinyMCE’s PowerPaste plugin.
PowerPaste overview
PowerPaste is TinyMCEs #1 premium plugin. It helps users transfer content from other sources to applications that use TinyMCE. In the last twelve months, the plugin has been downloaded 55.31 million times (Cloud version only, excludes self-hosted and open source usage).
Previously, in addition to helping paste HTML from various sources into TinyMCE, PowerPaste’s key feature was being able to process HTML from MS Word – which does have a HTML representation on the clipboard, but that HTML does not match modern HTML standards (e.g. lists are represented as styled paragraphs). This HTML requires special knowledge of the structure of Word HTML to work with (e.g. applying CSS to Word lists requires knowing how to detect the right paragraph elements).
PowerPaste removes that complication for our customers, and even offers various integration settings so that (to an extent) our customers can control the output HTML
GDocs copy-paste issues
These days MS Word no longer has a monopoly on document writing and content creation. GDocs is increasingly popular, and many of TinyMCE’s customers wanted their users to be able to copy content from GDocs into their application, and be assured that the pasted HTML is secure, accessible, clean and correct.
This project therefore involved adding GDocs support to PowerPaste, to enable users to copy and paste content written in GDocs into applications using TinyMCE, and have the HTML automatically cleaned up.
The project aimed to improve the experience for both integrators (our direct customers) and their users, by ensuring the content was:
- Secure, by parsing the content for security vulnerabilities
- Accessible, by manipulating the pasted HTML to match current WCAG standards
- Clean, by removing unnecessary style and elements
- Correct, by generally cleaning up up and modernising the HTML to ensure it meets the HTML specification
PowerPaste project impact
This project has allowed users to create content more easily – using tools they’re comfortable with – while also being able to then transfer that content to other applications more easily.
Fundamentally, it's about ease of communication, ease of content creation, and ease of expression.
Integrators can also be assured that content copied from GDocs is automatically being parsed, scanned and cleaned up by TinyMCE – which frees them from having to worry about the usual security concerns related to users pasting content into an application, such as XSS vulnerabilities and broken HTML.
Technical challenges faced during the PowerPaste project
Scope of HTML transformations
The biggest challenge was defining what transformations needed to be made to the GDocs HTML. GDocs does not have a public specification for their HTML structure. Deciding how to transform that HTML into modern, correct and accessible HTML took a lot of research, because both HTML standards and the WCAG standards are very detailed. Sometimes, compromises had to be made.
Lots of planning went into the project ahead of time – including many conversations with Product and devs over the 12 months before the project started. The challenge ahead was that ‘GDocs support’ is a ‘how long is a piece of string’ problem, because there's no limit to how far you can go with cleaning up HTML.
There was so much that could have been done, but we had to find a balance between implementing enough transformations to clean up the HTML from GDocs most commonly-used features, while also meeting our deadlines and not spending more time than necessary on the project.
So we had to define:
- A starting point
- An idea of when to stop
- A way to prioritise everything in between.
This could have been done by trying to write a fully-fleshed out specification on what the final feature would look like. But because there was so much technical complexity within the issues, it was decided a more hands-on approach was better.
This was done through an initial investigation into the obvious problems when pasting GDocs content into TinyMCE, and issues were prioritised based on how badly they would affect users. Then, after that initial round of development, a round of testing was done (with the help of the QA department) to check our work and identify a new set of problems. Those were then prioritised, and went back into development.
This prioritise-develop-test cycle was completed several times – until QA accepted the quality of the feature, and it was then released. At launch, there were still issues that had been identified in our testing, but these were deemed lower priority, and were fixed in later releases.
Architectural Approach
One approach would have been to design an Abstract Syntax Tree (AST) – which PowerPaste currently uses for MS Word content. However, that’s because Word’s HTML is vastly different to standard HTML. Going into this project, we hoped GDocs HTML would be more similar to standard HTML, and therefore we’d be able to simply modify the DOM tree.
Thankfully, this hope turned out to be true, and we were able to take the simpler route.
Lack of GDocs versioning
GDocs isn’t publicly versioned, which makes it difficult to know when it changes behaviour. For example, during the project GDoc’s output HTML appeared to change, so:
- Our support needed to be flexible enough to not break if GDocs HTML changed slightly
- It needed to be easily maintainable and changeable, and
- We needed to record HTML structures we developed for and tested with, so it could be referenced.
This problem was kept in mind as we developed GDocs support, and the issue was also discussed with the QA department and other teams, to ensure that the risks associated were well-understood within the company. We also developed a test suite – containing entire GDocs documents (not just snippets for unit tests), so that the documents and their previous results history were retained for reference, and we were able to detect GDocs changes by comparing new output to past output.
Asynchronous nature of PowerPaste
Accessing clipboard data and processing the HTML is rarely fast. For UX, the main challenge was ensuring users could see something was happening during the paste operations, so we implemented an overlay that visually indicates that TinyMCE is processing the paste operation. The code was also optimized where we could, to ensure pasting didn’t take longer than necessary.
Training
At the start of the project, Millie was our main PowerPaste expert. Many of the other developers had not touched the code base before.
PowerPaste is a large product code-wise, spanning several repositories that handle different aspects of its functionality, so there was a lot to learn to work on it. This was also the first time we’d onboarded a whole team into PowerPaste development, so new training processes and activities had to be designed, especially to account for remote work.
Project success factors
The project was initiated from several customer requests for GDocs support within the PowerPaste plugin. The delivery of a successful release enabled us to close out those requests.
TinyMCE 5.8 was released on May 19th, 2021, with the accompanying release of PowerPaste (including GDocs support). It was released with one minor known issue, which was fixed in 5.8.2 on June 30th, 2021.
We’ve had minimal support tickets since, and based on basic usage tracking we know customers are using the functionality – giving us confidence that customers are happy with the feature.
Officially, what the PowerPaste project did for Millie
“The project allowed me to use my Software Engineering skills to solve security and soundness of copy issues for users, while furthering the goals of TinyMCE to democratise content globally.
My work has made it easier for content to be created using the tools users are familiar with, and move between apps and systems, both on and off the Cloud.”
What Millie really thought…
“It was a really cool project. We don't usually get to work on this large of a project as a whole team focused on one thing… because we often work on tasks that are less than a sprint, or one to two sprints, and that are better defined. It was also an amazing experience to work on something that would have such a tangible impact on our users, and on content creation in general.
Can’t wait for the next major update to come along!”
