Adding tool bar to an edit field

[mervinme...@gmail.com]

Is there a way to call the edit tool bar and apply it to a form created using the EditTextWidget?

Merv

[PMario]

On Thursday, June 16, 2022 at 9:47:30 PM UTC+2 mervinme...@gmail.com wrote:

Is there a way to call the edit tool bar and apply it to a form created using the EditTextWidget?

There is no such possibility at the moment, if your forms are in view mode. .. Could you be more specific, how your forms look like?

-m

[mervinme...@gmail.com]

I call the edit-text macro using the following code:

<$set name="tiddler" value={{$:/state/edit/hold!!hold}}>

<$edit-text tiddler=<<tiddler>> class="full-width"/>

</$set>

<style>
.full-width {width: 100%;}
</style>

Which allows me to edit the content of the indicated field.  I hope this answers your question.

Merv

[Jason Houle]

I have hacked together the following in one of my wikis. I just wanted the toolbar hotkey functionality, so I included the style/class tagging to make the actual toolbar invisible. If you want to keep it visible, don't use the <style> and you can also remove the outer <div>. It seems the <$edit> here might be replaced by your setup.

<style>
.my-editor .tc-text-editor-toolbar-item-wrapper {
display:none;
}
</style>

<div class="my-editor"><$edit  tiddler="Nicer Editor - Target"  field="text"  class="tc-edit-texteditor tc-edit-texteditor-body"  placeholder={{$:/language/EditTemplate/Body/Placeholder}}  tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[text]then[true]] ~[[false]] }}}  cancelPopups="yes"><$set  name="targetTiddler"  value=<<currentTiddler>> ><$list filter="[all[shadows+tiddlers]tag[$:/tags/EditorToolbar]!has[draft.of]]"><$reveal   type="nomatch"  state=<<config-visibility-title>>  text="hide"  class="tc-text-editor-toolbar-item-wrapper"><$transclude tiddler="$:/core/ui/EditTemplate/body/toolbar/button"  mode="inline"/></$reveal></$list></$set></$edit></div>

I'm not totally sure each option is required, though the <$set> for targetTiddler appears to ensure the toolbar adopts properties of the tiddler where this editor appears. This is important for me (perhaps less so for you) since I do a lot of work with type = text/x-markdown and the toolbar/hotkeys are different with this type than for default tiddlytext.

I have not used this extensively yet, so buyer beware!

[mervinme...@gmail.com]

I appreciate the effort here.  This solution is complicated, so I will need to sort through it and try to figure out how it fits into  my use-case.  Thank you.

Merv

[Télumire]

Here's a simpler way to do what suggest @jason :

<div class="custom-editor">{{YourTiddler||$:/core/ui/EditTemplate/body}}</div>
<style>
.custom-editor :is(.tc-editor-toolbar,.tc-tiddler-preview-preview){
visibility:hidden;
height:0;
}
.custom-editor .tc-edit-texteditor.tc-edit-texteditor-body{width:100%;}
.custom-editor .tc-tiddler-preview{overflow:none;}
</style>

However with this technique you can only edit the text field of a tiddler, not the other fields (or at least if there is a way to change the field I'm not aware of it)

[mervinme...@gmail.com]

Here's what I came up with.  I did not see the second solution until later, so I used the first.  I inserted the following code into a template:

<$edit-text tiddler=<<tiddler>> field="text"  class="tc-edit-texteditor tc-edit-texteditor-body"  placeholder={{$:/language/EditTemplate/Body/Placeholder}}  tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[text]then[true]] ~[[false]] }}}  cancelPopups="yes"><$set  name="targetTiddler"  value=<<currentTiddler>> ><$list filter="[all[shadows+tiddlers]tag[$:/tags/EditorToolbar]!has[draft.of]]"><$reveal   type="nomatch"  state=<<config-visibility-title>>  text="hide"  class="tc-text-editor-toolbar-item-wrapper"><$transclude tiddler="$:/core/ui/EditTemplate/body/toolbar/button"  mode="inline"/></$reveal></$list></$set></$edit>

In a second tiddler, or third, or whatever tiddler decide needs to apply this function, I calle the template as follows:

<$set name="tiddler" value={{Name of tiddler to be referenced}}>

{{||Name of Template}}

I plug the title of the tiddler that I wish to edit into the field transcribed in the $set function above.  A point of interest, this could be used to apply the tool bar to fields other than 'text' by modifying the 'field' attribute of the edit-text function contained in the first tiddler mentioned above: '<$edit-text tiddler=<<tiddler>>  field="text"'  

This solution is working for me right now; although I'm sure that it can be improved upon.  Thank you for the help.

Merv