fix: remove react-dom/server from client bundle in inline-mention-editor.tsx

This commit is contained in:
Matt Van Horn 2026-04-12 23:02:43 -04:00
parent 5da2d95d80
commit 6e116d1fc9
No known key found for this signature in database

View file

@ -10,7 +10,8 @@ import {
useRef,
useState,
} 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 type { Document } from "@/contracts/types/document.types";
import { cn } from "@/lib/utils";
@ -83,6 +84,12 @@ function getChipDocType(element: Element): string {
return element.getAttribute(CHIP_DOCTYPE_ATTR) ?? "UNKNOWN";
}
function renderIconToElement(reactElement: React.ReactElement, container: HTMLElement): void {
flushSync(() => {
createRoot(container).render(reactElement);
});
}
export const InlineMentionEditor = forwardRef<InlineMentionEditorRef, InlineMentionEditorProps>(
(
{
@ -186,8 +193,9 @@ export const InlineMentionEditor = forwardRef<InlineMentionEditorRef, InlineMent
const iconSpan = document.createElement("span");
iconSpan.className = "flex items-center text-muted-foreground";
iconSpan.innerHTML = ReactDOMServer.renderToString(
getConnectorIcon(doc.document_type ?? "UNKNOWN", "h-3 w-3")
renderIconToElement(
getConnectorIcon(doc.document_type ?? "UNKNOWN", "h-3 w-3"),
iconSpan
);
const removeBtn = document.createElement("button");
@ -195,8 +203,9 @@ export const InlineMentionEditor = forwardRef<InlineMentionEditorRef, InlineMent
removeBtn.className =
"size-3 items-center justify-center rounded-full text-muted-foreground transition-colors";
removeBtn.style.display = "none";
removeBtn.innerHTML = ReactDOMServer.renderToString(
createElement(X, { className: "h-3 w-3", strokeWidth: 2.5 })
renderIconToElement(
createElement(X, { className: "h-3 w-3", strokeWidth: 2.5 }),
removeBtn
);
removeBtn.onclick = (e) => {
e.preventDefault();