diff --git a/package.json b/package.json
index 5f8f878fe..b1d7095c6 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "react-test-renderer": "~18.2.0",
+    "rehype-sanitize": "^6.0.0",
     "tsbb": "^4.5.1",
     "vite": "^7.3.1",
     "less": "^4.0.0"
diff --git a/test/html-comment-preview.test.tsx b/test/html-comment-preview.test.tsx
new file mode 100644
index 000000000..3c084ede0
--- /dev/null
+++ b/test/html-comment-preview.test.tsx
@@ -0,0 +1,30 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import rehypeSanitize from 'rehype-sanitize';
+import MDEditor from '../core/src';
+import MDEditorCommon from '../core/src/index.common';
+import MDEditorNoHighlight from '../core/src/index.nohighlight';
+
+const cases = [
+  ['doctype and unfinished HTML comment', '<!DOCTYPE html><!-- <html>\n  <head>\n'],
+  ['other tags inside an unfinished comment', '<!DOCTYPE html><!-- <div>\n  <span>\n'],
+  ['unfinished comment without doctype', '<!-- <html>\n  <head>\n'],
+] as const;
+
+const editors = [
+  ['default', MDEditor],
+  ['common', MDEditorCommon],
+  ['nohighlight', MDEditorNoHighlight],
+] as const;
+
+describe.each(editors)('%s Markdown preview', (_name, Editor) => {
+  it.each(cases)('renders %s without crashing', (_label, source) => {
+    expect(() => render(<Editor.Markdown source={source} />)).not.toThrow();
+  });
+  it.each(cases)('renders %s with rehype-sanitize', (_label, source) => {
+    expect(() => render(<Editor.Markdown source={source} rehypePlugins={[rehypeSanitize]} />)).not.toThrow();
+  });
+});