Snippets plugin: Difference between revisions

From Bluefish Wiki
Jump to navigation Jump to search
mNo edit summary
No edit summary
 
(42 intermediate revisions by one other user not shown)
Line 2: Line 2:
|lang=en
|lang=en
|rev=2.0.0
|rev=2.0.0
|st=d
|st=u
|Title=7. Custom menu
|Title=7. Snippets plugin
|prev=Man 2 ch07s06
|prev=Man 2 ch07s06
|Subtitle=Chapter VII. More than a Text Editor
|Subtitle=Chapter VII. More than a Text Editor
Line 10: Line 10:


{{toc}}
{{toc}}
The snippets plugin enables you to reuse often used code fragments through a few clicks. Snippets are of two kinds, '''insert string''' and '''search and replace pattern'''. In addition to that, snippets can be organized '''branches'''.


To customize items in the Custom menu tool bar, you will use the Custom menu element:
= Enabling the snippets plugin =
The snippets plugin is activated by default in Bluefish. Otherwise it can be enabled through ''Edit > Preferences > Plugins''.


[[File:Man2_custom_menu_access.png|none|frame|Accessing the Custom Menu]]
= Using snippets =
Snippets can be accessed in two ways. Either through the top bar above the editing area or through the snippets browser in the side panel. If the snippets are not seen at the top bar, right-click in the snippet browser and check ''Show as menu''.


The Custom menu → Edit custom menu... leads to the Custom Menu Editor. The Load new item allows you to load a new menu in case you have directly changed the custom_menu file located in the .bluefish directory within your HOME directory, while Reset item allows you to return to the default custom menu under the same circumstances.
For using insert strings, put the cursor where you need the code fragment, click on the specific snippet or group of snippets you need at the top bar or at the side bar. Depending on the specific snippet, you may should input requested data.


The custom_menu file is created upon install Bluefish and corresponds to some default entries, the ones you can see in the Custom menu tool bar. These will give you an idea what can be done with the custom menu.
= Creating new snippets =
New snippets can be created in the snippets browser at the side panel. Snippets must be within branches. Therefore you may must create a branch at first. Right click in the snippets browser and select ''New Snippet''. Outside a branch you are forced to create a new branch. Only the name of the branch is required. A right-click on the branch enables to create an ''Insert string'' or a ''Replace pattern''.


The custom menu operates ''only'' on elements of the Custom menu tool bar, and allows you to:
== Creating an Insert String ==
Right-click on the branch, where you want to create a new snippet and select ''New snippet'' in the context menu. A dialog will open, select ''Insert string'' at first and click forward. In the next dialog, you have to name your snippet. Optionally, you can give a description of your snippet. It will be shown, when you hover over snippet. Otherwise, the insert string itself will appear.


* add "often used" items to an existing menu
Next, you have to fill in the ''Insert string'' itself. Two text-boxes are provided for the string. The first one is for the string before the cursor, the second after the cursor. In addition to that, you can define parameters with the text-fields right-hand. These will be requested using that snippet. In the snippet itself they are numbered like '%1'. Please use %% if you need literal % in your string! eg: use <tt>style="width:20%%"</tt> to have '''''style="width:20%"''''' Furthermore, you can check if it is a file path. This will provide a file choose dialog.
* search and replace patterns to the Replace menu
* create new menus


The Custom Menu Editor is the place where you make all changes to the custom menu. The location for entries in the custom menu is defined by their menu path in the Custom Menu Editor:
== Creating a Search and Replace pattern ==
Right-click on the branch, where you want to create a new snippet and select ''New snippet'' in the context menu. A dialog will open, select ''Search and Replace pattern'' at first and click forward. In the next dialog, you have to name your snippet. Optionally, you can give a description of your snippet. It will be shown, when you hover over snippet. Otherwise nothing appears.


[[File:Man2_custom_menu_editor.png|none|frame|The Custom Menu Editor]]
Next, you have to define the search and replace pattern. The '''search string '''and the '''replace string''' have to be given. As in insert strings, you can define parameters requested when using that snippets. Likewise in insert strings, they are named like '%1' in the search or replace strings. Names for the dialog can be assigned to them.


It has four parts:
In addition to that, the scope and the match pattern of the search and replace pattern can be assigned. There are four options for the scope:


* The top one with all action buttons:
# Entire document
** Add which adds new menu entries, once all necessary fields have been filled in
# Forward from cursor position
** Apply which applies changes to an existing menu entry, once it has been edited
# Selection
** Delete which deletes the menu entry currently selected in the Menu path list
# All open files
** Close which discards changes
** Save which saves the changes and exit the editor
* The Menu Path field below the buttons, to enter either an existing or a new menu path
* The Menu path list on the left side, which lists existing menu paths. A menu path looks like ''/Main menu/submenu/item'' or ''/Main menu/item''. Here's an extract of the default custom menu paths: <br/> [[File:Man2_custom_menu_default_path.png|none|frame|Extract of the default Custom Menu Path]]
* A custom part on the right side, whose contents changes depending of the type of menu. There are two types of items in the Custom Menu Editor:
** the Custom dialog, which will insert a string, optionally based on values asked in a dialog
** the Custom Find and Replace, which will run a replace, also optionally based on values asked in a dialog. Here's how the Custom Replace dialog looks like: <br/> [[File:Man2_custom_menu_replace_dialog.png|none|frame|The Custom Replace Dialog]]


== 7.1. Adding a custom menu dialog ==
And there are two otions for the match pattern:
The most simple custom dialog item has a menupath, for example ''/MySite/author'', and a Formatstring before, for example ''written by Olivier''. If you add this item, you can add this string by selecting the menu item.


'''Procedure&nbsp;VII.2.&nbsp;Adding a custom menu based on custom dialog'''
# Normal
# PERL


# Choose Custom menu → Edit custom menu... in the custom menu tool bar.
Furthermore, you can check wether the search and replace pattern should be case sensitive and wether to use escape chars.
# Enter <tt>'''/MySite/author'''</tt> in the Menu Path field of the Custom Menu editor.
# Enter <tt>'''written by Olivier'''</tt> in the Formatstring Before field located on the right.
# Click on the Add button at the top.<br/> Notice that upon adding the new entry, it is listed at the bottom of the Menu path list: <br/> [[File:Man2_custom_menu_add_basic.png|none|frame|A new Custom Entry in the Menu Path List]]
# Click on the Save button. This will add the menu to the Custom menu tool bar: <br/> [[File:Man2_custom_menu_basic_result.png|none|frame|A new Menu in the Custom Menu Tool Bar]]


Note that the new menu is placed at the right end of the custom menu tool bar. When closing Bluefish and relaunching it, it will be placed in alphabetical order, except that the Replace menu will always be at the far right side.
Search and replace snippets are very powerful. See [[Man 2 ch05s10|Basic Find and Replace]] and [[Man 2 ch06s05#5.3. Find and Replace Using Regular Expressions|Find and Replace Using Regular Expressions]] for general infos about Bluefish find and replace.


<nowiki>In another example, you have a string you often need to set before and after some block of text, for example <div class="MyClass">YourBlockOfText</div>. To do it:</nowiki>
= Editing snippets =
To edit an existing snippet, right click on the snippet in the snippet browser and select ''edit snippet. ''Then, you have the same process as in creating a new snippet.


# Open the Custom Menu Editor
= Reorder snippets =
# Enter <tt>'''/MySite/div with class'''</tt> in the Menu Path field
Use drag and drop to reorder snippets. You can reorder single snippet or branches. To create a new top level branch you have to right-click on the empty part at the end of the snippets pannel. (actually bug: if you have too many snippets for the height of the window, there is no empty line at the end of the snippets list.)
# <nowiki>Enter <div class="MyClass"> in the </nowiki>Formatstring Before field
# <nowiki>Enter </div> in the </nowiki>Formatstring After field
# Click on Add, then on Save. The item will appear in the menu.


If you select some text:
= Import and export snippets =
Bluefish snippets can easily exported and imported, so that they can be provided on different machines.


[[File:Man2_custom_menu_div_before.png|none|frame|A Block of selected Text before Activating the Menu]]
== Import snippets ==
To import snippets, right-click on the snippet in the snippet browser or, more usefully, a branch of snippets and select ''import''. Navigate through the dialog to the snippet file to be imported.


And activate this menu item, the first bit of text is now added before the selection, and the second bit after the selection:
== Export snippets ==
To export snippets, right-click on the snippet in the snippet browser or, more usefully, a branch of snippets and select ''export''. Use the save dialog to navigate to your specific place for saving it and to name that file.


[[File:Man2_custom_menu_div_after.png|none|frame|A Block of Text after Activating the Menu]]
== Snippets repository ==
In the Bluefish wiki a [[:Category:Snippets repository]] of predefined snippets is provided.


Suppose you want to improve this last example. You have both MyClass1 and MyClass2 and want to be able to choose the desired class when activating the menu. Here's how to do it:
= Set snippet accelerator =
With the Set snippet accelerator keyboard shortcuts can be assigned to a specific snippet. Right-click on the snippet to which a shortcut should be assigned and select ''Set snippet accelerator''. A dialog will ask you for the key combination. ''Crtl'', ''shift'' or ''alt'' can be used. With ''esc'' the Set snippet accelerator can be be canceled, deleted or removed.


# Open the Custom Menu Editor
== Snippets syntax ==
# Browse the Menu path list to retrieve the /MySite/class with div entry and click on it to make appear its components in the Menu Path and Custom Dialog fields
see [[Snippets syntax]]
# Click on the top arrow of the Number of Variables pop up menu to get 1 in the field. As you see a Variables entry appears where you can enter the name for variable %0. As name we enter ''MyClass number''
# Now change the FormatString Before<nowiki> field to take this new variable into account, as following: <div class="MyClass%0"></nowiki>
# Click on Apply so that your changes will be taken in account, and click on Save to update the menu.
 
If you now activate this menu after having selected a block of text, you will be presented with a new dialog asking you for the value of ''MyClass number'':
 
[[File:Man2_custom_menu_div_dialog.png|none|frame|The new DIV with Class Dialog]]
 
After entering the desired value, the same process as before will occur, using the value you provided. Here we have entered 1 as value:
 
[[File:Man2_custom_menu_div_dialog_result.png|none|frame|The Block of Text after Entering the Value]]
 
{{tip|text=You can use the '''Return''' and '''Tab''' keys to format the output.}}
 
Any variable can be used any times you want in the dialog.
 
== 7.2. Adding a custom replace dialog ==
Find and replace items are no different. The dialog has some more options, each of these options corresponds to the regular Replace dialog. Again you can use variables like %0, %1 etc. to make a certain menu item more flexible.
 
Say you want to add title tags to a selection in a HTML page so that the user agent could render it either as a tool tip or as spoken words. To ease the discussion we will work on the following snippet of code:
 
<nowiki><ul></nowiki>
<nowiki><li><a href="progsys01|">Process scheduling</a> - 26/10/2002</li></nowiki>
<nowiki><li><a href="progsys02|">Fork and Wait</a> - 02/11/2002</li></nowiki>
<nowiki></ul></nowiki>
 
We will transform it into the following one:
 
<nowiki><ul></nowiki>
<nowiki><li><a href="progsys01|" title="blah Process scheduling">Process scheduling</a> \</nowiki>
<nowiki>- 26/10/2002</li></nowiki>
<nowiki><li><a href="progsys02|" title="blah Fork and Wait">Fork and Wait</a> \</nowiki>
<nowiki>- 02/11/2002</li></nowiki>
<nowiki></ul></nowiki>
 
where blah is any text you want.
 
The initial rendering:
 
[[File:Man2_custom_menu_page_before.png|none|frame|The HTML Page before the Transformation]]
 
will be transformed as is:
 
[[File:Man2_custom_menu_page_after.png|none|frame|The HTML Page after the Transformation]]
 
<nowiki>To do this, we need to express the <a href="yoururl">yourstring</a> part of the initial snippet of code as a Perl regular expression (see </nowiki>[[Man 2 ch06s05#5.3. Find and Replace Using Regular Expressions|Section 5.3, “Find and Replace Using Regular Expressions”]] for full details):
 
* a href=" will be expressed as is and embedded into parentheses to retrieve it as \0 variable.
* <nowiki>yoururl will be expressed as ([[Man 2 ^"]]+) to match one or more non double quote characters and retrieve it as \1 variable.</nowiki>
* The second double quote will be expressed as is and embedded into parentheses to retrieve it as \2 variable.
* The second > sign will be expressed as is and embedded into parentheses to retrieve it as \3 variable.
* <nowiki>yourstring will be expressed as ([[Man 2 ^>]]+) to match one or more non > characters and retrieve it as \4 variable.</nowiki>
* <nowiki></a> will be expressed as is and embedded into parentheses to retrieve it as \5 variable.</nowiki>
 
<nowiki>Thus, the search string will be: (<a href=")([[Man 2 ^"]]+)(")(>)([[Man 2 ^>]]+)(</a>)</nowiki>
 
<nowiki>The replace string should be of the form: <a href="yoururl" title="yourvariablestring yourstring">yourstring</a></nowiki>
 
Expressed as a regular Perl replacement expression, it will be as simple as: \0\1\2 title=\2%0 \4\2\3\4\5 where %0 will match yourvariablestring, that is the value entered in the Title field of the Replace dialog at activating time.
 
'''Procedure&nbsp;VII.3.&nbsp;Adding a custom menu based on replace dialog'''
 
# Choose Custom menu → Edit custom menu... in the custom menu tool bar.
# Browse the Menu path list to retrieve the <nowiki>/Replace/Convert in Selection/<td> to <th></nowiki> and click on it to make appear its components in the Menu Path and Custom Replace fields.
# Change the Menu Path to /Replace/Anchor/Add Title.
# Click on the top arrow of the Number of Variables pop up menu to get 1 in the field. Enter Title in the %0 Variables field.
# Change the Matching pop up menu to perl regular expressions.
# Change the Search Pattern field like this: <br/>  <nowiki>(<a href=")([[Man 2 ^"]]+)(")(>)([[Man 2 ^>]]+)(</a>)</nowiki>
# Change the Replace String field like this: <br/>  \0\1\2 title=\2%0 \4\2\3\4\5
# Click on the Add button.<br/> The Custom replace dialog should have the following appearance: <br/> [[File:Man2_custom_menu_replace_dialog_new.png|none|frame|]]<br/> '''Figure&nbsp;VII.34.&nbsp;The Custom Menu Replace Dialog filled in'''
# Click on the Save button.
 
To use the new menu item, select the lines to be changed in the HTML file and activate Replace/Anchor/Add Title in the custom menu bar. Fill in the dialog as follows:
 
[[File:Man2_custom_menu_add_title.png|none|frame|The Add Title Dialog]]
 
Click OK to proceed.






{{top}}
{{Man2bottom
{{Man2bottom
|prev=Man 2 ch07s06
|prev=Man 2 ch07s06

Latest revision as of 19:01, 23 April 2015


 

The snippets plugin enables you to reuse often used code fragments through a few clicks. Snippets are of two kinds, insert string and search and replace pattern. In addition to that, snippets can be organized branches.

Enabling the snippets plugin[edit]

The snippets plugin is activated by default in Bluefish. Otherwise it can be enabled through Edit > Preferences > Plugins.

Using snippets[edit]

Snippets can be accessed in two ways. Either through the top bar above the editing area or through the snippets browser in the side panel. If the snippets are not seen at the top bar, right-click in the snippet browser and check Show as menu.

For using insert strings, put the cursor where you need the code fragment, click on the specific snippet or group of snippets you need at the top bar or at the side bar. Depending on the specific snippet, you may should input requested data.

Creating new snippets[edit]

New snippets can be created in the snippets browser at the side panel. Snippets must be within branches. Therefore you may must create a branch at first. Right click in the snippets browser and select New Snippet. Outside a branch you are forced to create a new branch. Only the name of the branch is required. A right-click on the branch enables to create an Insert string or a Replace pattern.

Creating an Insert String[edit]

Right-click on the branch, where you want to create a new snippet and select New snippet in the context menu. A dialog will open, select Insert string at first and click forward. In the next dialog, you have to name your snippet. Optionally, you can give a description of your snippet. It will be shown, when you hover over snippet. Otherwise, the insert string itself will appear.

Next, you have to fill in the Insert string itself. Two text-boxes are provided for the string. The first one is for the string before the cursor, the second after the cursor. In addition to that, you can define parameters with the text-fields right-hand. These will be requested using that snippet. In the snippet itself they are numbered like '%1'. Please use %% if you need literal % in your string! eg: use style="width:20%%" to have style="width:20%" Furthermore, you can check if it is a file path. This will provide a file choose dialog.

Creating a Search and Replace pattern[edit]

Right-click on the branch, where you want to create a new snippet and select New snippet in the context menu. A dialog will open, select Search and Replace pattern at first and click forward. In the next dialog, you have to name your snippet. Optionally, you can give a description of your snippet. It will be shown, when you hover over snippet. Otherwise nothing appears.

Next, you have to define the search and replace pattern. The search string and the replace string have to be given. As in insert strings, you can define parameters requested when using that snippets. Likewise in insert strings, they are named like '%1' in the search or replace strings. Names for the dialog can be assigned to them.

In addition to that, the scope and the match pattern of the search and replace pattern can be assigned. There are four options for the scope:

  1. Entire document
  2. Forward from cursor position
  3. Selection
  4. All open files

And there are two otions for the match pattern:

  1. Normal
  2. PERL

Furthermore, you can check wether the search and replace pattern should be case sensitive and wether to use escape chars.

Search and replace snippets are very powerful. See Basic Find and Replace and Find and Replace Using Regular Expressions for general infos about Bluefish find and replace.

Editing snippets[edit]

To edit an existing snippet, right click on the snippet in the snippet browser and select edit snippet. Then, you have the same process as in creating a new snippet.

Reorder snippets[edit]

Use drag and drop to reorder snippets. You can reorder single snippet or branches. To create a new top level branch you have to right-click on the empty part at the end of the snippets pannel. (actually bug: if you have too many snippets for the height of the window, there is no empty line at the end of the snippets list.)

Import and export snippets[edit]

Bluefish snippets can easily exported and imported, so that they can be provided on different machines.

Import snippets[edit]

To import snippets, right-click on the snippet in the snippet browser or, more usefully, a branch of snippets and select import. Navigate through the dialog to the snippet file to be imported.

Export snippets[edit]

To export snippets, right-click on the snippet in the snippet browser or, more usefully, a branch of snippets and select export. Use the save dialog to navigate to your specific place for saving it and to name that file.

Snippets repository[edit]

In the Bluefish wiki a Category:Snippets repository of predefined snippets is provided.

Set snippet accelerator[edit]

With the Set snippet accelerator keyboard shortcuts can be assigned to a specific snippet. Right-click on the snippet to which a shortcut should be assigned and select Set snippet accelerator. A dialog will ask you for the key combination. Crtl, shift or alt can be used. With esc the Set snippet accelerator can be be canceled, deleted or removed.

Snippets syntax[edit]

see Snippets syntax


Top.png