Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(lexical): add alt text on link node #3600

Merged
merged 13 commits into from
Oct 17, 2023

Conversation

mihajlovco
Copy link
Contributor

@mihajlovco mihajlovco commented Oct 12, 2023

This PR allow users to specify "alt text" to link. Technically in HTML, we add alt attribute to a link <a href="https://link.com" alt="link with alt text">

Changes

  • Logically split the views, edit and review have new components: LinkEditForm and LinkReviewForm

Custom command and plugin for the link.

The default implementation of the Link payload doesn't support the alt attribute.

  • Created new LinkNodeAttributesPayload payload
  • New command TOGGLE_LINK_NODE_COMMAND to toggle the link creating
  • Create a custom LinkPlugin that can listen to the new command and toggle the link creation

New alt field for the LinkNode class

  • Support alt field by extending the original JSON object and LinkNodeAttributes in the constructor.

Improved UI

  • Confirm/Cancel buttons on the edit form.
  • When the user clicks on the Cancel button, the user will not see the unsaved changes in the preview page.
  • On inputs with labels URL and Alt text, the user can save the form on the enter key.
  • On the preview view user can see all link options in a bullet list.

How Has This Been Tested?

Manually

Test

Use case 1:

link-with-alt-text.mov

Use case 2:

working-with-ui.mov

Use case 3:
Convert the legacy link node to our custom link node that supports the rel attribute.
Legacy link data:

link-implementation_legacy-link-node-data

Convert the link:

link-implementaion_legacy-link-single-word.mov

Converted legacy link data with test alt text 'a':

link-implementation_converted-link-node-data

@mihajlovco mihajlovco self-assigned this Oct 12, 2023
@mihajlovco mihajlovco added this to the 5.38.0 milestone Oct 12, 2023
@mihajlovco mihajlovco requested review from adrians5j and Pavel910 and removed request for adrians5j October 17, 2023 10:33
@mihajlovco mihajlovco marked this pull request as ready for review October 17, 2023 10:34
@mihajlovco mihajlovco changed the title wip(lexical): add alt text on link node feat(lexical): add alt text on link node Oct 17, 2023
@Pavel910 Pavel910 merged commit eedeb37 into next Oct 17, 2023
58 checks passed
Pavel910 added a commit that referenced this pull request Oct 17, 2023
@Pavel910 Pavel910 self-assigned this Oct 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants