chore: upgrade i18next 26, prettier 3, fontsource-variable, domhandler 6, lint-staged 17

- i18next 23->26 + react-i18next 15->17
- prettier 2->3, reformat all files
- replace @fontsource/inter with @fontsource-variable/inter 5, update import path
- domhandler 5->6 (aligns with transitive deps)
- lint-staged 16->17

src/app/components/editor/Editor.tsx

@@ -36,7 +36,7 @@ const withInline = (editor: Editor): Editor => {
 
   editor.isInline = (element) =>
     [BlockType.Mention, BlockType.Emoticon, BlockType.Link, BlockType.Command].includes(
-      element.type
+      element.type,
     ) || isInline(element);
 
   return editor;
@@ -88,11 +88,11 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
       onChange,
       onPaste,
     },
-    ref
+    ref,
   ) => {
     const renderElement = useCallback(
       (props: RenderElementProps) => <RenderElement {...props} />,
-      []
+      [],
     );
 
     const renderLeaf = useCallback((props: RenderLeafProps) => <RenderLeaf {...props} />, []);
@@ -103,7 +103,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
         const shortcutToggled = toggleKeyboardShortcut(editor, evt);
         if (shortcutToggled) evt.preventDefault();
       },
-      [editor, onKeyDown]
+      [editor, onKeyDown],
     );
 
     const renderPlaceholder = useCallback(
@@ -115,7 +115,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
           </Text>
         </span>
       ),
-      []
+      [],
     );
 
     return (
@@ -160,5 +160,5 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
         </Slate>
       </div>
     );
-  }
+  },
 );

src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx

@@ -51,14 +51,14 @@ export function EmoticonAutocomplete({
     const list: Array<EmoticonSearchItem> = [];
     return list.concat(
       imagePacks.flatMap((pack) => pack.getImages(ImageUsage.Emoticon)),
-      emojis
+      emojis,
     );
   }, [imagePacks]);
 
   const [result, search, resetSearch] = useAsyncSearch(
     searchList,
     getEmoticonSearchStr,
-    SEARCH_OPTIONS
+    SEARCH_OPTIONS,
   );
   const autoCompleteEmoticon = result ? result.items.slice(0, 20) : recentEmoji;
 

src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx

@@ -91,9 +91,9 @@ export function RoomMentionAutocomplete({
         if (alias) return [r.name, alias];
         return r.name;
       },
-      [mx]
+      [mx],
     ),
-    SEARCH_OPTIONS
+    SEARCH_OPTIONS,
   );
 
   const autoCompleteRoomIds = result ? result.items.slice(0, 20) : allRooms.slice(0, 20);
@@ -111,7 +111,7 @@ export function RoomMentionAutocomplete({
       name.startsWith('#') ? name : `#${name}`,
       roomId === roomAliasOrId || mx.getRoom(roomId)?.getCanonicalAlias() === roomAliasOrId,
       undefined,
-      viaServers
+      viaServers,
     );
     replaceWithElement(editor, query.range, mentionEl);
     moveCursor(editor, true);

src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx

@@ -98,7 +98,7 @@ export function UserMentionAutocomplete({
 
   const [result, search, resetSearch] = useAsyncSearch(members, getRoomMemberStr, SEARCH_OPTIONS);
   const autoCompleteMembers = (result ? result.items.slice(0, 20) : members.slice(0, 20)).filter(
-    withAllowedMembership
+    withAllowedMembership,
   );
 
   useEffect(() => {
@@ -110,7 +110,7 @@ export function UserMentionAutocomplete({
     const mentionEl = createMentionElement(
       uId,
       name.startsWith('@') ? name : `@${name}`,
-      mx.getUserId() === uId || roomAliasOrId === uId
+      mx.getUserId() === uId || roomAliasOrId === uId,
     );
     replaceWithElement(editor, query.range, mentionEl);
     moveCursor(editor, true);

src/app/components/editor/autocomplete/autocompleteQuery.ts

@@ -22,7 +22,7 @@ export type AutocompleteQuery<TPrefix extends string> = {
 export const getAutocompletePrefix = <TPrefix extends string>(
   editor: Editor,
   queryRange: BaseRange,
-  validPrefixes: readonly TPrefix[]
+  validPrefixes: readonly TPrefix[],
 ): TPrefix | undefined => {
   const world = Editor.string(editor, queryRange);
   return validPrefixes.find((p) => world.startsWith(p));
@@ -31,13 +31,13 @@ export const getAutocompletePrefix = <TPrefix extends string>(
 export const getAutocompleteQueryText = (
   editor: Editor,
   queryRange: BaseRange,
-  prefix: string
+  prefix: string,
 ): string => Editor.string(editor, queryRange).slice(prefix.length);
 
 export const getAutocompleteQuery = <TPrefix extends string>(
   editor: Editor,
   queryRange: BaseRange,
-  validPrefixes: readonly TPrefix[]
+  validPrefixes: readonly TPrefix[],
 ): AutocompleteQuery<TPrefix> | undefined => {
   const prefix = getAutocompletePrefix(editor, queryRange, validPrefixes);
   if (!prefix) return undefined;

src/app/components/editor/input.ts

@@ -77,7 +77,7 @@ const getInlineNodeMarkType = (node: Element): MarkType | undefined => {
 const getInlineMarkElement = (
   markType: MarkType,
   node: Element,
-  getChild: (child: ChildNode) => InlineElement[]
+  getChild: (child: ChildNode) => InlineElement[],
 ): InlineElement[] => {
   const children = node.children.flatMap(getChild);
   const mdSequence = node.attribs['data-md'];
@@ -115,7 +115,7 @@ const getInlineNonMarkElement = (node: Element): MentionElement | EmoticonElemen
           getText(node) || roomMention.roomIdOrAlias,
           false,
           undefined,
-          roomMention.viaServers
+          roomMention.viaServers,
         );
       }
       const eventMention = parseMatrixToRoomEvent(href);
@@ -125,7 +125,7 @@ const getInlineNonMarkElement = (node: Element): MentionElement | EmoticonElemen
           getText(node) || eventMention.roomIdOrAlias,
           false,
           eventMention.eventId,
-          eventMention.viaServers
+          eventMention.viaServers,
         );
       }
     }
@@ -167,7 +167,7 @@ const getInlineElement = (node: ChildNode, processText: ProcessTextCallback): In
 
 const parseBlockquoteNode = (
   node: Element,
-  processText: ProcessTextCallback
+  processText: ProcessTextCallback,
 ): BlockQuoteElement[] | ParagraphElement[] => {
   const quoteLines: Array<InlineElement[]> = [];
   let lineHolder: InlineElement[] = [];
@@ -259,7 +259,7 @@ const parseCodeBlockNode = (node: Element): CodeBlockElement[] | ParagraphElemen
 const parseListMarkdown = (
   node: Element,
   processText: ProcessTextCallback,
-  depth = 0
+  depth = 0,
 ): ParagraphElement[] => {
   const md = isTag(node) && node.name === 'ul' ? '*' : '-';
   const prefix = node.attribs['data-md'] ?? md;
@@ -269,7 +269,7 @@ const parseListMarkdown = (
   const digit = digitOrChar ? parseInt(digitOrChar, 10) : undefined;
 
   const lines: ParagraphElement[] = [];
-  let lineNo = digit === undefined || Number.isNaN(digit) ? digitOrChar ?? 1 : digit;
+  let lineNo = digit === undefined || Number.isNaN(digit) ? (digitOrChar ?? 1) : digit;
   const pushLine = (line: InlineElement[]) => {
     lines.push({
       type: BlockType.Paragraph,
@@ -353,7 +353,7 @@ const parseListLines = (children: ChildNode[], processText: ProcessTextCallback)
 };
 const parseListNode = (
   node: Element,
-  processText: ProcessTextCallback
+  processText: ProcessTextCallback,
 ): OrderedListElement[] | UnorderedListElement[] | ParagraphElement[] => {
   if (node.attribs['data-md'] !== undefined) {
     return parseListMarkdown(node, processText);
@@ -385,7 +385,7 @@ const parseListNode = (
 };
 const parseHeadingNode = (
   node: Element,
-  processText: ProcessTextCallback
+  processText: ProcessTextCallback,
 ): HeadingElement | ParagraphElement => {
   const children = getInlineElement(node, processText);
 
@@ -411,7 +411,7 @@ const parseHeadingNode = (
 export const domToEditorInput = (
   domNodes: ChildNode[],
   processText: ProcessTextCallback,
-  processLineStartText: ProcessTextCallback
+  processLineStartText: ProcessTextCallback,
 ): Descendant[] => {
   const children: Descendant[] = [];
 

src/app/components/editor/output.ts

@@ -74,7 +74,7 @@ const elementToCustomHtml = (node: CustomElement, children: string): string => {
     case BlockType.Emoticon:
       return node.key.startsWith('mxc://')
         ? `<img data-mx-emoticon src="${node.key}" alt="${sanitizeText(
-            node.shortcode
+            node.shortcode,
           )}" title="${sanitizeText(node.shortcode)}" height="32" />`
         : sanitizeText(node.key);
     case BlockType.Link:
@@ -92,12 +92,12 @@ const ignoreHTMLParseInlineMD = (text: string): string =>
     text,
     HTML_TAG_REG_G,
     (match) => match[0],
-    (txt) => parseInlineMD(txt)
+    (txt) => parseInlineMD(txt),
   ).join('');
 
 export const toMatrixCustomHTML = (
   node: Descendant | Descendant[],
-  opts: OutputOptions
+  opts: OutputOptions,
 ): string => {
   let markdownLines = '';
   const parseNode = (n: Descendant, index: number, targetNodes: Descendant[]) => {

src/app/components/editor/utils.ts

@@ -160,7 +160,7 @@ export const createMentionElement = (
   name: string,
   highlight: boolean,
   eventId?: string,
-  viaServers?: string[]
+  viaServers?: string[],
 ): MentionElement => ({
   type: BlockType.Mention,
   id,
@@ -180,7 +180,7 @@ export const createEmoticonElement = (key: string, shortcode: string): EmoticonE
 
 export const createLinkElement = (
   href: string,
-  children: string | FormattedText[]
+  children: string | FormattedText[],
 ): LinkElement => ({
   type: BlockType.Link,
   href,
@@ -213,7 +213,7 @@ interface PointUntilCharOptions {
 export const getPointUntilChar = (
   editor: Editor,
   cursorPoint: BasePoint,
-  options: PointUntilCharOptions
+  options: PointUntilCharOptions,
 ): BasePoint | undefined => {
   let targetPoint: BasePoint | undefined;
   let prevPoint: BasePoint | undefined;