[tw5] When one wants a toolbar for an edit text widget

Google Group (Read Only)
#1

Sample code:

(If viewing the code below in Google Groups, ignore the leading and trailing backticks; those are just to keep the code “unprocessed” at Talk TW.)

<style>
.wide100 {width:100%}
.bspace {margin-bottom:-18px;}
</style>

<div style="border:4px double lightgray;">

<$edit-text class="wide100 bspace" tiddler="AppSettings" field="myconfig" tag="textarea">

<details><summary>Multi-line Edit Toolbar</summary>
This space does not have to be just for buttons. It can be for all sorts of things. Like helpful tips, reminders, whatever.
</details>

</$edit-text>

</div>
#2

Added an “insert text” button:

<style>
.wide100 {width:100%}
.bspace {margin-bottom:-18px;}
.btn {font-weight:bold;font-size:0.85em;}
</style>

<div style="border:4px double lightgray;">
<$edit-text class="wide100 bspace" tiddler="AppSettings" field="myconfig" tag="textarea">
<details><summary>Multi-line Edit Toolbar</summary>

This space does not have to be just for buttons. It can be for all sorts of things. Like helpful tips, reminders, whatever.<br>

<$button class="btn">
<$action-sendmessage
$message="tm-edit-text-operation"
$param="insert-text"
text="""/"BR"/"""
/>
/"BR"/
</$button>
</details>
</$edit-text>
</div>
#3

Added a “wrap selection” button:

<style>
.wide100 {width:100%}
.bspace {margin-bottom:-18px;}
.btn {font-weight:bold;font-size:0.85em;}
</style>

<div style="border:4px double lightgray;">
<$edit-text class="wide100 bspace" tiddler="AppSettings" field="myconfig" tag="textarea">
<details><summary>Multi-line Edit Toolbar</summary>

This space does not have to be just for buttons. It can be for all sorts of things. Like helpful tips, reminders, whatever.<br>

<$button class="btn">
<$action-sendmessage
$message="tm-edit-text-operation"
$param="wrap-selection"
prefix='<"'
suffix='">'
/>
<$text text='<"...">'/>
</$button>
<$button class="btn">
<$action-sendmessage
$message="tm-edit-text-operation"
$param="insert-text"
text='/"BR"/'
/>
/"BR"/
</$button>
</details>
</$edit-text>
</div>