How to Use the TAB Button in the Editor

Tips & Tricks
, ,
#1

Create a new Editor Toolbar Button

  • Open: How to create dynamic editor toolbar buttons
  • Press the button: Create a Temporary Bold Button
  • A tiddler $:/temp/bold will be created
  • Rename it to eg: :/insert/tab for testing. For production you can rename it to: $:/insert/tab
  • Change the caption-field to: Tab
  • Change the description-field to: Insert Tab
  • Change the shortcuts-field to: ((tab))

The text content should be changed to:

<$action-sendmessage
	$message="tm-edit-text-operation"
	$param="insert-text"
	text={{{ [charcode[9]] }}}
/>

Create the ShortCut Configuration

  • Create the shortcut config tiddlers
  • Press the Create Shortcut Tiddlers button
  • 3 tiddlers will be created
  • Name the first two:
    • $:/config/shortcuts-not-mac/tab
    • $:/config/shortcuts-mac/tab
      • Change the text to: tab … in both of them
  • Name the 3rd one:
    • $:/config/ShortcutInfo/tab
      • Change the text to: Insert Tab

Important: It’s important that the $:/config/ tiddler titles are renamed to have the /tab at the end. This title has to match the shortcut-field ((tab)) from the very first tiddler. So if you change that text, your config-tiddlers need to be adjusted too.

Change the Button Icon

  • Open :/insert/tab again and
  • Open the Icon Gallery tiddler
  • Choose one of the existing icons or
  • Change the icon-field to: tab.svg which is part of the attached .JSON file here in the post

Change the Position of the Button in the Editor Toolbar

  • Open the $:/ControlPanel → Appearence → Toolbars → Editor Toolbar
  • Drag & Drop the tab-button to the position you prefer

Finally you may rename :/insert/tab to $:/insert/tab to make it a system-tiddler and hide it.

have fun!
Mario

PS: You can change the :/insert/tab tiddler content with this code snippet and you’ll get a similar behaviour as the “toggle bullet list” button.

<$action-sendmessage
	$message="tm-edit-text-operation"
	$param="prefix-lines"
	character={{{ [charcode[9]] }}}
	count="1"
/>

PPS: For the lazy folk and the tab.svg button
tab-editor-toolbar-button-with-tab-svg.json (1.2 KB)

Same thing as a plugin
$__tab.json (1.8 KB)

7 Likes
How concatenate in 5.3.0?
Poll -- Add TAB-key / character to the TW default editor
Poll -- Add TAB-key / character to the TW default editor
Turn on spell checking
#2

huh, I’ve been using text=' ', is there any difference between this and your use of the charcode?

#3

I’m not sure, which character is used in your text=" " string, because tabs are invisible. … And that’s the difference to text={{{ [charcode[9]] }}} where it is obvious what happens.

Otherwise there should be no difference.

1 Like
#4

I made a plugin for this, based on @pmario 's instructions and stuff. That may seem like overkill for a mere character (and you can’t even see it!) it should significantly simplify things for a user. @pmario , if you think it looks good, could you include in your first post in this thread?

…however, shouldn’t this be a button in the standard distro? Surely, being able to type TAB must be a general enough use case?

$__tab.json (1.8 KB)

2 Likes
#5

I think the main problem is, that users may think, they can create text indentation with it. But they can not.

@jeremyruston Should we make that plugin a core-plugin, with a little description, what it is intended to be used for?

1 Like
#6

True, but they will discover this right away. And, of course, status quo is that they cannot produce a tab character at all.

Actually, the functionality of the button should ideally be extended to handle a selected text to insert a tab character before each new “line broken” row. This would be superior for defining css.

1 Like
#7

You can change the :/insert/tab tiddler content with this code snippet and you’ll get a similar behaviour as the “toggle bullet list” button.

<$action-sendmessage
	$message="tm-edit-text-operation"
	$param="prefix-lines"
	character={{{ [charcode[9]] }}}
	count="1"
/>

I did add this info to the OP

1 Like
#8

Is there a means of having this behavior while also being able to indent more than a single line? something along the lines of a “insert-prefix-lines” param?

#9

This code allows you to indent several lines. You need to select some text in the lines that you want to indent. The content of the lines will not be modified. They will all be indented.

1 Like
#10

Apologies, I didn’t word that clearly, what I mean is, when using this the text will indent over 1 indention, and upon clicking it again, will remove the indention.
My question was, is there a way of creating a param for adding multiple indentions for the selected text, so for instance…

Hello
Hello Again

( pressing Tab twice: )

		Hello
		Hello Again

Just like insert-text does?

1 Like
#11

That’s not part of the core. Those functions are available atm: https://tiddlywiki.com/#WidgetMessage%3A%20tm-edit-text-operation

For my custom-markup plugin I did create 2 more buttons and the js-code that is needed for those functions.

  • 1 button for adding any character multiple times
  • 1 button for removing that character

The problem is, that it would be overkill to install that plugin, just to get those buttons.

On the other hand there are some more useful functions that are similar to the core stamp button but 10 times more powerful and fully configurable. Those functions are part of the custom-markup plugin atm.

I did think about it to release them as a separated plugin. But I would add extra overhead to the cm-plugin and there is no docs for the buttons atm.

Edit: Having a look at my code, I also think the functions could be more generic. So a redesign would probably be needed too :confused: