SNV - Editors & WYSIWYG application

[srenault-meeds]

Rationale

Single Note View provides a modern way to add a single content in a page thanks to a simple editor. And the note editor can be used to access an advanced editor.

As the note editor has been reviewed lately, we need to make sure that new options proposed there are compliant with the Single Note View use case.

Plus, the display of the content has been reworked in notes. That means that WYSIWYG has been reviewed and adjusted as well as the font-size for reading experience. And currently, the display between a note page and a SNV is different.

1. Functional Requirements

Top User Stories

Normal style

Given I write a content using the "simple" editor of the SNV, Then the display of the content must be similar to Normal style of the notes app. > This style must be WYSIWYG. That means that we have same display when editing and when reading

Following items needs to be adapted:

• Normal text = Normal style of notes app (font-size and padding)
• Quote = quote style of notes app (no italic, border with primary color, same font-size, same padding)
• Bullet list = same style of notes app and same experience when creating different levels (font-size, padding)
• Numbered list = same style of notes app (font-size and padding)

Precision No change to rich editor in this MIP

Other style

Given I use the advanced editor (AKA notes editor) When I save the note, Then the SNV displays the same when reading a note. So we need to make sure that following style are displayed the same way:

1. headers
2. Alignement of text (left, center, right)
3. code snippet
4. Table
5. media embed

Tags behaviour

No tag can be added through SNV experience. Indeed, this needs to be improved later.

Multilingual option

No multilingual option can be used for now when writing a SNV

Impacts

Gamification

NA

Notifications

NA

Analytics

NA

Unified Search

NA

2. Technical Requirements

Extensibility

The same CSS used to display Notes View has to be reused in SNV context.

Feature Flags

No feature flag is needed.

3. Software Architecture

Access

The same CSS class extended-rich-content introduced in MIP #71 has to be used to ensure coherence. The same way as MIP #71, the SNV editor has to configure a custom RichEditorConfigurationPlugin to import additional CKEditor plugins for SNV instance, when editing.

The feature flag exo.feature.SNVFullPageAccess.enabled has to be removed to have access from SNV to Full Notes Editor page. The URL to open the full editor has to evolve to indicate that Tags are disabled while editing the note.

In order to reuse the same CSS Classes of Notes Page, we will have to enhance SkinService to allow defining CSS reusable modules. To do this:

• a PortalConfig has to be able to be defined as abstract/filtered so that it isn't added in all portal pages
• a PortletSkin has to be able to define one or several abstract PortalSkin as dependency
• a PortletSkin can have an empty css-path so that it references abstract PortalSkin list only

[margondicco]

@Julien-Dubois-eXo can you take a look ?

Thank you

[srenault-meeds]

No ready to check @margondicco I will update some item

[srenault-meeds]

Ok now for review please @margondicco @Julien-Dubois-eXo thanks

[Julien-Dubois-eXo]

@srenault-meeds it seems ok for me.

Do you have a design for that "when editing the note: A label informs the user that other languages are proposed"

One small piece of precision, instead of "official" in this "language than the official one" we are using the term "Original version". We have the original version and translations.

[srenault-meeds]

Do you have a design for that "when editing the note: A label informs the user that other languages are proposed"

Not yet.

One small piece of precision, instead of "official" in this "language than the official one" we are using the term "Original version". We have the original version and translations.

Ok updated.

[srenault-meeds]

I let you check this and tell me if go-fonc or not then

[margondicco]

Hello

when editing the note: A label informs the user that other languages are proposed By clicking to it, it opens the advanced editor

So the original version is alway opened even if a note in my language exists ?

[srenault-meeds]

IDK as I can't test it yet in the meeds context. I mean, can you remind me how this works when a user edits a note that contains other language versions

[Julien-Dubois-eXo]

Presently in notes when you edit the notes, it's the currently displayed language version that is opened in the editor.

So in your case, if you applied the same behavior: When you display the English translation because your platform setting or your browser is in English and you edit it Then it's the English translation that is displayed in the editor, not the Original version.

[srenault-meeds]

ok reviewed. Tell me if ok

[Julien-Dubois-eXo]

Instead of this :

If more than one language AND one is proposed for my preferred language (browser or platform), then I see the content with my preferred language

I would recommend: When I edit the note it's the language displayed in view mode that is opened in the editor.

In that way, you are sure there will be one rule that manages the displayed language.

[srenault-meeds]

Ok updated

[srenault-meeds]

Hello @margondicco @Julien-Dubois-eXo I have reviewed the scope of this MIP to only deal with the new editor options and the WYSIWYG compliance.

Tags and Multilingual will be reviewed later.

Can you please check? Thanks

[margondicco]

Go

[srenault-meeds]

Over to you now @boubaker :-)

[boubaker]

Ready for Tech review by DAO members (eXo : @rdenarie ).

[boubaker]

Ready for Tech review by DAO members (eXo : @rdenarie ).

Updated to add a new Technical requirement about skin definition improvement.

[srenault-meeds]

As discussed during the PC, I suggest to make the multilingual option in notes compliant with the SNV. That means:

• we make sure this option is available for users who access a notes editor from SNV
• we make sure the language displayed by default is the preferred one of the user (browser or platform)
• we provide a visual to the user when editing the SNV and when a multilingual version exists (see below)

That doesn't mean we review:

• UI inconsistency of icons for multilingual option
• UX inconsistency with other translations components (language by default)
• UX when deleting a version
• UX when adding a multilingual version and content is empty
• the fact that for a user multilingual = version (risk of confusion with version history)

If ok for you @margondicco then we add it

[boubaker]

ACCs and PRs ready for review by DAO members (eXo : @rdenarie )

[rdenarie]

All PRs validated on my side. I let @margondicco confirm that all is ok for merge

[boubaker]

All PRs validated on my side. I let @margondicco confirm that all is ok for merge

Merged after confirmation that there is nothing blocker.