My GSoC Journey: Week 6
Welcome to the first week of the second part of the Google Summer of Code with Joomla CMS 🥳! As you might have already guessed, I managed to sucessfully pass the first evaluation period and I’m so happy that I got a great feedback from my mentors which motivated me more to work on my project and implement all the functionalities to the best of my knowledge. And that’s what I tried to do during this week, so let’s see if I was successful 😁.
Tasks
As you can see, the main goal of this week was to basically improve the form which is used to edit images in content editors by adding new form controls. But what will these form controls do? Let’s try a scenario to understand that:
I want to add an image to the content editor and when I add it, I specify some details like image class, lazy loading option, and figure caption/class by using the form that appears on image insertion:
Then I realize that I had a typo in the image class or I just want to change it to something else and I go to the image, right click on it and open the “Insert/Edit Image” dialog, but I can’t find the option to change it. Why? Because there isn’t any 😃. So this is the first problem I tried to solve this week. The second is more of a feature than a problem: adding the option to customize responsive image sizes for each image.
So that was basically it. Looks easy, right 😅? I thought the same until I realized that the form was a part of the “Image” plugin of TinyMCE which wasn’t designed to be extended, there were two options to insert additional fields to the form:
- Edit the existing plugin code
- Insert HTML to the form in the “hard way” by using Javascript
The second option was automatically chosen since the plugin code can be updated in the future and someone would have to adapt the extended functionality to the plugin every time it gets changed. So I created an external TinyMCE plugin for targeting the DOM elements and modifying them:
I created an object jimages where I stored all the helper methods and variables.
Then the first thing to do was to create the HTML code and insert to the right place in the form. I used objects for storing the form state:
For rendering the form fields, I used the renderField method:
We created the form controls and they are ready to get inserted to the form but where is the right place to add the code for this? Fortunately, TinyMCE has an event called OpenWindow that fires whenever a diolog gets opened:
The last step is to update the image details on submit with the values of the brand new form controls. Here we benefit from TinyMCE API again since it has the ExecCommand event that fires whenever a command gets executed (surprisingly 😄) and we know which so we can do something after the form gets submitted:
And finally, we have our newly created form controls:
