Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Markdown crashes with specific HTML-like string input #652

Open
ruben-hexens opened this issue Aug 7, 2024 · 2 comments
Open

Markdown crashes with specific HTML-like string input #652

ruben-hexens opened this issue Aug 7, 2024 · 2 comments

Comments

@ruben-hexens
Copy link

Description

When providing the string <!DOCTYPE html><!-- <html>\n <head>\n as the source of the Markdown, the @uiw/react-md-editor crashes and throws an error: "Cannot read properties of null (reading 'data')".

Steps to Reproduce

  1. Initialize @uiw/react-md-editor in a React component.
  2. Set the Markdown content to <!DOCTYPE html><!-- <html>\n <head>\n.
  3. Observe the crash and the error message.

Expected Behavior

The editor should handle the input gracefully without crashing.

Actual Behavior

The editor crashes and throws an error: "Cannot read properties of null (reading 'data')".

Additional Information

  • Version: 4.0.4
  • OS: macOS Sonoma 14.5
  • Browser: Chrome 126.0.6478.127

Relevant Code

import React, { useState } from 'react';
import MDEditor from '@uiw/react-md-editor';
import rehypeSanitize from 'rehype-sanitize';

const MarkdownEditorExample = () => {
  const [markdown, setMarkdown] = useState('<!DOCTYPE html><!-- <html>\n  <head>\n');

  return (
    <div>
      <MDEditor.Markdown source={markdown} rehypePlugins={[rehypeSanitize]} />
    </div>
  );
};

export default MarkdownEditorExample;
@jaywcjlove
Copy link
Member

@ruben-hexens You can make some settings to filter out certain tags.

react-md-editor/www/src/Example.tsx

Lines 37 to 54 in 2520e88

rehypePlugins: [
[
rehypeSanitize,
{
...defaultSchema,
attributes: {
...defaultSchema.attributes,
span: [
// @ts-ignore
...(defaultSchema.attributes.span || []),
// List of all allowed tokens:
['className'],
],
code: [['className']],
},
},
],
],

@ruben-hexens
Copy link
Author

@jaywcjlove Thank you for your response.
However, the issue isn’t just about filtering specific tags. The string I provided contains valid code, and even if you replace the <html> and <head> tags with other HTML tags, the editor still crashes.

It seems like the problem is related to how these tags are handled in the editor, rather than just filtering them out. Could you provide guidance on how to prevent the crash while allowing such valid input to be processed safely?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jaywcjlove @ruben-hexens