Fix some obvious issues and implement some new features

[tailetan]

Hi @lucaboesch ,

We are from the Open University and would like to propose the following changes:
To begin with, during our smoke testing of your plugin, we identified 2 obvious issues:
Issue 1
• Step to reproduce:

• Untick the ‘Highlight delimiters’ option in the plugin setting and save the setting.
• Go to any TinyMCE editor and select a text then choose a language.
• Go to View > View sourcecode, click cancel.
• Go to View > View sourcecode -> Observer the source code, click cancel.
• Press save -> The mlang tags are saved as a text.

Please refer to this: https://drive.google.com/file/d/1-E0_tHnqN4ClzhnjCfQYzp-qRwIJwY9p/view?usp=sharing

• Expected outcome:
There is no conflict when viewing sourcecode and the behaviour should be the same as when the highlight setting is enabled.
Issue 2
• Step to reproduce:

• Tick the ‘Highlight delimiters’ option in the plugin setting and save the setting.
• In the ‘CSS for language tag’ box, custom some CSS (e.g. change the background-color, …).
• Go to any TinyMCE editor and select a text then choose a language.
• Observe the styling of the language tags still have the default styling.

Please refer to this: https://drive.google.com/file/d/1FEcG8RtmsZLLEcFOoZkMv1wX24pTrSky/view?usp=sharing
• Expected outcome:
The styling of the language tags should apply accordingly based on the ‘CSS for language tag’ setting.

In this commit, I have addressed 2 of the above issues. Additionally, I have implemented some of new feature as outlined:

1. Implement adding languages manually in the plugin setting.
Currently, Based on requirements of https://moodle.org/plugins/tiny_multilang2, if an user intends to add a plugin to TinyMCE, they are required to install at least two languages in their sites. Moreover, some businesses might disable from installing languages in the Language pack and there is only one language installed. Thus, I have implemented a new feature that allows users to add languages within the multilang2 setting if the system operates with only a single language. This setting would allow users to easily add additional languages within the multilang2 setting. Please refer the image below:

2. Implement “Remove all lang tags” option in the dropdown list.
Currently, users can click one of the language tags then remove it by hitting the backspace or delete key. However, as a user, I think the option to remove all lang tags is necessary. That is why I implement that feature. Please refer the image below:

3. Implement language direction.
It is essential to support languages that use right-to-left scripts such as Arabic, Hebrew, etc. That is the reason for this implementation, wherein I have added the 'dir' attribute to the tag. Please refer the image below:

Furthermore, I'd like to inform you that following the testing of the plugin, our testers have identified several issues in relation to the foundational code. These issues are not too obvious, so I'm highlighting these concerns to ensure you're aware and can determine whether you'd like to take steps to resolve them. The details are outlined below:
Issue 1: {mlang} shows when use p/ Ctrl A/ selecting multiple paragraphs (attached video 1)
Instead of selecting the text by highlight the text, we use Ctrl A/ selecting multiple paragraphs,... to select the text then choose the language. The mlang tag place above and below the text then the editor consider the tag as a separate text. Please refer to the following attachment.
https://drive.google.com/file/d/16tTDX-WWPHSUWIe5UyPCpGPDbAO5YdAA/view?usp=sharing

Issue 2: {mlang} tag is amended based on cursor movement despite highlighting other contents. Please refer to the following attachment.
https://drive.google.com/file/d/1woGcg2gqyGP9Da2XqpnhJnxLyKJYUssU/view?usp=sharing

Issue 3: Change Lang of the first mlang tag.
If there is a selection, then the language tags are placed around the selection and user may click one of these tags then select a new language from the menu and that will change the language of the existing tag.
However, currently, we can only click on the closing tag to change the language multiple times, while for the opening tag, we are unable to do so. Please refer to the following attachment.
https://drive.google.com/file/d/15ilLOk_Wa--w6uGg_XhDAL6JbaKJKtb0/view?usp=sharing

Could you please review the code change? Please let me know if you have any concerns. Thank you.

[srobotta]

Dear Tai,

thank you very much for your pull request. First of all you have some very interesting features, that were worth to merge. This enriches the plugin by a few nice functions. Also, thank you for the bug reporting and fixing some of these issues.
I was going through all your changes, tried this on my installation, found out about another few shortcomings and tried to fix this as well.
Please feel free to use the master branch, that I have updated with the merges. If you find out about something still missing, please let me know. I am trying to add some documentation and testing these days and then would like to publish a new release that contains all these changes.

Thank you again, best regards.
Stephan

[tailetan]

Hi @srobotta,
After testing the latest code, we found several issues as follows. Could you please take a look at them?
Issue 1: There is an extra div when change or delete language tag
Steps to reproduce:

• Select a text, then choose a language in multilang2 plugin.
• Click one of the 2 mlang tags to change another language.
• Navigate to View > Sourcecode.
• Observe the sourcecode. There is an extra div (EX: <div id="sel-mce_0" class="mce-offscreen-selection" style="top: 7.31534px;" data-mce-bogus="all">&nbsp;<span class="multilang-begin mceNonEditable fallback" lang="zh" xml:lang="zh">{mlang zh}</span>&nbsp;</div>)
• The issue occurs the same when delete a mlang tag then view sourcecode
  Please refer to the following attachment.
  https://drive.google.com/file/d/1LKWz25Q_YOejLSKXAfHZFDPIalFp6b60/view?usp=sharing

Issue 2: Multilang feature is not working if we select multiple lines/paragraphs
Steps to reproduce:

• Given there are several paragraphs.
• Select all/Ctrl+A paragrphs, then choose a language.
• Observe the {mlang} tag is on the top and bottom of the content.
• Navigate to View > Sourcecode.
• Observe those {mlang} tag are wrapped by <p> tag
• Back to editor and observe the issue
  Please refer to the following attachment.
  https://drive.google.com/file/d/1Ub5YQNaD18YlnO4Q-sdjJbJmYbiqm-GC/view?usp=sharing
  I think that if we select a language for several paragraphs, we should have a loop to iterate through them and then wrap each paragraph with a 'mlang' tag. What do you think about that?

Please let me know if you have any concerns. Thank you.

[lucaboesch]

This caused https://tracker.moodle.org/browse/MDL-81055 to happen more often @tailetan.
Do you have observed that behaviour within the core Moodle multilang filter, too?