Custom tags / menu items

Starting with version 0.3.2 it is possible to define custom tags.

The definition of the custom menu items is done on the options page of the extension.

The custom menu items are saved in the "Local Storage" (HTML5) of the extension on the current browser.

The text box contains a list of menu item definitions.

Empty lines are allowed.

White space (space and tab) at the start of a line will result in that the line is ignored.

A comment line starts with a # character at the first position. The rest of the line is ignored.

A menu item is defined with attribute lines and ended with a line that starts with a # character (a comment line).

Example: a definition for the HTML <div> tag with an optional class and id prompts

# div with id and class prompts
title:<div id=p1 class=p2>sel CTRL+B CTRL+D
template:<div{{p: id="$1"}}{{p: class="$1"}}>{{s}}
prompt:id value;;class value
#

Attribute line

It has the following format

attributename:value

The text after the : is taken as the value for the attrribute. Be aware of white space surrounding the value text.

At the moment only one type of menu item is allowed: a tag item.

Tag Item

A Tag Item is defined with 3 attributes: title, template, prompt.

The prompt attribute is optional. Needed if the template string contains a {{p}} place holder.

Title attribute

The value of the title attribute is the text shown in the context menu. It can contain a keyboard shortcut definition. A keyboard shortcut definition has the format CTRL+B CTRL+?. At the '?' you fill in a character not yet used as a shortcut key. The prefix is always CTRL+B.

Example: the Goodreads u tag with keyboard shortcut

title:<u> underline CTRL+B CTRL+U

Template attribute

The template attribute contains the text that replaces the current selection. The selected text can be part of the replacement by using a selection placeholder {{s}}. Another placeholder is the prompt placeholder {{p}}, it will be replaced with the content of a prompt dialog box. You can have more than one of each type of placeholder.

A placeholder can have a sub-template definition. If you want to enclose the original text with extra text only if the original text is not empty you can use a sub-template definition. If a placeholder contains a ':' character, the text after the ':' is the sub-template definition with it's own placeholder '$1'. An example might be more clear.

Example: if you only want to add an alt attribute to a tag when the prompt is not empty use the following placeholder

template:{{p: alt="$1"}}

'$1' is the place where the original text for the prompt is inserted.

You can have more than one '$1' occasions.

A selection placeholder can have a sub-template too.

If a template attribute starts with a '<' or '[' it is assumed it will be a tag definition. You don't need to add the closing tag to the template text, it will be added automatic.

Example: the HTML <em> tag with an optional class prompt

template:<em{{p: class="$1"}}>{{s}}

If the tag has no closing tag (example: xhtml tags like <img />) or you have a template that is no tag but it should start with a '<' or '[', place a '!' as your first character.

Example: an xhtml img tag with alt prompt

template:!<img src="{{s}}"{{p: alt="$1"}}/>

Prompt attribute

The prompt attribute contains the question that is asked for "additional text". This "additional text" will replace the {{p}} placeholder.

If you have more then one prompt placeholder {{p}}, you can supply additional questions. Separate the questions with ;;.

Example: the HTML <div> tag with an optional class and id prompts

template:<div{{p: id="$1"}}{{p: class="$1"}}>{{s}}
prompt:id value;;class value