Add additional searchModes to Dynannotate (#7260)

* Add searchModes: literal, some and words

* Add additional search modes

Description of selection tracker config tiddlers was also changed.

* Update simple.tid

* Improve View Template examples

Transcludes a sample tiddler for demonstration instead of the dynannotate view template code.
Adds an example for usage with $genesis to add state tiddler controlled per-tiddler highlights.

* Make search highlights not case sensitive

* Remove created and modified fields

* Add another example text (Searching in Tiddlywiki)

* Add dynannotate for vercel deployment

This should probably not be merged...

* Create LegacySelectionTracker.tid

* Create SelectionTracker.tid

* Revert putting the SelectionTracker config titles in code blocks

* Replace inline styles with CSS class

* Add class for view template examples

Class name is tc-dynannotate-example-frame.

* Remove some <br> line breaks.

* Remove first example transclusion and fix some tab spacing

* Add class to override control panel table layout

* Add class to settings table

* More tab shenanigans

Great Scott!

* Add explanatory comment to example macro

* Change defaults to match widget behavior

* Make previous macro comment more concise

* Change example to transclude CP tiddler

$:/core/ui/ControlPanel/TiddlerFields

* Delete unnecessary example tiddler

editions/tw5.com/tiddlywiki.info

@@ -6,7 +6,8 @@
 		"tiddlywiki/railroad",
 		"tiddlywiki/evernote",
 		"tiddlywiki/internals",
-		"tiddlywiki/menubar"
+		"tiddlywiki/menubar",
+		"tiddlywiki/dynannotate"
 	],
 	"themes": [
 		"tiddlywiki/vanilla",

plugins/tiddlywiki/dynannotate/config/LegacySelectionTracker.tid

@@ -0,0 +1,3 @@
+title: $:/config/Dynannotate/LegacySelectionTracker/Enable
+
+no

plugins/tiddlywiki/dynannotate/config/SelectionTracker.tid

@@ -0,0 +1,3 @@
+title: $:/config/Dynannotate/SelectionTracker/Enable
+
+no

plugins/tiddlywiki/dynannotate/docs/readme.tid

@@ -25,7 +25,7 @@ The `<$dynannotate>` widget uses the selection tracker to support a popup that d
 |popup |Popup state tiddler to be used to trigger a popup when an annotation is clicked |
 |search |Search text to be highlighted within the widget |
 |searchDisplay |"overlay" or "snippet" (see below) |
-|searchMode |"normal" (default), "regexp" or "whitespace" (see below) |
+|searchMode |"literal" (default), "regexp", "whitespace", "words" or "some" (see below) |
 |searchMinLength |Optional minimum length of search string |
 |searchCaseSensitive |"yes" (the default) for a case sensitive search, or "no" for a case insensitive search|
 |searchClass |Optional CSS class to be added to search overlays |
@@ -46,9 +46,10 @@ The values supported by the `searchDisplay` attribute are:
 
 The search modes supported by the `searchMode` attribute are:
 
-* `normal` - a literal string of plain text to match
+* `literal` or `normal` - a literal string of plain text to match (default).
 * `regexp` - a JavaScript-style regular expression (without the quoting backslashes and flags)
-* `whitespace` - a literal string to match while normalising runs of whitespace. This allows `a. b` to match `a.  b`
+* `whitespace` - a literal string to match while normalising runs of whitespace. Thus `A B` matches `A   B`.
+* `words` or `some` - treats the search string as a list of tokens separated by whitespace, and matches all tokens (regardless of ordering and whether there is other text in between)
 
 When the selection popup is triggered, the currently selected text can be found in the tiddler named in the `selection` attribute, with the disambiguating prefix and suffix in the tiddlers named in the `selectionPrefix` and `selectionPopup` tiddlers. Note that the selection text will be an empty string if the selection popup was triggered in response to a click (ie zero width selection).
 
@@ -95,7 +96,7 @@ Note that using the `annotate-tiddler` field to associate an annotation with the
 
 !! Selection Trackers
 
-The following configuration tiddlers can be used to control whether the selection trackers are enabled when the following configuration tiddlers are set to ''yes'' (the default).
+The selection trackers are enabled when the following configuration tiddlers are set to ''yes''.
 
 * $:/config/Dynannotate/SelectionTracker/Enable for the main selection tracker
 * $:/config/Dynannotate/LegacySelectionTracker/Enable for the legacy selection tracker

plugins/tiddlywiki/dynannotate/examples/simple.tid

@@ -10,16 +10,33 @@ caption: Simple
 $example$
 \end
 
+\define search-example-code()
+<!-- 
+The inline filters update the displayed codeblock to reflect the choices the user has made in the UI.
+The rules pragma is used here to evaluate only these filters, but leave everything else untouched.
+The tabs and linebreaks within the parameters to addprefix, though maybe confusing, help with the readability of the codeblock output.
+-->
+\rules only filteredtranscludeinline
+<$dynannotate
+	search="{{{ [{$:/temp/dynannotate-example/search}!is[blank]else[The human mind]] }}}"{{{ [{$:/temp/dynannotate-example/searchMode}!search::some[literal normal]addprefix[
+	searchMode="]addsuffix["]] }}}
+	searchCaseSensitive="{{{ [{$:/temp/dynannotate-example/searchCaseSensitive}!is[blank]else[yes]] }}}"{{{ [{$:/temp/dynannotate-example/searchClass}!is[blank]addprefix[
+	searchClass="]addsuffix["]] }}}
+>
+<$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-1" mode="block"/>
+<$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-2" mode="block"/>
+</$dynannotate>
+\end
+
 <div class="tc-dynannotation-example-info">
 
-!! Simple annotation
+!! Annotations with `target`
 
-We use the `target*` attributes to specify a target string for the annotation and optionally a prefix and suffix for disambiguating multiple occurances.
+We use the `target*` attributes to specify a target string for the annotation and optionally a prefix and suffix for disambiguating multiple occurences.
 
 </div>
 
-<<show-example """
+<<show-example """<$dynannotate
-<$dynannotate
 	target="the"
 	targetPrefix="Yet "
 	targetSuffix=" speed"
@@ -30,55 +47,35 @@ We use the `target*` attributes to specify a target string for the annotation an
 
 <div class="tc-dynannotation-example-info">
 
-!! Plain text searching
+!! Highlights with `search`
 
-We use the `search` attribute to specify a search string for highlighting:
+We use the `search` attribute to specify a search string for highlighting.
+
+The search type can be set with the `searchMode` and `searchCaseSensitive` attributes.
+
+We can style the highlights with the `searchClass` attribute, which has some predefined values.
 
 </div>
 
-<<show-example """
+|tc-table-no-border tc-dynannotate-search-parameters|k
+|search term |<$edit-text tiddler="$:/temp/dynannotate-example/search" field="text" tag="input" default="The human mind" />|
+|search mode |<$select tiddler="$:/temp/dynannotate-example/searchMode" field="text" default="literal"><option value="literal">literal</option><option value="normal">normal</option><option value="regexp">regexp</option><option value="whitespace">whitespace</option><option value="some">some</option><option value="words">words</option></$select> |
+|case sensitive |<$checkbox tiddler="$:/temp/dynannotate-example/searchCaseSensitive" field="text" checked="yes" unchecked="no" default="yes"> <$text text={{{ [{$:/temp/dynannotate-example/searchCaseSensitive}!is[blank]else[yes]] }}} /></$checkbox> |
+|search class |<$select tiddler="$:/temp/dynannotate-example/searchClass" field="text" default=""><option value="">(none)</option><option value="tc-dynannotation-search-overlay-animated">tc-dynannotation-search-overlay-animated</option><option value="tc-dynannotation-search-overlay-blurred">tc-dynannotation-search-overlay-blurred</option></$select> |
+
 <$dynannotate
-	search="the"
+	search={{{ [{$:/temp/dynannotate-example/search}!is[blank]else[The human mind]] }}}
+	searchMode={{{ [{$:/temp/dynannotate-example/searchMode}] }}}
+	searchCaseSensitive={{{ [{$:/temp/dynannotate-example/searchCaseSensitive}!is[blank]else[yes]] }}}
+	searchClass={{{ [{$:/temp/dynannotate-example/searchClass}] }}}
 >
 <$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-1" mode="block"/>
+<$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-2" mode="block"/>
 </$dynannotate>
-""">>
 
-<div class="tc-dynannotation-example-info">
+<$wikify name="wikifiedCode" text=<<search-example-code>> mode="block" output="text">
-
+<$codeblock code=<<wikifiedCode>>/>
-!! Regular expression searching
+</$wikify>
-
-We use the `mode` attribute set to `regexp` to highlight matches of a regular expression:
-
-</div>
-
-<<show-example """
-<$dynannotate
-	search="the|an"
-	searchMode="regexp"
-	searchClass="tc-dynannotation-search-overlay-blurred"
->
-<$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-1" mode="block"/>
-</$dynannotate>
-""">>
-
-<div class="tc-dynannotation-example-info">
-
-!! Normalised whitespace searching
-
-We use the `mode` attribute set to `whitespace` to search for a string with whitespace normalised (ie runs of whitespace are collapsed to a single space for matching purposes):
-
-</div>
-
-<<show-example """
-<$dynannotate
-	search="does  not     work that way.     It operates"
-	searchMode="whitespace"
-	searchClass="tc-dynannotation-search-overlay-animated"
->
-<$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-1" mode="block"/>
-</$dynannotate>
-""">>
 
 <div class="tc-dynannotation-example-info">
 
@@ -90,8 +87,7 @@ Annotation tiddlers can be used to describe annotations. This example references
 
 <<list-links "[all[shadows+tiddlers]annotate-tiddler[$:/plugins/tiddlywiki/dynannotate/example-text-1]]">>
 
-<<show-example """
+<<show-example """<$dynannotate
-<$dynannotate
 	filter="[all[shadows+tiddlers]annotate-tiddler[$:/plugins/tiddlywiki/dynannotate/example-text-1]]"
 >
 <$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-1" mode="block"/>

plugins/tiddlywiki/dynannotate/examples/viewtemplate-text.tid

@@ -34,6 +34,7 @@ title: $:/plugins/tiddlywiki/dynannotate/examples/viewtemplate/text
 	selectionPopup={{{ [<currentTiddler>addprefix[$:/state/dynannotate/popup-selection/]] }}}
 	search={{$:/temp/search}}
 	searchClass="tc-dynannotation-search-overlay-blurred"
+	searchCaseSensitive="no"
 	searchMinLength={{$:/config/Search/MinLength}}
 >
 <$transclude mode="block">

plugins/tiddlywiki/dynannotate/examples/viewtemplate.tid

@@ -1,28 +1,69 @@
-title: $:/plugins/tiddlywiki/dynannotate/examples/viewtemplate
-tags: $:/tags/dynannotateExamples
 caption: View Template
+tags: $:/tags/dynannotateExamples
+title: $:/plugins/tiddlywiki/dynannotate/examples/viewtemplate
+
+\define show-example(example)
+<$codeblock code=<<__example__>>/>
+
+//''Displays as:''//
+
+$example$
+\end
 
 <div class="tc-dynannotation-example-info">
 
 !! Using Dynannotate in the view template
 
-This example shows how to override the core view template with a custom template that includes dynannotate. It is disabled by default but can be enabled by clicking the button below. (Clicking the button below copies the custom view template from $:/plugins/tiddlywiki/dynannotate/examples/viewtemplate/text to $:/core/ui/ViewTemplate/body).
+This example shows how to override the core view template with a custom template that includes dynannotate. It is disabled by default but can be enabled by clicking the corresponding button below. The example transcludes the [[Searching in TiddlyWiki|$:/plugins/tiddlywiki/dynannotate/searching-in-tiddlywiki]] tiddler for illustration purposes, but the chosen view template is applied to all open tiddlers.
 
-Once enabled, this example demonstrates several features:
+Once enabled, this example demonstrates several features of Dynannotate:
 
-* Highlighting of search results within tiddler bodies
+* Highlight text within tiddler bodies -- any text entered in the sidebar search input will be highlighted (in all tiddlers)
-* Creating annotations on any tiddler by selecting text and then clicking a colour in the resulting dropdown
+* Create annotations (on any tiddler) by selecting text and then clicking //Create annotation// in the resulting dropdown
+
+(Clicking the buttons below either puts the custom body view template [[$:/plugins/tiddlywiki/dynannotate/examples/viewtemplate/text]] in front of the default in the [[View Template Body Cascade|https://tiddlywiki.com/#View%20Template%20Body%20Cascade]] or removes it from the cascade).
 
 </div>
 
 <$button>
-<$action-setfield $tiddler="$:/config/ViewTemplateTitleFilters/dynannotate" tags="$:/tags/ViewTemplateTitleFilter" text="[[$:/plugins/tiddlywiki/dynannotate/examples/viewtemplate/text]]" list-before="$:/config/ViewTemplateBodyFilters/default"/>
+<$action-setfield $tiddler="$:/config/ViewTemplateBodyFilters/dynannotate" tags="$:/tags/ViewTemplateBodyFilter" text="[[$:/plugins/tiddlywiki/dynannotate/examples/viewtemplate/text]]" list-before="$:/config/ViewTemplateBodyFilters/default"/>
 Click here to use the custom view template
 </$button>
 
 <$button>
-<$action-deletetiddler $tiddler="$:/config/ViewTemplateTitleFilters/dynannotate"/>
+<$action-deletetiddler $tiddler="$:/config/ViewTemplateBodyFilters/dynannotate"/>
 Click here to revert to the core view template
 </$button>
 
-<$codeblock code={{$:/plugins/tiddlywiki/dynannotate/examples/viewtemplate/text}}/>
+<p/>
+
+<div class="tc-dynannotation-example-info">
+
+!! Using Dynannotate to highlight text on a per-tiddler basis
+
+Using state tiddlers containing the text which is to be highlighted, Dynannotate highlights can be applied on a per-tiddler basis when used in the body view template. This can also be combined with the [[GenesisWidget]] to insert the Dynannotate widget into the DOM only when such a highlight is configured.
+
+This example uses a transcluded tiddler, but Dynannotate could be added to the view template (to show highlights in all parts of a tiddler) or to the body view template (to show highlights only in the tiddler body) in the same way. Note how in this example, Dynannotate only affects the transcluded content.
+
+</div>
+
+<<show-example """<$button set="$:/state/dynannotate/examples/viewtemplate" setTo="tiddler">Highlight "tiddler"</$button>
+<$button set="$:/state/dynannotate/examples/viewtemplate" setTo="created">Highlight "created"</$button>
+<$button set="$:/state/dynannotate/examples/viewtemplate" setTo="">Clear highlights</$button>
+<p/>
+<$let dynannotateText={{$:/state/dynannotate/examples/viewtemplate}}>
+    <$genesis $type={{{ [<dynannotateText>!is[blank]then[$dynannotate]] }}}
+              search=<<dynannotateText>>
+              searchDisplay="overlay"
+              searchClass="tc-dynannotation-search-overlay-animated"
+              searchCaseSensitive="no">
+        <div class="tc-dynannotate-example-frame">
+
+            !! `$:/core/ui/ControlPanel/TiddlerFields`:
+            <$transclude tiddler="$:/core/ui/ControlPanel/TiddlerFields" mode="block" />
+        </div>
+    </$genesis>
+</$let>
+""">>
+
+When used in the view template, the state tiddler title could be derived from the current tiddler, e.g. `<$let dynannotateText={{{ [<currentTiddler>addprefix[$:/state/dynannotate/]get[text]] }}}>`, to configure highlights for each tiddler separately.

plugins/tiddlywiki/dynannotate/modules/textmap.js

@@ -15,7 +15,7 @@ Structure for modelling mapping between a string and its representation in the D
 var PREFIX_SUFFIX_LENGTH = 50;
 
 /*
-Build a map of the text content of a dom node and its descendents:
+Build a map of the text content of a DOM node and its descendants:
 
 string: concatenation of the text content of child nodes
 metadata: array of {start,end,domNode} where start and end identify position in the string
@@ -60,7 +60,7 @@ exports.TextMap.prototype.locateMetadata = function(position) {
 };
 
 /*
-Search for the first occurance of a target string within the textmap of a dom node
+Search for the first occurrence of a target string within the textmap of a DOM node
 
 Returns an object with the following properties:
 	startNode: node containing the start of the text
@@ -92,10 +92,10 @@ exports.TextMap.prototype.findText = function(targetString,targetPrefix,targetSu
 };
 
 /*
-Search for all occurances of a string within the textmap of a dom node
+Search for all occurrences of a string within the textmap of a DOM node
 
 Options include:
-	mode: "normal", "regexp" or "whitespace"
+	mode: "normal", "literal", "regexp", "whitespace", "some" or "words"
 	caseSensitive: true if the search should be case sensitive
 
 Returns an array of objects with the following properties:
@@ -121,6 +121,11 @@ exports.TextMap.prototype.search = function(searchString,options) {
 		regExpString = "(" + searchString.split(/\s+/g).filter(function(word) {
 			return !!word
 		}).map($tw.utils.escapeRegExp).join("\\s+") + ")";
+	} else if(options.mode === "words" || options.mode === "some") {
+		// Match any word separated by whitespace
+		regExpString = "(" + searchString.split(/\s+/g).filter(function(word) {
+			return !!word
+		}).map($tw.utils.escapeRegExp).join("|") + ")";
 	} else {
 		// Normal search
 		regExpString = "(" + $tw.utils.escapeRegExp(searchString) + ")";

plugins/tiddlywiki/dynannotate/styles.tid

@@ -34,6 +34,16 @@ tags: [[$:/tags/Stylesheet]]
 	animation: ta-dynannotation-search-overlay-animated 12s linear infinite;
 }
 
+.tc-dynannotate-example-frame {
+    border: 1px solid black;
+    border-radius: 20px;
+    padding: 1em;
+}
+
+.tc-control-panel table.tc-dynannotate-search-parameters, .tc-control-panel table.tc-dynannotate-search-parameters input {
+    width: initial;
+}
+
 .tc-dynannotate-snippet-highlight {
 	background: #efef53;
 }