feat: ability to add alt text to images

[Sembauke]

When adding a new image:

When editing a new image:

Closes #392

[Sembauke]

So currently there are a view problems:

1. There is no good way of transporting variables to the new custom image extension. This is because CustomImage is extended from Image (TipTap) which holds a schema for all possible attributes that may be present on the Node.
2. Updating caption/alt text in the DOM is not the same as updating the image in the local Strapi instance. Meaning when updating the image alt text, it should be updated in the DOM and database. After that, the content of the editor needs to be saved. Otherwise the image alt or caption does not align with the one in the database.

CC: @sidemt and @ojeytonwilliams

[sidemt]

@Sembauke Thank you for catching this, I didn't know Strapi saves alternativeText with image files.

I think we can ignore the value in alternativeText attribute, and only save/update alt text in the DOM (HTML).

Ghost doesn't have a separate attribute for alt text either so it shouldn't be a problem (it has feature_image_alt on the latest version, but not on v3, the version we are using.)

The modal to add/edit image is looking awesome 👍

[Sembauke]

One more thing that need to be solved :
At the moment it is possible to click the "Save" button multiple time when adding a new image. This adds the image multiple times into the editor. This is because the image is still being uploaded before the "Upload image modal" is closed.

There is one other issue in the editor but I will have to do more research before I can comment on that.

I have removed the logic that uploads the alternative text and captions to the database. Hopefully we will not need to re-add this in the future. This makes things a lot easier. There won't be any need to auto save as well!

CC: @sidemt

[sidemt]

@Sembauke

I have removed the logic that uploads the alternative text and captions to the database.

I believe this is OK :)

At the moment it is possible to click the "Save" button multiple time when adding a new image. This adds the image multiple times into the editor. This is because the image is still being uploaded before the "Upload image modal" is closed.

Is it possible to disable the save button until the upload completes? If it's complicated, we can leave it to another PR.

[sidemt]

Overall, it's looking good!

Currently, the preview doesn't seem to render <figure> and <figcaption> elements even if the image has a caption. It is rendered properly in the editor. Could you make it appear in the preview too?

Edit: Oliver's PR #427 may fix this issue.

[Sembauke]

Hey @sidemt,

Is it possible to disable the save button until the upload completes? If it's complicated, we can leave it to another PR.
This should be resolved now.

I will wait on #427 to go in.

[sidemt]

LGTM 👍 Sorry for keeping you waiting!

[sidemt]

@Sembauke Sorry, do you mind resolving the conflicts again? I tried doing it myself, but my attempt seems to erase some code in the main branch (the line using useColorMode()) and results in a lint error. I'm not sure what I'm doing wrong.