Browser ctrl/cmd+F style search in TiddlyDesktop

jonnie45 · April 20, 2022, 8:08am

Hi,

I wondered if anyone had any ideas regards using the “ctrl/cmd+F” search functionality provided by the actual browser when using Tiddly Desktop which uses headless chrome?

I use the ContextSearch plugin to enhance the search functionality provided within Tiddlywiki - it provides powerful search in the sense that tiddlers don’t have to be open on the story river to be included in the search - it’s great for some things.

Very often however I many have tens of related tiddlers all open on the story river when I am finding new connections and relationships between tiddlers, sometimes this boils down to wanting to search for keywords quickly and repeatedly up and down the rather long story river screen of open tiddlers.

In these cases it would be ok to only include open tiddlers in the search but what I would like is to be able to use a classic browser provided search using “first” and “prev” buttons to scan through the highlighted search hits whilst the story river would scroll up and down accordingly.

In other words I would like to be able to use classic “ctrl/cmd+F” browser search functionality and indeed I can do precisely this if I open my Tiddlywiki with regular Chrome or Firefox but I hate to leave the wonderful world of TiddlyDesktop which I now find a far superior ride (1)

TiddlyDesktop uses the headless chrome browser - it ignores my ctrl/cmd+F keypresses but regular chrome does not so some doubts it’s simply already there and ready to be tapped in TiddlyDesktop, I have searched the options provided in TiddlyDesktop to see if I can find an option to turn on but so far nothing located.

Thanks for any comments Jon

(1) Actually completely addicted to TiddlyDesktop now - complemented by Tiddloid on my android phone where I maintain a mirror version of my Tiddlywiki.

linonetwo · April 20, 2022, 10:10am

Hi Jonnie, what do you mean by “F5”? Is that equivalent to ctrl/cmd + F? I thought F5 means refresh page in the old days.

And about search, have you tried GitHub - Souk21/TW-commandpalette: A command palette for TiddlyWiki. Demo: https://souk21.github.io/TW-commandpalette/ ?

jonnie45 · April 20, 2022, 10:36am

Thanks for that - yes you are correct for some reason I got things crossed - accurate finger memory just somehow got in crossed in my brain. I have edited my original post to correct it.

I took a look at the TW-commandpalette plugin but I have doubts it supplies the functionality I would like to have which is readily available in regular browsers ( but sadly maybe not in TiddlyDesktop ).

As far as I can see the algorithms would work entirely differently so I am not expecting to find a ready made solution in Tiddlywiki

The classic browser “in-page” searches I am familiar with only have to contend with the loaded page but in return for that simplicity the code knows how to scroll the content to the correct line, how to highlight and show you the next occurrence of the search term.

Tiddlywiki search on the other hand is much more like a database search - it goes through items ( Tiddlers ) not currently displayed so a more global search BUT… since it is not exposed to deep browser internals probably does not ‘know’ how to highlight searched terms on the screen or scroll between them.

I feel the browser search does one thing very well and tiddlywiki search does another very well which is why I would like to move between the two search types according to need. In the situations I have in mind all the tiddlers I want to search are open on the story river and the browser search works great - the problem is it seems to be absent or inaccessible in TiddlyDesktop

CodaCoder · April 20, 2022, 2:12pm

Correct. TiddlyDesktop uses nw.js which is not a browser so much as a wrapper around blink, V8 and node.js. The things you might “expect” from a regular browser, live in the browser “chrome” (i.e. the wrapper shell around the various engine bits) – that includes things like a back-button, address bar, and, as you noticed, Ctrl+F Find on page.

It’s been a while since I tackled nw.js, so feel free to browse the docs: Homepage - NW.js Documentation

linonetwo · April 20, 2022, 2:33pm

Oh, you mean TiddlyDesktop doesn’t have ctrl/cmd+F search? That needs to be implemented.

In TidGi it is a custom React component UI

github.com

tiddly-gittly/TidGi-Desktop/blob/e9be9b57efd93c81367771c15ec366aad20548c7/src/components/FindInPage.tsx

import React, { useState, useCallback, useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';

const Root = styled.div`
  display: flex;
  align-items: center;
  padding: 0 4px;
  z-index: 1;
  height: 41px;
  border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
  width: 100%;
`;
const InfoContainer = styled.div`
  flex: 1;
  padding: 0 12px;
`;

This file has been truncated. show original

And electron side code to handle ctrl+f key

github.com

tiddly-gittly/TidGi-Desktop/blob/e9be9b57efd93c81367771c15ec366aad20548c7/src/services/windows/index.ts#L393-L401

    
      
          accelerator: 'CmdOrCtrl+F',
          click: async () => {
            const mainWindow = this.get(WindowNames.main);
            if (mainWindow !== undefined) {
              mainWindow.webContents.focus();
              mainWindow.webContents.send(WindowChannel.openFindInPage);
              const contentSize = mainWindow.getContentSize();
              const view = mainWindow.getBrowserView();
              view?.setBounds(await getViewBounds(contentSize as [number, number], true));

and actually find in page

github.com

tiddly-gittly/TidGi-Desktop/blob/e9be9b57efd93c81367771c15ec366aad20548c7/src/services/windows/index.ts#L47-L55

    
      
          public async findInPage(text: string, forward?: boolean, windowName: WindowNames = WindowNames.main): Promise<void> {
            const mainWindow = this.get(windowName);
            const contents = mainWindow?.getBrowserView()?.webContents;
            if (contents !== undefined) {
              contents.findInPage(text, {
                forward,
              });
            }
          }

So Jeremy may not have time to implement this, awaiting someone who need and can. Even I, am copying this code from GitHub - webcatalog/neutron: Legacy code of the core that powers WebCatalog, Singlebox, Clovery and Skywhale. , instead of implementing it by myself…

jonnie45 · April 20, 2022, 3:14pm

That seems to be the case, if it does end up being implemented at some stage it would be great, I guess it might not be high priority I guess it’s not easy to determine how many people would benefit from having both types of search available.

TW_Tones · April 21, 2022, 2:48am

@jonnie45 There is however opportunities within tiddlywiki to get the same kind of results and it is platform/browser independent. Do search a little more, I expect you may find something already that is satisfactory.

Some of the mobile themes have a popup search method to make it easy on mobile devices.
Have you tried freelinks which highlights the search terms already with a title and makes them into links for quick creation.

Personally I see value in the long run, of the initial search, that results in a list of titles including a feature to “copy the list” then allowing us to use that list in any one of many ways. The same could be useful for any list including those already in the sidebar, from recent, to open, tags and more.

After all tiddlywiki is very much about lists, I think we could give lists more attention, yet search is ultimately a way to obtain a list.

Mohammad · July 28, 2022, 6:16am

Has a new update! Take a look

saqimtiaz · July 28, 2022, 6:47am

This plugin by @ahanniga might be of interest: https://github.com/ahanniga/tiddlywiki-find-in-page-plugin

jonnie45 · July 28, 2022, 8:32am

Thanks to Saqimtiaz for the heads up and Aidan Hannigan for the plugin.

I tried it on TiddlyDesktop (Headless chrome browser) - it worked well with one caveat.

The ctrl+F side of things did not work for me, I wonder if this is because headless chrome is ignoring ctrl+F and perhaps the plugin relies on that.

Either way when typed in the search term into my regular search box then I saw the new behaviour, it was only at that point that the “Find in page: v ^ (1/1)” (excuse the poor representation of up and down carets) line appeared and the terms were highlighted as described and I could scroll through.

Seems to work well - I don’t think the missing crtl+F shortcut is essential.

Many thanks

ahanniga · July 28, 2022, 9:12am

Thanks Jonnie, the plugin uses whatever the “sidebar-search” shortcut is in $:/config/shortcuts/sidebar-search but raise an issue if it’s not working properly