feat: create reusable plugin

[sashuk]

FX-4109

⚠️ Pull requests were split

Please note that this pull request covers only component API-part of uploading implementation and implements full cycle of image uploading and insertion in Rich Text Editor. Tests (successful and failed uploading, validations) are added in #3717.

Description

This pull request covers component API-part of uploading implementation and implements full cycle of image uploading and insertion in Rich Text Editor.

Design was confirmed in https://toptal-core.slack.com/archives/C04H62YP84F/p1688734127377339.

How to test

• navigate to https://picasso.toptal.net/fx-4109-image-create-reusable-plugin/?path=/story/forms-richtexteditor--richtexteditor and try to upload image in text editor

Screenshots

Kapture.2023-07-11.at.12.58.33.mp4

Development checks

• [N/A] Add changeset according to guidelines (if needed)
• Read CONTRIBUTING.md and Component API principles
• Make sure that additions and changes on design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core
• Annotate all props in component with documentation
• Create examples for component
• Ensure that deployed demo has expected results and good examples
• Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
• Self reviewed
• [N/A] Covered with tests (⚠️ will be done in a separate pull request)

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

PR commands

List of available commands:

• @toptal-bot run package:alpha-release - Release alpha version
• @toptal-anvil ping reviewers - Ping FX team for review

PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

1. You have no extra requests.
2. You have optional requests.
   1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

1. Something is broken after the changes.
2. Acceptance criteria is not reached.
3. Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

1. There are leftovers like unnecessary logs, comments, etc.
2. You have an opinionated comment regarding the code that requires a discussion.
3. You have questions.

How to handle the comments?

1. An owner of a comment is the only one who can resolve it.
2. An owner of a comment must resolve it when it's addressed.
3. A PR owner must reply with ✅ when a comment is addressed.

[sashuk]

@toptal-anvil ping reviewers

[sashuk]

@toptal-anvil ping reviewers

[mkrl]

Awesome job! There's one more thing that I think is good to change.
We provide two ways of enabling plugins:

1. By passing a React Element with the plugin and all the props
2. By referencing a text name of the plugin that is baked into the list of "default" plugins

Currently, ImagePlugin can be imported in both ways, but I think the second option should not be available anymore because it is not possible to pass props (in particular, onUpload).

It can be found here

picasso/packages/picasso-rich-text-editor/src/LexicalEditor/hooks/useComponentPlugins/useComponentPlugins.tsx

Line 12 in d8580f8

case 'image':

(and also a story for RichText => HTML has to be adjusted to have image plugin with React element)

[sashuk]

@mkrl Thank you for noticing, added!