Toolbar button to quote text as a discussion citation

[anonymous]

All Trac text input fields (like this ticket description field) have a little toolbar with buttons to make text bold or italic, insert a heading, a link, a code block, a horizontal rule, a new paragraph, a line break or an image.

It would be useful to have an additional button to quote the currently selected text as DiscussionCitations by adding > before each selected line.

[Ryan J Ollos]

PatchWelcome

[Ryan J Ollos]

The JavaScript code would be fairly simple, but it looks like the image edit_toolbar.png​ needs to be modified.

[anonymous]

Would this work?

The last two icons could be used for (de-)indenting the selected block of text (or the current line) by two spaces as required for example for WikiFormatting nested lists, block quotes, or for adjusting code snippets.

[anonymous]

​th:TextareaKeyBindingsPlugin has ​Javascript code for (de-)indent. Adding "> " + with indentation delta 0 should also be easy. But adding the buttons would be better in Trac core.

[Ryan J Ollos]

Looks good. Thanks!

[anonymous]

I wondered if there's a common keyboard shortcut, but apparently not:

	Button icon	Keyboard shortcut
CKEditor	❞	-
Gitlab	❞	-
Github	|=	-
Slack	|=	Ctrl+Shift+9
Stackoverflow	❞	Ctrl+Q
TinyMCE	-	-
Wordpress	❞	Shift+Alt+Q

[Ryan J Ollos]

Replying to anonymous:

​th:TextareaKeyBindingsPlugin has ​Javascript code for (de-)indent.

I'm interested in eventually integrating this plugin to Trac. It might be a good project for someone that wants to get involved.

Trac allows tabbing to navigate form fields, which is standard behavior for web forms. If integrating the plugin, we'd need a way to preserve that behavior such as:

• Using a key or key combination other than tab for indent/dedent.
• Having vim-like behavior to toggle between normal (where tab moves to next field) and edit mode (where tab is input to textarea).

[anonymous]

For my TRAC (1.6) instance I have recently completely rewritten the toolbar code. I call it "wiki buttonbar". Similarities and advantages compared with the "Wiki Toolbar" are as follows:

• The old and the new toolbar are written in JavaScript (plus some CSS). Because they operate on client-side (in the web-browser) they do not depend on any server-side TRAC Python code.
• In the new toolbar each toolbar button is independent from all others. In particular each of the new buttons has its own icon graphics. In the old toolbar all icons are collected in one big compound graphics file.
• Because in the new toolbar buttons are independent it is easier to add new, deleted or rearrange buttons. It is not required to manually calculate pixel offsets and edit CSS anymore.
• Adding a new toolbar button is as easy as adding one line of JavaScript code. CSS changes not needed.
• In the new toolbar the icon graphic files can be SVG, PNG or any other browser image format.
• The new toolbar offers optional drop-down sub-menus.
• The new toolbar supports multi-line text manipulation, for example to intend a whole text block.
• The new toolbar supports regular expressions for advanced text manipulation.
• The new toolbar supports customized JavaScript tool functions. This may be used for cases where regular expressions are not sufficient e.g. table operations.
• The new toolbar can provide all actions of the old one - and more. If really desired it could imitate the old look & feel.

Screenshot:

If there is some basic interest from the TRAC developer team I can offer my code. Just tell me what you think …

Best regards Clemens

[anonymous]

screenshot of re-designed button bar