Modifying Nlite editor

[arunnbabu81]

Notation editor

@saqimtiaz It was one year before that you had given me some suggestions regarding the Notation editor. Although I had checked Floats and Nlite editor at that time, I didn’t had the sufficient knowledge in TW to modify it for my purpose at that time. After that I had tried to create different versions of modal based tiddler search and editors by studying others peoples implementations with relatively good results. Today I tried to modify some parts of the Nlite editor to my liking and got this.

I am quite satisfied with it, except that the text field is not seen in the preview on the right side. Instead only the tiddler title is displayed in the Preview. Can you suggest where I am going wrong? This is the demo wiki link - My TiddlyWiki — a non-linear personal web notebook

Also is there any way to highlight the searched word in the editor and in the search results?

[saqimtiaz]

Pressed for time and cannot take a detailed look at the code but trying replace the following for the preview: {{!!text}}
with:
<$transclude tiddler={{!!text}} mode="block"/>

[arunnbabu81]

@saqimtiaz

Pressed for time and cannot take a detailed look at the code but trying replace the following for the preview: {{!!text}}
with:
<$transclude tiddler={{!!text}} mode="block"/>

Thank you @saqimtiaz .
This seem to be working when I checked in my mobile and I have updated the demo. Will do more testing once I am back on my desktop.

@arunnbabu81

Also is there any way to highlight the searched word in the editor and in the search results?

Can you give some suggestions regarding this when you have free time. It is not an urgent matter.

[arunnbabu81]

I added some more modifications to the editor to add different view modes using radio buttons (inspired by a previous implementation by Charlie Veniot) - See this tiddler - My TiddlyWiki — a non-linear personal web notebook This is just for experimental purposes. I want to try out which view modes I can use reliably on both desktop and mobile.

I have a few doubts -

1. Why the radio buttons are placed vertically instead of horizontally. When I pasted the code for radio buttons alone in a tiddler, they are arranged horizontally, but in this editor it’s seen vertically aligned. Dont know why. I tried to add some classes to the radio buttons - but its not working
2. I tried to add the context search into this editor - but I couldn’t make it work properly. I guess this is the not the way to do it or context won’t work like that in this editor.
3. Is it possible to navigate the search results using up and down arrows. I checked this out - but what ever I tried didn’t work. May be because I changed the dropdown pattern of the search results
4. When the Editor radio button is selected, the edit text widget displayed with cursor placed at the bottom of the text. Is there any way to keep the cursor at the beginning of the text.

[Eskha]

Hello @arunnbabu81,

@arunnbabu81

Also is there any way to highlight the searched word in the editor and in the search results?

Here is some idea to do the highlighting part using the html <mark>....</mark>.
However it only works with the first word in the search.

The code below supposes that the user search term is in asearchTerm variable and that the list of results is in a resultsList variable.

\define lm() <mark>
\define rm() </mark>

<$set name="wordsearch" filter="[<searchTerm>split[ ]first[]]" select="0">
<$set name="highlight" filter="[<wordsearch>addprefix<lm>addsuffix<rm>]" select="0">

<$list filter="[enlist<resultsList>]"/>
<$link>
<$set name="highlighted"  value={{{[all[current]search-replace:i<wordsearch>,<highlight>]}}} select="0">
<$let tv-wikilinks="no">
<<highlighted>>
</$let>
</$set>
</$link>
</$list>

</$set>
</$set>

You can see it working here.
You can try typing get in the top menu bar search box.

Open Tiddlers from the link are the plugin that implements the functionnality, with a focus on the macro and template tiddler.

BR

Eskha

[arunnbabu81]

Thank you @Eskha I will take a look at it today after reaching home

[arunnbabu81]

I tried modify the code like given below, but it doesn’t seem to work.

\define cancel-search-actions() <$action-deletetiddler $filter="[<__storeTitle__>] [<__tiddler__>] [<__selectionStateTitle__>] $:/state/sq/Nlite/active"/>

\define input-accept-actions() 
<$action-setfield $tiddler="$:/state/sq/Nlite/active" text={{{ [<__tiddler__>get[text]] }}}/>
<$action-sendmessage $message="tm-focus-selector" param=".sq-nlite-editor"/>

\define lm() <mark>
\define rm() </mark>

\end

\whitespace trim
<div class="sq-nlite">
<$vars searchTiddler="$:/temp/sq/Nlite/search/input" searchListState=<<qualify "$:/state/sq/Nlite/search">> titleSearchFilter="[!is[system]search:title<userInput>sort[title]limit[250]]" allSearchFilter="[!is[system]search<userInput>sort[title]limit[250]]">
<span style="margin: 0;">
<$macrocall $name="keyboard-driven-input" tiddler="$:/temp/sq/Nlite/search" storeTitle=<<searchTiddler>> selectionStateTitle=<<searchListState>> 
		refreshTitle="$:/temp/sq/Nlite/search/refresh" tag="input" type="search" focusPopup="$:/state/sq/Nlite/popup/search-dropdown" 
		class="tc-popup-handle tc-menu-show-when-wide" placeholder="Search..." default="" cancelPopups="yes" 
		primaryListFilter=<<titleSearchFilter>> secondaryListFilter=<<allSearchFilter>> inputAcceptActions=<<input-accept-actions>> 
		inputCancelActions=<<cancel-search-actions>> filterMinLength="1"/>
<$button set="$:/temp/sq/Nlite/search" setTo="">clear</$button>
</span>
<$reveal tag="div" class="tc-block-dropdown-wrapper sq-nlite-dropdown" state="$:/state/sq/Nlite/popup/search-dropdown" type="nomatch" text="" default="">

<div>
<$linkcatcher to="$:/state/sq/Nlite/active" actions=""" <$action-setfield $tiddler="$:/temp/sq/Nlite/search" text=<<navigateTo>>/>
<$action-setfield $tiddler=<<searchListState>> text={{{[<navigateTo>addsuffix[-primaryList]]}}}/>
""">
<$list filter="[<searchTiddler>get[text]minlength[1]]" emptyMessage="""<div class="tc-search-results">Type your search terms</div>""" variable=<<searchTiddler>> >

<$list filter="[<searchTiddler>get[text]minlength[1]limit[1]]" emptyMessage="""<div class="tc-search-results">{{$:/language/Search/Search/TooShort}}</div>""" variable=<<resultsList>> >

<$set name="wordsearch" filter="[<searchTerm>split[ ]first[]]" select="0">
<$set name="highlight" filter="[<wordsearch>addprefix<lm>addsuffix<rm>]" select="0">

<$list filter="[enlist<resultsList>]"/>
<$link>
<$set name="highlighted"  value={{{[all[current]search-replace:i<wordsearch>,<highlight>]}}} select="0">
<$let tv-wikilinks="no">
<<highlighted>>
</$let>
</$set>
</$link>
</$set>
</$set>

<table style="width:100%;">
<tr>
{{$:/plugins/sq/Nlite/search}}
</tr>
</table>
</$list>

</$list>
</$linkcatcher>
</div>

</$reveal>

</$vars>

<$list filter="[[$:/state/sq/Nlite/active]get[text]minlength[1]]" variable="_NULL">
<table style="width:100%;">
<tr>
<th><$radio class="radiobutton" tiddler="$:/temp/Charlie/BASIC_Matrix/editing_sidepanel" field="text" value="Editor" default="Editor">Editor</$radio><$radio class="radiobutton" tiddler="$:/temp/Charlie/BASIC_Matrix/editing_sidepanel" field="text" value="Preview" default="Editor">Preview</$radio> <$radio cclass="radiobutton" tiddler="$:/temp/Charlie/BASIC_Matrix/editing_sidepanel" field="text" value="Editor with preview" default="Editor">Editor with preview</$radio><$radio class="radiobutton" tiddler="$:/temp/Charlie/BASIC_Matrix/editing_sidepanel" field="text" value="Context" default="Editor">Context</$radio></th> 
</tr>

<tr>
<td style="height:90vh;vertical-align:top;max-height: unset;overflow: auto;">

<$list filter="[[$:/temp/Charlie/BASIC_Matrix/editing_sidepanel]get[text]else[Editor]match[Editor]then[$:/state/sq/Nlite/active]]">
<$edit-text class="sq-nlite-editor" tiddler={{$:/state/sq/Nlite/active}} placeholder="" focus="yes" select="false" cancelPopups="yes"/>
</$list>

<$list filter="[[$:/temp/Charlie/BASIC_Matrix/editing_sidepanel]get[text]else[Preview]match[Preview]then[$:/state/sq/Nlite/active]]">
{{Editorless preview}}
</$list>

<$list filter="[[$:/temp/Charlie/BASIC_Matrix/editing_sidepanel]get[text]else[Editor with preview]match[Editor with preview]then[$:/state/sq/Nlite/active]]">
<td style="width:50%;height:90vh;vertical-align:top;max-height: unset;overflow: auto;">
<$edit-text class="sq-nlite-editor" tiddler={{$:/state/sq/Nlite/active}} placeholder="" focus="yes" select="false" cancelPopups="yes"/>
</td>
<td style="vertical-align:top;">
<$transclude tiddler={{!!text}} mode="block"/>
</td>
</$list>

<$list filter="[[$:/temp/Charlie/BASIC_Matrix/editing_sidepanel]get[text]else[Context]match[Context]then[$:/state/sq/Nlite/active]]">
  <$context term={{$:/temp/sq/Nlite/search}} tiddler="$:/state/sq/Nlite/active" />
</$list>

</td>
</tr>
</table>

</$list>
</div>

<style>
.radiobutton{}
</style>

Here is the tiddler - My TiddlyWiki — a non-linear personal web notebook