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

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);
+}