Fixing Ctrl + Z for editor toolbar button actions in non-Firefox browsers

Contribute Feature

AI-generated summary

The issue at hand is with the undo functionality using Ctrl + Z in the editor toolbar of non-Firefox browsers. In browsers like Chrome, using Ctrl + Z does not undo the changes as expected, but instead undoes the last change made before using the toolbar button, leaving the changes from the toolbar buttons in place.

Sujan believes the cause of this issue is the direct setting of value in the toolbar actions code, which only works in Firefox. Other browsers seem to prefer document.execCommand('insertText', ...).

To fix this, Sujan proposes implementing a setValue() method that differentiates between browsers. The next steps include:

  • Mapping the current state of functionality across different browsers
  • Identifying officially supported browsers by Discourse
  • Investigating other files involved in this functionality
  • Researching how other editors handle this functionality
1

Using the editor toolbar in e.g. Chrome has unintended effects:

If you try to undo the changes done to your text with Ctrl + Z, this will not work. Instead the last change done before using the toolbar button will be undone, leaving the changes from the toolbar buttons in place. Unquoting, unstyling, unpreformat a paragraph can be very cumbersome.

A previous discussion was closed to avoid bikeshedding, but as I don’t agree want to get this fixed I asked for clarification and was told to open a new topic. Here we go:

I think the current, unwanted bahaviour, is caused by the direct setting of value in the toolbar actions code: discourse/app/assets/javascripts/discourse/components/d-editor.js.es6 at 91a91d57f006118c4f306b42f63a276cd6cda5ff · discourse/discourse · GitHub Only Firefox likes it this way, all other browsers seem to like document.execCommand('insertText', ...) better.

Research on this is here:
https://stackoverflow.com/questions/7553430/javascript-textarea-undo-redo/10345596#10345596
https://stackoverflow.com/a/27028331/252627
https://codepen.io/netsi1964/pen/QbLLGW
Can I use... Support tables for HTML5, CSS3, etc

Wouldn’t it make sense to implement a setValue() and differentiate between browser there?

Next steps on this would include:

  • Map the current state of functionality (state right now: Firefox works, Chrome doesn’t - what about Safari, Opera, etc?)
  • Which browser are officially supported by Discourse?
  • Are there other files involved in this functionality that I didn’t find?
  • Maybe look into how other editors handle this functionality - this has to have been implemented a dozen times already.
6 Me gusta
2

What roblem are you facing?

3

See the previous discussion I linked to:

(Note: It works as expected in Firefox, but not most other browsers)