Looking for help to add grammarly support in the preview.

DNonov commented 4 years ago

While wondering on the internet to find a way to get grammar support in vim like Grammarly in Chrome. I stumble upon this Reddit thread and there was a user suggesting to use your extension and add contenteditable="true" attribute in order Grammarly to kick off. So I did a manual test and add the attribute in the browser and it worked.

When I looked in the codebase I thought I only need to add contentEditable={true} to the div with id 'page-ctn'. So I edited ./app/pages/index.jsx and add contentEditable attribute to the #page-ctn, however, this attribute was not rendered when :MarkdownPreview is executed. Here is the render function of ./app/pages/index.jsx after my edit.

  render() {
    const { content, name, pageTitle } = this.state
    return (
      <React.Fragment>
        <Head>
          <title>{(pageTitle || '').replace(/\$\{name\}/, name)}</title>
          <link rel="shortcut icon" type="image/ico" href="/_static/favicon.ico" />
          <link rel="stylesheet" href="/_static/page.css" />
          <link rel="stylesheet" href="/_static/markdown.css" />
          <link rel="stylesheet" href="/_static/highlight.css" />
          <link rel="stylesheet" href="/_static/katex@0.11.1.css" />
          <link rel="stylesheet" href="/_static/sequence-diagram-min.css" />
          <script type="text/javascript" src="/_static/underscore-min.js"></script>
          <script type="text/javascript" src="/_static/webfont.js"></script>
          <script type="text/javascript" src="/_static/snap.svg.min.js"></script>
          <script type="text/javascript" src="/_static/tweenlite.min.js"></script>
          <script type="text/javascript" src="/_static/mermaid.min.js"></script>
          <script type="text/javascript" src="/_static/sequence-diagram-min.js"></script>
          <script type="text/javascript" src="/_static/katex@0.11.1.js"></script>
          <script type="text/javascript" src="/_static/mhchem.min.js"></script>
          <script type="text/javascript" src="/_static/raphael@2.3.0.min.js"></script>
          <script type="text/javascript" src="/_static/flowchart@1.13.0.min.js"></script>
          <script type="text/javascript" src="/_static/viz.js"></script>
          <script type="text/javascript" src="/_static/full.render.js"></script>
        </Head>
        <div id="page-ctn" contentEditable={true}>
          <header id="page-header">
            <h3>
              <svg
                viewBox="0 0 16 16"
                version="1.1"
                width="16"
                height="16"
                aria-hidden="true"
              >
                <path
                  fill-rule="evenodd"
                  d="M3 5h4v1H3V5zm0 3h4V7H3v1zm0 2h4V9H3v1zm11-5h-4v1h4V5zm0 2h-4v1h4V7zm0 2h-4v1h4V9zm2-6v9c0 .55-.45 1-1 1H9.5l-1 1-1-1H2c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h5.5l1 1 1-1H15c.55 0 1 .45 1 1zm-8 .5L7.5 3H2v9h6V3.5zm7-.5H9.5l-.5.5V12h6V3z"
                >
                </path>
              </svg>
              {name}
            </h3>
          </header>
          <section
            className="markdown-body"
            dangerouslySetInnerHTML={{
              __html: content
            }}
          />
        </div>
      </React.Fragment>
    )
  }

So can you give me some gudlines how to overcome this problem? If you point me to the right way I can send you a PR.

You can probably agree enabling Grammarly in the preview is a nice thing to have. Especially for non-native English speakers like me.

Thanks for the nice plugin.

iamcco commented 4 years ago

You are almost done, just change contentEditable={true} to contentEditable="true"

DNonov commented 4 years ago

Hello, I don't think this is the issue here. Because I did it both ways, and the result was the same. However, I found a quote in React Docs about an attribute related to the problem.

suppressContentEditableWarning Normally, there is a warning when an element with children is also marked as contentEditable, because it won’t work. This attribute suppresses that warning. Don’t use this unless you are building a library like Draft.js that manages contentEditable manually.

Given that I went all the way down the tree and added both of the attributes suppressContentEditableWarning and contentEditable to the section element. In hope, this is the last element without children. I've been trying unsuccessfully all sorts of permutations of suppressContentEditableWarning and contentEditable just to find if it's a syntax error.

The problem here is deeper than I thought. We need to add contentEditable attribute to every single leaf in the tree e.g. p, H1, H2 etc. Doing so will scatter the preview in many content editable pieces independent of each other. The desired effect to have one big content editable area containing the whole preview probably would be only possible if we add the attribute contenteditable="true" post-React or ReactDOM.render() the whole preview in element that already has contenteditable="true".

Any thoughts on this? Thanks in advance.

iamcco commented 4 years ago

No, you have to build the code using yarn build-app

DNonov commented 4 years ago

Thanks for the fast response.

I ran yarn build-app. I used my fork to test and when ran :MarkdownPreview I had the following error.

[markdown-preview.vim] uncaught exception: Error: ENOENT: no such file or directory, open 'out/_next/static/hrTL4mrT0luNybvNDP1eH/pages/_app.js'

And the section element with class markdown-body was empty. I guess I'm doing something wrong and there is a problem with the build process.

Here is the complete git status after I did the change and ran yarn install and yarn build-app.

    modified:   app/out/404.html
    deleted:    app/out/_next/static/~A0xCHcAl1EQY6jjqSLQe/pages/404.js
    deleted:    app/out/_next/static/~A0xCHcAl1EQY6jjqSLQe/pages/_app.js
    deleted:    app/out/_next/static/~A0xCHcAl1EQY6jjqSLQe/pages/_error.js
    deleted:    app/out/_next/static/~A0xCHcAl1EQY6jjqSLQe/pages/index.js
    modified:   app/out/index.html
    modified:   app/pages/index.jsx

Any idea what I'm doing wrong? Sorry for the constant stream of questions though. Thanks

iamcco commented 4 years ago

setting:

let g:mkdp_preview_options = {
  \ 'content_editable': v:true
  \ }

DNonov commented 4 years ago

Thanks for the feature!

iamcco / markdown-preview.nvim

Looking for help to add grammarly support in the preview. #192