News to notes - Part 5 - Insert image, unified search and News app search

[Julien-Dubois-eXo]

Rationale

Presently, there is no insert image option in the notes and news editor. It's a frequent need from end-users. We need to implement again the normal behavior for news search in the unified search and the news app search.

1. Functional Requirements

Top User Stories

Insert image option

• Insert image: we keep the pop-up but we removed the alignment.
  • from desktop
  • from existing documents (only for eXo)
  • from URL

Mock-up:

• Insertion UX:
  • the image is directly inserted in the body and selected
  • balloon with all the settings options is diplayed
  • no longer pop-up or drawer settings

Ballon settings options

• Display at the click on the image

• Alignment

  • Left
  • Right
  • Center
  • None (= undefined for CKEditor)

• Size

  • Height and Width selector (linked to the cursor resizing i.e, the values change according to the size defined with the cursor)
  • Lock proportion

• Link

  • Click: I open the quick add URL already present in the stream composer
  • Advanced link options icon at the end of the quick add URM balloon: open the ckeditor link pop-up option

Mock-up:

• Edit image (same options we have in the image portlet) (proposition)

  • Rotation option
  • Zoom option
  • Alternatif text: to add an alternative text for accessibility purposes
  • Cropping options: applied cropping canvas (as we have in the image portlet)
  • None
  • Manual: cropp manually the image by dragging the canvas edges (default value)
  • Square
  • Portrait
  • Landscape
  • Advanced settings
  • Image size (linked to the size image in the balloon) (linked to the cursor resizing i.e, the values change according to the size defined with the cursor)
  • Lock proportion (linked to the size image in the balloon)
  • Original proportion (reset) (linked to the size image in the balloon)
  • Margins (reuse of edit layout component)
  • Border (reuse of edit layout component)
  • Radius (reuse of edit layout component)

• Delete image

• Legend

  • At the selection of the image: display the legend location "Add a legend"
  • Click on edit to edit the legend and add it

Layout improvment for SNV

• Remove of linebreak or any margin if the element (image, table, text, media, etc) is at the last line of a content

Unified search

• When searching a News that is not referenced in a note tree, the note should not be displayed in the results.

News app search

• Make the quick filters work again
• Make the Space filter work again
• Be able to combine all the filters (by name, quick filters and space filter)

Impacts

Gamification

Notifications

Analytics

Unified Search

2. Technical Requirements

Expected Volume & Performance

Security

Extensibility

Configurability

Upgradability

Existing Features

Feature Flags

All the FF will be removed at the end of the iteration.

Property Name	Default Value	Target Audience	Functional Behaviour
exo.feature.insertImage.enabled	False	All users	True: Meeds: Display the insert image option in the note/news editor. eXo : Open the new insert drawer when clicking on the insert image option False: Meeds: Hide the insert image option in the note/news editor. eXo: Open the old insert drawer when clicking on the insert image option

Other Non Functional Requirements

3. Impacts

Documentation

Training

4. Software Architecture

Security

Access

• GUI
• API

Services & processing

• Ex: Scheduled Jobs

Data and persistence

• Macro data model
• Persistence layer
• Use of caches

  Clustering

Multitenancy

Integrations

Migration strategy

5. Annexes

• Reasoning that explain the technical choices
• Impacts
• References

[Julien-Dubois-eXo]

@srenault-meeds to prepare our discussion around the insert image component. I have listed the features available for CKeditor and requested by end-users. I have added one proposition about cropping.