Skip to content

Support indentation in the markdown editor

Martin Hanzel requested to merge mh/editor-indents into master

What does this MR do?

Fixes #25070 (closed) (and #59657 (closed)).

For EE: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/14585#055a33742b84fcc753f84213e675a4d39b47021e

Indentation

In all editors based on GLForm:

  • Ctrl/Command+] indents the current line or selection by 4 spaces
  • Ctrl/Command+[ unindents the current line or selection by 4 spaces
  • Enter inserts a newline, which is automatically indented
  • Backspace deletes an indent level if at the beginning of the line text
  • Forms have handy help text in the bottom toolbar that inform the user of the keybindings.
  • Very useful when writing technical documentation with code examples, and nested lists!

Why not use Tab/Shift+Tab? This would override the native tab-ordering of forms, breaking accessibility and keyboard-only workflows.

1000 words:

image

Undo stack

Any operation that alters a <textarea>'s contents, including indentation or even the markdown formatting buttons in the toolbar, also breaks the native undo/redo stack. Therefore, custom undo/redo behaviour was implemented in GLForm editors.

  • Ctrl/Command+Z undoes an operation
  • Ctrl/Command+Shift+Z and Ctrl/Command+Y redoes an operation.

The undo stack is modular. It has cool features, and zero dependencies.

As a side-effect, the formatting buttons above the markdown editor no longer break the undo/redo functionality.

Other

  • New methods were added to commons_util for detecting and printing the platform leader key (command on MacOS, ctrl otherwise).
  • A method keystroke was added to commons_util for exact matching of keystrokes and modifiers.
    • This was removed in favour of the mousetrap library, which is already a dependency.
      • The newest version of mousetrap is incompatible and breaks some RSpecs.
      • Using the current version involves a hacky workaround that IMO makes everything less maintainable.
      • Follow-up issue: #63182 (moved)
  • We should consider moving GLForm editors to Ace or similar, but that might be a bigger undertaking, and would involve moving all editors to Vue. Issue and MR discussion editors are partially Vue-ified, while wiki and milestone editors are not.

Does this MR meet the acceptance criteria?

Conformity

Performance and testing

Everything has new Jest unit tests.

Edited by Martin Hanzel

Merge request reports