web: fix command palette highlighting being escaped

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

apps/web/src/dialogs/command-palette/command-palette-dialog.tsx

@@ -249,7 +249,7 @@ export const CommandPaletteDialog = DialogManager.register(
                 >
                   <Text
                     variant="subBody"
-                    dangerouslySetInnerHTML={{ __html: escapeUTF8(label) }}
+                    dangerouslySetInnerHTML={{ __html: label }}
                   />
                 </Box>
               );
@@ -306,7 +306,7 @@ export const CommandPaletteDialog = DialogManager.register(
                         overflow: "hidden"
                       }}
                       dangerouslySetInnerHTML={{
-                        __html: escapeUTF8(command.title)
+                        __html: command.title
                       }}
                     />
                   </Flex>
@@ -401,21 +401,25 @@ function useDatabaseFuzzySearch() {
 
   const updateCollections = useCallback(async (force = false) => {
     if (force || !notes.current)
-      notes.current = await db.notes.all
-        .fields(["notes.id", "notes.title"])
-        .items();
+      notes.current = (
+        await db.notes.all.fields(["notes.id", "notes.title"]).items()
+      ).map((n) => ({ ...n, title: escapeUTF8(n.title) }));
     if (force || !notebooks.current)
-      notebooks.current = await db.notebooks.all
-        .fields(["notebooks.id", "notebooks.title"])
-        .items();
+      notebooks.current = (
+        await db.notebooks.all
+          .fields(["notebooks.id", "notebooks.title"])
+          .items()
+      ).map((n) => ({ ...n, title: escapeUTF8(n.title) }));
     if (force || !tags.current)
-      tags.current = await db.tags.all
-        .fields(["tags.id", "tags.title"])
-        .items();
+      tags.current = (
+        await db.tags.all.fields(["tags.id", "tags.title"]).items()
+      ).map((t) => ({ ...t, title: escapeUTF8(t.title) }));
     if (force || !reminders.current)
-      reminders.current = await db.reminders.all
-        .fields(["reminders.id", "reminders.title"])
-        .items();
+      reminders.current = (
+        await db.reminders.all
+          .fields(["reminders.id", "reminders.title"])
+          .items()
+      ).map((r) => ({ ...r, title: escapeUTF8(r.title) }));
   }, []);
 
   useEffect(() => {
@@ -447,12 +451,13 @@ function useDatabaseFuzzySearch() {
         tag: tags.current,
         reminder: reminders.current
       };
+      const escapedQuery = escapeUTF8(query);
       for (const _type in collections) {
         const type = _type as keyof typeof collections;
         const items = collections[type];
         if (!items) continue;
         for (const item of fuzzy(
-          query,
+          escapedQuery,
           items,
           (item) => item.id,
           {
@@ -497,7 +502,7 @@ async function getSessionsAsCommands() {
 
     commands.push({
       id: session.note.id,
-      title: session.note.title,
+      title: escapeUTF8(session.note.title),
       group: strings.dataTypesPluralCamelCase.note(),
       type: "note" as const,
       action: commandActions.note,

apps/web/src/dialogs/command-palette/commands.ts

@@ -18,6 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { strings } from "@notesnook/intl";
+import { escapeUTF8 } from "entities";
 import { db } from "../../common/db";
 import {
   ArrowLeft,
@@ -322,7 +323,7 @@ export function removeRecentCommand(id: string) {
 async function getActiveNoteCommands(): Promise<Command[]> {
   const note = useEditorStore.getState().getActiveNote();
   if (!note) return [];
-  const group = strings.actionsForNote(note.title);
+  const group = strings.actionsForNote(escapeUTF8(note.title));
 
   const commands: Command[] = [];
 
@@ -352,7 +353,7 @@ async function getActiveNotebookCommands() {
   if (context?.type !== "notebook") return [];
   const notebook = await db.notebooks.notebook(context.id);
   if (!notebook) return [];
-  const group = strings.actionsForNotebook(notebook.title);
+  const group = strings.actionsForNotebook(escapeUTF8(notebook.title));
 
   const commands: Command[] = [];
 
@@ -372,7 +373,7 @@ async function getActiveTagCommands() {
   if (context?.type !== "tag") return [];
   const tag = await db.tags.tag(context.id);
   if (!tag) return [];
-  const group = strings.actionsForTag(tag.title);
+  const group = strings.actionsForTag(escapeUTF8(tag.title));
   const commands: Command[] = [];
 
   const menuItems = await tagMenuItems(tag, [tag.id]);
@@ -537,26 +538,26 @@ async function getCommandTitle({ id, type }: RecentCommand) {
         0
       );
       if (!note) return;
-      return note.title;
+      return escapeUTF8(note.title);
     }
     case "notebook": {
       const notebook = (
         await db.notebooks.all.fields(["notebooks.title"]).items([id])
       ).at(0);
       if (!notebook) return;
-      return notebook.title;
+      return escapeUTF8(notebook.title);
     }
     case "tag": {
       const tag = (await db.tags.all.fields(["tags.title"]).items([id])).at(0);
       if (!tag) return;
-      return tag.title;
+      return escapeUTF8(tag.title);
     }
     case "reminder": {
       const reminder = (
         await db.reminders.all.fields(["reminders.title"]).items([id])
       ).at(0);
       if (!reminder) return;
-      return reminder.title;
+      return escapeUTF8(reminder.title);
     }
   }
 }