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

Allow inserting a link with no text selected #6886

Merged
merged 4 commits into from
May 29, 2018

Conversation

noisysocks
Copy link
Member

@noisysocks noisysocks commented May 22, 2018

Description

Closes #5960 and fixes #6900. When creating a link with no text selected, the link should be inserted with its text set to the URL.

How has this been tested?

  1. Place cursor within a text block and insert a link
  2. Select some text and insert a link
  3. Select some text and insert a link that opens in a new window
  4. Select some text that contains an existing link and insert a link

Screenshots

links

@noisysocks noisysocks added [Type] Enhancement A suggestion for improvement. [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable labels May 22, 2018
@noisysocks noisysocks force-pushed the update/default-link-text-to-the-url branch from 75ff93c to 44f29c7 Compare May 22, 2018 06:58
} );

// mceInsertLink doesn't return the anchor it creates, so query for it
// using a temporary attribute
Copy link
Member Author

@noisysocks noisysocks May 22, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I stole this idea from the classic editor.

} );

// Place the cursor immediately after the newly inserted link
this.editor.selection.select( anchor );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't this be part of the transact callback?

// mceInsertLink doesn't return the anchor it creates, so query for it
// using a temporary attribute
anchor = this.editor.getBody().querySelector( '[data-wp-temp-link]' );
anchor.removeAttribute( 'data-wp-temp-link' );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not quite following why it is necessary to use the temporary attribute. Can't we insert the text and element at once? So I'm guessing when the selection is collapsed, we could use editor.insertContent( '<a href="link">link</a>' ) or something like that?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wasn't having any luck with isCollapsed() yesterday but now when I try it it's fine—amazing what some sleep can do! I've reworked this in 4a02305ff1472d58a32e14fca6abbb01b0fea827 🙂

Copy link
Member

@karmatosed karmatosed left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, thanks for iterating on this.

When creating a link with no text selected, the link should be inserted
with its text set to the URL.
We can avoid the ugly data-wp-temp-link hack by using isCollapsed() and
insertContent().
Fix regression where the 'Open in new window' does not work when adding
a new link.
@noisysocks noisysocks force-pushed the update/default-link-text-to-the-url branch from 2ceec21 to fafe328 Compare May 23, 2018 01:30
@noisysocks
Copy link
Member Author

Thanks for reviewing! I reworked my approach in 7d35c92 and snuck in two bug fixes while I was at it:

  1. 65c08e4 which fixes all of our <a> elements getting an unnecessary isadding attribute
  2. fafe328 which fixes "Open in new window" option only works if you already placed the link #6900

@noisysocks noisysocks merged commit d28fc33 into master May 29, 2018
@noisysocks noisysocks deleted the update/default-link-text-to-the-url branch May 29, 2018 02:35
@noisysocks noisysocks added this to the 3.0 milestone May 29, 2018
@mtias
Copy link
Member

mtias commented Jun 4, 2018

Thanks for the improvement!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Type] Enhancement A suggestion for improvement.
Projects
None yet
4 participants