Redmine

I'm assigning this 7.0.0 in order to review the changes.

Takashi Kato, I started to work on rewriting the toolbar in order to render most of the elements on the backend and connect to Stimulus JS for the actions. Here is a prof of concept only for testing purposes, it still need some work.

Any feedback is welcome!

I applied the patch. I think the new toolbar design is simpler and better than before.

• Toolbar generation is now separated into its own class
  • This has the benefit of allowing shorter method names
  • Memoization speeds up rendering on subsequent runs.
• Key binding configuration has been moved from JavaScript to the data-action attribute in Stimulus.
• Added configuration for a hotkey to toggle the preview.

I've committed a combined patch built on the work of Takashi Kato and me. It's the first in a series of changes I'd like to commit before finishing the refactoring of the wiki toolbar.

• Redmine::WikiToolbar renders the toolbar: the edit/preview tabs, the buttons and the menus (code highlighting languages, table generator). Each text formatter (Textile, CommonMark) describes its buttons in Ruby.
• One Stimulus controller handles the buttons, the menus (keyboard navigation, Escape and outside click), the keyboard shortcuts (Ctrl/Cmd+B/I/U, Ctrl/Cmd+Shift+P to toggle preview) and the preview. The preview sends the attachments and the data-preview-param fields.
• The toolbar translations move from the jstoolbar-*.js language files to config/locales (label_wiki_toolbar_*).
• Removed: jsToolBar (jstoolbar.js, textile.js, common_mark.js), the 49 language files and the jQuery preview handler.

• wikitoolbar_for(field_id, preview_url) is unchanged, so views and plugins that call it keep working.
• The markup and CSS classes (jstBlock, jstTabs, jstEditor, jstElements, jstb_*, wiki-preview) are unchanged, so themes keep working.

• define the markup inserted by the buttons in JavaScript, per text formatter;
• render the toolbar around its textarea with partials and a form builder method (wiki_textarea), deprecating wikitoolbar_for;

This change breaks plugins that use the jsToolBar JavaScript object directly (for example, to add buttons) and they need to be updated. Please expect a few days to finish this.

Next changes in the series:

• define the markup inserted by the buttons in JavaScript, per text formatter;

Attached the patch that moves the markup of toolbar buttons from Ruby action parameters to app/javascript/wiki_formatting/<format>.js. Redmine::WikiToolbar will only describes the layout of the buttons.

Please let me know what do you think about this approach.

I tested r25355 and 0001-Define-the-wiki-toolbar-markup-in-JavaScript-for-eac.patch in the browser and compared them with the version before r25352.
I think moving the markup to JavaScript is a good approach: the inserted text and the cursor position are identical for all buttons with Textile and CommonMark.

I found two regressions from r25352. The attached patches apply on top of 0001-Define-the-wiki-toolbar-markup-in-JavaScript-for-eac.patch, the changed lines are the same for the current trunk:

• 0001-wiki-toolbar-keep-textarea-focus.patch: when editing a note, the textarea loses the focus (#40556), because it is moved after edit.js.erb has focused it.
• 0002-wiki-toolbar-keep-menus-in-viewport.patch: on narrow screens, the table and code menus are cut off on the right, as they are now inside the toolbar and no longer positioned with .position().

Two additions:

• 0003-wiki-toolbar-return-focus-after-escape.patch: after closing a menu with Esc, the focus is lost. It now returns to the button.
• 0004-wiki-toolbar-allow-plugins-to-add-buttons.patch: with the markup patch, a plugin cannot add a button anymore, as LABELS.fetch raises a KeyError for an unknown name. This patch adds the methods labels and shortcuts, which plugins can extend, and a wiki-toolbar:button event for buttons that the text formatter does not know.
  Plugins can use it without the importmap:

document.addEventListener('wiki-toolbar:button', ({ detail: { button, editor } }) => {
  if (button === 'mark') editor.wrap('%{background:yellow}', '%')
})

With the patches applied, the unit, integration and system tests of the toolbar pass.