Better editor widget

[karolis-sh]

As rich text editor can break MDX content, a better editor is needed.

[lostfictions]

Hey there, any plans for this at the moment? I know it's a probably a big undertaking. I'm looking to use the netlify-cms widget with nontechnical users, so if the rich text editor simply breaks content at the moment I may try to use an alternative solution instead.

[karolis-sh]

@lostfictions hey, well I don't really have much time for this, though I can offer a workaround for hiding rich-text editor for the current Netlify CMS widget:

export default () => {
  let retriesCount = 5;

  const handleNormalization = setInterval(() => {
    try {
      localStorage.setItem('cms.md-mode', 'raw');
      const switchElement = document.querySelector(
        '.cms-editor-visual, .cms-editor-raw [class*="-EditorControlBar"] [class*="-ToolbarToggle"]'
      );
      const toolbarElement = document.querySelector(
        '.cms-editor-visual, .cms-editor-raw [class*="-EditorControlBar"] [class*="-ToolbarContainer"]'
      );
      const widgetContainerElement = document.querySelector(
        '.cms-editor-visual, .cms-editor-raw .css-oosmhs'
      );

      if (switchElement && toolbarElement && widgetContainerElement) {
        switchElement.style.display = 'none';
        toolbarElement.style.display = 'none';
        widgetContainerElement.style.borderTop = '2px solid #DFDFE3';
        clearInterval(handleNormalization);
      }
    } catch (e) {
      console.log('Could not normalize markdown widget', e);
      clearInterval(handleNormalization);
    }

    retriesCount--;
    if (retriesCount <= 0) {
      clearInterval(handleNormalization);
    }
  }, 300);
};

Just call it this function in the cms.js initialization file. As I said this is a bit hackish-workaround but gets the job done. Initially, I would imagine something more pragmatic, but that would require a bit more time. I might include this in this library later. Anyway hope this helps with your use-case.

[lostfictions]

Thanks for the reply! That's probably not ideal for my use case, so I may spend some time looking for a better solution. Would you be open to PRs for this repo?

[karolis-sh]

Sure thing! FYI, you can easily swap the input widget with any React component:

import { MdxControl, MdxPreview } from 'netlify-cms-widget-mdx';

CMS.registerWidget('mdx', MdxControl, MdxPreview);

The MdxControl is the input component, so you can easily experiment.