diff --git a/action.php b/action.php
index 72d2757..b6d1f05 100644
--- a/action.php
+++ b/action.php
@@ -1,18 +1,26 @@
 <?php
+
+use dokuwiki\Extension\ActionPlugin;
+use dokuwiki\Extension\Event;
+use dokuwiki\Extension\EventHandler;
+
 /**
  * DokuWiki Plugin custombuttons (Action Component)
  *
  * @license GPL 2 http://www.gnu.org/licenses/gpl-2.0.html
  * @author  Constantinos Xanthopoulos <conx@xanthopoulos.info>
  */
-class action_plugin_custombuttons extends DokuWiki_Action_Plugin {
+class action_plugin_custombuttons extends ActionPlugin
+{
 
     /**
      * Registers a callback function for a given event
      */
-    public function register(Doku_Event_Handler $controller) {
-        if ($this->loadCBData())
-            $controller->register_hook('TOOLBAR_DEFINE', 'AFTER', $this, 'insert_button', array());
+    public function register(EventHandler $controller)
+    {
+        if ($this->loadCBData()) {
+            $controller->register_hook('TOOLBAR_DEFINE', 'AFTER', $this, 'insertButton', []);
+        }
     }
 
     /**
@@ -20,9 +28,10 @@ public function register(Doku_Event_Handler $controller) {
      *
      * @return bool|mixed
      */
-    protected function loadCBData() {
+    protected function loadCBData()
+    {
         $file = @file_get_contents(DOKU_PLUGIN . "custombuttons/config.json");
-        if(!$file) return false;
+        if (!$file) return false;
         return json_decode($file, true);
     }
 
@@ -31,34 +40,38 @@ protected function loadCBData() {
      *
      * @return array
      */
-    protected function makelist() {
+    protected function makelist()
+    {
         $conf = $this->loadCBData();
 
-        $buttonlist = array();
+        $buttonlist = [];
         foreach ($conf as $button) {
             $ico = '../../plugins/custombuttons/';
             if (!$button['icon']) {
-                $ico .= 'genpng.php?text='. $button['label'];
+                $ico .= 'genpng.php?text=' . $button['label'];
             } else {
-                $ico .= 'ico/'. $button['icon'];
+                $ico .= 'ico/' . $button['icon'];
             }
 
             if ($button['type'] == 1) {
-                $buttonlist[] = array(
+                $buttonlist[] = [
                     'type' => 'format',
                     'title' => $button['label'],
                     'icon' => $ico,
                     'open' => $button['pretag'],
-                    'close' => $button['posttag']
-                );
+                    'close' => $button['posttag'],
+                    'sample' => $button['sample'] ?? '',
+                    'class' => $button['icon'] ? '' : 'textbutton'
+                ];
             } else {
-                $buttonlist[] = array(
+                $buttonlist[] = [
                     'type' => 'insert',
                     'title' => $button['label'],
                     'icon' => $ico,
                     'insert' => $button['code'],
-                    'block' => true
-                );
+                    'block' => true,
+                    'class' => $button['icon'] ? '' : 'textbutton'
+                ];
             }
         }
         return $buttonlist;
@@ -67,23 +80,22 @@ protected function makelist() {
     /**
      * Add list with buttons to toolbar
      *
-     * @param Doku_Event $event
-     * @param            $param
+     * @param Event $event
      */
-    public function insert_button(Doku_Event $event, $param) {
+    public function insertButton(Event $event)
+    {
         $buttonlist = $this->makelist();
 
         if ($this->getConf('usepicker')) {
-            $event->data[] = array(
+            $event->data[] = [
                 'type' => 'picker',
                 'title' => $this->getLang('picker'),
                 'icon' => '../../plugins/custombuttons/custom.png',
                 'list' => $buttonlist
-            );
+            ];
         } else {
             $event->data = array_merge($event->data, $buttonlist);
         }
-
     }
 }
 
diff --git a/admin.php b/admin.php
index bb80f5c..98e9e7d 100644
--- a/admin.php
+++ b/admin.php
@@ -1,25 +1,31 @@
 <?php
+
+use dokuwiki\Extension\AdminPlugin;
+
 /**
  * DokuWiki Plugin custombuttons (Admin Component)
  *
  * @license GPL 2 http://www.gnu.org/licenses/gpl-2.0.html
  * @author Constantinos Xanthopoulos <conx@xanthopoulos.info>
  */
-class admin_plugin_custombuttons extends DokuWiki_Admin_Plugin {
+class admin_plugin_custombuttons extends AdminPlugin
+{
 
     /**
      * Return true for access only by admins (config:superuser) or false if managers are allowed as well
      *
      * @return bool
      */
-    public function forAdminOnly() {
+    public function forAdminOnly()
+    {
         return true;
     }
 
     /**
      * return prompt for admin menu
      */
-    public function getMenuText($language) {
+    public function getMenuText($language)
+    {
         return $this->getLang('name');
     }
 
@@ -28,8 +34,9 @@ public function getMenuText($language) {
      *
      * @return bool|mixed
      */
-    protected function loadCBData() {
-        $file = @file_get_contents(DOKU_PLUGIN.'custombuttons/config.json');
+    protected function loadCBData()
+    {
+        $file = @file_get_contents(DOKU_PLUGIN . 'custombuttons/config.json');
         if (!$file) return false;
         return json_decode($file, true);
     }
@@ -39,23 +46,26 @@ protected function loadCBData() {
      *
      * @param $conf
      */
-    protected function saveCBData($conf) {
-        $configfile = DOKU_PLUGIN.'custombuttons/config.json';
-        if (is_writable($configfile) || (!file_exists($configfile) && is_writable(DOKU_PLUGIN.'custombuttons'))) {
+    protected function saveCBData($conf)
+    {
+        $configfile = DOKU_PLUGIN . 'custombuttons/config.json';
+        if (is_writable($configfile) || (!file_exists($configfile) && is_writable(DOKU_PLUGIN . 'custombuttons'))) {
             file_put_contents($configfile, json_encode($conf));
         } else {
             msg($this->getLang('txt_error'), -1);
         }
     }
 
-    protected function reloadBar() {
-        touch(DOKU_CONF.'local.php');
+    protected function reloadBar()
+    {
+        touch(DOKU_CONF . 'local.php');
     }
 
     /**
      * Execute the requested action
      */
-    public function handle() {
+    public function handle()
+    {
         global $INPUT;
 
         if ($INPUT->has('add')) {
@@ -63,28 +73,37 @@ public function handle() {
 
             $conf = $this->loadCBData();
             if (!$conf) {
-                $conf = array();
+                $conf = [];
             }
             $type = 0;
-            if ($INPUT->str('pretag') != '' && $INPUT->str('posttag') != '') {
+            if ($INPUT->str('pretag') != '' || $INPUT->str('posttag') != '') {
                 $type = 1;
             }
-            array_push($conf, array(
+            $button = [
                 'label' => $INPUT->str('label'),
-                'code'  => $INPUT->str('code'),
-                'type'  => $type,
-                'pretag'  => $INPUT->str('pretag'),
+                'code' => $INPUT->str('code'),
+                'type' => $type,
+                'pretag' => $INPUT->str('pretag'),
                 'posttag' => $INPUT->str('posttag'),
-                'icon'  => $INPUT->str('icon'),
-            ));
+                'sample' => $INPUT->str('sample'),
+                'icon' => $INPUT->str('icon')
+            ];
+            $id = $INPUT->int('id', -1);
+            if ($id === -1) {
+                $conf[] = $button;
+            } else {
+                //overwrite existing
+                $conf[$id] = $button;
+            }
+
 
             $this->saveCBData($conf);
             $this->reloadBar();
-        } elseif ($INPUT->has('delete')) {
+        } elseif ($INPUT->has('submitdelete') && $INPUT->has('select')) {
             if (!checkSecurityToken()) return;
 
             $conf = $this->loadCBData();
-            unset($conf[$INPUT->int('delete')]);
+            unset($conf[$INPUT->int('select')]);
             $this->saveCBData($conf);
             $this->reloadBar();
         }
@@ -93,96 +112,126 @@ public function handle() {
     /**
      * Render HTML output
      */
-    public function html() {
-        global $ID;
+    public function html()
+    {
+        global $ID, $INPUT;
         $conf = $this->loadCBData();
 
         echo '<div id="custombuttons">';
-        echo '<h1>'.$this->getLang('name').'</h1>';
+        echo '<h1>' . $this->getLang('name') . '</h1>';
 
         // list of custom buttons
-        echo '<h3>'.$this->getLang('btnslist').'</h3>';
-        echo '<form id="cb_button_list" action="'.wl($ID).'" method="post">'
-            .'<input type="hidden" name="do" value="admin" />'
-            .'<input type="hidden" name="page" value="'.$this->getPluginName().'" />';
+        echo '<h3>' . $this->getLang('btnslist') . '</h3>';
+        echo '<form id="cb_button_list" action="' . wl($ID) . '" method="post">'
+            . '<input type="hidden" name="do" value="admin" />'
+            . '<input type="hidden" name="page" value="' . $this->getPluginName() . '" />';
 
         formSecurityToken();
 
         echo '<table class = "inline">';
         echo '<tr>'
-            .'<th>'.$this->getLang('btnslist_label').'</th>'
-            .'<th>'.$this->getLang('btnslist_code').'</th>'
-            .'<th>'.$this->getLang('btnslist_delete').'</th>'
-            .'</tr>';
+            . '<th>' . $this->getLang('btnslist_label') . '</th>'
+            . '<th>' . $this->getLang('btnslist_code') . '</th>'
+            . '<th>' . $this->getLang('btnslist_select') . '</th>'
+            . '</tr>';
         if ($conf) {
             foreach ($conf as $key => $button) {
                 echo '<tr>';
-                if (!$button['type']) {
-                    echo '<td>'.hsc($button['label']).'</td>'
-                        .'<td>'.hsc($button['code']).'</td>';
+
+                $icon = '';
+                if ($button['icon']) {
+                    $icon = '<img src="' . DOKU_BASE . 'lib/plugins/custombuttons/ico/' . $button['icon'] . '" /> ';
+                }
+                echo '<td>' . $icon . hsc($button['label']) . '</td>';
+
+                if ($button['type'] === 0) {
+                    echo '<td>' . hsc($button['code']) . '</td>';
                 } else {
-                    $icon = '';
-                    if ($button['icon']) {
-                        $icon = '<img src="'. DOKU_BASE.'lib/plugins/custombuttons/ico/'.$button['icon'].'" /> ';
-                    }
-                    echo '<td>'.$icon.hsc($button['label']).'</td>'
-                        .'<td>'.hsc($button['pretag']).hsc($button['code']).hsc($button['posttag']).'</td>';
-                };
-                echo '<td><input type="checkbox" name="delete" value="'.$key.'"/></td>';
+                    echo '<td>'
+                        . hsc($button['pretag'])
+                        . hsc($button['sample'] ?? '')
+                        . hsc($button['posttag'])
+                        . '</td>';
+                }
+                echo '<td><input type="radio" name="select" value="' . $key . '"/></td>';
                 echo '</tr>';
             }
         }
         echo '</table>';
-        echo '<input type="submit" class="button" value="'.$this->getLang('btn_delete').'"/>';
+        echo '<input type="submit" class="button" name="submitdelete" value="' . $this->getLang('btn_delete') . '"/>';
+        echo '<input type="submit" class="button" name="submitedit" value="' . $this->getLang('btn_edit') . '"/>';
         echo '</form>';
         echo '</br></br>';
 
+        $action = 'add';
+        $id = -1; //no entry yet
+        $button = [
+            'label' => '',
+            'icon' => '',
+            'code' => '',
+            'pretag' => '',
+            'posttag' => '',
+            'sample' => ''
+        ];
+        if ($INPUT->has('submitedit') && $INPUT->has('select')) {
+            $action = 'modify';
+            $id = $INPUT->int('select', -1); //if not given, just create new
+            $button = $conf[$id];
+        }
+
         // add custom button form
-        echo '<h3>'.$this->getLang('addbtn').'</h3>';
-        echo '<form id="cb_add_button" action="'.wl($ID).'" method="post">'
-            .'<input type="hidden" name="do" value="admin" />'
-            .'<input type="hidden" name="add" value="1" />'
-            .'<input type="hidden" name="page" value="'.$this->getPluginName().'" />';
+        echo '<h3>' . $this->getLang($action . 'btn') . '</h3>';
+        echo '<form id="cb_add_button" action="' . wl($ID) . '" method="post">'
+            . '<input type="hidden" name="do" value="admin" />'
+            . '<input type="hidden" name="add" value="1" />'
+            . '<input type="hidden" name="id" value="' . $id . '" />'
+            . '<input type="hidden" name="page" value="' . $this->getPluginName() . '" />';
         formSecurityToken();
         echo '<table>';
         echo '<tr>';
-        echo '<th>'.$this->getLang('addbtn_icon').'</th>';
+        echo '<th>' . $this->getLang('addbtn_icon') . '</th>';
         echo '<td>'
-            .'<select name="icon">'
-            .'<option value="">'.$this->getLang('addbtn_textonly').'</option>';
-        $files = glob(dirname(__FILE__).'/ico/*.png');
+            . '<select name="icon">'
+            . '<option value="">' . $this->getLang('addbtn_textonly') . '</option>';
+        $files = glob(dirname(__FILE__) . '/ico/*.png');
         foreach ($files as $file) {
             $file = hsc(basename($file));
-            echo '<option value="'.$file.'">'.$file.'</option>';
-        };
+            $selected = $file === $button['icon'] ? ' selected' : '';
+            echo '<option value="' . $file . '"' . $selected . '>' . $file . '</option>';
+        }
         echo '</select>';
         echo '</td>';
         echo '<td></td>';
         echo '</tr>';
         echo '<tr>'
-            .'<th>'.$this->getLang('addbtn_label').'</th>'
-            .'<td><input type="text" name="label" /></td>'
-            .'<td></td>'
-            .'</tr>';
+            . '<th>' . $this->getLang('addbtn_label') . '</th>'
+            . '<td><input type="text" name="label" value="' . hsc($button['label']) . '"/></td>'
+            . '<td></td>'
+            . '</tr>';
+        echo '<tr>'
+            . '<th>' . $this->getLang('addbtn_pretag') . '</th>'
+            . '<td><input type="text" name="pretag" value="' . hsc($button['pretag']) . '" /></td>'
+            . '<td>*</td>'
+            . '</tr>';
         echo '<tr>'
-            .'<th>'.$this->getLang('addbtn_pretag').'</th>'
-            .'<td><input type="text" name="pretag" /></td>'
-            .'<td>*</td>'
-            .'</tr>';
+            . '<th>' . $this->getLang('addbtn_posttag') . '</th>'
+            . '<td><input type="text" name="posttag" value="' . hsc($button['posttag']) . '" /></td>'
+            . '<td>*</td>'
+            . '</tr>';
         echo '<tr>'
-            .'<th>'.$this->getLang('addbtn_posttag').'</th>'
-            .'<td><input type="text" name="posttag" /></td>'
-            .'<td>*</td>'
-            .'</tr>';
+            . '<th>' . $this->getLang('addbtn_sample') . '</th>'
+            . '<td><input type="text" name="sample" value="' . hsc($button['sample']) . '" /></td>'
+            . '<td>*</td>'
+            . '</tr>';
         echo '<tr>'
-            .'<th>'.$this->getLang('addbtn_code').'</th>'
-            .'<td><input type="text" name="code" /></td>'
-            .'<td></td>'
-            .'</tr>';
+            . '<th>' . $this->getLang('addbtn_code') . '</th>'
+            . '<td><input type="text" name="code" value="' . hsc($button['code']) . '" /></td>'
+            . '<td></td>'
+            . '</tr>';
         echo '</table>';
-        echo '<input type="submit" class="button" value="'.$this->getLang('btn_add').'" />';
+        echo '<input type="submit" class="button" value="' . $this->getLang('btn_' . $action) . '" />';
         echo '</form>';
-        echo '<div id="cb_comment">'.$this->getLang('txt_comment').'</div>';
+        echo '<div id="cb_comment">' . $this->getLang('txt_comment') . '</div>';
         echo '</div>';
     }
 }
diff --git a/genpng.php b/genpng.php
index 6c194a8..d7a78b2 100644
--- a/genpng.php
+++ b/genpng.php
@@ -5,30 +5,32 @@
 header("Cache-Control: no-cache, must-revalidate");
 header("Pragma: no-cache");
 
-/*image generation code*/
-if(isset($_GET['text'])) {
-    $width = strlen($_GET['text']) * 11;
-} else {
-    $width = 66;
-}
-$bg = imagecreatetruecolor($width, 15);
+/* image generation code */
+
+//Text to be written
+$text = $_GET['text'] ?? "No Name";
+
+//font
+$font = './DejaVuSans.ttf'; //path to font you want to use
+$fontsize = 10; //size of font
+
+//calculate width from bounding box for the text
+$tb = imagettfbbox($fontsize, 0, $font, $text);
+$width = $tb[2] - $tb[0];
+
+$bg = imagecreatetruecolor($width, 16);
 
 //This will make it transparent
 imagesavealpha($bg, true);
 $trans_colour = imagecolorallocatealpha($bg, 0, 0, 0, 127);
 imagefill($bg, 0, 0, $trans_colour);
 
-//Text to be written
-$text = isset($_GET['text']) ? $_GET['text'] : "No Name";
-
 // Black Text
-$black = imagecolorallocate($bg, 0,0,0);
-
-$font = './DejaVuSans.ttf'; //path to font you want to use
-$fontsize = 10; //size of font
+$black = imagecolorallocate($bg, 0, 0, 0);
 
-//Writes text to the image using fonts using FreeType 2
-imagettftext($bg, $fontsize, 0, 10, 12, $black, $font, $text);
+//Writes text to the image using fonts using a TrueType font
+//no x margin, because button adds margin as well
+imagettftext($bg, $fontsize, 0, 0, 12, $black, $font, $text);
 
 //Create image
 imagepng($bg);
diff --git a/lang/en/lang.php b/lang/en/lang.php
index 1664f3f..54911c1 100644
--- a/lang/en/lang.php
+++ b/lang/en/lang.php
@@ -9,15 +9,19 @@
 $lang['btnslist']          = 'Buttons List';
 $lang['btnslist_label']    = 'Label';
 $lang['btnslist_code']     = 'Code';
-$lang['btnslist_delete']   = 'Delete?';
+$lang['btnslist_select']   = 'Select';
 $lang['btn_delete']        = 'Delete Selected';
+$lang['btn_edit']          = 'Edit Selected';
 
 $lang['addbtn']            = 'Add Button';
+$lang['modifybtn']         = 'Modify Button';
 $lang['addbtn_icon']       = 'Icon:';
 $lang['addbtn_textonly']   = 'text only';
 $lang['addbtn_label']      = 'Label:';
 $lang['addbtn_pretag']     = 'Pre tag:';
 $lang['addbtn_posttag']    = 'Post tag:';
+$lang['addbtn_sample']     = 'Sample text:';
 $lang['addbtn_code']       = 'Code:';
 $lang['btn_add']           = 'Add';
-$lang['txt_comment']       = '<b>*</b> If you don\'t want to add a shortcut button with pre and post code leave those fields empty.';
+$lang['btn_modify']        = 'Modify';
+$lang['txt_comment']       = '<b>*</b> Use Pre and Post tags to wrap a selected text (or the sample text), otherwise leave those fields empty and use Code for text that should be inserted';
diff --git a/plugin.info.txt b/plugin.info.txt
index 13d132b..cc8c067 100644
--- a/plugin.info.txt
+++ b/plugin.info.txt
@@ -1,7 +1,7 @@
 base   custombuttons
 author Constantinos Xanthopoulos, Gerrit Uitslag
 email  conx@xanthopoulos.info, klapinklapin@gmail.com
-date   2021-02-28
+date   2023-12-24
 name   CustomButtons Plugin
 desc   A plugin for adding custom buttons to the toolbar, to shortcut commonly used code blocks.
 url    https://www.dokuwiki.org/plugin:custombuttons
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8cd90d8
--- /dev/null
+++ b/script.js
@@ -0,0 +1,24 @@
+jQuery(function() {  // on page load
+    let $pretagInput = jQuery('#cb_add_button input[name="pretag"]'),
+        $posttagInput = jQuery('#cb_add_button input[name="posttag"]'),
+        $sampleInput = jQuery('#cb_add_button input[name="sample"]'),
+        $codeInput = jQuery('#cb_add_button input[name="code"]');
+
+    //if pretag or posttag is filled, code text field must be disabled
+    $pretagInput.on('keyup', function() {
+        let hasPrePostTags = jQuery(this).val() !== '' || $posttagInput.val() !== '';
+        $codeInput.prop("disabled", hasPrePostTags);
+    }).keyup();
+    $posttagInput.on('keyup', function() {
+        let hasPrePostTags = jQuery(this).val() !== '' || $pretagInput.val() !== '';
+        $codeInput.prop("disabled", hasPrePostTags);
+    });
+
+    //if code is filled, pretag,posttag and sample text field must be disabled
+    $codeInput.on('keyup', function() {
+        let hasCodeTag = jQuery(this).val() !== '';
+        $pretagInput.prop("disabled", hasCodeTag);
+        $posttagInput.prop("disabled", hasCodeTag);
+        $sampleInput.prop("disabled", hasCodeTag);
+    }).keyup();
+});
diff --git a/style.less b/style.less
index 8e3389b..2b24f82 100644
--- a/style.less
+++ b/style.less
@@ -14,7 +14,7 @@
 		input.button.b {
 			margin: .5em 0 0 .5em;
 		}
-	}	
+	}
 	form#cb_button_list {
 		th, td {
 			padding: .3em;
@@ -35,3 +35,7 @@
 		margin: .5em;
 	}
 }
+
+div.picker button.toolbutton.textbutton img{
+    width: auto;
+}