SolidJS•14mo ago

How to highlight searched text in solid

I have this code: https://github.com/nikitavoloboev/kuskus

GitHub

GitHub - nikitavoloboev/kuskus: Fast todo app

Fast todo app. Contribute to nikitavoloboev/kuskus development by creating an account on GitHub.

25 Replies

nikivi•14mo ago

if you clone repo and press f key and try do a search it should do a highlight of matched todos as in the image above the thing is that I am not sure how to go about doing this

nikivi•14mo ago

https://github.com/nikitavoloboev/kuskus/blob/main/src/components/LocalSearch.tsx

GitHub

kuskus/LocalSearch.tsx at main · nikitavoloboev/kuskus

Fast todo app. Contribute to nikitavoloboev/kuskus development by creating an account on GitHub.

nikivi•14mo ago

is the search component

nikivi•14mo ago

I checked and the usual way to do this, for example discord does this

nikivi•14mo ago

somehow add spans inside the jsx

nikivi•14mo ago

https://github.com/nikitavoloboev/kuskus/blob/main/src/components/Todo.tsx#L97

GitHub

kuskus/Todo.tsx at main · nikitavoloboev/kuskus

Fast todo app. Contribute to nikitavoloboev/kuskus development by creating an account on GitHub.

nikivi•14mo ago

in here is where in my case the todo gets rendered

nikivi•14mo ago

nikivi•14mo ago

I thought of doing something like this

nikivi•14mo ago

nikivi•14mo ago

but that does not do what I thought it'd do as its a string

nikivi•14mo ago

https://jsfiddle.net/julmot/hdyLpy37/

mark.js example with pure JavaScript - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

nikivi•14mo ago

I found this library too that does what I want but not sure how it would be integrated with solid as that does raw dom access if anyone can help out, I would be forever grateful ❤️

thetarnav•14mo ago

we are using something like this in the solid-primitives site: https://github.com/solidjs-community/solid-primitives/blob/main/site/src/components/Search/Search.tsx#L114

GitHub

solid-primitives/Search.tsx at main · solidjs-community/solid-primi...

A library of high-quality primitives that extend SolidJS reactivity. - solid-primitives/Search.tsx at main · solidjs-community/solid-primitives

nikivi•14mo ago

oh beauty will try now btw on the same site I still get issue with solid-primitives-autofocus no idea whats up with it I do things as per the docs on 2nd time it all the time doesn't focus on the input

thetarnav•14mo ago

yeah I know but to debug it I have to clone your repo so I just haven't got around to it yet 😛

nikivi•14mo ago

if you get a chance, would be grateful ❤️ will try fix search now I made the repo easily cloneable just pnpm i and pnpm dev all state is in signals requestAnimationFrame

thetarnav•14mo ago

hopefully something like codeflow would work

nikivi•14mo ago

is so fancy first time I see this @thetarnav solid-primitives code is quite hard to understand

export function turnHighlightsIntoSpans(str: string, match: string) {
  const regex = new RegExp(`\\b(${match})\\b`, "g")
  const result = str.replace(regex, '<span class="bg-red-200">$1</span>')
  return <>{result}</>
}

export function turnHighlightsIntoSpans(str: string, match: string) {
  const regex = new RegExp(`\\b(${match})\\b`, "g")
  const result = str.replace(regex, '<span class="bg-red-200">$1</span>')
  return <>{result}</>
}

do you know if perhaps this can work somehow I googled string to dom jsx but results are for react there

nikivi•14mo ago

https://stackoverflow.com/questions/73529094/how-do-you-get-an-html-string-from-jsx-without-react-im-using-solidjs-for-exam

Stack Overflow

How do you get an HTML string from JSX without React. I'm using Sol...

I'm not using React, so this won't work ReactDomServer.renderToString(<div>p</div>) I'm currently rendering the jsx in a hidden div with an id on the browser and then using document.

thetarnav•14mo ago

I think you could but not this way

nikivi•14mo ago

import { renderToString } from "solid-js/web" tried this too or wait there has to be some other method that is string to DOM

export function turnHighlightsIntoSpans2(str: string, match: string) {
  const regex = new RegExp(`\\b(${match})\\b`, "g")
  const parts = str.split(regex)
  const result = parts.map((part, index) => {
    if (part.toLowerCase() === match.toLowerCase()) {
      return <span class="bg-red-200">{part}</span>
    } else {
      return part
    }
  })
  return <div>{result}</div>
}

export function turnHighlightsIntoSpans2(str: string, match: string) {
  const regex = new RegExp(`\\b(${match})\\b`, "g")
  const parts = str.split(regex)
  const result = parts.map((part, index) => {
    if (part.toLowerCase() === match.toLowerCase()) {
      return <span class="bg-red-200">{part}</span>
    } else {
      return part
    }
  })
  return <div>{result}</div>
}

ok this works will adapt it to work with multiple matches

thetarnav•14mo ago

yup, something like that is what I would do Maybe this is worth adding to solid-primitives Recreating n spans on each keypress can be avoided

Erik Demaine•14mo ago

This would work with <span innerHTML={turnHighlightsIntoSpans(str, match)}/>. But if you go this route, please escape string in case it already contains HTML. Also you need to escape match in case it has regex notation in it.

thetarnav•14mo ago

here's an initial draft: https://github.com/solidjs-community/solid-primitives/blob/site-highlights/site/src/primitives/highlight.ts#L7

GitHub

solid-primitives/highlight.ts at site-highlights · solidjs-communit...

A library of high-quality primitives that extend SolidJS reactivity. - solid-primitives/highlight.ts at site-highlights · solidjs-community/solid-primitives

Gaming

Programming

How to highlight searched text in solid