MIR-1417 replace ckeditor with tinymce

[Mewel]

Link to jira.

[yagee-de]

please port back to 2023.06.x

[sebhofmann]

Looks good. But the Tests are broken:

Expected condition failed: waiting for presence of any elements located by By.xpath: .//div[contains(@id,'mods:abstract[1]') and contains(@class, 'cke')]//iframe (tried for 30 

[toKrause]

Any idea how to effectively replace MIR.WebConfig.Editor.CKEditor.Wordcount.MaxCharCount in a way that can still be coordinated with XEditor validaten rules?

---

Example with CKEditor and a character count limit of 2000:

MIR.WebConfig.Editor.CKEditor.Wordcount.CountBytesAsChars=true
MIR.WebConfig.Editor.CKEditor.Wordcount.CountSpacesAsChars=true
MIR.WebConfig.Editor.CKEditor.Wordcount.CountHTML=true
MIR.WebConfig.Editor.CKEditor.Wordcount.CountLineBreaks=true
MIR.WebConfig.Editor.CKEditor.Wordcount.MaxCharCount=2000

<mir:htmlArea xpath="." label="mir.abstract.ortext" help-text="{i18n:mir.help.abstract.ortext}" rows="5" />
<xed:validate display="global" matches="^[\S\s]{1,2001}$" i18n="metadata.validation.abstract.maxLength"/>

[Mewel]

Any idea how to effectively replace MIR.WebConfig.Editor.CKEditor.Wordcount.MaxCharCount in a way that can still be coordinated with XEditor validaten rules?

Example with CKEditor and a character count limit of 2000:

MIR.WebConfig.Editor.CKEditor.Wordcount.CountBytesAsChars=true
MIR.WebConfig.Editor.CKEditor.Wordcount.CountSpacesAsChars=true
MIR.WebConfig.Editor.CKEditor.Wordcount.CountHTML=true
MIR.WebConfig.Editor.CKEditor.Wordcount.CountLineBreaks=true
MIR.WebConfig.Editor.CKEditor.Wordcount.MaxCharCount=2000

<mir:htmlArea xpath="." label="mir.abstract.ortext" help-text="{i18n:mir.help.abstract.ortext}" rows="5" />
<xed:validate display="global" matches="^[\S\s]{1,2001}$" i18n="metadata.validation.abstract.maxLength"/>

I'm not really familiar on how the xeditor validates this. But there is a plugin for tinymce: https://www.tiny.cloud/docs/tinymce/latest/wordcount/ which is also activated by default. So maybe you can use that?

[fluetze]

The only thing xeditor validates against is the given pattern, and it is done server-side after form submission.
<xed:validate display="global" matches="^[\S\s]{1,2001}$" i18n="metadata.validation.abstract.maxLength"/>
The discussion here is about client-side validation.

See xeditor documentation: A possible solution to force validation to be same on client and server side is to use a custom java class that implements it in the server. That class could read the properties and test the input.

[toKrause]

Yes, the idea is to have the same validation on client side and on server side, such that users have a visual feedback while entering (or after pasting) some text; but the actual validation needs to be done on the server side. Users should be able to temporarily enter (or paste) a text, that exceeds the limits.

The configuration given above achieves this effectively with the current editor.

I've already looked at the plugin you mentioned, but it appears to be simply informative. It has no concept of a limit. Displaying the character count might be possible (https://www.tiny.cloud/blog/set-character-count-limit/#h_72792831019251667464431803). A custom plugin might be able to change the text color of the character count to red, if a given limit is exceeded.

Creating a custom validator implementation in Java might actually be an easier approach than trying to force a enforce a limit otherwise. Good idea.

[Mewel]

Can we merge this PR?

[toKrause]

Can we merge this PR?

I'll have to look into how I can coordinate client-side and server-side validation, but that shouldn't impede merging this PR.

Since this is a drastic change, it should be done in main, but I don't think that that is a popular opinion in this case.

[Mewel]

I was asked to do this for 2023, so I guess not.

@yagee-de on Jan 14
please port back to 2023.06.x