Consider automatically formatting certain patterns inside TinyMCE

[iseulde]

A lot of editors (Google Docs, Medium, Apple Notes...) allow you to short cut certain formats such as * for a list. It'd be cool if WordPress did this too.

I made a plugin that does this a while ago during GSoC (was a bit of an experiment), and I recently found out there's also an official TinyMCE plugin that does this too (though it's not as good, only formats after you're done with the block).

Other potential shortcuts are - , 1. , > , ---... Maybe even #{1,6}.

​https://github.com/iseulde/wp-front-end-editor/blob/master/js/tinymce.markdown.js
​https://github.com/tinymce/tinymce/blob/master/js/tinymce/plugins/textpattern/plugin.js

Related:

#27159

Removing TinyMCE buttons to improve user experience

I absolutely think Markdown should be in the editor. It's much faster (and much more pleasant) to write markdown on mobile devices than to mess with WYSIWYG buttons.

I do like the idea of some common typed shortcuts for formatting. I'd rather not look at it as Markdown support since it's transforming as you type and I wouldn't want to be beholden to a single given syntax, though it would hold clear advantages for those who know Markdown.

@helen That idea is pretty similar to what I wanted in Press This. I want the content to visually transform (without necessarily losing your text markup) so something like:

> This is a quote

would look like a quote (with quote styles), but the > could still be removed setting it back to standard p styles.

That's why I didn't mention Markdown in this ticket. :) These are just patterns a lot of people know and use, even if they've never heard of Markdown. We're not going to add all Markdown patterns, though the API should be flexible enough to allow plugins to do more.

Maybe we could start with * , - and 1. . This is a tiny enhancement. And we're not in beta yet. :)

This ticket was mentioned in ​Slack in #core-editor by iseulde. ​View the logs.

Okay, we'll try this for the next one.

*, -, and 1. would be a great start. Would love #, ##, etc., as well. I don't think we need anything to do with images or links.

I like this, as long as there's an option to allow users to disable it :) The first thing I do in editors like LibreOffice, etc. is going through the preferences and disable all the automatic conversion ("AutoCorrect") I don't use or like. What if I want to actually type an asterisk * or a double hyphen --, etc. ?

Backspace should convert it back to an asterisk.

Related discussion that is not logged here: ​https://wordpress.slack.com/archives/core-editor/p1425822369000370

This ticket was mentioned in ​Slack in #core-editor by iseulde. ​View the logs.

This ticket was mentioned in ​Slack in #core by azaozz. ​View the logs.

This ticket was mentioned in ​Slack in #core by obenland. ​View the logs.

I'm trying to make some tests for this, but tests/qunit/editor/js/utils.js needs some fixing. Some fixes have already been pushed upstream. Let's also keep it to lists first and maybe look at other things later. That pattern is certainly the most useful. Still needs some more tests.

I think this is good for a first run.

This ticket was mentioned in ​Slack in #core-editor by iseulde. ​View the logs.

This is ridiculously cool. One thing I noticed in trying it out - if I hit enter twice to finish out a list, but then want to start another one of the same type without any text in between, it appends to the list above. I don't know that people are really making separate consecutive lists without anything in between, just wanted to note it.

31441.3.patch looks good and works quite well in all browsers except IE8. Thinking we can just leave IE8 support out of this. 31441.4.patch is almost the same, just couple of small changes: prevents error in IE8 and adds only one setTimeout (outside the loop). Was thinking appending of <br> in the empty paragraph may be bad in IE < 11 but seems to be working.

Funny how the tests fail in Chrome because the browser inserts inline styles and/or <span> with inline styles... Will need a workaround there.

...if I hit enter twice to finish out a list, but then want to start another one of the same type without any text in between, it appends to the list above.

Seems this is how InsertUnorderedList and InsertOrderedList contenteditable commands work. Happens with and without the shortcut. Can probably ask to be fixed upstream but not sure how complex it may be.

This ticket was mentioned in ​Slack in #core-editor by iseulde. ​View the logs.

In 32699:

TinyMCE: add wptextpattern plugin

This plugin can automatically format text patterns as you type. It includes two patterns: unordered (* and - ) and ordered list (1. and 1) ). If the transformation in unwanted, the user can undo the change by pressing backspace, using the undo shortcut, or the undo button in the toolbar.

This is the first TinyMCE plugin that has unit tests and there's some good groundwork for adding tests to existing plugins in the future.

First run. See #31441.

31441.12.patch fixes it (disables it) in IE8 and lower. The "range" returned with editor.selection.getRng() is completely different (no startContainer, etc.) as these browsers only support the old IE range.

It is probably possible to add support for IE8, not sure it's worth the effort.

In 32700:

TinyMCE: wptextpattern: disable for IE 8 and lower

Props azaozz, iseulde.
See #31441.

Some documentation to go along with the plugin code in plugin.js would be helpful to explain what specific patterns are being auto-formatted, as well what methods can be used to "undo" the auto-formatting.

@DrewAPicture Something like this?

Docs

@iseulde: Adjusted your patch in 31441.16.patch​. Ideally, every plugin in this folder should have a file header, so I suppose this is a good place to start. Added a file header description and @since, formatted the list (hehe) in the description.

I also added the /* global tinymce */ comment at the top as that seems to be standard in these plugins. Do with that what you will.

Thank you! /* global tinymce */ is not necessary here, ideally they should all be removed imho.

Above patch makes the tests run ~2x faster. Reuses the editor instance, removes the skin, types less.

In 32703:

TinyMCE: wptextpattern: add docs

Props DrewAPicture and iseulde.
See #31441.

In 32706:

TinyMCE: wptextpattern: make tests ~2x faster

• Reuse the same instance for all tests in the module.
• Run without CSS (skin).
• Less typing.

See #31441.

In 32795:

TinyMCE: wptextpattern: Add blockquote and headings

As discussed in the editor meeting 9 June.
We should re-evaluate these additions towards the end of the release.

See #31441.

Above patch: don't remove all the content when the textnode should be removed.
Sometimes there may also be an empty text node at the start.

31441.18.patch looks good. Found myself reaching for the Esc button several times while testing, so added undo on Esc to 31441.19.patch.

In 32832:

TinyMCE: wptextpattern: fix issue that removes content

• If the resulting text node is empty, don't remove all the content from the paragraph.
• If there's an empty text node at the start of the paragraph, ignore it and consider the next node to be the start.

See #31441.

In 32836:

TinyMCE: wptextpattern: escape should undo

Props azaozz.
See #31441.

@iseulde, what's left to do here?

In 32960:

TinyMCE: prevent error in the wptextpattern plugin when the first child node in a paragraph is not a text node.
See #31441;

This ticket was mentioned in ​Slack in #core by helen. ​View the logs.

Marking as task, but let's make decisions and commit any other patterns ASAP this week.

This ticket was mentioned in ​Slack in #core by dd32. ​View the logs.

In 31441.20.patch: add some help/description to the keyboard shortcuts help popup. The actual description text could use another look :)

In 33127:

TinyMCE: add help for the text patterns to the shortcuts help popup.
See #31441.

In 33128:

TinyMCE, Press This: add the wptextpattern plugin to the Press This editor.
See #31441.

In trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js#L273​ we have this:

tr({ '* or -':  'Bullet list' }) +
tr({ '1. or 1)':  'Numbered list' }) +

Can we replace "or" with something else which doesn't require a translation because that's currently missing.

Can we increase the width of the help popup? It's currently not fully visible in German, see 31441-help-popup-german.png​.

In 33170:

TinyMCE, shortcuts help popup: do not use translatable strings for the keys.
See #31441.

Replying to ocean90:

Could you check what makes it go wider? The text should wrap properly in it.

Unfortunately the MCE modals are non-responsive, the width is fixed. Currently the popup is 360px wide, the largest width that would fit most smart phones. I'd avoid making it wider if possible.

Replying to azaozz:

The value for width gets ignored because tabe-layout: fixed is missing. I've added it in 31441.21.patch​. I've also removed the 20px gap on the right side so we can increase the table by 20px. border-collapse: collapse;, less padding and a fix width for the key row gives us some room for longer strings.

Translations of "Letter":

अक्षर
Burts
Litero
ලිපිය
Bókstavur
Huruf
Letter
Tähemärk
Letra
Γράμμα
Bogstav
Klávesa
Aksara
Слово
Lettera
Hurup
Barua
خەت
ตัวอักษร
پیت
Писмо
אות
Літера
Letër
Tangent
Буква
Slovo
Buchstabe
Literă
Betű
字母
Litera
Harf
Kirjain
حرف
キー
Písmeno
Lettre
Lletra
Үсэг
Bokstav
စာ
Stafur
Таңба
Litir
Tibix
خط
Llythyren
எழுத்து
ຕົວອັກສອນ
అక్షరం
Тамга
অক্ষর
Taratasy
ಪದ
Brief
Літара
Hərf
អក្សរ
Črka
글자
ደብዳቤ
Längt:
تورى
Ciñçí
Raidė
Sulat

Translations of "Action":

रिया
পদক্ষেপ
Darbība
Ago
ක්රියාව
Gerð
Tindakan
Tác vụ
Tegevus
Ενέργεια
Acción
Handling
Akce
Ketak
Радња
Azione
Kitendo
Ação
مەشغۇلات
กระทำ
چالاكی
Действие
פעולה
동작
Veprim
Åtgärd
Akcija
Aktion
Acțiune
管理項目
Działanie
İşlem
Toiminto
操作
Actie
Akcia
Acção
Action
Acció
Gweithred
Үйлдэл
Дејство
Aksje
Radnja
Upaya
Művelet
Ukaz
Aðgerð
Әрекет
Gnìomh
செயற்பாடு
Fal
ບົດບາດ
عمل
कृया
Acción
చర్య
Аракет
Ми
Ekintza
Hetsika
ಕ್ರಿಯೆ
Aksie
الإجراء
Дзеянне
Hərəkət
សកម្មភាព
செயல்
እርምጃ
Akcyjŏ
Accion
Дія
چار
Ékcen
လုပ်ဆောင်ချက်
Veiksmas
Beart
Aksyon

This ticket was mentioned in ​Slack in #core-flow by boren. ​View the logs.

Replying to ocean90:

Actually we can make the popup wider without problems as this is disabled (by default) on touch screen devices (it doesn't make sense there). Can review again if we ever enable it on phones.

In 33286:

TinyMCE, keyboard shortcuts help: make the popup wider to easily accommodate translations.
Part props ocean90. See #31441;

@iseulde, what's keeping us from closing this?

@obenland A decision on headings, an whether to convert on space or enter. This should be brought up in the next meeting.

@iseulde — Now that we have a decision on converting headlines after [return], what's the status? We need to close this ASAP.

In 33452:

TinyMCE: wptextpattern: headings on enter

Fixes #31441.

@markjaquith Done.

In 33458:

TinyMCE: wptextpattern: fix typo and make it faster

See #31441.

In 33501:

TinyMCE: fix the text in the keyboard shortcuts modal for the changed patterns.
See #31441.

In 33504:

TinyMCE: fix (again) the text in the keyboard shortcuts modal for the changed patterns.
See #31441.

In 33507:

TinyMCE: wptextpattern: reorder undo

After formatting on enter, undo should undo the formatting first, then undo the new line.

See #31441.

In 33508:

TinyMCE: wptextpattern: undo on esc after enter

See #31441.

In 33509:

TinyMCE: remove the spare string for the keyboard shortcuts modal.
See #31441.

In 33512:

TinyMCE: wptextpattern: stop propagation on undo

See #31441.