News to notes - Part 6 - Insert image in notes and news

[Julien-Dubois-eXo]

Rationale

Nowadays, any editor tool provides image insertion. This helps users to showcase their notes and their articles.
Unfortunately, Meeds does not propose such an option.
This MIP will solve this problem by suggesting users insert image into their content with advanced options

1. Functional Requirements

Top User Stories

Image Insertion

Given I'm a platform user
When I edit a note or a news
Then I can insert an image into the content using different UX:

• uploading it from the file explorer of the device
• dropping it to the body
• pasting it

Once inserted into the body, the image is selected and I can use image options:

• Resize by drag and drop
• Move it by drag and drop
• Insert Link (from the toolbar)
• Open properties by double click or right click > Image properties
• Delete the image by pressing delete on the keyboard

On the image properties, we have the URL of the image location.
Once the image is not selected, I cannot do the options

Moving image

• Once selected, I can use the move icon from the image to drag the image elsewhere in the body

Re-size

• I can update the width or the length using the editor options OR using the size cursor from the image
• Once validated, image size is updated and the proportion is respected

Link

• Clicking to "Insert link" on the toolbar opens the link default CKEditor 4 pop-up
• I can add a link
• Change the type of link: URL (default), email, phone, anchor
• Choose the destination: same tab or new tab

Remove link

• Once a link is added to an image, I can remove it by doing a right-click> Remove link

Image properties

We are using the default options for the Ckeditor 4 enhanced image plug-in.

Alignment

• I can align the image to the left, the right, to the center, or none
• When doing so, the image is automatically updated

Size

• I can define the width and the length of the image
• I can lock the proportion of the image
• I can reset the size of the image to have the image's original size

Legend

• I can activate the "Image caption"
• As long as the image is selected, a text area is added above the image to add the image caption
• If no caption is added the area is not displayed when the image is unselected

Alternative text

• I can add an alternative text to the image

Layout improvement for SNV

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

2. Technical Requirements

Configurability

• The CKEditor image2 Plugin should be added and configured for Note Editor without any customization.

Other Non Functional Requirements

• A new noteInsertImage Plugin should be implemented in order to handle image upload and insertion into note editor.
• createAttachment AttachmentService will be called by note services (create, update) in order to store images.
• getAttachment attachmentRest service should be used in order to retrieve the note image.

[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.

[Julien-Dubois-eXo]

@srenault-meeds ready to review for GOFUNC please.

[srenault-meeds]

My feedbacks:

• Can you please review the rationale?
  This is confusing as you tell about the unified search.
  We don't understand why it can be so important for users. Indeed, telling "it's a frequent need from end-users" is not sufficient IMO to explain to anyone the purpose of this feature.

"(no longer several source options)" or "no longer pop-up or drawer settings"

We currently don't have the option so no need to explain it IMO.

Can you review the top US of inserting image the following way? Objective: we understand who can do this, when and how it is possible to do this.

Example:
"Given a user writing an article or a note
When I request to insert an image
Then I can select from my file explorer

Once done, the image is added in the body where I have decided to request the image insertion.
As the image is selected, a balloon editor is proposed so I can access options for the image (see below)"

Lock proportion

Does this option mandatory?
Suggestion: it is locked and we don't propose to the user to unlock it. Indeed, the user can crop the image if needed.

URM balloon

What is URM?

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

I suggest to not add any other option than the current image editor.
That means we don't provide options to resize the image (as we can do it from the balloon editor).

Legend

Is that really needed for a MVP?

Feature flag

If this is only for development phase, we must not add it in the spec. This is only a dev process I think.
If this to be used once the implementation is done and delivered, I don't get the purpose of having it for Meeds.

Thanks

[Julien-Dubois-eXo]

@srenault-meeds ready to review.

[srenault-meeds]

Ok go-fonc

[Julien-Dubois-eXo]

@srenault-meeds I have updated the functional part following the analysis and the decision to use the standard Ckeditor plug-in. Let me know if it is okay with you and if the Go-func is still okay.

[srenault-meeds]

Ok for me

[azayati]

@boubaker Ready to check technical part.

[boubaker]

A question @azayati :

Does the image is inserted with Base64 data inside the Note Content or will you use the AttachmentService to store the image as Notes Attachment ?

[azayati]

A question @azayati :

Does the image is inserted with Base64 data inside the Note Content or will you use the AttachmentService to store the image as Notes Attachment ?

@boubaker No we will use fileService to store and get the images, not Base64 data inside the Note Content. Technical part updated

[boubaker]

A question @azayati :
Does the image is inserted with Base64 data inside the Note Content or will you use the AttachmentService to store the image as Notes Attachment ?

@boubaker No we will use fileService to store and get the images, not Base64 data inside the Note Content. Technical part updated

Why not using the AttachmentService, knowing that everything is in place and that you can reuse the API instead of re-inventing it specifically for Notes. In other terms, what does the AttachmentService API miss so that you prefer making an equivalent API specifically for notes ?

[azayati]

A question @azayati :
Does the image is inserted with Base64 data inside the Note Content or will you use the AttachmentService to store the image as Notes Attachment ?

@boubaker No we will use fileService to store and get the images, not Base64 data inside the Note Content. Technical part updated

Why not using the AttachmentService, knowing that everything is in place and that you can reuse the API instead of re-inventing it specifically for Notes. In other terms, what does the AttachmentService API miss so that you prefer making an equivalent API specifically for notes ?

@boubaker we can use AttachmentService, but IMO in our case:

• We don't need the association between the entityType, entityId and attachmentId, since the rest image url will be already saved in the note body.
• If we use the AttachmentService:
  • We should create/update the association (draft, page, pageVersion) in any operation (create/update),
  • We need to update the attachmentService in order to return the attachmentId when creating the attachment because it is need to generate/replace the rest image url in the note body

If we use don't use AttachmentService, we need only to implement the note rest service to retrieve the note image (like for example note illustration, site banner ...)

[boubaker]

ok, so no blocking points to reuse the AttachmentService, just enhancements of the API to make it adapted to your usage, which is normal to do when an API usage evolves. BTW, the draft status and images attachments was used in more complicated services, like background images in pages layout, thus I think it's adapted to your usage as well.

[azayati]

ok we will use AttachmentService, technical part updated @boubaker

[boubaker]

Thanks @azayati

No need to reference this

• Images will be stored into FILES_FILES table.

since the files can as well be stored in FileSystem rather than the Table as a Blob switch property exo.files.binaries.storage.type

[azayati]

Thanks @azayati

No need to reference this

• Images will be stored into FILES_FILES table.

since the files can as well be stored in FileSystem rather than the Table as a Blob switch property exo.files.binaries.storage.type

ok updated @boubaker

[srenault-meeds]

hello,

I think there is a mistake here. Indeed, It has been moved to "Delivered" status while it has not been delivered yet.
Can you check again please @azayati @Julien-Dubois-eXo ?

Indeed, this status is restricted to MIP delivered, and for which some items need to be worked before considering it completed (crowdin strings for example)

[azayati]

hello,

I think there is a mistake here. Indeed, It has been moved to "Delivered" status while it has not been delivered yet. Can you check again please @azayati @Julien-Dubois-eXo ?

Indeed, this status is restricted to MIP delivered, and for which some items need to be worked before considering it completed (crowdin strings for example)

@srenault-meeds it is strange from my side, I have not changed the status, @Julien-Dubois-eXo also, anyway I have moved it to accepted again