fix: Fix issue where searching across formatted text would not work in Super note

package.json

@@ -68,7 +68,7 @@
     "npm-check-updates": "^16.10.17",
     "prettier": "3.0.0",
     "sass-loader": "^13.3.2",
-    "typescript": "5.2.2",
+    "typescript": "5.8.3",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",

packages/filepicker/example/package.json

@@ -27,7 +27,7 @@
     "babel-loader": "^8.2.3",
     "html-webpack-plugin": "^5.5.0",
     "ts-loader": "^9.2.6",
-    "typescript": "^4.0.5",
+    "typescript": "*",
     "typescript-eslint": "0.0.1-alpha.0",
     "webpack": "*",
     "webpack-cli": "*",

packages/web/src/javascripts/Components/NoteView/NoteView.test.ts

@@ -2,6 +2,9 @@
  * @jest-environment jsdom
  */
 
+// @ts-expect-error CSS is not defined in jsdom env
+global.CSS = {}
+
 import { WebApplication } from '@/Application/WebApplication'
 import { NotesController } from '@/Controllers/NotesController/NotesController'
 import {

packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx

@@ -19,6 +19,7 @@ const StyledTooltip = ({
   type = 'label',
   side,
   documentElement,
+  closeOnClick = true,
   ...props
 }: {
   children: ReactNode
@@ -30,6 +31,7 @@ const StyledTooltip = ({
   type?: TooltipStoreProps['type']
   side?: PopoverSide
   documentElement?: HTMLElement
+  closeOnClick?: boolean
 } & Partial<TooltipOptions>) => {
   const [forceOpen, setForceOpen] = useState<boolean | undefined>()
 
@@ -69,7 +71,11 @@ const StyledTooltip = ({
   const clickProps = isMobile
     ? {}
     : {
-        onClick: () => tooltip.hide(),
+        onClick: () => {
+          if (closeOnClick) {
+            tooltip.hide()
+          }
+        },
       }
 
   useEffect(() => {

packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx

@@ -29,7 +29,6 @@ import ToolbarPlugin from './Plugins/ToolbarPlugin/ToolbarPlugin'
 import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 import RemoteImagePlugin from './Plugins/RemoteImagePlugin/RemoteImagePlugin'
 import CodeOptionsPlugin from './Plugins/CodeOptionsPlugin/CodeOptions'
-import { SuperSearchContextProvider } from './Plugins/SearchPlugin/Context'
 import { SearchPlugin } from './Plugins/SearchPlugin/SearchPlugin'
 import AutoLinkPlugin from './Plugins/AutoLinkPlugin/AutoLinkPlugin'
 import DatetimePlugin from './Plugins/DateTimePlugin/DateTimePlugin'
@@ -134,9 +133,7 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
       <RemoveBrokenTablesPlugin />
       <RemoteImagePlugin />
       <CodeOptionsPlugin />
-      <SuperSearchContextProvider>
-        <SearchPlugin />
-      </SuperSearchContextProvider>
+      <SearchPlugin />
       <DatetimePlugin />
       <PasswordPlugin />
       <AutoLinkPlugin />

packages/web/src/javascripts/Components/SuperEditor/Lexical/Theme/base.scss

@@ -40,3 +40,23 @@
     user-select: none;
   }
 }
+
+::highlight(search-results) {
+  background-color: var(--sn-stylekit-info-color);
+  background-color: color-mix(in srgb, var(--sn-stylekit-info-color), transparent 60%);
+  color: var(--text-norm);
+}
+
+// has to be defined separately, otherwise browsers which don't support ::highlight syntax
+// will throw out the whole selector
+.search-highlight {
+  background-color: color-mix(in srgb, var(--sn-stylekit-info-color), transparent 60%);
+}
+.active-search-highlight {
+  background-color: color-mix(in srgb, var(--sn-stylekit-info-color), transparent 30%);
+}
+
+::highlight(active-search-result) {
+  background-color: var(--sn-stylekit-info-color);
+  color: var(--text-norm);
+}