Hide text editor area (or other parts) in tiddler editor

In my Wiki I use several edit-templates for entering various data.
This works really well, but these edit-templates are simply added to the default editor parts, depending on their order within the edit templates list - in other words, I’d like to replace or hide the default text area editor with an editor-template. Unfortunately I didn’t found an easy way to do so.

But there is a mechanism which I wasn’t aware of (yes, I still do know far to little of TiddlyWiki internals) which makes it a breeze to hide the text editor.
I don’t know how it is called exactly (some sort of cascade?), but adding a tiddler with a simple filter and tagging it with “EditTemplateBodyFilter” does the trick.

Here’s my example:
title: $:/config/EditTemplateBodyFilters/hide-the-editor
tag: $:/tags/EditTemplateBodyFilter
text: [get[hide-the-editor]lowercase[]match[yes]then[$:/customization/hide-the-editor]]
It’s important to move the new tiddler before the $:/config/EditTemplateBodyFilters/default in order to hide the default editor.
Whenever a tiddler has a field “hide-the-editor=yes”, the default editor area is being hidden.

Now I am wondering if there are more cascades to hide other parts of the default editor, too?
I’m interested in hiding the content-type field, or make it read-only at least, to prevent other users accidentally fiddling around with the tiddlers - they should only use the edit-templates for editing.
I suspect that this can’t be achieved in an easy way as for the text editor.

This will explain in more detail, and list all the ones used by the core:

https://tiddlywiki.com/#Cascades

It includes this:

Story Tiddler Template Cascade The template used to display a particular tiddler in the story river. By default, the edit template is chosen for draft tiddlers, and the view template for others
Tiddler Icon Cascade The optional icon associated with a particular tiddler (displayed alongside the title)
Tiddler Colour Cascade The optional colour associated with a particular tiddler (used to colour the tiddler icon and if the tiddler is used as a tag also provides the colour for the tag pill)
View Template Title Cascade The template used to display the title of a particular tiddler (used by the default view template to display the tiddler title)
View Template Body Cascade The template used to display the view mode body of a particular tiddler (used by the default view template to display the tiddler body)
Edit Template Body Cascade The template used to display the edit mode body of a particular tiddler (used by the default edit template to display the tiddler body editor)
Field Editor Cascade The template used to display the edit mode of a tiddler field (used by the default edit template to display the field editor)

The current cascade system lets you replace $:/core/ui/EditTemplate/body and $:/core/ui/ViewTemplate/body (including with nothing), but in both cases the other segments of the Edit/ViewTemplate are still displayed as usual. To see the full list of segments in use, you can look up the tag $:/tags/EditTemplate or $:/tags/ViewTemplate. TW-com also provides useful overviews for all the system tags, e.g. SystemTag: $:/tags/EditTemplate.

Looking at the $:/tags/EditTemplate, we can see that the type segment $:/core/ui/EditTemplate/type is among the default EditTemplate segments. So to hide the type selector on a subset of tiddlers, we can wrap the contents (not the procedures/pragmas) of that tiddler with a conditional statement:

\procedure lingo-base() $:/language/EditTemplate/
\procedure input-cancel-actions() <$list filter="[<storeTitle>get[text]] [<currentTiddler>get[type]] :and[limit[1]]" emptyMessage="""<<cancel-delete-tiddler-actions "cancel">>"""><$action-sendmessage $message="tm-remove-field" $param="type"/><$action-deletetiddler $filter="[<typeInputTiddler>] [<refreshTitle>] [<typeSelectionTiddler>]"/></$list>
\whitespace trim

<% if [<currentTiddler>!hide-type[yes]] %> <!-- added this line -->
<$set name="refreshTitle" value=<<qualify "$:/temp/type-search/refresh">>>
<div class="tc-edit-type-selector-wrapper">
<em class="tc-edit tc-small-gap-right"><<lingo Type/Prompt>></em>
<div class="tc-type-selector-dropdown-wrapper">
<div class="tc-type-selector"><$fieldmangler>
<$transclude $variable="keyboard-driven-input" tiddler=<<currentTiddler>> storeTitle=<<typeInputTiddler>> refreshTitle=<<refreshTitle>> selectionStateTitle=<<typeSelectionTiddler>> field="type" tag="input" default="" placeholder={{$:/language/EditTemplate/Type/Placeholder}} focusPopup=<<qualify "$:/state/popup/type-dropdown">> class="tc-edit-typeeditor tc-edit-texteditor tc-popup-handle" tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[type]then[true]] :else[[false]] }}} cancelPopups="yes" configTiddlerFilter="[[$:/core/ui/EditTemplate/type]]" inputCancelActions=<<input-cancel-actions>>/><$button popup=<<qualify "$:/state/popup/type-dropdown">> class="tc-btn-invisible tc-btn-dropdown tc-small-gap" tooltip={{$:/language/EditTemplate/Type/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Type/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button><$button message="tm-remove-field" param="type" class="tc-btn-invisible tc-btn-icon" tooltip={{$:/language/EditTemplate/Type/Delete/Hint}} aria-label={{$:/language/EditTemplate/Type/Delete/Caption}}>{{$:/core/images/delete-button}}<$action-deletetiddler $filter="[<typeInputTiddler>] [<storeTitle>] [<refreshTitle>] [<selectionStateTitle>]"/></$button>
</$fieldmangler></div>

<div class="tc-block-dropdown-wrapper">
<$set name="tv-show-missing-links" value="yes">
<$reveal state=<<qualify "$:/state/popup/type-dropdown">> type="nomatch" text="" default="">
<div class="tc-block-dropdown tc-edit-type-dropdown">
<$linkcatcher to="!!type">
<$list filter='[all[shadows+tiddlers]prefix[$:/language/Docs/Types/]each[group]sort[group-sort]]'>
<div class="tc-dropdown-item">
<$text text={{!!group}}/>
</div>
<$set name="userInput" value={{{ [<typeInputTiddler>get[text]] }}}>
<$list filter="[all[shadows+tiddlers]prefix[$:/language/Docs/Types/]group{!!group}] :and[sort[description]] :and[removeprefix[$:/language/Docs/Types/]] :and[search<userInput>]"><span class={{{ [<currentTiddler>addsuffix[-primaryList]] :except[<typeSelectionTiddler>get[text]] :and[then[]else[tc-list-item-selected]] }}}><$link to={{{ [<currentTiddler>addprefix[$:/language/Docs/Types/]get[name]] }}}><$view tiddler={{{ [<currentTiddler>addprefix[$:/language/Docs/Types/]] }}} field="description"/><$text text=" "/>(<$view tiddler={{{ [<currentTiddler>addprefix[$:/language/Docs/Types/]] }}} field="name"/>)</$link></span>
</$list>
</$set>
</$list>
</$linkcatcher>
</div>
</$reveal>
</$set>
</div>
</div>
</div>
</$set>
<% endif %> <!-- added this line -->

You may have noticed in the code above that, by default, the type-selector segment wraps all its contents in a <div> with the CSS class “tc-edit-type-selector-wrapper”. This means that if you don’t want to modify the $:/core/ui/EditTemplate/type tiddler directly, we can also use a CSS trick to selectively hide this segment.

To do so, add the following CSS to a tiddler with the tag $:/tags/Stylesheet:

.tc-tagged-hide-type .tc-edit-type-selector-wrapper { display: none; }

Then add the tag hide-type to any tiddler whose type segment you want to hide.

This trick works because, for each tag on a tiddler, TW automatically adds a CSS class with the prefix tc-tagged- to the list of classes applied to that tiddler — thus hide-typetc-tagged-hide-type. If the tag contains one or more spaces, the CSS class replaces each space with %20 (so tag has spaces would give you tc-tagged-has%20spaces).

This means you can write a corresponding CSS rule for any tag name you want to use. However, it also means that you need to use tags rather than field values to hide segments using this strategy, because other field values aren’t automatically reflected in the HTML generated for the tiddler.

2 Likes

Not about cascades since this trick predates, but I created a simple way to toggle edit template items. See here Documenting TW — a non-linear personal web notebook

May I suggest using the Edit Template Body cascade, do this by cloning $:/core/ui/EditTemplate/body/default lets say to $:/custom/ui/EditTemplate/body/default (for readability lets also add to this new tiddler the field code-body=yes so we can read it using the view template.

  • I have done this myself with a view to doing something similar.
  • You will find that in fact most of that you may change exists within $:/core/ui/EditTemplate/body/editor so cloning this and updating $:/custom/ui/EditTemplate/body/default (created below) to use it makes sense as well.

Since we now need an entry in the cascade filters lets clone $:/config/EditTemplateBodyFilters/default to $:/config/EditTemplateBodyFilters/custom

  • and give it the field list-before=$:/config/EditTemplateBodyFilters/default (this will place our custom entry above the standard in the cascade).
  • and modify the text field (of $:/config/EditTemplateBodyFilters/custom) to read [[$:/custom/ui/EditTemplate/body/default]]

As it stands the cascade will now always use our new as yet unchanged $:/custom/ui/EditTemplate/body/default.

But before we do add any of the desired customisations lets create a “get out of jail free” card.

  • The custom Edit template body will only be used if our custom $:/config/EditTemplateBodyFilters/custom tiddler has the tag $:/tags/EditTemplateBodyFilter
  • lets create two buttons, one to deactivate, one to reactivate and reset list-before (not sure if this is necessary).

Place these in a tiddler such as $:/custom/EditTemplateBody/more with the tag $:/tags/MoreSideBar, and caption=custom

<$fieldmangler tiddler="$:/config/EditTemplateBodyFilters/custom">
<%if [[$:/config/EditTemplateBodyFilters/custom]tag[$:/tags/EditTemplateBodyFilter]] %>
<!-- if tagged -->
<$button>
Hide Custom Edit Template body
<$action-sendmessage $message="tm-remove-tag" $param="$:/tags/EditTemplateBodyFilter"/>
</$button>
<%else%>
<!-- if NOT tagged -->
<$button>
Use Custom Edit Template body
<$action-sendmessage $message="tm-add-tag" $param="$:/tags/EditTemplateBodyFilter"/>
<$action-setfield $tiddler="$:/config/EditTemplateBodyFilters/custom" list-before="$:/config/EditTemplateBodyFilters/default"/>
</$button>
<%endif%>
$:/custom/ui/EditTemplate/body/default
</$fieldmangler>
  • Note the fieldmangler is needed for tm-add-tag and tm-remove-tag
  • If you break something when editing $:/custom/ui/EditTemplate/body/default you can always use SideBar > More > Custom to stop it.

Now you can make modifications to $:/custom/ui/EditTemplate/body/default rather than $:/core/ui/EditTemplate/body/default

1 Like

Many thanks, Scott, for the summary -

  • that will be my in-depth reading for a sleepless night :wink:

Thank you, Emily, for your extensive reply.
It’s also very easy to understand and gives me a good overview of the cascade system.

It’s astounding what can be done with some simple CSS commands.
I wasn’t aware of that, but blame it on my average CSS knowledge.
This is what I needed!

1 Like

Thank you Dave, I used your site for knowledge several times.
It gives me some good ideas and solutions, I like it very much.

Wonderful trick I didn’t thought about - and I’m pretty sure that I’m often using the hard way to solve TiddlyWiki tasks and don’t see that there would be a much easier way, too. Now I understand what pmario was trying to tell me in his last post.

This is also a really useful note and I’m sure it will come in handy when I use it in my wiki.
Thank you!