More text patterns

[iseulde]

I'd like to add a pattern for a horizontal rule (probably ^-{3,}$), and add support for inline patterns. Any other patterns that should be in core?

This will require some rethinking of the current code.
It'd be great if a WordPress plugin could add and remove patterns.

[johnbillion]

Backticks ` for <code> blocks please!

[jeremyclarke]

+1 for a horizontal rule text pattern, though I guess now it's semantically called a "thematic break":

In previous versions of HTML, it represented a horizontal rule. It may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.
​https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

Also definitely +1 for a PHP API to add new patterns if possible. I'm still looking to see if there is one but this ticket implies it doesn't exist yet.

I was hoping for something like add_text_pattern() and remove_text_pattern(), but even a guide similar to this one (about filtering tiny_mce_before_init to insert custom formats) would be super useful.

​https://codex.wordpress.org/TinyMCE_Custom_Styles

Personally I want to add shortcuts for code and for our custom blockquote.translation blocks.

Related: ​http://wordpress.stackexchange.com/questions/213330/how-can-i-register-a-custom-text-pattern-wp-4-3-for-tinymce

[iseulde]

Aiming to put this in by the end of the weekend. This will include conversions on paste.

[iseulde]

Need an alternative for the bookmark as it does not remove itself. Also tests are timing out in PhantomJS, not sure why yet.

[iseulde]

In 36627:

TinyMCE: inline text patterns

First run.

See #33300.

[iseulde]

Please test. Next meeting we should confirm if this is good behaviour, as well as decide whether or not to add some shortcuts on paste. @mikeschroder

[ramiy]

Few more possible patterns:

• -..- for striked through text <del></del>.
• --..-- for underlined text <span style="text-decoration: underline;"></span>.

Single patterns:

• ---- for <hr>.

And single patterns for "WordPress tags":

• ++++ for <!--more-->
• &&&& for <!--nextpage-->

[iseulde]

In 36719:

TinyMCE: textpattern: clean up

• Use editor.once instead of storing into variables.
• Add pattern for hr.

See #33300.

[ramiy]

@iseulde, the > pattern for blockquotes is good for LRT view. We should add < blockquote pattern for RTL view.

[azaozz]

In 36720:

TinyMCE textpattern: fix error when inserting <hr> if the new paragraph is not direct child of the body.

See #33300.

[azaozz]

Replying to ramiy:

the > pattern for blockquotes is good for LRT view. We should add < blockquote pattern for RTL view.

That's pretty easy to do however in RTL Chrome inserts < when I type >, so changing it will not work. Or we can add both < and > in RTL?

[azaozz]

33300.4.patch for testing in RTL.

[iseulde]

@ramiy: Thanks for the feedback. Underlining is a bad practice for web documents if the underlined text is not a link. So that's a no. <del> has no common pattern or markdown pattern, so we can't do that either, and I don't think it's a good idea to start adding custom WordPress shortcuts for more and next page...

[iseulde]

Maybe, at some point, it could be cool to have inline UI to switch between HR, more and nextpage.

[aduth]

<del> has no common pattern or markdown pattern

Apologies if I lack the background, but while it's true that <del> is not part of the Markdown or CommonMark specs, it is a feature of GitHub Flavored Markdown:

​https://help.github.com/articles/basic-writing-and-formatting-syntax/#styling-text

Example:

This is a ~~mistake~~ success.

Slack offers a similar single-tilde format:

​https://get.slack.help/hc/en-us/articles/202288908-Formatting-your-messages

Example:

This is a ~mistake~ success.

[ramiy]

@iseulde, My way of thinking is a bit different. I was looking at the current TinyMCE buttons and I think we should create text patters for all those buttons, or at least for the basic buttons. To make it easy to write content without the mouse, only the keyboard.

The basic buttons are:

• Bold <strong> - introduced in wp4.3
• Italic <em> - introduced in wp4.3
• Strikethrough <del>
• Unordered List <ul> - introduced in wp4.3
• Ordered List <ol> - introduced in wp4.3
• Blockquote <blockquote> - introduced in wp4.3
• Horizontal Rule <hr> - will be introduced in wp4.5

For now, only the strikethrough <del> has no text pattern.

Also, you said that underlining is a bad practice, but we have an underline button in the editor. In my opinion we should probably add an underline pattern, but we don't have to do it in 4.5.

[azaozz]

In 36761:

TinyMCE textpattern:

• Add description of the new patterns to the Shortcuts help modal.
• Fix the layout a bit and make the patterns in two columns.
• Disable the textpatterns plugin in IE < 9.

See #33300.

[azaozz]

In 36762:

TinyMCE textpattern: Horizontal line is translated, Horizontal rule is not.

See #33300.

[swissspidy]

@iseulde Shortcuts on paste would be a nice improvement.

I just tried inserting a backtick, pasting a word and adding another backtick.

Expected: The pasted word between <code></code>
Actual: The pasted word between backticks.

[ryan]

I ran through the new patterns on Macnchrome and an iPhone 6+. I noticed the lack of shortcut on paste as well, particularly with code. Otherwise, behaving well.

[ryan]

Help dialog showing new patterns, Macnchrome

[ryan]

Editor patterns on an iPhone 6+

[kirasong]

@iseulde: What's left here? Is it being considered to treat <code> differently from the other text patterns (for paste reasons), or are we deciding that it is intended behavior?

[helen]

I've been using this for a bit and have the following thoughts. I would note that I am neither a fan nor a frequent user of Markdown and don't think that it should serve as a canonical source of patterns.

• `code` is awesome for the fairly small subset of people who need it, and is a perfectly good place to include a little bonus for these users. :)
• It does seem like it should convert text that's been pasted between open/close patterns. Not sure if this is what was meant by converting on paste; I had interpreted that feature as converting patterns contained within the paste, which I don't think should be done.
• The open/close patterns seem a little too liberal with converting. I think there should be a space/newline before the start indicator and after the end indicator, with no space on the other side. Right now wp_function_name ends up as wpfunctionname and blah * blah * blah ends up as blah blah blah, which seems a bit strange and very unlikely to actually be what most people want.
• If there's only a single space between the open/close indicators, doesn't seem like it should convert. Right now it just ends up with your text disappearing, which is alarming.
• Generally I dislike that there are multiple patterns for the same thing. We should pick one and stick with it, preferably one that is memorable but not something that would commonly be used for other reasons/habits.
• Per above, for <hr> I would suggest just --- and not ***. Having it be of any length of 3 or more seems okay, though. I don't know if it's meant to work with spaces between the characters, but it doesn't make any sense to do so since they'll convert to an unordered list most of the time (exception is when you've backspaced to undo that conversion).
• I am not very convinced of the utility of bold/italic. Asterisks/underscores are annoying to type on most of the touch screen keyboards I've used (where selecting text to format after the fact is burdensome), and the usual keyboard shortcuts when you can press multiple keys seem intuitive/generally learned enough. I can certainly be convinced that they are useful; would like to hear opinions on this.
• If we keep bold/italic, I would again go with just one pattern for each, and would suggest **bold** and __italic__. I recognize that this is a pretty significant deviation from Markdown, but I think that the differentiation as well as the double characters make it more intentional. I am likely biased because I use *thing* frequently and hate when it converts. If you ever see something from me in Slack that is bold and struck out, it's because I was trying to be *~flippant~* :) And speaking of Slack, they have a great line on why they use *bold* and _italic_: "Our message formatting is similar to other popular services like Skype and Google Talk, and is intended for a majority of our users who are unfamiliar with Markdown."

[azaozz]

In 37023:

TinyMCE: after discussion in Slack ​https://wordpress.slack.com/archives/core/p1458164584000700

• Remove *** and ___ text pattern and support for spaces in ---. The only <hr> text pattern is 3 or more dashes, no spaces.
• Remove the *, **, _, and __ text patterns for bold and italic.

Fixes #33300;

[SergeyBiryukov]

In 37024:

TinyMCE: Adjust textpattern tests for the changes in [37023].

See #33300.

[ramiy]

Another thought: we can also use ~~~ for horizontal lines <hr>.

[ramiy]

The current patterns are confusing, I think we should reserve different chars to different actions:

• # for headings. #, ##, ###, ####, #####, ######
• * for bold text. *, **
• _ for italic text. _, __
• ~ for strikethrough. ~, ~~
• ` for code.
• - for horizontal lines. ---

[DrewAPicture]

Replying to ramiy:

Another thought: we can also use ~~~ for horizontal lines <hr>.

--- (hyphens) already works for horizontal rules <hr />

[azaozz]

In 33300.6.patch: add editor settings to add or override the default text patterns.
Example:

add_filter( 'tiny_mce_before_init', 'textpatterns_test' );
function textpatterns_test( $init ) {
	$init['wptextpattern_inline_patterns'] = '{
		strong: { start: "*", end: "*", format: "bold" },
		strong2: { start: "**", end: "**", format: "bold" },
		em: { start: "_", end: "_", format: "italic" }
	}';

	return $init;
}

[iseulde]

In 37080:

Editor: wptextpattern: add back inline tests

See [37024].
See #33300.