mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-27 03:57:21 +00:00
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
This commit is contained in:
yaisog
GitHub
parent
4e641f4fc0
commit
2340d48844
@ -6,7 +6,8 @@
|
||||
"tiddlywiki/railroad",
|
||||
"tiddlywiki/evernote",
|
||||
"tiddlywiki/internals",
|
||||
"tiddlywiki/menubar"
|
||||
"tiddlywiki/menubar",
|
||||
"tiddlywiki/dynannotate"
|
||||
],
|
||||
"themes": [
|
||||
"tiddlywiki/vanilla",
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
title: $:/config/Dynannotate/LegacySelectionTracker/Enable
|
||||
|
||||
no
|
||||
@ -0,0 +1,3 @@
|
||||
title: $:/config/Dynannotate/SelectionTracker/Enable
|
||||
|
||||
no
|
||||
@ -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
|
||||
|
||||
@ -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 """
|
||||
<$dynannotate
|
||||
<<show-example """<$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">
|
||||
|
||||
!! Regular expression searching
|
||||
|
||||
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>
|
||||
""">>
|
||||
<$wikify name="wikifiedCode" text=<<search-example-code>> mode="block" output="text">
|
||||
<$codeblock code=<<wikifiedCode>>/>
|
||||
</$wikify>
|
||||
|
||||
<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 """
|
||||
<$dynannotate
|
||||
<<show-example """<$dynannotate
|
||||
filter="[all[shadows+tiddlers]annotate-tiddler[$:/plugins/tiddlywiki/dynannotate/example-text-1]]"
|
||||
>
|
||||
<$transclude tiddler="$:/plugins/tiddlywiki/dynannotate/example-text-1" mode="block"/>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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
|
||||
* Creating annotations on any tiddler by selecting text and then clicking a colour in the resulting dropdown
|
||||
* Highlight text within tiddler bodies -- any text entered in the sidebar search input will be highlighted (in all tiddlers)
|
||||
* 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.
|
||||
|
||||
@ -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) + ")";
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user