TinyMCE support for inline multi-language tags

[dgrammatiko]

Pull Request for Issue joomla/accessibility#2
a redo of #11366

Summary of Changes

Support for <span lang="en" dir="ltr" xml:lang="en" depending on the language selected on the dropdown button.

Testing Instructions

Apply patch.
Make sure that you have more than one language installed in joomla, either wise you won't see something new :)

Select some text and then select the required language from the language button (it's a drop down)

Inspect the selected text to make sure that the text is wrapped with the span and the language tag.

Toggle the editor to inspect the actual html code, re toggle few more times to ensure that changes persist.

Save and see if changes are retained. Right now this seems to fail, it must be some weird php side filtering.

Preview

[brianteeman]

is it a mistake putting the image link back in here. it was deliberately removed so that we only have the one image link (the xtd-editor)

[dgrammatiko]

I guess that came from the copy paste, will undo

[brianteeman]

I have tested this item 🔴 unsuccessfully on d42c1fe

I installed hebrew language
Created a content item and pasted in some hebrew - highlighted it and the correct span was applied
But when I saved the content item none of the content was saved

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/11367.}

[dgrammatiko]

@brianteeman the tinymce needs to know that span is allowed element, but I think this also fails in php validation (setting valid elements to *[*] and toggling the editor seems to work, but saving still strips the span element)

[brianteeman]

span isnt the issue. you can enter a span with tinymce by default with no changes. I tested it with

< span class="b">test

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/11367.}

[dgrammatiko]

@brianteeman weird, for me <span class="b">test</span> gets trimmed (not in tinyMCE but in PHP side)

[brianteeman]

I should have said that I was testing the span without the patch

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/11367.}

[brianteeman]

I should have said that I was testing the span without the patch

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/11367.}

[brianteeman]

Still no good. Made a movie

[MATsxm]

I have tested this item 🔴 unsuccessfully on 3f09c54

At this point and after applying the patch.

• without talking about the "span language", I'm not able to save a content.
• The dropdown Language Span feature doesn't appear in the editor toolbar.

  ---

  _{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/11367.}

[dgrammatiko]

@MATsxm now you should be able to see the button, my bad

[MATsxm]

@dgt41

Ok, the BTN is back BUT as soon as the patch is applied (com_patchtester), then I'm not abale to save any content.

Hom to reproduce:

• Apply the patch
• Create a new article
• Add "test" in the content box (html or not)
• Click 'SAVE'
• The input "test" disappear and is not saved

Revert the patch, then it works as expected

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/11367.}

[brianteeman]

I have tested this item 🔴 unsuccessfully on d90b9b1

Test on a new article - press save (with or without applying the langauage tag) nothing is saved
Test on an existing article - edit text (with or without applying the langauage tag) - press save content reverts to the saved version

Apply the language tag to some content and check the code created and it is
<p><span lang="xml" dir="ltr">dvdsvks</span></p>

Note the incorrect tags

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/11367.}

[dgrammatiko]

@MATsxm @brianteeman would be fine now

[dgrammatiko]

One thing that I couldn;t figure out is the usage of the icon \e907

[brianteeman]

907

[MATsxm]

of course 907 would be the one

[brianteeman]

Sorry just re-read. The question wasn't which icon but how to use it?

[MATsxm]

On the JDoc (and AFAIR for other projects) we use it like it is with toolTips

(note, the "lang" and "C" dropdowns are for other kind of purpose)
I guess @brianteeman is the one to find the perfect "caption".

[dgrammatiko]

The conflict comes from .mce-ico which points to font-family: 'tinymce-small', Arial instead of font-family: 'tinymce', Arial. So it should be something with the small buttons logic.
Nope, there is a bug in skin.min.css:
.mce-btn-small .mce-ico{font-family:'tinymce-small',Arial}
should be
.mce-btn-small.mce-ico{font-family:'tinymce-small',Arial}
No space between the classes

[dgrammatiko]

Issue on their repo: tinymce/tinymce#3095

[MATsxm]

Not talking about the icon.

Test1: creating a new article with content -> save (OK) -> using the "Language span" feature -> save then OK with: <p><span dir="ltr" lang="fr" xml:lang="fr">test</span></p>

Test2: creating a new article with content -> using the "Language span" feature -> save then OK with: <p><span dir="ltr" lang="fr" xml:lang="fr">test2</span></p>

Test3: Edit an existing en-GB article with content -> using the "Language span" feature -> save then OK with: <span dir="ltr" lang="fr" xml:lang="fr">incorrupte definitionem</span>

Note: no other languages available than those installed.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/11367.}

[dgrammatiko]

@MATsxm so apart from the icon the rest works as expected?

[MATsxm]

IMHO Yup!

<span dir="ltr" lang="fr" xml:lang="fr">**MERCI!**</span>
😉

[brianteeman]

@dgt41 did you try with the 4.4.1 update #11367

[dgrammatiko]

@brianteeman will try that. tinyMCE 4.4.1 solves the icon problem (theme.min.js)

For the next step here I will need some help. I got the list of all the known languages in the globe from here: http://stackoverflow.com/questions/3217492/list-of-language-codes-in-yaml-or-json
I added the missing direction (but is ltd for all of them) and now somehow we need to

• Verify the language codes
• Verify the Name
• Verify the translated Name
• Assign correct direction fro the RTL ones

The gist for the json data is here: https://gist.github.com/dgt41/c18160606be9ca963b54c5b91ecc9e9f

Once the data is verified the backend of tinyMCE will become like:

The admin could pre-select the available languages for the dropdown.
Help here would be greatly appreciated!

[brianteeman]

Looks like a good ui approach. BUT a better source would be to access the IANA registry. https://www.w3.org/International/articles/language-tags/ . If we're going to offer tags then they need to be correct

[dgrammatiko]

I don't mind the source, the end point should be either an array or a JSON with code, name in English, name in local language and direction. (or at least this is my best guess)

[MATsxm]

@dgt41
I'm also working on a new list: https://github.com/MATsxm/l10n-list/blob/master/php.php
Still many things to do, but can be a good starting point

[Fedik]

sorry, but it looks bad 😄
check how easy to make custom plugin for TinyMCE https://github.com/tinymce/tinymce/blob/master/js/tinymce/plugins/hr/plugin.js

// add button options in PHP
$scriptOptions['joomlalanguages'] = array(
 'lang'=> $langTitle,
 'dir' => $langDir
 .... more
);

// enable button
$toolbar1 .= ' joomlalanguages';

// Custom TinyMCE plugin "joomlalanguages"
tinymce.PluginManager.add('joomlalanguages', function(editor) {

   editor.addCommand('doSomeLanguageStuff', function() {
    var setings = editor.setings.joomlalanguages || {};
    // here is all code for do fancy stuff
  });

    editor.addButton('joomlalanguages', {
        icon: 'translate',
        tooltip: Joomla.JText('PLG_TINY_LANGUAGES_LABEL'),
        cmd: 'doSomeLanguageStuff'
    });
});

you can place that JS in tinymce-init.js at the end

[dgrammatiko]

Yeah, it doesn't use the tinymce-init.js ATM, I've started this before this get merged. But I will change it...

[Fedik]

tinymce-init.js was as example, you can even make own plugin file, depend what you liked more 😉

[Fedik]

then it will be more easy with #11926, will be enough just add joomlalanguages to preset, and to the Known Buttons, in theory

[dgrammatiko]

@Fedik I think I will wait till your PR gets merged, before I'll redo this one!

[andrepereiradasilva]

can we use the new method signature and add the script version?

JHtml::_('script', 'editors/tinymce/plugin-joomlalanguages.js', array('version' => 'auto', 'relative' => true, 'pathOnly' => true));

See https://github.com/joomla/joomla-cms/pull/12373/files for more info

[dgrammatiko]

All known and reported issues should be fixed now. Please test!

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/11367.}

[brianteeman]

Just applied the PR but no languages button on the toolbar
Checked the plugin and its set to enabled
Then I saw the field to select the language and once I had selected some the languages button appeared.
So

1. Can you update the test instructions in the first post with that info
2. Do you think it would be more user friendly if by default all installed content languages are available (and you can add others if needed in the plugin)

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/11367.}

[brianteeman]

Sorry to say but it is still not correctly applying the tag to the correct
In this video I simulated selecting a phrase inside a paragraph and setting the lang on that phrase as french.
As you can see that didnt work as intended

.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/11367.}

[brianteeman]

Another simple test of a hebrew RTL phrase inside an english article

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/11367.}

[brianteeman]

For reference it is expected according to the spec to have a pharse in language B inside a paragraph written in language A https://www.w3.org/International/questions/qa-html-language-declarations#usingspan

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/11367.}

[dgrammatiko]

@brianteeman thanks! So this is a tough one, as solving one problem creates problems for other cases...

Please don't test yet, WAIT for an update here!

[dgrammatiko]

I will reopen this one as soon as I get some free time...

[brianteeman]

@dgrammatiko I think I have a solution for this if you are able to assist

[dgrammatiko]

@brianteeman sure, just FYI I rechecked the code here and it's missing a bit of logic to work as it was expected

[brianteeman]

This is part of the EU funded research project for improving the process of creating accessible content by authors https://accessibilitycluster.com/about .I am representing JandBeyond EV on this project (politics prevented it saying joomla or joomla promoting it)

The aim of the project is mainly in researching and identifying key needs and areas where all cms can benefit. The project might eventually produce some code examples but that's not the main aim.

The research conducted in stage one of the project identified numerous needs by content authors and we are working on testing and evaluating the possibilities for improving each one of those. Not all of them apply to Joomla or we already address those issues.

I am currently reviewing the identified needs to see how they fit with Joomla. I think I have the basis of a solution to this one and then saw your PR from the stone ages ;)

Tinmyce natively has buttons now to se the direction of the language but it still doesnt have anything to mark the language. This is essential to satisfy the "language of parts" accessibility rule. WCAG 2.0: Understanding 3.1.2 Language of Parts: http://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/meaning-other-lang-id.html

Most other CMS already have a solution for this - just not joomla

I came across this native tinymce solution provided by a third party https://github.com/edx/tinymce-language-selector/

Would you be able to see about integrating that. JS is beyond me ;)

Hope that clarifies things a little.

[dgrammatiko]

@brianteeman the code of that plugin needs transpilling, here's a version that will work with the current Joomla's tinyMCE: https://gist.github.com/dgrammatiko/8631faa0ea083e139a7e36e41690b1b6

About reviving this PR: I was looking on that plugin and it seems that quite a lot of what we did here is useless (everything is done in the js land with that plugin). I guess you can open a PR with the switch and the needed changes in the allowed tags and I will push the JS changes there. I mean there's not much that we can take from this one...

[brianteeman]

Thanks. I didnt expect there would be much if anything we could take from here as its so old and for an earlier version.

Is the transpiling something we can automate?

Will check more closely abd create a draft Pr hopefully tomorrow

[dgrammatiko]

Is the transpiling something we can automate?

The J4 build tools supposed to do that (I haven't tried if any imports are actually resolved). But anyways it's something that is patchable

[brianteeman]

great - thanks