Im not being able to avoid convert html tags from the markdown editor to html tags in preview mode

[Zabraks]

Hello!

im trying to create an editor that doesnt convert html tags from the editor. When i put this:

I need the html to be interpreted as a string, like this: <em>html</em> but without code syntax.

Is there a prop or something to prevent this?

[jaywcjlove]

@Zabraks I'm not sure if it's your idea. Example: https://codesandbox.io/embed/uiwjs-react-md-editor-issues-366-idnbsm?fontsize=14&hidenavigation=1&theme=dark

• disallowedElements (Array.<string>, default: undefined) Tag names to disallow (can’t combine w/ allowedElements). By default no elements are disallowed

<MDEditor
    height={200}
    value={value}
    previewOptions={{
       disallowedElements: ['em']
    }}
/>

You can also use the rehype-rewrite plugin to solve the single tag problem.

import React from "react";
import ReactDOM from "react-dom";
import MDEditor from "@uiw/react-md-editor";
import rehypeRewrite from "rehype-rewrite";
// No import is required in the WebPack.
// import "@uiw/react-md-editor/dist/markdown-editor.css";

const mkdStr = `<em>html</em>`;

function App() {
  const [value, setValue] = React.useState(mkdStr);
  return (
    <div className="container">
      <h3>Auto</h3>
      <MDEditor
        height={200}
        value={value}
        previewOptions={{
          rehypePlugins: [
            [
              rehypeRewrite,
              {
                rewrite: (node, index, parent) => {
                  if (node.type === "element" && node.tagName === "em") {
                    const child = node.children[0].value;
                    node.type = "text";
                    node.value = `<em>${child}</em>`;
                  }
                }
              }
            ]
          ]
        }}
        onChange={setValue}
      />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));

[Zabraks]

Its not exactly like this. I need to avoid convert all the html code but no the Markdown syntax. In this example:

i need this output:

I don't want the editor to convert the html code but only the markdown syntax

[jaywcjlove]

@Zabraks Example: https://codesandbox.io/s/uiwjs-react-md-editor-issues-366-idnbsm?from-embed=&file=/index.js:0-1349

import React from "react";
import ReactDOM from "react-dom";
import MDEditor from "@uiw/react-md-editor";

const mkdStr = `<em>html2</em>

**markdown hello**

<div>sss</div>`;

function App() {
  const [value, setValue] = React.useState(mkdStr);
  return (
    <div className="container">
      <h3>Auto</h3>
      <MDEditor
        height={200}
        value={value}
        previewOptions={{
          pluginsFilter: (type, plugins) => {
            if (type === "rehype") {
              return plugins.filter((item) => item.name === "rehypeSlug");
            } else {
              return plugins;
            }
          },
        }}
        onChange={setValue}
      />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));

[Zabraks]

It works yes!!!!

the only problem I have is that it does not respect tabs or line breaks when the editor finds html code

output:

I dont know if its possible to handle this

But anyways, thx so much!

[jaywcjlove]

Your idea is not Markdown syntax.

I think extending the plugin yourself should be able to do what you want. @Zabraks