Disabling the WYSIWYG button if markdown contains iframe

Summary

I have a code that checks the initialValue of the Editor

let defaultEditor = hasEmbedded(value) ? 'markdown' : 'wysiwyg';

And I'm passing the defaultEditor value to <Editor> props:

...

  return !disabled ? (
    <EditorWrapper>
      <Editor
        ref={editorRef}
        usageStatistics={false}
        initialEditType={defaultEditor}
        initialValue={value}
        height={height}
        onChange={handleDocChange}
        toolbarItems={toolbarItems}
        {...props}
      />
    </EditorWrapper>
  ) : (
    <Viewer initialValue={value} />
  );
});

This is working fine as if the contents I'm editing contains any iframe / html element, it will switch to markdown mode, and if it contains plain text, it will use WYSIWYG.

But what I would like to achieve is to lock the user on markdown mode (prevent them from switching to wysiwyg). What I tried is to use CSS to disable the WYSIWYG button, something like this:

const EditorWrapper = styled.div`
  .wysiwyg {
    pointer-events: none;
}
`;

But it only works one time, WYSIWYG users that switched to markdown mode will not be able to go back to WYSIWYG mode even if their contents do not contain any iframes. It seems that the styled is only loaded once. I trieed to put it on handleDocChange() but still does not work.

Screenshots

Version

"dependencies": {
    "@toast-ui/react-editor": "^2.5.4",
    "react-use": "^17.3.1",
    "styled-components": "^5.3.3"
  },
"peerDependencies": {
    "@strapi/helper-plugin": "^4.0.1",
    "@strapi/strapi": "^4.0.1"
  }

Additional Context

Switching between WYSIWYG and Markdown mode removes or corrupts HTML elements such as iframes, classes, etc.

nhn / tui.editor