Rewire patterns plugin #1674

ellatrix · 2017-07-03T17:05:03Z

This PR aims to bring the core patterns plugin to Gutenberg. It's still a WIP, but some patterns already work:

Create a new text block and type * . You get a list.
Prepend * to a text block. It will be converted into a list.
Write `something` and it will be wrapped in <code>.
Wrap a word in ` and it will be wrapped in <code>.

dmsnell · 2017-07-03T17:08:54Z

blocks/editable/patterns.js

+ * @return {String}        Escaped characters
+ */
+function escapeRegExp( string ) {
+	return string.replace( /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&' );


you may find lodash.escapeRegExp incredibly handy. I sure have

dmsnell · 2017-07-03T17:09:57Z

Is this only for the TinyMCE blocks? I though that part of what we were getting away from is these awkward patterns. Like, if you want code, make a code block…

Can we write text that starts a line with * ?

ellatrix · 2017-07-03T17:12:30Z

Why are they awkward?

Regarding code, that one is inline, but I think also the lists are incredibly helpful.

dmsnell · 2017-07-03T17:26:29Z

Why are they awkward?

Well just because they aren't expected from the perspective of editing text. If you do this in Word or Google Docs or Pages or what-not they won't transform. It's just a question of whether we carry these forward or encourage the new semantics.

For example, what is the difference between an implicit list in the text block vs an explicit list block? Or, are we converting all these into separate blocks as soon as we type them?

ellatrix · 2017-07-03T17:28:36Z

They are converted into proper blocks. Google Docs, Pages, etc. are also all doing this.

ellatrix · 2017-07-03T17:29:52Z

I'm not sure if I understand your concern on a semantic level.

brentjett · 2017-07-03T17:30:14Z

Dropbox Paper has a nice implementation of these as well and they're pretty nice to use.

ellatrix · 2017-07-03T17:37:08Z

@dmsnell This PR is one of the reasons I was hoping to redo the editor state, so implementing these patterns would be easier and cleaner (without digging in the DOM). Mentioned in #703 (comment), #847 and #771.

dmsnell · 2017-07-03T23:02:20Z

blocks/editable/patterns.js

-	];
+	const [ enterPatterns, spacePatterns ] = partition( patterns, ( { regExp } ) =>
+		regExp.source.endsWith( '$' )
+	);


nice!

although it's awkward to me splitting the function like this. was it too long for one line? I rarely split the arguments ( { regExp } ) from the function body via newline but that's personal style

I guess I should add {}. :)

it was more about splitting the function up when it's only a single line. all personal style

… = partition( patterns, ( { regExp } ) => regExp.source.endsWith( '$' ) );

No more will I speak of this 😄

I have no strong opinions on style. More one or two but... :)

coveralls · 2017-07-08T11:08:01Z

Changes Unknown when pulling 22c1815 on try/editable-patterns into ** on master**.

ellatrix · 2017-07-08T11:23:05Z

@coveralls Could you elaborate?

felixarntz · 2017-07-11T09:33:57Z

@iseulde I opened #1843 for discussing further Markdown syntax to support. I think the different # for headings plus links would be very beneficial to have in order to be able to quickly write regular post content. Not sure if this belongs here or into a separate ticket / PR.

ellatrix · 2017-07-12T10:54:57Z

@felixarntz We can easily add the heading shortcuts here. The rest that is in core has already been added.

dmsnell · 2017-07-12T11:11:57Z

blocks/editable/patterns.js

+		const transformsFrom = get( blockType, 'transforms.from', [] );
+		const transforms = transformsFrom.filter( ( { type } ) => type === 'pattern' );
+		return [ ...acc, ...transforms ];
+	}, [] );


nice use of a reducer here!

ellatrix · 2017-07-20T13:33:59Z

Not sure how I should bring over the tests from PhantomJS + QUnit here. Any ideas? Core test file: https://github.com/WordPress/wordpress-develop/blob/master/tests/qunit/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js

ellatrix · 2017-07-25T17:56:22Z

@nylen What are your thoughts on the tests? I think we should either go ahead and merge this to move forward, or try to add the QUnit tests and manually run them for this.

ellatrix · 2017-07-26T18:55:33Z

Let’s merge and iterate. ✨

nylen · 2017-07-26T19:22:04Z

I've been exploring using https://webdriver.io/ to write some integration tests, and I have the basic structure working. This is a much heavier approach than core's existing QUnit tests, but it has the benefit of being able to test block splitting, focus behavior, etc as well as simply the patterns and selection features within a contenteditable. It also offers some interesting possibilities for automated testing in real browsers with BrowserStack or other similar services.

ellatrix · 2017-07-26T19:41:06Z

That sounds good to me, if it's abstracted and reusable. Do you think this will slow the tests down a lot? Should we run it only when certain files change? In any case, let's explore in a separate PR.

nylen · 2017-07-26T20:00:41Z

Yes, they are slower than the rest of our tests. We should probably only run them against master.

aduth · 2017-07-28T13:40:00Z

blocks/editable/patterns.js

+
+	const [ enterPatterns, spacePatterns ] = partition(
+		patterns,
+		( { regExp } ) => regExp.source.endsWith( '$' ),


ES2015 string prototypes methods aren't polyfilled, so this will error in IE11.

See also: #746

Thanks 🙈

aduth · 2018-08-09T17:14:13Z

blocks/editable/patterns.js

+		}
+
+		const block = pattern.transform( {
+			content: [ remainingText, ...drop( content ) ],


I'm trying to track down what this transform function is meant to accept as an argument. Is the content object intended to be an array of two members, the first entry the text following the matching and the second entry the matched substring? Is it then expected that any pattern must match only at the start of a string? Where is this documented?

dmsnell reviewed Jul 3, 2017

View reviewed changes

ellatrix force-pushed the try/editable-patterns branch from 8dd67ac to 22c1815 Compare July 8, 2017 10:58

westonruter mentioned this pull request Jul 10, 2017

Support Markdown syntax #1843

Closed

dmsnell reviewed Jul 12, 2017

View reviewed changes

mtias added this to the Beta 0.6.0 milestone Jul 12, 2017

mtias added the [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable label Jul 12, 2017

ellatrix force-pushed the try/editable-patterns branch from 22c1815 to 3215b68 Compare July 18, 2017 12:21

ellatrix added the [Status] In Progress Tracking issues with work in progress label Jul 20, 2017

ellatrix self-assigned this Jul 20, 2017

ellatrix added the [Feature] Block API API that allows to express the block paradigm. label Jul 20, 2017

ellatrix added 6 commits July 26, 2017 20:53

Rewire patterns plugin

0b8604d

Undo level no longer needed when replacing a block

7965e3d

Embrace lodash and utils/keycodes

9eaf8f8

Add enter patterns

9ab616b

Add heading patterns, remove DOM logic from space patterns

2d98425

Enable linting

8512b2f

Structure inline callback code better

e214fe2

ellatrix force-pushed the try/editable-patterns branch from 44d9d35 to e214fe2 Compare July 26, 2017 18:54

ellatrix merged commit 2314faa into master Jul 26, 2017

ellatrix deleted the try/editable-patterns branch July 26, 2017 18:55

mtias mentioned this pull request Jul 28, 2017

Backticks for code #703

Closed

aduth reviewed Jul 28, 2017

View reviewed changes

aduth mentioned this pull request Jul 28, 2017

Use Lodash endsWith equivalent #2072

Merged

nylen mentioned this pull request Aug 3, 2017

Experimental Editable state #847

Closed

aduth reviewed Aug 9, 2018

View reviewed changes

aduth mentioned this pull request Aug 13, 2018

RichText: Document the patterns transform #8943

Closed

snyk-bot mentioned this pull request Nov 17, 2020

[Snyk] Security upgrade yargs from 14.2.3 to 16.0.0 wpscholar/gutenberg#11

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rewire patterns plugin #1674

Rewire patterns plugin #1674

ellatrix commented Jul 3, 2017

dmsnell Jul 3, 2017

dmsnell commented Jul 3, 2017

ellatrix commented Jul 3, 2017

dmsnell commented Jul 3, 2017

ellatrix commented Jul 3, 2017

ellatrix commented Jul 3, 2017

brentjett commented Jul 3, 2017

ellatrix commented Jul 3, 2017

dmsnell Jul 3, 2017

ellatrix Jul 5, 2017

dmsnell Jul 5, 2017

ellatrix Jul 5, 2017

coveralls commented Jul 8, 2017

ellatrix commented Jul 8, 2017

felixarntz commented Jul 11, 2017

ellatrix commented Jul 12, 2017

dmsnell Jul 12, 2017

ellatrix commented Jul 20, 2017 •

edited

Loading

ellatrix commented Jul 25, 2017

ellatrix commented Jul 26, 2017

nylen commented Jul 26, 2017

ellatrix commented Jul 26, 2017

nylen commented Jul 26, 2017

aduth Jul 28, 2017

ellatrix Jul 28, 2017

aduth Aug 9, 2018

Rewire patterns plugin #1674

Rewire patterns plugin #1674

Conversation

ellatrix commented Jul 3, 2017

Choose a reason for hiding this comment

dmsnell commented Jul 3, 2017

ellatrix commented Jul 3, 2017

dmsnell commented Jul 3, 2017

ellatrix commented Jul 3, 2017

ellatrix commented Jul 3, 2017

brentjett commented Jul 3, 2017

ellatrix commented Jul 3, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coveralls commented Jul 8, 2017

ellatrix commented Jul 8, 2017

felixarntz commented Jul 11, 2017

ellatrix commented Jul 12, 2017

Choose a reason for hiding this comment

ellatrix commented Jul 20, 2017 • edited Loading

ellatrix commented Jul 25, 2017

ellatrix commented Jul 26, 2017

nylen commented Jul 26, 2017

ellatrix commented Jul 26, 2017

nylen commented Jul 26, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ellatrix commented Jul 20, 2017 •

edited

Loading