This week marks the official end of my Google Summer of Code 2016 project. For the past 3 months I have been working hard on developing a rich and usable user experience for translators using the Translation Management Tool module in Drupal 8. The main goal was to create two CKEditor plugins. The first plugin would convert text parts into segments to easily segment the content into smaller bits and enable easier translation management. It’s also connected with the Translation Memory, to provide saved translation suggestions for requested segments. The second plugin is about masking HTML tags inside segments. This really helps to understand the structure better and cleanly show which opening/closing tags are missing inside a segment.
I believe the goal was clearly reached quite some time ago. After that, we started implementing more functionality around these two main “pillars”. Users can now click through segments, which are clearly shown in both, the source and the translation editors, and check in the area
below the editor for the translation suggestions. They can be used to replace the selected segment. Each segment can contain HTML tags, which are masked in the pre-process, before populating the content. They are displayed as
widgets, as they can be clickable and draggable.
If the translation is missing some tags, a warning message is displayed for awareness. When the translation seems to be fine, it can be marked as completed. This increases the counter of completed segments in the sticky division in the top right corner and colors the segment with a green background.
All of the above currently works fine and more extra features will be added soon!
I started last week as always, by working on the feedback that I got from my mentors on our weekly meeting. This mainly involved some UI fixes, like writing a cleaner validation text and displaying the missing tags not as just links, but with the same styling as the tags that are in the editor. I’ve also added a title for these missing tags, which is displayed when the user hovers the mouse pointer over them. This helps the user to understand that those are connected and when clicked, they can be placed at the cursor position inside the editor. Also to to save space for smaller screens and to tidy up the table with the translation suggestions in the area below the editor, we’re displaying just a more simple text inside the button - “Use” instead of “Use suggestion”. Another UI feature that I added on my mentor’s suggestion was to mark the active segment that has any missing tags with the red color to indicate it more strongly and clearly.
That is why I met with one friend of mine during the weekend and we spent some time reviewing hwo the plugins work and figuring out what could be done better. There were three main things that needed to be done:
I also spent quite some time trying to solve the issue regarding widget dragging inside the segments, which are defined as block elements, but still didn’t find any proper solution. I also tried to contact nod_ and Wim Leers, but got no positive feedback. Any help from the community on that matter would be appreciated. :)
Finally, I would like to make a quick overview of how to test my module, list the things that are working and things that are still missing and need work.
How to test it:
Test for CKEditor pluginsand
Test for CKEditor plugins with paragraphs
What is currently not working:
Note, some of the “not-working” issues listed above are not on my side; either they are out of scope or from a related project.
Another important thing that we should be aware of: this project provides a number of puzzle pieces towards providing translators and reviewers better tools to work with TMGMT. Many other things are needed until this fully works together with real content.
For this last week, I am planning to wrap up my project completely, update the documentation if needed and create issues for my sandbox.
I am very thankful to my mentors Miro Dietiker and Sascha Grossenbacher for the constant supervision, guidance and support throughout this amazing experience. Our future plans involve making the initiated project fully functional in real world with true translations and real usage. When we will think that it is ready, it will be merged into the TMGMT module and I will actively maintain it.