Fix: Escape markup text for notifications. (#976)

src/components/notifications/Body/index.tsx

@@ -1,6 +1,6 @@
 import AstalNotifd from 'gi://AstalNotifd?version=0.1';
 import { Gtk } from 'astal/gtk3';
-import { notifHasImg } from '../helpers';
+import { notifHasImg, escapeMarkup } from '../helpers';
 
 export const Body = ({ notification }: BodyProps): JSX.Element => {
     return (
@@ -8,7 +8,7 @@ export const Body = ({ notification }: BodyProps): JSX.Element => {
             <label
                 className={'notification-card-body-label'}
                 halign={Gtk.Align.START}
-                label={notification.body}
+                label={escapeMarkup(notification.body)}
                 maxWidthChars={!notifHasImg(notification) ? 35 : 28}
                 lines={2}
                 truncate
@@ -16,7 +16,7 @@ export const Body = ({ notification }: BodyProps): JSX.Element => {
                 justify={Gtk.Justification.LEFT}
                 hexpand
                 useMarkup
-                onRealize={(self) => self.set_markup(notification.body)}
+                onRealize={(self) => self.set_markup(escapeMarkup(notification.body))}
             />
         </box>
     );

src/components/notifications/Header/index.tsx

@@ -2,7 +2,7 @@ import AstalNotifd from 'gi://AstalNotifd?version=0.1';
 import options from 'src/configuration';
 import { GLib } from 'astal';
 import { Gtk } from 'astal/gtk3';
-import { notifHasImg } from '../helpers';
+import { notifHasImg, escapeMarkup } from '../helpers';
 import { getNotificationIcon } from 'src/lib/shared/notifications';
 
 const { military } = options.menus.clock.time;
@@ -38,8 +38,8 @@ const SummaryLabel = ({ notification }: HeaderProps): JSX.Element => {
             <label
                 className={'notification-card-header-label'}
                 halign={Gtk.Align.START}
-                onRealize={(self) => self.set_markup(notification.summary)}
-                label={notification.summary}
+                onRealize={(self) => self.set_markup(escapeMarkup(notification.summary))}
+                label={escapeMarkup(notification.summary)}
                 maxWidthChars={!notifHasImg(notification) ? 30 : 19}
                 hexpand
                 vexpand

src/components/notifications/helpers.ts

@@ -3,6 +3,7 @@ import AstalNotifd from 'gi://AstalNotifd?version=0.1';
 import options from 'src/configuration';
 import { isNotificationIgnored } from 'src/lib/shared/notifications';
 import AstalHyprland from 'gi://AstalHyprland?version=0.1';
+import GLib from 'gi://GLib';
 
 const notifdService = AstalNotifd.get_default();
 const hyprlandService = AstalHyprland.get_default();
@@ -100,3 +101,13 @@ export const trackAutoTimeout = (): void => {
         notifdService.set_ignore_timeout(!shouldAutoDismiss);
     });
 };
+
+/**
+ * Escapes text for safe use in Pango markup
+ * Converts special XML characters to their entity representations
+ *
+ * @param text - The text to escape
+ */
+export const escapeMarkup = (text: string): string => {
+    return GLib.markup_escape_text(text, -1);
+};