apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-10 22:32:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1229 from xr843/fix/remove-react-dom-server

Browse source 
fix(web): drop react-dom/server from inline-mention-editor bundle
This commit is contained in:
Rohan Verma 2026-04-15 10:46:19 -07:00 • committed by GitHub
commit 5b8fdff6b6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 20 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

23
surfsense_web/components/assistant-ui/inline-mention-editor.tsx
View file

@ -1,6 +1,7 @@
"use client"; "use client";
import { X } from "lucide-react"; import { X } from "lucide-react";
import type { ReactElement } from "react";
import { import {
createElement, createElement,
forwardRef, forwardRef,
@ -10,11 +11,27 @@ import {
useRef, useRef,
useState, useState,
} from "react"; } from "react";
import ReactDOMServer from "react-dom/server"; import { flushSync } from "react-dom";
import { createRoot } from "react-dom/client";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons"; import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import type { Document } from "@/contracts/types/document.types"; import type { Document } from "@/contracts/types/document.types";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
// Render a React element to an HTML string on the client without pulling
// `react-dom/server` into the bundle. `createRoot` + `flushSync` use the
// same `react-dom` package React itself imports, so this adds zero new
// runtime weight.
function renderElementToHTML(element: ReactElement): string {
const container = document.createElement("div");
const root = createRoot(container);
flushSync(() => {
root.render(element);
});
const html = container.innerHTML;
root.unmount();
return html;
}
export interface MentionedDocument { export interface MentionedDocument {
id: number; id: number;
title: string; title: string;
@ -213,7 +230,7 @@ export const InlineMentionEditor = forwardRef<InlineMentionEditorRef, InlineMent
const iconSpan = document.createElement("span"); const iconSpan = document.createElement("span");
iconSpan.className = "flex items-center text-muted-foreground"; iconSpan.className = "flex items-center text-muted-foreground";
iconSpan.innerHTML = ReactDOMServer.renderToString( iconSpan.innerHTML = renderElementToHTML(
getConnectorIcon(doc.document_type ?? "UNKNOWN", "h-3 w-3") getConnectorIcon(doc.document_type ?? "UNKNOWN", "h-3 w-3")
); );
@ -222,7 +239,7 @@ export const InlineMentionEditor = forwardRef<InlineMentionEditorRef, InlineMent
removeBtn.className = removeBtn.className =
"size-3 items-center justify-center rounded-full text-muted-foreground transition-colors"; "size-3 items-center justify-center rounded-full text-muted-foreground transition-colors";
removeBtn.style.display = "none"; removeBtn.style.display = "none";
removeBtn.innerHTML = ReactDOMServer.renderToString( removeBtn.innerHTML = renderElementToHTML(
createElement(X, { className: "h-3 w-3", strokeWidth: 2.5 }) createElement(X, { className: "h-3 w-3", strokeWidth: 2.5 })
); );
removeBtn.onclick = (e) => { removeBtn.onclick = (e) => {