diff --git a/ui/src/components/MarkdownEditor.test.tsx b/ui/src/components/MarkdownEditor.test.tsx index 106a394b996..d175f5e4622 100644 --- a/ui/src/components/MarkdownEditor.test.tsx +++ b/ui/src/components/MarkdownEditor.test.tsx @@ -19,6 +19,7 @@ const mdxEditorMockState = vi.hoisted(() => ({ emitMountParseError: false, emitMountSilentEmptyState: false, markdownValues: [] as string[], + suppressHtmlProcessingValues: [] as boolean[], })); vi.mock("@mdxeditor/editor", async () => { @@ -41,16 +42,20 @@ vi.mock("@mdxeditor/editor", async () => { onChange, onError, className, + suppressHtmlProcessing, }: { markdown: string; placeholder?: string; onChange?: (value: string) => void; onError?: (error: unknown) => void; className?: string; + suppressHtmlProcessing?: boolean; + className?: string; }, forwardedRef: React.ForwardedRef<{ setMarkdown: (value: string) => void; focus: () => void } | null>, ) { mdxEditorMockState.markdownValues.push(markdown); + mdxEditorMockState.suppressHtmlProcessingValues.push(Boolean(suppressHtmlProcessing)); const [content, setContent] = React.useState(markdown); const editableRef = React.useRef(null); const handle = React.useMemo(() => ({ @@ -59,8 +64,16 @@ vi.mock("@mdxeditor/editor", async () => { }), []); React.useEffect(() => { + if (!suppressHtmlProcessing && markdown.includes(" { setForwardedRef(forwardedRef, null); @@ -114,6 +127,8 @@ vi.mock("@mdxeditor/editor", async () => { markdownShortcutPlugin: () => ({}), quotePlugin: () => ({}), realmPlugin: (plugin: unknown) => plugin, + jsxPlugin: () => ({}), + GenericJsxEditor: () => null, tablePlugin: () => ({}), thematicBreakPlugin: () => ({}), }; @@ -165,6 +180,7 @@ describe("MarkdownEditor", () => { mdxEditorMockState.emitMountParseError = false; mdxEditorMockState.emitMountSilentEmptyState = false; mdxEditorMockState.markdownValues = []; + mdxEditorMockState.suppressHtmlProcessingValues = []; }); it("applies async external value updates once the editor ref becomes ready", async () => { @@ -238,6 +254,7 @@ describe("MarkdownEditor", () => { await flush(); expect(mdxEditorMockState.markdownValues.at(-1)).toContain("![image](https://example.com/test.png)"); expect(mdxEditorMockState.markdownValues.at(-1)).not.toContain(" { root.unmount(); }); }); - it("anchors the mention menu inside the visual viewport when mobile offsets are present", () => { expect( computeMentionMenuPosition( diff --git a/ui/src/components/MarkdownEditor.tsx b/ui/src/components/MarkdownEditor.tsx index 73b7951f83e..e73c81f3226 100644 --- a/ui/src/components/MarkdownEditor.tsx +++ b/ui/src/components/MarkdownEditor.tsx @@ -505,6 +505,7 @@ export const MarkdownEditor = forwardRef const [isDragOver, setIsDragOver] = useState(false); const [richEditorError, setRichEditorError] = useState(null); const dragDepthRef = useRef(0); + const suppressHtmlProcessing = / onPasteCapture={handlePasteCapture} > { const echo = echoIgnoreMarkdownRef.current; if (echo !== null && next === echo) {