Breaks the application when try to edit the code snippet extension beside #406
Comments
|
@wajeshubham Fixed this, but not perfect. |
|
Ok thanks @jaywcjlove |
|
@jaywcjlove I'm still facing a highlighting issue for code Please let me know if I'm missing something. export const MdComp: React.FC<Props> = ({ source, className }) => {
return (
<MDEditor.Markdown
className={className}
source={source}
rehypePlugins={[[rehypeSanitize]]}
linkTarget="_blank"
/>
);
}; |
|
@wajeshubham https://codesandbox.io/embed/markdown-editor-for-react-uiwjs-react-md-editor-issues-406-44qb3y?fontsize=14&hidenavigation=1&theme=dark import React from "react";
import ReactDOM from "react-dom";
import MDEditor from "@uiw/react-md-editor";
// No import is required in the WebPack.
// import "@uiw/react-md-editor/dist/markdown-editor.css";
const mkdStr = `# Markdown Editor for [React](https://facebook.github.io/react/)
**Hello world!!!**
[](https://avatars.githubusercontent.com/u/1680273?v=4)
\`\`\`javascript
import React from "react";
import ReactDOM from "react-dom";
import MEDitor from '@uiw/react-md-editor';
\`\`\`
\`\`\`jsx
export const MdComp: React.FC<Props> = ({ source, className }) => {
return (
<MDEditor.Markdown
className={className}
source={source}
rehypePlugins={[[rehypeSanitize]]}
linkTarget="_blank"
/>
);
};
\`\`\`
`;
function App() {
return (
<div className="container">
<MDEditor.Markdown
style={{ padding: 15 }}
source={mkdStr}
linkTarget="_blank"
// previewOptions={{
// linkTarget: "_blank"
// }}
/>
</div>
);
} |
|
Removing |
|
https://codesandbox.io/embed/markdown-editor-for-react-uiwjs-react-md-editor-issues-406-44qb3y?fontsize=14&hidenavigation=1&theme=dark import React from "react";
import ReactDOM from "react-dom";
import MDEditor from "@uiw/react-md-editor";
import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
// No import is required in the WebPack.
// import "@uiw/react-md-editor/dist/markdown-editor.css";
const mkdStr = `# Markdown Editor for [React](https://facebook.github.io/react/)
**Hello world!!!**
[](https://avatars.githubusercontent.com/u/1680273?v=4)
\`\`\`javascript
import React from "react";
import ReactDOM from "react-dom";
import MEDitor from '@uiw/react-md-editor';
\`\`\`
\`\`\`jsx
export const MdComp: React.FC<Props> = ({ source, className }) => {
return (
<MDEditor.Markdown
className={className}
source={source}
rehypePlugins={[[rehypeSanitize]]}
linkTarget="_blank"
/>
);
};
\`\`\`
`;
function App() {
return (
<div className="container">
<MDEditor.Markdown
style={{ padding: 15 }}
source={mkdStr}
linkTarget="_blank"
// rehypePlugins={[[rehypeSanitize]]}
pluginsFilter={(type, plugin) => {
if (type === "rehype") {
// plugin.push(rehypeSanitize);
plugin.unshift([
rehypeSanitize,
{
...defaultSchema,
attributes: {
...defaultSchema.attributes,
code: [
...(defaultSchema.attributes.code || []),
// List of all allowed languages:
[
"className",
"language-jsx",
"language-javascript",
"language-jsx",
"language-js",
"language-css",
"language-md"
]
]
}
}
]);
console.log(plugin);
}
return plugin;
}}
// previewOptions={{
// linkTarget: "_blank"
// }}
/>
</div>
);
} |
|
Thanks @jaywcjlove. Last question, how much secure is the rehypen plugin? Do we need to use something like |
|
I'm not sure how safe it is, you can ask here: https://www.npmjs.com/package/rehype-sanitize |
wajeshubham
changed the title
While using
codesnippet syntax in editor and trying to edit extension text beside"```"I'm getting following error:This happens when user try to edit
"```jsx"part inside the editor:Also the code snippets are not getting highlighted in my markdown preview.
NOTE: Your own website is also crashing due to the same issue.Kindly open https://uiwjs.github.io/react-md-editor/ and try to edit the following part:
Untitled.mp4
The text was updated successfully, but these errors were encountered: