Simplemde-markdown-editor: Text cursor misplaced

[dlazzy]

Hello,

I'm having an issue with the text cursor. It seems to be misplaced, look at the screen :

When nothing in the textarea :

I'm using Bulma as front-end.
Font-awesome is loaded.
This is my textarea :

<textarea id="text" name="text" required></textarea>

JS load order :

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

And the script to enable Simplemde :

<script type="text/javascript">
    new SimpleMDE({
      element: document.getElementById("text"),
      spellChecker: false,
      hideIcons: ["guide"],
      placeholder: "Text in markdown...",
      autosave: {
            enabled: true,
            uniqueId: "1",
            delay: 15000,
        },
      renderingConfig: {
            singleLineBreaks: true,
            codeSyntaxHighlighting: true,
        },
    });
  </script>

Thanks for you help !

[Alig96]

I'm also having this issue. I assume there's something about Bulma that is conflicting, since I also have Bulma installed.

[dlazzy]

I try to edit some CSS in Bulma but no way. There is always the misplaced cursor :thinking:

[Alig96]

I've narrowed down the issue to the pre CodeMirror-line.
It is inheriting from Bulma:
margin-bottom: 1em;
As a temporary fix for bulma, I've inserted this slot of code and the cursor behaves how it should.

<style type="text/css">
    .content p:not(:last-child), .content dl:not(:last-child), .content ol:not(:last-child), .content ul:not(:last-child), .content blockquote:not(:last-child), .content pre:not(:last-child), .content table:not(:last-child){
        margin-bottom: 0em;
    }
</style>

I'm not sure how much it will affect the rest of Bulma. I'm unsure if this is fixable by Sparksuite, I'm not too well versed in CSS.

[dlazzy]

You apply this rules on simpleMde textarea ?

[Alig96]

This is where i got the selector from:
https://i.gyazo.com/3848bac2c7aabd696b10fef42ff03c82.png

The Bulma selector seems to have a higher precedence than any rule I try to apply to .CodeMirror pre

Fix:

<!-- Fix for cursor -->
<style type="text/css">
    .CodeMirror pre{
        margin-bottom: 0em !important;
    }
</style>

[denismitr]

There may be another solution: to make the original input hidden

 <input id="body" type="hidden" name="body">

for me it solved the problem of cursor

[lykkechen]

I used the previewRender function 🎉.

From docs

previewRender: function(plainText) {
    return customMarkdownParser(plainText); // Returns HTML from a custom parser
}

My example:

I used marked to convert the markdown in HTML and I used Bulma for the styling

data () {
    return {
      configs: {
        spellChecker: false,
        previewRender: (plainText) => {
          return `<div class="content">${ marked(plainText) }</div>`
        }
      }
    }
  }