WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 years ago

Last modified 2 years ago

#31441 closed task (blessed) (fixed)

Consider automatically formatting certain patterns inside TinyMCE

Reported by: iseulde Owned by: iseulde
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.3
Component: TinyMCE Keywords: has-patch
Focuses: javascript Cc:

Description

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


Attachments (33)

31441.patch (2.0 KB) - added by iseulde 3 years ago.
31441.2.patch (6.2 KB) - added by iseulde 2 years ago.
31441.3.patch (9.0 KB) - added by iseulde 2 years ago.
31441.4.patch (9.8 KB) - added by azaozz 2 years ago.
31441.5.patch (9.7 KB) - added by iseulde 2 years ago.
31441.6.patch (11.5 KB) - added by iseulde 2 years ago.
31441.7.patch (11.2 KB) - added by iseulde 2 years ago.
31441.8.patch (11.3 KB) - added by iseulde 2 years ago.
31441.9.patch (11.1 KB) - added by iseulde 2 years ago.
31441.10.patch (11.1 KB) - added by iseulde 2 years ago.
31441.11.patch (547 bytes) - added by iseulde 2 years ago.
31441.12.patch (612 bytes) - added by azaozz 2 years ago.
31441.13.patch (1.1 KB) - added by iseulde 2 years ago.
31441.14.patch (1.1 KB) - added by iseulde 2 years ago.
31441.15.patch (1012 bytes) - added by iseulde 2 years ago.
31441.16.patch (1.1 KB) - added by DrewAPicture 2 years ago.
Docs
31441.17.patch (2.9 KB) - added by iseulde 2 years ago.
31441.18.patch (2.0 KB) - added by iseulde 2 years ago.
31441.19.patch (2.7 KB) - added by azaozz 2 years ago.
31441.20.patch (2.7 KB) - added by azaozz 2 years ago.
help-popup.png (22.2 KB) - added by azaozz 2 years ago.
31441-help-popup-german.png (79.9 KB) - added by ocean90 2 years ago.
31441.21.patch (963 bytes) - added by ocean90 2 years ago.
after-31441.21.png (164.3 KB) - added by ocean90 2 years ago.
31441.22.patch (6.3 KB) - added by iseulde 2 years ago.
31441.23.patch (6.3 KB) - added by iseulde 2 years ago.
31441.24.patch (6.3 KB) - added by iseulde 2 years ago.
31441.25.patch (3.2 KB) - added by azaozz 2 years ago.
31441.26.patch (1.9 KB) - added by iseulde 2 years ago.
31441.27.patch (1.9 KB) - added by iseulde 2 years ago.
31441.28.patch (1.4 KB) - added by iseulde 2 years ago.
31441.29.patch (1.7 KB) - added by iseulde 2 years ago.
31441.30.patch (1.6 KB) - added by iseulde 2 years ago.

Download all attachments as: .zip

Change History (99)

#1 @Michael Arestad
3 years ago

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.

#2 @helen
3 years ago

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.

#3 @Michael Arestad
3 years ago

@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.

#4 @iseulde
3 years ago

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.

@iseulde
3 years ago

#5 @iseulde
3 years ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 4.2

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

Last edited 3 years ago by iseulde (previous) (diff)

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


3 years ago

#7 @iseulde
3 years ago

  • Milestone changed from 4.2 to Future Release

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

#8 @Michael Arestad
2 years ago

*, -, 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.

#9 @afercia
2 years ago

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. ?

#10 @iseulde
2 years ago

  • Keywords needs-refresh added; has-patch removed

Backspace should convert it back to an asterisk.

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


2 years ago

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


2 years ago

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


2 years ago

@iseulde
2 years ago

#15 @iseulde
2 years ago

  • Milestone changed from Future Release to 4.3

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.

@iseulde
2 years ago

#16 @iseulde
2 years ago

  • Keywords has-patch added; needs-refresh removed

I think this is good for a first run.

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


2 years ago

#18 @helen
2 years ago

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.

@azaozz
2 years ago

#19 @azaozz
2 years ago

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.

@iseulde
2 years ago

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


2 years ago

@iseulde
2 years ago

@iseulde
2 years ago

@iseulde
2 years ago

@iseulde
2 years ago

@iseulde
2 years ago

#21 @iseulde
2 years ago

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.

@iseulde
2 years ago

@azaozz
2 years ago

#22 @azaozz
2 years ago

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.

@iseulde
2 years ago

@iseulde
2 years ago

#23 @iseulde
2 years ago

In 32700:

TinyMCE: wptextpattern: disable for IE 8 and lower

Props azaozz, iseulde.
See #31441.

#24 @DrewAPicture
2 years ago

  • Keywords needs-docs added

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.

@iseulde
2 years ago

#25 @iseulde
2 years ago

@DrewAPicture Something like this?

@DrewAPicture
2 years ago

Docs

#26 @DrewAPicture
2 years ago

@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.

#27 @iseulde
2 years ago

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

@iseulde
2 years ago

#28 @iseulde
2 years ago

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

#29 @iseulde
2 years ago

In 32703:

TinyMCE: wptextpattern: add docs

Props DrewAPicture and iseulde.
See #31441.

#30 @iseulde
2 years ago

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.

#31 @iseulde
2 years ago

  • Keywords needs-docs removed

#32 @iseulde
2 years ago

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.

@iseulde
2 years ago

#33 @iseulde
2 years ago

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.

@azaozz
2 years ago

#34 @azaozz
2 years ago

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.

#35 @iseulde
2 years ago

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.

#36 @iseulde
2 years ago

In 32836:

TinyMCE: wptextpattern: escape should undo

Props azaozz.
See #31441.

#37 @obenland
2 years ago

@iseulde, what's left to do here?

#38 @azaozz
2 years ago

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.


2 years ago

#40 @obenland
2 years ago

  • Type changed from enhancement to task (blessed)

#41 @helen
2 years ago

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.


2 years ago

#43 @obenland
2 years ago

  • Owner set to iseulde
  • Status changed from new to assigned

@azaozz
2 years ago

#44 @azaozz
2 years ago

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

@azaozz
2 years ago

#45 @azaozz
2 years ago

In 33127:

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

#46 @azaozz
2 years ago

In 33128:

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

#47 @ocean90
2 years ago

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.

#48 follow-up: @ocean90
2 years ago

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

#49 @azaozz
2 years ago

In 33170:

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

#50 in reply to: ↑ 48 ; follow-up: @azaozz
2 years ago

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.

@ocean90
2 years ago

#51 in reply to: ↑ 50 ; follow-up: @ocean90
2 years ago

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&oacute;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.


2 years ago

#53 in reply to: ↑ 51 @azaozz
2 years ago

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.

#54 @azaozz
2 years ago

In 33286:

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

#55 @obenland
2 years ago

  • Version set to trunk

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

#56 @iseulde
2 years ago

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

#57 @markjaquith
2 years ago

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

Last edited 2 years ago by markjaquith (previous) (diff)

@iseulde
2 years ago

@iseulde
2 years ago

@iseulde
2 years ago

#58 @iseulde
2 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 33452:

TinyMCE: wptextpattern: headings on enter

Fixes #31441.

#59 @iseulde
2 years ago

@markjaquith Done.

#60 @iseulde
2 years ago

In 33458:

TinyMCE: wptextpattern: fix typo and make it faster

See #31441.

#61 @azaozz
2 years ago

In 33501:

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

@azaozz
2 years ago

#62 @azaozz
2 years ago

In 33504:

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

@iseulde
2 years ago

@iseulde
2 years ago

#63 @iseulde
2 years ago

In 33507:

TinyMCE: wptextpattern: reorder undo

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

See #31441.

@iseulde
2 years ago

@iseulde
2 years ago

@iseulde
2 years ago

#64 @iseulde
2 years ago

In 33508:

TinyMCE: wptextpattern: undo on esc after enter

See #31441.

#65 @azaozz
2 years ago

In 33509:

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

#66 @iseulde
2 years ago

In 33512:

TinyMCE: wptextpattern: stop propagation on undo

See #31441.

Note: See TracTickets for help on using tickets.