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.

Sign up for GitHub

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

Jump to bottom

Create the proper shortcode on paste #21864

Merged
merged 4 commits into from
Apr 29, 2020
Merged

Create the proper shortcode on paste #21864

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e75e1c3
Prevent content with shortcodes to be pasted inline
oandregal Apr 24, 2020
216134c
Revert "Prevent content with shortcodes to be pasted inline"
oandregal Apr 28, 2020
6860731
Force the blocks mode when pasting in an empty block & the content is…
oandregal Apr 28, 2020
8cf006b
Use existing shortcode regexp
oandregal Apr 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions packages/block-editor/src/components/rich-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import {
} from '@wordpress/rich-text';
import deprecated from '@wordpress/deprecated';
import { isURL } from '@wordpress/url';
import { regexp } from '@wordpress/shortcode';
Copy link
Member

Choose a reason for hiding this comment

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

I didn't see this code at the time of approval. I feel like this belongs in the paste handler together with the rest of the short code logic?

Copy link
Member Author

@oandregal oandregal May 4, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

I think code may have changed since your approval and Miguel's. I didn't think of pinging you for your re-approval after Miguel's approved changes, sorry.

However, I don't know how we can move this logic to the paste handler. The trick here is to switch to BLOCKS mode if 1) we're in an empty line and 2) the pasted text is a shortcode. This logic requires knowledge of the rich text value and the pasted content. My thinking was that having this on the rich-text component would make sense as we already do the same for URLs. How does this look? Happy to refactor if another approach is preferred.

Copy link
Member

Choose a reason for hiding this comment

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

Also the dependencies are missing in the package file

Copy link
Member

Choose a reason for hiding this comment

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

Also the dependencies are missing in the package file

Aside: I thought we had an ESLint rule which verified that any referenced dependencies should be listed in package.json 🤔

Copy link
Member Author

Choose a reason for hiding this comment

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

Ouch 😞 Here's the fix for the missing dependency #22086

Not sure I've done this before so I may have missed something.

Copy link
Member

Choose a reason for hiding this comment

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

Very strange indeed. It fails locally!

 ⇒ npm run lint-js                                                        

> gutenberg@8.0.0 lint-js /Users/andrew/Documents/Code/gutenberg
> wp-scripts lint-js


/Users/andrew/Documents/Code/gutenberg/packages/block-editor/src/components/rich-text/index.js
  42:1  error  '@wordpress/shortcode' should be listed in the project's dependencies. Run 'npm i -S @wordpress/shortcode' to add it  import/no-extraneous-dependencies

✖ 1 problem (1 error, 0 warnings)

Copy link
Member Author

Choose a reason for hiding this comment

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

The Travis job for this PR didn't report anything neither for all subsequent PRs. Just looked at the logs and there aren't any messages about the failure either (it could be that the exit code was wrong for some reason but the message was there).

I can confirm that npm run lint-js and npm run lint do fail locally on master prior to the merge of #22086 Puzzling.

Copy link
Contributor

Choose a reason for hiding this comment

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

Aside: I thought we had an ESLint rule which verified that any referenced dependencies should be listed in package.json 🤔

Oh, that's unfortunate, I let my guard down too. 😞

I didn't see this code at the time of approval. I feel like this belongs in the paste handler together with the rest of the short code logic?

Perhaps, but there are a lot of symmetries with what we do with pasted URLs and embeds. Whatever we do, we should do for both shortcodes and embeds. Perhaps that means letting pasteHandler choose whether to force mode: 'BLOCKS' when initial mode is 'AUTO'; perhaps that means exposing a utility like inferMode or shouldForceBlocksMode from @wordpress/blocks that RichText can use.

Copy link
Member

Choose a reason for hiding this comment

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

Very strange indeed. It fails locally!

After some more debugging, I think I've figured it out.

Fix (and debugging details) at: #22088

Copy link
Member

Choose a reason for hiding this comment

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

Sorry, I don't mind the code, it's something we can always easily change. I was thinking we could also pass empty state to the raw handler. I just thought it might be nice to keep shortcode dependencies in the raw handler since it already depends on it and RichText doesn't. I just noticed the code when I saw the package error.


/**
* Internal dependencies
Expand Down Expand Up @@ -93,6 +94,8 @@ function getAllowedFormats( {

getAllowedFormats.EMPTY_ARRAY = [];

const isShortcode = ( text ) => regexp( '.*' ).test( text );

function RichTextWrapper(
{
children,
Expand Down Expand Up @@ -393,6 +396,18 @@ function RichTextWrapper(

let mode = onReplace && onSplit ? 'AUTO' : 'INLINE';

// Force the blocks mode when the user is pasting
// on a new line & the content resembles a shortcode.
// Otherwise it's going to be detected as inline
// and the shortcode won't be replaced.
if (
mode === 'AUTO' &&
isEmpty( value ) &&
isShortcode( plainText )
) {
mode = 'BLOCKS';
}

if (
__unstableEmbedURLOnPaste &&
isEmpty( value ) &&
Expand Down